/* prevent any element bleeding past the viewport from creating a page-wide
   horizontal scrollbar */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* navbar */
.header-area {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}
/* subtle dark gradient behind the transparent navbar so the links stay readable
   over BOTH light and dark slider images, while the slider still shows through */
.header-area::before {
    content: "";
    position: absolute;
    inset: 0;
    bottom: auto;
    height: 140px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: -1;
}
.navbar {
    position: relative;
    width: 100%;
    padding: 20px 25px;
    transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
/* sticky state on scroll : transparent -> solid turquoise (site brand color) */
.navbar.navbar-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    padding: 8px 25px;
    background-color: #53b8b3;
    box-shadow: 0 4px 18px rgba(19, 34, 32, 0.18);
}
/* opt-in : solid turquoise bar from the start (pages with no hero image),
   white text/buttons — same look as the scrolled state but NOT fixed */
.navbar.navbar-solid {
    background-color: #53b8b3;
    box-shadow: 0 4px 18px rgba(19, 34, 32, 0.18);
}
.navbar.navbar-solid .navbar-collapse .navbar-nav .nav-link,
.navbar.navbar-solid .navbar-collapse .nav-item .nav-link-phone {
    color: #ffffff;
}
.navbar.navbar-solid .navbar-collapse .navbar-nav .nav-link::after {
    background-color: #ffffff;
}
.navbar.navbar-solid .navbar-collapse .navbar-nav .nav-item.active .nav-link,
.navbar.navbar-solid .navbar-collapse .navbar-nav .nav-link:hover {
    color: #E2F5F4;
}
.navbar.navbar-solid .navbar-collapse .nav-item .nav-link-phone {
    border-color: #ffffff;
}
.navbar.navbar-solid .navbar-collapse .nav-item .nav-link-phone:hover {
    background-color: #ffffff;
    color: #077570;
    border-color: #ffffff;
}
.navbar .navbar-brand {
    height: 110px;
    max-width: 175px;
    transition: height 0.35s ease, max-width 0.35s ease;
}
.navbar.navbar-scrolled .navbar-brand {
    height: 70px;
    max-width: 120px;
}
.navbar .navbar-brand .logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}
.navbar .navbar-collapse .navbar-nav {
    align-items: center;
    margin-right: 40px;
}
/* RTL navbar : same layout & sizes, mirrored — logo on the right, links flow
   from the right, phone button keeps its gap on the correct side */
.navbar[dir="rtl"] .navbar-brand .logo {
    object-position: right center;
}
/* ml-auto (from bootstrap) pushes the links the wrong way under RTL — cancel it
   and push them to the LEFT instead so they sit next to the right-hand logo */
.navbar[dir="rtl"] .navbar-collapse .navbar-nav.ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}
.navbar[dir="rtl"] .navbar-collapse .nav-item .nav-link-phone {
    margin-left: 0;
    margin-right: 16px;
}
.navbar[dir="rtl"] .navbar-collapse .navbar-nav .nav-link::after {
    transform-origin: right;
}
/* default (top of page, transparent bar) : white links + soft shadow read well
   over the dark gradient on BOTH light and dark slider images */
.navbar .navbar-collapse .navbar-nav .nav-link {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 8px 16px;
    margin: 0 2px;
    position: relative;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: color 0.25s ease;
}
/* on scroll the turquoise bar appears -> links turn white */
.navbar.navbar-scrolled .navbar-collapse .navbar-nav .nav-link {
    color: #ffffff;
}
/* animated underline under the links */
.navbar .navbar-collapse .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 2px;
    height: 2px;
    background-color: #ffffff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
}
.navbar.navbar-scrolled .navbar-collapse .navbar-nav .nav-link::after {
    background-color: #ffffff;
}
.navbar .navbar-collapse .navbar-nav .nav-item.active .nav-link::after,
.navbar .navbar-collapse .navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}
.navbar .navbar-collapse .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-collapse .navbar-nav .nav-link:hover {
    color: #E2F5F4;
}
.navbar.navbar-scrolled .navbar-collapse .navbar-nav .nav-item.active .nav-link,
.navbar.navbar-scrolled .navbar-collapse .navbar-nav .nav-link:hover {
    color: #E2F5F4;
}
/* don't draw underline on the phone button */
.navbar .navbar-collapse .navbar-nav .nav-link-phone::after {
    display: none;
}
/* default phone button : white outline on the transparent bar so it reads over
   the dark gradient on any slider image */
