/* ====== COMPONENT-SCOPED STYLES (no global resets) ====== */
.city-section {
    padding: 40px 24px;
    /* background: linear-gradient(90deg, #4b0066 0%, #6b21a8 100%); */
    box-sizing: border-box;
    color: #fff;
}

.city-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
    /* max-width: 1200px; */
    margin: 0 auto;
}

/* Desktop layout: slides (2/3) + indicators (1/3) */
.city-row {
    display: flex;
    flex-direction: column-reverse; /* mobile: indicators first */
    gap: 24px;
}

/* Flex slides block (desktop) */
.city-slides-flex {
    display: none; /* hidden on mobile, visible on desktop via media query */
    gap: 12px;
    width: 100%;
}

.city-slide {
    flex: 1;
    min-width: 0;
    height: 700px;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: flex .7s ease, transform .3s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .city-slide .overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.35);
        transition: background .3s ease;
    }

    .city-slide .title {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
        text-align: center;
        padding: 0 12px;
    }

    .city-slide:hover {
        flex: 6;
    }
        /* expand on hover (desktop) */
        .city-slide:hover .overlay {
            background: rgba(0,0,0,0.55);
        }
    /* ====== DESCRIPTION UNDER TITLE ====== */
    .city-slide .desc {
        position: absolute;
        bottom: 150px; /* place it near bottom */
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        text-align: center;
        font-size: 16px;
        line-height: 1.4;
        color: #fff;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all .4s ease;
        z-index: 3;
    }

    /* Show description when hover */
    .city-slide:hover .desc {
        opacity: 1;
        max-height: 200px;
    }

/* For swiper (mobile) */
.swiper-slide .desc {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    text-align: center;
    font-size: 14px;
    color: #fff;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .4s ease;
    z-index: 3;
}

.swiper-slide:hover .desc {
    opacity: 1;
    max-height: 150px;
}

.change-now {
    display: flex;
    flex-direction: row; /* على الشاشات الكبيرة جنب بعض */
    gap: 20px;
}
/* Indicators column */
.change-now-content {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding: 24px;
    background-image: url('/change-now.svg'); /* تأكد المسار */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 700px;
    padding: 30px 20px;
    box-sizing: border-box;
    flex: 1;
}

.change-now-slider {
    flex: 1;
}

@media (max-width: 768px) {
    .change-now {
        flex-direction: column; /* العناصر فوق بعض */
        align-items: center; /* يخليهم في النص */
        text-align: center; /* يوسّط الكلام */
    }

    .change-now-content {
        order: 1; /* المؤشرات فوق */
        text-align: center; /* بدل end */
    }

    .change-now-slider {
        order: 2; /* الشرائح تحت */
    }
}

@media (min-width: 769px) {
    .change-now-content {
        width: 33.33%;
        padding: 32px;
        border-radius: 12px;
        height: 700px; /* 🟢 نفس طول الشرائح */
        display: flex;
        flex-direction: column;
        justify-content: center; /* يخلي المحتوى في النص */
    }
}



.change-now-content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 0;
}

.change-now-content .content {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: end;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: end;
}

.change-now-content h2 {
    margin: 0 0 8px 0;
    font-size: 24px;
}

.change-now-content h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}

    .stat img {
        width: 44px;
        height: auto;
        display: block;
    }

    .stat .num {
        font-size: 32px;
        font-weight: 700;
        margin: 4px 0;
    }

.change-now-content p {
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    opacity: .95;
}

