.content {
  border-top-left-radius: 170px;
}
.cont {
  border-top-left-radius: 170px;
  border-bottom-right-radius: 170px;
}
.contt {
  border-top-right-radius: 170px;
  border-bottom-left-radius: 170px;
}
.contts {
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}
.scrollbar-hide {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
/* Custom animation for rotating the arrow */
.rotate-180 {
  transform: rotate(180deg);
}
/* Custom animation for expanding/collapsing */
.expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.expand.show {
  max-height: 300px;
}
.conts {
  border-bottom-right-radius: 200px;
}
.navbar {
  transition: background-color 0.3s ease-in-out;
}
.top-nav {
  transition: opacity 0.3s ease-in-out;
}

.bg-custom-gradient1 {
  background: linear-gradient(rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.6)),
    url("../image/survey-home.jpg");
}
.bg-default {
  background: linear-gradient(rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.6)),
    url("../image/papa.jpg");
}
.bg-construct {
  background: linear-gradient(rgba(147, 129, 7, 0.813), rgba(217, 25, 18, 0.6)),
    url("../image/construction-home.jpg");
}

.bg-inpect {
  background: linear-gradient(rgba(24, 203, 66, 0.6), rgba(24, 51, 117, 0.6)),
    url("../image/papa.jpg");
}
.bg-indus {
  background: linear-gradient(
      rgba(151, 45, 9, 0.6),
      /* Green gradient with opacity */ rgba(178, 46, 9, 0.6)
    ),
    url("../image/site-ctr-surv.jpg");
}
.bg-Creeswell {
  background: linear-gradient(rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.6)),
    url("../image/C0A8667_LR8a5b.jpg");
}
.bg-pipe {
  background: linear-gradient(rgba(134, 82, 4, 0.6), rgba(71, 50, 4, 0.6)),
    url("../image/proman-home.jpg");
}
@media only screen and (max-width: 768px) {
  .cont {
    border-top-left-radius: 70px;
    border-bottom-right-radius: 70px;
  }
  .content {
    border-top-left-radius: 70px;
  }
  .conts {
    border-bottom-right-radius: 70px;
  }
}

/* .top-men {
  font-size: 15px;
} */

/* .service-menu {
  font-size: 17px;
} */

.sub-men {
  font-size: 19px;
}



.hex-grid {
  display: flex;
  margin: auto;
  width:85%;
  flex-wrap: wrap;
  justify-content: center;
}

.hex {
  width: 375px;
  height: 320px;
  margin: 3px;
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
  overflow: hidden;
}

.hex img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 1024px) {
  .hex {
    width: 360px;
    height: 300px;
    margin: 1px;
  }
  
.hex-grid {
  width:100%;
}
}
@media only screen and (max-width: 768px) {
  .cont {
    border-top-left-radius: 70px;
    border-bottom-right-radius: 70px;
  }
  .content {
    border-top-left-radius: 70px;
  }
  .conts {
    border-bottom-right-radius: 70px;
  }
}

/* .hex-text p, .hex-text h2 {
  
  padding-left: 60px; 
  padding-right: 60px; 
} */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #E5E7EB;
  border-radius: 9999px; 
}

::-webkit-scrollbar-thumb:hover {
  background-color: #E5E7EB; 
}

::-webkit-scrollbar-track {
  background-color: #4B5563;
}

/* style/index.css */
#mobile-menu {
  transform: translateX(-100%); /* Start off-screen to the left */
  transition: transform 0.3s ease-in-out; /* Smooth transition */
  -webkit-transition: transform 0.3s ease-in-out; /* Safari support */
}

#mobile-menu.open {
  transform: translateX(0); /* Slide in to view */
}

.mobile-sub-menu {
  transition: max-height 0.3s ease-in-out;
  max-height: 0;
  overflow: hidden;
}

.mobile-sub-menu.open {
  max-height: 500px; /* Adjust based on content */
}

#menu-close, #menu-open {
  transition: opacity 0.2s ease;
}

#mobile-menu::-webkit-scrollbar {
  display: none; /* Hide scrollbar but allow scrolling */
}
.mobile-overlay {
    position: fixed;
    top: 10;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: #3f3f46;
    color: white;
    z-index: 30;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
    padding: 20px;
  }
  .mobile-overlay.active {
    right: 0;
  }
  .back-button {
    font-size: 24px;
    margin-bottom: 20px;
  }

@media (max-width: 1023px) {
  nav {
    background-color: rgba(63, 63, 70, 0.8) !important; /* Semi-transparent bg */
  }
}