body {
    background-color: #F8FAFC;
    font-family: "DM Sans", sans-serif;

}

.gradient-color {
    background: linear-gradient(131.79deg, #D700B5 0%, #5217E8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.green-color {
    color: #07BEAA;
}

.red-color {
    color: #EE2E6B;
}

.bg-with-line {
    background-size: cover;
}

@media screen and (max-width: 767.98px) {
    .bg-with-line {
        background-position: bottom;
    }
}

p {
    font-weight: 500;
    font-size: 20px;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-weight: 600;
    line-height: 100%;
    letter-spacing: 0%;
}

h1,
.h1 {
    /* 60px at 1440w. Stops shrinking at 32px. Stops growing at 80px. */
    font-size: clamp(45px, 4.167vw, 65px);
}

h2,
.h2 {
    /* 48px at 1440w. Stops shrinking at 28px. */
    font-size: clamp(38px, 3.333vw, 54px);
}

h3,
.h3 {
    /* 40px at 1440w. Stops shrinking at 24px. */
    font-size: clamp(30px, 2.778vw, 46px);
}

h4,
.h4 {
    /* 32px at 1440w. Stops shrinking at 20px. */
    font-size: clamp(26px, 2.222vw, 38px);
}

h5,
.h5 {
    /* 24px at 1440w. Stops shrinking at 18px. */
    font-size: clamp(18px, 1.667vw, 32px);
}

h6,
.h6 {
    /* 18px at 1440w. Stops shrinking at 16px. */
    font-size: clamp(16px, 1.250vw, 24px);
}

.nav-item a.nav-link {
    font-size: 24px;
    font-weight: 500;
}

.fw-100 {
    font-weight: 100;
    font-size: 48px;
}

.fw-200 {
    font-weight: 200;
}

.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

/* By default, images are hidden and slightly pushed down */
/* 1. Set the stage for 3D */
.sticky-top {
    perspective: 1000px;
    /* CHANGED: Switched to visible so shadows appear */
    overflow: visible; 
    /* CHANGED: Added z-index to ensure it sits above other background elements if needed */
    z-index: 10;
    padding: 20px;
}

.feature-image-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    
    /* Smooth movement */
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;

    /* DEFAULT STATE: Hidden */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

/* --- STATE 1: ACTIVE --- */
.feature-image-card.active {
    opacity: 1;
    transform: translateX(0) translateY(0) scale(1) rotate(0deg);
    z-index: 10;
    filter: blur(0px);
    /* Shadow should now be visible due to overflow:visible on parent */
}

.feature-image-card img{
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.15);

}
/* --- STATE 2: NEXT --- */
.feature-image-card.next {
    opacity: 0;
    transform: translateX(30%) translateY(40%) scale(0.6) rotate(-15deg);
    z-index: 1;
    filter: blur(5px);
}

/* --- STATE 3: PREVIOUS --- */
.feature-image-card.prev {
    opacity: 0;
    transform: translateX(30%) translateY(-40%) scale(0.6) rotate(15deg);
    z-index: 1;
    filter: blur(5px);
}

.btn {
    --bs-btn-border-radius: 12px;
    --bs-btn-padding-x: 16px;
    font-weight: 600;
    font-size: 20px;
}

.btn-primary {
    --bs-btn-color: white;
    --bs-btn-bg: #1F67FD;
    --bs-btn-border-color: #1F67FD;

    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: #1c5de4;
    --bs-btn-hover-border-color: #1c5de4;

    --bs-btn-disabled-color: white;
    --bs-btn-disabled-bg: rgb(5, 88, 157);
    --bs-btn-disabled-border-color: ;
    --bs-btn-disabled-opacity: 1;

    --bs-btn-active-color: #1F67FD;
    --bs-btn-active-bg: #1F67FD1A;
    --bs-btn-active-border-color: #1F67FD1A;
}

.btn-secondary {
    --bs-btn-color: white;
    --bs-btn-bg: #D700B5;
    --bs-btn-border-color: #D700B5;

    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: #c100a3;
    --bs-btn-hover-border-color: #c100a3;

    --bs-btn-disabled-color: white;
    --bs-btn-disabled-bg: rgb(5, 88, 157);
    --bs-btn-disabled-border-color: ;
    --bs-btn-disabled-opacity: 1;

    --bs-btn-active-color: #1F67FD;
    --bs-btn-active-bg: #1F67FD1A;
    --bs-btn-active-border-color: #1F67FD1A;
}

.btn-light {
    --bs-btn-color: #1F67FD;
    --bs-btn-bg: #E9EFFD;
    --bs-btn-border-color: #E9EFFD;

    --bs-btn-hover-color: #1F67FD;
    --bs-btn-hover-bg: #d5e1fd;
    --bs-btn-hover-border-color: #d5e1fd;

    --bs-btn-disabled-color: white;
    --bs-btn-disabled-bg: rgb(5, 88, 157);
    --bs-btn-disabled-border-color: ;
    --bs-btn-disabled-opacity: 1;

    --bs-btn-active-color: white;
    --bs-btn-active-bg: #1F67FD;
    --bs-btn-active-border-color: #1F67FD;
}

.btn-light:active img,
.btn-light.active img {
  filter: brightness(0) invert(1);
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

.order-8 {
    order: 8;
}

.order-9 {
    order: 9;
}

.order-10 {
    order: 10;
}

.order-11 {
    order: 11;
}

.order-12 {
    order: 12;
}

.order-13 {
    order: 13;
}

.order-14 {
    order: 14;
}

.order-15 {
    order: 15;
}

.order-16 {
    order: 16;
}

@media screen and (min-width: 991.98px) {
    .order-lg-6 {
        order: 6 !important;
    }

    .order-lg-7 {
        order: 7 !important;
    }

    .order-lg-8 {
        order: 8 !important;
    }

    .order-lg-9 {
        order: 9 !important;
    }

    .order-lg-10 {
        order: 10 !important;
    }

    .order-lg-11 {
        order: 11 !important;
    }

    .order-lg-12 {
        order: 12 !important;
    }

    .order-lg-13 {
        order: 13 !important;
    }

    .order-lg-14 {
        order: 14 !important;
    }

    .order-lg-15 {
        order: 15 !important;
    }

    .order-lg-16 {
        order: 16 !important;
    }
}

.show-nicely {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.show-nicely.loaded {
    opacity: 1;
    transform: translateY(0);
}

.show-nicely.unload {
    opacity: 0;
    transform: translateY(100px);
}