* {
    margin: 0;
    padding: 0;
    font-family: 'Tajawal', sans-serif;
}

/* ===== الالوان الاساسية  ===== */

:root {
    --iv-primary: #01305F;
    --iv-primary-weak: #01305F1a;
    --iv-dark: #071437;
    --iv-muted: #78829d;
    --iv-page: #f9f9f9;
    --iv-border: #d9e4e5;
    --iv-divider: #e5e7eb;
    --iv-gold-soft: #f6b1001a;
    --iv-gold: #f6b100;
    --iv-green: #17c653;
    --iv-orange: #ff6f1e;
    --iv-overlay: rgba(1, 48, 95, 0.15);
    --iv-shadow-2: 0px 2.48px 3.31px rgba(0, 0, 0, 0.08);
    --primary-color: #01305F;
    --secondary-color: #78829D;
    --text-color: #071437;
    --white: #ffffff;
    --dropdown-shadow: 0px 7px 18px rgba(0, 0, 0, 0.09);
    --efeect: 0px 3px 4px rgba(0, 0, 0, 0.03);
    --light-modeblack01: rgba(21, 27, 51, 1);
    --lightmodegreygrey-200: rgba(241, 241, 244, 1);
    --widget-shadow: 0px 3px 4px rgba(0, 0, 0, 0.03);

    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --radius: 0.5rem;

    --animate-spin: spin 1s linear infinite;
}



body {
    font-family: "Tajawal", Helvetica, sans-serif;
}


/* ===== الأزرار الأساسية  ===== */

.btn-request-booking {
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 7px;
    padding: 12px 24px;
    font-weight: 400;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}



.btn-active,
.btn-cancel,
.btn-finish,
.btn-waiting,
.btn-show-order,
.btn-show-details,
.btn-incoming-offers,
.btn-book-now,
.btn-search {
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;

}

.bg-thun {
    background-color: rgba(0, 137, 191, 0.13);
}

.bg-lightInfo {
    background-color: rgba(0, 137, 191, 0.2);
}

.bg-green {
    background-color: #00b25d;
}

/* ===== زر نشط ===== */
.btn-active {
    color: #17C653;
    background-color: rgba(23, 198, 83, 0.05);
    border: 1px solid #17C653;
    padding: 8px 14px;
    font-weight: 400;
    font-size: 12px;
}

/* ===== زر إلغاء ===== */
.btn-cancel {
    color: #F8285A;
    background-color: rgba(255, 45, 96, 0.05);
    border: 1px solid #F8285A;
    padding: 8px 14px;
    font-weight: 400;
    font-size: 12px;
}

/* ===== زر منتهي ===== */
.btn-finish {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    padding: 8px 14px;
    font-weight: 400;
    font-size: 12px;
}

/* ===== زر انتظار ===== */
.btn-waiting {
    color: #F6B100;
    background-color: rgba(246, 177, 0, 0.10);
    border: none;
    padding: 12px 20px;
    font-weight: 400;
    font-size: 12px;
}

/* ===== زر عرض الطلب ===== */
.btn-show-order {
    color: #01305F;
    background-color: var(--white);
    border: 1px solid #01305F;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 14px;
}

/* ===== زر عرض التفاصيل ===== */
.btn-show-details {
    color: var(--secondary-color);
    background-color: var(--white);
    border: 1px solid #D9E4E5;
    padding-right: 16px;
    font-weight: 500;
    font-size: 12px;
}

/* ===== زر العروض المتلقات===== */
.btn-incoming-offers {
    color: var(--primary-color);
    background-color: #ffffff;
    border: 1px solid var(--primary-color);
    padding-right: 16px;
    font-weight: 500;
    font-size: 12px;
}



/* ===== زر احجز الآن ===== */
.btn-book-now {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 32px;
    font-weight: 700;
    font-size: 14px;
}


/* ===== زر انضم كفندر===== */

.btn-book-now.vendor {
    font-size: 16px;
    width: 175px;
}


/* ===== زر ابحث  عن الغرفة===== */


.btn-book-now.search {
    padding: 0px 6px;
    font-weight: 500;
    font-size: 16px;
}




