@media (min-width: 768px) {
  .flip-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
  .head-office-team-slider {
    grid-template-columns: repeat(2, 1fr); /* tablets */
  }
}


@media (min-width: 1024px) {
  .flip-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
   .head-office-team-slider {
    grid-template-columns: repeat(3, 1fr); /* desktop */
  }
}
@media (max-width: 1024px) {
  h1 {
    font-size: 54px;
  }

  h2 {
    font-size: 36px;
  }

  .hero-slider .owl-nav button {
    top: 800px;
  }
.desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
    font-size: 24px;
    cursor: pointer;
  }

  .hamburger-icon {
    padding: 10px;
  }

  .right-header-content {
    display: none;
  }

  .social-icons-box {
    justify-content: start;
    min-width: fit-content;
  }

  .mobile-nav-links a,
  .top-header-mobile a {
    color: azure;
  }

  .top-header-mobile {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
    gap: 40px;
  }

  .pause-btn {
    top: 785px;
    bottom: unset;
  }
.about-all-content.flx-row.flx-space-between.flx-center-align {
    gap: 30px;
}
  .hero-slider-item {
    height: 900px;
  }

  .executive-single {
    max-width: 47%;
  }

  .hero-heading h2 {
    font-size: 36px;
  }

  .about-us-sec,
  .our-services,
  .norther-sec,
  .executive-body,
  .projects-gallery,
  .dots-sec-about,
  .why-chos-sec,
  .our-clients-sec,
  .quality-sec,
  .about-precast-section,
  .latest-construction-sec,
  .number-step-sec,
  .purpose-offer-sec,
  .contact-sec,
  .bricks-sec,
  .all-testimonial-sec,
  .all-precst-products-imgs,
  .itet-sec,
  .construction-expireince-sec,
  .pre-cast-intro-sec,
  .buildig-sec,
  .all-industries-sec,
  .tabing-pre-cast-sec,
  .single-contact-sec,
  .head-office-sec,
  .about-industrial-building-sec,
  .group-vision-sec,
  .construction-need-sec,
  .our-blog-slider-sec,
  .group-mission-sec {
    padding: 40px 0;
  }
.south-sec{
  padding-bottom: 40px;
}
  .all-contact-box {
    width: 80%;
  }

  .bottom-two-links {
    gap: 30px;
  }

  .section-title.st-st7 .sec-title {
    font-size: 32px;
  }

  .front h2 {
    min-height: 32px;
  }

  .stats-wrapper {
    padding: 40px 0px;
  }

  .welcome-all-content.flx-row.flx-space-between.flx-center-align {
    flex-direction: column;
    gap: 40px;
  }

  .left-text-content,
  .right-about {
    max-width: 100%;
  }

  .below-bg {
    height: 70%;
  }

  .others-banner {
    height: 75vh;
  }

  .other-banner-content {
    padding-top: 20vh;
  }

  .other-banner-content p {
    font-size: 24px;
  }

  .single-person-all-content {
    grid-template-columns: repeat(1, 1fr);
  }

  .person-img-cont img {
    height: 600px;
  }

  .person-show-sec {
    padding-top: 40px;
  }

  .image-grid .grid-item:nth-child(6n + 2),
  .image-grid .grid-item:nth-child(6n + 5) {
    grid-column: span 1;
  }

  .image-section {
    padding-bottom: 40px;
  }

  .other-banner-content p {
    width: 100%;
  }
  .all-testi-wrap{
    grid-template-columns: repeat(2, 1fr);
  }
	 .our-blogs-slider {
    grid-template-columns: repeat(2, 1fr);
  }
	

}

