html{scroll-behavior: smooth;}
/*** Spinner Start ***/
.preloader {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        opacity: 1;
        transition: opacity 0.5s ease-out;
    }

    .preloader.fade-out {
        opacity: 0;
    }

    .preloader-content {
        text-align: center;
    }

    .preloader-logo {
        animation: logoPulse 1s ease-in-out infinite;
    }

    @keyframes logoPulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.15);
        }
    }
/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    transition: 0.5s;
    z-index: 99;
}


/*** Button Start ***/
.btn {
    font-weight: 600;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 40px;
    height: 40px;
}

.btn-lg-square {
    width: 46px;
    height: 46px;
}

.btn-xl-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square,
.btn-xl-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn.btn-primary {
    color: var(--bs-white);
    border: none;
}

.btn.btn-primary:hover {
    background: var(--bs-dark);
    color: var(--bs-white);
}

.btn.btn-light {
    color: var(--bs-primary);
    border: none;
}

.btn.btn-light:hover {
    color: var(--bs-white);
    background: var(--bs-primary);
}

/*** Navbar Start ***/
.header-top .topbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
    color: var(--bs-primary);
}

.header-top .topbar .dropdown .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light);
    padding-top: 12px;
    border: 0;
    transition: .5s;
    opacity: 1;
}

.header-top {
    height: 125px;
    position: relative;
}

.header-top::after {
    content: "";
    position: absolute;
    overflow: hidden;
    width: 16%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--bs-light);
    z-index: 1;
}

@media (min-width: 992px) {
    .header-top::before {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 45px;
        top: 0;
        right: 0;
        background: var(--bs-dark);
        z-index: -1;
    }

    .navbar-brand-2 {
        display: none;
    }
}

@media (max-width: 991px) {
    .header-top {
        max-height: 80px;
    }

    .navbar {
        justify-content: space-between;
    }

    .header-top .container {
        max-height: 80px;
    }

    .navbar-brand {
        display: none;
    }

    .navbar-brand-2 {
        position: relative;
        overflow: hidden;
        width: 200px;
        height: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        z-index: 99;
    }

    .navbar-brand-2::before {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 100%;
        height: 600px;
        top: -200px;
        right: 18px;
        background: var(--bs-light);
        transform: rotate(-18deg);
        z-index: -1;
    }

    .navbar-brand-2::after {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 5px;
        height: 600px;
        top: -200px;
        right: 18px;
        background: var(--bs-primary);
        transform: rotate(-18deg);
        z-index: -1;
    }

    .navbar.navbar-light {
        height: 100%;
        padding: 0;
    }

    .navbar .navbar-collapse {
        margin-top: -20px;
    }

}

.nav-bar .navbar {
    z-index: 9;
}

.navbar-light .navbar-brand img {
    max-height: 60px;
    transition: .5s;
}

.nav-bar .navbar-light .navbar-brand img {
    max-height: 50px;
}

.navbar .navbar-nav .nav-item .nav-link {
    padding: 0;
}

.navbar .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    padding: 0;
    margin-right: 20px;
}

.navbar-light .navbar-nav .nav-item:hover,
.navbar-light .navbar-nav .nav-item.active,
.navbar-light .navbar-nav .nav-item:hover .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link {
    color: var(--bs-primary);
}

@media (max-width: 991px) {
    .navbar {
        padding: 20px 0;
    }

    .navbar .navbar-nav .nav-link {
        padding: 0;
    }

    .navbar .navbar-nav .nav-item {
        display: flex;
        padding: 12px;
        flex-direction: column;
        justify-content: start;
        align-items: start;
    }

    .navbar .navbar-nav .nav-btn {
        display: flex;
        justify-content: start;
    }

    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        margin-top: 20px;
        padding-bottom: 20px;
        margin-left: 50px;
        background: var(--bs-light);
    }

    .navbar .navbar-nav .nav-btn {
        display: flex;
        flex-direction: column;
    }

    .navbar .navbar-nav .nav-btn a.btn {
        margin-right: 15px;
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 8px 15px;
        border: 1px solid var(--bs-primary);
        color: var(--bs-primary);
    }
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    vertical-align: middle;
    margin-left: 8px;
}

.dropdown .dropdown-menu .dropdown-item:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

@media (min-width: 992px) {
    .navbar {
        padding: 20px 0;
    }

    .navbar .nav-btn {
        display: flex;
        align-items: center;
        justify-content: end;
    }

    .navbar .navbar-nav {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: var(--bs-light);
        border-radius: 10px;
    }

    .navbar .navbar-nav .nav-btn {
        width: 100%;
        display: flex;
        margin-left: auto;
    }

    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        margin-top: 19px;
        background: var(--bs-white);
        transition: .5s;
        opacity: 1;
    }

    .header-top .navbar-brand {
        position: relative;
        overflow: hidden;
        padding: 40px 50px 40px 0;
        z-index: 99;
    }
    
    .navbar-brand::before {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 300px;
        height: 600px;
        top: -200px;
        right: 18px;
        background: var(--bs-light);
        transform: rotate(-18deg);
        z-index: -1;
    }
    
    .navbar-brand::after {
        content: "";
        position: absolute;
        overflow: hidden;
        width: 5px;
        height: 600px;
        top: -200px;
        right: 18px;
        background: var(--bs-primary);
        transform: rotate(-18deg);
        z-index: -1;
    }
}
/*** Navbar End ***/


/*** Carousel Hero Header Start ***/


.hero-bg-half-1 {
    background-image: url(../img/welcome.webp);
    filter: grayscale(10%);
    transform: scale(100% - 50%);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}

.hero-bg-half-2 {
    background-image: url(../img/ext.webp);
    filter: grayscale(10%);
    transform: scale(100% - 50%);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}

.hero-bg-half-3 {
    background-image: url(../img/sleep.webp);
    filter: grayscale(10%);
    transform: scale(100% - 50%);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}
