@media only screen and (max-width :1500px) {
  .bnr-con { padding: 0 1rem 0; }
  .main-con, .btm-con, .ftr-con  { padding: 5rem 1rem; }
  .header-con, .nav-con, .btm-2-con, #nonhome { padding: 0 1rem; }
  .btm-team-con, .btm-5-con, .faq-con, .blog-con, .ftr-top-con { padding: 5rem 1rem; }
  .ftr-btm-con {padding: 5rem 1rem 2rem;}

  /* Bottom  */
  .btm-4-content { padding: 0 26rem 0 4rem; }
  .btm-4-content { padding: 3rem 1rem 3rem 1rem; }
  .btm-4-content::after { top: -14%; width: 5rem; height: 5rem; outline: 5px solid var(--whiteColor); }

}
@media only screen and (max-width :1400px) {
  #nav-menu {gap: 1.5rem;}
}

@media only screen and (max-width :1300px) {
  .footer-menu section { width: 16%; }

    /* Header */
  .main-logo { position: relative; margin: 0 auto; }
  .location {padding: 0;}
  .header-info { width: 100%; margin: 3rem 0 0; gap: 0; justify-content: center; flex-wrap: wrap;}
 .location { padding: 0; width: 100%; display: block; text-align: center; margin: 0 0 2rem; }
  header .contact-info {margin: 0;}
  .search-container.collapsed {width: 100%;}
  .search-container.expanded .close-btn { display: none; }
    .header-info { gap: 2rem;}

  .search-container.expanded {position: relative;}

  /* Navigation Menu */
  #nav-menu { width: 100%;}
  #nav-menu { flex-wrap: wrap; gap: 2rem; padding: 2rem;}
  #nav-menu li { padding: 0; width: 29%; border: 1px solid #c3c3c3; text-align: center;border-radius: var(--radious);  }
  #nav-menu li a { width: 100%; line-height: 60px; display: block; cursor: pointer;}
  #nav-menu li a:hover { background: var(--thirdColor); color: var(--whiteColor); border-radius: var(--radious); }
  .social-media nav { display: block; }

  
  /* Nonhome About us */
  .our-story-gallery figure { width: 44%; }

}

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

  /* Banner */
    #banner { background-repeat: no-repeat; background-size: cover; }


  /* Bottom */
  .btm-section { justify-content: space-evenly; flex-wrap: wrap; }
  .btm-section section { width: 31%; }

  /* middle */



  /* Footer */
  .map iframe { width: 100%; }
  .footer-menu section:last-child {width: 100%;}
  .ftr-top-gallery { width: 50%; }
  

}
@media only screen and (max-width :1100px) {
  .bnr-info { width: 54%; }
}

@media only screen and (max-width :1024px) {
  .main-btm li::after { right: -24%; }
}

@media only screen and (max-width :1000px) {
  /* Header */
  .header-info { width:100%; margin: 0 0 0 auto; }

  .location { padding: 0; width: 100%; margin: 0 auto; text-align: center; justify-content: center;margin: 2rem 0 0; }


  /* Banner */
  .bnr-info { width: 80%; }

  /* Main  */
  .main-btm li::after { right: -5%; }

  /* Bottom  */
  .btm-section section { width: 47%; }

  /* Team */
  .btm-team-con { overflow-x: hidden; }

  /* Bottom 7 */
  .faq-con .toggle-btn { gap: 0;}
  .faq-con .accordion { width: 70%; }

  /* Footer */
  .footer-logo { width: 100% !important; }
  .footer-logo img { margin: 0 auto; width: 30%;}
  .footer-logo p { text-align: center; }
  .footer-menu section { width: 23%; }
  .social-media { justify-content: center; margin: 0 0 3rem; }
  .social-media img { width: 100%; }
  .ftr-list { gap: 4rem 3rem; flex-wrap: wrap; }

  .ftr-top-gallery img { width: 70%; }
  .ftr-top-gallery figure:nth-child(2) { position: absolute; right: -31px; top: 73%; }
  


}

@media only screen and (max-width :900px) {
  .nav-con { width: 100%; }
  .main-logo { width: 18%; }


  /* Middle */

  /* Bottom 6 */
  #btm-5::after { height: 100%; background: linear-gradient(160deg,rgb(255, 255, 255) 0%, rgba(212, 212, 212, 0.53) 100%);}
  

}