.navbar .navbar-collapse .nav-item .nav-link-phone {
    border: 2px solid #ffffff;
    border-radius: 50px;
    padding: 9px 24px;
    margin-left: 16px;
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.navbar .navbar-collapse .nav-item .nav-link-phone:hover {
    background-color: #ffffff;
    color: #077570;
    text-shadow: none;
    transform: translateY(-2px);
}
/* when scrolled, phone button turns white to read on the turquoise bar */
.navbar.navbar-scrolled .navbar-collapse .nav-item .nav-link-phone {
    border-color: #ffffff;
    color: #ffffff;
}
.navbar.navbar-scrolled .navbar-collapse .nav-item .nav-link-phone:hover {
    background-color: #ffffff;
    color: #077570;
    border-color: #ffffff;
}

/* slider */
/* fixed 5:3 ratio on every screen, so the hero keeps the same shape and any
   image (big or small) fills it identically — height scales with the width */
.page-area .slider .carousel .carousel-inner {
    width: 100%;
    aspect-ratio: 5 / 3;
    overflow: hidden;
}
.page-area .slider .carousel .carousel-inner .carousel-item {
    position: relative;
    width: 100%;
    height: 100%;
}
.page-area .slider .carousel .carousel-inner .carousel-item .img-wrap {
    width: 100%;
    height: 100%;
}
.page-area .slider .carousel .carousel-inner .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption {
    position: absolute;
    top: 60%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    right: auto;
    width: 90%;
    max-width: 900px;
    text-align: center;
    color: black;
    letter-spacing: 1px;
    line-height: 1.2;
}
.page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title {
    font-family: 'Dancing';
    font-weight: bold;
    font-size: 44px;
    margin-bottom: 8px;
    color: #ffffff;
    letter-spacing: 2px;
    -webkit-text-stroke: 1px #000000;
    text-stroke: 1px #000000;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    paint-order: stroke fill;
}
.page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption .carousel-desc {
    font-weight: 800;
    font-size: 68px;
    line-height: 1.1;
    margin-bottom: 0;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: 1px;
    -webkit-text-stroke: 2px #000000;
    text-stroke: 2px #000000;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
    paint-order: stroke fill;
}
/* entrance animation for the active slide's caption (opacity only, so it
   never fights the translate(-50%,-50%) centering on the caption) */
.page-area .slider .carousel .carousel-item.active .carousel-caption .carousel-title {
    animation: caption-fade 0.8s ease both;
}
.page-area .slider .carousel .carousel-item.active .carousel-caption .carousel-desc {
    animation: caption-fade 0.8s ease 0.15s both;
}
@keyframes caption-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.page-area .slider .carousel .indicators-img {
   width: 100%;
   position: absolute;
   bottom: 0;
}
.page-area .slider .carousel .carousel-indicators {
    position: absolute;
    bottom: 8%;
}


/* professional-cleaning */
.page-area .sections-area .professional-cleaning {
    text-align: center;
    margin-top: 70px;
    margin-bottom: 100px;
}
.page-area .sections-area .professional-cleaning .row {
    margin-right: 0;
}
.page-area .sections-area .professional-cleaning .img-area {
    width: 200px;
}
.page-area .sections-area .professional-cleaning .img-area .img {
    max-width: 100%;
}
.page-area .sections-area .professional-cleaning .contact-area {
    margin-top: 60px;
    text-align: start;
}
.page-area .sections-area .professional-cleaning .contact-area .professional-welcome {
    color: rgb(240, 117, 127);
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
}
.page-area .sections-area .professional-cleaning .contact-area .professional-carpet {
    font-size: 38px;
    color: rgb(4, 94, 100);
    text-transform: capitalize;
    font-weight: 800;
    letter-spacing: .1px;
    line-height: 46px;
    margin-bottom: 18px;
}
.page-area .sections-area .professional-cleaning .contact-area .professional-desc {
    color: #6f8b89;
    line-height: 27px;
    letter-spacing: 0.6px;
    font-family: 'Acme-Regular';
}
.page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn {
    font-size: 80% !important;
    padding: 14px 28px;
    color: rgb(255, 255, 255);
    border: 2px solid transparent;
    border-radius: 50px;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn:hover {
    transform: translateY(-2px);
}
/* unified brand palette : deep / mid turquoise + pink accent */
.page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn-fisrt {
    background-color: #077570;
}
.page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn-second {
    background-color: #53b8b3;
}
.page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn-three {
    background-color: rgb(240, 117, 127);
}
.page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn-fisrt:hover {
    color: #077570;
    border-color: #077570;
    background-color: rgb(255, 255, 255);
}
.page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn-second:hover {
    color: #53b8b3;
    border-color: #53b8b3;
    background-color: rgb(255, 255, 255);
}
.page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn-three:hover {
    color: rgb(240, 117, 127);
    border-color: rgb(240, 117, 127);
    background-color: rgb(255, 255, 255);
}


/* services */
.page-area .sections-area .services .first-services-img {
    position: relative;
    width: 100%;
    top: 0;
}
.page-area .sections-area .services .services-content {
    text-align: center;
    background-color: #E2F5F4;
    padding-bottom: 70px;
}
.page-area .sections-area .services .services-content .services-title {
    color: rgb(240, 117, 127);
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
}
.page-area .sections-area .services .services-content .services-desc {
    font-size: 36px;
    color: rgb(4, 94, 100);
    text-transform: capitalize;
    font-weight: 800;
    letter-spacing: .1px;
    line-height: 44px;
    margin-bottom: 22px;
}
/* short turquoise divider under the heading */
.page-area .sections-area .services .services-content .services-desc::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background-color: #53b8b3;
    margin: 18px auto 0;
}
.page-area .sections-area .services .services-content .cards {
    padding: 5px 15px;
    text-align: center;
}
.page-area .sections-area .services .services-content .cards .card {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    font-size: 15px;
    border: none;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(7, 117, 112, 0.10);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.page-area .sections-area .services .services-content .cards .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(7, 117, 112, 0.18);
}
/* uniform image height across all slides */
.page-area .sections-area .services .services-content .cards .card .card-img-top {
    height: 240px;
    object-fit: cover;
    border-radius: 0;
}
.page-area .sections-area .services .services-content .cards .card .card-body {
    padding: 18px;
}
.page-area .sections-area .services .services-content .cards .card .card-text {
    font-weight: bold;
    color: #077570;
    margin-bottom: 0;
    font-size: 17px;
}
.page-area .sections-area .services .services-content .btn-services {
    padding: 16px 40px;
    font-size: 15px;
    font-weight: 700;
    margin-top: 40px;
    text-align: center;
    border-radius: 50px;
    border: 2px solid rgb(240, 117, 127);
    color: rgb(240, 117, 127);
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.page-area .sections-area .services .services-content .cards .card {
    position: relative;
}
/* hover overlay : turquoise wash + description, image stays underneath */
.page-area .sections-area .services .services-content .cards .card .innerSpanJquery {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 56px;            /* leave the white "Service" footer visible */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    background: linear-gradient(180deg, rgba(7, 117, 112, 0.86), rgba(83, 184, 179, 0.86));
    z-index: 2;
    animation: sd-fade-in 0.3s ease;
}
@keyframes sd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.page-area .sections-area .services .services-content .btn-services:hover {
    color: white;
    background-color: rgb(240, 117, 127);
    transform: translateY(-2px);
}
.page-area .sections-area .services .services-content .cards .card .card-text:hover {
    color: #53b8b3;
}
/* services slider : add a little vertical room + brand-colored dots */
.page-area .sections-area .services .services-content .services-carousel {
    padding: 10px 0 0;
}
.page-area .sections-area .services .services-content .services-carousel .owl-dots {
    text-align: center;
    margin-top: 30px;
}
.page-area .sections-area .services .services-content .services-carousel .owl-dots .owl-dot span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #bfe0dd;
    transition: background-color 0.25s ease, width 0.25s ease;
}
.page-area .sections-area .services .services-content .services-carousel .owl-dots .owl-dot.active span {
    width: 28px;
    border-radius: 6px;
    background-color: #077570;
}
.page-area .sections-area .services .services-content .services-carousel .owl-dots .owl-dot:hover span {
    background-color: #53b8b3;
}


/* carpet */
.page-area .sections-area .carpet {
    position: relative;
    text-align: start;
}
.page-area .sections-area .carpet .carpet-img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.page-area .sections-area .carpet .carpet-info {
    position: absolute;
    top: 10%;
    padding: 150px 200px;
}
.page-area .sections-area .carpet .carpet-title {
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
    color: rgb(240, 117, 127);
}
.page-area .sections-area .carpet .carpet-sub-title {
    font-size: 44px;
    font-weight: 800;
    line-height: 52px;
    color: rgb(255, 255, 255);
    margin: 16px 0;
}
.page-area .sections-area .carpet .carpet-desc {
    font-size: 17px;
    line-height: 26px;
    color: rgb(235, 235, 235);
}
.page-area .sections-area .carpet .carpet-btn {
    margin-top: 18px;
    border-radius: 50px;
    color: rgb(255, 255, 255);
    font-weight: 700;
    padding: 14px 26px;
    background-color: rgb(240, 117, 127);
    border: 2px solid transparent;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.page-area .sections-area .carpet .carpet-btn .carpet-btn-icon {
    font-size: 28px;
    padding: 5px;
    vertical-align: middle;
}
.page-area .sections-area .carpet .carpet-btn:hover {
    color: rgb(240, 117, 127);
    background-color: rgb(255, 255, 255);
    transform: translateY(-2px);
}


/* process */
.page-area .sections-area .process {
    margin: 70px 0;
    text-align: center;
}
.page-area .sections-area .process .process-title {
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
    color: rgb(240, 117, 127);
}
.page-area .sections-area .process .process-desc {
    font-size: 36px;
    font-weight: 800;
    line-height: 44px;
    color: rgb(4, 94, 100);
    margin: 12px 0 0;
}
/* short turquoise divider under the heading */
.page-area .sections-area .process .process-desc::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background-color: #53b8b3;
    margin: 18px auto 40px;
}
.page-area .sections-area .process .process-steps .proces {
    padding: 20px 15px;
}
/* icon sits in a soft turquoise circle, centered */
.page-area .sections-area .process .process-steps .proces .proces-icon-eara {
    margin: 0 auto 26px;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #E2F5F4;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.page-area .sections-area .process .process-steps .proces:hover .proces-icon-eara {
    background-color: #cdeceb;
    transform: translateY(-6px);
}
.page-area .sections-area .process .process-steps .proces .proces-icon-eara .proces-icon {
    width: 62%;
}
/* .page-area .sections-area .process .process-steps .proces .proces-no {
    font-size: 20px;
    color: white;
    border-radius: 50px;
    background-color: rgb(240, 117, 127);
    padding: 5px 10px;
} */
.page-area .sections-area .process .process-steps .proces .proces-title {
    font-size: 19px;
    font-weight: bold;
    line-height: 28px;
    color: rgb(4, 94, 100);
    margin: 16px 0 0;
}
.page-area .sections-area .process .process-steps .proces .proces-title:hover {
    color: rgb(240, 117, 127);
}

/* ---- projects (clients) circle slider : reuses the .proces circle look ---- */
.page-area .sections-area .process .projects-carousel {
    margin-top: 10px;
}
.page-area .sections-area .process .projects-carousel .proces {
    display: block;
    padding: 20px 10px;
    text-align: center;
    text-decoration: none;
}
.page-area .sections-area .process .projects-carousel .proces .proces-icon-eara {
    margin: 0 auto 20px;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;                 /* clip the photo into a circle */
    background-color: #E2F5F4;
    border: 4px solid #E2F5F4;
    box-shadow: 0 10px 24px rgba(7, 117, 112, 0.12);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.page-area .sections-area .process .projects-carousel .proces:hover .proces-icon-eara {
    transform: translateY(-6px);
    border-color: #53b8b3;
    box-shadow: 0 16px 30px rgba(7, 117, 112, 0.22);
}
.page-area .sections-area .process .projects-carousel .proces .proces-icon-eara .proces-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;                /* fill the circle with the client photo */
}
.page-area .sections-area .process .projects-carousel .proces .proces-title {
    font-size: 18px;
    font-weight: bold;
    line-height: 26px;
    color: rgb(4, 94, 100);
    margin: 0;
    transition: color 0.25s ease;
}
.page-area .sections-area .process .projects-carousel .proces:hover .proces-title {
    color: rgb(240, 117, 127);
}
/* owl dots in the site palette */
.page-area .sections-area .process .projects-carousel .owl-dots {
    text-align: center;
    margin-top: 22px;
}
.page-area .sections-area .process .projects-carousel .owl-dots .owl-dot span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #cfe6e4;
    transition: background-color 0.25s ease, width 0.25s ease;
}
.page-area .sections-area .process .projects-carousel .owl-dots .owl-dot.active span {
    width: 28px;
    border-radius: 6px;
    background-color: #077570;
}
.page-area .sections-area .process .projects-carousel .owl-dots .owl-dot:hover span {
    background-color: #53b8b3;
}


/* faq */
.page-area .sections-area .faq .first-faq-img {
    position: relative;
    width: 100%;
    top: 0;
}
.page-area .sections-area .faq .faq-footer-img {
    width: 100%;
}
.page-area .sections-area .faq .faq-content {
    text-align: center;
    background-color: #E2F5F4;
    padding: 60px 70px 30px 70px;
}
.page-area .sections-area .faq .faq-content .faq-video-title {
    font-size: 50px;
    font-weight: bold;
    color: rgb(4, 94, 100);
    text-align: start;
}
.page-area .sections-area .faq .faq-content .faq-video {
    /* fixed 4:3 frame so an uploaded video OR image always fills the same box */
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(7, 117, 112, 0.18);
    background-color: #000000;
}
.page-area .sections-area .faq .faq-content .faqs .faq-card {
    margin-bottom: 14px;
}
.page-area .sections-area .faq .faq-content .faqs .faq-card .faq-title {
    text-align: start;
    margin-bottom: 0;
    color: rgb(4, 94, 100);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
}
.page-area .sections-area .faq .faq-content .faqs .faq-card .card-body {
    font-size: 14px;
}
.page-area .sections-area .faq .faq-content .faqs .faq-card .card-header {
    padding: 10px;
    background-color: #ffffff;
    border: 1px solid #d5ecea;
    border-radius: 50px;
    transition: box-shadow 0.25s ease;
}
.page-area .sections-area .faq .faq-content .faqs .faq-card .card-header:hover {
    box-shadow: 0 8px 20px rgba(7, 117, 112, 0.12);
}
.page-area .sections-area .faq .faq-content .faqs .faq-card .faq-title .badge {
    margin: 0 18px 0 12px;
    padding: 12px;
    color: #ffffff;
    background-color: #53b8b3;
    border-radius: 50px;
}


