body {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}
/* body:has(.offcanvas-menu.active){overflow: hidden !important;} */
.cs-bg-white {
    background-color: #d3d3d3 !important;
}

.cs_header_main {
    z-index: 3 !important;
}

header {
    z-index: 3 !important;
}
/* section {
    height: 100vh;
} */
/* Hero section Effect */

section .zoom {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-height: 450px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    height: 100%;
}

    section .zoom .image {
        grid-area: 1/1/2/2;
    }

#header-zoom {
    min-height: 100vh;
}

section .zoom .image svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#myVideo {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}

.image-2 {
    transform: scale(5.5)
}

.pin-spacer.pin-spacer-ZOOM {
    padding-bottom: 0 !important;
}

.hero-title {
    position: absolute;
    z-index: 11;
    width: 100%;
    HEIGHT: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    color: white;
    margin-top: -50px;
}

.pin-spacer.pin-spacer-ZOOM {
    background: white;
}

.intro {
    position: relative;
    height: 100vh;
    background-color: #000;
    color: #fff;
}

    .intro .visual {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .intro .visual::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5));
        }

    .intro .bg-img {
        will-change: transform filter;
        filter: brightness(50%);
    }

    .intro .title,
    .intro .description {
        position: relative;
        max-width: 600px;
        padding: 0 20px;
    }

    .intro .title,
    .slide .slide-title {
        font-size: 45px;
    }

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.slide-container {
    height: 90vh;
    position: relative;
    overflow: hidden;
}

.intro,
.slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.slide {
    position: absolute;
    width: 100%;
    height: 90vh;
    overflow: hidden;
    color: #fff;
    will-change: transform;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

    .slide::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000060;
    }

    .slide .bg-img {
        width: 150% !important;
        height: 100%;
        left: -10%;
    }

    .slide .row {
        z-index: 99;
    }

.slide-title {
    position: relative;
}

.slide-progress {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.25);
}

.progress-thumb {
    display: block;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    transform: scaleX(0);
    transform-origin: left;
}

.cs_hero.cs_style_2 .cs_hero_content,
.cs_hero.cs_style_2.cs_type_2 .cs_hero_text {
    opacity: 1 !important;
    z-index: 9 !important;
}

.cs_slide {
    position: relative;
}

    .cs_slide:after {
        content: " ";
        width: 100%;
        height: 100%;
        z-index: 7;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background: #fff;
        background: #141414;
        background: linear-gradient(90deg, rgb(0 0 0) 0%, rgb(0 0 0 / 21%) 32%, rgb(232 232 232 / 0%) 100%);
        opacity: 1;
    }

    .cs_slide.right:after {
        content: " ";
        width: 100%;
        height: 100%;
        z-index: 7;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        background: #fff;
        background: #141414;
        background: linear-gradient(180deg, rgb(0 0 0) 0%, rgb(0 0 0 / 21%) 32%, rgb(232 232 232 / 0%) 100%);
        opacity: 1;
    }

.paralex-section-tansition {
    height: 100vh;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

.about-custom-section .cs_slide {
    height: 100vh;
}

.cs_hero.cs_style_2.cs_type_2.position-relative.overflow-hidden {
    height: 100%;
    align-items: center;
    display: flex;
}

.cs_site_header.cs_style_1.cs_type_4 {
    background: #13274E;
    background: linear-gradient(180deg, rgba(19, 39, 78, 0.88) 3%, rgba(255, 255, 255, 0) 96%);
}

/* 
.cs_site_header.cs_style_1.cs_type_4.cs_sticky_active {
    background: #fff;
    ;
} */
/* .cs_site_header.cs_style_1.cs_type_4:hover {
    background: #ffffff;
} */

.dropdown:hover > .mega-menu {
    display: block;
    position: fixed;
    background: transparent;
    padding-top: 90px;
    width: 90%;
    top: 20px;
    left: 5%;
}

.mega-menu {
    display: none;
}

.dropdown:hover > .mega-menu .content {
    background-color: #fff;
    height: 70vh;
    padding: 50px;
}

.mega-img {
    height: 58vh;
    object-fit: cover;
    width: 100%;
}

    .mega-img:not(:first-child) {
        display: none;
    }

.mega-menu ul {
    list-style: none;
}

    .mega-menu ul li {
        margin-bottom: 20px;
        font-size: 3vh;
        color: #14274f;
    }

.team-slider {
    height: 70vh;
}

    .team-slider * {
        height: 60vh;
    }

    .team-slider img {
        object-fit: contain;
    }

    .team-slider .cs_slide:after {
        display: none;
    }

.service-scroll-section {
    position: relative;
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    align-content: center;
    color: white;
    padding-left: 103px !important;
    justify-content: start;
}


#section-1 {
    background: blue;
}