.hero-bg-half-4 {
    background-image: url(../img/co2.webp);
    filter: grayscale(10%);
    transform: scale(100% - 50%);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}
.hero-bg-half-5 {
    background-image: url(../img/boat.webp);
    filter: grayscale(10%);
    transform: scale(100% - 50%);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}
.hero-bg-half-6 {
    background-image: url(../img/hosecabinet.webp);
    filter: grayscale(10%);
    transform: scale(100% - 50%);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}
.hero-bg-half-7 {
    background-image: url(../img/bag.webp);
    filter: grayscale(10%);
    transform: scale(100% - 50%);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    top: 0;
}

/*** Carousel Hero Header Start ***/
.header-carousel .header-carousel-item {
    height: 600px;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--bs-white);
    color: var(--bs-primary);
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.header-carousel .owl-nav .owl-prev {
    bottom: 30px;
    left: 0;
}
.header-carousel .owl-nav .owl-next {
    bottom: 30px;
    right: 0;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    box-shadow: inset 0 0 65px 0 var(--bs-primary);
    color: var(--bs-dark);
}

.header-carousel .header-carousel-item .carousel-caption {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: flex-start;
    z-index: 9;
    padding-top: 100px;
}

.header-carousel .carousel-caption h1{
  font-size: 4rem;   
  font-weight: 800;          
  line-height: 1.2;   
  margin-top: -13rem;
  text-align: center;
 }
  .carousel-caption:hover{text-shadow:0 0 10px rgba(0,0,0,0.4),
  0 0 20px rgba(0,0,0,0.3),
  0 0 30px rgba(0,0,0,0.2) ;}
  .header-carousel .header-carousel-item {position: relative;
  overflow: hidden;}
  .header-carousel .header-carousel-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.37); 
    z-index: 1;
    transition: 0.6s ease;
}
.header-carousel .header-carousel-item:hover::before {
    background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 991px) {
    .header-carousel .header-carousel-item .carousel-caption {
    padding-top: 45px;
    }
.header-carousel .carousel-caption h1{
  font-size: 2.1rem;   
  font-weight: 800; 
  margin-top: -122px;         
  line-height: 1.2;   
  text-align: center;
 }
    .header-carousel.owl-carousel,
    .header-carousel .header-carousel-item {
    height: 700px;
    }
}
.arrow{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.arrow span{
  display: block;
  width: 38px;
  height: 38px;
  border-bottom: 5px solid #ff9615;
  border-right: 5px solid #ff9615;
  transform: rotate(-45deg);
  margin: -20px;
  animation: scroll 2s infinite;
}
.arrow span:nth-child(2){animation-delay: -.2s;}
.arrow span:nth-child(3){animation-delay: -.4s;}

@keyframes scroll{
  0%{ opacity: 0;
  transform: rotate(45deg) translate(-20px, -20px);}
  50%{opacity: 1; }
  100%{ opacity: 0;
  transform: rotate(45deg) translate(20px, 20px);}
}
/*** Carousel Hero Header End ***/


/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    position: relative;
    overflow: hidden;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(../img/banner-img.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0 60px 0;
    transition: 0.5s;
}

.bg-breadcrumb .breadcrumb {
    position: relative;
}

.bg-breadcrumb .breadcrumb .breadcrumb-item a {
    color: var(--bs-white);
}
/*** Single Page Hero Header End ***/


/*** Banner Start ***/
.banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(../img/cont.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 9;
  min-height: 60vh; 
  display: flex;
  align-items: center;
}

.banner .container {
  position: relative;
  z-index: 99;
}

.contact-btn {
  margin-top: 2rem; 
}

.float-animation {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
 0%, 100% {
transform: translateY(0px) scale(1);
}
50% {
transform: translateY(-20px) scale(1.03);
}
}
.icon-btn {
  width: 50px;
  height:50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.3s ease;
  bottom: -60px;
  position: absolute;
}
/*** Banner End ***/
/***BRANDS***/
.brand-section { background: transparent; }

.brand-slider { overflow: hidden; position: relative; }

.brand-track {
  display: flex;
  align-items: center;
  /* animation will be injected by JS for exact pixel-perfect animation */
}

.brand-set { display: flex; align-items: center; }

/* box for each logo for consistent size */
.brand-logo {
  width: 200px;    
  height: 80px;     
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 18px;
  flex: 0 0 auto;  
  position: relative; 
}
.brand-logo-m{  transform: scale(3.5); 
    margin-top: 34px;
    margin-right: -20px;
    z-index: 20;}
.brand-logo-l{transform: scale(1.57);
z-index: 15;}
.brand-logo-a{transform: scale(1.5);
z-index: 14;}
.brand-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 222ms ease;
}
.brand-logo img:hover {
  filter: none;
  transform: scale(1.04);
}
/***BRANDS***/
/*** Service Start ***/
.service .nav .nav-item {
    width: 75%;
    border: 1px solid var(--bs-primary);
    background: var(--bs-light);
}

.service .nav .nav-item a {
    display: flex;
    justify-content: center;
}


.owl-stage-outer {
    margin-right: -1px;
}
.service .nav-item a.active {
    background: var(--bs-primary);
}

.service .nav-item a span {
    color: var(--bs-dark);
}

.service .nav-item a.active span {
    color: var(--bs-white);
}

.service-carousel .owl-nav .owl-prev,
.service-carousel .owl-nav .owl-next {
    position: absolute;
    padding: 10px 35px;
    border: 1px solid var(--bs-primary);
    color: var(--bs-dark);
    background: var(--bs-light);
    transition: 0.5s;
}

.service-carousel .owl-nav .owl-prev:hover,
.service-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

@media (min-width: 992px) {
    .service-carousel .owl-nav .owl-prev {
        top: 0;
        left: -115px;
    }
    
    .service-carousel .owl-nav .owl-next {
        bottom: 0;
        left: -115px;
    }
}

