.hero-carousel {
    position: relative;
}

.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
}

.carousel-item {
    display: none;
    transition: opacity 1s ease-in-out;
}

.carousel-item.active {
    display: block;
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 100%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 2px;
    cursor: pointer;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: .4rem;
    height: .4rem;
}

.carousel-control-prev {
    left: 10px;
}

.carousel-control-next {
    right: 10px;
}

.btn:hover {
    background-color: #e0e0e0; /* Lighter background on hover */
    transform: scale(1.05); /* Slightly enlarge the button */
    transition: all 0.3s ease; /* Smooth transition */
}

.btn-outline-orange:hover {
    background-color: #ef6b3a; /* Orange background on hover */
    color: white; /* White text on hover */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: #ef6b3a; /* Orange background on hover */
}

/* Stat cards styles */
.stat-card {
    background-color: #fff;
    border: 1px solid #eee;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-align: center;
    min-width: 200px; /* Ensure cards have a minimum width */
}

.stat-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}


.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stacked gallery */
.stacked-gallery {
    background: #fafafa;
}
.stack-gallery {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 420px;
    margin: 0 auto;
    perspective: 1200px;
    overflow: hidden;
}
.stack-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 100%;
    transform: translate(-50%, -50%);
    transition: transform 700ms cubic-bezier(.2,.9,.3,1), opacity 700ms ease, z-index 0ms;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-radius: 8px;
    overflow: hidden;
}
.stack-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.stack-item[data-index="0"] { z-index: 40; }
.stack-item[data-index="1"] { z-index: 30; transform: translate(-45%, -45%) scale(0.97) rotate(-1deg); }
.stack-item[data-index="2"] { z-index: 20; transform: translate(-40%, -40%) scale(0.94) rotate(-2deg); }
.stack-item[data-index="3"] { z-index: 10; transform: translate(-35%, -35%) scale(0.91) rotate(-3deg); }

.stack-item.leaving {
    transform: translate(-50%, 120%) scale(0.9) rotate(6deg);
    opacity: 0;
    z-index: 1 !important; /* move behind others while leaving */
    pointer-events: none;
}

@media (max-width: 767px) {
    .stack-gallery { height: 300px; }
    .stack-item { width: 90%; }
}

.stat-num {
    font-size: 2.5em;
    font-weight: bold;
    color: #f1642b; /* Specified color */
    margin-bottom: 5px;
}

.stat-label {
    font-size: 1em;
    color: #6c757d;
}

.carousel-inner img {
    max-height: 500px; /* Set a maximum height */
    object-fit: cover; /* Crop the image to fit while maintaining aspect ratio */
}

.hero-title,
.why h3 {
    text-shadow: 6px 5px 2px #efcb669e;
        font-size: 5rem;
    color:rgb(53, 52, 52);
    font-family:  Meriweather, Verdana, Geneva, Tahoma, sans-serif;
    font-style: bold;

}
.why h3 {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 0.5rem;
}
.hero-sub {
        font-size: 1.8rem;
    color: #4544448a;
    font-family:  'Open Sans', sans-serif;
    font-weight: bold;
}

    /* Hero specific styles */
    .hero-title {
        font-size: 4rem; /* moved from inline */
        margin-bottom: 0.75rem;
    }

    .hero-separator {
        width: 550px;
        height: 5px;
        border: none;
        background: linear-gradient(90deg, #e2450c, #f1632b6a);
        margin: 0.5rem 0 1rem 0;
        border-radius: 2px;
    }

    .hero-sub {
        font-size: 1.75rem;
        color: #333;
        margin-bottom: 0.75rem;
}



.vision img {
    max-height: 300px; /* Set a maximum height */
    object-fit: cover; /* Crop the image to fit while maintaining aspect ratio */
    width: 100%; /* Ensure it takes full width of its container */
}

.feature {
    max-height: 500px;
    padding: 10px;
}


.hero-bg {
    position: absolute;
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    z-index: 0;
    pointer-events: none;
}
.hero-bg-shape {
    position: absolute;
    filter: blur(40px) saturate(120%);
    opacity: 0.85;
    transform-origin: center;
}
.hero-bg-shape.shape-1 {
    width: 520px; height: 420px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(245, 171, 60, 0.57) 40%, rgba(219, 129, 12, 0.4) 70%);
    top: 10%; right: -60px;
    transform: rotate(-12deg);
}

.hero-bg-shape.shape-3 {
    width: 700px; height: 320px;
    background: linear-gradient(120deg, rgba(230, 221, 47, 0.412), rgba(255,255,255,0.02));
    top: 60%; left: 50%;
    transform: translate(-30%, -30%) rotate(6deg) scale(1.1);
    mix-blend-mode: overlay;
}