/* prices */
.page-area .sections-area .prices {
    text-align: center;
    margin-bottom: 100px;
}
.page-area .sections-area .prices .prices-title {
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
    color: rgb(240, 117, 127);
    margin-bottom: 0;
}
.page-area .sections-area .prices .prices-sub-title {
    font-size: 50px;
    font-weight: bold;
    line-height: 60px;
    color: rgb(4, 94, 100);
    margin-bottom: 20px;
}
.page-area .sections-area .prices .prices-content .card {
    padding: 0;
    margin-right: 15px;
    margin-bottom: 20px;
    position: relative;
}
.page-area .sections-area .prices .prices-content .card .price-info {
    position: absolute;
    padding: 50px 80px;
}
.page-area .sections-area .prices .prices-content .card .card-img-top {
    height: 60%;
    width: 100%;
}
.page-area .sections-area .prices .prices-content .card .price-info .price-cost {
    font-size: 60px;
    font-weight: bold;
}
.page-area .sections-area .prices .prices-content .card .price-info .price-cost .monthly {
    opacity: .5;
    font-size: 30px;
} 
.page-area .sections-area .prices .prices-content .card .card-body {
    padding: 25px 45px;
    background-color: #E2F5F4;
}
.page-area .sections-area .prices .prices-content .card .card-body .price-desc {
    color: rgba(27,104,95,0.6);
}
.page-area .sections-area .prices .prices-content .card .card-body .order-btn {
    padding: 0 30px;
    border-radius: 50px;
    text-transform: uppercase;
    background-color: rgb(160, 231, 223);
}

/* fresh */
.page-area .sections-area .fresh {
    padding: 100px 0;
}
.page-area .sections-area .fresh .fresh-img-area img {
    max-width: 100%;
    border-radius: 16px;
}
.page-area .sections-area .fresh .fresh-info-area {
    padding-left: 10px;
}
.page-area .sections-area .fresh .fresh-info-area .fresh-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 48px;
    color: rgb(4, 94, 100);
    margin: 0 0 8px;
}
/* short turquoise divider under the heading */
.page-area .sections-area .fresh .fresh-info-area .fresh-title::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background-color: #53b8b3;
    margin: 16px 0 22px;
}
/* in RTL keep the divider aligned to the right, under the start of the text */
.page-area .sections-area .home-rtl .fresh .fresh-info-area .fresh-title::after {
    margin-right: 0;
    margin-left: auto;
}
/* RTL : the heading + text start from the right edge */
.page-area .sections-area .home-rtl .fresh .fresh-info-area {
    padding-left: 0;
    padding-right: 10px;
    text-align: right;
}
.page-area .sections-area .home-rtl .fresh .fresh-info-area .fresh-title,
.page-area .sections-area .home-rtl .fresh .fresh-info-area .fresh-desc {
    text-align: right;
}
.page-area .sections-area .fresh .fresh-info-area .fresh-desc {
    font-size: 15px;
    line-height: 26px;
    color: #6f8b89;
}



/* footer */
.page-area .sections-area .footer .footer-content {
    top: 0;
    padding-top: 120px;
    color: rgb(196, 192, 192);
    background-color: #1e3633f2;
}
.page-area .sections-area .footer .footer-first-img {
    max-width: 100%;
}
.page-area .sections-area .footer .footer-second-img {
    max-width: 100%;
    display: block;
    margin-top: -1px; /* close the white seam between footer and wave */
}
.page-area .sections-area .footer .footer-content .footer-logo {
    width: auto;
    height: 90px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    /* margin-bottom: 35px; */
}
.page-area .sections-area .footer .footer-content .head-list {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 50px;
    padding-left: 25px;
}
/* RTL footer : same layout & sizes, just mirrored to read right-to-left */
.footer[dir="rtl"] .footer-content {
    text-align: right;
}
.footer[dir="rtl"] .footer-content .footer-logo {
    object-position: right center;
}
.footer[dir="rtl"] .footer-content .head-list {
    padding-left: 0;
    padding-right: 25px;
}
.footer[dir="rtl"] .footer-content .footer-socials {
    justify-content: flex-start;
}
.page-area .sections-area .footer .footer-content .head-list-contact {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 50px;
}
.page-area .sections-area .footer .footer-content .list-erea {
    padding-bottom: 50px;
}
/* footer quick links : soft light color that turns turquoise (brand) on hover */
.page-area .sections-area .footer .footer-content .content-list a {
    color: rgb(196, 192, 192);
    text-decoration: none;
    transition: color 0.25s ease, padding 0.25s ease;
}
.page-area .sections-area .footer .footer-content .content-list a:hover {
    color: #53b8b3;
}
.page-area .sections-area .footer .footer-content .footer-icon {
    padding: 10px;
    border-radius: 50px;
    background-color: #132220f2;
}
.page-area .sections-area .footer .footer-content .footer-info {
    font-size: 12px;
}
/* social icons in the "Follow Us" column */
.page-area .sections-area .footer .footer-content .footer-socials {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}
.page-area .sections-area .footer .footer-content .footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #132220f2;
    color: #ffffff;
    font-size: 16px;
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.page-area .sections-area .footer .footer-content .footer-socials a:hover {
    background-color: #53b8b3;
    transform: translateY(-3px);
}
.page-area .sections-area .footer .last-erea {
    position: relative;
}
.page-area .sections-area .footer .last-erea .all-reserved {
    position: absolute;
    left: 10%;
    bottom: 1%;
    color: #000000;
    direction: rtl;
}

/* ---- tablet range (768–991px) : fill the gap so sections don't break ---- */
@media (min-width: 768px) and (max-width: 991px) {
    /* professional cleaning : stack image above text, centered */
    .page-area .sections-area .professional-cleaning .img-area {
        margin: 0 auto;
    }
    .page-area .sections-area .professional-cleaning .contact-area {
        text-align: center;
        margin-top: 30px;
    }
    /* services cards : 3 across but tighter */
    .page-area .sections-area .services .services-content .cards {
        padding: 5px 10px;
    }
    /* process : 2 per row on tablet */
    .page-area .sections-area .process .process-steps .proces {
        padding: 20px 10px;
    }
    /* carpet overlay : pull padding in so text fits the photo */
    .page-area .sections-area .carpet .carpet-info {
        padding: 60px 70px;
    }
    .page-area .sections-area .carpet .carpet-sub-title {
        font-size: 38px;
        line-height: 44px;
    }
    /* faq : video no longer needs a big right margin once stacked */
    .page-area .sections-area .faq .faq-content {
        padding: 50px 40px 30px;
    }
    .page-area .sections-area .faq .faq-content .faq-video {
        margin: 0 0 30px 0;
    }
    /* fresh : center the stacked image + text */
    .page-area .sections-area .fresh .fresh-info-area {
        padding-left: 0;
        margin-top: 24px;
    }
}