@media (max-width: 991px) {
    .owl-stage-outer {
        margin-bottom: 70px;
    }
    .service-carousel .owl-nav .owl-prev {
        bottom: -70px;
        left: 0;
    }

    .service-carousel .owl-nav .owl-next {
        bottom: -70px;
        right: 0;
    }

    .service .nav {
        display: flex;
        justify-content: center;
    }
}
/*** Service End ***/

/*** Projects Start ***/
.projects .nav-item {
    box-shadow: 0 0 30px rgba(0, 0, 0, .09);
}

.projects-item .projects-content {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
}

.projects .nav-item a.active {
    background: var(--bs-primary);
}

.projects .nav-item a span {
    color: var(--bs-dark);
}

.projects .nav-item a.active span {
    color: var(--bs-white);
}

.projects .nav-item a.active .projects-icon {
    background: var(--bs-dark) !important;
}

.projects .nav-item a.active .projects-icon span {
    color: var(--bs-primary);
}
/*** Projects End ***/


/*** Blog Start ***/
.service .blog-item,
.blog .blog-item {
    height: 100%;
    background: var(--bs-light);
}

.service .blog-item .blog-img,
.blog .blog-item .blog-img {
    position: relative;
    overflow: hidden;
}

.service .blog-item .blog-img::after,
.blog .blog-item .blog-img::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    background: rgba(246, 138, 10, .3);
    transition: 0.5s;
}

.service .blog-item:hover .blog-img::after 
.blog .blog-item:hover .blog-img::after {
    width: 100%;
    height: 100%;
}

.service .blog-item .blog-img img
.blog .blog-item .blog-img img {
    transition: 0.5s;
}

.service .blog-item:hover .blog-img img,
.blog .blog-item:hover .blog-img img {
    transform: scale(1.2);
}

.service .blog-item .blog-heading,
.blog .blog-item .blog-heading {
    position: relative;
    background: var(--bs-white);
}

.service .blog-item .blog-heading a.h4,
.blog .blog-item .blog-heading a.h4 {
    position: relative;
    width: 100%;
    display: inline-flex;
    transition: 0.5s;
    z-index: 2;
}

.service .blog-item .blog-heading::after,
.blog .blog-item .blog-heading::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    right: 0;
    bottom: 0;
    transition: 0.5s;
    z-index: 1;
}

.service .blog-item:hover .blog-heading::after,
.blog .blog-item:hover .blog-heading::after {
    width: 100%;
    background: var(--bs-primary);
}

.service .blog-item:hover .blog-heading a.h4,
.blog .blog-item:hover .blog-heading a.h4 {
    color: var(--bs-white);
}

.service .blog-item:hover .blog-heading a.h4:hover,
.blog .blog-item:hover .blog-heading a.h4:hover {
    color: var(--bs-dark);
}
/*** Blog End ***/

/*** Team Start ***/
.team .team-item .team-img {
    position: relative;
    overflow: hidden;
}

.team .team-item .team-img img {
    transition: 0.5s;
}

.team .team-item:hover .team-img img {
    transform: scale(1.1);
}

.team .team-item .team-img .team-icon {
    position: absolute;
    bottom: 20px; right: -100%;
    z-index: 9;
    transition: 0.5s;
}

.team .team-item:hover .team-img .team-icon {
    right: 25px;
}

.team .team-item .team-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: rgba(246, 138, 10, .2);
    transition: 0.5s;
    z-index: 1;
}

.team .team-item:hover .team-img::after {
    height: 100%;
}

.team .team-item .team-content {
    transition: 0.5s;
}

.team .team-item:hover .team-content {
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
}
/*** Team End ***/

/*** FAQs Start ***/
.faq-section {
    margin-top: 80px;
    padding: 0 20px;
  }
  
  .faq-heading {
    font-size: 2.2rem;
    font-weight: bold;
    color: #1f2937;
    text-align: center;
    margin-bottom: 2.5rem;
  }
  
  .faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    gap: 1.1rem;
  }
  
  .faq-card {
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 10px rgba(0.1, 0.1, 0.1, 0.126);
    overflow: hidden;
  }
  
  .faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 1rem 1rem;
    cursor: pointer;
  }
  .faq-toggle:hover {
    background-color: #eeeef0;
    transition: background-color 0.2s ease;}
  
  .faq-toggle h5 {
    margin: 0;
    font-size: 1.125rem;
    color: #1f2937;
    font-weight: 600;
  }
  
  .faq-dropdown-icon {
    display: flex;
    align-items: center;
    margin-left: 12px;
  }
  
  .faq-content {
  padding: 0 1.5rem 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: #4b5563;
  font-size: 1.1rem;
  transition: max-height 0.46s ease, opacity 0.46s ease;
}
  .faq-content.show {
  opacity: 1;
}
.faq-content.hidden { display: none; }
  .rotate {
    transform: rotate(180deg);
  }
  .faq-content.hidden {
    display: none;
  }
  .faq-dropdown-icon svg {
    transition: transform 0.3s;
  }
/*** FAQs End ***/

/*** servces Start ***/
.services-hero-banner {
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.services-hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55); /* dark overlay */
  backdrop-filter: blur(10px);      /* heavy blur effect */
  z-index: 1;
}

.services-hero-title {
  position: relative;
  z-index: 2;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.services-hero-icons {
  position: relative;
  z-index: 2;
}

.services-hero-icons i {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  transition: transform 0.3s ease, color 0.3s ease;
}

.services-hero-icons i:hover {
  transform: scale(1.1);
  color: #0dcaf0; 
}

/*** services ***/

/*** Footer Start ***/
.footer {
    background: var(--bs-dark);
}

.footer .footer-item a {
    line-height: 35px;
    color: var(--bs-white);
    transition: 0.5s;
}

.footer .footer-item p {
    line-height: 35px;
}

.footer .footer-item a:hover {
    letter-spacing: 1px;
    color: var(--bs-primary);
}

.footer .footer-item .footer-btn a {
    transition: 0.5s;
}

.footer .footer-item .footer-btn a:hover {
    background: var(--bs-white);
}

.footer .footer-item .footer-btn a:hover {
    color: var(--bs-primary);
}
/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark);
}
/*** copyright end ***/
/* Custom Floating Animation for ABOUT US */
@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-us-float {
    animation: floatUp 1s ease-out forwards;
    opacity: 0;
    text-align: center;
    width: 100%;
    display: block;
}