#section-2 {
    background: url("/ClientAssets/img/new/Our-Services.webp");
    /* background-position: bottom center; */
}

#section-3 {
    background: url("/ClientAssets/img/new/facility1.webp");
    background-position: bottom center;
    padding-right: 103px !important;
    justify-content: end;
}

#section-4 {
    background: url("/ClientAssets/img/new/modern-cityscape-with-curved-mall-towers.webp");
    background-position: bottom center;
}


.service-scroll-section div {
    position: relative;
    overflow: hidden;
}

.content-border {
    position: absolute;
    top: -20px;
    left: -20px;
    object-fit: fill;
    width: 100%;
    height: 100%;
}

.section-text-content {
    position: relative;
    /* create stacking context for the pseudo-element */
    z-index: 1;
    max-width: 550px;
    padding: 40px;
    box-sizing: border-box;
    background: transparent;
    /* remove the old background-image (we draw it in ::before) */
}

    .section-text-content:after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        border-top: 30px solid #fff;
        border-right: 30px solid #FFF;
        height: 80%;
        border-radius: 0 80px;
    }

    .section-text-content:before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 80%;
        border-left: 30px solid #fff;
        border-bottom: 30px solid #FFF;
        height: 100%;
        border-radius: 0 80px;
    }

.inner-content {
    background: #ffffff90;
    border-radius: 0 50px;
    padding: 2px 20px;
    color: #000;
}

.zoom-sec-content {
    position: absolute;
    z-index: 11;
    width: 100%;
    HEIGHT: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    color: white;
    margin-top: -50px;
}

.image-ten {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#services-section {
    overflow: hidden;
    background-attachment: fixed;
}

section {
    background-size: cover;
}

.ceo-image {
    position: relative;
}

    .ceo-image:after {
        content: " ";
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: #fff;
        /* background: #ffffff; */
        background: linear-gradient(90deg, rgb(255 255 525 / 109%) -23%, rgba(245, 239, 237, 0.0) 47%);
    }

    .ceo-image::before {
        content: " ";
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background: #fff;
        /* background: #ffffff; */
        background: linear-gradient(180deg, rgb(255 255 525 / 109%) -50%, rgba(245, 239, 237, 0.0) 20%);
    }