/* ====== Mobile: show Swiper, hide flex slides, indicators first ====== */
.city-swiper {
    display: block;
    width: 100%;
    height: 420px;
    border-radius: 8px;
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

/* Slide title overlay in swiper */
.swiper-slide .overlay, .swiper-slide .title {
    position: absolute;
    inset: 0;
}

.swiper-slide .overlay {
    background: rgba(0,0,0,0.35);
}

.swiper-slide .title {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    text-align: center;
    padding: 0 12px;
}

/* Responsive rules */
@media (min-width: 769px) {
    .city-row {
        flex-direction: row;
        align-items: flex-start;
    }

    .city-slides-flex {
        display: flex;
        width: 66.66%;
        gap: 12px;
        height: 700px;
    }

    .city-swiper {
        display: none;
    }
    /* hide swiper on desktop */
    .change-now-content {
        width: 33.33%;
        padding: 32px;
        border-radius: 3px;
    }
}

@media (max-width: 768px) {
    .city-row {
        gap: 16px;
    }

    .city-slides-flex {
        display: none;
    }

    .city-swiper {
        display: block;
        height: 360px;
    }
    /* .change-now-content { order: -1; }  */
    /* show indicators above swiper */
    .city-container {
        padding: 0;
    }
}

img.cat-img.InfProj {
    display: block;
    width: 100%;
    height: 21vh;
}


.bg-dark-grey {
    background: #F5F9F9;
}

.bg-grey {
    background: #F9FAFB;
}

.cities_no_Title {
    font-size: 1.875rem;
    color: #161616;
}

.rp-services-carousel {
    position: relative;
}

    .rp-services-carousel .owl-stage-outer {
        margin: auto !important;
    }





/* .change-now-container {
    background-image: url('NewAmanaWebsite/img/img/change-now.svg');
    object-fit: cover;
    background-repeat: no-repeat;
    min-height: fit-content;
} */

.count-no {
    color: #fff;
    font-size: 6rem;
    font-weight: 520;
    line-height: 1;
}

.parent-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.right-content {
    text-align: justify;
    font-size: 1rem !important;
}

/* ================================
   CHANGE NOW SECTION
================================ */
.change-now-content {
    background-image: url('/images/BaseImages/compressed-change-now.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    min-height: fit-content;
    image-rendering: pixelated;
}

    .change-now-content .cards-container {
        position: relative;
        height: 44rem;
        width: 45em;
    }

        .change-now-content .cards-container .card {
            width: 23em;
            border-radius: .7em !important;
            position: absolute;
            font-size: .7em;
        }

.top-left-card {
    left: 0;
    top: 0;
    z-index: 2;
}

.top-right-card {
    right: 0;
    top: 0;
    z-index: 2;
    height: 17.013rem;
}

.bottom-left-card {
    left: 0;
    bottom: 0;
    z-index: 2;
    height: 17.013rem;
}

.bottom-right-card {
    right: 0;
    bottom: 0;
    z-index: 2;
}

.centered-card {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.card-body-styling {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .card-body-styling .card-title {
        color: #1F2A37 !important;
    }

    .card-body-styling .rp-primary-btn {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .card-body-styling .rp-primary-btn img {
            margin-inline: .5em !important;
        }

.card-text-styling {
    text-align: center;
    font-size: 1rem !important;
    color: #1F2A37 !important;
    line-height: 1.5em;
}

/* ================================
   RESPONSIVE MEDIA QUERIES
================================ */
@media (max-width: 1100px) and (min-width: 980px) {
    .cards-container {
        transform: scale(.8);
    }
}

@media (max-width: 980px) {
    .fixed-title {
        font-size: 1em !important;
    }

    #animatedTitles {
        font-size: 1rem !important;
    }

        #animatedTitles .animated-title-item {
            font-size: 2em !important;
            text-align: center !important;
        }

    .cards-container {
        height: auto !important;
        width: auto !important;
    }

        .cards-container .card {
            width: 100%;
            border-radius: .7em !important;
            position: static !important;
            font-size: .7em;
            margin-bottom: 1rem;
        }

    .centered-card {
        position: static !important;
        transform: translate(0, 0) !important;
    }
}

/* ================================
   BALADY APP SECTION
================================ */
.balady-app-container {
    border-radius: 1rem;
}

    .balady-app-container .balady-content {
        font-size: 1rem;
        color: #1F2A37;
        font-weight: 400;
        line-height: 1.5rem;
    }

/* ================================
   GENERAL STYLES
================================ */
.logo-icon {
    position: absolute;
    right: 0;
    top: 0;
}

.arabic-text {
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
}

.overlay {
    background-color: #04353199;
    position: absolute;
    inset: 0;
    opacity: .8;
}

.overlay-caption {
    position: absolute;
    inset-block-start: 60%;
    transform: translate(-19%, -35%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.overlay-caption-text h1 {
    text-align: right;
    line-height: 2.875rem;
    margin-bottom: .4em;
    font-weight: bold;
    color: #fff !important;
}

.overlay-caption-text p {
    font-size: 20px;
    font-weight: 500;
    line-height: 2rem;
    margin-bottom: 1em;
    color: #fff !important;
}

/* ANIMATIONS */
.opacity-animate {
    animation: fadeIn 2s ease-in-out forwards;
}

.movedown-animate {
    animation: moveDown 2s ease-in-out forwards;
}

.moveup-animate {
    animation: moveUp 2s ease-in-out forwards;
}

/* ================================
   TITLES & HEADERS
================================ */
.fixed-title {
    font-size: 1.5em;
}

#animatedTitles {
    position: relative;
    min-height: 36em;
    font-size: 11px !important;
    color: #6abc4e;
}

    #animatedTitles .animated-title-item {
        font-size: 2.5em;
        text-align: center !important;
    }

p.animated-title-item.text-center {
    width: 100% !important;
}

.animated-title-item {
    position: absolute;
    top: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .animated-title-item.active {
        opacity: 1;
    }

/* ================================
   SERVICES & PROJECTS
================================ */
.services-cards,
.news-projects-cards {
    overflow-x: hidden;
    font-size: 1rem;
}

.cards-header h1 {
    font-size: 1.875rem !important;
    color: #161616 !important;
}

.cards-header p {
    font-size: 1rem !important;
    margin-block: 1.3em;
    color: #161616 !important;
}

/* ================================
   GENERAL LAYOUT
================================ */
.dir-rtl {
    direction: rtl !important;
}

.section-action-btn {
    transform: translateX(1.8rem);
    font-size: .8em !important;
}

/* ================================
   CITIES SECTION
================================ */
.cities_no_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .cities_no_container .icon-container {
        background: #F9F5FA;
    }

        .cities_no_container .icon-container img {
            width: 1.9rem !important;
        }

.cities-card {
    border: none !important;
}

.cities_no_content {
    font-weight: 700;
}

    .cities_no_content .card-title {
        font-size: 3rem;
        color: #384250;
        text-align: center;
    }

    .cities_no_content .card-paragprah {
        font-size: 1rem;
        color: #1F2A37;
        text-align: center;
    }

/* Owl Carousel for Cities */
.cities_no .customized_owl_carousel .owl-nav {
    display: none !important;
}

.cities_no .customized_owl_carousel .owl-dots {
    text-align: center !important;
    position: unset !important;
    padding-top: 3rem !important;
}

.cities_no .customized_owl_carousel .owl-dot.active span {
    background: #1B8354 !important;
}

/* My Owl Carousel App */
.my-owl-carousel-app.customized_owl_carousel .owl-dot.active span {
    background: #1B8354 !important;
}

.my-owl-carousel-app.customized_owl_carousel .owl-dots {
    inset-block-start: 90%;
    inset-inline-end: 50%;
    transform: translate(-50%, -50%);
}

.my-owl-carousel-app.customized_owl_carousel .owl-item img {
    width: unset;
}

/* Advertisements */
.advertisemnts-cards .customized_adv_owl_carousel .owl-item img {
    width: unset;
}

/* City Carousel */
.city-owl-carousel .owl-item img {
    height: 3rem !important;
}

.city-owl-carousel .card {
    height: 14rem;
}

/* Home Carousel */
.my-home-carousel .owl-dots {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}


.explore-locations-section .title {
    font-size: 1.875rem;
    color: #161616 !important;
}

.explore-locations-section .desc {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #161616;
}

.explore-locations-section .cards-panel .card-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .75em;
    border-radius: .5em;
    box-shadow: 0 6px 8px 0px #1018281A;
    padding: 1em;
    margin-bottom: 1em;
    text-align: center;
    border: 2px solid transparent;
    cursor: pointer;
    height: 10rem;
    transition: all 0.3s ease-in-out;
}

    .explore-locations-section .cards-panel .card-container img {
        margin: 0;
    }

    .explore-locations-section .cards-panel .card-container h4 {
        margin: 0;
        font-size: 1.125rem;
        color: #1F2A37 !important;
        text-align: center;
    }

    .explore-locations-section .cards-panel .card-container p {
        margin: 0;
        font-size: 1rem;
    }

    .explore-locations-section .cards-panel .card-container .checkbox {
        display: none;
        position: absolute;
        top: 1.5em;
        inset-inline-end: 2em;
    }

    .explore-locations-section .cards-panel .card-container:hover,
    .explore-locations-section .cards-panel .card-container.active {
        border-color: #26634B;
    }

        .explore-locations-section .cards-panel .card-container.active .checkbox {
            display: block;
        }

.explore-locations-section .map-container {
    height: 500px;
}

svg {
    width: 100%;
    height: 3rem;
}

/* ============================
   RESPONSIVE DESIGN
============================ */
@media (max-width: 768px) {
    .img-fluid {
        max-width: 70% !important;
    }
}

@media (max-width: 480px) {
    .img-fluid {
        max-width: 90% !important;
    }
}

/* ============================
   RESPONSIVE IMAGES
============================ */
.responsive-image1 {
    background-image: url('/images/BaseImages/compressed-bannerone.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1810 / 820;
    height: auto;
    image-rendering: pixelated;
}

.responsive-image2 {
    background-image: url('/images/BaseImages/compressed-bannersecond.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1810 / 820;
    height: auto;
    image-rendering: pixelated;
}

.responsive-image3 {
    background-image: url('/images/BaseImages/compressed-bannerthree.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1810 / 820;
    height: auto;
    image-rendering: pixelated;
}

.responsive-image4 {
    background-image: url('/images/BaseImages/compressed-bannerfour.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1810 / 820;
    height: auto;
    image-rendering: pixelated;
}

.responsive-image5 {
    background-image: url('/images/BaseImages/compressed-bannerfive.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1810 / 820;
    height: auto;
    image-rendering: pixelated;
}

.responsive-image6 {
    background-image: url('/images/BaseImages/compressed-bannersix.webp');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    aspect-ratio: 1810 / 820;
    height: auto;
    image-rendering: pixelated;
}

/* ============================
   SERVICES SECTION
============================ */
#services {
    position: relative;
    z-index: 1;
    margin-top: -20rem;
}

/* Margin adjustments for smaller screens */
@media (max-width: 1199px) {
    #services {
        margin-top: 35px;
    }
}

@media (max-width: 991px) {
    #services {
        margin-top: 30px;
    }
}

@media (max-width: 767px) {
    #services {
        margin-top: 25px;
    }
}

@media (max-width: 575px) {
    #services {
        margin-top: 20px;
    }
}

/* ============================
   Mobile: size 375–667
============================ */
@media (max-width: 768px) {
    .responsive-image1 {
        background-image: url('/images/BaseImages/compressed-375-667 (1).webp');
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
    }

    .responsive-image2 {
        background-image: url('/images/BaseImages/compressed-375-667 (2).webp');
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
    }

    .responsive-image3 {
        background-image: url('/images/BaseImages/compressed-375-667 (3).webp');
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
    }

    .responsive-image4 {
        background-image: url('/images/BaseImages/compressed-375-667 (4).webp');
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
    }

    .responsive-image5 {
        background-image: url('/images/BaseImages/compressed-375-667 (5).webp');
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
    }

    .responsive-image6 {
        background-image: url('/images/BaseImages/compressed-375-667 (6).webp');
        background-position: center;
        background-repeat: no-repeat;
        height: 100vh;
    }

    .hide-mobile {
        display: none !important;
    }

    #services {
        margin-top: 0 !important;
        padding-top: 40px !important;
    }

    .owl-dots {
        top: 89% !important;
    }

    .vg-relative.vg-shadow-black\/5.vg-shadow-none {
        height: 5rem !important;
        position: fixed !important;
        bottom: 0rem !important;
        left: 17px;
    }

    .overlay-caption-text h1 {
        text-align: right;
        font-size: 23px;
        font-weight: bold;
        line-height: 2.875rem;
        margin-bottom: .4em;
    }

    .overlay-caption-text p {
        text-align: right;
        font-size: 20px;
        line-height: 2.5rem;
        font-weight: 500;
    }

    .overlay-caption {
        inset-inline-start: 3.8rem;
        transform: translateY(-95%);
    }

  /*  .customized-service-carousel .owl-dots {
        inset-inline-end: 0 !important;
        inset-block-start: 75%;
    }*/
}

/* ============================
   Tablet size 768–1024
============================ */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    .responsive-image1 {
        background-image: url('/images/BaseImages/compressed-768-1024 (1).webp');
        height: 100vh;
    }

    .responsive-image2 {
        background-image: url('/images/BaseImages/compressed-768-1024 (2).webp');
        height: 100vh;
    }

    .responsive-image3 {
        background-image: url('/images/BaseImages/compressed-768-1024 (3).webp');
        height: 100vh;
    }

    .responsive-image4 {
        background-image: url('/images/BaseImages/compressed-768-1024 (4).webp');
        height: 100vh;
    }

    .responsive-image5 {
        background-image: url('/images/BaseImages/compressed-768-1024 (5).webp');
        height: 100vh;
    }

    .responsive-image6 {
        background-image: url('/images/BaseImages/compressed-768-1024 (6).webp');
        height: 100vh;
    }

    .hide-mobile {
        display: none !important;
    }

    #animatedTitles {
        min-height: 7em !important;
    }

    .overlay-caption {
        inset-block-start: 54% !important;
        transform: translate(-70%, -50%);
        text-align: center;
    }

    div#animatedTitles {
        font-size: 0.5em !important;
    }
}