.about-us-float.wow {
    visibility: visible;
}
/*core values section*/
.core-values {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding: 40px 2vw;
  gap: 32px;
   background: linear-gradient(90deg, #e5edf4, #ebf1f8, #e5edf4);
  background-size: 300% 100%;
  animation: coreValuesGradientMove 5s linear infinite;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Responsive: stack vertically on small screens */
@media (max-width: 900px) {
  .core-values {
    margin-top: 30px;
    flex-direction: column;
    align-items: center;
  }
  .groh{margin-top: 150px;}
   .circle-wrapper {margin: 10px;
    width: 82px;
    height: 82px;
  }
  .center-image {
    width: 56px;
    height: 56px;
  }
  .icon-caption {
    display: block !important;
    opacity: 1 !important;
    font-size: 6px;
    position: static;
    transform: none;
    margin-top: 4px;
    text-align: center;
    background: none;
    padding: 0;
}}
@keyframes coreValuesGradientMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
.circle-wrapper {
  position: relative;
  width: 125px;
  height: 125px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

.icon-caption {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #020203;
  padding: 2px 8px;
  font-size: 17px;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 10;
}
.circle-wrapper:hover .icon-caption {
  display: block;
  opacity: 1;
}

.circle-wrapper:hover {
  transform: scale3d(1.06, 1.06, 1.03) translateZ(11px);
 
}

.rotating-text-circle {
  width: 100%;
  height: 100%;
  animation: spin 7.5s linear infinite;
}
.rotating-text-circle .circle-text {
  transition: font-size 0.3s ease, fill 0.3s ease;
}

.circle-text {pointer-events: none;
  font-size: 15px;
  fill: #020203; 
  text-transform: uppercase;
  letter-spacing: 2px;
}
/* Unique hover colors for each circle */
.core-values .circle-wrapper:nth-child(1):hover .circle-text {
  fill: #e63946; /* red for Safety First */
}

.core-values .circle-wrapper:nth-child(2):hover .circle-text {
  fill: #176953; /* teal for Integrity */
}

.core-values .circle-wrapper:nth-child(3):hover .circle-text {
  fill: #0d59b1; /* dark greenish blue for Reliability */
}

.core-values .circle-wrapper:nth-child(4):hover .circle-text {
  fill: #35939b; /* purple for Collaboration */
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.center-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
@keyframes slideInRightCoreValues {
  from {
    opacity: 0;
    transform: translateX(80px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.core-values {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.9s, transform 0.9s;
}
.core-values.visible {
  animation: slideInRightCoreValues 1.1s cubic-bezier(0.77,0,0.175,1) forwards;
}
/*core values section end*/
/*about img edits*/
.zzz{border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
object-fit: cover;
margin-top: 5px;
transition: transform 0.35s cubic-bezier(0.77,0,0.175,1), box-shadow 0.35s cubic-bezier(0.77,0,0.175,1);
}
.zzz:hover{transform: scale(1.02) perspective(600px) translateZ(12px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);}
  
  .about-years {
  margin-top: 30px;
  margin-left: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 150px;
  background: #F68A0A;
  color: #0E121D;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  letter-spacing: 1px;
  position: relative;
  padding: 0 8px;
  transition: transform 0.35s cubic-bezier(0.77,0,0.175,1), box-shadow 0.35s cubic-bezier(0.77,0,0.175,1);
}
.about-years:hover {
  transform: scale(1.01) perspective(600px) translateZ(12px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.12);
}
.about-years > span:first-child {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
}
.about-years .main-number {
  font-size: 3.2rem;
  font-weight: bold;
  line-height: 1.1;
  display: block;
  text-align: center;
}
.about-years .plus-sign {
  font-size: 2.1rem;
  font-weight: 900;
  margin-left: 4px;
  color: #0E121D;
  letter-spacing: 0.5px;
  line-height: 1.1;
  display: block;
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.about-years .plus-sign.visible {
  opacity: 1;
}
.about-years .years-label {
  font-size: 1.2rem;
  font-weight: 500;
  color: #e0eaf6;
  letter-spacing: 0.5px;
  margin-top: 0;
  display: block;
  text-align: center;}
/*about img edits*/
/*our services carousel*/
/* CAROUSEL WRAPPER - allow arrows to sit outside */
.car-wrapper {
  position: relative;
  max-width: 1200px;
  margin: 50px auto;
  overflow: visible;             
  animation: slideInLeft 0.8s ease;
  padding: 0 30px;               
  box-sizing: border-box;
}

/* container holds the sliding track */
.car-container {
  overflow: hidden;
}

/* sliding track */
.car-slide {
  display: flex;
  transition: transform 0.6s ease-in-out;
  will-change: transform;
}

/* responsive item widths */
.car-item { flex: 0 0 100%; padding: 0 10px; box-sizing: border-box; }
@media (min-width: 768px) { .car-item { flex: 0 0 50%; } }
@media (min-width: 1024px) { .car-item { flex: 0 0 33.333%; } }

/* card */
.car {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,0.08);
  transition: box-shadow 220ms ease, transform 220ms ease;
  height: 100%;
}
.car:hover { box-shadow: 0 8px 18px rgba(0,0,0,0.12); transform: translateY(-4px); }
.car img { width: 100%; height: 200px; object-fit: cover; display: block; }
.car-body { padding: 18px; }
.car-text { color: #0E121D; font-size: 16px; margin-bottom: 12px; }

/* CAR TITLE */
.car-title {
  display: inline-block;
  position: relative;
  padding: 2px 6px;        
  color: #F68A0A;        
  font-size: 18px;
  margin-bottom: 8px;
  overflow: visible;
}
/* Buttons */
.bt {
  display: inline-block;
  background: #ff9a1f;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 4px 0 #F68A0A;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.bt:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 6px 0 #F68A0A; }
.bt:active { transform: translateY(1px); box-shadow: 0 2px 0 #ff9615; }

/* NAVIGATION ARROWS */
.nav-bt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  padding: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  z-index: 100;
}
.nav-bt:hover { transform: translateY(-50%) scale(1.06); box-shadow: 0 10px 22px rgba(0,0,0,0.14); }
.nav-bt.left  { left: -24px; } 
.nav-bt.right { right: -24px; } 

/* responsive */
@media (max-width: 520px) {
  .nav-bt.left { left: 6px; transform: none; top: calc(100% - 36px); ;}
  .nav-bt.right { right: 6px; transform: none; top: calc(100% - 36px);}
}

/* centered dots under carousel */
.indicators {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 8px;
}
.indicator {
  width: 12px; height: 12px; background: #d1d5db; border-radius: 50%;
  cursor: pointer; transition: background 0.3s, transform 0.18s;
  border: 2px solid rgba(0,0,0,0.04);
}
.indicator:hover { transform: scale(1.08); }
.indicator.active { background: #ff9a1f; border-color: rgba(0,0,0,0.06); }
/*img concept*/
.car-img-wrap {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.car-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7; 
  transition: opacity 0.3s ease;
}

.car-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 45px;
  color: #f4f4f6; 
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.3s ease, color 0.3s ease;
  z-index: 2;
}

/* Hover effect */
.car-img-wrap:hover img {
  opacity: 0.9; 
}

.car-img-wrap:hover .car-icon {
  transform: translate(-50%, -50%) scale(0.9); 
  color: #cfcfd1; 
}
/*our services carousel*/
/*contact page*/
.info-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 100px;
    margin: 100px auto;
    max-width: 1200px;
    padding: 0 20px;
  }
  .Congo-box{
    margin-top: 37px;
    background-color: #ffffff;
    width: 380px;
    height: 520px;
    margin-left: 0;
    align-self: flex-start;
    border-radius: 17px;
    box-shadow: 0 4px 24px rgba(64,107,149,0.10), 0 2px 8px rgba(0,0,0,0.06);
    padding: 20px;
    display: flex;
    flex-direction: column;
    border: 1.5px solid #e0eaf6;
    transition: box-shadow 0.35s cubic-bezier(0.77,0,0.175,1), transform 0.35s cubic-bezier(0.77,0,0.175,1);
  }
  .Benin-box {
    margin-top: 37px;
    background-color: #ffffff;
    width: 380px;
    height: 520px;
    margin-left: 0;
    align-self: flex-start;
    border-radius: 17px;
    box-shadow: 0 4px 24px rgba(64,107,149,0.10), 0 2px 8px rgba(0,0,0,0.06);
    padding: 20px;
    display: flex;
    flex-direction: column;
    border: 1.5px solid #e0eaf6;
    transition: box-shadow 0.3s cubic-bezier(0.5,0,0.11,0.7), transform 0.3s cubic-bezier(0.5,0,0.11,0.7);
  }
  .Congo-box:hover {
      box-shadow: 0 10px 24px rgba(64,107,140,0.18), 0 2px 12px rgba(0,0,0,0.12);
      transform: scale3d(1,1) perspective(300px) translateZ(4px);
  }
  .Benin-box:hover {
      box-shadow: 0 10px 24px rgba(64,107,140,0.18), 0 2px 12px rgba(0,0,0,0.12);
      transform: scale3d(1,1) perspective(300px) translateZ(4px);
  }
  .Benin-header,
  .Congo-header {
    font-size: 1.7rem;
    font-weight: bold;
    color: #1f2937;
    margin-bottom: 15px;
    gap: 10px;
    text-align: center;
  }
  .Congo-details {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    text-align: left;
    margin-bottom: 10px;
  }
  .congo-text{ display: flex;
    flex-direction: column;
    }
  
  .Congo-details a {
    font-size: 1rem;
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  .Congo-details p {
    font-size: 1.05rem;
    width: 100%;
    margin-bottom: 12px;
    display: block;
  }
  .Congo-details p {
    display: flex;
    font-size: 1rem;
    color: #222;
    font-weight: bold;
  }
  .location-icon,
  .contact-icon,
  .mail-icon {
    flex-shrink: 0;
    margin-top: 5px;
  }
  .Congo-details a,
  .Benin-details a {
    color: #222;
    text-decoration: none;
    transition: color 0.2s;
  }
  .Congo-details a:hover,
  .Benin-details a:hover {
    color: #183baf;
  }
   @media (max-width: 768px) {
    .info-row {
      flex-direction: column;
      gap: 40px;
      margin: 50px auto;
      padding: 0 10px;
      
    }
  
    .Congo-box, .Benin-box {
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      padding: 14px;
      font-size: 0.9rem;
    }
    .Benin-box{height: 438px;}
    .Congo-box:hover, .Benin-box:hover {
      transform: none;
      transition: none;
    }
    .Congo-header, .Benin-header {
      font-size: 1.5rem;
    }
  
    .Congo-details p, .Benin-details p {
      font-size: 0.9rem;
    }
  
    .location-icon, .contact-icon, .mail-icon {
      width: 20px;
      height: 20px;
      margin-top: 6px;
    }
  }
  
  @media (max-width: 480px) {
    .info-row {
      gap: 15px;
      margin: 30px auto;
    }
  
    .Congo-box, .Benin-box {
      padding: 12px;
      font-size: 0.8rem;
    }
  
    .Congo-header, .Benin-header {
      font-size: 1.3rem;
    }
  
    .Congo-details p, .Benin-details p {
      font-size: 0.8rem;
    }
  
    .location-icon, .contact-icon, .mail-icon {
      width: 18px;
      height: 18px;
      margin-top: 4px;
    }
  }
  /**/
/* Dark text across the form */
#contactForm,
#contactForm label,
#contactForm .form-check-label {
  color: #222 !important;
}

/* Inputs, textarea, and SELECT text */
#contactForm .form-control,
#contactForm .form-select {
  color: #222 !important;
}

/* Options inside the dropdown */
#contactForm .form-select option {
  color: #222;
  background-color: #fff; /* keeps options readable */
}

/* Hide placeholders by default */
#contactForm input::placeholder,
#contactForm textarea::placeholder {
  color: transparent;
  transition: color 0.2s ease;
}

/* Show placeholders when focused */
#contactForm input:focus::placeholder,
#contactForm textarea:focus::placeholder {
  color: #222;
}

.error-message {
  display: none; 
}
.map-responsive {
  position: relative;
  padding-bottom: 40.25%; /* keeps 16:9 ratio */
  overflow: hidden;
}
.map-responsive iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.map-controls{ display: flex;
  justify-content: left; 
  gap: 30px;
}
.map-control{ cursor: pointer;
  color: #222;
  font-size: large;
transition: transform 0.2s ease, color 0.2s ease;}
.map-control:hover {
  transform: scale(1.04);
  color: #F68A0A;
}
@media (max-width: 520px) {.map-responsive{padding-bottom: 60%;}}
/*contact page */

/* -------------------------
   Search widget container
   ------------------------- */
#pm-search-widget {
  position: relative;     /* sits inside navbar flow */
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  margin-left: 0.75rem;   /* adjust to taste inside navbar */
  z-index: 1060;          /* ensures suggestions appear above banners */
}

/* -------------------------
   Round button (default)
   ------------------------- */
#pm-search-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 6px 18px rgba(2,6,23,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .22s ease, color .22s ease;
  padding: 0;
}
#pm-search-btn i {
  color: #F68A0A;
  font-size: 20px;
  transition: color .18s ease;
}

/* Hover - only when not active */
#pm-search-btn:hover:not(.active) {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 14px 4px rgba(255, 200, 50, 0.65); /* warm yellow glow */
}

