@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    .p-style {
        @apply text-white font-light leading-8 md:leading-10 text-sm md:text-base;
    }
}

html,
body {
    overflow-x: hidden;
}
body {
    font-family: "Lexend", sans-serif;
}
ul li.active {
    color: #ff7c2f;
    font-weight: 500;
}
.hero {
    position: relative;
    background-image: url("../images/heroBg.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center center, center center;
}
.cuva-hero {
    position: relative;
    background-image: url("../images/cuvaHero.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center center, center center;
}
.hero::after,
.cuva-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.65;
}

.insightsBanner1 {
    position: relative;
    background-image: url("../images/insights/banner1.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center center, center center;
}
.insightsBanner2 {
    position: relative;
    background-image: url("../images/insights/banner2.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center center, center center;
}
.insightsBanner3 {
    position: relative;
    background-image: url("../images/insights/banner3.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: center center, center center;
}

.insightsBanner1::after,
.insightsBanner2::after,
.insightsBanner3::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #46307db2;
}

.banner {
    background-image: url("../images/banner.png");
    background-repeat: no-repeat, no-repeat;
    background-size: cover, cover;
    background-position: top top, center center;
}
ul li.active {
    color: #fa782b;
    font-weight: medium;
}
.brand-btns button.active {
    color: #fa782b;
    font-weight: 600;
}
.gradient-bg {
    background: linear-gradient(to bottom, #46307d 0%, #46307d 30%, #fa782b 60%, #fa782b 100%);
}

.subMenu {
    transition: transform 0.4s ease, opacity 0.3s ease;
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

.subMenu.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.gradient-line {
    background: linear-gradient(to bottom, #503478, #fa782b, #49317d);
}
.indicator span {
    transition: background-color 300ms linear;
}
.indicator span.active {
    background-color: white;
}
button.disabled {
    background-color: #fb8e3a80;
}