/* ============================
   Landscape tablet 768px
============================ */
@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (orientation: landscape) {
    .responsive-image {
        background-image: url('/Amana-dga/images/mobile-eid.jpg');
        height: 77vh;
        background-size: 100% 127%;
    }

    .overlay-caption {
        inset-block-start: 84% !important;
    }

    #animatedTitles {
        min-height: 8em !important;
    }
}

/* ============================
   Specific screen adjustments
============================ */
@media screen and (width: 688px) and (height: 1031px) {
    #animatedTitles {
        min-height: 7em !important;
    }

    .overlay-caption {
        inset-block-start: 78% !important;
    }
}

@media screen and (width: 390px) and (height: 844px) {
    .search-container {
        width: 24em !important;
    }

    div#animatedTitles {
        font-size: 6px !important;
        min-height: 51em;
    }

    .overlay-caption {
        inset-block-start: 52%;
    }
}

@media screen and (max-width: 360px) and (max-height: 740px) {
    .search-container {
        width: 22em !important;
        top: 1rem;
    }

    #animatedTitles {
        min-height: 7em !important;
    }

    .overlay-caption {
        inset-block-start: 46% !important;
    }

    .vg-relative.vg-shadow-black\/5.vg-shadow-none {
        height: 5rem !important;
        position: fixed !important;
        bottom: 9rem !important;
        right: 10px !important;
    }

    div#animatedTitles {
        font-size: 7px !important;
    }
}

