/* responsive.css */
/* responsive.css */
@media (min-width: 992px) and (max-width: 1300px) {
  .contact-page .form-box form 
{
    width: 80%;
}
  .swiper-industry .card .information ul li {
    font-size: 8px;
    line-height: 22px;
  }
  .swiper-industry .card .information .button  
  {
    font-size: 7px;
  }

}
@media (max-width: 1300px) {
  #mission-vission .box h2
  {
    margin-top: 50px;
     text-align: center;
     font-size: 20px;
  }
   .why-choose-all-box {
    gap: 30px; 
  }
  .why-choose-all-box .why-choose-box h3 {
    font-size: 22px;
  }
}

@media (max-width: 1200px){
  .why-choose-all-box {

    gap: 20px;
   
  }
}
@media (max-width: 992px) {
  .portfolio {
  
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 30px;
}
  .more-details-box iframe 
{
    width: 70vw;   
}
.contact-page .form-box form 
{
    width: 100%;
}
  .sub-services-box
  {
       grid-row-gap: 30px;
       grid-column-gap: 30px;
  }
  .accordion-desktop
  {
    display: none;
  }
  .accordion-item button {
    max-width: 100%;
  }
  .accordion .accordion-header.active-accordion + .accordion-content {
    display: flex;
    /*flex-direction: column;*/
    
}
.accordion .accordion-content p
{
  line-height: 25px;
  font-weight: 400;
}
.accordion .accordion-content img 
{
  width: 300px;
  object-fit: cover;
}
  .service_Faq_box
  {
    grid-template-columns: 1fr;
  }
#services-name 
{

  min-height: 50vh;
}
  .why-choose-all-box {

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: minmax(200px, 300px);
  
    gap: 30px;
  
}
#services
{
  flex-direction: column;
   gap: 0px;
}
.services-box {
 

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: min-height(400px);
    gap: 15px;
    grid-row-gap:60px;

}
  #mission-vission
  {
    gap: 8px;
  }
  #mission-vission .box
  {
    padding: 5px 10px;
  }
   #mission-vission .box h2
   {
      font-size: 18px;
   }
    #mission-vission .box p
    {
      font-size: 16px;
    }
  .contact-body
  {
    flex-direction: column-reverse;
    gap: 30px;

  }

  .form-box
  {
   
    padding: 0px;
  }
  .map-box iframe
  {
    height: 50vh;
  }
.swiper-industry .card .information ul li  
{
  font-size: 8px;
  font-weight: 500;
 line-height: 20px;
}
.fact-all-box
{
    display: grid;
   /*border: 1px solid red;*/
   grid-template-columns: repeat(2, minmax(200px,300px));
   grid-template-rows: repeat(2, minmax(200px,300px));

 }

#project-process
{
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
 #our-services .all-services
  { 
    padding-inline: 0px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, minmax(380px, auto));
  }
  #our-services .all-services
  { 
    gap: 30px;
  }
  #our-services .all-services .service-box .content 
  {
    gap: 40px;
  }
  #our-services .all-services .service-box .content img 
  {
    width: 120px;
    
  }
  #our-services .all-services .service-box .content h3 {
    font-size: 26px;
  }

  .getintouch-data
  {
    flex:1.5;
  }
  .call-to-action-container .mockup img  
  {
 
    width: 40vw;
   
    top: -35px;
  }
  .getintouch-data .cta-btn 
  {
    margin-top: 10px;
  }
  .getintouch-data p 
  {
    margin-top: 10px;
  }
  .getintouch-data h4 
  {
    color: #fff;
    font-size: 24px;
  }
  .getintouch-data
  {
    padding: 40px;
  }

  #facts
  {
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(2, minmax(100px, 200px));
     gap: 20px;
  }
   .sub-services-box
  {
       grid-row-gap: 30px;
       grid-column-gap: 30px;
  }
  .form-section {
    max-width: 80vw;
    width: 80vw;
  }
  .page-padding
  {
    padding-inline: 50px;
  }
}

