@import "tailwindcss";

@font-face {
    font-family: "Regular";
    src: url("../../fonts/DM Sans/DMSans-Regular.ttf");
}

@font-face {
    font-family: "Light";
    src: url("../../fonts/DM Sans/DMSans-Light.ttf");
}

@font-face {
    font-family: "Extra Light";
    src: url("../../fonts/DM Sans/DMSans-ExtraLight.ttf");
}

@font-face {
    font-family: "Medium";
    src: url("../../fonts/DM Sans/DMSans-Medium.ttf");
}

@font-face {
    font-family: "SemiBold";
    src: url("../../fonts/DMSans/DMSans-SemiBold.ttf");
}

@font-face {
    font-family: "TitleRegular";
    src: url("../../fonts/Bricolage Grotesque/BricolageGrotesque-Regular.ttf");
}

@font-face {
    font-family: "TitleLight";
    src: url("../../fonts/Bricolage Grotesque/BricolageGrotesque-Light.ttf");
}

@font-face {
    font-family: "TitleMedium";
    src: url("../../fonts/Bricolage Grotesque/BricolageGrotesque-Medium.ttf");
}

@font-face {
    font-family: "TitleSemiBold";
    src: url("../../fonts/Bricolage Grotesque/BricolageGrotesque-SemiBold.ttf");
}

@font-face {
    font-family: "TitleExtraBold";
    src: url("../../fonts/Bricolage Grotesque/BricolageGrotesque-ExtraBold.ttf");
}

@layer theme {
    :root {
        --banner-desktop-height: calc(100vh);
        --banner-mobile-height: calc(100vh);

        --font-regular: "Regular", "sans-serif";
        --font-light: "Light", "sans-serif";
        --font-extra-light: "Extra Light", "sans-serif";
        --font-medium: "Medium", "sans-serif";
        --font-semibold: "SemiBold", "sans-serif";

        --font-title-regular: "TitleRegular", "sans-serif";
        --font-title-light: "TitleLight", "sans-serif";
        --font-title-medium: "TitleMedium", "sans-serif";
        --font-title-semibold: "TitleSemiBold", "sans-serif";
        --font-title-extrabold: "TitleExtraBold", "sans-serif";

        --color-primary: #ebbdd7;
        --color-primary-dark: #cf2f89;
        --color-accent: #131313;
        --color-accent-dark: #1a1a1a;
        --color-secondary: #149739;
    }
}

.logo-navigation {
    height: 40px;
}

.font-regular,
.font-regular-hover:hover {
    font-family: var(--font-regular);
}

.font-light {
    font-family: var(--font-light);
}

.font-extra-light {
    font-family: var(--font-extra-light);
}

.font-medium {
    font-family: var(--font-medium);
}

.font-semibold {
    font-family: var(--font-semibold);
}

.font-title-regular {
    font-family: var(--font-title-regular);
}

.font-title-light {
    font-family: var(--font-title-light);
}

.font-title-medium {
    font-family: var(--font-title-medium);
}

.font-title-semibold {
    font-family: var(--font-title-semibold);
}

.font-title-extrabold {
    font-family: var(--font-title-extrabold);
}

/* LAYOUT */
.navigation-item.gtm {
    letter-spacing: normal !important;
}

.navigation-wrapper .navigation-icon {
    display: none;
}

.navigation-wrapper.active .navigation-icon,
.navigation-wrapper:hover .navigation-icon {
    display: block !important;
}

/* TAGLINE */
.text-color-gradient {
    background: linear-gradient(90deg, #cf2f89 0%, #ebbdd7 50%, #ebbdd7 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* FAQ */
.faq-item .description-list {
    transition: height 2s;
}
.faq-item:hover .font-color-primary,
.faq-item:hover .font-color-white {
    color: var(--color-accent);
}