/* Prevent horizontal scrolling globally */
html, body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    
}

* {
    -webkit-tap-highlight-color: transparent;
}


body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    min-height: 100vh;
}

/* Hero Section */
.herocontainer {
    position: relative;
    margin-top: 10vh;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    perspective: 1200px;
    background-color: aliceblue;
}

.hero-media-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.heroimg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transform: scale(1.1);
    scale: 1.1;
}

/* Video Styles */
.hero-video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease, transform 1.2s ease;
    z-index: 2;
}

.hero-video.active {
    opacity: 1;
    transform: scale(1);
}

/* Video Controls */
.video-controls-overlay {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 100;
}

.video-controls-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.video-control-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.video-control-btn:hover {
    background: rgba(189, 30, 46, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* Parallax Elements */
.parallax-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.parallax-element {
    position: absolute;
    width: 100px;
    height: 100px;
    object-fit: contain;
    transition: transform 0.3s ease;
    pointer-events: none;
    will-change: transform;
    max-width: 100%;
    max-height: 100%;
}

/* Individual Parallax Element Positions */

.element1 { 
    top: 15%; 
    left: 10%; 
    width: 150px; 
    height: 150px; 
    z-index: 3;
}
.element2 { 
    top: 5%; 
    left: 25%;  /* Moved from 45% to stay on left side */
    width: 205px; 
    height: 205px; 
    z-index: 2;
}
.element3 { 
    top: 55%; 
    left: 25%; 
    width: 160px; 
    height: 160px; 
    z-index: 4;
}
.element4 { 
    top: 30%; 
    left: 35%;  /* Moved from 60% to stay on left side */
    width: 145px; 
    height: 145px; 
    z-index: 3;
}
.element5 { 
    top: 70%; 
    left: 35%;  /* Moved from 50% to stay on left side */
    width: 170px; 
    height: 170px; 
    z-index: 5;
}
.element6 { 
    top: 20%; 
    left: 30%; 
    width: 120px; 
    height: 120px; 
    z-index: 2;
}
.element7 { 
    top: 60%; 
    left: 10%; 
    width: 130px; 
    height: 130px; 
    z-index: 4;
}
.element8 { 
    top: 40%; 
    left: 40%;  /* Moved from 70% to stay on left side */
    width: 155px; 
    height: 155px; 
    z-index: 4;
}
.element9 { 
    top: 75%; 
    left: 35%; 
    width: 140px; 
    height: 140px; 
    z-index: 4;
}
.element10 { 
    top: 10%; 
    left: 20%; 
    width: 100px;
    height: 100px;
    z-index: 4;
}
/* Hover Effects for Parallax Elements */
.parallax-element:hover {
    transform: scale(1.1);
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
    transition: transform 0.3s ease, filter 0.3s ease;
    pointer-events: auto;
}

/* Play Button */
.play-btn {
    position: absolute;
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.829));
    z-index: 10;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    max-width: 100%;
}

.play-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.play-btn:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(255, 0, 0, 1));
}

.play-btn.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Card Box */
.card_box {
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    border-radius: 20px;
    padding: 40px;
    width: fit-content;
    max-width: 90%;
    z-index: 20;
    line-height: 76.8%;
    color: white;
    pointer-events: auto;
}