/* =====   زر الخصم===== */

/* خصم لنهاية الاسبوع */
.btn-weekend-discount {
    background-color: #F6B100;
    color: white;
    border: none;
    border-radius: 26px;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

/* نهاية العرض */
.btn-end {

    background-color: #FF6F1E;
    color: white;
    border: none;
    border-radius: 26px;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

/* باقي حجز واحد */
.btn-last-booking {
    background-color: #17C653;
    color: white;
    border: none;
    border-radius: 26px;
    padding: 8px 12px;
    font-weight: 500;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}



/* =====  اضافة موظف===== */

.btn-add-employee {
    background-color: rgba(1, 48, 95, 0.10);
    color: var(--primary-color);
    border: 1px solid #01305F;
    border-radius: 10px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;

}


/* =====   زر نوع العروض===== */

.btn-offers {
    color: var(--text-color);
    background-color: #ffffff;
    border: 1px solid #D9E4E5;
    border-radius: 6px;
    padding: 12px 24px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;

}






/* =============== TEXT =============== */



.text-section-header {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-color);
}



.text-user {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-color);
}

/* اسم الفندق بصفحه تفاصيل */
.text-title-large {
    font-weight: 700;
    font-size: 22px;
    color: var(--text-color);
}

/* عناوين الصفحه  */
.text-title-medium {
    font-weight: 700;
    font-size: 20px;
    color: var(--text-color);
}

/* العناوين الفرعية */
.text-subtitle {
    font-weight: 500;
    font-size: 16px;
    color: var(--text-color);
}


/* النصوص الأساسية */
.text-body {
    font-weight: 500;
    font-size: 16px;
    color: var(--text-color);
}


.text-body-small {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-color);
}



/* النصوص الثانوية */


.text-email {
    font-weight: 400;
    font-size: 12px;
    color: var(--secondary-color)
}


.text-caption {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-color);
}

.text-description {
    font-weight: 400;
    font-size: 14px;
    color: var(--secondary-color);
}



/* نصوص الحالة */
.text-status {
    font-weight: 500;
    font-size: 16px;
    color: var(--secondary-color);
}



/* القائمة الجانبية */

.list-item {
    font-weight: 500;
    font-size: 14px;
    color: var(--text-color);

}

.list-item:hover {
    background-color: var(--primary-color);
    padding: 12px 12px;
    border-radius: 8px;
    font-size: 16px;
    color: white;
    transition: all 0.3s ease;
}

/* footer text */

.footer-heading {
    color: var(--text-color);
    font-size: 18px;
    font-weight: 700;
}

.footer-text {
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 400;
}


.footer-heading.subscribe {
    font-size: 24px;
}




/* ====== $ ==== */

.price {
    font-weight: 700;
    font-size: 20px;
    color: var(--text-color);
}


.price-large {
    font-weight: 700;
    font-size: 28px;
    color: var(--text-color);
}



/* ====== number-client ==== */

.number-client {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 700;
}

.number-client-small {
    color: var(--text-color);
    font-size: 14px;
    font-weight: 700;
}



/* ====== count ==== */

.number {
    font-weight: 700;
    font-size: 32px;
    color: var(--text-color);
}


.number-small {
    font-weight: 700;
    font-size: 28px;
    color: var(--text-color);
}





/* =============== Time =============== */


