.hero-section {
  background: url("https://res.cloudinary.com/cryptiecraft/image/upload/v1755617221/assets/about-us/aboutus-banner.png");
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 200px;
    }

    .hero-title {
      font-size: 2.8rem;
      font-weight: bold;
      line-height: 1.4;
      text-align: center;
    }

    .highlight-pink {
      background: linear-gradient(to right,rgba(255, 203, 224, 0.6),white,white);
      border-radius: 10px;
      padding: 0 8px;   
    }

    .highlight-blue {
      background: linear-gradient(to right,#b6e6f9, white,white);
      border-radius: 10px;
      padding: 0 8px;
      display: inline-block;
      margin-top: 10px;
    }

    .hero-subtext {
      color: #999;
      font-size: 1rem;
      margin: 20px 0;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }

    .hero-button {
      background-color: #0393c9;
      color: white;
      border: none;
      padding: 14px 40px;
      font-size: 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition:background-color 0.3s;
    }

    .hero-button:hover {
      background-color: #027fb0;
    }
@media (max-width:486px) {
    .hero-section{
        padding-block:100px
    }
    .hero-title{
        font-size: 30px !important;
    }
}
    /* --------------------------------- */
    .aboutus-who{
        background-color: #E9F9FBA8;
    }
 .who-we-are {
      display: flex;
      justify-content: center;
      width: 100%;
            perspective: 1000px; /* gives 3D perspective */
            position: relative;
            padding-block: 100px;
            width: 90%;
            margin: auto;


    }

    .left-door {
       width: 40%;
      transform: rotateY(25deg); /* 3D door tilt */
      transform-style: preserve-3d;
      overflow: hidden;
      z-index: 1;
    }

    .left-door img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .right-box {
      background-color: #d5f3fb;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
     width: 70%;
      padding: 40px 30px;
      border-radius: 20px 20px 20px 20px;
          transform:translateX(-15%) rotateY(-25deg); /* 3D door tilt */
      margin-left: -50px; /* slightly overlap the tilted door */
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    }

    .right-box p {
      color: #333;
      font-size: 1rem;
      line-height: 1.6;
      margin-bottom: 20px;
           width: 70%;
    }

    .right-box button {
      background-color: #007ea7;
      color: white;
      border: none;
      padding: 10px 20px;
      font-size: 0.9rem;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .right-box button:hover {
      background-color: #005f7a;
    }


    /* ---------------------------- */
    .aboutus-values{
        padding-block: 100px;
    }
    .aboutus-values h2{
        text-align: center;
        margin-bottom: 20px;
    }
    .aboutus-values-div{
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-inline: 10px;
        justify-content: center;
        align-items: center;
        background-color: white;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        min-height: 100%;
        /* height: 350px; */
        text-align: center;
        
    }
    .aboutus-values-div.div2{
        display: flex ;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
           gap: 20px;
       padding:20px;
        background-color: white;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        min-height: 100%;
    }
@media (max-width:486px) {
    .aboutus-values{
        padding-top: 0px;
    }
    .aboutus-ourmission .row{
        margin-left: 0px;
    }
}


    /* ------------------------------ */
    .aboutus-ourmission{
        padding-block:50px;
        margin-inline: 50px;

    }
    .aboutus-ourmission .header{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 300px;
        
    }
    .door-panel-container{
        display: flex;
        align-items: center;
         width: 90%;
    margin-left: auto;
         position: relative;
     
    }
   .door-panel-container2{
      display: flex;
        align-items: center;
         width: 90%;
    margin-right: auto;
         position: relative;
     
   }
    .door-container {
      perspective: 1200px;
    }
   .aboutus-vision{
    color:#0A97BE;
   }
     .aboutus-mission{
    color:#0A97BE;
   }
    .door-panel{
        height:300px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
   left: -100px;
        z-index: 2;
  
    }
       .door-panel2{
        height:300px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
         right:-150px;
        z-index: 2;
  
    }
    .door-panel-img-absolute1{
        width: 300px;
    }
       .door-panel-img-absolute2{
   width:200px;
   position: absolute;
 
        
    }
    /* .door-panel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    } */

    .door-open {
      transform: perspective(1200px) rotateY(-60deg);
    }

    .info-box1{
      background-color: #d5f3fb;
      border-radius: 0 20px 20px 0;
      padding:20px 20px 20px;
      width: 70%;
      margin-left: auto;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      height: 200px;
      flex:8
    }
        .info-box1 p{
            width: 70%;
            height: 100%;
            align-items: center;
            display: flex;
            margin-left: auto;
        }
        .info-box2 p{
            width: 70%;
                   height: 100%;
            align-items: center;
            display: flex;
            margin-right: auto;
        }
 .info-box2{
     background-color: #d5f3fb;
      border-radius: 0 20px 20px 0;
      padding: 40px 80px;
      width: 70%;
      margin-left: auto;
      position: relative;
      z-index: 1;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
      height: 200px;
      flex:8
 }
    .read-btn {
      background-color: #007ea7;
      border: none;
      color: white;
      padding: 10px 20px;
      border-radius: 6px;
      cursor: pointer;
    }

    .read-btn:hover {
      background-color: #005f7a;
    }
@media (max-width:986px) {
    
    .info-box1{
        margin-bottom: 100px;
      
    }
    .door-panel{
      top: -30px;
      left: -80px;
    }
    .door-panel2{
        right: -70px;
    }
    
}
 
    @media (max-width: 798px) {
         .aboutus-ourmission{
        padding-block:50px;
        margin-inline: 0px;

    }
      .door-panel {
        transform: none !important;
        border-radius: 20px 20px 0 0;
      }
      .info-box {
        margin-left: 0;
        border-radius: 0 0 20px 20px;
      }
      .left-door {
        width: 50%;
      }
      .left-door img{
        object-fit:fill
      }
      .right-box
{
    transform: translateX(0) rotateY(-25deg);
    width: 80%;
    justify-content: end;
    padding:20px 30px;
}
.door-panel-img-absolute2 {
    width: 150px;
}
.door-panel-img-absolute1 {
    width: 240px;
}
.door-panel2{
    right:-80px;
}
.door-panel{
    top: -50px;
}
.info-box2{
    padding:40px 40px
}
    }
@media (max-width:570px) {
    .door-panel-img-absolute1{
        width: 220px;
    }
    .info-box1{
        height: 160px;
    }
    .door-panel-img-absolute2 {
        width: 150px;
    }

    .aboutus-whatwedo .row{
            margin-left: 0px !important;
            margin-right:0px !important;
    }
}
@media (max-width:486px) {
 .who-we-are{
    display: block;
 }
.left-door{
    width: 100%;
}
.right-box{
    width: 100%;
    margin-left: 0px;
}

    .door-panel-img-absolute1{
     width: 150px;
    }
    .door-panel{
        height: 250px;
        left: -60px;
    }
    .door-panel-img-absolute2{
        width: 100px;
    }
    .door-panel2{
        right: -50px !important;
    }
       .info-box1{
        height: 150px;
    }
    .info-box2{
        height: 150px;
        padding:40px 10px;
    }
    .info-box1 p{
        font-size: 12px;
    }
    .info-box2 p{
        font-size: 12px;
    }
}



    /* ------------------------------- */
      .door-container{
        width: 100%;
    }
    .aboutus-whatwedo{
        padding-block: 50px;
        background-color: #F0FBFC;
    }
    .aboutus-whatwedo-header{
        text-align: center;
        padding-bottom: 20px;
        color: #0A97BE;
    }
    .aboutus-whatwedo-box{
       box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
       height: 560px;
    }
    .aboutus-whatwedo-box-div{
        padding:20px;
       
    }
    .aboutus-whatwedo-box-img{
        display: flex;
        justify-content: end;
          
    }
    .aboutus-whatwedo-box-img img{
        width: 200px;
        height: 200px;
    }
    .aboutus-whatwedo-box-div p{
        line-height: 2;

    }
    .box-1{
        background-color: #0A97BE66;
    }
    .box-2{
        background-color: #F6F6F6   ;
    }
    .aboutus-whatwedo-box-div-button{
        width: 100%;
          display: flex;
        justify-content: end;
    }
    .aboutus-whatwedo-box-div button{
        border:none;
        padding:10px 20px;
        background-color: white;
        border-radius: 0.5rem;
               box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

      
    }
        .aboutus-whatwedo-box-div button i{
            transform: rotate(45deg)
        }
   
        .aboutus-statistics-container{
            position: relative;
        }
        .aboutus-statistics-container-img{
            background-color: white;
            border-radius: 50%;
        }
.aboutus-statistics-container-img img{
       position: absolute;
    width: 150px;
    top: 50%;
    left: 50%;
      transform: translate(-50%,-50%);
}
.aboutus-whatwedo-box-img2{
    display: none;
}
       .aboutus-whatwedo .row>*{
        padding-right: 10px !important;
        padding-left: 0px !important;
       }

       .aboutus-statistics-div{
        margin: auto;
        text-align: center;
        padding:100px 40px;
       }
       .aboutus-statistics-div h2{
        color:#0A97BE;
        font-weight: bold;
        font-size: 65px !important;
       }
.aboutus-statistics-header{
    text-align: center;
            color:#0A97BE;
            padding:50px;
}
       .color-1{
         background: linear-gradient(to bottom right,#dcdcdc4f,#0a97be50);
         border-width: 1px;
  border-image: linear-gradient(to bottom right, #dcdcdc, #0a97be);
       }
         .color-2{
         background: linear-gradient(to top left,#dcdcdc41,#0a97be59);
       }
@media (max-width:486px) {
    .aboutus-whatwedo-box-img2{
        display: block;
    }
    .aboutus-whatwedo-box-img1{
        display: none;
    }
   .aboutus-whatwedo .row>*{
        padding-right: 0px !important;
    }
    .aboutus-whatwedo-box{
        height: fit-content;
    }
    .aboutus-whatwedo-box-img img{
        width: 160px;
        height: 160px;
    }
    .aboutus-ourmission .header {
        height: fit-content;
    }
    .door-container{
        width: 100%;
    }
    .aboutus-whatwedo-box-div p{
    line-height: 1.5;
}
.aboutus-whatwedo-box-img {
    justify-content: center;
}
}
       /* ------------------ */