@media only screen and (min-width : 1400px) {
    
}

@media only screen and (max-width: 1400px) and (min-width : 1200px) {
    .homeHero h1{
        width: 100% !important;
    }
    .homeHero p{
        width: 75%;
    }

    .faqSec{
        width: 40%;
    }

    .caroRow .owl-carousel .carousel-card {
    
    border-radius: 10px;
    
    width: auto;
 
  }
 .rightOne {
    right: 13%;
}

.leftOne {
    left: 13%;
}

.proDetailSec,.goalSec{
    width: 100% !important;
}

/* testimonial */

.testContainer{
    width: 70%;
}

.testHead{
    width: 50%;
}
.webImg{
    width: 68%;
    top:13%;
}

/* ===== */
.webContent{
    padding-top:80px;
    padding-bottom: 80px;
}

.webHead{
    width: 40%;
}
.web{
    padding: 20px;
}   

.path1,.path2{
    width: 26%;
}

/* SERVICE */

.man{
    height: 86%;
}


.serContent .heading{
    font-size: 60px;
line-height: 70px;}


.service{
    padding-top: 26px;
}

.boxContainer{
  width: 100%;
}

.career{
  width: 100%;
}
}

@media only screen and (max-width: 1200px) and (min-width : 992px) {
    .homeHero h1,.webContent{
        width: 100% !important;
    }
    .homeHero p{
        width: 75%;
    }
    .faqSec{
        width: 40%;
    }
      /* About us */

.aboutBg {
    padding: 0px 37px;
}

.zeroMargin{
    margin-bottom: 0 !important;
}

 .caroRow .owl-carousel .carousel-card {
    
    border-radius: 10px;
    
    width: auto;
    height: 350px; /* Adjusted to make the card's height smaller than the carousel */
 
  }
 .rightOne {
    right: 14.5%;
}

.leftOne {
    left: 14.5%;
}
.softwareSec .container{
    width: 84% !important;
}

/* FAQ */

.faq-container{
    padding: 20px;
}
.faq-item{
    min-height: 130px;
}

.webImg{
    width: 76%;
    top:12%;
}

.proDetailSec,.goalSec{
    width: 100% !important;
}

.mediaBox {
    width: 110px;
    height: 110px;
}

.mediaBox:hover i {
  transform: translate(28px, 25px) scale(1.2);
}

/* testimonial */

.testContainer{
    width: 80%;
}

.testHead{
    width: 60%;
}

/* ===== */
.webContent{
    padding-top:100px;
    padding-bottom: 100px;
}

.webHead{
    width: 50%;
}

.web{
    padding: 0;
}



.path1{
  top: 31%;
  left: 53%;
}



.path2{
    top: 27%;
    left: 19.5%;
    
}

.startSec{
    width: 80%;
}

.startSec .subHead{
    width: 70%;
}
/* PROJECT */
 
     .proContent button{
    width: auto;
  }

/* SERVICE */

.home{
    padding-bottom: 50px;
}

.serHero{
    height: 350px;
}

.man{
    height: 82%;
    top: -9.5%;
}

.serContent .heading{
    font-size: 50px;
    line-height: 58px;
}
.service{
    padding-top: 2px;
}

.serContent p{
    width: 100% !important;
}

.serviceBtn{
    padding: 8px 8px 8px 14px;
    font-size: 15px;
}

.serWhat h2{
width: 85%;
margin-left: 7.5%;
}

.boxContainer{
  width: 100%;
}


.careers .title{
    font-size: 64px;
    line-height: 72px;
}

.career{
  width: 100%;
}

.last_sec{
    /* padding: 15px 17px; */
    min-height: 200px;
}

.proDetailSec .title{
    font-size: 67px;
    line-height: 52px;
}
}