.card_box .top h3 {
    font-size: 44px;
    font-weight: 100;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.card_box .top h2 {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.2;
}

.card_box .middle h4 {
    font-size: 31px;
    font-weight: 300;
    width: 100%;
    max-width: 550px;
    line-height: 99.8%;
    margin: 50px 0;
}

.card_box .bottom button {
    background: #BD1E2E;
    border: none;
    padding: 15px 40px;
    width: 283px;
    height: 77px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    pointer-events: auto;
}

.card_box .bottom button:hover {
    transform: translateY(-2px);
    color: #BD1E2E;
    background: white;
}

/* Header */
.header {
    width: 100%;
    height: 10vh;
}

/* Video Playing State */
.herocontainer.video-playing .parallax-elements,
.herocontainer.video-playing .play-btn,
.herocontainer.video-playing .card_box {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.herocontainer.video-playing .heroimg {
    opacity: 0.3;
    filter: blur(5px) brightness(0.7);
    transition: opacity 0.8s ease, filter 0.8s ease;
}

/* Other Sections */
.section {
    width: 100%;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255, 255, 255);
    overflow: hidden;
}

.section-content {
    font-size: 3rem;
    /* padding: 20px; */
 
}

.card-section {
    position: sticky;
    top: 0;
    width: 100%;
    /* min-height: 100vh; */
    display: flex;

    z-index: 1;
}

/* Footer/Additional Container */
.bottom_container {
    width: 100%;
    min-height: 100vh;
    background-color: rgb(184, 30, 30);
    overflow: hidden;
}
.mainheading {
    margin-top: 20px;
}
.reveel {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
}
.ul-heading {
        font-size: 18px;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .card_box {
        right: 5%;
        padding: 30px;
    }
    
    .card_box .top h2 {
        font-size: 54px;
    }
    
    .card_box .middle h4 {
        font-size: 28px;
        max-width: 450px;
    }
}

@media (max-width: 768px) {
    .card_box {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 20px auto;
        text-align: center;
        padding: 20px;
    }
    
    .card_box .top h3 {
        font-size: 36px;
    }
    
    .card_box .top h2 {
        font-size: 44px;
    }
    
    .card_box .middle h4 {
        font-size: 24px;
        margin: 30px 0;
    }
    
    .card_box .bottom button {
        width: 250px;
        height: 65px;
        font-size: 24px;
    }
    
    /* Adjust parallax elements for mobile */
    .element1, .element2, .element3, .element4, .element5 {
        width: 60px;
        height: 60px;
    }
    
    .play-btn {
        width: 60px;
        height: 60px;
    }
}


@media (max-width: 480px) {
    .card_box {
        padding: 15px;
    }
    
    .card_box .top h3 {
        font-size: 28px;
    }
    
    .card_box .top h2 {
        font-size: 36px;
    }
    
    .card_box .middle h4 {
        font-size: 20px;
    }
    
    .card_box .bottom button {
        width: 200px;
        height: 55px;
        font-size: 20px;
    }
}
.card-section {
    position: sticky;
    top: 0;
    width: 100vw;
    /* height: 100vh; */
    display: flex;
  
    z-index: 1;
}

#cardSection1{
    display: flex;
    flex-direction: column;
}
/* Card Box - Original large screen settings */
.card_box {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    border-radius: 20px;
    padding: 40px;
    width: fit-content;
    max-width: 90%;
    z-index: 2000;
    line-height: 76.8%; /* Original line height */
    color: white;
    pointer-events: auto;
}

