@media only screen and (max-width: 467px) {
    /*------------------ navbar--------- */
    *{
      margin:0px;
      padding: 0px;
    }
    #containerB,#containerC,#containerD,  #containerE,#containerF,#containerG,#containerH{
      display: flex;
      flex-direction: column; 
      background-size: contain ;
      justify-content: center;
      align-items: flex-start;
    }


    /* -----------navbar----- */
    #navbarText{
        max-width: 100%;
    }
    #navbarText ul li{
    width: 100%;
    margin: auto;
    text-align: center;
    font-weight: 600;
}
    /* ---------------------------index-page-------------------- */
    /* --------------herosection--------- */
  
    .heroSection{
      width: 100%;
      height: 75vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
    }
   
    .heroSection #heroCircle{
      height: 78vh;
      position: absolute;
      top: 0px;
    }
    .hero-container{
      position: relative;
      top: 55%;
      width: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 100;
  }
  .heroSection h1{
      font-weight: 600;
      font-size: 2.163rem;
      line-height: 46px;
      letter-spacing: -1%;
      text-align: center;
      text-shadow: 0px 6px 
      6px  #00000066;
      margin-bottom: 8px;
  }
  .heroSection h6{
      font-size: 0.713rem;
      font-weight: 600;
      letter-spacing: 3px;
      text-shadow: 0px 6px 8px  #00000066;
      margin-bottom: 0px;
  }
  .heroSection p{
      font-weight: 300;
      font-size: 1rem;
      /* line-height: 28px; */
      text-align: center;
      opacity: 75%;
      text-shadow: 0px 8px 8px  #00000066;
  }
  .heroSection #herobtn-grad{
      margin-top: 30px;
     width: 191px;
     height: 50px;
     font-weight: 600;
     font-size: 0.8rem;
  }
  .heroSection #herobtn-grad span{
       width: 35px;
       height: 35px;
       font-size: 1rem;
  }
  /* -------------containerB----------- */
  #containerB{
      display: flex;
      width: 100%;
      justify-content: flex-start;
      margin-top:4vh;
   }
   .subContA{
      width: 85%;
      margin: auto;
   }
   #workExperience{
      width: 78.8%;
      margin: auto;
      height: 300px ;
      margin-bottom: 50px;
   }
   #workExperience img{
      width: 250px;
      position: absolute;
      left: -25%;
      bottom: 32%;  
   }
   /* --------rightCont--------- */
   .subContB{
      min-width: 78.8%;
      margin: auto;
   }
   #CreatApproach{
      width: 159.66px;
      height: 35px;
      font-size: 0.675rem;
      font-weight: 700;
      line-height: 12px;
      text-align: center;
   }
   .subContB h1{
      font-weight: 700;
      font-size: 2.113rem;
      line-height: 2.425rem;
      letter-spacing: -1px;
      margin-top: 1.5vh;
      margin-bottom: 2vh;
      text-shadow:  0px 2px 4px  #00000040;
   }
   .subContB p{
      font-size:0.963rem ;
      font-weight: 400;
      line-height: 28px;
      color: #878898;
      text-shadow:  0px 2px 4px  #00000040;
  }
  .subContB #btnPair{
      width: 110%;
      margin: auto;
      display: flex;
      /* flex-direction: column; */
   }
   .subContB #btnPair .btn-primary{
      /* width: 161.48px; */
      height: 46px;
      border-radius: 50px;
      margin-top: 10px;
      font-size: 14px;
   }
   .subContB #btnPair .btn-light{
      /* width: 141.48px; */
      height: 46px;
      border-radius: 50px;
      margin: 5px;
      font-size: 15px;
   }
   #counterRow{
    width: 95%;
    margin: auto;
   }
   #counterRow .row .col {
    display: flex;
    justify-content: center;
   }
   #counterRow .row{
      margin-top: 6vh !important;
      margin-bottom: 5vh;
      display: flex;
   }
   .counter-box{
      width: 80px;
      display: flex;
      justify-content: center;
   }
   .counter-box h1{
      font-size: 2.113rem;
  }
  .counter-box .headingbarA{
      margin-top: -25px;
  }
  .counter-box .headingbarB{
      margin-top: -25px;
  }
  .counter-box p{
      font-size: 14px;
      line-height: 20px;
      font-weight: 700;
      text-align: center;
  }
  #plus{
    /* position: absolute; */
    font-size: 35px;
    color: #30394F;
    font-weight: 800;
    height: 40px;
    /* width: 30px; */
    display: flex;
    align-items: center;
    
}
 #happy-clients{
    margin-left: 10px;
 } 
 
 .counter-box .odometer span{
 padding-right: 1px;
 }
  /* ---------containerC---------- */
  
  
  #containerC{
      height: 78.58vh; 
      width: 100%;
      background-size:cover;
      
    }
    
    
    #containerC .leftCont{
        width: 80%;
        padding: 8vh 0vh;
        margin: auto;
        display: flex !important;
      flex-direction: column !important;
      justify-content: space-around!important;
  }
  #containerC .leftCont h4{
      font-weight: 600px;
      font-size: 13px;
      line-height: 32px;
      margin-bottom: 4vh;
  }
  #containerC .leftCont h1{
      font-weight: 700px;
      font-size: 2.113rem;
      line-height: 38px;
      margin-bottom: 5vh;
      text-shadow:  0px 8px 8px  #00000040;
  }
  #containerC .leftCont p{
      font-weight: 400px;
      font-size: 17px;
      line-height: 30px;
      text-shadow:  0px 4px 4px  #00000040;
      margin-bottom: 5vh;
  }
  
  #containerC .rightCont{
      display: none;
  }
  
  /* ---------containerD---------- */
  #containerD {
      max-width: 97%;
      margin: auto;
      margin-top: 7vh;
  
  }    
  #containerD .subContB{
    width: 81.78%;
  }
  .subContC{
      height: max-content;
      width: 100%;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* scrollbar-width: none; */
      margin-top: 7vh;
      overflow: none;
  }
  .subContC .cardA{
      width:  92%;
      margin-bottom: 20px;
      padding: 20px 20px 0px 20px;
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  .subContC .cardA img{
      width: 18%;
  }
  .subContC .cardA h2{
      margin-top: 10px;
      font-size: 20px;
  }
  .subContC .cardA p{
      font-size: 15.2px;
      font-weight: 400;
      text-align: center;
  }
  /* -------------containerE------------------- */
  
  #containerE{
      width: 90%;
      margin: auto;
      height: 20vh; 
      margin-bottom: 1vh;
    }
    #containerE .floating-text{
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
    #containerE .floating-text div {
        /* width: 100%;
        margin: auto; */
      font-weight: 700;
      font-size: 27px;
      line-height: 36.4px;
       position: relative;
    /* overflow: hidden; */
  }