@media screen and (width: 375px) and (height: 667px) {
    div#animatedTitles {
        font-size: 7px !important;
    }

    #animatedTitles {
        min-height: 8em;
    }

    .overlay-caption {
        inset-block-start: 46%;
    }

    .vg-relative.vg-shadow-black\/5.vg-shadow-none {
        height: 5rem !important;
        position: fixed !important;
        bottom: 9rem !important;
        right: 10px !important;
    }

    .search-container {
        width: 24em !important;
    }
}

/* ============================
   iPhone 14 / similar 430–932
============================ */
    @media screen and (width: 430px) and (height: 932px), screen and (width: 412px) and (height: 915px) {
        .responsive-image1 {
            background-image: url('/images/BaseImages/compressed-430-932 (1).webp');
            height: 100vh;
        }

        .responsive-image2 {
            background-image: url('/images/BaseImages/compressed-430-932 (2).webp');
            height: 100vh;
        }

        .responsive-image3 {
            background-image: url('/images/BaseImages/compressed-430-932 (3).webp');
            height: 100vh;
        }

        .responsive-image4 {
            background-image: url('/images/BaseImages/compressed-430-932 (4).webp');
            height: 100vh;
        }

        .responsive-image5 {
            background-image: url('/images/BaseImages/compressed-430-932 (5).webp');
            height: 100vh;
        }

        .responsive-image6 {
            background-image: url('/images/BaseImages/compressed-430-932 (6).webp');
            height: 100vh;
        }

    .hide-mobile {
        display: none !important;
    }

    .search-container {
        width: 26em !important;
    }

    div#animatedTitles {
        font-size: 9px !important;
    }

    .overlay-caption {
        inset-block-start: 52%;
    }
}