.card_box .top h3 {
    font-size: 44px;
    font-weight: 100;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.card_box .top h2 {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.2; /* Keep as is for large screens */
}

.card_box .middle h4 {
    font-size: 31px;
    font-weight: 300;
    width: 100%;
    max-width: 550px;
    line-height: 99.8%; /* Original line height */
    margin: 50px 0;
}

.card_box .bottom button {
    background: #BD1E2E;
    border: none;
    padding: 15px 40px;
    width: 283px;
    height: 77px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    pointer-events: auto;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Large Desktop: 1400px and above - Keep original sizes */
@media (min-width: 1400px) {
    .herocontainer {
        height: 100vh;
    }
    .card_box {
        right: 12%;
    }
}

/* Desktop: 1200px - 1399px - Slightly reduced */
@media (max-width: 1399px) and (min-width: 1200px) {
    .herocontainer {
        height: 90vh;
    }
    .card_box {
        right: 8%;
        padding: 35px;
    }
    .card_box .top h2 {
        font-size: 58px;
    }
    .card_box .middle h4 {
        font-size: 28px;
        line-height: 1.1; /* Adjusted for smaller size */
    }
    .card_box .bottom button {
        width: 260px;
        height: 70px;
        font-size: 28px;
    }
}

/* Small Desktop / Large Tablet: 992px - 1199px */
@media (max-width: 1199px) and (min-width: 992px) {
    .herocontainer {
        height: 85vh;
    }
    
    .card_box {
        right: 5%;
        padding: 30px;
        max-width: 500px;
        line-height: 1.1; /* Adjust line height for tablet */
    }
    
    .card_box .top h3 {
        font-size: 38px;
    }
    
    .card_box .top h2 {
        font-size: 52px;
        margin-bottom: 20px;
        line-height: 1.1; /* Adjust line height */
    }
    
    .card_box .middle h4 {
        font-size: 26px;
        margin: 30px 0;
        max-width: 450px;
        line-height: 1.1; /* Adjust line height */
    }
    
    .card_box .bottom button {
        width: 250px;
        height: 70px;
        font-size: 28px;
    }
}

/* Tablet: 768px - 991px - Change to relative positioning to avoid overlay */
@media (max-width: 991px) and (min-width: 768px) {
    .herocontainer {
        height: 80vh;
        min-height: 500px;
    }
    
    .card_box {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 100px auto 50px;
        text-align: center;
        padding: 30px;
        line-height: 1.2; /* Better for mobile readability */
        z-index: 5; /* Lower z-index so play button stays on top */
    }
    
    .card_box .top h3 {
        font-size: 32px;
    }
    
    .card_box .top h2 {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .card_box .middle h4 {
        font-size: 22px;
        margin: 20px 0;
        line-height: 1.3;
    }
    
    .card_box .bottom button {
        width: 220px;
        height: 60px;
        font-size: 24px;
        margin: 0 auto;
    }
    
    /* Make sure play button is above card_box on tablet */
    .play-btn {
        z-index: 10 !important;
    }
}

/* Large Mobile: 576px - 767px */
@media (max-width: 767px) and (min-width: 576px) {
    .herocontainer {
        height: 70vh;
        min-height: 450px;
    }
    
    .card_box {
        margin: 80px auto 40px;
        padding: 25px;
        max-width: 90%;
        line-height: 1.2;
    }
    
    .card_box .top h3 {
        font-size: 28px;
    }
    
    .card_box .top h2 {
        font-size: 38px;
        line-height: 1.2;
    }
    
    .card_box .middle h4 {
        font-size: 20px;
        line-height: 1.3;
    }
    
    .card_box .bottom button {
        width: 200px;
        height: 55px;
        font-size: 22px;
    }
}

/* Small Mobile: 480px - 575px */
@media (max-width: 575px) and (min-width: 480px) {
    .herocontainer {
        height: 65vh;
        min-height: 400px;
    }
    
    .card_box {
        margin: 60px auto 30px;
        padding: 20px;
        line-height: 1.3;
    }
    
    .card_box .top h3 {
        font-size: 24px;
    }
    
    .card_box .top h2 {
        font-size: 32px;
        margin-bottom: 15px;
        line-height: 1.2;
    }
    
    .card_box .middle h4 {
        font-size: 18px;
        margin: 15px 0;
        line-height: 1.3;
    }
    
    .card_box .bottom button {
        width: 180px;
        height: 50px;
        font-size: 20px;
        padding: 10px 30px;
    }
}

/* Extra Small Mobile: below 480px */
@media (max-width: 479px) {
    .herocontainer {
        height: 60vh;
        min-height: 350px;
    }
    
    .card_box {
        margin: 50px auto 20px;
        padding: 15px;
        line-height: 1.3;
    }
    
    .card_box .top h3 {
        font-size: 20px;
    }
    
    .card_box .top h2 {
        font-size: 28px;
        margin-bottom: 10px;
        line-height: 1.2;
    }
    
    .card_box .middle h4 {
        font-size: 16px;
        margin: 10px 0;
        line-height: 1.3;
    }
    
    .card_box .bottom button {
        width: 160px;
        height: 45px;
        font-size: 18px;
        padding: 13.5px 34px;
    }
}

/* Fix z-index for play button on all devices */
.play-btn {
    position: absolute;
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.829));
    z-index: 100 !important; /* Increased z-index to always be on top */
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    max-width: 100%;
}

/* Ensure static center button has proper z-index */
.play-btn.static-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: pulse 2s infinite;
    z-index: 100 !important;
}

/* For touch devices, ensure play button is always clickable */
@media (hover: none) and (pointer: coarse) {
    .play-btn {
        z-index: 100 !important;
        pointer-events: auto !important;
    }
    
    .card_box {
        z-index: 5 !important; /* Lower than play button */
    }
}

/* On larger screens, the card_box should be higher than parallax elements but lower than play button */
@media (min-width: 992px) {
    .card_box {
        z-index: 2200; 
    }
    
    .play-btn {
        z-index: 2100 !important; 
    }
}
/* Card Box - Original large screen settings */
.card_box {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    border-radius: 20px;
    padding: 40px;
    width: fit-content;
    max-width: 90%;
    z-index: 2000;
    line-height: 76.8%; /* Original line height */
    color: white;
    pointer-events: auto;
}