/* Focus visible for accessibility */
#pm-search-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(246, 140, 10, 0.146); /* soft orange halo */
}

/* -------------------------
   Panel (expands in place)
   ------------------------- */
#pm-search-panel {
  position: absolute;
  right: 0;
  top: 0;                       /* aligns with button - expands over navbar area */
  transform-origin: top right;
  width: 52px;                  /* collapsed width (same as button) */
  height: 52px;
  overflow: hidden;
  border-radius: 999px;
  display: flex;
  align-items: center;
  background: transparent;
  pointer-events: none;         /* disabled until open */
  transition: width 500ms cubic-bezier(.2,.9,.3,1), 
  box-shadow 300ms ease,
  background 300ms ease;
  z-index: 1060;
}

/* Expanded pill state */
#pm-search-widget.open #pm-search-panel {
  width: 420px;                 /* expanded width - tune as needed */
  pointer-events: auto;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(2,6,23,0.12);
}
/* -------------------------
   Suggestions panel (dropdown)
   ------------------------- */
#pm-search-suggestions {
  position: absolute;
  top: calc(100% + 8px);    /* directly below pill */
  left: 0;
  right: 0;
  width: 100%;              /* matches pill width */
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(2,6,23,0.16);
  padding: 6px 0;
  z-index: 1060;

  /* hidden by default */
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