/* contacts-form */
.page-area .sections-area .contacts-form {
    padding: 130px 0;
    text-align: center;
}
.page-area .sections-area .contacts-form .contact-errors {
    list-style: none;
    padding: 12px 18px;
    margin: 0 0 18px;
    text-align: start;
    background-color: #fdecea;
    border: 1px solid #f5c2c0;
    border-radius: 10px;
    color: #b3261e;
}
.page-area .sections-area .contacts-form .title {
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
    color: rgb(240, 117, 127);
}
.page-area .sections-area .contacts-form .sub-title {
    font-size: 50px;
    font-weight: bold;
    line-height: 60px;
    color: rgb(4, 94, 100);
    margin-bottom: 20px;
}
.page-area .sections-area .contacts-form .form-area {
    text-align: start;
}
.page-area .sections-area .contacts-form .form-area .inputs-form {
    width: 100%;
    margin-bottom: 16px;
    padding: 14px 22px;
    border-radius: 50px;
    border: 1px solid #d5ecea;
    background-color: #f3fafa;
    color: rgb(4, 94, 100);
    font-size: 15px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.page-area .sections-area .contacts-form .form-area .inputs-form::placeholder {
    color: #9fbab8;
}
/* clear focus state in the brand color */
.page-area .sections-area .contacts-form .form-area .inputs-form:focus {
    border-color: #53b8b3;
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(83, 184, 179, 0.15);
}
/* textarea : rounded box (not a pill) with room to type */
.page-area .sections-area .contacts-form .form-area textarea.inputs-form {
    border-radius: 22px;
    min-height: 140px;
    resize: vertical;
}
.page-area .sections-area .contacts-form .form-area .input-area {
    text-align: center;
    padding: 16px 12px;
}
.page-area .sections-area .contacts-form .form-area .input-area button {
    padding: 13px 42px;
    border: none;
    border-radius: 50px;
    background-color: #077570;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 22px rgba(7, 117, 112, 0.28);
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.page-area .sections-area .contacts-form .form-area .input-area button:hover {
    background-color: #53b8b3;
    transform: translateY(-2px);
}
/* contact info cards under the form */
.page-area .sections-area .contacts-form .form-area .contact-info-row {
    margin-top: 50px;
}
.page-area .sections-area .contacts-form .form-area .contact-card {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    background-color: #f3fafa;
    border: 1px solid #e6f3f2;
    border-radius: 14px;
    padding: 20px 22px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.page-area .sections-area .contacts-form .form-area .contact-card:hover {
    box-shadow: 0 12px 28px rgba(7, 117, 112, 0.14);
    transform: translateY(-3px);
}
.page-area .sections-area .contacts-form .form-area .contact-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #53b8b3;
    color: #ffffff;
    font-size: 17px;
}
.page-area .sections-area .contacts-form .form-area .contact-info {
    font-size: 14px;
    line-height: 22px;
    color: #6f8b89;
    margin-bottom: 0;
}
/* contacts form on phones : smaller heading, breathing room, stacked info */
@media (max-width: 767px) {
    .page-area .sections-area .contacts-form {
        padding: 110px 18px 70px;
    }
    .page-area .sections-area .contacts-form .title {
        font-size: 24px;
    }
    .page-area .sections-area .contacts-form .sub-title {
        font-size: 34px;
        line-height: 42px;
        margin-bottom: 28px;
    }
    .page-area .sections-area .contacts-form .form-area .inputs-form {
        padding: 13px 20px;
        font-size: 14px;
    }
    .page-area .sections-area .contacts-form .form-area .input-area button {
        width: 100%;
        max-width: 320px;
    }
    /* stack the contact cards with even spacing */
    .page-area .sections-area .contacts-form .form-area .contact-info-row {
        margin-top: 30px;
    }
    .page-area .sections-area .contacts-form .form-area .contact-info-row > [class*="col-"] {
        margin-bottom: 14px;
    }
}


/* abouts */
.page-area .sections-area .abouts {
    padding: 130px 0;
    text-align: center;
}
/* widen this section's container beyond the default bootstrap max-width so the
   cards spread across more of the page */
.page-area .sections-area .abouts > .container {
    max-width: 1400px;
}
/* heading */
.page-area .sections-area .abouts .abouts-head {
    max-width: 820px;
    margin: 0 auto;
}
.page-area .sections-area .abouts .title-badge {
    display: inline-block;
    background-color: #e7f5f4;
    color: #077570;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.page-area .sections-area .abouts .sub-title {
    font-size: 50px;
    font-weight: 800;
    line-height: 60px;
    color: rgb(4, 94, 100);
    margin-bottom: 18px;
}
/* short turquoise divider */
.page-area .sections-area .abouts .sub-title::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background-color: #53b8b3;
    margin: 18px auto 0;
}
.page-area .sections-area .abouts .desc {
    line-height: 2;
    font-size: 17px;
    color: #6f8b89;
    margin: 0 auto 20px;
    max-width: 760px;
    text-align: center;
    direction: rtl;
}
/* highlight the brand name inside body text */
.page-area .sections-area .abouts .desc .brand-highlight {
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(120deg, #077570, #53b8b3);
    padding: 2px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(7, 117, 112, 0.25);
    white-space: nowrap;
}
/* number cards (inside the slider) */
.page-area .sections-area .abouts .abouts-carousel {
    margin-top: 55px;
    padding-top: 28px;
}
/* The Owl stage clips with overflow:hidden, which would cut off the number
   badge that pokes above each card (top:-28px) and the 8px hover lift. Instead
   of switching overflow to visible (which forces a scrollbar), we keep the box
   clipped and just pad the top, then pull it back up with a negative margin so
   the badge fits inside the visible area without shifting the layout or adding
   any scrollbar. */
.page-area .sections-area .abouts .abouts-carousel .owl-stage-outer {
    padding-top: 44px;
    margin-top: -44px;
}
.page-area .sections-area .abouts .abouts-area {
    padding: 0 6px;
}
.page-area .sections-area .abouts .about-card {
    height: 100%;
    background-color: #ffffff;
    border: 1px solid #e6f3f2;
    border-radius: 16px;
    padding: 50px 24px 30px;
    text-align: center;
    position: relative;
    margin-top: 28px;
    box-shadow: 0 10px 30px rgba(7, 117, 112, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.page-area .sections-area .abouts .about-card:hover {
    transform: translateY(-8px);
    border-color: #cfe6e4;
    box-shadow: 0 22px 45px rgba(7, 117, 112, 0.16);
}
/* number badge overlapping the top edge of the card */
.page-area .sections-area .abouts .about-no {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgb(240, 117, 127);
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(240, 117, 127, 0.35);
    transition: background-color 0.3s ease;
}
.page-area .sections-area .abouts .about-card:hover .about-no {
    background-color: #077570;
    box-shadow: 0 8px 18px rgba(7, 117, 112, 0.35);
}
.page-area .sections-area .abouts .about-title {
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #077570;
}
.page-area .sections-area .abouts .about-desc {
    font-size: 15px;
    line-height: 1.9;
    color: #6f8b89;
    margin-bottom: 0;
    direction: rtl;
}
.page-area .sections-area .abouts .about-title {
    direction: rtl;
}
/* carousel dots in the site brand colors */
.page-area .sections-area .abouts .abouts-carousel .owl-dots {
    text-align: center;
    margin-top: 34px;
}
.page-area .sections-area .abouts .abouts-carousel .owl-dots .owl-dot span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #cfe6e4;
    transition: background-color 0.25s ease, width 0.25s ease;
}
.page-area .sections-area .abouts .abouts-carousel .owl-dots .owl-dot.active span {
    width: 28px;
    border-radius: 6px;
    background-color: #077570;
}
.page-area .sections-area .abouts .abouts-carousel .owl-dots .owl-dot:hover span {
    background-color: #53b8b3;
}
/* tablet & phone */
@media (max-width: 991px) {
    .page-area .sections-area .abouts .abouts-carousel {
        margin-top: 40px;
    }
}
@media (max-width: 767px) {
    .page-area .sections-area .abouts {
        padding: 90px 18px 70px;
    }
    .page-area .sections-area .abouts .sub-title {
        font-size: 34px;
        line-height: 42px;
    }
    .page-area .sections-area .abouts .desc {
        font-size: 15px;
        line-height: 26px;
    }
}




/* services-page */
.page-area .sections-area .services-page {
    padding: 70px 0;
}
.page-area .sections-area .services-page .first-services-img {
    position: relative;
    width: 100%;
    top: 0;
}
.page-area .sections-area .services-page .services-content {
    text-align: center;
    padding-bottom: 70px;
    /* padding-left: 8%; */
}
.page-area .sections-area .services-page .services-content .services-title {
    color: rgb(206, 3, 20);
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
}
.page-area .sections-area .services-page .services-content .services-desc {
    font-size: 40px;
    color: rgb(4, 94, 100);
    text-transform: capitalize;
    font-weight: bold;
    letter-spacing: .1px;
    line-height: 50px;
    margin-bottom: 25px;
}
.page-area .sections-area .services-page .services-content .cards {
    padding: 5px 40px;
    text-align: center;
}
.page-area .sections-area .services-page .services-content .cards .row .card {
    width: 100%;
    margin-left: 20px;
    margin-bottom: 15px;
    padding-right: 0;
    padding-left: 0;
    font-size: 15px;
}
.page-area .sections-area .services-page .services-content .cards .card .card-text-href {
    text-decoration: none;
    color: black;
}
.page-area .sections-area .services-page .services-content .cards .card .card-text {
    font-weight: bold;
}
.page-area .sections-area .services-page .services-content .cards .card-services {
    position: relative;
    overflow: hidden;
}
/* توحيد ارتفاع الصورة لربط الطبقة بها */
.page-area .sections-area .services-page .services-content .cards .card .card-img-top {
    height: 240px;
    object-fit: cover;
}
.page-area .sections-area .services-page .services-content .cards .card .innerSpanJquery {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 240px;
    margin: 0;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: rgba(4, 94, 100, 0.85);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    z-index: 2;
    animation: fadeOverlay 0.3s ease;
}
@keyframes fadeOverlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.page-area .sections-area .services-page .services-content .cards .card .card-text:hover {
    color: rgb(71, 221, 196);
}



/* prices */
.page-area .sections-area .plans {
    text-align: center;
    padding: 100px 0;
}
.page-area .sections-area .plans .plans-title {
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
    color: rgb(240, 117, 127);
    margin-bottom: 0;
}
.page-area .sections-area .plans .plans-sub-title {
    font-size: 50px;
    font-weight: bold;
    line-height: 60px;
    color: rgb(4, 94, 100);
    margin-bottom: 20px;
}
.page-area .sections-area .plans .plans-content .card {
    padding: 0;
    margin-right: 15px;
    margin-bottom: 20px;
    position: relative;
}
.page-area .sections-area .plans .plans-content .record-plans {
    padding-right: 0;
    padding-left: 0;
}
.page-area .sections-area .plans .plans-content .card .price-info {
    position: absolute;
    padding: 50px 80px;
}
.page-area .sections-area .plans .plans-content .card .card-img-top {
    height: 200px;
    width: 100%;
}
.page-area .sections-area .plans .plans-content .card .price-info .price-cost {
    font-size: 60px;
    font-weight: bold;
}
.page-area .sections-area .plans .plans-content .card .price-info .price-cost .monthly {
    opacity: .5;
    font-size: 30px;
} 
.page-area .sections-area .plans .plans-content .card .card-body {
    padding: 25px 45px;
    background-color: #E2F5F4;
}
.page-area .sections-area .plans .plans-content .card .card-body .price-desc {
    color: rgba(27,104,95,0.6);
}
.page-area .sections-area .plans .plans-content .card .card-body .order-btn {
    padding: 0 30px;
    border-radius: 50px;
    text-transform: uppercase;
    background-color: rgb(160, 231, 223);
}


/* service */
.page-area .sections-area .service {
    padding: 130px 0;
    text-align: center;
}
.page-area .sections-area .service .title {
    font-size: 30px;
    font-family: 'Dancing';
    font-weight: bold;
    color: rgb(240, 117, 127);
}
.page-area .sections-area .service .sub-title {
    font-size: 50px;
    font-weight: bold;
    line-height: 60px;
    color: rgb(4, 94, 100);
    margin-bottom: 10px;
}
.page-area .sections-area .service .desc {
    line-height: 20px;
    letter-spacing: 1.1px;
    font-size: 17px;
    color: #95b2af;
    margin-bottom: 20px;
}
.page-area .sections-area .service .service-data-area {
    padding: 50px 0;
    text-align: start;
}
.page-area .sections-area .service .service-data-area .data-title {
    font-size: 30px;
    font-weight: bold;
    line-height: 60px;
    color: rgb(4, 94, 100);
    margin-bottom: 5px;
}
.page-area .sections-area .service .service-data-area .list-ul {
    list-style-type: none;
    padding-left: 10px;
}
.page-area .sections-area .service .service-data-area .list-ul .li-area {
    color: #95b2af;
    margin-bottom: 8px;
}
.page-area .sections-area .service .service-data-area .list-ul .li-area .list-icon {
    font-size: 15px;
    margin-right: 10px;
}

/* service details page : title - info - base img - description x2 - imgs x2 */
.page-area .sections-area .service-details {
    padding: 150px 0 110px;
}
/* breadcrumb */
.page-area .sections-area .service-details .sd-breadcrumb {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 45px;
}
.page-area .sections-area .service-details .sd-breadcrumb a {
    color: #95b2af;
    text-decoration: none;
    transition: color 0.25s ease;
}
.page-area .sections-area .service-details .sd-breadcrumb a:hover {
    color: #077570;
}
.page-area .sections-area .service-details .sd-breadcrumb i {
    color: #cdddda;
    font-size: 12px;
    margin: 0 9px;
}
.page-area .sections-area .service-details .sd-breadcrumb .current {
    color: rgb(4, 94, 100);
}
/* title + info */
.page-area .sections-area .service-details .service-head {
    text-align: center;
    margin-bottom: 50px;
}
.page-area .sections-area .service-details .sd-title {
    margin-bottom: 16px;
}
/* small title as a pill badge */
.page-area .sections-area .service-details .sd-title-badge {
    display: inline-flex;
    align-items: center;
    background-color: #e7f5f4;
    color: #077570;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 50px;
}
.page-area .sections-area .service-details .sd-title-badge i {
    color: #53b8b3;
    margin-right: 9px;
    font-size: 14px;
}
.page-area .sections-area .service-details .sd-info {
    font-size: 52px;
    font-weight: 800;
    line-height: 60px;
    letter-spacing: -0.5px;
    color: rgb(4, 94, 100);
    margin-bottom: 0;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
/* short turquoise divider under the title */
.page-area .sections-area .service-details .sd-info::after {
    content: "";
    display: block;
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background-color: #53b8b3;
    margin: 22px auto 0;
}
/* quick info row : duration / price / guarantee / rating */
.page-area .sections-area .service-details .sd-meta {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.page-area .sections-area .service-details .sd-meta li {
    display: inline-flex;
    align-items: center;
    background-color: #f3fafa;
    border: 1px solid #e0f0ef;
    border-radius: 50px;
    padding: 9px 20px;
    color: rgb(4, 94, 100);
    font-weight: 600;
    font-size: 15px;
}
.page-area .sections-area .service-details .sd-meta li i {
    color: #53b8b3;
    margin-right: 9px;
    font-size: 15px;
}
/* RTL : icon sits to the right of the text, so move the gap to the left */
.home-rtl .service-details .sd-meta li i {
    margin-right: 0;
    margin-left: 9px;
}
/* base img : large hero image */
.page-area .sections-area .service-details .sd-base-img {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(7, 117, 112, 0.22);
    margin-bottom: 60px;
}
.page-area .sections-area .service-details .sd-base-img img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.page-area .sections-area .service-details .sd-base-img:hover img {
    transform: scale(1.04);
}
/* soft turquoise wash at the bottom of the hero for depth */
.page-area .sections-area .service-details .sd-base-img::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(to top, rgba(4, 94, 100, 0.35), rgba(4, 94, 100, 0));
    pointer-events: none;
}
/* description blocks */
.page-area .sections-area .service-details .sd-description {
    background-color: #f3fafa;
    border-left: 5px solid #53b8b3;
    border-radius: 10px;
    padding: 35px 40px;
    margin-bottom: 35px;
}
.page-area .sections-area .service-details .sd-description-alt {
    border-left-color: rgb(240, 117, 127);
}
.page-area .sections-area .service-details .sd-desc-title {
    font-size: 26px;
    font-weight: bold;
    color: rgb(4, 94, 100);
    margin-bottom: 14px;
}
.page-area .sections-area .service-details .sd-desc {
    line-height: 28px;
    letter-spacing: 0.6px;
    font-size: 17px;
    color: #6f8b89;
    margin-bottom: 0;
}
/* feature list inside the second description */
.page-area .sections-area .service-details .sd-list {
    list-style: none;
    padding-left: 0;
    margin: 22px 0 0;
}
.page-area .sections-area .service-details .sd-list li {
    color: #6f8b89;
    font-size: 16px;
    margin-bottom: 12px;
}
.page-area .sections-area .service-details .sd-list .sd-list-icon {
    color: #53b8b3;
    margin-right: 12px;
}
/* RTL : flip the accent border, list padding/icon and text alignment so the
   service description blocks read from the right */
.home-rtl .service-details .sd-description {
    border-left: 0;
    border-right: 5px solid #53b8b3;
    text-align: right;
}
.home-rtl .service-details .sd-description-alt {
    border-right-color: rgb(240, 117, 127);
}
.home-rtl .service-details .sd-list {
    padding-left: 0;
    padding-right: 0;
}
.home-rtl .service-details .sd-list .sd-list-icon {
    margin-right: 0;
    margin-left: 12px;
}
/* image galleries */
.page-area .sections-area .service-details .sd-gallery {
    margin-top: 55px;
    background-color: #f3fafa;
    border: 1px solid #e6f3f2;
    border-radius: 18px;
    padding: 50px 40px 40px;
}
/* gallery heading : badge + title + sub */
.page-area .sections-area .service-details .sd-gallery-head {
    text-align: center;
    margin-bottom: 38px;
}
.page-area .sections-area .service-details .sd-gallery-badge {
    display: inline-block;
    background-color: #e7f5f4;
    color: #077570;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 14px;
}
.page-area .sections-area .service-details .sd-gallery-title {
    font-size: 30px;
    font-weight: 800;
    color: rgb(4, 94, 100);
    text-align: center;
    margin-bottom: 8px;
}
.page-area .sections-area .service-details .sd-gallery-sub {
    color: #6f8b89;
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
}
.page-area .sections-area .service-details .sd-gallery-img {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(7, 117, 112, 0.14);
}
.page-area .sections-area .service-details .sd-gallery-img img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.5s ease;
}
.page-area .sections-area .service-details .sd-gallery-img:hover img {
    transform: scale(1.08);
}
/* turquoise overlay + caption sliding up on hover */
.page-area .sections-area .service-details .sd-gallery-img::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4, 94, 100, 0.78), rgba(4, 94, 100, 0) 60%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}
.page-area .sections-area .service-details .sd-gallery-img:hover::before {
    opacity: 1;
}
.page-area .sections-area .service-details .sd-gallery-caption {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    z-index: 2;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.3px;
    transform: translateY(12px);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
.page-area .sections-area .service-details .sd-gallery-img:hover .sd-gallery-caption {
    transform: translateY(0);
    opacity: 1;
}
.page-area .sections-area .service-details .sd-gallery-alt .sd-gallery-img img {
    height: 320px;
}

/* owl carousel : dots styled in the site brand colors */
.page-area .sections-area .service-details .sd-gallery .owl-carousel {
    padding-bottom: 10px;
}
.page-area .sections-area .service-details .sd-gallery .owl-dots {
    text-align: center;
    margin-top: 26px;
}
.page-area .sections-area .service-details .sd-gallery .owl-dots .owl-dot span {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #cfe6e4;
    transition: background-color 0.25s ease, width 0.25s ease;
}
.page-area .sections-area .service-details .sd-gallery .owl-dots .owl-dot.active span {
    width: 28px;
    border-radius: 6px;
    background-color: #077570;
}
.page-area .sections-area .service-details .sd-gallery .owl-dots .owl-dot:hover span {
    background-color: #53b8b3;
}
/* call to action */
.page-area .sections-area .service-details .sd-cta {
    text-align: center;
    margin-top: 60px;
}
.page-area .sections-area .service-details .sd-cta-btn {
    display: inline-block;
    background-color: #077570;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    padding: 14px 38px;
    border-radius: 50px;
    box-shadow: 0 8px 22px rgba(7, 117, 112, 0.28);
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.page-area .sections-area .service-details .sd-cta-btn:hover {
    background-color: #53b8b3;
    transform: translateY(-3px);
}
.page-area .sections-area .service-details .sd-cta-btn i {
    margin-right: 8px;
}
/* responsive tweaks */
@media (max-width: 767px) {
    .page-area .sections-area .service-details {
        padding: 110px 0 70px;
    }
    .page-area .sections-area .service-details .sd-info {
        font-size: 32px;
        line-height: 40px;
    }
    .page-area .sections-area .service-details .sd-meta {
        gap: 10px;
    }
    .page-area .sections-area .service-details .sd-meta li {
        padding: 7px 15px;
        font-size: 13px;
    }
    .page-area .sections-area .service-details .sd-base-img img {
        height: 250px;
    }
    .page-area .sections-area .service-details .sd-description {
        padding: 26px 22px;
    }
    .page-area .sections-area .service-details .sd-gallery {
        padding: 36px 18px 30px;
    }
    .page-area .sections-area .service-details .sd-gallery-title {
        font-size: 24px;
    }
    .page-area .sections-area .service-details .sd-gallery-alt .sd-gallery-img img {
        height: 240px;
    }
    /* captions always visible on touch devices (no hover) */
    .page-area .sections-area .service-details .sd-gallery-img::before,
    .page-area .sections-area .service-details .sd-gallery-caption {
        opacity: 1;
    }
    .page-area .sections-area .service-details .sd-gallery-caption {
        transform: translateY(0);
    }
}


















@media only screen and (min-width: 1500px) {
    body {
        
        /* carousel */
        .page-area .slider .carousel .carousel-inner {
            max-height: 900px;
        }
        
    }
}
@media only screen and (max-width: 1440px) {
    body {

        /* carpet */
        .page-area .sections-area .carpet .carpet-info {
            padding: 80px 130px;
        }
    }
}
@media only screen and (max-width: 1280px) {
    body {

        /* carpet */
        .page-area .sections-area .carpet .carpet-title {
            font-size: 25px;
        }
        .page-area .sections-area .carpet .carpet-sub-title {
            font-size: 30px;
            line-height: 35px;
        }
        .page-area .sections-area .carpet .carpet-desc {
            font-size: 20px;
        }
        .page-area .sections-area .carpet .carpet-btn {
            margin-top: 10px;
            padding: 8px 15px;
            font-size: 20px;
        }
        .page-area .sections-area .carpet .carpet-btn .carpet-btn-icon {
            font-size: 15px;
            padding: 3px;
        }

        /* footer */
        .page-area .sections-area .footer .last-erea .all-reserved {
            left: 7%;
            top: 25px;
            bottom: 0;
        }
    }
}
@media only screen and (max-width: 1100px) {
    body {
        /* slider */
        .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption {
            color: black;
            letter-spacing: 1px;
            line-height: 1.2;
        }
        .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title {
            font-size: 28px;
        }
        .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption .carousel-desc {
            font-size: 38px;
            -webkit-text-stroke-width: 1.5px;
        }

        /* carpet */
        .page-area .sections-area .carpet .carpet-info {
            padding: 80px 100px;
        }
        .page-area .sections-area .process .process-steps .proces {
            padding: 50px 40px;
        }

        /* footer */
        .page-area .sections-area .footer .last-erea .all-reserved {
            bottom: 0px;
        }

        /* plans */
        .page-area .sections-area .plans .plans-content .card .price-info {
            padding: 50px 20px;
            font-size: 13px;
        }
        .page-area .sections-area .plans .plans-content .card .price-info .price-cost { 
            font-size: 50px;
        }

    }
}
@media only screen and (max-width: 990px) {
    body {
        /* navbar */
        .navbar .navbar-collapse .navbar-nav {
            background-color: #ffffff;
            margin-right: 0;
            padding: 14px 18px;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(19, 34, 32, 0.12);
            align-items: stretch;
        }
        /* dropdown is on a light panel -> links must be dark, not white */
        .navbar .navbar-collapse .navbar-nav .nav-link {
            color: #077570;
            padding: 10px 12px;
            margin: 0;
        }
        .navbar .navbar-collapse .navbar-nav .nav-item.active .nav-link,
        .navbar .navbar-collapse .navbar-nav .nav-link:hover {
            color: rgb(240, 117, 127);
        }
        .navbar .navbar-collapse .navbar-nav .nav-link::after {
            left: 12px;
            right: 12px;
            background-color: rgb(240, 117, 127);
        }
        .navbar .navbar-brand {
            height: 81px;
            max-width: 25%;
        }
        .navbar.navbar-scrolled .navbar-brand {
            height: 60px;
        }
        .navbar .navbar-collapse .nav-item .nav-link-phone {
            margin-top: 8px;
            margin-left: 0;
            color: #ffffff;
            background-color: #53b8b3;
            border-color: #53b8b3;
            text-align: center;
        }
        .navbar .navbar-collapse .nav-item .nav-link-phone:hover {
            background-color: #077570;
            border-color: #077570;
            color: #ffffff;
        }
        

        /* slider */
        .page-area .slider .carousel .carousel-indicators {
            bottom: 2%;
        }
        .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption {
            top: 30%;
            bottom: auto;
            transform: translateX(-50%);
        }

        /* professional */
        .page-area .sections-area .professional-cleaning {
            padding: 60px;
            margin-bottom: 20px;
        }
        .page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn {
            font-size: 60% !important;
        }
        .page-area .sections-area .professional-cleaning .contact-area .professional-carpet {
            font-size: 30px;
        }

        /* services */
        .page-area .sections-area .services .services-content .services-desc {
            font-size: 30px;
        }
        .page-area .sections-area .services .services-content .cards .card .innerSpanJquery {
            padding: 30px;
            font-size: 10px;
        }

        /* process */
        .page-area .sections-area .process .process-steps .proces {
            padding: 40px 30px;
        }

        /* carpet */
        .page-area .sections-area .carpet .carpet-title {
            font-size: 15px;
        }
        .page-area .sections-area .carpet .carpet-sub-title {
            font-size: 30px;
            line-height: 30px;
            margin: 10px 0;
        }
        .page-area .sections-area .carpet .carpet-desc {
            font-size: 10px;
        }
        .page-area .sections-area .carpet .carpet-btn {
            margin-top: 5px;
            padding: 10px 15px;
            font-size: 10px;
        }
        .page-area .sections-area .carpet .carpet-btn .carpet-btn-icon {
            font-size: 10px;
            padding: 2px;
        }

        /* prices */
        .page-area .sections-area .prices .prices-content .card .price-info {
            padding: 50px;
        }
        .page-area .sections-area .prices .prices-content .card .price-info .price-cost {
            margin-bottom: 0;
            font-size: 30px;
        }
        .page-area .sections-area .prices .prices-content .card .card-body {
            padding: 10px 30px;
            font-size: 10px;
        }
        .page-area .sections-area .prices .prices-content .card .card-body .order-btn {
            padding: 0 15px;
            font-size: 15px;
            background-color: rgb(160, 231, 223);
        }

        /* footer */
        .page-area .sections-area .footer .footer-content .head-list {
            margin-bottom: 25px;
        }
        .page-area .sections-area .footer .footer-content .head-list {
            padding-left: 0;
        }
        .page-area .sections-area .footer .last-erea .all-reserved {
            left: 5%;
            top: 20px;
            bottom: 0;
        }

        /* services-page */
        .page-area .sections-area .services-page .services-content .services-desc {
            font-size: 30px;
        }
        .page-area .sections-area .services-page .services-content .cards .card .innerSpanJquery {
            padding: 30px;
            font-size: 10px;
        }
    }
}
@media only screen and (max-width: 766px) {
    body {

        /* .navbar */
        .navbar .navbar-collapse .nav-item .nav-link-phone {
            width: 40%;
            padding-left: 0;
            padding-right: 0;
            margin-left: 0;
        }

        /* services */
        .page-area .sections-area .services .services-content .services-desc {
            font-size: 20px;
            margin-bottom: 5px;
        }
        .page-area .sections-area .services .services-content .cards .card {
            margin-left: 25px;
            margin-bottom: 25px;
        }

        /* carpet */
        .page-area .sections-area .carpet .carpet-info {
            position: absolute;
            padding: 50px 70px;
        }
        .page-area .sections-area .carpet .carpet-title {
            font-size: 10px;
        }
        .page-area .sections-area .carpet .carpet-sub-title {
            font-size: 15px;
            line-height: 20px;
            margin: 5px 0;
        }
        .page-area .sections-area .carpet .carpet-desc {
            font-size: 5px;
        }

        /* process */
        .page-area .sections-area .process .process-steps .proces {
            padding: 40px 80px;
        }

        /* faq */
        .page-area .sections-area .faq .faq-content {
            padding-bottom: 30px;
        }

        /* prices */
        .page-area .sections-area .prices .prices-content .card .price-info {
            padding: 50px 80px;
        }
        .page-area .sections-area .prices .prices-content .card .price-info .price-cost {
            font-size: 60px;
        }
        .page-area .sections-area .prices .prices-content .card .card-body {
            padding: 25px 45px;
        }
        .page-area .sections-area .prices .prices-content .card .card-body .order-btn {
            padding: 0 30px;
        }
        
        /* footer */
        .page-area .sections-area .footer .footer-content .list-erea {
            margin: 0 30px;
        }
        .page-area .sections-area .footer .last-erea .all-reserved {
            /* left: 1%; */
            /* top: 10px; */
            /* bottom: 0; */
            /* font-size: 12px; */
            left: 5%;
            top: 5px;
            bottom: 0;
            font-size: 7px;
        }


        /* services-page */
        .page-area .sections-area .services-page .services-content .services-desc {
            font-size: 20px;
            margin-bottom: 5px;
        }
        .page-area .sections-area .services-page .services-content .cards .card {
            margin-left: 25px;
            margin-bottom: 25px;
        }


        /* plans-page */
        .page-area .sections-area .plans .plans-content .card .price-info {
            padding: 50px 80px;
        }
        .page-area .sections-area .plans .plans-content .card .price-info .price-cost {
            font-size: 60px;
        }
    }
}

@media only screen and (max-width: 550px) {
    body {

        /* .navbar */
        .navbar .navbar-collapse .nav-item .nav-link-phone {
            width: 70%;
            padding-left: 0;
            padding-right: 0;
            margin-left: 0;
        }
    }
}

/* ==========================================================================
   Mobile polish  —  flat (non-nested) rules so they apply in every browser.
   Kept at the end so they win the cascade. Targets phones (<= 767px).
   ========================================================================== */

/* never let anything cause a horizontal scrollbar on phones */
@media only screen and (max-width: 767px) {
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }
    /* Bootstrap rows use negative margins that overflow on small screens;
       neutralize them and clamp containers to the viewport width. */
    .page-area {
        overflow-x: hidden;
    }
    .container {
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* keep the navbar inside the viewport so the burger stays on screen */
    .navbar {
        padding: 12px 0;
    }
    .navbar .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    /* --- sticky header must not cover the content underneath it --- */
    .navbar.navbar-scrolled {
        padding: 6px 0;
    }
    /* turquoise pill so the burger is visible on any slider photo */
    .navbar .navbar-toggler {
        background-color: #53b8b3;
        border: none;
        border-radius: 10px;
        padding: 9px 12px;
        box-shadow: 0 2px 8px rgba(19, 34, 32, 0.2);
    }
    .navbar .navbar-toggler:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(83, 184, 179, 0.4);
    }
    /* white burger icon, high contrast on the turquoise pill */
    .navbar .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.95)' stroke-width='2.5' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
    }
    /* once scrolled the bar is solid turquoise, give the menu room to drop */
    .navbar .navbar-collapse {
        margin-top: 10px;
    }

    /* --- slider: taller 3:4 ratio on mobile so the hero stays big --- */
    .page-area .slider .carousel .carousel-inner {
        aspect-ratio: 3 / 4;
        height: auto;
        max-height: none;
        overflow: hidden;
    }
    .page-area .slider .carousel .carousel-inner .carousel-item {
        height: 100%;
    }
    .page-area .slider .carousel .carousel-inner .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    /* --- slider caption: scale down so it never clips --- */
    .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption {
        top: 60%;
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        line-height: 1.2;
        width: 90%;
        text-align: center;
    }
    .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title {
        font-size: 16px;
    }
    .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption .carousel-desc {
        font-size: 22px;
        line-height: 1.15;
        -webkit-text-stroke-width: 1px;
    }

    /* --- professional cleaning: tighter padding + stacked buttons --- */
    .page-area .sections-area .professional-cleaning {
        padding: 30px 18px;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .page-area .sections-area .professional-cleaning .contact-area .professional-carpet {
        font-size: 24px;
    }
    .page-area .sections-area .professional-cleaning .contact-area .professional-desc {
        font-size: 14px;
    }
    .page-area .sections-area .professional-cleaning .contact-area .btns .col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .page-area .sections-area .professional-cleaning .contact-area .btns .professional-btn {
        width: 80%;
        max-width: 280px;
        margin: 0 !important;
        font-size: 13px !important;
        white-space: normal;
    }

    /* --- services: keep heading on screen, center the button --- */
    .page-area .sections-area .services .services-content {
        padding: 40px 15px;
    }
    .page-area .sections-area .services .services-content .services-desc {
        font-size: 22px;
        line-height: 1.2;
        word-wrap: break-word;
        margin-bottom: 20px;
    }
    /* cards are an owl slider now — let it own the layout, just pad the sides */
    .page-area .sections-area .services .services-content .cards {
        padding: 0 6px;
    }
    .page-area .sections-area .services .services-content .btn-services {
        display: block;
        margin: 10px auto 0;
        width: 80%;
        max-width: 280px;
    }

    /* --- carpet banner: readable text over the photo --- */
    .page-area .sections-area .carpet .carpet-info {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        padding: 0 20px;
        text-align: center;
    }
    .page-area .sections-area .carpet .carpet-title {
        font-size: 16px;
    }
    .page-area .sections-area .carpet .carpet-sub-title {
        font-size: 20px;
        line-height: 1.2;
        margin: 6px 0;
    }
    .page-area .sections-area .carpet .carpet-desc {
        font-size: 11px;
    }
    .page-area .sections-area .carpet .carpet-desc br {
        display: none;
    }
    .page-area .sections-area .carpet .carpet-btn {
        font-size: 12px;
        padding: 8px 16px;
    }

    /* --- process steps: clean 2-up grid, nothing clipped --- */
    .page-area .sections-area .process {
        margin: 40px 0;
    }
    .page-area .sections-area .process .process-desc {
        font-size: 30px;
    }
    .page-area .sections-area .process .process-steps {
        margin: 0;
    }
    .page-area .sections-area .process .process-steps .proces {
        padding: 20px 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        word-wrap: break-word;
    }
    .page-area .sections-area .process .process-steps .proces .proces-title {
        max-width: 100%;
        overflow-wrap: normal;
        word-break: keep-all;
    }
    /* the icon had a fixed 130px width that pushed the right column off-screen */
    .page-area .sections-area .process .process-steps .proces .proces-icon-eara {
        width: 70px;
        margin-bottom: 15px;
    }
    .page-area .sections-area .process .process-steps .proces .proces-title {
        font-size: 16px;
        line-height: 1.3;
        margin: 10px 0 0;
    }

    /* --- faq: big headings shrink to fit --- */
    .page-area .sections-area .faq .faq-content {
        padding: 40px 18px 20px;
    }
    .page-area .sections-area .faq .faq-content .faq-video-title span {
        font-size: 34px;
    }
    .page-area .sections-area .faq .faq-content .faq-video {
        margin: 0 0 25px 0;
    }
    /* FAQ question: lay icon + text on one flex row so long text wraps
       neatly inside the pill instead of spilling under the icon */
    .page-area .sections-area .faq .faq-content .faqs .faq-card .card-header {
        padding: 8px;
    }
    .page-area .sections-area .faq .faq-content .faqs .faq-card .faq-title {
        display: flex;
        align-items: center;
        font-size: 15px;
        line-height: 1.3;
    }
    .page-area .sections-area .faq .faq-content .faqs .faq-card .faq-title .badge {
        flex: 0 0 auto;
        margin: 0 12px 0 4px;
        padding: 10px;
    }

    /* --- fresh (About) banner: center image + text, tighter spacing --- */
    .page-area .sections-area .fresh {
        padding: 40px 15px;
        text-align: center;
    }
    .page-area .sections-area .fresh .fresh-img-area img {
        max-width: 100%;
        height: auto;
        margin: 0 auto 20px;
    }
    .page-area .sections-area .fresh .fresh-info-area .fresh-title {
        font-size: 26px;
        line-height: 1.25;
        margin: 10px 0;
    }
    .page-area .sections-area .fresh .fresh-info-area .fresh-desc {
        font-size: 14px;
    }

    /* --- footer: stack the columns but keep the desktop look —
       left-aligned text with bullet lists, each column centered as a block --- */
    .page-area .sections-area .footer .footer-content {
        padding-top: 50px;
    }
    /* mobile : stack every column centered for a tidy, symmetric footer */
    .page-area .sections-area .footer .footer-content .footer-logo {
        height: 80px;
        max-width: 200px;
        object-position: center;
        margin: 0 auto 18px;
        display: block;
    }
    .page-area .sections-area .footer .footer-content .list-erea {
        margin: 0 auto 28px;
        padding-bottom: 0;
        max-width: 300px;
        text-align: center;
    }
    .page-area .sections-area .footer .footer-content .footer-desc {
        text-align: center;
    }
    .page-area .sections-area .footer .footer-content .head-list,
    .page-area .sections-area .footer .footer-content .head-list-contact {
        margin-bottom: 16px;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    /* contact-info rows : center the icon + text block */
    .page-area .sections-area .footer .footer-content .list-erea .row {
        justify-content: center;
        text-align: center;
    }
    /* social icons : centered and tidy when columns stack */
    .page-area .sections-area .footer .footer-content .footer-socials {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }
    .page-area .sections-area .footer .footer-content .content-list li {
        margin-bottom: 8px;
    }
    .page-area .sections-area .footer .last-erea .all-reserved {
        left: 5%;
        top: 5px;
        bottom: 0;
        font-size: 7px;
    }
}

/* extra-small phones (<= 400px): a touch more shrink */
@media only screen and (max-width: 400px) {
    .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title {
        font-size: 14px;
    }
    .page-area .slider .carousel .carousel-inner .carousel-item .carousel-caption .carousel-desc {
        font-size: 18px;
    }
    .page-area .sections-area .process .process-desc {
        font-size: 26px;
    }
    .page-area .sections-area .faq .faq-content .faq-video-title span {
        font-size: 28px;
    }
}


/* ============================================================
   PROJECT DETAILS PAGE (project-details.html)
   intentionally a different layout from the service-details page
   ============================================================ */
.page-area .sections-area .project-details {
    padding-bottom: 90px;
}

/* hero : client photo background + name on top */
.page-area .sections-area .project-details .pd-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 150px 0 90px;
    margin-bottom: 60px;
}
.page-area .sections-area .project-details .pd-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 94, 100, 0.55), rgba(4, 94, 100, 0.9));
}
.page-area .sections-area .project-details .pd-hero-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}
.page-area .sections-area .project-details .pd-breadcrumb {
    font-size: 14px;
    margin-bottom: 22px;
    color: #cfe6e4;
}
.page-area .sections-area .project-details .pd-breadcrumb a {
    color: #cfe6e4;
    text-decoration: none;
}
.page-area .sections-area .project-details .pd-breadcrumb a:hover { color: #ffffff; }
.page-area .sections-area .project-details .pd-breadcrumb i { margin: 0 8px; font-size: 11px; }
.page-area .sections-area .project-details .pd-breadcrumb .current { color: #ffffff; }
.page-area .sections-area .project-details .pd-hero-badge {
    display: inline-block;
    background-color: #53b8b3;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 18px;
    border-radius: 50px;
    margin-bottom: 16px;
}
.page-area .sections-area .project-details .pd-hero-title {
    font-size: 48px;
    font-weight: 800;
    margin: 0 0 10px;
}
.page-area .sections-area .project-details .pd-hero-sub {
    font-size: 18px;
    color: #e3f4f3;
    margin: 0;
    max-width: 620px;
}

/* main two-column area */
.page-area .sections-area .project-details .pd-block {
    background: #ffffff;
}
.page-area .sections-area .project-details .pd-client {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 26px;
    border-bottom: 1px solid #e6f3f2;
}
.page-area .sections-area .project-details .pd-client-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #53b8b3;
}
.page-area .sections-area .project-details .pd-client-name {
    font-size: 20px;
    font-weight: 700;
    color: rgb(4, 94, 100);
    margin: 0;
}
.page-area .sections-area .project-details .pd-client-role {
    font-size: 14px;
    color: #6b8786;
    margin: 2px 0 0;
}
.page-area .sections-area .project-details .pd-section-title {
    font-size: 24px;
    font-weight: 800;
    color: rgb(4, 94, 100);
    margin: 30px 0 14px;
}
.page-area .sections-area .project-details .pd-text {
    font-size: 16px;
    line-height: 28px;
    color: #4a5d5c;
    margin: 0 0 10px;
}
.page-area .sections-area .project-details .pd-highlights {
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 24px;
}
.page-area .sections-area .project-details .pd-highlights li {
    font-size: 15px;
    color: #2f4544;
    display: flex;
    align-items: center;
}
.page-area .sections-area .project-details .pd-highlights li i {
    color: #ffffff;
    background-color: #53b8b3;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    margin-right: 10px;
    flex: 0 0 auto;
}
.page-area .sections-area .project-details .pd-quote {
    position: relative;
    margin: 32px 0 0;
    padding: 26px 28px 26px 60px;
    background: #E2F5F4;
    border-radius: 14px;
    border-left: 5px solid #077570;
    font-size: 17px;
    font-style: italic;
    color: #2f4544;
    line-height: 28px;
}
.page-area .sections-area .project-details .pd-quote i {
    position: absolute;
    left: 22px;
    top: 24px;
    color: #53b8b3;
    font-size: 22px;
}
.page-area .sections-area .project-details .pd-quote cite {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-weight: 700;
    color: rgb(4, 94, 100);
    font-size: 15px;
}

/* sidebar info card */
.page-area .sections-area .project-details .pd-sidebar {
    background: #ffffff;
    border: 1px solid #e6f3f2;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 14px 36px rgba(7, 117, 112, 0.1);
    position: sticky;
    top: 30px;
}
.page-area .sections-area .project-details .pd-sidebar-title {
    font-size: 19px;
    font-weight: 800;
    color: rgb(4, 94, 100);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e6f3f2;
}
.page-area .sections-area .project-details .pd-info-list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.page-area .sections-area .project-details .pd-info-list li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #e6f3f2;
}
.page-area .sections-area .project-details .pd-info-list li:last-child { border-bottom: none; }
.page-area .sections-area .project-details .pd-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background-color: #E2F5F4;
    color: #077570;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex: 0 0 auto;
}
.page-area .sections-area .project-details .pd-info-label {
    font-size: 14px;
    color: #6b8786;
    flex: 1;
}
.page-area .sections-area .project-details .pd-info-value {
    font-size: 15px;
    font-weight: 700;
    color: rgb(4, 94, 100);
}
.page-area .sections-area .project-details .pd-cta-btn {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #077570 0%, #1e3633 100%);
    color: #ffffff;
    font-weight: 600;
    padding: 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.page-area .sections-area .project-details .pd-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(7, 117, 112, 0.3);
    color: #ffffff;
}
.page-area .sections-area .project-details .pd-cta-btn i { margin-right: 8px; }