@media only screen and (max-width: 992px) and (min-width : 768px) {

    .getBtn{
        padding: 7px 14px;
    }
     .homeHero h1,.homeHero p,.softwareSec .container,.softHead p,
     .faqHead .container,.proDetailSec,.testContainer,.webContent,.startSec,.goalSec{
        width: 100% !important;
    }

    .testHead,.webHead{
        width: 50%;
    }
    .faqSec{
        width: 40%;
    }

    
     .homeBox{
    padding: 25px 20px;
  }
  
    .homeBtns button{
        padding: 15px  30px;
    }

    /* About us */

.aboutBg {
    padding: 0px 30px;
}

.aboutBg h2{
    font-size: 37px !important;
    line-height: 47px !important;
}
.booksBtn{
    padding: 4px 8px 4px 40px;
}

.videoContent h5{
    font-size: 16px;
}

.middle{
  border-right: 1px solid rgba(38, 38, 38, .5) !important;  
}

 .caroRow .owl-carousel .carousel-card {
    
    border-radius: 10px;
    
    width: auto;
    height: 330px; /* Adjusted to make the card's height smaller than the carousel */
 
  }
 .rightOne {
    right: 8%;
}

.leftOne {
    left: 8%;
}
 .serviceSec .allBtn{
    padding: 10px 50px;
    
 } 
  .softCard img{
    width: 50px;
}

.softCard h4{
    font-size: 20px;
}
/* FAQ */

.faq-container{
    padding: 0px;
    gap: 0;
}

.faq-number{
    padding: 10px 15px;
    font-size: 16px;
}

.faq-question{
    font-size: 16px;
}

.faq-answer{
    margin-left: 65px;
    /* text-align: center; */
}
.faq-header {
  
    gap: 10px;
}
.faq-item{
    padding-left: 10px;
    padding-right: 10px;
}

.webImg{
    top:6%;
    width: 64%;
}

.proDetailSec .title{
    font-size: 50px;
    line-height: 58px;
}

.goal,.approach{
    width: 50%;
}

.goal h3{
    font-size: 31px;
    line-height: 41px;
}

.testContent{
    padding-left: 50px;
}
.home{
    padding-bottom: 40px;
}

/* ===== */
.webContent{
    padding-top:40px;
    padding-bottom: 40px;
}

.web{
    padding: 0;
}

.path1,.path2{
  
    width:25%;
}

.path1{
  top: 24%;
  left: 54%;
}



.path2{
    top: 20%;
    left: 20.5%;
    
}

/* PROJECT */
   .tabBox{
  padding: 18px 20px !important;
}
 .tabBox .tab{
   
    padding: 10px 10px !important;
  }
   .proContent button{
    width: auto;
  }

  /* faq */

  .faqBox p {
    margin-right:10px;
    
}

/* SERVICE */

.serHero{
    height: auto;
    background-image: none;
    background-color: #312F2F;
    border-radius: 30px;
}

.man{
    position: static;
height: 93%;
width: 100%;
top: auto;
}

.serContent{
padding: 0px 30px;
}

.serContent .heading{
    font-size: 45px;
    line-height: 53px;
}

.serviceBtn i{
    height: 30px;
    width: 30px;
}

.serviceBtn{
    padding: 7px 7px 7px 20px;
}

.serContent p{
    width: 100% !important;
}

.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service {
    padding-top: 0;
}

.serCaro{
    width: 70%;
}

.serButton{
    width: 30%;
}

.serDetail{
    width: 80%;
}




.lineC,.lineF{
  display: none;
}

.serWhat h2,.serWhat .container{
    width: 100% !important;
}

.serWhat h2{
    margin-left: 0;
}


.feature{
    padding: 30px 20px;
}

.proNameCard h3{
    font-size: 28px;
    line-height: 38px;
}

.proNameCard{
    padding: 30px;
}

.proNameCard img{
  margin-top: 20px;
 
}

.carousel-control-next{
    right: -8%;
}

.carousel-control-prev{
    left: -8%;
}

.boxContainer{
  width: 100%;
}

.design h3,.design2 h3{
font-size: 34px;
    line-height: 40px;
  
}

.green{
    width: 30%;
}

.careerInp{
    margin-bottom: 30px;
}

.last_container{
    padding: 15px;
}

.homeBox span{
    padding: 10px;
}

.last_sec .arrow{
    height: 30px;
    width: 30px;
}

.last_sec h5{
    font-size: 19px;
}

.last_sec{
    padding: 15px 17px;
    min-height: 200px;
}
}