/* Show state */
#pm-search-widget.open #pm-search-suggestions {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* -------------------------
   Suggestion item
   ------------------------- */
.pm-suggestion {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
  color: #1f2937;
  display: block;
  text-decoration: none;
  background: transparent;
  transition: background 160ms ease, transform 120ms ease;
}

.pm-suggestion:hover,
.pm-suggestion.active {
  background: linear-gradient(90deg, rgba(246,138,10,0.08), rgba(246,138,10,0.04));
  color: #111827;
  transform: translateX(2px);
}

/* Meta / snippet (secondary text) */
.pm-suggestion .meta {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}

/* No results */
.pm-no-results {
  padding: 12px 16px;
  font-size: 14px;
  color: #6b7280;
}

/* -------------------------
   Scrollbar (for overflow)
   ------------------------- */
#pm-search-suggestions::-webkit-scrollbar {
  width: 8px;
}
#pm-search-suggestions::-webkit-scrollbar-thumb {
  background: rgba(16,24,40,0.15);
  border-radius: 8px;
}
#pm-search-suggestions::-webkit-scrollbar-track {
  background: transparent;
}

/* -------------------------
   Responsive adjustments
   ------------------------- */
@media (max-width: 520px) {
  #pm-search-suggestions {
    width: calc(100vw - 40px);
    left: auto;
    right: 20px;
    top: calc(100% + 10px);
    max-height: 260px;
  }
}

/* Input inside pill */
#pm-search-input {
  border: none;
  outline: none;
  background: transparent;
  padding: 0 16px;
  height: 48px;
  width: calc(100% - 48px);
  font-size: 15px;
  color: #222;
  display: none;                /* shown when open */
}
#pm-search-widget.open #pm-search-input {
  display: block;
}

/* Clear browser outline for input but keep focus visible for keyboard */
#pm-search-input:focus {
  outline: none;
  box-shadow: none;
}

#pm-search-panel .pm-icon-slot {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: 6px;
  margin-right: 6px;
  flex: 0 0 48px;
}