.row {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Scroll-driven slideshow styles */
.slideshow-section { 
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.slideshow-spacer { 
    height: 100vh;
    width: 100%;
}
.slideshow-inner { 
    position: sticky; 
    top: 0;
    height: 100vh;
    width: 100%;
    display: block; 
    overflow: hidden;
}
.slides { 
    width: 100%; 
    height: 100vh;
    display: block;
    position: relative;
}

.slide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    height: 100vh;
    padding: 2rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.slide.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Animation classes for slides */
.slide-enter {
    opacity: 0;
    transform: translateY(20px);
}

.slide-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-exit {
    opacity: 1;
    transform: translateY(0);
}

.slide-exit-active {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide.active {
    opacity: 1;
}
.slide-media, .slide-content { 
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 2rem;
}

.slide-media { 
    display: block;
}

.slide-media img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    border-radius: 6px; 
    box-shadow: 0 8px 18px rgba(0,0,0,0.08); 
    display: block;
}

.slide-content { 
    height: 100%;
    min-height: 300px;
    display: grid; /* Using Grid for better centering */
    place-items: center; /* Centers both horizontally and vertically */
}

.dark-card { 
    background: rgba(9, 36, 40, 0.95); 
    color: #fff; 
    border-radius: 6px;
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
    backdrop-filter: blur(5px);
    width: 100%;
    height: 100%;
    display: grid; /* Using Grid for perfect centering */
    place-items: center; /* Centers the inner content */
}

.slide-content-inner {
    padding: 2.5rem;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dark-card h3 { 
    color: #ef6b3a; 
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dark-card p { 
    color: rgba(255,255,255,0.95); 
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.slideshow-dots { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); display:flex; flex-direction: column; gap: 0.6rem; z-index: 10; }
.slideshow-dots .dot { width: 14px; height: 14px; border-radius: 50%; background: #ef6b3a; opacity: 0.35; border: none; }
.slideshow-dots .dot.active { opacity: 1; box-shadow: 0 6px 16px rgba(239,107,58,0.2); }

@media (max-width: 991px) {
    .slides { grid-template-columns: 1fr; }
    .slide { 
        height: auto;
        min-height: 600px;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    .slide-media { 
        height: 300px;
    }
    .slide-media img { 
        height: 100%;
        border-radius: 6px;
        object-fit: cover;
    }
    .slide-content { 
        height: 300px;
        min-height: 300px;
        display: grid;
        place-items: center;
    }
    .dark-card {
        height: 100%;
        min-height: 300px;
        width: 100%;
    }
    .slide-content-inner {
        padding: 2rem;
        width: 100%;
    }
    .dark-card h3 {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }
    .dark-card p {
        font-size: 1rem;
        line-height: 1.6;
    }
    .slideshow-inner { 
        top: 4rem; 
        height: auto;
        min-height: 600px;
    }
    .slideshow-dots { 
        right: 0.75rem;
    }
}

/* Larger desktops */
@media (min-width: 1200px) {
    .hero-title { font-size: 5.5rem; }
    .hero-separator { width: 650px; }
    .slide { height: 85vh; }
    .slideshow-inner { top: 6rem; }
}

/* Wide tablets / small desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-title { font-size: 4.5rem; }
    .hero-separator { width: 520px; }
    .slide { height: 75vh; }
}

/* Tablets and small laptops */
@media (max-width: 991px) and (min-width: 768px) {
    .hero-title { font-size: 3rem; }
    .hero-sub { font-size: 1.1rem; }
    .hero-separator { width: 60%; }
    .slide { height: 65vh; grid-template-columns: 1fr 1fr; }
    .slide-media img { height: 360px; }
    .slideshow-dots { right: 1rem; }
}

/* Mobile phones */
@media (max-width: 767px) {
    .hero-title { font-size: 2rem; line-height: 1.05; text-align: center; }
    .hero-sub { font-size: 1rem; text-align: center; }
    .hero-separator { width: 70%; margin-left: auto; margin-right: auto; }

    /* tone down background shapes on small screens */
    .hero-bg-shape.shape-1 { width: 260px; height: 200px; right: -20px; top: 6%; filter: blur(30px); }
    .hero-bg-shape.shape-3 { width: 360px; height: 160px; top: 68%; left: 60%; transform: translate(-50%, -50%) rotate(6deg) scale(0.95); }

    /* Disable sticky/pin behaviour on small devices to allow native scrolling
       and stack slides normally for better touch UX. JS still supports translate,
       but CSS will render slides stacked and visible in document flow. */
    .slideshow-inner { position: static; height: auto; overflow: visible; }
    .slides { transform: none !important; transition: none !important; }
    .slide { display: block; grid-template-columns: 1fr; height: auto; padding: 0; margin-bottom: 1.25rem; }
    .slide-media img { width: 100%; height: 200px; object-fit: cover; }
    .slide-content { padding: 1rem; }

    /* move dots to bottom center */
    .slideshow-dots { position: relative; right: auto; top: auto; transform: none; left: 50%; bottom: auto; justify-content: center; align-items: center; flex-direction: row; gap: 0.5rem; margin: 0.75rem auto 0 auto; }
}

/* Extra small phones */
@media (max-width: 575px) {
    .hero-title { font-size: 1.6rem; }
    .hero-sub { font-size: 0.95rem; }
    .hero-separator { width: 80%; height: 4px; }
    .slide { 
        min-height: auto;
        padding: 1rem;
    }
    .slide-media { 
        height: 200px;
    }
    .slide-media img { 
        height: 100%;
    }
    .dark-card { 
        padding: 1.5rem;
    }
    .dark-card h3 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }
    .dark-card p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    .slideshow-dots .dot { 
        width: 12px; 
        height: 12px; 
    }
}