.floating-text .left-text{
    animation: none;
    
}
.floating-text .right-text{
    animation: none;
}

/* ----------------------container F---------------- */
#containerF{
    width: 100%;
    margin: auto;
    height: fit-content;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}


 /* -----FirstSUb-container------- */
 #containerF .first{
    /* max-width: 90%; */
    width: 80%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
 }
 #containerF .first .heading{
    width: 100%;
    margin-bottom: 2vh;
    /* color: blue; */
 }
 #containerF .first .heading h6{
    font-size: 13px;
    font-weight: 600;
    line-height: 42px;
    color: #FFFFFF;
    margin-bottom: 2vh;
 }

 #containerF .first .discription{
    width: 100%;
 }
 #containerF .first .carousalbtn{
    display: none;
 }

 #containerF .second{
    width: 100%;
    margin: auto;
 }

 #containerF .second .owl-carousel{
    height: 400px;
    width: 100%;
    margin: auto;
    margin-top: 3vh;
    margin-bottom: 5vh;
 }
 #containerF .second .owl-carousel .item{
    display: flex;
    justify-content: center;
 }
 .owl-dots{
    width: 100%;
    margin: auto;
    position: static;
    margin-top: 2vh;
 }
 .owl-prev span {
    position: absolute;
    right: 67vw;
    top: 250px;
 }
 .owl-next span {
    position: absolute;
    right: -19vw;
    top: 250px;
 }


 #containerF .third{
    display: none;
 }

/* --------------------------------containerG-------------------------- */

#containerG{
    max-width: 85%;
    margin-bottom: 8vh;
    margin-top: 10vh;
}

 .headingDisc{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#containerG .headingDisc .leftCont{
    width:100%;
}
#containerG .headingDisc .leftCont h1{
    margin-top: 2vh;
}
#containerG .headingDisc .rightCont{
    width: 100%;
    height: fit-content;
    text-align: left;
    font-size: 17px;
    font-weight: 400;
    line-height: 32px;
    color: #878898;
}
/* --------------card-Grid---------- */
#containerG .btnGrid{
    margin-top: 5vh;
    width: 100%;
}
#containerG .btnGrid .card{
    margin-top: 3vh;
    width: 90%;
    display: flex;
    justify-content: center;
}
#containerG .btnGrid .card-B{
    width: 90%;
    height: 221px;
    background-size: cover;
}




 
#containerH{
    height: fit-content;
    padding: 15px 0px 15px 0px ;
}
.subContainerA{
    flex-direction: column;
    padding-bottom: 5px;
}
.subContainerA .footerlogo img{
    width: 123px;
    object-fit: contain;
    margin-bottom: 10px;
}
.subContainerA .footLinks{
    width: 100%;
    flex-direction: row;
}
.subContainerB{
    width: 95%;
}
.subContainerB .left-subContainer{
    width: 100%;
    border-radius: 32px;
    margin-top: 5vh;
    padding:  25px 20px 20px 25px;
    position: relative;
    height: fit-content;
}
.subContainerB .left-subContainer form .form-group{
 margin-top: 0px !important;
}
.subContainerB .left-subContainer form input{

    border-radius: 20px;
    border: none;
    padding: 8px;
    font-size: 13px; 
    height: 40px;

}
.subContainerB .left-subContainer button{
    position: static;
    margin-top: 0px;
    margin-left: 10px;

}



.subContainerB .right-subContainerB {
    display: none;
}































}