/* max width responsive css*/
@media (min-width: 576px) {
   .other-services-section {
      margin-left: 0 !important;
   }
   .navbar-brand {
      width: 50%;
   }
   .navbar-brand img {
      width: 50% !important;
      height: auto;
   }
   .hero-section {
      padding: 0 30px;
   }
}
@media (max-width: 576px) {
   .navbar {
      /*padding: 0.7rem 0 !important;*/
   }
}

@media (max-width: 768px) {
   .menu {
      display: none !important;
   }
}

@media (min-width: 768px) {
   .navbar {
      /*padding: 1.5rem 0 !important;*/
   }
   .navbar-brand {
      width: 25%;
   }
   .navbar-brand img {
      width: 75% !important;
      height: auto;
   }
   .menu {
      display: none !important;
      width: 50%;
      justify-content: end !important;
   }
   .menu-items, .menu-items .menu-item {
      column-gap: 5px !important;
   }
   .hero-section {
      padding: 0 50px;
   }
   .footer-contact p {
      text-wrap: wrap;
   }
   .other-services-section {
      margin-left: 22px !important;
   }
   .image-composition {
      max-width: 100%;
   }
}

@media (max-width: 992px) {
}

@media (min-width: 992px) {
   .navbar {
      /*padding: 0.7rem 0;*/
   }
   .navbar-nav {
      display: none !important;
   }
   .menu {
      justify-content: end !important;
   }
   .other-services-section {
      margin-left: 50px !important;
   }
   .image-composition {
      max-width: 750px;
   }
   .hero-content {
      width: 75%;
      padding: 30px 0;
   }
}

@media (max-width: 1200px) {
}

@media (min-width: 1200px) {
   .navbar {
      /*padding: 1.5rem 0 !important;*/
   }
   .navbar-brand {
      width: 25%;
   }
   .navbar-brand img {
      width: 50% !important;
      height: auto;
   }
   .menu {
      justify-content: flex-start !important;
   }
   .navbar-nav {
      display: inline-block !important;
   }
   .bottom-footer {
      padding: 3rem 0;
   }
   .other-services-section {
      margin-left: 22px !important;
   }
   .image-composition {
      max-width: 100%;
   }
   .mobile-menu-overlay {
      display: none;
   }
   .hero-content {
      width: 75%;
      height: auto;
      padding: 30px 0;
   }
}

@media (max-width: 1400px) {
}
@media (min-width: 1400px) {
   .navbar {
      /*padding: 1.5rem 0 !important;*/
   }
   .navbar-brand {
      width: 25%;
   }
   .navbar-brand img {
      width: 50% !important;
      height: auto;
   }
   .hero-section {
      min-width: 100%;
      height: 580px;
   }
   .hero-content {
      width: 55%;
      padding: 60px 0;
   }
   .sub-header {
      text-transform: uppercase !important;
      font-weight: var(--ecbz-font-weight-bold);
      font-size: 2.2rem;
      color: var(--ecbz-secondary);
   }
   .hero-content h1 {
      font-size: 3.3rem;
      margin-bottom: 1rem;
   }
   .hero-content p {
      width: 100%;
      text-wrap: wrap;
      font-size: 1.2rem;
      margin-bottom: 1.5rem;
   }
   .hero-content .cta-btn {
      margin: 0;
      display: flex;
      column-gap: 15px;
   }
   .section {
      width: 100%;
      padding: 80px 0;
      position: relative;
   }
   .section-margin {
      margin-bottom: 3rem;
      margin-left: 1.5rem;
   }
   .section-subheading {
      padding-top: 0;
      padding-bottom: 22px;
      border: none;
   }
   .section-subheading span {
      padding: 5px 20px;
      background-color: var(--ecbz-primary);
      color: var(--ecbz-white);
      border-radius: 999px;
      text-transform: uppercase;
      font-size: 1rem;
      font-weight: normal;
      display: inline-block;
      transition: background-color 0.3s ease, transform 0.3s ease;
   }
   .section-heading {
      margin-bottom: 1rem;
      line-height: 1;
   }
   .section-image {
      width: 100%;
      height: 430px;
   }
   .contact-form, .quote-form {
      padding: 50px;
   }
   .contact-card-body {
      padding: 20px;
   }
   .section.map {
      /*padding: 0 !important;*/
      height: 600px;
   }
   .section-details {
      font-size: 1.1rem;
      line-height: 1.5;
   }
   .services .section-details {
      width: 75%;
   }
   .section-details.details-progress {
      width: 65%;
      text-wrap: wrap;
   }
   .other-services-section {
      margin-left: 22px !important;
   }
   .image-composition {
      max-width: 100%;
   }
   .image-layered {
      height: 100%;
   }
   .image-layered img {
      box-shadow: -16px 16px 32px var(--ecbz-primary);
   }
   .mobile-menu-overlay {
      display: none;
      visibility: hidden !important;
   }
}