:root{
    --black:#000000;
    --white:#ffffff;
    --primary:#D3AE37;
    --secondary:#755A37;
    --subheading:#E0E0E0;
    --growth:#39A86B;
    --bg_color:#030303;
    --new:#140D04;
    --footer_bg:#1F1700;
    --text_color:#333333;

}


.hero_container {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: visible;
  background: #070601; 
}

.hero_bg_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}


.hero_video_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(356.58deg, #070601 3.12%, rgba(40, 32, 3, 0.48) 85.46%);
  z-index: 2;
}

/* Layer 3: Bottom Image + Bottom Gradient */
.hero_bottom_image_layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%; /* Adjust height based on how much "bottom" you want */
  z-index: 3;
  
  /* Applying both the image and the #00000000 to #060504 gradient */
  background: 
    linear-gradient(to bottom, #00000000, #060504),
    url('../images/about_us_hero_bg.png') no-repeat  bottom;
  background-size: auto;
}


/* Content Layer */
.content {
  position: relative;
  z-index: 10;
 
  height: 100%;
  
}

.hero_heading{
    font-size: 48px;
    font-weight: 600;
    line-height: 80px;
    letter-spacing:-0.5px;

}

.hero_text{
    font-size:20px;
    font-weight:300;
    line-height: 28px;
    letter-spacing: -0.5px;
}

/* 1. The Main Anchor Container */
.about_hero_img {
    position: absolute; 
    right: 0;
    bottom: 0;
    
    width: 100%;  
    height: 50vh; 
    
    background-image: url('../images/about_hero_main.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;

    position: relative; 
}

.video-overlay-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    /* Ensure the container matches the video shape */
    overflow: hidden; 
}



.video-overlay-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Your specific gradients applied here */
    background: 
        linear-gradient(180deg, #070601 0%, rgba(7, 6, 1, 0) 31.72%, rgba(6, 5, 1, 0) 74.26%, #060504 104.69%),
        linear-gradient(270deg, #070602 0%, rgba(7, 6, 1, 0) 33.6%);
    /* This ensures the gradient sits on top */
    pointer-events: none; 
}

.about_hero_main{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 50vh;
    z-index: 0; 
}

.about_hero_img img {
    position: absolute;
    transition: all 0.3s ease;
}

.about_hero_1 {
    top: -10%;     
    left: 2%;
    width: 96px;
    z-index: 3;
}

.about_hero_2 {
    top: 10%;
    left: 37%;
    width: 56px;
    z-index: 2;
}

.about_hero_3 {
    top: -20%;
    left: 32%;  
    width: 125px;
    z-index: 1;
}

.about_hero_4{
    bottom: 40%;
    left: 15%;
    width: 180px;
    z-index: 4;
}

/* 3. Ensuring the Text Container doesn't get covered */
.container_width {
    position: relative;
    z-index: 20; 
}

/* who we are  */

.about_section_2{
    background: linear-gradient(360deg, #060504 0%, #070601 100%);

}

.who_we_are_video {
    width: 100%;        /* Forces video to match column width */
    height: 65vh;       /* Maintains aspect ratio */
    display: block;     /* Removes bottom whitespace/gap */
    border-radius: 8px; /* Optional: adds a nice rounded look */
    object-fit: cover;  /* Ensures it fills the space if you set a fixed height */
}


.p_30_40{
    padding: 30px 40px;
}

.p_50{
    padding:50px;
}

.p_40{
    padding:40px;
}

.card_heading{
    font-size:24px;
    line-height: 100%;
    letter-spacing: -0.5px;
}

.card_text{
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.5px;
}

/* start your journey section  */



.start_your_journey_card {
    height: 100%;
    position: relative;
    color: var(--white);
    z-index: 1;

    border: 1px solid transparent; 
    border-radius: 30px;


    background: 
        linear-gradient(#0A0906, #0A0906) padding-box, 
        linear-gradient(360deg, #D3AE37 0%, #E8E8E8 100%) border-box;
}

.start_your_journey_card::before {
    display: none;
}   


.journey_img{
    height: 500px;
    border-radius: 30px 0px 0px 30px;
    margin:1px
}
.journey_text{
    margin-left:-50px;
    z-index:3;
}

.pe_50{
    padding-right: 50px;
}

@keyframes floating {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,-25px,0); }
}

@keyframes floating-reverse {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(0,25px,0); }
}

.about_hero_1, .about_hero_3, .about_hero_4 {
    animation: floating 4s ease-in-out infinite;
    will-change: transform;
}

.about_hero_2 {
    animation: floating-reverse 4s ease-in-out infinite;
    will-change: transform;
}

@media(max-width:380px){
    .hero_text{
        font-size:10px!important;
        line-height: 15px!important;
    }
}


@media(max-width:500px){

    .hero_container{
        height: 65vh!important;
    }

    .hero_heading{
        font-size: 28px!important;
        line-height: 30px!important;

    }

    .hero_text{
        font-size: 14px;
        line-height: 22px;
        /* margin:0 20px; */
    }

  

    .about_hero_4{
        width:18%!important;
        bottom:45%!important
    }

        .about_hero_3{
            width:50px!important;
            top: -40%!important;
            
        }

        .about_hero_1{
            width:10%!important;
            left: 8%!important;
            top: -26%!important;
        }

        .about_hero_2{
            width:25px!important;
            top: -4%!important;
        }

        .journey_img{
            height: 300px;
            border-radius: 30px 30px 0px 0px;
            width: 99%;

            
        }

    .about_hero_img{
        height: 20vh!important;
    }
        

        .card_heading{
            font-size: 20px!important;
        }

        .card_text{
            font-size:14px!important
        }
}


@media(max-width:992px){
.hero_heading{
    font-size:38px;
    line-height: 50px;
}
   

.hero_container::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/hero_mobile_bg.png"); 
  background-size: cover;         
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;                      
  z-index: 1;
}
.hero_container{
    background: none;
}

    .hero_bottom_image_layer{
        background: none!important;
    }
   

    .hero_bg_video{
        display: none;
    }

    .hero_video_overlay{
        background: none;
    }

    .about_hero_img{
        /* background-size: cover; */
        height: 45vh;

    }
   .about_hero_4{
        left:20%!important;
        

    }

   
.journey_text{
    margin-left:0px;
}

.journey_img{
    width:99%!important;
}

   .journey_padding{
            padding:40px;
            width:100%;
        }
    /* .pe_50{
        padding-right: 0px;
    } */
    .who_we_are_video{
        height: 45vh;
    }

    .p_50{
        padding:22px;
    }

    .p_40{
        padding: 20px;
    }

    .mt_30{
        margin-top: 15px;
    }

    .why_choose_img{
        width:43px;
        height: 38px;
    }

    .who_we_are_img{
        width: 50px;
        height: 45px;
    }

   
}

@media(max-width:1199px){


      .journey_img{
            border-radius: 30px 30px 0px 0px;
            width: 100%;  
        }
    .w_m_100{
        width:100%;
        margin: 0;
    }

     .hero_container{
        height: 80vh;
    }
    
    .about_hero_3{
        top:-10%;
        left:34%;
        width: 13%;
    }

    .about_hero_4{
        left:18%;
        bottom:50%;
        width: 18%;
    }

    .about_hero_2{
        width: 6%;
        top:14%;
        left:36%;
    }

    .about_hero_1{
        left:10%;
        width:80px;
        top:0%
    }

     .hero_bottom_image_layer{
        background: none!important;
    }
}