.ceo-word {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.offcanvas-menu {
    position: fixed;
    top: 0;
    left: -50vw;
    width: 50%;
    height: 100%;
    background: transparent;
    z-index: 2;
    transition: left 1s ease-in-out;
}

    .offcanvas-menu.close-offcanvas-menu {
        transition: left 1s ease-in-out;
        transition-delay: .5s;
    }

    .offcanvas-menu .menu-list-item {
        position: relative;
        left: -100vw;
        transition: left 1000ms ease-in-out;
    }

        .offcanvas-menu .menu-list-item:nth-child(1) {
            transition-delay: 0.2s;
        }

        .offcanvas-menu .menu-list-item:nth-child(2) {
            transition-delay: 0.4s;
        }

        .offcanvas-menu .menu-list-item:nth-child(3) {
            transition-delay: 0.6s;
        }

        .offcanvas-menu .menu-list-item:nth-child(4) {
            transition-delay: 0.8s;
        }

        .offcanvas-menu .menu-list-item:nth-child(5) {
            transition-delay: 1s;
        }

        .offcanvas-menu .menu-list-item:nth-child(6) {
            transition-delay: 1.2s;
        }

    .offcanvas-menu.active .menu-list-item {
        left: 0;
        transition: left 1.2s ease-in-out .5s;
    }

    .offcanvas-menu.active {
        left: 0;
        transition: left 1s ease-in-out;
    }

        .offcanvas-menu.active .menu-list-item:nth-child(1) {
            transition-delay: 0.2s;
        }

        .offcanvas-menu.active .menu-list-item:nth-child(2) {
            transition-delay: 0.4s;
        }

        .offcanvas-menu.active .menu-list-item:nth-child(3) {
            transition-delay: 0.6s;
        }

        .offcanvas-menu.active .menu-list-item:nth-child(4) {
            transition-delay: 0.8s;
        }

        .offcanvas-menu.active .menu-list-item:nth-child(5) {
            transition-delay: 1s;
        }

        .offcanvas-menu.active .menu-list-item:nth-child(6) {
            transition-delay: 1.2s;
        }

    .offcanvas-menu .menu-list {
        list-style: none;
        padding-left: 0;
    }
.offcanvas-menu li.menu-list-item:after {
    content: " ";
    width: 100%;
    border-bottom: solid 1px #d3d3d34f;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 85%;
}
    .offcanvas-menu .menu {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(15px);
    }

/* .open-offcanvas-menu {
        position: fixed;
        top: 200px;
        right: 100px;
        z-index: 9999999999999999;
    } */
/* For mobile responsiveness */

.open-offcanvas-menu {
    position: relative;
    /* z-index: 9999999; */
}
/* .close-menu{height: 40px;}
    .open-offcanvas-menu,
    .close-menu {
        
        width: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        transform: padding-top 0 ease-in-out;
    }

    .open-offcanvas-menu span,
    .close-menu span {
        display: block;
        width: 30px;
        height: 3px;
        background: #ffffff;
        border-radius: 10px;
        transition: transform .5s ease-in-out, margin-top .5s ease-in-out, display 1s ease-in-out 1s;
    } */

/* .open-offcanvas-menu.active {
        padding-top: 5px;
        transform: padding-top 0 ease-in-out;
        position: absolute;
    } */
/* .open-offcanvas-menu span:nth-child(3) {
        display: none;
        transition: display 0 ease-in-out;
        transition-delay: .5s;
    } */
/* .open-offcanvas-menu.active span:nth-child(1) {
        transform: rotate(45deg);
        transition: transform .5s ease-in-out;
    }
    
    .open-offcanvas-menu.active span:nth-child(2) {
        transform: rotate(-45deg);
        margin-top: -12px;
        transition: transform .5s ease-in-out, margin-top .5s ease-in-out;
    }
    
    .open-offcanvas-menu.active span:nth-child(3) {
        display: none;
    } */

.header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offcanvas-menu .menu {
    padding-top: 120px;
    padding-left: 50px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.offcanvas-menu .menu-list-item {
    font-size: 25px;
    line-height: 50px;
}

/* .close-menu span:nth-child(1) {
        transform: rotate(45deg);
    }

    .close-menu span:nth-child(2) {
        transform: rotate(-45deg);
        margin-top: -9px;
    } */

.about-baner-section {
    background-color: #f3f3f3;
    height: 100vh;
}

    .about-baner-section .section-content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        height: 100%;
    }

        .about-baner-section .section-content div {
            width: 33.333%;
            height: 100%;
        }

    .about-baner-section .about-baner-image {
        padding-top: 10%;
        border: 100px 100px 0 0
    }

    .about-baner-section .section-content img {
        border-radius: 50px 50px 0 0;
        overflow: hidden;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

.about-first-content {
    font-size: 70px;
    color: #14274f;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    height: 100vh;
}

.about-last-content {
    padding: 300px 20px 0 20px;
    color: #14274f;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 0;
    height: 100vh;
}
.image-ten svg {
    scale: 1.5;
}
@media (min-width: 992px) and (max-width: 1200px) {
    .image-ten svg {
        scale: 3;
    }
}

@media (max-width: 992px) {
    .image-ten svg {
        scale: 2;
    }
    .offcanvas-menu li.menu-list-item {
        font-size: 20px;
    }
}

@media (max-width: 600px) {
    .image-ten svg {
        scale: 4;
    }

    .offcanvas-menu {
        width: 100%;
    }
}

/* decorative SVG border */

@media (max-width: 768px) {
    .offcanvas-menu .menu {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        overflow-y: scroll;
    }
    .offcanvas-menu li.menu-list-item {
        font-size: 18px;
    }

    .offcanvas-menu {
        width: 100%;
        left: -100vw;
    }
    .services-heading p {

        padding: 0 50px;
    }
    .service-scroll-section {
        padding: 50px;
        min-height: 100vh;
        height: auto;
    }

    .section-text-content {
        padding: 50px !important
    }

        .section-text-content:after {
            border-top: 30px solid #fff !important;
            border-right: 30px solid #FFF !important;
            border-radius: 0 90px !important;
        }

        .section-text-content:before {
            border-left: 30px solid #fff !important;
            border-bottom: 30px solid #FFF !important;
            border-radius: 0 90px !important;
        }

    .inner-content {
        background: #ffffff90;
        border-radius: 0 40px !important;
        padding: 5px 20px;
    }
}

.about-custom-section {
    width: 80%;
    border-radius: 60px 60px 0 0;
    overflow: hidden;
}

.about-section-content {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
}

/* .offcanvas-menu {
        background: url(/assets/img/Menu/main.webp);
        background-size: cover;
        background-repeat: no-repeat;
        transition: background 2s ease-in-out;
    } */

/* .offcanvas-menu:has(.nav-home:hover) {
        background: url(/assets/img/Menu/Home.webp);
        background-size: cover;
        background-repeat: no-repeat;
        transition: background 2s ease-in-out;
    }

    .offcanvas-menu:has(.nav-about:hover) {
        background: url(/assets/img/Menu/About.webp);
        background-size: cover;
        background-repeat: no-repeat;
        transition: background 2s ease-in-out;
    }

    .offcanvas-menu:has(.nav-contact:hover) {
        background: url(/assets/img/Menu/Contact.webp);
        background-size: cover;
        background-repeat: no-repeat;
        transition: background 2s ease-in-out;
    }

    .offcanvas-menu:has(.nav-management:hover) {
        background: url(/assets/img/Menu/Property-management.webp);
        background-size: cover;
        background-repeat: no-repeat;
        transition: background 2s ease-in-out;
    }

    .offcanvas-menu:has(.nav-facility:hover) {
        background: url(/assets/img/Menu/Facility.webp);
        background-size: cover;
        background-repeat: no-repeat;
        transition: background 2s ease-in-out;
    }

    .offcanvas-menu:has(.nav-Sales:hover) {
        background: url(/assets/img/Menu/Sales.webp);
        background-size: cover;
        background-repeat: no-repeat;
        transition: background 2s ease-in-out;
    } */

.service-scroll-section {
    background-size: cover !important;
}


.service-scroll-section {
    position: relative;
}

    .service-scroll-section:after {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: #00000050;
    }

.background-fixed-image {
    dispay: none
}

@media screen and (max-width: 768px) {
    section {
        background-size: cover !important;
    }

    @supports (-webkit-touch-callout: none) {
        /* Rules inside this block only apply to iOS/Safari */
        section.mobile_section {
            background-size: cover !important;
            background-position: center !important;
            background-attachment: scroll !important;
        }

            section.mobile_section.our-service__section {
                background-size: auto 100vh !important;
                background-image: url('/assets/img/new/proberty.webp')
            }

        .image.image-ten {
            display: none;
        }

        .background-fixed-image {
            display: block;
            position: fixed;
            height: 100vh;
            width: 100vw;
            z-index: 0;
            background-size: auto 100vh !important;
        }
    }

    .service-scroll-section,
    #section-3 {
        padding: 20px !important;
        align-items: center;
        justify-content: center;
        height: 100vh !important;
        overflow: scroll;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 25px !important;
    }

    body,
    p {
        font-size: 14px !important;
    }

    .ceo-word {
        padding-top: 30px;
        text-align: center;
    }

    .contact-form-wraper {
        padding: 50px !important;
    }

        .contact-form-wraper .cs_section_title {
            margin-bottom: 30px !important;
        }

        .contact-form-wraper button {
            float: inline-end;
        }

    .open-offcanvas-menu,
    .close-menu {
        height: auto;
    }

    .services-section {
        height: auto !important;
    }

        .services-section .container,
        .services-section .container-sm {
            max-width: 100%;
            padding: 0;
            margin-top: 20px;
        }

        .services-section .left-column {
            margin-right: 0;
        }

        .services-section .panel.show {
            width: 100%;
        }

    .service-scroll-section .inner-content {
        background: #fdfdfdc2;
    }

    .service-scroll-section.mobile-section {
        background: #fff !important;
    }

        .service-scroll-section.mobile-section .section-text-content:after,
        .service-scroll-section.mobile-section .section-text-content:before {
            border-color: #caaf5e !important;
        }

    .mobile-section {
        height: auto !important;
        border-radius: 50px 50px 0 0;
    }

    .logo {
        max-width: 200px;
        min-width: 200px;
    }
}

.services-section {
    min-height: 100vh !important;
}

.btn-bg-c a {
    background-color: black !important;
    color: #fff !important;
    border-radius: 25px !important;
    margin-bottom: 20px !important;
}

    .btn-bg-c a:hover {
        color: #c5c2c2 !important;
    }

.btn-bg-c i:hover {
    scale: 1.15;
    transition: all 0.3s ease-in-out !important;
}



.floating-contact {
    position: fixed;
    right: 0px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 99999;
    align-items: end;
    justify-content: right;
}

.fc-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    padding: 12px 18px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    color: #fff;
    text-decoration: none;
    width: 50px;
    transition: width 0.3s ease, background 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    font-size: 15px;
}


    .fc-btn i {
        font-size: 20px;
    }


    .fc-btn span {
        opacity: 0;
        transition: opacity 0.3s;
    }


    .fc-btn:hover {
        width: 170px;
        background: rgba(255, 255, 255, 0.35);
    }

        .fc-btn:hover span {
            opacity: 1;
        }