@media (max-width: 992px) {
  .single-asso {
    flex: 1 1 calc(33.333% - 30px);
    max-width: calc(33.333% - 30px);
  }

  .pause-btn {
    top: 780px;
  }

  .about-all-content.flx-row.flx-space-between.flx-center-align {
    flex-direction: column;
    gap: 80px;
  }

  .left-about,
  .right-itet-content,
  .left-itet-img,
  .construction-need-left,
  .why-chose-points,
  .left-chose-img,
  .construction-need-right-img {
    max-width: 100%;
  }

  .section-title.st-st7 .sec-title {
    font-size: 22px;
  }

  .why-chose-container.flx-row.flx-space-between {
    flex-direction: column;
    gap: 40px;
  }

  .right-about {
    max-width: 90%;
  }

  .quality-sec h2 {
    font-size: 36px;
  }

  .below-bg {
    height: 100%;
  }

  .all-wrapper-itet.flx-row.flx-center-align.flx-space-between {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .construction-need-all-content.flx-row.flx-space-between.flx-center-align {
    flex-direction: column;
    gap: 40px;
  }

  section.why-chos-sec {
    margin-top: 40px;
  }

  .contact-us-wrapper.flx-row,
  .brick-content.flx-row.flx-space-between.flx-center-align,
  .group-vision-all-content.flx-row.flx-space-between.flx-center-align {
    flex-direction: column;
    gap: 40px;
  }

  .contact-left,
  .contact-right,
  .brick-left-content,
  .left-brick-img,
  .left-image,
  .right-det-content {
    max-width: 100%;
  }

  .single-contact-sec p {
    width: 90%;
  }

  .contact-box.flx-row {
    width: 100%;
  }

  .contact-content a {
    font-size: 18px;
  }

  section.our-blog-slider-sec {
    margin-bottom: 40px;
  }

  .footer-top.flx-row.flx-space-between {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 40px;
  }

  .footer-about {
    max-width: 100%;
  }

  .site-footer .contact-content h6,
  .site-footer a {
    font-size: 18px;
  }

  .site-footer h2 {
    font-size: 30px;
  }

  .footer-quicknav li {
    margin-left: 10px;
  }
}


@media (max-width: 991px) {
  .desktop-only {
    display: none !important;
  }

  .mobile-only {
    display: block !important;
    font-size: 24px;
    cursor: pointer;
  }

  .hamburger-icon {
    padding: 10px;
  }

  .right-header-content {
    display: none;
  }

  .social-icons-box {
    justify-content: start;
    min-width: fit-content;
  }

  .mobile-nav-links a,
  .top-header-mobile a {
    color: azure;
  }

  .top-header-mobile {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
    gap: 40px;
  }

  .construction-expirince-all-content.flx-row.flx-space-between.flx-center-align,
  .top-latest-construction-box.flx-row.flx-space-between,
  .all-wrap-content.flx-row.flx-space-between.flx-center-align {
    flex-direction: column;
    gap: 40px;
  }

  .left-const-expi-text,
  .right-constr-exp-imgs,
  .left-latest-text,
  .right-latest-text,
  .number-step-sec .steps,
  .left-box,
  .right-box {
    max-width: 100%;
  }

  .sticky-box {
    position: unset;
  }

  .top-latest-construction-box {
    margin: 40px 0;
  }

  .bottom-latest-construction-box {
    grid-template-columns: repeat(2, 1fr);
  }

  .image-grid {
    grid-template-columns: repeat(1, 1fr);
  }



  .steps {
    gap: 20px;
  }

  .number-step-sec .step-title {
    font-size: 16px;
  }

  .head-office-all-content-wrapper.flx-row.flx-space-between,
  .all-fixed-pre-sec-content {
    flex-direction: column;
    gap: 40px;
  }

  .all-about-precast.flx-row.flx-center-align.flx-space-between {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .head-office-team-slider,
  .left-all-pre-img,
  .about-pre-text-right,
  .box-pre {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .single-asso {
    flex: 1 1 calc(50% - 20px);
    max-width: calc(50% - 20px);
  }

  .our-gallery-images {
    grid-auto-rows: 150px;
  }



  .flip-boxes {
    flex-wrap: wrap;
    gap: 40px;
  }

  .pre-cast-intro.flx-row.flx-space-between.flx-center-align {
    flex-direction: column-reverse;
    gap: 40px;
  }

  .right-pre-intro-content,
  .left-pre-intro-img {
    max-width: 100%;
  }

  .executive-single h3 {
    min-height: 52px;
  }

  .steps {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    /* for Internet Explorer and Edge */
    scrollbar-width: none;
    /* for Firefox */
  }

  .steps::-webkit-scrollbar {
    display: none;
    /* for Chrome, Safari, Opera */
  }

  .step {
    min-width: 250px;
  }

  .number-step-sec .steps::before {
    display: none;
  }

  .steps {
    overflow-y: visible;
  }

  .step-circle {
    margin-top: 10px;
  }

  .step-desc {
    max-width: 100%;
  }

  .right-constr-exp-imgs {
    padding: 0;
  }

  .all-precast-products {
    column-count: 3;
  }

  .all-precast-products {
    margin-top: 60px;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 36px;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 28px;
  }
	.loader-container{
		top: 110px;
}
  .blue-box a,
  .white-box a {
    min-height: 76px;
  }

  .about-us-sec,
  .our-services,
  .norther-sec,
  .executive-body,
  .projects-gallery,
  .dots-sec-about,
  .why-chos-sec,
  .our-clients-sec,
  .quality-sec,
  .about-precast-section,
  .latest-construction-sec,
  .number-step-sec,
  .purpose-offer-sec,
  .contact-sec,
  .bricks-sec,
  .all-testimonial-sec,
  .all-precst-products-imgs,
  .itet-sec,
  .construction-expireince-sec,
  .pre-cast-intro-sec,
  .buildig-sec,
  .all-industries-sec,
  .tabing-pre-cast-sec,
  .single-contact-sec,
  .head-office-sec,
  .about-industrial-building-sec,
  .group-vision-sec,
  .construction-need-sec,
  .our-blog-slider-sec,
  .group-mission-sec {
    padding: 40px 0;
  }
.south-sec{
  padding-bottom: 40px;
}
.blog-section {
    padding: 40px 0;
}
  .others-banner {
    height: 100vh;
  }
.single-post-wrapper{
  margin-top: 100px;
}
	.our-services{
		padding-top:0;
	}
.single-post-header h1 {
    font-size: 26px;}
    .blog-heading h2 {
    font-size: 26px;}
  .hero-slider-item {
    height: 100vh;
  }

  .manufacturing-units-section {
    padding: 60px 0;
  }

  .image-grid .grid-item:nth-child(6n + 2),
  .image-grid .grid-item:nth-child(6n + 5) {
    grid-column: span 2;
  }
    .contact-content a {
        font-size: 16px;
    }
	.section-title.st-st7 .sec-title {
        font-size: 18px;
    }
	.hero-canvas-wrap{
		height:100px;
	}
	.section-title{
		margin-bottom:0pxl;
	}
  .other-banner-content {
    padding-top: 20vh;
  }
	.clients{
height:100px;
	}
    .other-banner-content p {
        font-size: 20px;
    }
	.site-footer h2 {
        font-size: 22px;
    }
  .section-title {
    font-size: 26px;
  }

  .hero-slider .owl-nav button {
   top: 135px;
    left: 30px;
  }
	.left-box img{
		height: 300px;
	}
.site-footer .contact-content h6, .site-footer a {
        font-size: 16px;
    }
  .hero-slider .owl-nav .owl-next {
    left: 200px;
  }
.detail-pop-up {
    padding: 10px;
}
  #contactForm .row {
    flex-direction: column;
  }

  #contactForm .row .column {
    width: 100%;
  }

  .other-banner-content p {
    width: 100%;
  }

  .pause-btn {
    top: 110px;
    right: unset;
    left: 138px;
  }

  .hero-slider-item {
    padding-top: 200px;
  }

  .pre-cast-bg-sec {
    padding: 40px 0;
  }

  .single-tab-content p {
    width: 100%;
  }

  .hwt_dec {
    left: 0px;
    width: 100%;
  }
.tab-images{
      grid-template-columns: repeat(1, 1fr);
}
  .hero-slider-item-content {
    padding: 10px;
  }

  .left-pre-intro-img img,
  .construction-need-right-img img,
  .executive-single img {
    height: 300px;
  }

  .section-title.st-st7 {
    padding-left: 20px;
  }

  .section-title.st-st7:before {
    display: none;
  }

  .hero-heading.hero-sec-heading h2 {
    font-size: 24px;
    line-height: normal;
  }

  .hero-heading h2 {
    line-height: normal;
    font-size: 24px;
  }

  .read-about-us.flx-row {
    flex-direction: column;
  }

  .flip-box,
  .executive-single,
  .dots-box,
  .dots-read-us-btn {
    max-width: 100%;
  }

  .contact-box.flx-row {
    gap: 10px;
  }

  .contact-content a {
    display: inline-block;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
  }

  .site-footer .contact-content h5 {
    margin-bottom: 10px;
  }

  .dots-read-us-btn {
    padding: 30px;
  }

  .all-contact-box {
    width: 100%;
  }

  .top-blog-slider-heading.flx-row.flx-space-between {
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
  }

  .top-blog-slider-heading h2 {
    width: 100%;
  }

  .quality-sec h2 {
    width: 100%;
  }

  .quality-sec h2 {
    font-size: 28px;
  }

  .quality-sec p {
    font-size: 16px;
    line-height: normal;
  }

  .counter-box {
    width: 42%;
    padding: 0;
  }

  .counter {
    font-size: 24px;
  }

  .chose-img {
    height: 400px;
  }

  .chose-bg.left-border {
    height: 450px;
    top: -25px;
  }
	 .our-blogs-slider {
    grid-template-columns: 1fr;
  }

  .success-rate {
    padding: 20px;
  }

  .bottom-content.flx-row.flx-space-between.flx-center-align {
    flex-direction: column;
    gap: 20px;
    align-items: baseline;
  }

  .bottom-content p {
    font-size: 14px;
  }

  .footer-bottom {
    padding: 20px 0;
  }

  .left-brick-img img,
  .left-image img {
    height: 300px;
  }

  .buildings-slider img {
    height: 300px;
  }

  .brick-content.flx-row.flx-space-between.flx-center-align {
    gap: 40px;
  }

  .single-contact-sec p {
    width: 100%;
  }

  .bottom-latest-construction-box {
    grid-template-columns: repeat(1, 1fr);
  }

  .person-img-cont img {
    height: 300px;
  }

  .single-content-side-person img,
  .single-latest-cons-box img {
    width: 30px;
    height: 30px;
  }

  .number-step-sec .title {
    width: 100%;
    font-size: 22px;
  }

  .all-precast-products {
    column-count: 2;
  }
      .all-testi-wrap {
        grid-template-columns: repeat(1, 1fr);
    }
    .projects-table-sec {
  padding-top: 60px;
}
  .projects-table {
    font-size: 13px;
  }
 
  .projects-table tr {
    margin-bottom: 15px;
  }

  .projects-table {
    font-size: 13px;
    width: 100%;
    overflow-x: auto;
    display: table;
    white-space: nowrap;
  }

  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


@media (max-width: 480px) {
  .single-asso {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .our-gallery-images {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 120px;
  }

  .our-gallery-images img:nth-child(3n),
  .our-gallery-images img:nth-child(5n),
  .our-gallery-images img:nth-child(7n) {
    grid-column: span 1;
    grid-row: span 1;
  }
}


@media (max-width: 375px) {
  h1 {
    font-size: 36px;
    line-height: normal;
  }

  .hero-slider-item {
    height: 140vh;
  }

  .hero-heading h2 {
    line-height: normal;
    font-size: 20px;
  }

  .others-banner {
    height: 100vh;
  }

  .other-banner-content p {
    font-size: 20px;
  }
}

@media (min-width: 1025px) {
/*this is for sub menus*/
/* Base style for all submenus */
ul.sub-menu {
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
  padding: 10px 0;
  border-radius: 8px;
  min-width: 220px;
  position: absolute;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

/* Show submenu on hover */
.menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Position sub-menu > sub-menu (next level to the right) */
.sub-menu .menu-item-has-children:hover > .sub-menu {
  left: 100%;
  top: 0;
  margin-left: 5px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dimming the parent submenu when a nested submenu is open */
.sub-menu .menu-item-has-children:hover > .sub-menu {
  /* Child submenu is fully visible */
  opacity: 1;
}

/* Reduce opacity of parent submenu when child submenu is open */
.sub-menu .menu-item-has-children:hover {
  opacity: 1; /* Active item */
}

.sub-menu .menu-item-has-children:hover ~ .menu-item {
  opacity: 0.5; /* Siblings */
}

/* OR dim entire parent submenu when child submenu is open */
.menu-item-has-children:hover > .sub-menu > .menu-item-has-children:hover > .sub-menu {
  opacity: 1;
}

.menu-item-has-children:hover > .sub-menu:not(:hover) {
  opacity: 0.5;
}
	  .sub-menu .menu-item {
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .sub-menu .menu-item:hover {
    background-color: #f5f5f5;
    transform: translateX(4px);
  }
}

@media (max-width: 1024px) {

  /* Make menu links full-width and flex to align text + toggle */
  ul#menu-mobile-menue li a {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      width: 100% !important;
      padding: 10px 15px !important;
      box-sizing: border-box !important;
  }

  /* Default pseudo-arrow for parents (if no explicit toggle span exists) */
  ul#menu-mobile-menue li.menu-item-has-children > a::after {
      content: ' ▼' !important;
      font-size: 0.7em !important;
      margin-left: 10px !important;
      transition: transform 0.25s ease !important;
      flex-shrink: 0 !important;
  }

  /* If JS adds/marks a real toggle span (.has-toggle-span), hide the pseudo ::after to avoid duplicates */
  ul#menu-mobile-menue li.menu-item-has-children > a.has-toggle-span::after {
      content: none !important;
  }

  /* Style theme-provided toggle span or created .arrow-toggle */
  ul#menu-mobile-menue li.menu-item-has-children > a > .dropdown-menu-toggle,
  ul#menu-mobile-menue li.menu-item-has-children > a > .arrow-toggle {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: 34px !important;      /* larger tap target */
      height: 34px !important;
      margin-left: 10px !important;
      cursor: pointer !important;
      transition: transform 0.25s ease !important;
      flex-shrink: 0 !important;
      font-size: 0.85em !important;
      line-height: 1 !important;
  }

  /* Hide toggle spans inside items that do NOT have children (defensive) */
  ul#menu-mobile-menue li:not(.menu-item-has-children) > a > .dropdown-menu-toggle,
  ul#menu-mobile-menue li:not(.menu-item-has-children) > a > .arrow-toggle {
      display: none !important;
  }

  /* Rotate when open */
  ul#menu-mobile-menue li.menu-item-has-children.open > a > .dropdown-menu-toggle,
  ul#menu-mobile-menue li.menu-item-has-children.open > a > .arrow-toggle {
      transform: rotate(180deg) !important;
  }

  /* Submenu visibility rules (kept as you had) */
  .mobile-nav-links .sub-menu {
      display: none !important;
  }
  .mobile-nav-links .sub-menu.open {
      display: block !important;
      visibility: visible !important;
  }

  ul#menu-mobile-menue li.menu-item-has-children > .sub-menu {
      max-height: unset !important;
      position: relative !important;
      opacity: 1 !important;
	  border-radius: 20px;
	}
	ul#menu-mobile-menue li.menu-item-has-children > .sub-menu li a{
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
		padding:0 !important;
	}
}