@media screen and (width: 414px) and (height: 896px) {
    .search-container {
        width: 26em !important;
    }

    #animatedTitles {
        font-size: 7px !important;
        min-height: 30em;
    }

    .overlay-caption {
        inset-block-start: 51%;
    }
}

@media screen and (width: 740px) {
    .overlay-caption {
        inset-block-start: 60%;
        inset-inline-end: 27%;
    }
}

@media screen and (width: 554px) {
    .overlay-caption {
        inset-inline-end: 21%;
    }
}

/* ============================
   SERVICES ICONS
============================ */
.services-cards .icon-container img {
    height: 2rem;
}

@media (max-width: 480px) {
    .responsive-image {
        height: 100vh;
    }
}
.bg-light-grey {
    background-color: #F9FAFB;
}

.fs-30 {
    font-size: 1.563rem !important;
}

.container-fluid {
    padding-left: 0 !important;
    padding-right: 5rem !important;
}

@media screen and (max-width: 768px) {
    .container-fluid {
        padding: 0 1rem !important;
    }
}

@media screen and (max-width: 576px) {
    .container-fluid {
        padding: 0 1rem !important;
    }
}

#map {
    position: absolute;
    left: 24px !important;
    top: 0 !important;
    height: 100%;
    width: 100%;
}
/*.customized-service-carousel .owl-dots {
    inset-inline-end: 6rem;
}*/

.owl-carousel1 .owl-dots {
    inset-block-start: 82%;
}

.my-owl-carousel-adv .owl-dots {
    inset-block-start: 85%;
}
/*.customized-service-carousel .owl-dots {
    inset-inline-end: 0 !important;
    inset-block-start: 75%;
}*/