/* When panel is open, keep the button visible and functional (visual continuity) */
#pm-search-widget.open #pm-search-btn {
  position: relative; /* still in flow; appears like part of pill */
  z-index: 1062;      /* above the panel so it remains clickable */
}

#pm-search-btn.active,
#pm-search-widget.open #pm-search-btn {
  background: #000;   /* black when active */
  color: #fff;
}
#pm-search-btn.active i,
#pm-search-widget.open #pm-search-btn i {
  color: #fff;
}

/* -------------------------
   Responsive adjustments
   ------------------------- */
@media (max-width: 520px) {

#pm-search-panel{border-radius: 0px 999px 999px 0px;}
#pm-search-input{margin-left: 20px;}
/* NAVBAR sticky and top-most */
.nav-bar {
  position: sticky;   /* keeps navbar at top on scroll */
  top: 0;
  z-index: 13000;     /* above other content */
  background: inherit; /* keep existing background */
}

  /* make the widget smaller and full-width on open */
  #pm-search-widget {
    margin-left: 6px;
  }

  #pm-search-widget.open #pm-search-panel,
  #pm-search-widget.open #pm-search-suggestions {
    width: calc(360px);
    right: 20px;
  }

  #pm-search-panel {
    width: 52px;
    height: 52px;
  }

  #pm-search-input {
    height: 42px;
    font-size: 15px;
    padding: 0 12px;
  }

  #pm-search-suggestions {
    top: calc(100% + 10px);
    max-height: 260px;
    right: 20px;
    width: calc(100vw - 40px);
  }
}

/* -------------------------
   Small accessibility & polish
   ------------------------- */
#pm-search-input::placeholder {
  color: rgba(34,34,34,0.45);
}

/* ensure suggestion scroll area shows a subtle scrollbar on overlaying content */
#pm-search-suggestions::-webkit-scrollbar { height: 8px; width: 8px; }
#pm-search-suggestions::-webkit-scrollbar-thumb {
  background: rgba(16,24,40,0.12);
  border-radius: 8px;
}

/* Keep navbar toggler above search widget when collapsed on mobile */
.navbar .navbar-toggler { z-index: 1070; }

/* final fail-safe: if any banner/hero has very high z-index, ensure suggestions still show */
@media (min-width: 0px) {
  /* no-op container to help debugging; remove if you prefer strict stacking */
}

/* default initial state */
.fryed, .boiled {
  opacity: 0;
  will-change: transform, opacity;
  --anim-duration: 600ms;
  --anim-delay: 0ms;
}
/* FADE IN UP (fryed) */
@keyframes fryed-fade-up {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.fryed.play {
  animation: fryed-fade-up var(--anim-duration) ease-out var(--anim-delay) both;
}
/* FADE IN DOWN (boiled) */
@keyframes boiled-fade-down {
  0%   { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.boiled.play {
  animation: boiled-fade-down var(--anim-duration) ease-out var(--anim-delay) both;
}
/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fryed.play, .boiled.play {
    animation-duration: 1ms !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* -------------------------
   PM Services Hero (unique)
   ------------------------- */
.pm-services-hero {
  position: relative;
  overflow: hidden;
  min-height: 81.8vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 0;
  box-sizing: border-box;
}

/* background layer */
.pm-services-hero__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: 1;
  filter: brightness(0.55) saturate(0.95);
  transform-origin: center center;
  opacity: 1;
  transform: scale(1);
  transition: none;
  will-change: transform, opacity;
}

.pm-services-hero__bg.pm-zoom {
  animation: pm-zoom-fade 10s ease-out forwards;
}

@keyframes pm-zoom-fade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  70% {
    transform: scale(1.13);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.21);
    opacity: 0.7;
  }
}

/* content sits above the bg */
.pm-services-hero__content {
  position: relative;
  z-index: 2;
  color: #ffffff;
  text-align: center;
  padding: 1rem;
  max-width: 980px;
  margin: 0 auto;

  /* animation to bring forward text & icons while bg fades */
  animation: pm-text-focus 7.5s ease-out forwards;
}

@keyframes pm-text-focus {
  0% {
    text-shadow: none;
    font-weight: 400;
  }
  60% {
    text-shadow: 0 3px 12px rgba(0,0,0,0.65);
    font-weight: 600;
  }
  100% {
    text-shadow: 0 4px 18px rgba(0,0,0,0.7);
    font-weight: 700;
  }
}

/* Also apply focus to icons inside */
.pm-services-hero__content i {
  animation: pm-icon-focus 6.5s ease-out forwards;
}

@keyframes pm-icon-focus {
  0% {
    text-shadow: none;
  }
  60% {
    text-shadow: 0 3px 8px rgba(0,0,0,0.6);
  }
  100% {
    text-shadow: 0 4px 14px rgba(0,0,0,0.65);
  }
}
/* Desktop: keep background visually fixed while content scrolls */
@media (min-width: 768px) {
  .pm-services-hero__bg {
    background-attachment: fixed; /* simple, works on desktop */
  }
}

/* Mobile fallback: we remove fixed and use transform (JS will set translate) */
@media (max-width: 767px) {
  .pm-services-hero__bg {
    background-attachment: scroll;
    will-change: transform, opacity;
  }
}

/* Make sure other layout bits don't obscure the hero text on small screens */
@media (max-width: 520px) {
  .pm-services-hero__title { font-size: 2.6rem; }
  .pm-services-hero__icons i { font-size: 1.6rem; margin: 0 8px; }
}
 /* ---------- Unique pm styles (won't clash) ---------- */
  :root {
    --pm-hero-opacity: 0.6; /* final opacity of image after zoom-fade */
  }
  .pm-service-section {
    position: relative;
    overflow: hidden;
    min-height: 56vh;
    display: flex;
    align-items: center;
    padding: 6rem 0;
    color: #fff;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* background image + dark overlay */
  .pm-service-section__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    z-index: 1;
    filter: brightness(0.6) saturate(.95);
    transform-origin: center center;
    transition: transform .6s ease-out, opacity .6s ease-out;
    opacity: 1;
    will-change: transform, opacity;
  }

  /* slow zoom/fade animation triggered by JS */
  .pm-bg-zoomed {
    animation: pm-bg-zoom-fade 9.7s ease-out forwards;
  }
  @keyframes pm-bg-zoom-fade {
    0%   { transform: scale(1);   opacity: 1; }
    50%  { transform: scale(1.17); opacity: .58; }
    80%  { transform: scale(1.27); opacity: .78; }
    100% { transform: scale(1.4); opacity: var(--pm-hero-opacity); }
  }

  /* Clip-path slanted bottom (desktop). Slant leans right downward. */
 .pm-service-section.pm-slanted {
  /* slant leans right downward; changed the Y coordinate to reduce gap */
  clip-path: polygon(0 10%, 100% 0, 100% 88%, 0 100%);
}
  /* Remove slant on narrow screens (straight sections) */
  @media (max-width: 991.98px) {
    .pm-service-section.pm-slanted {
      clip-path: none;
      padding: 3.5rem 0;
    }
  }

  /* Transparent content pane (floating) */
  .pm-service-card {
    position: relative;
    z-index: 3;
    max-width: 1124px;
    width: 100%;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(4px);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.18);
    margin: 0 auto;
    color: #fff;
  }

  .pm-service-title {
    font-weight: 700;
    letter-spacing: .2px;
    color: #fff;
    text-shadow: 0 8px 18px rgba(0,0,0,0.75);
  }

  .pm-service-desc {
    opacity: 0.95;
    margin-bottom: 1.2rem;
  }

  /* small toggle row for "What we deliver" & "When you need us" */
  .pm-toggles {
    display: flex;
    gap: 1rem;
    flex-direction: column;
  }
  .pm-toggle {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    user-select: none;
    color: #fff;
    font-weight: 600;
  }
  .pm-toggle .pm-toggle-btn {
    display:inline-grid;
    place-items:center;
    width:34px; height:34px;
    border-radius:6px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    transition: transform .18s ease, background .18s ease;
    font-size: 16px;
  }
  .pm-toggle:hover .pm-toggle-btn { transform: translateY(-3px); }

  /* overlay card that appears when toggled */
  .pm-overlay {
    position: absolute;
    inset: 12%;
    left: 6%;
    right: 6%;
    top: 14%;
    bottom: 14%;
    z-index: 60;
    display: none;
    align-items: center;
    justify-content: center;
  }
  .pm-overlay.open { display: flex; }
  .pm-overlay__card {
    width: 100%;
    max-width: 880px;
    max-height: 85vh;
    background: #fff;
    color: #0e121d;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(2,6,23,0.18);
    padding: 28px;
    position: relative;
    transform: translateY(6px);
    opacity: 0;
    transition: opacity 860ms ease, transform 760ms ease;
    line-height: 1.32;             /* slightly tighter to fit more text */
    font-size: 15px;               /* comfortable reading size */
  }
  .pm-overlay.open .pm-overlay__card {
    transform: translateY(0);
    opacity: 1;
  }

  .pm-overlay__title, .pm-overlay__card h5 { font-weight: 700; margin-bottom: .5rem; }
  .pm-overlay__section { margin-top: 14px; }

  /* Scroll only on mobile */