.rectangle-timer {
    background-color: rgba(0, 137, 191, 0.1);
    border: 1px solid #01305F;
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    width: 20px;
    height: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.timer-number {
    margin: 0px;

    font-weight: 700;
    font-size: 14px;
    color: var(--primary-color);

}

.timer-label {
    margin: 0px;
    font-weight: 400;
    font-size: 8px;
    color: var(--primary-color);
}







/* ===============PageEnd  =============== */

/* الصفحه الاخيرة  */

.page-header {
    background-color: #0089BF;
    width: 100%;
    height: 40px;
    color: white;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===============global style  =============== */
/* الأساسيات */
*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: hsl(214.3 31.8% 91.4%);
}

body {
    background-color: hsl(0 0% 100%);
    color: hsl(222.2 47.4% 11.2%);
    font-feature-settings: "rlig" 1, "calt" 1;
    margin: 0;
    padding: 0;
    font-family: "Tajawal", sans-serif;
}




/* class tailwind*/
.bg-background {
    background-color: hsl(var(--background));
}

.text-foreground {
    color: hsl(var(--foreground));
}

.border-border {
    border-color: hsl(var(--border));
}


@keyframes spin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes shimmer {

    0%,
    90%,
    to {
        background-position: calc(-100% - var(--shimmer-width)) 0;
    }

    30%,
    60% {
        background-position: calc(100% + var(--shimmer-width)) 0;
    }
}

@keyframes marquee {
    0% {
        transform: translate(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

@keyframes marquee-vertical {
    0% {
        transform: translateY(0);
    }

    to {
        transform: translateY(calc(-100% - var(--gap)));
    }
}

/* animation */
.animate-spin {
    animation: var(--animate-spin);
}

.animate-fade-in {
    animation: fade-in 1s ease forwards;
}

.animate-fade-up {
    animation: fade-up 1s ease forwards;
}

.animate-marquee {
    animation: marquee var(--duration) infinite linear;
}

.animate-marquee-vertical {
    animation: marquee-vertical var(--duration) infinite linear;
}

.animate-shimmer {
    animation: shimmer 8s infinite;
}

/* some style */
.all-\[unset\] {
    all: unset;
}

/* shadow */
.shadow-dropdown-shadow {
    box-shadow: var(--dropdown-shadow);
}

.shadow-efeect {
    box-shadow: var(--efeect);
}

.shadow-widget-shadow {
    box-shadow: var(--widget-shadow);
}

/* border raduis*/
.rounded-lg {
    border-radius: var(--radius);
}

.rounded-md {
    border-radius: calc(var(--radius) - 2px);
}

.rounded-sm {
    border-radius: calc(var(--radius) - 4px);
}


.global-header {
    height: 70px;
}

.title-super {
    font-size: 1.25rem;
    direction: rtl;
}

.profile-frame {
    width: 23px;
    height: 23px;
    background: url('/frame-1686552501.png') center/cover;
}


/* Statistics cards */
.stat-icon-wrapper {
    width: 61px;
    height: 65px;
}

.stat-bg {
    width: 61px;
    height: 65px;
}

.stat-icon {
    width: 31px;
    height: 31px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.stat-number {
    font-size: 32px;
    font-weight: bold;
    color: #071437;
}

.stat-label {
    font-family: 'Tajawal', sans-serif;
    font-size: 1rem;
    color: #6c757d;
}

/* Controls */
.control-btn {
    height: 2rem;
}

.control-icon {
    width: 8.5px;
    height: 4.5px;
}

.control-text {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.875rem;
    color: #071437;
}

.calendar-btn .calendar-text {
    font-size: 0.75rem;
    color: #6c757d;
}

.calendar-icon {
    width: 14px;
    height: 14px;
}

.search-box {
    width: 14rem;
    height: 33px;
}

.search-placeholder {
    font-family: 'Tajawal', sans-serif;
    font-size: 0.875rem;
    color: #6c757d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.search-icon {
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

/* Offer cards */
.offer-card {
    padding: 1rem;
    flex-wrap: wrap;
}

/* 💡 الحالة الافتراضية (List View) */
#offersWrapper.list-view .offer-card {
    display: flex;
    flex-direction: row;
}

/* 💡 عند تفعيل Grid View */
#offersWrapper.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

#offersWrapper.grid-view .offer-card {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    height: 100%;
}

/* تنسيق عام للبطاقة في وضع Grid */
#offersWrapper.grid-view .offer-card .offer-date {
    align-items: flex-start;
}

#offersWrapper.grid-view .offer-card img,
#offersWrapper.grid-view .offer-card .bg-image {
    width: 100%;
    height: 160px;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* إخفاء بعض العناصر غير الضرورية في grid */
#offersWrapper.grid-view .offer-links,
#offersWrapper.grid-view .dottedDropdowon {
    display: none !important;
}

/* عرض السعر والحالة أسفل الصورة */
#offersWrapper.grid-view .price-status {
    width: 100%;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px dashed #ccc;
}


.w-grid-only {
    width: 100% !important;
}

@media (max-width: 768px) {
    .w-sm-only {
        width: 100% !important;
    }

    .truncate-sm {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .offer-links {
        flex-direction: row;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        margin-top: 10px;
        width: 100%;
        gap: 1rem;
    }
}

.offer-btn {
    width: 132px;
}

.offer-btn-icon {
    width: 18.5px;
    height: 18.5px;
}

.offer-counter {
    width: 145px;
    height: 65px;
    gap: 0.5rem;
    padding: 0.5rem;
}

.counter-number {
    font-size: 1.25rem;
    font-weight: bold;
    color: #0089BF;
}

.counter-label {
    font-size: 0.625rem;
    color: #6c757d;
}

.offer-status {
    height: 2rem;
    gap: 0.5rem;
}

.offer-date {
    height: 47px;
}

.date-number {
    font-size: 1rem;
    font-weight: bold;
    color: #071437;
}


.horzontal-line {
    width: 100%;
    border-top: 1px solid #dcdcdc;
    margin: 5px 0;
}

@media (max-width:476px) {
    .date-number {
        font-size: 0.8rem;
    }
}

.date-icon {
    width: 10px;
    height: 10px;
}

.date-text {
    font-size: 0.75rem;
    color: #6c757d;
}

/* dates-section style*/


.dates-section .card-date {
    border: 1px dashed #dcdcdc;
    border-radius: 8px;
    padding: 1rem;
}

.dates-section .date-box {
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 1rem;
    background-color: #fff;
    margin-bottom: 1rem;
}

.dates-section .date-box.active {
    border: 2px solid #0089BF;
    box-shadow: 0 0 5px rgba(0, 137, 191, 0.4);
}


.dates-section .text-red {
    color: #f35b75;
}

.dates-section .text-green {
    color: #00b25d;
}

#example {
    overflow-x: scroll !important;
}

/* counter style */

.countdown-box {
    background-color: #f0f7ff;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50px;
    padding: 5px 10px;
    width: 50px;
}

.countdown-number {
    color: #0089BF;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}

.countdown-text {
    font-size: 10px;
    color: #0089BF;
    line-height: 1;
}

.btn-custom-blue {
    background-color: #01305F;
    color: #fff;
}

.btn-custom-blue:hover {
    background-color: #0089BF;
    color: #fff;
}




.icon-10 {
    font-size: 10px
}

.icon-12 {
    font-size: 12px
}

.icon-14 {
    font-size: 14px
}

.icon-15 {
    font-size: 15px
}

.icon-18 {
    font-size: 18px
}

.icon-20 {
    font-size: 20px
}

.custom-link:hover {
    color: var(--bs-primary) !important;
}

.custom-link:hover i,
.custom-link:hover span {
    color: var(--bs-primary) !important;
}





.top-ad-bar {
    background-color: #0089BF;
    /* اللون الأزرق الغامق الجديد */
    color: white;
    padding: 0.5rem 0;
    text-align: center;
    font-size: 0.8rem;
}

.hero-section {
    background-size: cover;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #071437;
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-top: 100px;
    /* حتى لا يتأثر بمسافة الـ navbar */
}


/* العناوين والأزرار */
.hero-content h1 {
    font-size: 35.06px;
    margin-bottom: 1rem;
    color: #071437;
    font-weight: bold;
}

.hero-content-text {
    color: #0089BF;
}


.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    font-weight: 700;
    color: #071437;
}


@media (max-width:768px) {

    .hero-content h1 {
        font-size: 23px;
        margin-bottom: 0.5rem;
    }

    .hero-content-text {

        font-size: 20px;
    }


    .hero-content p {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }


}

.hero-content {
    text-align: center;
    position: relative;
}

.hero-img {
    margin-top: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


.img-one {
    position: relative;
    left: 25%;
    bottom: -20px;
    z-index: 1;
}

.img-two {
    position: absolute;
    right: 34%;
    z-index: 2;
}

.hero-img img {
    border-radius: 12px;
    /* يعطي شكل ناعم */
}

@media (max-width:687px) {
 .hero-img img {
    width: 200px;
    height: 222px;
}   
}
.btn-main {
    display: inline-block;
    background-color: #0089BF;
    color: #fff;
    padding: 0.8rem 2rem;
    /* border-radius: 0.5rem; */
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    margin: 0 0.5rem;
}

.btn-main:hover {
    background-color: #0179a9;
    color: #fff;

}


@media (max-width:768px) {
    .btn-main {
        padding: 0.5rem 1rem;
        margin: 0;
        font-size: 10px;
    }
}

.hero-feature {
    margin-top: 15px;
    background-color: #F9FAFF;
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


@media (max-width: 768px) {
    .hero-feature-primary-title {
        font-size: 20px !important;
    }

    .hero-feature-title {
        font-size: 18px !important;
    }

    .hero-feature-content {
        font-size: 16px !important;
    }

}

/*  */


/*  */
@media (max-width: 576px) {
    .hero-feature-primary-title {
        font-size: 18px !important;
    }

    .hero-feature-title {
        font-size: 16px !important;
    }

    .hero-feature-content {
        font-size: 14px !important;
    }
}


.step-divider {
    border-bottom: 2px dashed #071437;
    /* لون خفيف */
    width: 100%;
    height: 1px;
    /* لضمان أن يكون الخط مرئياً */
    margin: 0 10px;
    /* تباعد بسيط عن الدوائر */
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 250%;
}

.step-icon-circle {
    background-color: #E6F2FF;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #0089BF;
    margin-bottom: 1rem;
}

/* إخفاء الخطوط المنقطة على الشاشات الصغيرة (لتحويلها إلى تخطيط عمودي) */
@media (max-width: 991.98px) {
    .step-divider {
        display: none !important;
    }

    .steps-container {
        flex-direction: column;
        /* جعل المراحل تتراصف عمودياً */
    }
}






.btn-secound {
    display: inline-block;
    background-color: #01305F;
    color: #fff;
    padding: 0.8rem 2rem;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    margin: 0 0.5rem;
    border: 1px solid #01305F;
}

.btn-secound:hover {
    background-color: #025b7e;
    color: #fff;

}

@media (max-width:768px) {
    .btn-secound {
        padding: 0.5rem 1rem;
        margin: 0;
        font-size: 10px;
    }
}

.navbar {
    background-color: transparent !important;
}

.navbar .nav-item {
    font-size: 14px;
    color: #01305F;
    border: 1px #000;
}

.navbar .nav-item i {
    margin-right: 20px;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.social {
    border: 1.5px solid #01305F;
    padding: 12px 10px;
    border-radius: 50%;
}

.social i {
    color: #01305F;
    font-size: 15px;
    position: relative;
}

.messages i::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #BED0D2;
    top: -14px;
    left: 14px;
    display: block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #FEFEFE;
}

.notifications i::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: #F8285A;
    top: -14px;
    left: 14px;
    display: block;
    position: absolute;
    border-radius: 50%;
    border: 2px solid #FEFEFE;
}


.feature-card {
    border: 1px solid #E9ECF2;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    height: 100%;
    text-align: right;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    /* ظل خفيف */
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* تنسيق الأيقونة المربعة الزرقاء الفاتحة */
.card-icon-box {
    background-color: #E6F2FF;
    /* لون أزرق فاتح جداً */
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

/* خلفية زرقاء فاتحة للقسم بالكامل */
.best-choice-section {
    background-color: #E9F8FF;
    /* لون فاتح يدمج مع الخلفية البيضاء */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* تنسيق بطاقة الصورة الجانبية */
.image-card-container {
    position: relative;
}


.best-choice2-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    position: relative;
}

.countdown-number {
    color: #0089BF;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
}

.countdown-text {
    font-size: 10px;
    color: #0089BF;
    line-height: 1;
}


.countdown-box {
    background-color: #f0f7ff;
    border-radius: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    padding: 5px 10px;
    font-size: 1rem;
    /* الحجم الافتراضي */
}

/* شاشات متوسطة (تابلت) */
@media (max-width: 992px) {
    .countdown-box {
        width: 45px;
        height: 45px;
        font-size: 0.9rem;
    }
}

/* شاشات صغيرة (موبايل أفقي) */
@media (max-width: 768px) {
    .countdown-box {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
        padding: 4px 8px;
    }
}

/* شاشات صغيرة جدًا (موبايل عمودي) */
@media (max-width: 576px) {
    .countdown-box {
        width: 35px;
        height: 35px;
        font-size: 0.75rem;
        padding: 3px 6px;
    }
}


/* خلفية داكنة أنعم */
section.w-100.bg-dark {
    background: #01305F !important;
}

/* زر جانبي دائري (يسار) */
.carousel-control-prev,
.carousel-control-next {
    width: auto;
    height: auto;
    opacity: 1;
}

.carousel-control-prev .carousel-control-prev-icon,
.carousel-control-next .carousel-control-next-icon {
    display: none;
}

.carousel-control-prev::after,
.carousel-control-next::after {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #01305F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(0, 137, 191, .35);
}

.carousel-control-prev::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M11 1 3 8l8 7v-3.5L6.5 8 11 4.5z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    -webkit-mask: same;
}

.carousel-control-next::after {
    transform: scaleX(-1);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M11 1 3 8l8 7v-3.5L6.5 8 11 4.5z'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
    -webkit-mask: same;
}

/* كروت الأخبار شفافة مع ظل بسيط */
.card.bg-transparent.border-0 {
    --bs-card-bg: transparent;
    box-shadow: none;
}

.card.bg-transparent.border-0 img {
    border-radius: 12px;
}


#faqAccordion .accordion-item {
    border: 1px solid #E6EBF3;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

#faqAccordion .accordion-button {
    background: #fff;
    font-weight: 600;
}

#faqAccordion .accordion-button:not(.collapsed) {
    color: #01305F;
    background: #F7FAFF;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.03);
}


section .bg-dark {
    background: linear-gradient(90deg, #01305F 0%, #0089BF 100%) !important;
}

/* تأكد إن الحاويتين مرجع تموضع */
.hero-img {
    position: relative;
}

.image-card-container {
    position: relative;
}

 .floating-shot {
    position: absolute;
     border-radius: 12px;
     overflow: hidden;
    z-index: 3;
}

.floating-shot .thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

 .shot-a {
    width: 140px;
    height: 96px;
       top: 27px;
    left: -25%;
    transform: rotate(-4deg);
    z-index: -1;
}

.shot-b {
    width: 160px;
    height: 110px;
       top: 27px;
    right: -20%;
    transform: rotate(3deg);
    z-index: -1;
}
.shot-d {
    width: 160px;
    height: 110px;
    bottom: -9px;
    right: -20%;
    transform: rotate(3deg);
    z-index: -1;
}

.shot-c {
    width: 60%;
    height: 30%;
    bottom: 5%;
    right: 50%;
    transform: rotate(-8deg);
}

/* أحجام وتموضع لقطات قسم "لماذا نحن..." */
.bc-shot-1 {
    width: 120px;
    height: 84px;
    top: -18px;
    right: -18px;
    transform: rotate(4deg);
}

.bc-shot-2 {
    width: 140px;
    height: 96px;
    bottom: -18px;
    left: -18px;
    transform: rotate(-4deg);
}

.bc-shot-3 {
    width: 46px;
    height: 46px;
    top: 40%;
    left: -20px;
    border-radius: 999px;
    padding: 6px;
    transform: rotate(10deg);
}

/* استجابة: خفّها بالموبايل */
@media (max-width: 991.98px) {
    .shot-a {
        left: 2%;
        top: -8px;
    }

    .shot-b {
        right: 2%;
        bottom: -10px;
    }
}

@media (max-width: 767.98px) {
    .floating-shot {
        display: none !important;
    }

    /* أخفي اللقطات على الشاشات الصغيرة لو بدك */
}