/* RTL : flip directional spacing/borders so the project details read right-to-left */
.home-rtl .project-details {
    text-align: right;
}
.home-rtl .project-details .pd-highlights li i {
    margin-right: 0;
    margin-left: 10px;
}
.home-rtl .project-details .pd-quote {
    border-left: 0;
    border-right: 5px solid #077570;
}
.home-rtl .project-details .pd-info-icon {
    margin-right: 0;
    margin-left: 12px;
}
.home-rtl .project-details .pd-cta-btn i {
    margin-right: 0;
    margin-left: 8px;
}

/* project gallery : grid (not a slider) */
.page-area .sections-area .project-details .pd-gallery {
    margin-top: 70px;
}
.page-area .sections-area .project-details .pd-gallery-head {
    text-align: center;
    margin-bottom: 34px;
}
.page-area .sections-area .project-details .pd-gallery-badge {
    display: inline-block;
    background-color: #E2F5F4;
    color: #077570;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 12px;
}
.page-area .sections-area .project-details .pd-gallery-title {
    font-size: 32px;
    font-weight: 800;
    color: rgb(4, 94, 100);
    margin: 0;
}
/* mosaic layout : one large featured image + smaller ones (editorial style) */
.page-area .sections-area .project-details .pd-gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 190px;
    gap: 18px;
}
.page-area .sections-area .project-details .pd-gallery-item {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(7, 117, 112, 0.1);
}
.page-area .sections-area .project-details .pd-gallery-item--feature {
    grid-column: span 2;
    grid-row: span 2;
}
.page-area .sections-area .project-details .pd-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: transform 0.4s ease;
}
.page-area .sections-area .project-details .pd-gallery-item:hover img {
    transform: scale(1.07);
}