.card_box .top h3 {
    font-size: 44px;
    font-weight: 100;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.card_box .top h2 {
    font-size: 64px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.2; /* Keep as is for large screens */
}

.card_box .middle h4 {
    font-size: 31px;
    font-weight: 300;
    width: 100%;
    max-width: 550px;
    line-height: 99.8%; /* Original line height */
    margin: 50px 0;
}

.card_box .bottom button {
    background: #BD1E2E;
    border: none;
    padding: 15px 30px;
    width: 203px;
    height: 50px;
    font-size: 20px;
    font-weight: 500;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    pointer-events: auto;
    z-index: 100;
    position: relative;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Large Desktop: 1400px and above - Keep original sizes */
@media (min-width: 1400px) {
    .herocontainer {
        height: 80vh;
    }
    .card_box {
        right: 8%;
    }
}

/* Desktop: 1200px - 1399px - Slightly reduced */
@media (max-width: 1399px) and (min-width: 1200px) {
    .herocontainer {
        height: 90vh;
    }
    .card_box {
        right: 8%;
        padding: 35px;
    }
    .card_box .top h2 {
        font-size: 58px;
    }
    .card_box .middle h4 {
        font-size: 28px;
        line-height: 1.1; /* Adjusted for smaller size */
    }
    .card_box .bottom button {
        width: 260px;
        height: 70px;
        font-size: 28px;
    }
}

/* Small Desktop / Large Tablet: 992px - 1199px */
@media (max-width: 1199px) and (min-width: 992px) {
    .herocontainer {
        height: 85vh;
    }
    
    .card_box {
        right: 5%;
        padding: 30px;
        max-width: 500px;
        line-height: 1.1; /* Adjust line height for tablet */
    }
    
    .card_box .top h3 {
        font-size: 38px;
    }
    
    .card_box .top h2 {
        font-size: 52px;
        margin-bottom: 20px;
        line-height: 1.1; /* Adjust line height */
    }
    
    .card_box .middle h4 {
        font-size: 26px;
        margin: 30px 0;
        max-width: 450px;
        line-height: 1.1; /* Adjust line height */
    }
    
    .card_box .bottom button {
        width: 250px;
        height: 70px;
        font-size: 28px;
    }
}

/* Tablet: 768px - 991px - Change to relative positioning to avoid overlay */
@media (max-width: 991px) and (min-width: 768px) {
    .herocontainer {
        height: 80vh;
        min-height: 500px;
    }
    .contentHeading{
        display: none;
    }
    .card_box {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 100px auto 50px;
        text-align: center;
        padding: 30px;
        line-height: 1.2; /* Better for mobile readability */
        z-index: 5; /* Lower z-index so play button stays on top */
    }
    
    .card_box .top h3 {
        font-size: 32px;
    }
    
    .card_box .top h2 {
        font-size: 44px;
        line-height: 1.2;
    }
    
    .card_box .middle h4 {
        font-size: 22px;
        margin: 20px 0;
        line-height: 1.3;
    }
    
    .card_box .bottom button {
        width: 220px;
        height: 60px;
        font-size: 24px;
        margin: 0 auto;
    }
    
    /* Make sure play button is above card_box on tablet */
    .play-btn {
        z-index: 10 !important;
    }
}

/* Large Mobile: 576px - 767px */
@media (max-width: 767px) and (min-width: 576px) {
    .herocontainer {
        height: 70vh;
        min-height: 450px;
    }
     .contentHeading{
        display: none;
    }
    
    .card_box {
        margin: auto ;
        padding: 25px;
        max-width: 90%;
        /* background-color: #E7E7E7; */
        line-height: 1.2;
        right: 0 ;
        
    }
    
    .card_box .top h3 {
        font-size: 28px;
    }
    
    .card_box .top h2 {
        font-size: 38px;
        line-height: 1.2;
    }
    
    .card_box .middle h4 {
        font-size: 20px;
        line-height: 1.3;
    }
    
    .card_box .bottom button {
        width: 200px;
        height: 55px;
        font-size: 22px;
    }
}

/* Small Mobile: 480px - 575px */
@media (max-width: 575px) and (min-width: 480px) {
    .herocontainer {
        height: 65vh;
        min-height: 400px;
    }
    
    .card_box {
        margin: 60px auto 30px;
        padding: 20px;
        line-height: 1.3;
    }
    
    .card_box .top h3 {
        font-size: 24px;
    }
    
    .card_box .top h2 {
        font-size: 32px;
        margin-bottom: 15px;
        line-height: 1.2;
    }
    
    .card_box .middle h4 {
        font-size: 18px;
        margin: 15px 0;
        line-height: 1.3;
    }
    
    .card_box .bottom button {
        width: 180px;
        height: 50px;
        font-size: 20px;
        padding: 10px 30px;
    }
     .contentHeading{
        display: none;
    }
}

/* Extra Small Mobile: below 480px */
@media (max-width: 479px) {
    .herocontainer {
        height: 60vh;
        min-height: 350px;
    }
     .contentHeading{
        display: none;
    }
    
    .card_box {
        margin: 50px auto 20px;
        padding: 15px;
        line-height: 1.3;
    }
    
    .card_box .top h3 {
        font-size: 20px;
    }
    
    .card_box .top h2 {
        font-size: 28px;
        margin-bottom: 10px;
        line-height: 1.2;
    }
    
    .card_box .middle h4 {
        font-size: 16px;
        margin: 10px 0;
        line-height: 1.3;
    }
    
    .card_box .bottom button {
        width: 160px;
        height: 45px;
        font-size: 18px;
        padding: 8px 25px;
    }
}

/* Fix z-index for play button on all devices */
.play-btn {
    position: absolute;
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.829));
    z-index: 100 !important; /* Increased z-index to always be on top */
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    max-width: 100%;
}

