body{overflow-x: hidden !important;}
/* Whatsapp-chat */
.btn-whatsapp-pulse {background: #25d366;color: white !important;position: fixed;bottom: 20px;   right: 17px;font-size: 40px;display: flex;justify-content: center;align-items: center;width: 0;height: 0;padding: 35px;text-decoration: none;border-radius: 50%;animation-name: pulse;animation-duration: 1.5s;animation-timing-function: ease-out;animation-iteration-count: infinite;   z-index: 999999;}
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
	}
	80% {
		box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
	}
}
/* ..................................................HOME........................................... */
/* Header */
.navbar-bg{background-color: #000;}
.navbar-bg img{ max-width: 200px;}
.nav-item .nav-link{color: #fff; font-size: 17px; font-weight: 400;   font-family: "Inter", sans-serif; padding: 0 0 0 40px !important;}
.nav-item .nav-link:hover{color: #489630;}
.navbar-nav .nav-link.active{color: #489630 !important;}
.dropdown-item{font-family: "Inter", sans-serif; font-weight: 500}
.dropdown-menu{margin-top: 33px !important;}
.dropdown-item{padding: 15px !important;}
.dropdown-item:focus, .dropdown-item:hover{color: #489630 !important; background-color:transparent !important;}
.dropdown-toggle::after { display: none !important;}
.dropdown-item p{margin-bottom: 0;}
.custom-dropdown .dropdown-menu { border-radius: 12px; background: #ffffff; backdrop-filter: blur(10px);}
.custom-dropdown .dropdown-item {  border-radius: 12px;  padding: 10px 12px;  transition: 0.3s;}
.custom-dropdown .dropdown-item i { font-size: 22px; color: #489630;}
.custom-dropdown .dropdown-item:hover { background: #f1f5f9; transform: translateX(5px);}
.navbar .nav-link.dropdown-toggle.show{ color: #489630 !important;}
.call{gap: 8px;}
.call i{color: #489630; font-size: 32px}
.call p{color: #fff; font-size: 17px; font-family: "Inter", sans-serif;   margin-bottom: 0; padding-top: 4px;}
/* Banner */
.home-banner{background-image: url(../images/home-banner.jpg); background-size: cover; overflow: hidden; background-repeat: no-repeat;}
.home-banner h1{  font-family: "Rethink Sans", sans-serif; font-size: 65px; font-weight: bold;   line-height: 74px; color: #fff; padding-top: 114px; padding-bottom: 30px;}
.home-banner p{font-family: "Inter", sans-serif; font-size: 17; font-weight: 400; line-height: 25px; color: #fff;padding-bottom: 20px;}
.home-banner a{text-decoration: none; display: inline-block; margin-bottom: 100px;}
.home-banner button { font-family: "Inter", sans-serif !important;   cursor: pointer;  font-weight: 600 !important;  transition: all 0.2s; padding: 15px 23px; border-radius: 100px !important; background: transparent; color: #fff; border: 2px solid #fff; display: flex; align-items: center; font-size: 17px !important; }
button:hover {  background: #489630;  border: 2px solid #489630;}
button > i { margin-top: 4px;  font-size: 22px;  margin-left: 8px;  transition: transform 0.3s ease-in-out;}
button:hover i { transform: translateX(5px);}
button:active { transform: scale(0.95);}
/* Features */
.features{background-color: #E7F1E4;}
.features .row{padding-top: 46px; padding-bottom: 46px;}
.features img{width: 49px; height: 49px;}
.features h6{font-size: 22px; font-weight: 500; font-family: "Rethink Sans", sans-serif;}
.features p{font-size: 17px; font-family: "Inter", sans-serif; line-height: 25px; margin-bottom: 0;}
/* Creating-outdoor-spaces */
.outdoor{margin-top: 100px;}
.outdoor .row .col-lg-5{padding-top: 30px;}
.outdoor h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif;}
.outdoor p{font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif; padding-top: 20px;}
.outdoor ul{padding-left: 0; padding-bottom: 10px;}
.outdoor li{list-style: none; font-size: 17px; font-family: "Inter", sans-serif; line-height: 42px;}
.outdoor a{text-decoration: none;}
.button-fill button { font-family: "Inter", sans-serif !important;   cursor: pointer;  font-weight: 500 !important;  transition: all 0.2s; padding: 15px 23px; border-radius: 100px !important; background: #021428; color: #fff;  display: flex; align-items: center; font-size: 17px !important; border: none; }
button:hover {  background: #489630;}
button > i { margin-top: 5px;  font-size: 22px;  margin-left: 8px;  transition: transform 0.3s ease-in-out;}
button:hover i { transform: translateX(5px);}
button:active { transform: scale(0.95);}
/* What-we-are-offering */
.offering{margin-top: 100px;}
.offering h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif; text-align: center;}
.offering p{font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif; padding-top: 20px; text-align: center; max-width: 880px;  margin: auto; padding-bottom: 40px;}
.service-img { position: relative;  overflow: hidden;}
.service-img img { width: 100%; height: 100%; object-fit: cover; display: block;}
.service-text {  position: absolute;  bottom: 40px;  left: 60px;  color: #fff;  font-size: 24px;  font-weight: 600; font-family: "Rethink Sans", sans-serif;}
.service-text { transition: 0.3s;}
.service-img:hover .service-text { transform: translateY(-7px);}
/* Process */
.process{margin-top: 100px; background-image: url(../images/section-bg.jpg); background-size: cover; background-repeat: no-repeat; overflow: hidden; background-attachment: fixed;}
.process h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif; text-align: center; color: #fff; padding-top: 100px;}
.process .row{padding-top: 60px; padding-bottom: 80px;}
.icon-box{ width: 90px; height: 90px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: auto;}
.icon-box img{ width: 55px; height: 55px; object-fit: contain;}
.process h5{font-size: 30px; font-weight: 500; font-family: "Rethink Sans", sans-serif; text-align: center; color: #fff; padding-top: 25px;}
.process p{font-size: 17px; color: #fff; line-height: 25px; text-align: center; font-family: "Inter", sans-serif; font-weight: 300; padding-top: 10px; }
.step-1, .step-2, .step-3 { position: relative; text-align: center;}
.step-1:not(:last-child)::after, .step-3:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -25px; width: 40px; height: 40px; background: url('../images/arrow-1.svg') no-repeat center;   background-size: contain;}
.step-2:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -25px; width: 40px; height: 40px; background: url('../images/arrow-2.svg') no-repeat center;   background-size: contain;}
.step-1::after, .step-2::after, .step-3::after { animation: moveArrow 1.5s infinite ease-in-out;}
@keyframes moveArrow {
    0% { transform: translateX(0); }
    50% { transform: translateX(5px); }
    100% { transform: translateX(0); }}
/* Our-recent-projects */
.home-projects{margin-top: 100px;}
.home-projects h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif;padding-bottom: 60px;}
.home-projects a{text-decoration: none;}
.home-projects img{width: 100%;}
.home-projects .row:first-child{padding-bottom: 25px;}
.gallery-img{  width: 100%;  border-radius: 24px;  cursor: pointer;  transition: 0.4s ease;}
.lightbox{ position: fixed; inset: 0; background: rgba(0,0,0,0.92); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: 0.4s ease; z-index: 9999;}
.lightbox.active{ opacity: 1; visibility: visible;}
.lightbox-content{ max-width: 50%; max-height: 85vh; border-radius: 24px; transform: scale(0.8); transition: 0.4s ease;}
.lightbox.active .lightbox-content{transform: scale(1);}
.close-lightbox{ position: absolute; top: 25px; right: 265px; color: #fff; font-size: 60px; cursor: pointer; transition: 0.3s ease;}
.close-lightbox:hover{ transform: rotate(90deg);}
.project-card{  position: relative;  overflow: hidden;  border-radius: 28px;  cursor: pointer;}
.project-card img{ width: 100%; display: block; border-radius: 28px; transition:  transform 0.7s ease,  filter 0.7s ease;}
.project-card::before{  content: "";  position: absolute;  inset: 0;  background: linear-gradient(  to top,  rgba(0,0,0,0.55), rgba(0,0,0,0.08) ); opacity: 0; transition: 0.5s ease; z-index: 1; border-radius: 28px;pointer-events: none;}
.gallery-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.7); width: 75px; height: 75px; background: rgba(255,255,255,0.18); backdrop-filter: blur(10px); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transition: 0.5s ease; z-index: 2;}
.gallery-icon i{ color: #fff; font-size: 32px;}
.project-card:hover img{ transform: scale(1.08); filter: brightness(1.05);}
.project-card:hover::before{ opacity: 1;}
.project-card:hover .gallery-icon{ opacity: 1; transform: translate(-50%, -50%) scale(1);}
.gallery-icon{  pointer-events: none;}
/* Faq */
.faq{margin-top: 100px;}
.faq h2{text-align: center; font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif;}
.faq-container { width: 60%; margin: auto; margin-top: 50px ;}
.faqs { background-color: #F4F4F4; color: black; border-radius: 12px;  margin: 30px 0;}
.question { font-family: "Inter", sans-serif; font-size:17px !important; font-weight: 500; padding: 26px 36px; position: relative; display: flex; align-items: center; cursor: pointer;}
.question::after { content: "\002B"; font-size: 2.2rem; position: absolute; right: 35px; transition: 0.2s;}
.question.active::after { transform: rotate(45deg);}
.answercont { max-height: 0; overflow: hidden; transition: 0.3s;}
.answer {padding: 0 35px 15px; font-family: "Inter", sans-serif; font-size:16px; line-height: 25px;}
.faq-1{background-color: #021428; color: white;}
/* Cta */
.cta-bg{background-image: url(../images/cta-bg.jpg); background-size: cover; background-repeat: no-repeat; overflow: hidden; margin-top: 100px;}
.cta-bg h2{text-align: center; color: #fff; font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif; padding-top: 80px;}
.cta-bg p{font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif; text-align: center; color: #fff; font-weight: 300; padding-top: 20px; padding-bottom: 15px;} 
.cta-bg a{text-decoration: none;display: flex; justify-content: center;  align-items: center; margin-bottom: 90px;}
.button-fill-cta button { font-family: "Inter", sans-serif !important;   cursor: pointer;  font-weight: 500 !important;  transition: all 0.2s; padding: 15px 23px; border-radius: 100px !important; background: #fff; color: #489630;  display: flex; align-items: center; font-size: 17px !important; border: none; }
button:hover {  background: #489630; color: #fff;}
/* Footer */
.footer-bg{background-color: #021428; color: #fff; padding-bottom: 40px;}
.footer-bg .row{padding-top: 90px;}
.footer-bg img{padding-bottom: 30px;}
.footer-bg p{color: #fff; font-size: 15px; line-height: 25px; font-family: "Inter", sans-serif; font-weight: 300}
.footer-bg a{text-decoration: none;}
.footer-bg h6{font-size: 20px; font-weight: 600;font-family: "Rethink Sans", sans-serif; padding-bottom: 10px}
.contact{padding-top: 20px;}
.contact p{margin-bottom: 7px;}
.footer-bg hr{margin-top: 50px; margin-bottom: 50px;}
.footer-bg i{font-size: 30px; color: #fff; }
/* ...................................................About-us........................................ */
/* Banner */
.about-banner{background-image: url(../images/about-banner.jpg); background-size: cover; background-repeat: no-repeat;overflow: hidden;}
.about-banner h1{text-align: center; color: #fff; font-size: 65px; font-weight: bold; font-family: "Rethink Sans", sans-serif; padding-top: 165px; padding-bottom: 165px;}
/* About */
.about{margin-top: 100px; }
.about .col-lg-6:first-child{padding-top: 50px;}
.about h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif; padding-bottom: 25px;}
.about p{font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif; }
/* Kpi */
.kpi{margin-top: 100px; background-color: #E7F1E4;}
.kpi .row{padding-top: 20px; padding-bottom: 20px;}
.kpi h5{font-size: 32px; font-weight: 500; font-family: "Rethink Sans", sans-serif;}
.kpi p{font-family: "Inter", sans-serif; font-size: 17px;}
.kpi .col-lg-3:last-child{border: none;}
.kpi-item { position: relative;display: flex; flex-direction: column; justify-content: center; min-height: 150px;}
.kpi-item:not(:last-child)::after {  content: ""; position: absolute; top: 50%; right: 0;  transform: translate(-40px, -50%); width: 1px; height: 70%; background: #a7c79d;}
/* Vision */
.vision{margin-top: 100px;}
.vision h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif; padding-bottom: 25px;}
.vision p{font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif;}
.vision-icon-box img{background-color: #CFE5C8; border-radius: 5px; padding: 5px;}
.vision h6{font-size: 20px; font-weight: 500; font-family: "Rethink Sans", sans-serif; padding-top: 19px; padding-bottom: 7px;}
.vision .row .col-lg-7{ padding-left: 76px; padding-top: 35px;}
.vision-sub-row{gap: 40px; padding-left: 15px; padding-top: 30px;}
.vision-sub-row .col-lg-5{background-color: #E3F1DF; border-radius: 12px; padding: 20px 18px 0;}
.vision-sub-row p{ padding-right: 7px;}
/* Why-choose */
.why-choose{margin-top: 100px; margin-bottom: 100px;}
.why-choose h2{text-align: center; font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif;}
.why-choose p{text-align: center; font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif; padding-top: 10px;}
.why-choose .row{padding-top: 40px;}
.why-choose-card{background-color: #E7F1E4; border-radius: 12px; padding: 35px 15px 25px;    height: 100%;  transition: 0.3s ease;}
.why-choose-card:hover{ transform: translateY(-6px);}
.why-choose img{margin: auto; display: block;}
.why-choose h6{text-align: center; font-size: 20px; font-weight: 500; font-family: "Rethink Sans", sans-serif; padding-top: 16px;}
.why-choose p{text-align: center; font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif;}
/* ..........................................Landscpaing-service.................................... */
/* Banner */
.landscaping-banner{background-image: url(../images/landscaping-banner.jpg); background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.landscaping-banner h1{color: #014008; font-size: 65px; font-weight: bold; font-family: "Rethink Sans", sans-serif; padding-top: 165px; padding-bottom: 20px;}
.landscaping-banner p{font-size: 17px; line-height: 25px; font-weight: 500;font-family: "Inter", sans-serif; color: #014008;  padding-bottom: 58px;}
.landscaping-banner .banner-feauters{background-color: #fff; padding: 30px 20px; border-radius: 12px; color: #014008; gap: 20px;margin-bottom: 60px;  opacity: 0.90;}
.banner-feauters i{ font-size: 50px;}
.banner-feauters h6{font-size: 20px; font-weight: 500; font-family: "Inter", sans-serif; padding-top: 2px;}
/* Service-intro */
.service-intro{margin-top: 100px;}
.service-intro h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif; padding-top: 50px; padding-bottom: 15px;}
.service-intro p{font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif;}
/* About-service */
.about-service{margin-top: 100px;}
.about-service h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif; padding-bottom: 20px;}
.about-service p{font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif;}
.solutions-card{background-color: #E3F1DF; padding: 17px 17px; border-radius: 12px; height: 100%;}
.solutions-card p{padding-top: 13px; margin-bottom: 0;}
.about-service .col-lg-6:last-child .row{gap: 6px;}
.about-service .col-lg-6:last-child{transform: translateX(90px);}
/* Service-process */
.service-process{background-image: url(../images/section-bg.jpg); background-size: cover; background-repeat: no-repeat; overflow: hidden; margin-top: 100px; color: #fff; padding-bottom: 100px;}
.service-process h2{font-size: 48px; font-weight: 600; font-family: "Rethink Sans", sans-serif; padding-bottom: 60px; padding-top: 90px;}
.service-process h4{font-size: 27px; font-weight: 500;font-family: "Inter", sans-serif;}
.service-process p{font-size: 17px; line-height: 25px; font-family: "Inter", sans-serif; font-weight: 300; padding-top: 5px; padding-right: 30px;}
.process-icon-box{ width: 105px; height: 105px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.process-icon-box img{ width: 100px; height: 100px; object-fit: contain;}
.service-process .row{padding-top: 30px;}
/* Faq */
.services-faq{margin-bottom: 100px;}
/* .............................................Swimming-pool-service................................. */
/* Banner */
.swimming-pool-banner{background-image: url(../images/swimming-pool-banner.jpg);background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.swimming-pool-banner h1{color: #021428; font-size: 65px; font-weight: bold; font-family: "Rethink Sans", sans-serif; padding-top: 165px; padding-bottom: 20px; line-height: 74px;}
.swimming-pool-banner p{font-size: 17px; line-height: 25px; font-weight: 500;font-family: "Inter", sans-serif; color: #021428;  padding-bottom: 58px;}
.swimming-pool-banner .banner-feauters{background-color: #fff; padding: 30px 20px; border-radius: 12px; color: #012652; gap: 20px;margin-bottom: 60px;  opacity: 0.90;}
/* ..........................................Technical-maintenance-service............................... */
/* Banner */
.technical-banner{background-image: url(../images/technical-maintenance-banner.jpg);background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.technical-banner h1{color: #fff; font-size: 65px; font-weight: bold; font-family: "Rethink Sans", sans-serif; padding-top: 165px; padding-bottom: 20px; line-height: 74px;}
.technical-banner p{font-size: 17px; line-height: 25px; font-weight: 500;font-family: "Inter", sans-serif; color: #fff;  padding-bottom: 58px;}
.technical-banner .banner-feauters{background-color: #fff; padding: 30px 20px; border-radius: 12px; color: #012652; gap: 20px;margin-bottom: 60px;  opacity: 0.90;}
/* Proccess */
.technical-proccess .process-icon-box img{width: 55px; height: 55px;}
/* ..........................................Pool-chiller-service............................... */
/* Banner */
.pool-chiller-banner{background-image: url(../images/pool-chiller-banner.jpg);background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.pool-chiller-banner h1{color: #021428; font-size: 65px; font-weight: bold; font-family: "Rethink Sans", sans-serif; padding-top: 165px; padding-bottom: 20px; line-height: 74px;}
.pool-chiller-banner p{font-size: 17px; line-height: 25px; font-weight: 500;font-family: "Inter", sans-serif; color: #021428;  padding-bottom: 58px;}
.pool-chiller-banner .banner-feauters{background-color: #fff; padding: 30px 20px; border-radius: 12px; color: #012652; gap: 20px;margin-bottom: 60px;  opacity: 0.90;}
.pool-chiller-banner .banner-feauters h6{padding-top: 13px;}
/* .....................................................Projects..................................... */
/* Banner */
.projects-banner{background-image: url(../images/projects-banner.jpg); background-size: cover; background-repeat: no-repeat; overflow: hidden;}
.projects-banner h1{text-align: center; color: #fff; font-size: 65px; font-weight: bold; font-family: "Rethink Sans", sans-serif; padding-top: 165px; padding-bottom: 165px;}
/* Projects-tab */
.project-tabs{margin-top: 100px;}
.project-tabs .nav-tabs{border-bottom: 0 !important;}
.project-tabs .nav-tabs .nav-link.active{background-color: #021428 !important; color: #fff !important; border: 0 !important;}
.project-tabs .nav-tabs .nav-link{padding: 10px 27px; font-family: "Inter", sans-serif !important; font-size: 17px !important; font-weight: 400 !important; background-color: #E3F1DF !important; color: black !important; border-radius: 30px;}
.nav-tabs{gap: 20px;}
.projects{padding-top: 58px; padding-bottom: 100px;}
.projects .row{padding-bottom: 25px;}
.projects img{width: 100%;}
.nav-tabs .nav-link{ border: none; outline: none; box-shadow: none; transition: 0.3s ease;}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:active,
.nav-tabs .nav-link.active{ transform: none !important; box-shadow: none !important; outline: none !important;}
.project-tabs .lightbox-content{ max-width: 50% !important; min-height: 80vh;}
/* ......................................................Catalogues...................................... */
/* Catalogues */
.catalogues{margin-top: 100px; margin-bottom: 50px;}
.catalogue-card img{width: 100%;}
.catalogue-row{padding-bottom: 50px;}
.catalogue-card{border: 1px solid #b0b0b0 !important; padding: 10px; border-radius: 12px;}
.catalogues h5{font-size: 25px; font-weight: 500; font-family: "Rethink Sans", sans-serif; padding-top: 20px;}
.catalogues p{font-size: 15px; line-height: 25px; font-family: "Inter", sans-serif;  color: #4B4C4C; padding-right: 10px;}
.catalogues-features span{font-size: 17px; font-weight: 500; font-family: "Inter", sans-serif; padding-bottom: 10px; display: inline-block;}
.catalogues-features i{font-size: 21px;}
.catalogues-features p{font-size: 15px; font-family: "Inter", sans-serif; color: #000;}
.download-btn{font-family: "Inter", sans-serif;display: inline-flex;  align-items: center;  gap: 18px;  padding: 15px 23px; background: #001B44; color: #fff; text-decoration: none; border-radius: 60px;  font-size: 17px; font-weight: 500; transition: 0.3s ease; overflow: hidden; margin-top: 15px; margin-bottom: 10px;}
.download-btn:hover{ background: #00285f; color: white;}
.download-btn i{ font-size: 24px; animation: downloadMove 1.5s infinite;}
@keyframes downloadMove {
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    40%{
        transform: translateY(6px);
        opacity: 0.7;
    }
    60%{
        transform: translateY(-2px);
        opacity: 1;
    }
    100%{
        transform: translateY(0);
        opacity: 1;
    }}
/* ......................................................Conatct...................................... */
/* Conatct-info */
.contact-wrapper { margin-top: 100px; background: #fff; border-radius: 12px; padding: 36px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);}
.contact-info { background: #dfe8d8; border-radius: 12px; padding: 60px 70px; height: 100%;}
.info-item { display: flex; align-items: flex-start; gap: 24px; margin-bottom: 50px;}
.info-item:last-child {  margin-bottom: 0;}
.info-item i { font-size: 32px; color: #000; margin-top: 5px;}
.info-item h5 { font-size: 25px; font-weight: 700; margin-bottom: 12px; color: #000; font-family: "Inter", sans-serif;}
.info-item p { font-size: 20px; color: #000; margin-bottom: 10px; line-height: 1.5; font-family: "Inter", sans-serif;}
.contact-wrapper .col-lg-7:last-child{padding-top: 30px;}
.contact-form label {font-family: "Inter", sans-serif; font-size: 15px; margin-bottom: 14px; color: #4B4C4C;}
.form-control {height: 60px;border-radius: 5px; border: 1px solid #d6d6d6; padding: 20px; font-size: 18px; box-shadow: none;}
textarea.form-control {height: 116px;resize: none;}
.form-control:focus {border-color: #021428;box-shadow: none;}
.send-btn { background: #021428; color: #fff; border: none; padding: 16px 50px; border-radius: 50px; font-size: 17px;transition: 0.3s ease;}
.send-btn:hover {background-color:#021428 !important ; border: none;}
/* Map */
.map{margin-top: 100px; padding-left: 0 !important; padding-right: 0 !important;padding: 0; line-height: 0;}

/* //////////////////////////////////////////RESPONSIVE//////////////////////////////////// */
/* HOME */
@media (min-width:0) and (max-width:575.98px){
    .navbar-bg .container{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar-toggler{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar .container-fluid{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar-brand img{width: 160px;}
    .navbar-bg{position: fixed; z-index: 9999999;}
    .navbar-nav{margin-top: 11px; margin-bottom: 20px !important;}
    .nav-item .nav-link{padding: 20px 0 0 0 !important;}
    .navbar :focus:not(:focus-visible){outline: none !important;}
    .navbar button:hover{background-color: transparent; border: none !important;}
    .navbar-toggler:focus{box-shadow: none !important;}
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;}
    .home-banner{background-image: url(../images/home-mobile-banner.jpg); background-size: cover; overflow: hidden; background-repeat: no-repeat;}
    .home-banner{padding-top: 50px;}
    .home-banner h1{  font-size: 46px;   line-height: 56px;}
    .home-banner h1 br, .home-banner p br, .features p br, .outdoor h2 br, .process h2 br, .process p br, .cta-bg h2 br, .cta-bg p br{display: none;}
    .features .row{gap: 30px}
    .outdoor, .offering, .process, .home-projects, .faq, .cta-bg{margin-top: 75px;}
    .outdoor h2, .offering h2, .process h2, .home-projects h2, .faq h2, .cta-bg h2{  font-size: 36px;}
    .offering .row{gap: 20px;}
    .step-1:not(:last-child)::after, .step-2:not(:last-child)::after, .step-3:not(:last-child)::after{display: none;}
    .process .row{gap: 20px;}
    .home-projects h2{  padding-bottom: 15px;}
    .button-fill span{text-wrap: nowrap;}
    .home-projects .row{gap: 22px;}
    .project-heading{  display: flex;  flex-direction: column;  align-items: flex-start;}
    .project-heading .button-fill{margin-bottom: 30px;}
    .close-lightbox{top: 119px; right: 13px;}
    .lightbox-content{max-width: 90%;}
    .faq-container{width: 100%;}
    .question{  padding: 26px 20px;}
    .answer{  padding: 10px 20px;}
    .faqs{  margin: 20px 0;}
    .footer-bg .row{gap: 20px;}
    .footer-bg .me-3{margin-right: 6px !important;}
}
@media (min-width:576px) and (max-width:767.98px){
    .navbar-bg .container{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar-toggler{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar .container-fluid{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar-nav{margin-top: 11px; margin-bottom: 20px !important;}
    .nav-item .nav-link{padding: 20px 0 0 0 !important;}
    .navbar :focus:not(:focus-visible){outline: none !important;}
    .navbar button:hover{background-color: transparent; border: none !important;}
    .navbar-toggler:focus{box-shadow: none !important;}
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;}
    .home-banner h1 br, .home-banner p br, .features p br, .outdoor h2 br, .process h2 br, .process p br, .cta-bg h2 br, .cta-bg p br{display: none;}
    .home-banner h1{  font-size: 51px;  line-height: 64px;}
    .features .row{gap: 30px}
    .outdoor h2, .offering h2, .process h2, .home-projects h2, .faq h2, .cta-bg h2{  font-size: 45px;}
    .offering .row{gap: 30px;}
    .step-1:not(:last-child)::after, .step-2:not(:last-child)::after, .step-3:not(:last-child)::after{display: none;}
    .process .row{gap: 30px;}
    .button-fill span{text-wrap: nowrap;}
    .home-projects h2{  padding-bottom: 16px;}
    .project-heading{  display: flex;  flex-direction: column;  align-items: flex-start;}
    .project-heading .button-fill{margin-bottom: 40px;}
    .home-projects .row{gap: 22px;}
    .projects-main-home{display: grid; grid-template-columns: 2fr 2fr; gap: 20px;}
    .home-projects .row:first-child  {padding-bottom: 0;}  
    .home-projects .row:last-child{padding-top: 0;}
    .lightbox-content{ max-width: 92%;}
    .close-lightbox{ font-size: 42px; top: 55px; right: 25px;}
    .faq-container{width: 100%;}
    .footer-bg .row{gap: 20px;}
}
@media (min-width:768px) and (max-width:991.98px){
    .navbar-bg .container{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar-toggler{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar .container-fluid{padding-left: 0 !important; padding-right: 0 !important;}
    .navbar-nav{margin-top: 11px; margin-bottom: 20px !important;}
    .nav-item .nav-link{padding: 20px 0 0 0 !important;}
    .navbar :focus:not(:focus-visible){outline: none !important;}
    .navbar button:hover{background-color: transparent; border: none !important;}
    .navbar-toggler:focus{box-shadow: none !important;}
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;}
    .offering .row .col-lg-4:last-child{padding-top: 25px}
    .step-2:not(:last-child)::after{display: none;}
    .home-projects .row{gap: 22px;}
    .projects-main-home{display: grid; grid-template-columns: 2fr 2fr; gap: 20px;}
    .home-projects .row:last-child{padding-top: 0;}
    .home-projects .row:first-child  {padding-bottom: 0;} 
    .lightbox-content{ max-width:80%;} 
    .close-lightbox{top: -3px; right: 75px;}
    .faq-container{width: 100%;}
}
@media (min-width:992px) and (max-width:1199.98px){
    .nav-item .nav-link{  padding: 0 0 0 30px !important; font-size: 15px;}
    .call i{font-size: 27px;}
    .call p{font-size: 15px;}
    .outdoor h2 br{display: none;}
    .outdoor h2{font-size: 40px;}
    .outdoor .row .col-lg-5{padding-top: 0;}
    .service-text{  left: 40px;}
    .step-1:not(:last-child)::after, .step-2:not(:last-child)::after, .step-3:not(:last-child)::after{display: none;}
    .close-lightbox{top: 49px;  right: 244px;}
    .faq-container{width: 80%;}
}
@media (min-width:1200px) and (max-width:1399.98px){
    .faq-container{width: 80%;}
}
/* ABOUT-US */
@media (min-width:0) and (max-width:575.98px){
    .about-banner {padding-top: 50px;}
    .about-banner{background-image: url(../images/about-mobile-banner.jpg); background-size: cover; overflow: hidden; background-repeat: no-repeat;}
    .about-banner h1{  font-size: 46px;   padding-top: 122px;  padding-bottom: 122px;}
    .about, .kpi, .vision, .why-choose{margin-top: 75px;}
    .about h2, .vision h2, .why-choose h2{font-size: 40px;}
    .about h2, .vision h2{  padding-bottom: 7px;}
    .about h2 br, .why-choose p br{display: none;}
    .about .col-lg-6:last-child{order: 1;}
    .about .col-lg-6:first-child{padding-top: 20px; order: 2;}
    .kpi-item:not(:last-child)::after{display: none;}
    .kpi-item{  min-height: 117px;}
    .vision .row .col-lg-7{padding-left: 15px;}
    .vision-sub-row{padding-right: 20px;}
    .why-choose .row {  padding-top: 24px; gap: 20px;}
    .why-choose{margin-bottom: 75px;}
}
@media (min-width:576px) and (max-width:767.98px){
    .about-banner h1{font-size: 51px;  padding-top: 120px; padding-bottom: 120px;}
    .about .col-lg-6:last-child{order: 1;}
    .about .col-lg-6:first-child{padding-top: 20px; order: 2;}
    .kpi, .why-choose{margin-top: 83px;}
    .kpi-item:not(:last-child)::after{display: none;}
    .kpi-item{  min-height: 117px;}
    .vision .row .col-lg-7{padding-left: 10px;}
    .vision p br, .why-choose p br{display: none !important;}
    .why-choose .row {  padding-top: 24px; gap: 20px;}
}
@media (min-width:768px) and (max-width:991.98px){
    .about .col-lg-6:last-child{order: 1; }
    .about .float-end{float: left !important;}
    .about .col-lg-6:first-child{padding-top: 20px; order: 2;}
    .vision .row .col-lg-7{padding-left: 10px;}
    .vision-sub-row{gap: 20px;}
    .why-choose p br{display: none;}
    .why-choose .col-lg-3{padding-bottom: 20px;}
}
@media (min-width:992px) and (max-width:1199.98px){
    .about .col-lg-6:first-child{padding-top: 0;}
    .about h2{padding-bottom: 15px;}
    .kpi-item:not(:last-child)::after{  transform: translate(-4px, -50%);}
    .vision .row .col-lg-7{  padding-left: 31px; padding-top: 0;}
    .vision p br, .why-choose p br{display: none;}
    .vision-sub-row{  padding-top: 7px;}
    .vision h2{  padding-bottom: 8px;}
}
@media (min-width:1200px) and (max-width:1399.98px){
    .vision .row .col-lg-7 {padding-top: 0;}
    .vision h2{padding-bottom: 7px;}
    .vision-sub-row{padding-top: 24px;}
    .why-choose-card p br{display: none;}
}
/* LANDSCAPING-SERVICE */
@media (min-width:0) and (max-width:575.98px){
    .landscaping-banner{background-image: url(../images/landscaping-mobile-banner.jpg); background-size: cover; overflow: hidden; background-repeat: no-repeat;}
    .landscaping-banner {padding-top: 55px;}
    .landscaping-banner h1{font-size: 46px;   padding-top: 106px;     padding-bottom: 22px; color: white;}
    .landscaping-banner p br, .banner-feauters h6 br{display: none;}
    .banner-feauters{margin-left: 3px !important; margin-right: 3px !important; gap: 10px;}
    .banner-feauters i{font-size: 30px;}
    .banner-feauters h6{font-size: 17px;}
    .landscaping-banner p{padding-bottom: 30px; color: white; font-weight: 400;}
    .service-intro h2{padding-top: 21px;}
    .service-intro h2, .about-service h2, .service-process h2 {font-size: 37px;}
    .about-service, .service-process{margin-top: 75px;}
    .about-service .col-lg-6:last-child{  transform: translateX(0);}
    .about-service .col-lg-6:last-child .row{gap: 15px;}
    .about-service .py-4{padding-top: 15px !important; padding-bottom: 15px !important;}
    .solutions-card p br{display: none;}
    .service-process h2 br{display: none;}
    .service-process h4{  font-size: 22px;}
    .service-process .row{gap: 30px;}
    .service-process .row:last-child{  padding-top: 39px;}
    .service-process p{padding-right: 0;}
    .question{ padding-right: 58px;}
}
@media (min-width:576px) and (max-width:767.98px){
    .landscaping-banner h1{font-size: 51px;  padding-top: 120px;    padding-bottom: 8px;}
    .landscaping-banner p{padding-bottom: 17px;}
    .banner-feauters i{font-size: 30px;}
    .banner-feauters h6{font-size: 17px;}
    .banner-feauters h6 br{display: none;}
    .landscaping-banner .banner-feauters{ display: flex; flex-wrap: wrap; gap: 16px;}
    .banner-feauters .col-lg{ width: calc(50% - 8px); flex: 0 0 calc(50% - 8px);}
    .service-intro h2, .about-service h2, .service-process h2 {font-size: 45px;}
    .about-service{  margin-top: 80px;}
    .about-service .col-lg-6:last-child{  transform: translateX(0);}
    .about-service .col-lg-6:last-child .row{gap: 25px;}
    .solutions-card p br{display: none;}
    .service-process .row{gap: 30px;}
    .service-process .row:last-child{  padding-top: 39px;}
    .question{ padding-right: 81px;}
}
@media (min-width:768px) and (max-width:991.98px){
    .landscaping-banner h1{padding-top: 115px;}
    .landscaping-banner p{padding-bottom: 23px;}
    .banner-feauters h6 br{display: none;}
    .banner-feauters h6{padding-top: 5px;}
    .banner-feauters i{font-size: 41px;}
    .landscaping-banner .banner-feauters{ display: flex; flex-wrap: wrap; gap: 16px;}
    .banner-feauters .col-lg{ width: calc(50% - 8px); flex: 0 0 calc(50% - 8px);}
    .about-service .col-lg-6:last-child{  transform: translateX(0); padding-top: 30px;}
    .service-process .row{gap: 30px;}
    .service-process .row:last-child{  padding-top: 39px;}
}
@media (min-width:992px) and (max-width:1199.98px){
    .landscaping-banner h1{  padding-top: 108px;}
    .landscaping-banner p{  padding-bottom: 18px;}
    .banner-feauters i{font-size: 40px;}
    .banner-feauters h6{font-size: 15px;}
    .service-intro h2{padding-top: 0;}
    .about-service h2{  font-size: 46px;}
    .about-service .col-lg-6:last-child{  transform: translateX(60px);}
    .solutions-card p br{display: none;}
}
@media (min-width:1200px) and (max-width:1399.98px){
    .service-intro h2{padding-top: 0;}
}
/* SWIMMING-POOL-SERVICE */
@media (min-width:0) and (max-width:575.98px){
    .swimming-pool-banner{background-image: url(../images/swimming-pool-mobile-banner.jpg); background-size: cover; overflow: hidden; background-repeat: no-repeat; padding-top: 55px;}
    .swimming-pool-banner h1{font-size: 46px;   padding-top: 106px;     padding-bottom: 9px; color: #fff;   line-height: 59px;}
    .swimming-pool-banner p{color: #fff; padding-bottom: 30px; color: white; font-weight: 400;}
    .swimming-pool-banner p br, .banner-feauters h6 br{display: none;}
}
@media (min-width:576px) and (max-width:767.98px){
    .swimming-pool-banner h1{font-size: 51px;  padding-top: 116px;    padding-bottom: 8px; line-height: 63px;}
    .swimming-pool-banner p{padding-bottom: 17px;}
    .banner-feauters i{font-size: 30px;}
    .banner-feauters h6{font-size: 17px;}
    .banner-feauters h6 br{display: none;}
    .swimming-pool-banner .banner-feauters{ display: flex; flex-wrap: wrap; gap: 16px;}
    .banner-feauters .col-lg{ width: calc(50% - 8px); flex: 0 0 calc(50% - 8px);}
}
@media (min-width:768px) and (max-width:991.98px){
    .swimming-pool-banner h1{padding-top: 115px;}
    .swimming-pool-banner p{padding-bottom: 23px;}
    .banner-feauters h6 br{display: none;}
    .banner-feauters h6{padding-top: 5px;}
    .banner-feauters i{font-size: 41px;}
    .swimming-pool-banner .banner-feauters{ display: flex; flex-wrap: wrap; gap: 16px;}
    .banner-feauters .col-lg{ width: calc(50% - 8px); flex: 0 0 calc(50% - 8px);}
}
@media (min-width:992px) and (max-width:1199.98px){
    .swimming-pool-banner h1{  padding-top: 110px;   padding-bottom: 13px;}
    .swimming-pool-banner p{  padding-bottom: 30px;}
    .banner-feauters h6 br{display: none;}
}
/* TECHNICAIL-MAINTENANCE-SERVICE */
@media (min-width:0) and (max-width:575.98px){
    .technical-banner{background-image:url(../images/technical-maintenance-mobile-banner.jpg); background-size: cover; overflow: hidden; background-repeat: no-repeat; padding-top: 55px;}
    .technical-banner h1{font-size: 46px;   padding-top: 106px;     padding-bottom: 9px; color: #fff;   line-height: 59px;}
    .technical-banner p{color: #fff; padding-bottom: 30px;  font-weight: 400;}
    .technical-banner p br, .banner-feauters h6 br{display: none;}
}
@media (min-width:576px) and (max-width:767.98px){
    .technical-banner h1 br{display: none;}
    .technical-banner h1{font-size: 51px;  padding-top: 116px;    padding-bottom: 8px; line-height: 63px;}
    .technical-banner p{padding-bottom: 17px;}
    .technical-banner .banner-feauters{ display: flex; flex-wrap: wrap; gap: 16px;}
}
@media (min-width:768px) and (max-width:991.98px){
    .technical-banner h1{padding-top: 115px;}
    .technical-banner p{padding-bottom: 23px;}
    .technical-banner .banner-feauters{ display: flex; flex-wrap: wrap; gap: 16px;}
}
@media (min-width:992px) and (max-width:1199.98px){
    .technical-banner h1{  padding-top: 113px;  padding-bottom: 17px;}
    .technical-banner p{padding-bottom: 30px;}
}
/* POOL-CHILLER-SERVICES */
@media (min-width:0) and (max-width:575.98px){
    .pool-chiller-banner{background-image:url(../images/pool-chiller-mobile-banner.jpg); background-size: cover; overflow: hidden; background-repeat: no-repeat; padding-top: 55px;}
    .pool-chiller-banner h1{font-size: 46px;   padding-top: 106px;     padding-bottom: 9px; color: #fff;   line-height: 59px;}
    .pool-chiller-banner p{color: #fff; padding-bottom: 30px;font-weight: 400;}
    .pool-chiller-banner p br, .banner-feauters h6 br{display: none;}
}
@media (min-width:576px) and (max-width:767.98px){
    .pool-chiller-banner h1 br{display: none;}
    .pool-chiller-banner h1{font-size: 51px;  padding-top: 116px;    padding-bottom: 8px; line-height: 63px;}
    .pool-chiller-banner p{padding-bottom: 17px;}
    .pool-chiller-banner .banner-feauters{ display: flex; flex-wrap: wrap; gap: 16px;}
}
@media (min-width:768px) and (max-width:991.98px){
    .pool-chiller-banner h1{padding-top: 115px;}
    .pool-chiller-banner p{padding-bottom: 23px;}
    .pool-chiller-banner .banner-feauters{ display: flex; flex-wrap: wrap; gap: 16px;}
}
@media (min-width:992px) and (max-width:1199.98px){
    .pool-chiller-banner h1{  padding-top: 110px;}
    .pool-chiller-banner p{padding-bottom: 30px;}
}
/* PROJECTS */
@media (min-width:0) and (max-width:575.98px){
    .projects-banner h1{padding-top: 193px;font-size: 46px;padding-bottom: 96px;}
    .project-tabs .nav-tabs{justify-content: center;}
    .projects { padding-top: 48px;}
    .project-tabs{margin-top: 75px;}
    .projects .row{gap: 25px;}
    .projects{padding-bottom: 75px;}
    .project-tabs .close-lightbox{top: 90px; right: 13px;}
    .project-tabs .lightbox-content{max-width: 90% !important; min-height: 50vh;}
}
@media (min-width:576px) and (max-width:767.98px){
    .projects .row{gap: 25px;}
    .projects{padding-bottom: 75px; }
    .projects .row{gap: 14px;}
    .projects { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;}
    .project-card img{border-radius: 0 !important;}
    .gallery-icon{width: 50px; height: 50px;}
    .project-tabs .close-lightbox{top: 123px; right: 31px;}
    .project-tabs .lightbox-content{max-width: 90% !important; min-height: 50vh;}
}
@media (min-width:768px) and (max-width:991.98px){
    .projects .row{gap: 25px;}
    .projects .row{gap: 14px; padding-bottom: 0;}
    .projects { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;}
    .project-card img{border-radius: 0 !important;}
    .gallery-icon{width: 50px; height: 50px;}    
    .project-tabs .close-lightbox{top: 99px; right: 118px;}
    .project-tabs .lightbox-content{max-width: 100% !important; min-height: 50vh;}
}
@media (min-width:992px) and (max-width:1199.98px){
    .project-tabs .close-lightbox{top: 90px; right: 172px;}
    .project-tabs .lightbox-content{max-width: 100% !important; min-height: 60vh;}
}
@media (min-width:1200px) and (max-width:1399.98px){
    .project-tabs .close-lightbox{top: 90px; right: 279px;}
    .project-tabs .lightbox-content{max-width: 100% !important; min-height: 60vh;}
}
/* CATALOGUES */
@media (min-width:0) and (max-width:575.98px){
    .catalogues{margin-top: 75px;}
    .catalogues h5{  font-size: 20px;}
    .catalogue-row{gap: 20px; padding-bottom: 20px;}
}
@media (min-width:576px) and (max-width:767.98px){
    .catalogue-row{gap: 20px; padding-bottom: 20px;}
}
@media (min-width:768px) and (max-width:991.98px){
    .catalogues p{padding-right: 0;}
}
@media (min-width:992px) and (max-width:1199.98px){
    .catalogues h5{  font-size: 20px;}
    .catalogues p{padding-right: 0;}
}
@media (min-width:1200px) and (max-width:1399.98px){
    .catalogues h5{font-size: 22px;}
}
/* CONTACT */
@media (min-width:0) and (max-width:575.98px){
    .contact-wrapper{margin-top: 70px;   padding: 20px;}
    .contact-info{padding: 20px;}
    .info-item{  margin-bottom: 27px;}
    .info-item i{font-size: 37px;}
    .info-item h5{font-size: 20px; padding-top: 6px;}
    .info-item p{font-size: 17px;}
    .contact-wrapper .col-lg-7:last-child{padding-top: 0;}
}
@media (min-width:992px) and (max-width:1199.98px){
    .contact-info{padding: 50px 30px;}
    .info-item p{font-size: 17px;}
    .info-item i{font-size: 34px;}
    .info-item h5{font-size: 20px; padding-top: 5px;}
    .contact-wrapper .col-lg-7:last-child{padding-top: 0;}
}
@media (min-width:1200px) and (max-width:1399.98px){
    .contact-info{padding: 50px 30px;}
    .contact-wrapper .col-lg-7:last-child{padding-top: 15px;}
}