/*............................................................................................*/
@media (max-width: 768px) {
    .more-details-box iframe 
{
    width: 80vw;   
}
  #services-inquery .bg-container {
    min-height: 73vh;
}
#services-inquery .bg-container-bottom
{
  height: 17vh;
}

  .how-to-started .all-steps  
{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.how-to-started .all-steps .step a   
{
  
    font-size: 16px;
    padding: 8px 12px;
    margin-top: 10px;
    
}
.how-to-started .all-steps .step:nth-child(3)
{
  background-color: #fff;
  border:1px solid var(--text-dark);
}
.how-to-started .all-steps .step:nth-child(4)
{
  background: var(--text-dark);
  border: none;
}
  .contact-page
  {
    flex-direction: column;
  }
  #page-conatact
  {

    background-position: center center;
  }
  #page-conatact:after 
  {
    background: linear-gradient(to bottom, #fff 40%, transparent,transparent);
  }
  #contact-page-header
  {
    flex-direction: column;
  }
  .form-section {
    max-width: 90vw;
    width: 90vw;
  }
    .accordion .accordion-header.active-accordion + .accordion-content {
    /*display: flex;*/
    flex-direction: column;
    
}
.accordion .accordion-content img 
{
  width: 100%;
}
  #services-name h1 
  {
    margin-top: -50px;
  }
    .why-choose-all-box {

    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: minmax(200px, 300px);
  
    gap: 30px;
  
}
  .about-pra
  {
    font-size: 16px;
  }
#mission-vission
{
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2,minmax(400px,auto));
}
.vision-box
{
  grid-column: span 2;
  min-height: fit-content !important;
  height: fit-content !important;
  padding-bottom: 15px !important;
}

.subheader p
{
  max-width: 98vw;
}

  .swiper-industry .card .information ul li  
{
  font-size: 12px;
  font-weight: 500;
 line-height: 25px;
}
.fact-all-box
{
 
   grid-template-columns: repeat(2, minmax(200px,300px));
   grid-template-rows: repeat(2, minmax(200px,250px));

 }
.slide1 .circle ,.slide2 .circle 
{
  display: none;
}
.slide1 .img-side .rocket
{
    width: max(200px, 15vw);
    left: -100px;
    bottom: 20px;
}
.slide1 .img-side .work
{
    width: max(150px, 17vw);
     bottom: 20px;
    right: -150px;
   
}
.slide1 .img-side .laptop
{
    width: max(80px, 8vw);
    bottom: 0px;
    left: -250px;
    z-index: 3;
}
.slide1 .img-side .plan
{
    width: max(70px, 7vw);
   bottom: 0px;
    right: -80px;
    z-index: 4;
}

/*slide 2 images size*/

.slide2 .img-side .rocket2
{
    width: max(120px, 8vw);
   left: -50px;
    bottom: 0px;
    z-index: 2;
    /*border: 1px solid red;*/

}
.slide2 .img-side .boy1
{
    width: max(160px, 10vw);
   left: -180px;
    bottom: 50px;
    z-index: 2;
    /*border: 1px solid red;*/

}
.slide2 .img-side .boy2
{
    width: max(90px, 10vw);
   right: -150px;
    bottom: 70px;
    z-index: 2;
    /*border: 1px solid red;*/

}
.slide2 .img-side .equipment2
{
  width: max(150px, 40vw);
    top: 0px;
    left: -100px;
    z-index: 1;
}


 .homeCarousel {
      height: 90vh; 
}
.homeCarousel .content-side 
{
  padding-inline: 30px;
}

  .slide1 .circle ,.slide2 .circle 
{
  width: 100px;
  height: 100px;
  top: 0px;
  
}
 .homeCarousel .content-side h1
  {
    font-size: 32px;
    margin-top: 10px;
  }
   .homeCarousel .content-side .mini-title 
 {
    font-size: 18px;
    
  
 }
 .homeCarousel .content-side .info 
   {
      font-size: 16px;
     
   }

   .homeCarousel .swiper-slide
  {
    flex-direction: column-reverse; 
  }
.homeCarousel .content-side .slider-button
{
  margin-top: 30px;
  justify-content: center;
  gap: 80px;
}
  .homeCarousel .content-side .slider-button a:first-child 
  {
     padding: 12px 15px;
     font-weight: 500;
     font-size: 16px;
  }
 .homeCarousel .content-side .slider-button a:last-child 
 {
    font-weight: 500;
    font-size: 16px;

 }
.homeCarousel .content-side .slider-button a .icon 
 {
   width: 40px;

 }

  .extra-featur-mobile .fa-user, .extra-featur-mobile .fa-gear 
  {
     color: var(--secondary);
  }
  .switch label::after
  {
    background: var(--secondary);
  }
  .nav-active:after 
  {
    display: none;
  }
    .logo {
   
    .logo-img
    {
      width: 60px;
      
    }
  }
  header
  {
    padding-inline: 0px;
    padding-block: 4px;
  }
  nav 
  {
    padding-inline: 50px;
  }
  .mobile-sidebar
  {
    /*position: absolute;*/
    /*top: calc(100% + 14px);*/
    /*left: calc(-100% + 30px);*/
    position: fixed;
    top: calc(10vh + 0px);
    left: -100vw;
    width: 60vw;
    /*height: calc(82vh - 16px);*/
    height: 90vh;
    background: var(--primary-dark);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:30px 20px 30px 10px;
    border-top-right-radius: 30px;
  }
  .extra-featur-mobile
  {
    display: flex;
    justify-content: space-between;
  }
  .mobile-sidebar .nav-links li 
  {
    display: flex;
    gap: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    flex-direction: row;
  }
  .mobile-sidebar .nav-links li .nav-icon
  {
    display: block;
    color: #fff;
  }
  .switch label 
  {
    border-color: rgba(255,255,255,0.5);
  }
  .nav-links {
    
    flex-direction: column;
    /*align-items: left;*/
    gap: 1rem;
    /*height: fit-content;*/


    /*padding: 2rem 0;*/
    /*display: none;*/
  }
  .nav-links li
  {
    height: 60px;
  }
.nav-active a, .nav-active .nav-icon
{
  color: var(--secondary) !important;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  font-weight: 500;
}
.nav-active
{
  /*border-color: var(--secondary) !important;*/
}
.nav-links li
{
  text-align: left;
}
.nav-links li a
{
  color: #fff;
  font-weight: 400;
   
}
  .nav-links.active {
    display: flex;
  }

  .hamburger {
    display: grid;
  }
  .desktop-hamburger
  {
    display: none;
  }

  /*sign in and login user form start*/
  .signup-section .container {
        flex-direction: column;
        width: 80%;
      }

      .signup-section .left,
      .signup-section .right {
        padding: 10px 10px;
        text-align: center;
      }
      .signup-section .left {
       flex: 0 0 180px; /* <-- Height kam ho jayegi */
  
       }
       .signup-section .right {
       flex: 0 0 300px; /* <-- Height kam ho jayegi */
  
       }
       .otp-verify .right 
       {
         flex: 0 0 250px;
         padding: 50px 30px !important;
       }
        
       .login-box .right {
        flex: 0 0 260px; /* <-- Height kam ho jayegi */
  
       }

      .signup-section .left img {
        margin: 0px;
        margin-top: 0px;
        max-width:150px;
      }
      .signup-section .left h2
      {
        margin-bottom: 0;
        /*font-size: 28px;*/
      }
      .signup-section .right h2
      {
        margin-bottom: 8px;
      }
      .signup-section .form-group input
      {
        padding: 7px;
      }
      .signup-section .signup-btn
      {
        margin-top: ;
      }
     
  /*sign in and login user form end*/

  #about
  {
    flex-direction: column;
  }
  .page-padding 
  {
    padding-inline: 30px;
  }
  #about .about-pra 
  {
    font-size: 16px;
  }
  .section_title
  {
    font-size: 32px;
    text-align: center;
  }
  .section_mini_title
  {
    font-size: 18px;
    font-weight: 400;
  }
 
  #our-services .all-services
  { 
    gap: 20px;
  }

  #our-services .all-services .service-box .content 
  {
    gap: 20px;
  }
  #our-services .all-services .service-box .content img 
  {
    width: 110px;
    
  }
  #our-services .all-services .service-box .content h3 {
    font-size: 26px;
  }
  #our-services .all-services .service-box .service-header .content 
  {
    flex-direction: column;
  }
  #our-services .all-services .service-box .service-header .content h3 
  {
    text-align: center;
  }
  .getintouch-data
  {
    padding: 20px;
  }
    .sub-services-box
  {
       grid-row-gap: 25px;
       grid-column-gap: 25px;
  }
  .sub-services-box .box ul li 
  {
    margin-left: 5px ;
    font-size: 15px;
    line-height: 28px;
  }
  #magic-scroll  
  {
    grid-template-rows: repeat(2, minmax(150px,30vh));
  }
  .signup-section .signup-btn
  {
    margin-top: 0px;
  }
  .signup-section .login-link,
  .signup-section .sigin-link
  {
    margin: 5px 0;
  }
  .signup-section .social-icons img
  {
    width: 20px;
    height: 20px;
  }
  .signup-section .container
  {
    top: -30px;
  }
}
/*................................................................................................*/