/* Ensure static center button has proper z-index */
.play-btn.static-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: pulse 2s infinite;
    z-index: 100 !important;
}

/* For touch devices, ensure play button is always clickable */
@media (hover: none) and (pointer: coarse) {
    .play-btn {
        z-index: 100 !important;
        pointer-events: auto !important;
    }
    
    .card_box {
        z-index: 5 !important; /* Lower than play button */
    }
}

/* On larger screens, the card_box should be higher than parallax elements but lower than play button */
@media (min-width: 992px) {
    .card_box {
        z-index: 2000; /* High but not interfering with play button */
    }
    
    .play-btn {
        z-index: 2100 !important; /* Higher than card_box */
    }
}
.revlele { /* Note: This has one 'l' */
  opacity: 0;
  transform: translateY(40px) scale(0.95);
}



/* hero */
.new_container{
    position: relative;
}

.herocontainer{
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 80vh;
    z-index: 1; 
    pointer-events: auto; 
}

.bg{
    background-color: white;
    z-index: 2; 
    position: relative; 
}

.contentHeading{
    margin-top: 90vh;
    position: relative;
    z-index: 2; 
}

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

/* Ensure smooth scrolling works with fixed elements */
.wrapper {
    position: relative;
}


/* Add to your existing CSS file (style.css or souvik.css) */

/* Base animation styles */
.medcom-one,
.publication-section,
.feature-strip,
.getintouch,
.awards-footer,
.section-content {
    will-change: transform, opacity;
}

/* Smooth transitions for active states */
.sidebar-item,
.section-content {
    transition: all 0.3s ease;
}

/* Ensure proper stacking context */
.wrapper {
    position: relative;
}

/* Prevent flash of unstyled content */
.section-content:not(.active) {
    display: none;
}

.section-content.active {
    display: block;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* footer */
    footer{
        position: relative;
        z-index: 2;
            background-color: #000;
        }
            .hp-footerTop{
                padding: 3rem 6rem 2rem 6rem;
                display: flex;
                justify-content: space-between;
            }
            .hp-footerTop .fcHeading{
                    color: #E7E7E7;
                    font-weight: 700;
            }
            .hp-footerTop p{
                    margin-bottom: 1rem;
                    color: #E7E7E7;
                    font-size: 15px;
                    font-weight: 400;
            }
            .hp-footerTop p a{
                    color: #E7E7E7;
                    font-size: 15px;
                    font-weight: 400;
                    text-decoration: none;
                    /* font-weight: bold; */
            }
            .hp-footerTop p a:hover {
                color: rgb(243, 74, 80);
            }
            .hp-leftContainer , .hp-rightContainer{
                display: flex;
                align-items: center;
            }
            .borderLine{
                    display: inline-block;
                    width: 1px;
                    height: 14px;
                    background-color: #fff;
                    margin: 0 8px;
                    vertical-align: sub;
            }
            .hp-footerBottom{
                padding:0 6rem 2rem 6rem;
                display: flex;
                justify-content: space-between;
                color: #FFF;
                font-size: 13px;
                font-weight: 500;
                
            }
            footer .hp-footerBottom a{
                color: #FFF;
                font-size: 13px;
                font-weight: 500;
                text-decoration: none;
            }
            footer .hp-footerBottom a:hover {
                    color: rgb(243, 74, 80);
                }
            .hp-footerBottom .hp-rightContainer div img{
                    margin-right: 1rem;
            }

        @media only screen and (max-width: 767px) {
       .hp-rightContainer {
        flex-wrap: wrap;
    }
    .footerLinkedIn{
        flex-basis: 100%;
    }
    footer .hp-footerTop {
    padding: 1rem 1rem 1rem 1rem;
    flex-direction: column;
    gap: 2rem;
}
footer
.hp-footerBottom {
    padding: 0 1rem 2rem 1rem;
    flex-direction: column;
    gap: 1rem;
}}
/* ========== Z-INDEX HIERARCHY ========== */
/* Desktop/Large Screens (≥ 992px): Card on top of play button */
@media (min-width: 992px) {
    .card_box {
        z-index: 2000; /* Card is above play button */
    }
    
    .play-btn {
        z-index: 1999 !important; /* Play button is behind card */
    }
    
    /* Ensure card content is clickable */
    .card_box .bottom button {
        z-index: 2001;
        position: relative;
    }
}

/* Tablet/Mobile Screens (< 992px): Play button on top of card */
@media (max-width: 991px) {
    .card_box {
        z-index: 5 !important; /* Card is below play button */
    }
    
    .play-btn {
        z-index: 100 !important; /* Play button is above everything */
    }
    
    /* When play button is static center on mobile */
    .play-btn.static-center {
        z-index: 101 !important;
    }
}

/* ========== SPECIFIC MOBILE FIXES ========== */
/* Small screens where card becomes relative positioned */
@media (max-width: 991px) and (min-width: 768px) {
    .card_box {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        margin: 100px auto 50px;
        text-align: center;
        padding: 30px;
        z-index: 5; /* Lower than play button */
    }
    
    /* Make sure play button is clickable on tablet */
    .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 100 !important;
    }
}