@media (max-width: 768px) {
    .owl-carousel1 .owl-dots {
        inset-block-start: 83%;
    }

    .customized_adv_owl_carousel .owl-dots {
        inset-block-start: 85%;
    }

    .my-owl-carousel-app.customized_owl_carousel {
        transform: translateX(-50%);
        inset-inline-end: 50%;
    }

}

#map {
    position: relative;
    height: 520px;
    width: 98%;
}

.desc-content {
    width: 75%;
}

@media (min-width: 993px) {
    #infrastructure-projects .owl-theme .owl-nav {
        margin-top: 3.5rem !important;
    }
}

@media (min-width: 769px) {
    .swiper {
        display: none !important;
    }
}

/* إخفاء Flex في الموبايل */
@media (max-width: 768px) {
    .flex-slides {
        display: none !important;
    }
}

.projectss {
    display: flex;
    gap: 20px;
}

    .projectss .card {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

        .projectss .card .card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

/* ===============================
   HEADER HEIGHT RESPONSIVENESS
================================ */
@media (min-width: 1200px) and (max-width: 1440px) {
    #homeHeader {
        height: 65vh !important;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    #homeHeader {
        height: 60vh !important;
    }
}

@media (max-width: 768px) {
    #homeHeader {
        height: 78vh !important;
    }
}

@media (min-width: 1441px) {
    #homeHeader {
        height: 80vh !important;
    }
}


.tabs-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .tabs-wrapper::-webkit-scrollbar {
        display: none; /* For Chrome, Safari, and Edge */
    }

/* ============================
   TAB PANES
============================ */
.tab-pane {
    display: none;
}

    .tab-pane.show {
        display: block;
    }

    .tab-pane > ol > li {
        font-weight: 520;
        margin-bottom: 1em;
    }

    .tab-pane > p {
        font-weight: 520;
    }

/* ============================
   MODAL STYLES
============================ */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    border-radius: 10px;
    font-family: Arial, sans-serif;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.modal img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}


.info-window-content {
    font-family: TheSansArabic, Arial, sans-serif;
}

.info-window-header {
    font-size: 18px;
    color: #00958a;
}

.info-window-paragraph {
    font-size: 14px;
}

.info-window-list {
    padding-left: 20px;
}

    .info-window-list li {
        font-size: 14px;
    }


/* إزالة الفراغ بين الهيدر والبنر في الصفحة الرئيسية */
.home-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

    /* تعطيل padding-top المفروض من body لما الصفحة الرئيسية تظهر */
    .home-page:has(#homeHeader) {
        margin-top: -115px !important; /* يعكس قيمة body padding-top */
    }


/* Start Page contact us*/


* {
    font-weight: normal;
    font-style: normal;
    font-size: medium;
}

.search-section-style {
    background-color: #1b8354;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    color: white;
    position: relative;
    overflow: hidden;
    min-height: 170px;
}

.search-input-style {
    border-radius: 2rem;
    padding-left: 2.8rem;
    height: 2.3rem;
    border: none;
    box-shadow: none;
    font-size: 0.95rem;
}

.search-icon-style {
    /*position: absolute;*/
    top: 50%;
    left: 1rem;
   /* transform: translateY(-50%);*/
    color: #1b8354;
}

.search-wrapper-style {
    position: relative;
    width: 100%;
    max-width: 29rem;
    transform: translate(-16%);
}

.logo-bg {
    position: absolute;
    left: 1.5rem;
    top: 54%;
    transform: translateY(-50%);
    opacity: 0.1;
    width: 19rem;
    height: auto;
    z-index: 0;
}

.content-wrapper-search {
    position: relative;
    z-index: 1;
}

.text-color-white {
    color: #fff;
}

@media (max-width: 768px) {
    .logo-bg {
        display: none;
    }

    .d-flex.flex-wrap {
        flex-direction: column;
        align-items: flex-start !important;
    }

    h3 {
        font-size: 1.25rem;
        text-align: right;
    }

    .search-wrapper-style {
        transform: none !important;
        width: 100%;
    }
}