@media (max-width: 652px) {
.more-details-box iframe 
{
    width: 90vw;   
}
 #magic-scroll 
  {
    grid-template-rows: repeat(2, minmax(100px,25vh));
      gap: 15px;

  }
}
@media (max-width: 576px) {
   .portfolio {
  
    grid-template-columns: repeat(1, 1fr);
    gap: 15px;
    padding: 30px;
}
  .signup-section .container
  {
    width: 90%;
  }
  #magic-scroll 
  {
    grid-template-rows: repeat(2, minmax(100px,22vh));
      gap: 12px;

  }
   .form-section {
    max-width: 95vw;
    width: 95vw;
  }
   #services-name h1 
  {
    font-size: 28vw;
  }
   .sub-services-box .box ul li 
  {
    
    font-size: 14px;
    line-height: 25px;
  }
  .sub-services-box .box ul li:before
  {
    width: 5px;
    height: 5px;
  }

.py-70
{
  padding-block: 50px;
}
.services-box .box h2
{
  font-size: 18px;
  text-align: center;
}
  .sub-services-box .box h2
  {
     font-size: 20px;
    text-align: left;
  }
.swiper-clients-logo .swiper-slide img {
  height: 80px;
}
.swiper-clients-logo
{
  height: auto;
}
.swiper-clients-logo .swiper-slide 
{
  height: 80% !important;
}

  #mission-vission
  {
     grid-template-columns: 1fr;
     grid-template-rows: repeat(3,minmax(250px,auto));
    row-gap: 50px;
  }
  .vision-box
{
  grid-column: span 1;
  min-height: auto !important;
  height: auto !important;
  padding-bottom: 15px !important;
}
  .page-padding 
  {
    padding-inline: 15px;
  }
  .homeCarousel .content-side 
  {
    padding-inline: 15px;
  }
  header
  {
    padding-inline: 0px;
    padding-block: 8px;
  }
  nav 
  { 
    padding-inline: 30px;
  }

    .slide1 .img-side .rocket
  {
      width: max(160px, 13vw);
      left: -80px;
      bottom: 40px;
  }
  .slide1 .img-side .work
  {
      width: max(150px, 17vw);
       bottom: 20px;
      right: -150px;
     
  }
  .slide1 .img-side .laptop
  {
      width: max(80px, 8vw);
      bottom: 0px;
      left: -150px;
      z-index: 3;
  }
  .slide1 .img-side .plan
  {
      width: max(70px, 7vw);
     bottom: 0px;
      right: -80px;
      z-index: 4;
  }

  /*slide 2 images size*/

.slide2 .img-side .rocket2
{
    width: max(100px, 8vw);
   left: -50px;
    bottom: 0px;
    z-index: 2;
    /*border: 1px solid red;*/

}
.slide2 .img-side .boy1
{
    width: max(140px, 10vw);
   left: -180px;
    bottom: 50px;
    z-index: 2;
    /*border: 1px solid red;*/

}
.slide2 .img-side .boy2
{
    width: max(70px, 10vw);
   right: -150px;
    bottom: 70px;
    z-index: 2;
    /*border: 1px solid red;*/

}
.slide2 .img-side .equipment2
{
  width: max(150px, 40vw);
    top: 0px;
    left: -100px;
    z-index: 1;
}
 .call-to-action-container .mockup img  
  {
 
    width: 30vw;
    right: 50px;
    top: -60px;
  }
  .call-to-action-container
  {
    flex-direction: column;
  }
   .getintouch-data
  {
    padding: 15px;
  }
  .sub-services-box
  {
       grid-row-gap: 20px;
       grid-column-gap: 20px;
  }

}