/* Mobile screens: Ensure play button stays on top */
@media (max-width: 767px) {
    .herocontainer {
        position: relative;
    }
    .contentHeading{
    margin-top: 0vh;
    position: relative;
    z-index: 2; 
}
    .play-btn {
        position: absolute !important;
        top: 65% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 100 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    
    }
    
    .card_box {
        margin-top: 120px; /* Push card down so it doesn't overlap play button */
        z-index: 5 !important;
    }
    .card_box {
    position: absolute;
    top: 10%;
    right: 5%;}
}

/* ========== DESKTOP SPECIFIC ========== */
/* Ensure on desktop, the play button follows mouse but is behind card */
@media (min-width: 992px) {
    .play-btn.visible {
        opacity: 1;
        pointer-events: auto;
        z-index: 1999; /* Behind card */
    }
    
    /* When hovering near card on desktop, ensure card is interactive */
    .card_box:hover {
        z-index: 2002; /* Slightly higher when hovered */
    }
    
    .card_box .bottom button:hover {
        z-index: 2003;
    }
}

/* ========== TOUCH DEVICE OPTIMIZATION ========== */
/* For touch devices (mobile/tablet), ensure play button is always accessible */
@media (hover: none) and (pointer: coarse) {
    .play-btn {
        z-index: 100 !important; /* Highest priority on touch devices */
        width: 100px !important;
        height: 100px !important;
        pointer-events: auto !important;
    }
    
    /* Add a tap-friendly area around play button */
    .play-btn::after {
        content: '';
        position: absolute;
        top: -20px;
        left: -20px;
        right: -20px;
        bottom: -20px;
        z-index: -1;
    }
}

/* ========== ANIMATION STATES ========== */
/* When video is playing, both should hide properly */
.herocontainer.video-playing .play-btn,
.herocontainer.video-playing .card_box {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.mainheading{
    position: absolute;
    /* background-color: #000; */
    width: 100%;
    top: 10px;
}
@media (max-width: 1770px){
    .mainheading{

    top: -10px;
}
}

.content {
    width: 72.8%;
    padding: 0 !important;
    margin: auto;
}
@media (max-width:1465px){
    .content {
    width: 95%;
    padding: 0 !important;
    margin: auto;
    /* background-color: red; */
}
}
.outer{
    width: 100vw;
    position: relative;
    background-color: #FFF;
        z-index: 4;
}

/* Floating animation for mobile */
/* Floating animation for mobile - MEDIUM SPEED */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-20px) rotate(1.5deg) scale(1.01);
  }
  50% {
    transform: translateY(-12px) rotate(-1.5deg) scale(0.99);
  }
  75% {
    transform: translateY(-15px) rotate(1deg) scale(1.005);
  }
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-15px) rotate(-1deg) scale(1.005);
  }
  66% {
    transform: translateY(-8px) rotate(1deg) scale(0.995);
  }
}