.contact-sidebar {
    background: #1b8354;
    border-radius: 20px;
    color: white;
    padding: 30px 25px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

    .contact-sidebar h5 {
        color: white;
        margin-bottom: 20px;
        font-weight: 600;
    }

.contact-sidebar-item {
    background: #0AA496;
    border-radius: 12px;
    padding: 20px 15px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

    .contact-sidebar-item:hover {
        background: #089e8f;
        transform: translateY(-4px);
    }

    .contact-sidebar-item i {
        font-size: 20px;
        margin-left: 10px;
    }

.card-custom {
    background-color: white;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    min-height: 140px;
}

.custom-icon {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 16px;
    right: 16px;
}

.card-custom h6 {
    font-size: 16px;
    font-weight: 700;
    color: white;
}

.card-custom p {
    font-size: 11px;
    opacity: 0.9;
    line-height: 1.6;
    color: #1b8354;
}

.service-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .service-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

.avatar-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.info-box {
    font-size: 14px;
    line-height: 2.6;
}

.btn-service {
    background: #1b8354 !important;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-weight: 600;
    width: 100%;
    transition: all 0.3s ease;
}

    .btn-service:hover {
        background: #055b53;
        transform: translateY(-2px);
    }

.service-icon {
    width: 60px;
    height: 60px;
    background: #f8f9fa;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    color: #28a745;
    font-size: 24px;
}

.service-title {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    text-align: center;
}

.service-description {
    font-size: 14px;
    color: #6c757d;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.6;
}

.service-meta {
    font-size: 12px;
    color: #adb5bd;
    text-align: center;
    margin-bottom: 15px;
}

.btn-service {
    background: #007167;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-weight: 600;
    width: 90%;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    margin: auto;
}

    .btn-service:hover {
        background: #218838;
        color: #fff;
        transform: translateY(-2px);
    }

.bg-light {
    background-color: #E5E7EA !important;
}

.para p {
    font-size: 16px;
}

.icon-circle {
    width: 32px;
    height: 32px;
    background-color: #adb5bd4f;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

    .icon-circle img {
        width: 16px;
        height: 16px;
    }

.equal-height {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.equal-box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.element-bottom-padding {
    padding-bottom: 70px;
}

@media (max-width: 768px) {
    .contact-sidebar {
        margin-bottom: 20px;
    }

    .service-card {
        margin-bottom: 15px;
    }
}

@media (max-width: 576px) {
    .sm-top-margin {
        margin-top: 35px;
    }

    .element-bottom-padding {
        padding-bottom: 7px;
    }
}

.cards-gap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .cards-gap {
        grid-template-columns: 1fr;
    }
}

.card-bg-green-light {
    background-color: #8bd36d !important;
}

.card-bg-green-mid {
    background-color: #079b94 !important;
}

.card-bg-green-dark {
    background-color: #006f6a !important;
}

iframe {
    width: 100%;
    height: 400px;
    border: 0;
    border-radius: 8px;
}

.title-map {
    text-align: justify;
    color: #007167;
    margin-bottom: 40px;
    font-size: 25px;
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.popup-content {
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    max-width: 400px;
    width: 80%;
    text-align: center;
    position: relative;
}

.popup-close {
    position: absolute;
    top: 0.5rem;
    left: 0.9rem;
    font-size: 1.8rem !important;
    cursor: pointer;
}

/* End Page contact us*/


/* Start Page contact us form*/
#text {
    display: block;
    color: #000;
    font-weight: 300;
    font-style: italic;
    padding: 5px;
}

@media only screen and (max-width: 600px) {
    [dir="rtl"] .row {
        margin-right: 0px;
        margin-left: -15px;
    }
}

.contact-us-container {
    font-size: 1rem;
}

    .contact-us-container .page-head-info {
        font-size: 1.1em;
        color: #161616;
    }

.contact-form-section .required-sign {
    color: #B42318;
    font-size: 1.5em;
    margin: .2em;
    padding-top: .2em;
    font-weight: 100;
}

.ds-input-label {
    font-size: .9em;
    color: #161616;
    display: flex;
    align-items: center;
}

.ds-text-input {
    font-size: 1.1em;
    padding: .7em;
    border-radius: .3em !important;
    background-color: #f3f4f6 !important;
    color: #6C737F !important;
}

.ds-phone-input .country-code {
    border: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.ds-text-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.upload-files-section .h3 {
    font-size: 1em;
    color: #161616 !important;
}

.info {
    color: #64748B !important;
    font-size: .9em;
    font-weight: 100;
}

.rp-upload-button {
    color: #161616 !important;
    border: #D2D6DB 1px solid !important;
    border-radius: .35em !important;
    font-size: 1em;
}

#chooseBtn {
    padding: .5em !important;
}

.rp-primary-btn {
    font-weight: 100 !important;
}

.my-confirm-btn {
    background-color: #066058 !important;
    color: #fff !important;
    border: none !important;
}

    .my-confirm-btn:hover {
        background-color: #054c46 !important;
    }

.bgSuccess {
    background-color: #d4e9d4 !important;
}

    .bgSuccess,
    .bgSuccess h5 {
        color: #066058 !important;
    }

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=long] {
    top: 2.676em;
    right: 0.5em;
    width: 3.9375em;
    transform: rotate(-45deg);
}

div:where(.swal2-icon).swal2-success [class^=swal2-success-line][class$=tip] {
    top: 3.5em;
    left: 1.2em;
    width: 2em;
    transform: rotate(45deg);
}

/* End Page contact us form*/
/* ================================
/* ================================
/* ================================
   ✅ أسهم سلايدر الخدمات بنفس تصميم الصورة الأخيرة
   ================================ */
/* ================================
   خدمات السلايدر - servicesCarousel
   ================================ */

#servicesCarousel.owl-carousel {
    position: relative;
    overflow: visible !important;
}

/* موضع الأسهم داخل السلايدر */
#servicesCarousel .owl-nav {
    /*position: absolute;*/
    bottom: -2.5rem; /* أسفل الكروت */
    left: 0;
    right: 0;
    display: flex !important;
    align-items: center;
    /*justify-content: space-between;*/ /* سهم يمين وسهم يسار */
    padding: 0 1.5rem;
    pointer-events: none;
}

    /* زرار السهم نفسه */
    #servicesCarousel .owl-nav button.owl-prev,
    #servicesCarousel .owl-nav button.owl-next {
        background: none;
        border: none;
        cursor: pointer;
        pointer-events: auto;
    }

    /* 🔹 الشكل الأساسي للأيقونة (شكل الـ disabled) */
    #servicesCarousel .owl-nav button span {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 3rem;
        font-size: 20px;
        border-radius: 50%;
        background-color: transparent; /* بدون دايرة */
        color: #c2c2c2; /* سهم رمادي */
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    /* ✅ السهم الفعّال (الزر اللي مش disabled) جوّه دايرة خضراء */
    #servicesCarousel .owl-nav button:not(.disabled) span {
        background-color: #218a64;
        color: #fff;
    }

        /* hover على السهم الفعّال فقط */
        #servicesCarousel .owl-nav button:not(.disabled) span:hover {
            background-color: #1b7b59;
        }

    /* ❌ السهم المعطّل: سهم رمادي بدون دايرة */
    #servicesCarousel .owl-nav button.disabled span {
        background-color: transparent !important;
        color: #c2c2c2 !important;
        cursor: not-allowed;
    }