.phone-btn {
    background: rgba(0, 0, 0, 0.4);
}

.whatsapp-btn {
    background: rgba(37, 211, 102, 0.4);
}

.video-btn {
    background: rgba(0, 0, 0, 0.4);
}

.fc-btn:hover.phone-btn {
    background: rgba(0, 0, 0, 0.55);
}

.fc-btn:hover.whatsapp-btn {
    background: rgba(37, 211, 102, 0.55);
}

.fc-btn:hover.video-btn {
    background: rgba(0, 0, 0, 0.55);
}


.open-offcanvas-menu {
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
}

    .open-offcanvas-menu span {
        display: block;
        width: 28px;
        height: 3px;
        background: #fff;
        border-radius: 10px;
        transition: 0.3s ease;
        transform-origin: center;
    }


    .open-offcanvas-menu.active span:nth-child(1) {
        transform: rotate(45deg) translateY(6px);
    }

    .open-offcanvas-menu.active span:nth-child(2) {
        transform: rotate(-45deg) translateY(-6px);
    }
.service-content-section {
    border-radius: 50px;
    width: 80%;
    height: 80vh;
    transition: width 1s, margin-left 1s, border-radius 1s;
    margin-left: 10% !important;
    margin-bottom: 10vh;
}
.pin-spacer:has(.service-content-section .section-text-content) {
    margin-left: 0 !important;
}
section.service-content-section:has(.section-text-content.aos-animate) {
    border-radius: 0 !important;
    width: 90vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    transition: width 1s, margin-left 1s, border-radius 1s;
    margin-left: 5vw  !important;
}
.pin-spacer:has(.service-content-section .section-text-content.aos-animate) {
    border-radius: 0 !important;
    width: 90vw !important;
    transition: width 1s, margin-left 1s, border-radius 1s;
    margin-left: 0 !important;
}
body:has(.facility-management_service) .logo {
    content: url(/clientassets/img/logo-red-ver.png);
    min-width: 250px;
}