@media (max-width: 768px) {
  .pm-overlay__card {
  max-height: 82vh;            /* a bit tighter for mobile */
  overflow-y: auto;            /* scroll vertically if content exceeds */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
  padding: 20px;               /* tighter padding on small screens */
  font-size: 14px;             /* slightly smaller for fit */
  line-height: 1.28;
  }

  /* add inner spacing tweaks so titles don’t get cramped */
  .pm-overlay__title, 
  .pm-overlay__card h5 {
  margin-bottom: 0.6rem;
  }

  .pm-overlay__section {
  margin-top: 12px;
  }}
  /* close icon in overlay (top-right) */
  .pm-overlay__close {
    position: absolute;
    right: 14px;
    top: 14px;
    width:36px; height:36px;
    border-radius:8px;
    display:inline-grid; place-items:center;
    cursor:pointer;
    background: rgba(14,18,29,0.06);
  }
  /* center-divider for mobile small spacing */
  @media (max-width: 576px) {
    .pm-service-card { padding: 18px; border-radius: 10px; }
    .pm-overlay { inset: 6%;}
  }

  /* subtle separation to ensure text stays crisp above dimmed bg */
  .pm-service-card h3, .pm-service-card p { text-shadow: 0 6px 22px rgba(2,6,23,0.45); }

/* ---------- Products dropdown (shared) ---------- */
.products-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 200px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1000;
  display: none;
  padding: 0;
  margin: 0;
  list-style: none;
}
.navbar-nav .nav-item { position: relative; }
.nav-item:hover > .products-dropdown,
.nav-item:focus-within > .products-dropdown { display: block; }
.products-dropdown .dropdown-item {
  padding: 10px 20px;
  color: #212529;
  text-decoration: none;
  display: block;
}
.products-dropdown .dropdown-item:hover { background: #f8f9fa; }
.products-dropdown .dropend { position: relative; }
.products-dropdown .dropend .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: 0;
  min-width: 180px;
  position: absolute;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: none;
}
.products-dropdown .dropend:hover > .dropdown-menu,
.products-dropdown .dropend:focus-within > .dropdown-menu { display: block; }
.products-dropdown .arrow-right {
  transition: transform 0.2s;
  margin-left: 6px;
  font-size: 0.9em;
  vertical-align: middle;
  display: inline-block;
  transform: rotate(0deg);
}
.products-dropdown .dropend:hover > .dropdown-item .arrow-right,
.products-dropdown .dropend:focus-within > .dropdown-item .arrow-right { transform: rotate(-90deg); }

.form-control.is-invalid ~ .error-message { display: block; 
}