/* منع أي خلفية افتراضية من Owl */
#servicesCarousel .owl-prev:hover,
#servicesCarousel .owl-next:hover {
    background-color: transparent !important;
}

/* النقاط أسفل السلايدر */
#servicesCarousel .owl-dots {
    position: absolute;
    bottom: -2.5rem;
    left: 1.5rem;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0px;
}

#servicesCarousel .owl-dot span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d9d9d9;
    transition: background 0.3s ease;
}

#servicesCarousel .owl-dot.active span {
    background: #074D31;
}
@media (max-width: 576px) {


    #servicesCarousel .owl-dots {
        gap: 0px; 
        left: 0.5rem;
    }

        #servicesCarousel .owl-dots .owl-dot {
            margin: 0 1px !important; 
        }

            #servicesCarousel .owl-dots .owl-dot span {
                width: 6px;
                height: 6px;
            }
}

.search-section-style {
    border-radius: 1.5rem;
    padding: 1.5rem 1.25rem;
    position: relative;
    overflow: hidden;
}

/* من أول التابلت والديسكتوب نرجع نوزعهم جنب بعض */
@media (min-width: 768px) {

    .content-wrapper-search {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .search-wrapper-style {
        max-width: 520px; /* الحد الأقصى في الشاشات الكبيرة بس */
    }
}
/* لون نص الـ input نفسه */
input.search-input-style {
    color: #111827 !important; /* أسود ناعم */
}





/*.hero-img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
    image-rendering: pixelated;
}*/

/* Desktop */
/*@media (min-width: 992px) {
    .hero-img {
        height: 100vh;
        object-fit: contain;
        object-position: center;
        image-rendering: pixelated;
    }
}*/

/* Mobile + Tablet */
/*@media (max-width: 991px) {
    .hero-img {
        height: 100vh;
        object-fit: cover;
        object-position: center;
        image-rendering: pixelated;
    }
}*/
/* Desktop */
@media (min-width: 992px) {
    .hero-img {
        width: 100%;
        height: 100vh;
        object-fit: contain;
        object-position: center;
    }
}

/* Mobile + Tablet */
@media (max-width: 991px) {
    .hero-img {
        width: 100%;
        height: 100vh;
        object-fit: cover;
        object-position: center;
    }
}