@keyframes floatFast {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  20% {
    transform: translateY(-22px) rotate(2deg) scale(1.02);
  }
  40% {
    transform: translateY(-6px) rotate(-2deg) scale(0.98);
  }
  60% {
    transform: translateY(-18px) rotate(1.5deg) scale(1.01);
  }
  80% {
    transform: translateY(-10px) rotate(-1.5deg) scale(0.99);
  }
}

@keyframes floatBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25%, 75% {
    transform: translateY(-25px) rotate(2deg);
  }
  50% {
    transform: translateY(-8px) rotate(-2deg);
  }
}

@keyframes floatDrift {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(3px, -15px) rotate(0.8deg);
  }
  50% {
    transform: translate(-2px, -9px) rotate(-0.8deg);
  }
  75% {
    transform: translate(2px, -12px) rotate(0.4deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Subtle pulsing glow effect */
@keyframes subtleGlow {
  0%, 100% {
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.12));
  }
  50% {
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.2));
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.95;
  }
}

/* Apply floating animation only on mobile */
@media (max-width: 768px) {
  /* Reset parallax effect for mobile */
  .parallax-element {
    will-change: transform;
  }
  
  /* MEDIUM SPEED animations - smooth and visible */
  .element1 {
    animation: floatBounce 4.5s ease-in-out 0s infinite;
  }
  
  .element2 {
    animation: floatDrift 5s ease-in-out 0.4s infinite;
  }
  
  .element3 {
    animation: floatFast 3.8s ease-in-out 0.8s infinite;
  }
  
  .element4 {
    animation: floatBounce 5.2s ease-in-out 1.2s infinite;
  }
  
  .element5 {
    animation: floatDrift 4.8s ease-in-out 1.6s infinite;
  }
  
  .element6 {
    animation: floatFast 4s ease-in-out 2s infinite;
  }
  
  .element7 {
    animation: floatBounce 5s ease-in-out 2.4s infinite;
  }
  
  .element8 {
    animation: floatDrift 4.5s ease-in-out 2.8s infinite;
  }
  
  .element9 {
    animation: floatFast 3.6s ease-in-out 3.2s infinite;
  }
  
  .element10 {
    animation: floatBounce 5.5s ease-in-out 3.6s infinite;
  }
  
  /* Add some elements with combined effects */
  .element2, .element5, .element8 {
    animation: floatDrift 5s ease-in-out var(--delay) infinite,
               subtleGlow 6s ease-in-out calc(var(--delay) + 1s) infinite;
  }
  
  .element3, .element6, .element9 {
    animation: floatFast 4s ease-in-out var(--delay) infinite,
               pulse 5s ease-in-out calc(var(--delay) + 0.5s) infinite;
  }
  
  /* Set CSS variables for delays */
  .element1 { --delay: 0s; }
  .element2 { --delay: 0.4s; }
  .element3 { --delay: 0.8s; }
  .element4 { --delay: 1.2s; }
  .element5 { --delay: 1.6s; }
  .element6 { --delay: 2s; }
  .element7 { --delay: 2.4s; }
  .element8 { --delay: 2.8s; }
  .element9 { --delay: 3.2s; }
  .element10 { --delay: 3.6s; }
  
  /* Add tap/active effect for mobile */
  .parallax-element:active {
    transform: scale(1.05);
    transition: transform 0.2s ease;
  }
  
  /* Performance optimization */
  .parallax-elements {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  
  /* Pause animation when video is playing */
  .video-playing .parallax-element {
    animation-play-state: paused;
    opacity: 0.5;
    transition: opacity 0.5s ease;
  }
}

/* Alternative: SIMPLER MEDIUM SPEED VERSION */
@media (max-width: 1388px) {
  /* Simpler approach if above is too complex */
  .parallax-element {
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  
  /* Even elements - slower */
  .element2, .element4, .element6, .element8, .element10 {
    animation-name: floatSlow;
    animation-duration: 5s;
  }
  
  /* Odd elements - medium speed */
  .element1, .element3, .element5, .element7, .element9 {
    animation-name: float;
    animation-duration: 4s;
  }
  
  /* Stagger delays for natural effect */
  .element1 { animation-delay: 0s; }
  .element2 { animation-delay: 0.6s; }
  .element3 { animation-delay: 1.2s; }
  .element4 { animation-delay: 1.8s; }
  .element5 { animation-delay: 2.4s; }
  .element6 { animation-delay: 3s; }
  .element7 { animation-delay: 3.6s; }
  .element8 { animation-delay: 4.2s; }
  .element9 { animation-delay: 4.8s; }
  .element10 { animation-delay: 5.4s; }
}

/* For tablets and medium mobile */
@media (max-width: 768px) and (min-width: 481px) {
  /* Slightly more movement for tablets */
  @keyframes floatTablet {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-18px) rotate(1.2deg);
    }
    50% {
      transform: translateY(-10px) rotate(-1.2deg);
    }
    75% {
      transform: translateY(-14px) rotate(0.8deg);
    }
  }
  
  .parallax-element {
    animation-name: floatTablet;
    animation-duration: 4.5s;
  }
}