/* lightbox overlay */
.pd-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(4, 32, 33, 0.9);
    align-items: center;
    justify-content: center;
    padding: 30px;
}
.pd-lightbox.is-open {
    display: flex;
}
.pd-lightbox-img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 10px;
    border: 4px solid #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    animation: pdLightboxZoom 0.25s ease;
}
@keyframes pdLightboxZoom {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.pd-lightbox-close {
    position: absolute;
    top: 22px;
    right: 28px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.pd-lightbox-close:hover {
    background: #53b8b3;
    transform: rotate(90deg);
}
@media (max-width: 767px) {
    .page-area .sections-area .project-details .pd-gallery-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 150px;
    }
}

/* responsive */
@media (max-width: 991px) {
    .page-area .sections-area .project-details .pd-sidebar { position: static; }
    .page-area .sections-area .project-details .pd-hero { padding: 120px 0 70px; }
    .page-area .sections-area .project-details .pd-hero-title { font-size: 38px; }
}
@media (max-width: 575px) {
    .page-area .sections-area .project-details .pd-hero-title { font-size: 30px; }
    .page-area .sections-area .project-details .pd-hero-sub { font-size: 16px; }
    .page-area .sections-area .project-details .pd-highlights { grid-template-columns: 1fr; }
    .page-area .sections-area .project-details .pd-gallery-mosaic { grid-auto-rows: 130px; }
    .page-area .sections-area .project-details .pd-gallery-title { font-size: 26px; }
}

/* ============================================================
   CARPET BANNER : mobile — keep the desktop look (text over image) but give
   the image enough height (cover) so the overlaid text never overflows it.
   ============================================================ */
@media only screen and (max-width: 767px) {
    .page-area .sections-area .carpet .carpet-img {
        width: 100%;
        height: 360px;
        object-fit: cover;
        object-position: center;
    }
    .page-area .sections-area .carpet .carpet-info {
        top: 50%;
        transform: translateY(-50%);
        padding: 20px 24px;
        width: 100%;
    }
    .page-area .sections-area .carpet .carpet-title {
        font-size: 18px;
    }
    .page-area .sections-area .carpet .carpet-sub-title {
        font-size: 26px;
        line-height: 1.3;
        margin: 6px 0;
    }
    .page-area .sections-area .carpet .carpet-desc {
        font-size: 14px;
        line-height: 1.6;
    }
    .page-area .sections-area .carpet .carpet-btn {
        margin-top: 14px;
        padding: 9px 20px;
        font-size: 14px;
    }
    .page-area .sections-area .carpet .carpet-btn .carpet-btn-icon {
        font-size: 16px;
        padding: 3px;
    }
}