@media only screen and (max-width: 768px) {
    .useBtm{
        text-align: center;
    }
     /* HOME */
.noBorder{
    border-top: none;
}
   canvas {
    display: none;
  }
    .homeHero{
        padding: 40px 0px;
        background-size: 100%;
    }

    .homeHero h1,.homeHero p,.serviceSec .content,.softwareSec .container,.approach ,.goal,.goalSec,
    .softHead p,.faqHead .container,.proDetailSec,.projectDiv,
    .testHead,.testContainer,.webContent,.startSec,#services
    ,.owlCard h5,.serDetail,.detailImg,.serWhat h2,.serWhat .container ,.serviceBar{
        width: 100% !important;
    }

.webContent{
    background-image: none;
}
    .serWhat h2{
        margin-left: 0;
    }
    .webHead,.startSec .subHead,.faqSec{
        width: 80% !important;
    }
    .homeBox{
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 20px ;
    }

    .homeBox span{
        padding: 6px 10px;
        /* font-size: 14px; */
    }

    .homeBtns button{
        padding: 15px  28px;
        font-size: 16px;
    }

 
.marquee-item{
    padding: 0px 0px;
}

/* About us */

.aboutBg {
    padding: 0px 30px;
}
.booksBtn{
    padding: 8px 8px 8px 55px;
    font-size: 16px;
}

.bookBth{
    padding: 10px 40px;
    font-size: 16px;
}
.learnBtn, .serviceSec .allBtn{
    font-size: 16px;
}


 .iconCard{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   text-align: center;
}
 .caroRow .owl-carousel .carousel-card {
    
    border-radius: 10px;
    
    width: auto;
    height: 250px; /* Adjusted to make the card's height smaller than the carousel */
 
  }

 .rightOne,.leftOne {
display: none;
}


 .serviceSec .allBtn{
    padding: 10px 50px;
    
 } 

 .softCard img{
    width: 35px;
}

.softCard h4{
    font-size: 18px;
}
/* FAQ */
.faqHead p{
    width: 90%;
    margin-left: 5%;
}

.faq-container{
    padding: 0px;
    gap: 0;
}
.faq-number{
    padding: 10px 15px;
    font-size: 16px;
}

.faq-question{
    font-size: 17px;
}

.faq-answer{
    margin-left: 0px;
    /* text-align: center; */
}

.faq-container::before{
    width: 0;
}

.mediaBox {
    height: 120px;
    width: 140px !important;
}

.mediaBox i{
    font-size:35px;
}

.mediaBox:hover i {
  transform: translate(40px, 25px) scale(1.2);
}

.mediaDiv1{
display: flex;
justify-content: end;
}

.mediaDiv2{
display: flex;
justify-content: start;}

/* .appBar{
    flex-direction: column;
} */

.proBar{
    border-radius: 16px 16px 16px  16px;
}

.proBar p{
    text-align: center;
}

.goal h3,.approach h3{
    font-size: 35px ;
    line-height: 45px;
    text-align: center;
}
/* testimonial */

.testVideo{
    height: 300px;
}
.testContent {
    padding:25px 20px !important;
    text-align: center;
}

.testContent img{
    width: 30%;
}
/* ===== */
.webContent{
    padding-top: 0px;
    padding-bottom: 0px;
}

.pointOne p{
    width: 100%;
    line-height: 20px;
}

.pointOne{
    padding: 10px !important;
}

.web{
    padding: 10px;
}

.path1,.path2{
    display: none;
}


/* PROJECT */
    .projectSec .content{
    width: 80%;
  }
  
    .first{
    text-indent: 0px;
  }
/* .tabBox{
  padding: 18px 20px !important;
} */

  .tags {
    padding: 2px 4px;
    font-size: 12px;
}

  .proContent button{
    width: auto;
     font-size: 14px;
  }
   .tabBox {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px; /* Optional, for spacing below tabs */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  }

  .tabBox::-webkit-scrollbar {
    display: none; /* Hides scrollbar for a cleaner look */
  }

  .tabBox .tab {
    flex: 0 0 auto; /* Prevent shrinking and wrapping */
    white-space: nowrap;
  }
  /* faq */
    .faqBox {
    padding: 20px 25px;
    border-radius: 15px;
  }
  .ques{
    gap: 20px;
  }
  .question .icon {
padding: 15px !important;  
}



.faqBox p {
    margin-left: 10px;
    margin-right:10px;
    margin-bottom: 0;
    text-align: start !important;
}


/* ===SERVICE=== */

.serHero{
  /* margin-top: 100px; */
  background-image:none;
 height: auto;
 background-color: #312F2F;
 border-radius: 20px;
 padding-bottom: 20px;
}
.man{
     position: static; /* or relative depending on your layout */
    top: auto;
    bottom: auto;
    height: 100%;
    width: 50%;
    margin-left: 25%;
    
}
.serContent{
    padding: 20px 0px;
}

.service{
    padding-top: 0;
}


.serContent p{
    width: 100% !important;
    
}

.serCaro{
    width: 60%;
}
.serButton{
    width: 40%;
}

.serviceBtn{
   padding: 10px 10px 10px 22px;
}


.doCard{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.owlCard p,.owl-carousel .tag{
    text-align: start !important;
}
.line1,.line2,.lineA,.lineB,.lineC,.lineD,.lineE,.lineF{
    display: none;
}


.feature{
    padding: 30px 20px;
}

.proNameCard h3{
    font-size: 28px;
    line-height: 38px;
}

.proNameCard{
    padding: 30px;
}

.proNameCard img{
  margin-top: 20px;
 
}

.testVideo video{
    border-radius: 20px 20px 0px 0px;
}


.userCarousel .owl-stage{
  padding-top: 0px;
}

.owl-item.center .userCard {
  transform: none;
  /* box-shadow: 0 8px 30px rgba(0, 204, 101, 0.3); */
}

.boxContainer{
  width: 100%;
}

.userCard {
    padding: 20px 10px;
    height: 430px;
}

.useBtm{
    padding-top: 10px;
    font-size: 16px;
}

 .rightBorder{
    border-right: none;
}

.getHead{
    display: flex;
flex-direction: column;
align-items: center;
}

.design h3,.design2 h3{
font-size: 40px;
    line-height: 50px;
    text-align: center;
}

.accordion-body{
    margin-right: 0px;
}

.lastSec p{
    width: 100% !important;
}


.lastSec{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.wheel{
    width: 25%;
    margin-left: 37.5%;
}

  .tabBox{
    /* border-radius: 23.03px; */
background:transparent;
 padding:0px 0px;
 border-radius: 0px;
 /*
width: max-content;
display: flex;
 flex-wrap: nowrap; */
gap: 10px; 
  }

  .tabBox .tab{
    border: none;
    background-color: transparent;
    padding: 10px 12px;
  }


 .tabBox .tab {
  position: relative;
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  color: white;
  transition: color 0.3s ease;
}

.tabBox .tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #00CC65;
  transition: width 0.4s ease;
}

.tabBox .tab:hover::after,
.tabBox .tab.active::after {
  width: 100%;
}

/* If you want to add active tab style other than underline */
.tabBox .tab.active {
  font-weight: 600;
  color: black;
  background-color: #00CC65;
}



/* From Uiverse.io by nikk7007 */ 
.tabBox .tab {
 --color: #00CC65;
 --color2: rgb(10, 25, 30);
 padding: 10px 20px;
 background-color: transparent;
 border-radius: 6px;
 border: .3px solid var(--color);
 transition: .5s;
 position: relative;
 overflow: hidden;
 cursor: pointer;
 z-index: 1;
 font-weight: 600;
 font-size: 17px;
 font-family: 'Roboto', 'Segoe UI', sans-serif;
 text-transform: uppercase;
 color: var(--color);
}

.tab::after, .tab::before {
 content: '';
 display: block;
 height: 100%;
 width: 100%;
 transform: skew(90deg) translate(-50%, -50%);
 position: absolute;
 inset: 50%;
 left: 25%;
 z-index: -1;
 transition: .5s ease-out;
 background-color: var(--color);
}

.tab::before {
 top: -50%;
 left: -25%;
 transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
}

.tab:hover::before {
 transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
}

.tab:hover::after {
 transform: skew(45deg) translate(-50%, -50%);
}

.tab:hover {
 color: var(--color2);
}

.tab:active {
 filter: brightness(.7);
 transform: scale(.98);
}

  .tabBox .tab::before,
  .tabBox .tab::after {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    transform: skew(90deg) translate(-50%, -50%);
    position: absolute;
    inset: 50%;
    left: 25%;
    z-index: -1;
    transition: .5s ease-out;
    background-color: var(--color);
  }

  .tabBox .tab::before {
    top: -50%;
    left: -25%;
    transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
  }

  .tabBox .tab:hover::before {
    transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
  }

  .tabBox .tab:hover::after {
    transform: skew(45deg) translate(-50%, -50%);
  }

  .tabBox .tab:hover {
    color: var(--color2);
  }

  .tabBox .tab:active {
    filter: brightness(.7);
    transform: scale(.98);
  }

  .opptnts button{
    display: flex;
    align-items: center;
  }

  .carousel-control-prev,.carousel-control-next{
display: none;
}

.last_sec .content{
    text-align: start;
}

.last_sec .arrow{
    height: 30px;
    width: 30px;
}
.last_sec p{
    margin-bottom: 0 !important;
}

.last_sec{
    padding: 10px 12px;
}

.last_sec h5{
    font-size: 17px;
}


}

@media only screen and (max-width:576px){

.arw{
    display: none;
}

    .softwareSec .subHead{
        font-size: 28px;
        line-height: 32px;
    }
     .caroRow .owl-carousel .carousel-card {
        height: 165px;
     }

    .design button{
        padding: 10px 15px;
    }
    /* HOME */

   .videoContent h5{
    width: 80% !important;
    margin-left: 10%;
    font-size: 14px;
   }
    .homeBox{
      padding: 20px 15px;
    }

    .homeBox span{
        padding: 6px 10px;
        font-size: 14px;
    }

    .homeBtns button{
        padding: 15px  28px;
        
    }

.marquee-item{
    padding: 0px 20px;
}



/* About us */

.aboutBg {
    padding: 0px 10px;
}


.video {
    height: 200px;
}


  
.softCard img{
    width: 50px;
}

.softCard{
  flex-direction: column;
}
.softCard h4{
    font-size: 16px;
}

/* fAQ */


.faq-container{
    padding: 10px;
    gap: 0;
}
.faq-number{
    padding: 10px 12px;
    font-size: 16px;
}
.goal h3,.approach h3{
    font-size: 27px ;
    line-height: 37px;

}
/* testimonial */
 


.testContent img{
    width: 50%;
}

.testContent {
height: 400px;
    padding: 20px 10px;
  
}

.testContent h4{
    font-size: 20px;
}


.testContent p{
font-size: 15px;
line-height: 21px
}
.carousel-control-prev,.carousel-control-next{
    display: none;
}

.testVideo{
    height: 250px;
}


/* PROJECT */
  .proContent button{
    width: auto;
    font-size: 15px;
  }
  .projectSec .content{
    width: 100%;
  }
  
    .first{
    text-indent: 0px;
  }
  .tags{
    font-size: 11px;
  }

  .faqBox {
    padding: 15px 10px;
    border-radius: 15px;
  }
  .ques{
    gap: 15px;
  }
  .question .icon {
padding: 10px !important;  
}

.question h5{
    font-size: 16px;
}

.faqBox p {
    margin-left: 10px;
    margin-right:10px;
    margin-bottom: 0;
    text-align: start !important;
}

/* ===SERVICE=== */

.serHero{
  /* margin-top: 100px; */
  background-image:none;
 height: auto;
background-size: cover;
 border-radius: 20px;
 padding-bottom: 20px;
}
.man{
     position: static; /* or relative depending on your layout */
    top: auto;
    bottom: auto;
    height: 100%;
    width:60%;
    margin-left: 20%;
    
}
.serContent{
    padding: 20px 0px 0px 0px;
}

.service{
    padding-top: 0;
}


.serContent p,.serCaro,.serButton{
    width: 100% !important;
    
}

.serviceBtn{
    font-size: 16px;
}

.owlCard h5{
    font-size: 16px;
}



.owlCard .tag{
    font-size: 12px;
}
/* SERVICE DETAIL */

.serviceBar h6{
    font-size: 14px;
}

.serviceBar h3{
    font-size: 35px;
}

.feature{
    padding: 30px 20px;
}

.proNameCard h3{
    font-size: 24px;
    line-height: 34px;
}

.proNameCard{
    padding: 20px;
}

.proNameCard img{
  margin-top: 10px;
 
}


.playButton{
    height: 50px;
    width: 50px;
}

.playButton i{
    font-size: 18px;
}

.rightBtn,.leftBtn{
    display: none;
}

.design .rightBorder{
    border-right: none;
}

.design h3,.design2 h3{
 font-size: 34px;
    line-height: 36px;
}

.careerInp{
    margin-bottom: 20px;
}


.accordion-item{
    padding: 5px;
}
.last_container{
    padding: 10px;
}

.blackBtn .design button{
    padding: 8px 10px;
    font-size: 14px;
}

.headBtn2 i{
    padding: 8px;
}

  #carouselTwo .owl-item img{
    width: 130px ;
    margin: 1px;
  }

  .item{
    height: 56px;
  }

 .accordion-header span{
    margin-right: 20px;
  }

  .doCard{
    height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .mediaBox:hover img {
  transform: translate(40px, 35px) scale(1.2);
}
}