/*................................................................................................*/

@media (max-width: 512px) {
   .portfolio {
  
    padding: 20px;
}
    #magic-scroll 
    {
      grid-template-rows: repeat(2, minmax(100px,20vh));
        gap: 7px;

    }
.py-70
{
  padding-block: 40px;
}


  .services-box {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: min-height(400px);
    gap: 15px;
    grid-row-gap:60px;

}
 .sub-services-box
{
      grid-row-gap: 15px;
      grid-column-gap: 15px;
      grid-template-columns: repeat(1, 1fr);
}
  .sub-services-box .box ul li 
  {
    
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;

  }
.swiper-clients-logo .swiper-slide img {
  height: 70px;
}
   #our-services .all-services
  { 
    
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(auto, minmax(380px, auto));
  }
  .fact-all-box
  {
   
     grid-template-columns: repeat(2, minmax(auto,300px));
     grid-template-rows: repeat(2, minmax(150px,220px));

   }
   .fact-all-box .fact-box h3  
  {
    font-size: 24px;
  }
  .fact-all-box .fact-box h4
  {
    
    text-align: center;
    font-size: 14px;
  }
  .fact-all-box .fact-box .imag-70  
  {
    width: 60px;
    
  }
}
@media (max-width: 480px) {
   .portfolio {
  
    padding: 10px;
}

   #magic-scroll 
    {
      grid-template-rows: repeat(2, minmax(100px,18vh));
        gap:5px;

    }
  .fact-all-box
  {
   
     grid-template-columns: repeat(2, minmax(auto,300px));
     grid-template-rows: repeat(2, minmax(120px,180px));

   }
   .swiper-industry .card .img
    {
      /*flex: 1;*/
      width: 30%;
    }
    .swiper-industry .card .img img 
    {
      scale: 1.5;
    }

      .swiper-industry .card .information ul li  
        {
          font-size: 10px;
          font-weight: 500;
          line-height: 20px;
        }

}

@media (max-width: 380px) {
     .swiper-industry .card .information ul li  
        {
          font-size: 9px;
        }
        .swiper-industry .card .information .button  
        {
          font-size: 7px;
         }
         .swiper-industry .card .information .arrow2 
         {
          height: 10px;
         }
         .swiper-industry .card .img img 
         {
          scale: 1.4;
         }
}