body:has(.facility-management_service) header {
    background: #000;
    background: linear-gradient(93deg, rgba(0, 0, 0, 0.59) 1%, rgba(255, 255, 255, 0.8) 39%, rgba(255, 255, 255, 0.94) 59%, rgba(0, 0, 0, 0.74) 100%) !important;
}

.header-service-panel {
    display: none;
}

 

@media only screen and (min-width: 992px) {

    .header-service-panel {
        background-repeat: no-repeat !important;
        background-size: cover !important;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        padding-right: 30px;
        /* keep flex always */
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        /* animation states */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(30px);
        transition: opacity .6s ease, transform 1s ease, visibility .5s ease;
    }

        .header-service-panel.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        .header-service-panel .section-text-content {
            height: fit-content;
        }
}

@media only screen and (max-width: 1200px) {
    .header-service-panel .section-text-content {
        max-width: 450px !important;
    }
}
.menu-service-list-item a {
width:100%
}

/* Smooth modal entrance */
.modal.fade .modal-dialog {
    transform: translateY(40px) scale(0.97);
    opacity: 0;
    transition: all 0.1s ease-in-out;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Prevent modal from blocking hover instantly */


.modal.show {
    pointer-events: auto;
}


.modal {
    pointer-events: none;
    width: 700px !important;
    height: fit-content !important;
    margin-top: 5vh;
    margin-left: 20px;
    overflow: hidden;
    z-index: 2;
    z-index: 2;
    right: 0;
    left: auto !important;
}

    .modal .services-section {
        height: fit-content !important;
        min-height: 500px !important;
    }

.modal-dialog,
.modal-content {
    pointer-events: auto;
}

.modal-dialog {
    margin: 0;
    max-width: 100%;
}

.modal-content {
    border-radius: 0;
}
/* Ensure modal dialog is centered and not full width */


.modal-dialog {
    max-width: 600px; /* adjust width as needed */
    margin: 1.75rem auto; /* center vertically with some top margin */
}

.modal-content {
    border-radius: 12px; /* rounded corners */
    box-shadow: 0 10px 25px rgba(0,0,0,0.3); /* subtle shadow */
    overflow: hidden;
}

/* Smooth entrance animation */
.modal.fade .modal-dialog {
    transform: translateY(5vh) scale(1);
    opacity: 0;
    transition: all .6s ease-in-out;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}


.modal .service-item {
    text-align: left !important;
}