/* ===== Minimal CSS just for the mobile wrapper & visibility ===== */

      
            .themeholy-menu-wrapper {
        position: fixed;
        inset: 0 0 0 auto;
        width: 85%;
        max-width: 800px;
        background: #fff;
        transform: translateX(100%);
        transition: transform .3s ease;
        z-index: 9999;
        box-shadow: -8px 0 20px rgba(0,0,0,.15);

        /* important part: hidden by default */
        display: none;
        opacity: 0;
        visibility: hidden;
      }

      .themeholy-menu-wrapper.menu-open {
        /* when JS adds .menu-open, show the menu */
        transform: translateX(0);
        display: block;
        opacity: 1;
        visibility: visible;
      }


      .themeholy-menu-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.4);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease;
        z-index: 9998;
      }
      .themeholy-menu-overlay.is-visible {
        opacity: 1;
        visibility: visible;
      }

      .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 2rem 2rem;
        border-bottom: 1px solid #eee;
        font-size:60px;
      }
      .mobile-menu {
        padding: .75rem 1rem 1rem;
        max-height: calc(100dvh - 60px);
        overflow: auto;
      }
      .mobile-menu ul { list-style: none; margin: 0; padding: 0; font-size:50px; line-height:100px;  }
      .mobile-menu li { border-bottom: 1px solid #f2f2f2; }
      .mobile-menu a {
        display: block;
        padding: .9rem 0;
        text-decoration: none;
      }

      /* Mega menu visibility helper for desktop hover */
      // .submenu-active .mega-menu { display: block !important; }
      .mega-menu.d-none { display: none !important; }

      /* Small utility for the “×” button */
      .btn-reset {
        background: none; border: 0; padding: 0; margin: 0;
        line-height: 1; cursor: pointer; font-size: 5rem;
      }

      /* Hide desktop nav on small screens if not already hidden by your CSS */
      @media (max-width: 991.98px) {
        nav.main-menu { display: none !important; }
      }

      .header-layout8 .menu-area {
  background-color: #d60012c4;
  position: relative;
  background-size: auto;
  background-repeat: repeat;
  z-index: 2;
}

.header-layout8 .menu-area:after {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #006b9f;
  z-index: -1;
}

.header-layout8 .menu-area:before{
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  /* background-color: #d60012c4; */
  z-index: -1;
}

.header-layout8 .menu-area:before {
  width: 25%;
  left: 0;
  -webkit-clip-path: polygon(0 0, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0%, calc(100% - 20px) 100%, 0% 100%);
  /* Large devices */
  /* Medium devices */
  /* Small devices */
  /* Extra small devices */
}

@media (min-width: 2299px) {
  .header-layout8 .menu-area:before {
    width: 24%;
  }
}
@media (max-width: 1699px) {
  .header-layout8 .menu-area:before {
    width: 16%;
  }
}
@media (max-width: 1399px) {
  .header-layout8 .menu-area:before {
    width: 20%;
  }
}
@media (max-width: 1199px) {
  .header-layout8 .menu-area:before {
    width: 24%;
  }
}
@media (max-width: 991px) {
  .header-layout8 .menu-area:before {
    width: 30%;
  }
}
@media (max-width: 767px) {
  .header-layout8 .menu-area:before {
    width: 50%;
  }
}
@media (max-width: 375px) {
  .header-layout8 .menu-area:before {
    width: 60%;
  }
}

.header-layout8 .menu-area:after {
  width: 22%;
  right: 0;
  -webkit-clip-path: polygon(20px 0, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(20px 0, 100% 0%, 100% 100%, 0% 100%);
  /* Extra large devices */
  /* Large devices */
}

@media (min-width: 2099px) {
  .header-layout8 .menu-area:after {
    width: 35%;
  }
}
@media (max-width: 1899px) {
  .header-layout8 .menu-area:after {
    width: 28%;
  }
}
@media (max-width: 1699px) {
  .header-layout8 .menu-area:after {
    width: 27%;
  }
}
@media (max-width: 1500px) {
  .header-layout8 .menu-area:after {
    width: 26%;
  }
}
@media (max-width: 1199px) {
  .header-layout8 .menu-area:after {
    display: none;
  }
}

/* Large devices */
@media (max-width: 1199px) {
  .header-layout1 .logo-bg {
    width: 27%;
  }
  .header-layout1 .menu-bg {
    width: 78%;
  }
  .header-layout1 .header-logo img {
    max-height: 120px !important;
    margin-left: 20px !important;
  }
  .head-row{display: flex !important;}
  .col-50per{width: 50% !important;}
  .ham-header{display: flex !important; justify-content:end;}
}
.header-layout4 .themeholy-menu-toggle {
  /* Medium devices */
  /* Small devices */
}

@media (max-width: 991px) {
  .header-layout4 .themeholy-menu-toggle {
    margin-top: -9px;
  }
}

@media (max-width: 767px) {
  .header-layout4 .themeholy-menu-toggle {
    margin-top: 6px;
  }
}
.themeholy-menu-toggle {
  width: 56px;
  height: 56px;
  padding: 0;
  font-size: 20px;
  border: none;
  background-color: #006b9f;
  color: var(--white-color);
  display: inline-block;
  border-radius: 0;
}

.themeholy-menu-toggle:hover {
  background-color: var(--title-color);
}

.themeholy-menu-toggle.style-text, .themeholy-menu-toggle.style-text-white {
  width: auto;
  height: auto;
  background-color: transparent;
  color: var(--title-color);
  font-size: 20px;
}

.themeholy-menu-toggle.style-text i, .themeholy-menu-toggle.style-text-white i {
  margin-right: 10px;
}

.themeholy-menu-toggle.style-text-white {
  color: var(--white-color);
}