@media only screen and (max-width :800px) {
  /* Header*/

  .middle-con .contact-info { flex-wrap: wrap; gap: 2rem; }
  .main-info { margin: 5rem 0 0; }
}

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

    /* Global */
    .button {padding: .8rem 1.5rem;}

    /* Header */
    .header-con { flex-direction:column; gap: 2rem; padding: 1rem 0; }
    .main-logo { width:13rem; margin: 0 auto; position: relative; }
    .main-logo figure img { outline: unset; border-radius: unset;}
    .location { padding: 0; }
    .header-info { flex-direction: column; gap: 1rem;}
    .location a { font-size: .9rem;}
    header .contact-info {margin: 0; flex-direction: column; align-items: center;}
    .location { margin: 0; }
    

    .bnr-info-con { flex-direction: column-reverse; }
    .sidebar-img figure {margin: 0 auto;}
  

    /* Nav */
    .navopenbg { overflow: hidden; height: 100vh; }
    .navopenbg::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,.5); z-index: 999; }
   #hamburger { display: block; position: absolute; right: 0; cursor: pointer; margin: 0; top: 0; }
    #nav-menu { display:  none; }
    .main-logo.new { width: 15rem; padding: 0 1rem 2rem }
    #nav-menu.navopen { display: block; height: 100vh; padding: 0 1rem 0; width: 100%;}
    nav {display: none;}
    #nav-menu li a {width: 100%; display: block; color: var(--whiteColor);}
    #nav-menu .active a { color: var(--secColor) !important;}
    #nav-menu li:hover { background: var(--secColor); }
    #nav-menu li:hover a {color: #fff;}
    .navwidth { position: absolute; top: -0.8rem; left: 102%; transform: translateX(-100%); width: 50%; z-index: 1000; background: var(--priColor);  display: block;}
    #nav-menu li { line-height: 3.2rem; }
    #nav-menu li { line-height: 3.2rem; width: 100%; text-align: center; border: 1px solid var(--whiteColor); margin: 0 0 1rem; border-radius: var(--radious);}
    .nav-con { flex-direction: column; width: 100%;}
    .main-logo.new::after {bottom: 30px;}

    /* Banner */
    #banner { height: auto;}
    #banner { background-repeat: no-repeat; background-size: cover; }
    
    

    .bnr-con { flex-direction: column; padding: 0; height: auto;}
    .slider {all: unset; width: 100%;}
    .bnr-info { width: 100%; padding: 3rem 1rem; text-align: center; background: var(--thirdColor); }
    .rslides li img {object-position: 0;}
    

  /* Middle */
    .middle-con { position: relative; top: 0; }
    .middle-con .contact-info { justify-content: center; flex-direction: column; text-align: center;gap: 2rem}
    .main-content { width: 100%; }

    /* Main */
    .main-con .sidebar { display: none; }
    .main-btm { flex-direction: column; margin: 0; gap: 2rem; }
    .main-btm li::after { content: ''; position: absolute; bottom: -1rem; left: 0; width: 100%; height: 1px; background: #9590905e; top: auto; }
    .main-info {margin: 0;}


    /* Bottom */
  .dcv-vibe-image, .vibe-image { margin: 0 auto 3rem !important; }
  .dcv-vibe-actions, .vibe-actions { flex-direction: revert; justify-content: center; }


  /* About us  */
  .story-con { flex-direction: column; }
  .our-story-gallery { width: 100%; }
  .our-story { width: 100%; margin: 2rem auto 0; }

 
    



    /* Footer */
  .ftr-top-con { flex-direction: column; }
  .ftr-top-content { width: 100%; }
  .ftr-top-gallery { display: none; }
    .footer-logo {justify-content: center;}


    .ftr-list { gap: 3rem 2rem; flex-wrap: wrap; }
    .footer-menu h4 {display: flex; justify-content: center; cursor: pointer; margin: 0 0 1rem;}
    .menu-container { margin: 0 0 1rem; }
    .footer-menu ul li a { color: var(--whiteColor); width: 100%; display: block; cursor: pointer; }
    .ftr-contact-info { text-align: center; }
    .footer-logo p { text-align: center;}
    .footer-logo img { width: 32%; margin: 0 auto; }

    /* Footer Bottom */
    .footer-nav { flex-wrap: wrap; padding: 3rem 1rem; gap: 1rem; }
    .footer-nav li { line-height: 3.2rem; width: 28%; text-align: center; border: 1px solid var(--secColor); border-radius: var(--radious); }
    .footer-nav li a { width: 100%;  display: block;}
    .footer-nav li a:hover { background: var(--secColor); color: #fff; }

    /* Footer Nav */
    .footer-menu { flex-wrap: wrap; flex-direction: column; }
    .footer-menu nav { display: block; }
    .footer-menu ul li {text-align: left;}
    .footer-logo { width: 100% !important;}
    .footer-menu section {width: 100%;}
    .ftr-contact-info li {border-bottom: unset !important;}
    .footer-menu ul li { border-bottom: 1px solid var(--whiteColor); }
    

  }
  @media only screen and (max-width :600px) {
    
    /* Header */
      .header-info { gap: 2rem; flex-direction: column; }
      header .contact-info li { margin: 0 0 1rem; }
      .main-logo { width: 15rem;}
    /* End of header */

    /* Nav */
    .navwidth { width: 90%; overflow: scroll;}
    
    #nav-menu.navopen { padding: 0 1rem 0; margin: 0 auto;}
    .main-logo.new { width: 13rem; padding: 0 1rem 2rem; }

    /* Middle */
    .middle-section section { width: 100%; }
    .middle-section { gap: 2rem; }
    .bnr-btn .button { font-size: .84rem; padding: 1rem 1rem; }
    .middle-con .contact-info li {width: 50%;}

    /* main */
    .btm-1-con { padding: 0rem 0 5rem; }

    /* Bottom */
    .btm-section section { width: 100%; }
    .case-info { padding: 0 1rem; }

    /* bottom 2 */
    .accordion { width: 100%; }
    dd {padding: 0 1em 0 4em;}

    /* Bottom 5 */
    .btm-4-content { padding: 5rem 2rem; }


    /* Footer top */
     .footer-logo img { width: 50%; }
   
    .ftr-top-con h2::after { width: 6rem; height: 6rem; background-size: contain; top: -11%; }



    /* Footer Bottom  */
    .footer-nav li { width: 100%; }
    .footer-nav { gap: .5rem; }
  }

  @media (max-width: 480px) {
  .search-container.expanded { width: 280px; }
  .demo-info { top: 30px; padding: 0 20px; }
  .demo-info h2 { font-size: 20px; }
  .demo-info p { font-size: 14px; }
  
  /* footer  */
    .form-con { padding: 2rem 2rem; }
    
}