/* For small mobile screens */
@media (max-width: 480px) {
  @keyframes floatMobile {
    0%, 100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-12px) rotate(1deg);
    }
    50% {
      transform: translateY(-6px) rotate(-1deg);
    }
    75% {
      transform: translateY(-9px) rotate(0.5deg);
    }
  }
  
  .parallax-element {
    animation-name: floatMobile !important;
    animation-duration: 3.5s !important;
  }
  
  /* Shorter delays on small screens */
  .element1 { animation-delay: 0s !important; }
  .element2 { animation-delay: 0.3s !important; }
  .element3 { animation-delay: 0.6s !important; }
  .element4 { animation-delay: 0.9s !important; }
  .element5 { animation-delay: 1.2s !important; }
  .element6 { animation-delay: 1.5s !important; }
  .element7 { animation-delay: 1.8s !important; }
  .element8 { animation-delay: 2.1s !important; }
  .element9 { animation-delay: 2.4s !important; }
  .element10 { animation-delay: 2.7s !important; }
  
  /* Reduce glow effects for performance */
  .parallax-element {
    filter: none !important;
  }
}

/* mobile */
  @media (max-width: 768px) {
    .heroimg {
        content: url("./public/mobile_hero.png");
    }
   .card_box{
    /* background-color: #070707; */
    /* position: absolute; */
    /* bottom: 10vh; */
   }
}
/* For mobile devices - position card box at bottom */
@media (max-width: 767px) {
    .card_box {
        position: absolute !important;
        top: auto !important;
        bottom: 14vh !important;
        right: 0 !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 auto !important;
        width: 95% !important;
        /* background-color: rgba(0, 0, 0, 0.85) !important; */
        padding: 20px !important;
        border-radius: 15px !important;
        text-align: center;
    }
    
    /* Adjust play button positioning so it doesn't overlap */
    .play-btn {
        top: 25% !important;
        bottom: auto !important;
        width: 60px !important;
    }
    
    /* Adjust hero container height to fit card at bottom */
    .herocontainer {
    height: 90vh;
       
    }
    .element1 { 
    top: 15%; 
    left: 10%; 
    width: 50px; 
    height: 50px; 
    z-index: 3;
}
.element2 { 
    top: 25%; 
    left: 25%;
    width: 65px; 
    height: 65px; 
    z-index: 2;
}
.element3 { 
    top: 15%; /* Changed from 55% to stay within 70% */
    left: 85%; 
    width: 60px; 
    height: 60px; 
    z-index: 4;
}
.element4 { 
    top: 30%; 
    left: 25%;
    width: 45px; 
    height: 45px; 
    z-index: 3;
}
.element5 { 
            top: 40%;
        left: 75%;
        width: 89px;
    height: 89px; 
    z-index: 5;
}
    .element6 {
        top: 20%;
        left: 65%;
    width: 60px; 
    height: 60px; 
    z-index: 2;
}
.element7 { 
    top: 20%; /* Changed from 60% to stay within 70% */
    left: 50%; 
    width: 30px; 
    height: 30px; 
    z-index: 4;
}
.element8 { 
    top: 40%; 
    left: 40%;
    width: 55px; 
    height: 55px; 
    z-index: 4;
}
.element9 { 
    top: 20%; /* Changed from 75% to 65% to stay within 70% */
    left: 78%; 
    width: 200px; 
    height: 200px; 
    z-index: 4;
}
.element10 { 
    top: 10%; 
    left: 20%; 
    width: 60px;
    height: 160px;
    z-index: 4;
}
    .card_box .middle h4 {
        font-size: 14px !important; }
            .card_box .top h2 {
        font-size: 26px;
        /* margin-bottom: 10px; */
        line-height: 0px;
        padding-top: 8px;
        padding-bottom: 20px;
        
    }
}