@font-face {
    font-family: 'Greta Arabic';
    src: url('../fonts/GretaArabic-Bold.eot');
    src: url('../fonts/GretaArabic-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GretaArabic-Bold.woff2') format('woff2'),
    url('../fonts/GretaArabic-Bold.woff') format('woff'),
    url('../fonts/GretaArabic-Bold.ttf') format('truetype'),
    url('../fonts/GretaArabic-Bold.svg#GretaArabic-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greta Arabic';
    src: url('../fonts/GretaArabic-Light.eot');
    src: url('../fonts/GretaArabic-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GretaArabic-Light.woff2') format('woff2'),
    url('../fonts/GretaArabic-Light.woff') format('woff'),
    url('../fonts/GretaArabic-Light.ttf') format('truetype'),
    url('../fonts/GretaArabic-Light.svg#GretaArabic-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greta Arabic';
    src: url('../fonts/GretaArabic-Medium.eot');
    src: url('../fonts/GretaArabic-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GretaArabic-Medium.woff2') format('woff2'),
    url('../fonts/GretaArabic-Medium.woff') format('woff'),
    url('../fonts/GretaArabic-Medium.ttf') format('truetype'),
    url('../fonts/GretaArabic-Medium.svg#GretaArabic-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greta Arabic';
    src: url('../fonts/GretaArabic.eot');
    src: url('../fonts/GretaArabic.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GretaArabic.woff2') format('woff2'),
    url('../fonts/GretaArabic.woff') format('woff'),
    url('../fonts/GretaArabic.ttf') format('truetype'),
    url('../fonts/GretaArabic.svg#GretaArabic') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greta Arabic';
    src: url('../fonts/GretaArabic-Bold_1.eot');
    src: url('../fonts/GretaArabic-Bold_1.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GretaArabic-Bold_1.woff2') format('woff2'),
    url('../fonts/GretaArabic-Bold_1.woff') format('woff'),
    url('../fonts/GretaArabic-Bold_1.ttf') format('truetype'),
    url('../fonts/GretaArabic-Bold_1.svg#GretaArabic-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greta Arabic';
    src: url('../fonts/GretaArabic-Medium_1.eot');
    src: url('../fonts/GretaArabic-Medium_1.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GretaArabic-Medium_1.woff2') format('woff2'),
    url('../fonts/GretaArabic-Medium_1.woff') format('woff'),
    url('../fonts/GretaArabic-Medium_1.ttf') format('truetype'),
    url('../fonts/GretaArabic-Medium_1.svg#GretaArabic-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Greta Arabic';
    src: url('../fonts/GretaArabic-Light_1.eot');
    src: url('../fonts/GretaArabic-Light_1.eot?#iefix') format('embedded-opentype'),
    url('../fonts/GretaArabic-Light_1.woff2') format('woff2'),
    url('../fonts/GretaArabic-Light_1.woff') format('woff'),
    url('../fonts/GretaArabic-Light_1.ttf') format('truetype'),
    url('../fonts/GretaArabic-Light_1.svg#GretaArabic-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a, a:hover, a:focus {
    text-decoration: none;
}

button:focus,
button:focus-visible,
a:focus,
a:focus-visible {
    outline: none;
    box-shadow: none;
}

p {
    margin-bottom: 0;
}

.container-fluid.no-padding {
    --bs-gutter-x: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body {
    font-family: 'Greta Arabic', sans-serif;
    font-size: 16px;
    text-align: right;
    /*overflow-x: hidden;*/
    background: #f5f5f5;
}

.p-70 {
    padding: 70px !important;
}

section {
    padding: 30px 0;
}

.logo-section img {
    height: 45px;
    filter: brightness(0) invert(1);
}
.main-video iframe {
    border-radius: 20px;
}
/*.main-menu {*/
.top-navbar {
    /*background: rgba(26, 95, 74, 0.95);*/
    /*backdrop-filter: blur(10px);*/
    padding: 15px 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.home-header .top-navbar {
    padding-top: 20px;
}

.home-header .top-navbar.scrolled {
    padding-top: 15px;
}

.top-navbar.scrolled {
    box-shadow: 0 4px 20px rgb(23 67 105);
    background: rgb(19 67 106 / 96%);
}

.internal .top-navbar {
    background: #1C4B74;
}

.internal .top-navbar.scrolled {
    box-shadow: 0 4px 20px rgb(23 67 105);
    background: rgb(19 67 106 / 96%);
}

nav.top-navbar.timeline-page {
    position: relative;
}

.navbar-container {
    max-width: 1342px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.logo-section img {
    max-width: 180px;
    height: auto;
    display: block;
}

.main-menu {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-menu li {
    position: relative;
    padding: 0 15px;
}

.main-menu li:hover a:not(.dropdown-menu-custom a) {
    background: #143451;
    border: 1px solid #fff;
}

.main-menu li a:not(.dropdown-menu-custom a) {
    border-radius: 16px;
    border: 1px solid transparent;
    padding: 5px 18px;
}

.main-menu li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background-color: #fff;
}

.main-menu li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    font-weight: 300;
    padding: 8px 12px;
    display: block;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.main-menu li a:hover {
    color: #fff;
    /*transform: translateY(-2px);*/
}

.has-dropdown {
    position: relative;
}

.dropdown-menu-custom {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);*/
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    margin-top: 10px;
    background: rgba(28, 75, 116, 0.92);
    border-radius: 16px;
    z-index: 100;
    overflow: hidden;
}

.has-dropdown:hover .dropdown-menu-custom {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-custom a {
    color: #fff;
    padding: 12px 20px;
    display: block;
    border-bottom: 1px solid #1e4061;
    transition: all 0.3s ease;
}

.dropdown-menu-custom a:last-child {
    border-bottom: none;
}

.dropdown-menu-custom a:hover {
    background: #143f62;
    color: #fff;
    padding-right: 25px;

}

.search-icon {
    cursor: pointer;
    /*padding: 8px;*/
    transition: transform 0.3s ease;
}

.search-icon:hover {
    transform: scale(1.1);
}

.search-icon svg {
    display: block;
}

/* Search Form */
.search-form {
    display: none;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 600px;
}

.search-form.active {
    display: flex;
}

.search-form input {
    flex: 1;
    padding: 9px 20px;
    border: 2px solid #164a74;
    border-radius: 25px;
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
}

.search-form .dropdown-toggle::after {
    display: none
}

.search-form .dropdown button {
    color: #fff;
}

.search-form input::placeholder {
    color: rgba(255, 255, 255);
}

.search-form input:focus {
    background: rgba(0, 0, 0, 0.4);
}

.search-form .dropdown-menu li a {
    color: #fff;
    border-bottom: 1px solid #1e4061;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.search-form .dropdown-menu li a:hover, .search-form .dropdown-menu li a:active, .search-form .dropdown-menu li a:focus {
    background: #143f62;
    color: #fff;
    padding-right: 25px;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: #fff;
}

.search-form .dropdown-menu {
    text-align: right;
    background: rgb(37 79 114);
    padding: 0 !important;
    overflow: hidden;
}
.search-form .dropdown-menu li:last-child a{
    border-bottom: 0 none;
}
.close-search {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-search:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: rotate(90deg);
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
}

/* Content placeholder */
.content-demo {
    max-width: 1400px;
    margin: 0 auto;
    padding: 100px 20px;
    color: white;
}

.content-demo h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.content-demo p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .main-menu {
        gap: 20px;
    }

    .main-menu li a {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .navbar-container {
        flex-wrap: wrap;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .main-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: blue;
        flex-direction: column;
        gap: 0;
        padding: 80px 20px 20px;
        transition: right 0.3s ease;
        overflow-y: auto;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    }

    .main-menu.active {
        right: 0;
    }

    .main-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-menu li a {
        padding: 15px 10px;
        font-size: 16px;
    }

    .dropdown-menu-custom {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.2);
        margin: 0;
        display: none;
    }

    .has-dropdown.active .dropdown-menu-custom {
        display: block;
    }

    .dropdown-menu-custom a {
        color: white;
        padding: 12px 20px;
        font-size: 14px;
    }

    .search-form {
        order: 3;
        width: 100%;
        max-width: 100%;
    }

    .search-form.active {
        flex: 1 1 100%;
    }

    .content-demo h2 {
        font-size: 28px;
    }

    .content-demo p {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .logo-section img {
        max-width: 140px;
    }

    .content-demo h2 {
        font-size: 24px;
    }

    .content-demo p {
        font-size: 15px;
    }
}

/* Overlay for mobile menu */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.menu-overlay.active {
    display: block;
}

.main-section {
    position: relative;
    overflow: hidden;
    padding: 0;
}

.main-section:after {
    content: "";
    background: url(../images/islamic-pattern.png) no-repeat top right / cover;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #1f5c8a 0%, #164a74 50%, #0d3556 100%);
    /*margin-top: 60px;*/
    padding: 80px 20px 0 20px;
}

.hero-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    top: -200px;
    left: -200px;
}

.hero-section::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    bottom: -150px;
    right: 100px;
}

.hero-content {
    max-width: 1400px;
    margin: 130px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}


.hero-date {
    color: rgba(255, 255, 255, 0.9);
    font-size: 30px;
    margin-bottom: 20px;
}

.hero-title {
    color: white;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
    /*animation: heroGlow 5s ease-in-out infinite;*/
    position: relative;
    overflow: hidden;
    background: linear-gradient(
            to left,
            #ffffff 0%,
            #ffffff 40%,
            #24b4e6 50%,
            #ffffff 60%,
            #ffffff 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineMask 5s ease-in-out infinite;
    background-size: 130% auto;
}

/*@keyframes heroGlow {*/
/*    0%, 80%, 100% {*/
/*        text-shadow: 0 0 0px rgba(255, 255, 255, 0);*/
/*    }*/
/*    40% {*/
/*        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8),*/
/*        0 0 40px rgba(255, 215, 100, 0.6),*/
/*        0 0 60px rgba(36, 180, 230, 0.5);*/
/*    }*/
/*}*/
/* حركة الوميض البطيء */
@keyframes shineMask {
    0% {
        background-position: -220% center;
    }
    40% {
        background-position: -220% center;
    }
    100% {
        background-position: 220% center;
    }
}

.hero-subtitle {
    color: white;
    font-size: 42px;
    /*font-weight: 700;*/
    margin-bottom: 35px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 3px solid #24B4E6;
    color: #24B4E6;
    padding: 0 20px;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-weight: 400;
    font-size: 20px;
    line-height: 38px;
}

.button-arrow {
    margin-right: 15px;
}

.hero-btn:hover {
    background: white;
    color: #1a4d7a;
}

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

.hero-image img {
    width: 450px;
    height: 450px;
    object-fit: cover;
    border-radius: 20px;
    /*box-shadow: 0 20px 60px rgba(0,0,0,0.4);*/
}

.hero-pattern {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 150px;
    height: 150px;
    opacity: 0.3;
}

/* Quote Slider */
.quote-section {
    background-color: #FAF7F2;
    padding: 80px 0;
    position: relative;
}

.draw-svg {
    width: 410px;
    height: 391px;
    position: absolute;
    top: 28px;
    right: 3%;
}

/* تأكد إن المسارات نعرضها بالـ stroke فقط */
.draw-svg path {
    fill: none;
    stroke: #E4DBCC;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* قيمة مبدئية كبيرة لضمان أن الخط مخفي قبل الرسم.
       ممكن تغيّرها لو لزم (أو نضبطها بالـ JS بحسب طول كل path). */
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
}

/* keyframes لكل نافذة زمنية (الدورة الكاملة 3s) */

/* path 1: يرسم من 0% إلى 25%، ثم يعود مخفي لباقي الدورة */
@keyframes draw1 {
    0% {
        stroke-dashoffset: 1200;
    }
    25% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 1200;
    }
}

/* path 2: يبقى مخفي 0-25% ، يرسم 25-50% ، ثم يعود مخفي */
@keyframes draw2 {
    0% {
        stroke-dashoffset: 1200;
    }
    25% {
        stroke-dashoffset: 1200;
    }
    50% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 1200;
    }
}

/* path 3: يرسم 50-75% */
@keyframes draw3 {
    0% {
        stroke-dashoffset: 1200;
    }
    50% {
        stroke-dashoffset: 1200;
    }
    75% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: 1200;
    }
}

/* path 4: يرسم 75-100% */
@keyframes draw4 {
    0% {
        stroke-dashoffset: 1200;
    }
    75% {
        stroke-dashoffset: 1200;
    }
    100% {
        stroke-dashoffset: 0;
    }
    /* نشيّر النهاية على 100% بحيث يظهر تماماً عند نهاية الدورة */
}

/* نطبّق الأنيميشن — مدة الدورة 3s وتكرار لانهائي */
.draw-svg .p1 {
    animation: draw1 6s linear infinite;
}
.draw-svg .p2 {
    animation: draw2 6s linear infinite;
    /*animation-delay: 2s;*/
}
.draw-svg .p3 {
    animation: draw3 6s linear infinite;
    /*animation-delay: 4s;*/
}
.draw-svg .p4 {
    animation: draw4 6s linear infinite;
    /*animation-delay: 6s;*/
}

.quote-section:after {
    content: "";
    background-image: url(../images/half-flower-right-qoute.svg);
    background-repeat: no-repeat;
    background-size: contain;
    width: 74px;
    height: 138px;
    position: absolute;
    bottom: 60px;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title-line {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 45px 0;
    direction: rtl;
    position: relative;
    z-index: 1;
}

.title-text {
    font-size: 24px;
    font-weight: 500;
    color: #174369;
    margin-left: 10px;
    white-space: nowrap;
    margin-bottom: 0;
}

.line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, #F2F2F2, #2E3690);
    margin: 0 10px;

}

.line.line-white {
    background: linear-gradient(to right, transparent, #fff);
}

.line-container.with-link .active-line {
    background: linear-gradient(to right, #D8C6A5, #24B4E6);
    width: 440px;
}

.line-container.with-link .tab-circle-marker.active {
    width: 18px;
    height: 18px;
    background: #24B4E6;
    box-shadow: 0 0 0 2px #24B4E6, 0 2px 8px rgba(0, 123, 255, 0.4);
    z-index: 3;
}

.tabs-container.with-link .tab-item:hover h4 {
    color: #24B4E6;
}

.tabs-container.with-link .tab-item.active h4 {
    color: #24B4E6;
}

.tabs-container.with-link .tab-item h4 {
    color: #D8C6A5;
}

.circle-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 16px;
    cursor: pointer;
}

.section-title {
    color: #1a4d7a;
    font-size: 32px;
    font-weight: 700;
}

.quote-slider-container {
    max-width: 800px;
    position: relative;
}

.section-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.quote-slide {
    min-height: 280px;
    display: flex;
    align-items: center;
}

.quote-content {
    position: relative;
    color: #333;
    font-size: 36px;
    line-height: 1.6;
    font-weight: 300;
}

.q-read {
    position: absolute;
    margin-left: 50px;
    left: 0;
    bottom: 0;
    margin-bottom: -19px;
}

.q-read img {
    position: relative;
    z-index: 2;
}

.q-read::before {
    content: "";
    position: absolute;
    top: 70px;
    left: 115px;
    width: 230px;
    height: 230px;
    background-image: url(../images/q-book-flower.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    animation: rotateFlower 40s linear infinite;
    transform-origin: center center;
    opacity: 0.9;
}

.quote-marks {
    font-size: 80px;
    color: #1a4d7a;
    opacity: 0.2;
    font-family: Georgia, serif;
    line-height: 0;
}

.quote-content::before, .quote-content::after {
    content: '';
    position: absolute;
    top: auto;
    bottom: -100px;
    right: 0;
    width: 55px;
    height: 80px;
    background-image: url('../images/right-quote.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 9;

}

.quote-content::after {
    top: -20px;
    left: -20px;
    right: auto;
    background-image: url('../images/right-quote.svg');
}

.erth {
    padding: 60px 0;
    position: relative;
    background: #fff;
}

.erth:before {
    content: "";
    background: url(../images/erth-pattern-bg.svg) no-repeat center / cover;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    top: auto;
    opacity: 1;
}

.carousel-control-prev {
    /*right: -70px;*/
    /*left: auto;*/
}

.carousel-control-next {
    left: -70px;
    right: auto;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: #0d3556;
}

/* Content Tabs Section */
.content-tabs-section {
    padding: 80px 20px;
    background: white;
}

.tabs-container {
    max-width: 100%;
}

.custom-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    border-bottom: 3px solid #e0e0e0;
    padding-bottom: 0;
}

.tab-btn {
    background: transparent;
    border: none;
    color: #1a4d7a;
    font-size: 22px;
    font-weight: 700;
    padding: 15px 40px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    margin-bottom: -3px;
}

.tab-btn.active {
    color: #4a9fd8;
    border-bottom-color: #4a9fd8;
}

.tab-btn:hover {
    color: #4a9fd8;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
}

.content-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.content-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.content-card-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.content-card-body {
    padding: 25px;
}

.content-card-title {
    color: #1a4d7a;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.5;
}

.content-card-text {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
}

.carousel-controls {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.carousel-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #1a4d7a;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
}

.carousel-btn:hover {
    background: #0d3556;
    transform: scale(1.1);
}

.hero-image {
    background-image: url(../images/header-right-flower.svg),
    url(../images/header-right-flower.svg);


    background-repeat: no-repeat, no-repeat;


    background-position: 18% 0,
    100% 80%;

    background-size: 90px,
    90px
}

/* Video Section */
.video-section {
    background-image: url(../images/video-flower-left.svg),
    url(../images/video-flower-middle.svg),
    url(../images/video-flower-right.svg),
    url(../images/q-bg.svg),
    linear-gradient(88.94deg, rgba(36, 180, 230, 0.51) 28.88%, #24B4E6 49.27%);

    background-repeat: no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat;

    background-position: 15% 0, 40% 0, top right, center right, bottom left;

    background-size: 230px, 90px, 120px, cover, cover;

    padding: 80px 20px 0 0;
}

.video-section .section-title {
    color: white;
}

.video-gallery {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 40px 0;
}

.video-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.video-item.side-video {
    width: 320px;
    height: 220px;
    opacity: 0.75;
    filter: brightness(0.85);
}

.video-item.center-video {
    width: 400px;
    height: 280px;
    opacity: 1;
    z-index: 10;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
}

.video-item:hover {
    opacity: 1;
    filter: brightness(1);
    transform: scale(1.05);
}

.video-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button {
    width: 70px;
    height: 70px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a4d7a;
    font-size: 30px;
    transition: all 0.3s ease;
}

.video-item:hover .play-button {
    transform: scale(1.15);
}

.video-title {
    color: white;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

/* Fatwa Section */
.fatwa-section {
    background: #FAF7F2;
    padding: 60px 0;
    position: relative;
}

.fatwa-section:after {
    content: "";
    background-image: url(../images/fatwa-flower.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 74px;
    height: 138px;
    position: absolute;
    top: 66px;
}

.fatwa-slider {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    direction: ltr;
    position: relative;
    z-index: 2;
}

.fatwa-card h3 a {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    color: #174369;
}

.fatwa-content {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    direction: rtl;
}

.fatwa-card .fatwa-content p {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 15px;
    line-height: 22px;
    color: #908672;
}

.fatwa-row {
    display: flex;
    width: max-content;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state: running;
    transition: animation-play-state 0.8s ease;
}

.fatwa-row:hover {
    animation-play-state: paused;
}

/* Animations for different directions */
.row1 {
    animation: slide-right 35s linear infinite;
}

.row2 {
    animation: slide-left 50s linear infinite;
}

@keyframes slide-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes slide-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

.fatwa-card {
    width: 500px;
    border-radius: 15px;
    background: #F2ECE1;
    /* font-size: 16px; */
    margin: 12px;
    padding: 20px;
    transition: opacity 0.5s ease;
    opacity: 0.3;
}

.fatwa-card.fade-in {
    opacity: 1; /* Fully visible cards */
    transition: opacity 0.8s ease;
}

.fatwa-card:hover {
    cursor: pointer;
}

/* Duplicate rows for seamless loop */
.row > .card-group {
    display: flex;
}


/* Footer */
.main-footer {
    background: #174369;
    color: white;
    padding: 60px 0 0 0;
    position: relative;
}

.main-footer:before {
    content: "";
    background: url(../images/footer-pattern-bg.svg) no-repeat center 50% / cover;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.copyright-footer {
    background: #092944;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.copyright-footer ul li a {
    color: #3771a3;
    font-weight: 200;
    font-size: 15px;
}

.copyright-footer ul li {
    padding: 0 15px;
    position: relative;
}

.copyright-footer ul li:first-child {
    padding-right: 0;
    margin-right: 0;
}

.copyright-footer ul li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background-color: #0f416a;
}

.copyright-footer p {
    margin-bottom: 0;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 50px;
    position: relative;
    z-index: 9;
}

.footer-section h5 {
    color: #24B4E6;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 12px;
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-section ul li a:hover {
    color: white;
    padding-right: 5px;
}

.footer-bottom {
    /*padding-top: 40px;*/
    text-align: center;
    position: relative;
    z-index: 9;
}

.footer-logo {
    margin-bottom: 25px;
}

.footer-logo img {
    height: 60px;
    filter: brightness(0) invert(1);
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.social-icons a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: #4a9fd8;
    transform: translateY(-3px);
}

.copyright {
    color: #3771a3;
    font-size: 14px;
}


/*الإرث العلمي والمعرفي*/
/* Slider Container */
.slider-wrapper {
    position: relative;
    margin-bottom: 50px;
    /*background: white;*/
    border-radius: 15px;
    /*box-shadow: 0 5px 20px rgba(0,0,0,0.1);*/
    min-height: 400px;
}

.erth-section {
    z-index: 99;
    position: relative;
}

/* Individual Tab Sliders */
.tab-slider {
    display: none;
}

.tab-slider.active {
    display: block;
}

/* Slider Inner */
.slider-inner {
    position: relative;
    overflow: hidden;
}

.slides-container {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    flex-shrink: 0;
}

.slide-content {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.slide-item:hover .card-title a {
    color: #24B4E6
}

.slide-item:hover .card {
    background: #fbf7f3;
}

.card-title {
    margin-bottom: 20px;
}

.card-text {
    margin-bottom: 10px;
}

.slide-item {
    flex: 1;
    min-width: 280px;
    /*background: #f8f9fa;*/
    border-radius: 12px;
    overflow: hidden;
    /*box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);*/
    transition: transform 0.3s;

}

.slide-item .card .image-wrapper {
    overflow: hidden;
    position: relative;
}

.slide-item .card img {
    transition: transform 0.4s ease;
    width: 100%;
    display: block;
}

.slide-item:hover .card img {
    transform: scale(1.2);
    transform-origin: center center;
}

.slide-item img {
    /*width: 100%;*/
    object-fit: cover;
}

.slide-item-content {
    padding: 20px;
}

.slide-item-content h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #2c3e50;
}

.slide-item-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin: 0;
}

/* Navigation Arrows */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s;
}

.slider-arrow:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: translateY(-50%) scale(1.1);
}

.slider-arrow.prev {
    right: -20px;
}

.slider-arrow.next {
    left: -20px;
}

.slider-arrow i {
    font-size: 20px;
}

/* Tabs Container */
.tabs-section {
    position: relative;
}

.option-bar {
    margin: 25px 0;
}


/*Videos*/
.videos-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin: 0 0 30px 0;
}

.video-card {
    position: relative;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateY(60px);
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);*/
}

.video-card:hover {
    transform: translateY(30px);
}

.video-card:hover img {
    filter: none;
}

.video-card:hover .gradient-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.74) 7.61%, rgba(0, 0, 0, 0) 64.73%);


}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 290px;
    background: transparent;
}

.videos-container.video-slider .video-card .video-wrapper {
    height: 310px;
}

.video-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1);

}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: 25px;
}

.video-info {
    position: absolute;
    top: 24px;
    right: 20px;
    left: 20px;
    z-index: 2;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.video-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 34px;
    color: #FFFFFF;
    width: 90%;
    text-align: right;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.video-description {
    font-size: 14px;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s ease;
}

.videos-container.video-grid .video-card .play-icon {
    width: 60px;
    height: 60px;
}

.video-card:hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(255, 255, 255, 0.5);
}

.play-icon::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 25px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    margin-right: -5px;
}

/*Testimonials*/
.testimonials-wrap {
    max-width: 910px;
}

.testimonial-slide {
    padding: 40px 0 80px;
    /*min-height:180px;*/
    position: relative;
    /*overflow:hidden;*/
}

.quote-text {
    font-size: 33px !important;
    line-height: 1.4 !important;
    max-width: 820px;
    font-weight: 300 !important;
    margin: 0;
    position: relative;
    z-index: 2;
    padding: 0;
    color: #174369 !important;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-img, .card-img-top {
    border-radius: 0;
}

/* quote svgs (subtle, behind text) */
.quote-svg {
    position: absolute;
    width: 64px;
    height: 64px;
    z-index: 1;
}

.quote-left {
    left: 14px;
    top: 0;
    transform: scaleX(-1); /* mirror for left */
}

.quote-right {
    right: 0;
    bottom: 0;
}

/* لو كارت بعرض 25% */
/*.slick-slide.col-md-3 {*/
/*    width: 25vw !important; !* أو 300px حسب ما تحب *!*/
/*}*/

/*!* لو كارت بعرض 50% *!*/
/*.slick-slide.col-md-6 {*/
/*    width: 50vw !important;*/
/*}*/

/*.slide-item.col-md-6.slick-slide .card .align-items-stretch .col-md-6 {*/
/*    width: 19vw;*/
/*}*/

button.share-btn {
    border: 0 none;
    background: transparent;
    position: absolute;
    left: 165px;
    bottom: 0;
}

button.share-btn img {
    margin-right: 10px;
}

.slider-controls {
    position: relative;
}

.slick-prev, .slick-next {
    border: 0 none;
    background: transparent;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 0;
    right: auto;
    bottom: -12px;
    /*z-index: 9999;*/
    pointer-events: auto;
}

.slick-prev {
    left: 75px;
}


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

    .video-wrapper {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .slide-content {
        flex-direction: column;
    }

    .tabs-container {
        gap: 15px;
    }

    .tab-item {
        padding: 20px 25px;
        min-width: 160px;
    }

    .slider-arrow {
        width: 35px;
        height: 35px;
    }

    .slider-arrow i {
        font-size: 16px;
    }

    .line-container {
        width: 95%;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-text {
        padding-right: 0;
    }

    .content-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .main-menu {
        flex-direction: column;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        background: #1a4d7a;
        padding: 20px;
        display: none;
    }

    .main-menu.active {
        display: flex;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 28px;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .video-gallery {
        flex-direction: column;
    }

    .video-item.side-video,
    .video-item.center-video {
        width: 100%;
        max-width: 400px;
        height: 250px;
        opacity: 1;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .fatwa-item {
        min-width: 300px;
    }
}


.slider-wrapper {
    position: relative;
    margin-bottom: 40px;
    z-index: 9;
}

.tab-slider {
    display: none;
}

.tab-slider.active {
    display: block;
}

/* Bootstrap Card Styling */
.slide-item .card {
    margin: 0 10px;
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    border: 1px solid #e8e8e8;
    transition: background 0.3s ease-in-out;
}

.slide-item .card-img-top {
    object-fit: cover;
}

.slide-item .card-body {
    padding: 35px 25px;
}

.slide-item .card-title a {
    font-size: 21px;
    margin-bottom: 16px;
    color: #1C4B74;
    transition: color 0.3s;
}

.slide-item .card-text {
    font-weight: 200;
    font-size: 16px;
    line-height: 22px;
    color: #64748B;
}

/* Slick Slider Arrows */
.slider-arrows {
    display: flex;
    gap: 20px;
}

/*.slick-prev, .slick-next {*/
/*    font-size: 0;*/
/*    line-height: 0;*/
/*    width: 40px;*/
/*    height: 40px;*/
/*    padding: 0;*/
/*    cursor: pointer;*/
/*    border: none;*/
/*    background: #fff;*/
/*    border-radius: 50%;*/
/*    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
/*}*/


.slick-prev.slick-arrow, .slick-next.slick-arrow {
    position: relative;
    right: 0;
    bottom: 0;
}


/* Tabs Section Styling */
.tabs-section {
    text-align: center;
}

.line-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 4px;
    background: #ddd;
    border-radius: 4px;
}

.tab-circle-marker {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #bbb;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.tab-circle-marker.active {
    width: 18px;
    height: 18px;
    background: #1C4B74;
    box-shadow: 0 0 0 2px #1C4B74, 0 2px 8px rgba(0, 123, 255, 0.4);
    z-index: 3;
}

/* Right-to-Left Circle Positioning */
.tab-circle-marker[data-circle="0"] {
    right: 0%;
    left: auto;
}

.tab-circle-marker[data-circle="1"] {
    right: 33.33%;
    left: auto;
}

.tab-circle-marker[data-circle="2"] {
    right: 66.66%;
    left: auto;
}

.tab-circle-marker[data-circle="3"] {
    right: 100%;
    left: auto;
}

.active-line {
    position: absolute;
    top: 0;
    height: 100%;
    background: #282F7E;
    border-radius: 4px;
    transition: width 0.45s ease, right 0.45s ease;
    z-index: 1;
}

.tabs-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    margin-top: 20px;
}

.tab-item {
    text-align: right;
    cursor: pointer;
    padding: 25px 0;
    /*border-radius: 12px;*/
    transition: all 0.3s;
    position: relative;
    flex: 1;
}

.tab-item:hover {
    transform: translateY(-3px);
    /*box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);*/
}

.tab-item.active {
    /*border: 2px solid #007bff;*/
    /*background: #f0f7ff;*/
}

/*.tab-item.active::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    bottom: -2px;*/
/*    left: 50%;*/
/*    transform: translateX(-50%);*/
/*    width: 100%;*/
/*    height: 3px;*/
/*    background-color: #007bff;*/
/*}*/

.tab-item h4 {
    font-weight: 700;
    font-size: 30px;
    line-height: 48px;
    color: #24B4E6;
    transition: color 0.3s;
}

.tab-item.active h4 {
    color: #174369;
}

.tab-item p {
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    text-align: right;
    color: #64748B;
}

body.internal {
    background: #FAF7F2;
}

section.main-section.internal {
    background: #1C4B74;
}

section.main-section.internal:after {
    display: none;
}

section.main-section.internal .top-navbar {
    background: #1C4B74;
    padding: 16px 0;
}

.inner-header {
    background: url("../images/inner-header.svg") no-repeat bottom center / cover;
    padding: 60px 20px;
    margin-top: 75px;
}

.inner-header .page-title {
    font-weight: 700;
    font-size: 32px;
    line-height: 45px;
    text-align: right;
    color: #FFFFFF;
}

.inner-header nav li a, .inner-header nav li {
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    text-align: right;
    color: #FFFFFF;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: right;
    color: #fff;
    padding: 0 10px;;
}

.breadcrumb-item.active {
    color: #fff
}

.widget.top-bar-widget {
    background: transparent;
    padding: 0;
    border: 0 none;
    margin: 0;
}

.overlap {
    top: -50px;
    position: relative;
}

.overlap.with-no-bg {

    position: relative;
    padding-bottom: 0;
}

.overlap-body {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 40px;
    position: relative;
    z-index: 2;
}

article.overlap-body p {
    font-weight: 100;
    font-size: 20px;
    line-height: 36px;
    color: #908672;
}

article.overlap-body p:last-child {
    margin-bottom: 0;
}

.overlap-img {
    width: 100%;
    margin-bottom: 50px;
}

.answer p {
    font-weight: 100;
    font-size: 20px;
    line-height: 38px;
    text-align: right;
    color: #908672;
    margin-bottom: 25px;
}

.answer h1, .answer h2, .answer h3, .answer h4, .answer h5, .answer h6 {
    color: #174369;
}

.overlap-body .question {
    font-weight: 400;
    font-size: 22px;
    line-height: 31px;
    text-align: right;
    color: #5e3708;
}

.share-btn.share-article {
    font-size: 18px;
    color: #908672;
    display: flex;
    justify-content: end;
    gap: 15px;
    margin: 30px 0 0 30px;
    align-items: center;
}

.share-btn.share-article.top-share {
    margin: 0;
}

.sep {
    border-bottom: 1px solid #f1edea;
    margin: 25px 0;
}

.widget.ad {
    padding: 0;
}

.widget.ad .widget-body {
    background: transparent;
}

.article-title {
    padding: 25px 0;
    font-weight: 700;
    font-size: 32px;
    line-height: 45px;
    text-align: right;
    color: #1C4B74;
}

.article-details span svg {
    margin-left: 5px;
}

.article-details {
    gap: 15px
}

.article-title h3 {
    line-height: 42px;
    font-weight: 900;
    font-size: 30px;
}

.article-details span {
    font-weight: 100;
    font-size: 13px;
    line-height: 25px;
    color: #D3CCBF;
}

.widget {
    background: #fff;
    border-radius: 16px;
    padding: 24px 16px;
    position: relative;
    margin-bottom: 25px;
    border: 1px solid rgba(0, 0, 0, 0.1)
}

.widget .widget-title {
    display: flex;
    align-items: center;
    width: 100%;
    padding-bottom: 18px;
}

.widget .widget-title h2 {
    font-weight: 700;
    font-size: 21px;
    line-height: 30px;
    color: #174369;
    position: relative;
    margin-bottom: 0;
}

.widget .widget-title .line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, #F2F2F2, #2E3690);
    margin: 0 10px;

}

.widget .custom-dropdown {
    position: relative;
    width: 100%;
    background: #FAF7F2;
    border: 1px solid #F2ECE1;
    border-radius: 10px;
    cursor: pointer;
    padding: 4px 8px;
}

.widget .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 200;
    font-size: 16px;
    line-height: 34px;
    text-align: right;
    color: #24B4E6;
}

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

.cards-grid .slide-item .card {
    margin: 0;
}

.arrow {
    transition: transform 0.3s;
}

.arrow.up {
    transform: rotate(180deg); /* السهم لأعلى */
}

.dropdown-menu {
    list-style: none;
    padding: 5px 0;
    margin: 10px 0 0;
    display: none;
    border-radius: 10px;
    width: 100%;
    right: 0;
}

.widget .widget-body ul.dropdown-menu li:before {
    display: none
}

.widget .dropdown-menu li {
    padding: 10px !important;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.widget .dropdown-menu li a {
    text-decoration: none;
    border-bottom: 0 none;
}

.widget .widget-body ul li:before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: #979797;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    transition: all .3s ease-in-out;
}

.widget .widget-body ul li:hover:before {
    background: #ab8855;
    width: 6px;
    height: 6px;
}

.widget .widget-body ul li {
    padding: 0 0 8px 0;
}

.widget .dropdown-menu li a {
    font-weight: 200;
    font-size: 18px;
    line-height: 32px;
    color: #979797;
}

.widget .widget-body ul li a {
    font-weight: 200;
    font-size: 16px;
    line-height: 25px;
    color: #979797;
    transition: all .3s ease-in-out
}

.widget .widget-body ul li:hover a {
    color: #ab8855;
    padding-right: 5px;
}

.widget .dropdown-menu li:last-child {
    border-bottom: none;
}

.tags li {
    margin-bottom: 10px;
}

.tags li a {
    font-weight: 300;
    font-size: 16px;
    line-height: 29px;
    color: #a39384;
    transition: all .3s ease-in-out;
    border: 1px solid #D3CCBF;
    border-radius: 8px;
    padding: 5px 10px;
    background: transparent;
    margin: 0 0 15px 0;
}


.tags li:hover a {
    background: #D8C6A5;
    color: #695d48
}


.list-inline-item:not(:last-child) {
    margin-right: 0;
    margin-left: 5px;
}

.widget .widget-body ul {
    margin-bottom: 0;
}

.sound-cloud {
    margin: 25px 0;
    background: #fff;
    padding: 15px;
    border-radius: 15px;
}

a.page-link {
    background: transparent;
    border: 0 none;
    transition: all .3s ease-in-out;
}

ul.pagination {
    display: flex;
    gap: 10px;
    margin: 25px auto;
    justify-content: center;
    align-items: center;
}

.page-item:not(:first-child):not(:last-child) .page-link {
    border-radius: 100%;
    width: 42px;
    height: 42px;
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    color: #a69b8b;
    border: 1px solid #D3CCBF;
    background: transparent;
}

.page-item:not(:first-child):not(:last-child) .page-link:hover {
    color: #6a5e49;
    background: #D8C6A5;
}

.page-item.active a.page-link {
    color: #6a5e49 !important;
    background: #D8C6A5 !important;
}

.page-link:hover {
    background-color: transparent;
    border-color: transparent;
}

a.page-link:hover:first-child svg, a.page-link:hover:last-child svg {
    fill: #d8c6a5;
}

li.page-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

a.page-link svg path:nth-of-type(2) {
    transition: all .3s ease-in-out;
}

a.page-link:hover svg path:nth-of-type(2) {
    fill: #746049;
}

.page-link:focus {
    box-shadow: none;
    border-radius: 0;
    background: transparent;
}

.overlap-body .fatwa-card {
    width: 100%;
    margin: 0 0 30px 0;
    opacity: 1;
}

.overlap-body .fatwa-card:nth-of-type(even) {
    background: #fff;
    border: 1px solid #D8C6A5;
}

button.share-btn.share-fatwa {
    position: relative;
    bottom: 0;
    left: 0;
    font-weight: 100;
    font-size: 13px;
    line-height: 18px;
    color: #908672;
}

button.share-btn.share-fatwa svg {
    margin-right: 10px;
}

.title-details {
    display: flex;
    align-items: center;
    gap: 20px;
}

.title-details h3 {
    margin-bottom: 0;
}

.title-details .article-details {
    display: inline-block;
}

.title-wrapper {
    margin-bottom: 15px;
}

.title-details h3 a {
    font-size: 20px;
}

.overlap-body .fatwa-card .fatwa-content p {
    margin-bottom: 0;
    font-weight: 100;
    font-size: 17px;
    line-height: 22px;
    color: #908672;
}

.video-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

ul.tags.list-inline {
    margin-bottom: 0;
}

ul.tags.cat li a {
    border: 2px solid #D3CCBF;
    border-radius: 25px;
    padding: 12px 20px;
    margin-bottom: 0;
    line-height: 0;
}

ul.tags.cat li svg {
    vertical-align: middle;
}

ul.tags.cat li a:hover, ul.tags.cat li.active a {
    background: transparent;
}

ul.tags.cat li:hover a, ul.tags.cat li.active a {
    font-weight: 100;
    background: #D8C6A5;
    color: #695d48;
}

.slider-controls.video-controls .slick-prev, .slider-controls.video-controls .slick-next {
    bottom: auto;
    position: relative;
    top: auto;
    left: auto;
}

.g-background-default {
    background: #fff !important;
}

.video-details ul li {
    margin: 0;
}

.video-slider .video-card {
    transform: translateY(0);
    margin: 0 10px;
    padding: 0;
    border-radius: 25px;
}

.left-options {
    display: flex;
    align-items: center;
    gap: 30px;
}

header {
    background: #1C4B74;
}

/* Responsive Design */
@media (max-width: 768px) {
    .slider-arrows {
        right: 10px;
    }

    .tabs-container {
        flex-direction: column;
        align-items: center;
    }

    .tab-item {
        max-width: 100%;
    }
}


.videos-container.video-grid .video-card {
    transform: translateY(0);
}

.videos-container.video-grid .video-wrapper {
    height: 215px;
    overflow: hidden;
    border-radius: 25px;
}

.videos-container.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.video-card-title h4 a {
    font-weight: 700;
    font-size: 20px;
    line-height: 22px;
    text-align: right;
    color: #174369;
    margin: 0;
    transition: all .3s ease-in-out;
}
.video-card:hover h4 a {
    color: #24B4E6;
}
.v-options {
    display: flex;
    align-items: center;
    gap: 15px;
}

.videos-container.video-grid .card-body {
    padding-top: 25px;
}

.videos-container.video-grid .card-body .video-card-title {
    margin-bottom: 12px;
}

.videos-container.video-grid .card-body .video-desc {
    font-size: 15px;
    line-height: 22px;
    margin-bottom: 15px;
    font-weight: 100;
    color: #908672;
}

.videos-container.video-grid .video-card {
    margin-bottom: 10px;
}

.widget.widget-title-in-body {
    background: transparent;
    border: 0 none;
    padding: 50px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget.widget-title-in-body .widget-title {
    width: 40%;
    padding-bottom: 0;
}

.videos-container.video-grid.video-carousel {
    display: inherit;
}

.videos-container.video-grid.video-carousel .video-card {
    margin: 0 0 15px 15px;
}

.videos-controls.d-flex.align-items-center .prev-btn, .videos-controls.d-flex.align-items-center .next-btn {
    cursor: pointer;
}

.videos-controls.d-flex.align-items-center {
    gap: 12px;
}

.top-bar {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 60px;
    padding: 15px 25px;
}

.top-bar .tags li {
    margin-bottom: 0;
}

.top-bar ul.tags.cat li a {
    padding: 10px 28px;
}

.books-grid .card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    padding: 25px;
    transition: all .3s ease-in-out;
}

.books-grid .card .card-title a {
    font-weight: 900;
    font-size: 24px;
    line-height: 34px;
    color: #1C4B74;
    transition: all .3s ease-in-out;
}

.books-grid .card:hover .read-more {
    color: #1C4B74;
}

.books-grid .card:hover .card-title a {
    color: #977e60;
}

.books-grid .card img {
    transition: transform 0.4s ease;
    transform-origin: center center;
}

.books-grid .card:hover img {
    transform: scale(1.2);
}

.video-card img {
    transition: transform 0.3s ease;
}

.video-card:hover img {
    transform: scale(1.05);
}

.image-wrapper {
    overflow: hidden;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.books-grid .card .card-body {
    padding: 0 0 0 20px;
}

.books-grid .card .card-body .card-text {
    font-weight: 100;
    font-size: 16px;
    line-height: 22px;
    color: #64748B;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

.read-more {
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    color: #D8C6A5;
    display: flex;
    justify-content: end;
    padding-top: 20px;
    transition: all .3s ease-in-out;
}

.articles-main .slide-item {
    flex: auto;
}

.articles-main .slide-item .card {
    margin: 0;
}

li.list-inline-item.custom-dropdown {
    position: relative;
    cursor: pointer;
}

.top-bar ul.tags.cat .custom-dropdown .dropdown-menu li {
    border: 0 none;
    /* border-bottom: 0 none; */
}

.top-bar ul.tags.cat .custom-dropdown .dropdown-menu li a {
    border-bottom: 0 none;
}

.single-quote-section {
    position: relative;
    padding: 50px 0;
    border-radius: 25px;
    background-color: #E4DBCC4D;
    overflow: visible;
    margin-top: 30px;
}


.single-quote-section::before {
    content: "";
    position: absolute;
    top: auto;
    bottom: 48px;
    right: -75px;
    width: 125px;
    height: 120px;
    background: url("../images/flower-quote.svg") no-repeat center / contain;
    z-index: 2;
}


/*.single-quote-section::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: -35px;*/
/*    right: 0;*/
/*    transform: translateX(-15%);*/
/*    width: 344px;*/
/*    height: 391px;*/
/*    background: url("../images/quar'an-quote.svg") no-repeat center / contain;*/
/*    z-index: 1;*/
/*}*/

.single-quote-section .testimonials-wrap {
    padding: 0 70px;

    max-width: 900px;
    position: relative;
    z-index: 3;

}

.single-quote-section .testimonial-slide {
    padding: 0 20px 0 0;
}

.single-quote-section .quote-text {
    padding: 60px 0;
}

.single-quote-section .q-read:before {
    background-image: url(../images/q-book-flower.svg);
    content: "";
    position: absolute;
    top: 90px;
    left: 94px;
    width: 277px;
    height: 277px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.load-more {
    text-align: center;
    margin: 40px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.load-more .btn.btn-secondary {
    background: #24B4E6;
    border: 1px solid #1ca4d3;
}

.videos-controls .prev-btn svg path, .videos-controls .next-btn svg path {
    transition: all .3s ease-in-out;
}

.videos-controls .prev-btn:hover svg path:nth-of-type(2), .videos-controls .next-btn:hover svg path:nth-of-type(2) {
    fill: #174369;
}

.top-bar.top-bar-single {
    border-radius: 25px;
    margin-top: 30px;
}

.quote-blocks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 30px;
    position: relative;
    /*z-index: 2;*/

}

.page-item.active .page-link {
    z-index: 1;
}

.quote-blocks.what-they-said {
    gap: 50px;
}

.quote-box {
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    padding: 30px;
    position: relative;
}

.quote-box p {
    font-size: 20px !important;
    line-height: 28px !important;
    text-align: right;
    color: #174369 !important;
    padding-left: 50px;
}

.quote-box .share svg {
    margin-right: 8px;
}

.quote-box .share {
    display: flex;
    justify-content: end;
}

.quote-box .share a {
    font-size: 20px;
    line-height: 28px;
    color: #D3CCBF;
}

.circle-arrow.flower-quote {
    width: 267px;
    margin-left: 92px;
    position: relative;
    z-index: 1;
    animation: rotateFlower 40s
    linear infinite;
}

.about-emam .section-title-line {
    margin-bottom: 30px;
}

.quote-decor.says svg {
    vertical-align: text-bottom;
}

.quotes-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
}

.quote-decor.says span {
    font-size: 18px;
    line-height: 28px;
    text-align: right;
    color: #908672;
}

.quote-blocks.what-they-said .quote-box p {
    padding-top: 50px;
}

.quote-blocks.what-they-said .quote-box {
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 4px rgba(216, 198, 165, 0.41);
    border-radius: 24px;
    margin-bottom: 30px;
}

.author {
    position: absolute;
    transform: translate(0px, -50px);
}

.about-emam {
    position: relative;
}

.about-emam:after, .about-emam:before {
    content: '';
    background-image: url(../images/what-they-said-flower.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: contain;
    width: 148px;
    height: 186px;
    position: absolute;
    right: 0;
    bottom: 42%;
    z-index: -1;
}

.about-emam:before {
    background-image: url(../images/left-say-flower.svg);
    background-position: left bottom;
    left: 20px;
    right: auto;
    bottom: 25%;
}

.quote-blocks.single-quote {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 0;
}

.quote-blocks.single-quote .quote-box p {
    padding-left: 100px;
}

.right-top-bar {
    display: flex;
    align-items: center;
    gap: 20px;
}

.widget.top-bar-widget .custom-dropdown {
    padding: 4px 25px;
    border-radius: 50px;
}

.widget.top-bar-widget .custom-dropdown .arrow {
    margin-right: 20px;

}

.tags.cat li a svg {
    margin: 0 0 0 4px;
}

.cat-slider {
    position: relative;
    margin: 30px auto 0;
    background: white;
    padding: 30px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #ccc
}

.cat-slider .tags-wrapper {
    overflow: hidden;
    position: relative;
    flex: 1;
}

.cat-slider .tags.cat {
    display: flex;
    gap: 15px;
    transition: transform 0.4s ease;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cat-slider .tags.cat li {
    flex: 0 0 calc(16% - 5px);
    min-width: calc(16% - 5px);
    margin-bottom: 0;
}

.cat-slider .tags.cat li a {
    display: block;
    padding: 20px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.cat-slider .tags.cat li a:hover {

}

.cat-slider .left-options {
    flex-shrink: 0;
}

.cat-slider .slider-controls {
    display: flex;
    gap: 15px;
}

.cat-slider .cat-prev,
.cat-slider .cat-next {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.cat-slider .cat-prev:hover,
.cat-slider .cat-next:hover {
    transform: scale(1.1);
}

.cat-slider .cat-prev.disabled,
.cat-slider .cat-next.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.cat-slider .cat-prev.disabled:hover,
.cat-slider .cat-next.disabled:hover {
    transform: scale(1);
}

@media (max-width: 768px) {
    .cat-slider {
        flex-direction: column;
    }

    .cat-slider .slider-controls {
        flex-direction: row;
    }

    .cat-slider .tags.cat li {
        flex: 0 0 calc(50% - 7.5px);
        min-width: calc(50% - 7.5px);
    }
}

@media (max-width: 480px) {
    .cat-slider .tags.cat li {
        flex: 0 0 100%;
        min-width: 100%;
    }
}


@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.timeline-container {
    position: relative;
    padding: 0;
}

.timeline-container:before {
    content: "";
    position: absolute;
    background-image: url(../images/flower-right-timeline.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 65%;
    width: 138px;
    height: 138px;
    top: 50%;
}

.timeline-container:after {
    content: "";
    position: absolute;
    background-image: url(../images/left-flower-timeline.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 50%;
    top: 25%;
    width: 212px;
    height: 212px;
    left: 0;
}

/*.timeline-wrapper {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    background-color: #fff;*/
/*    flex-direction: column;*/
/*}*/
/*.timeline-header {*/
/*    padding: 30px 0;*/
/*}*/
/*.timeline {*/
/*    width: 100%;*/
/*}*/
/*.timeline .swiper-container {*/
/*    height: 1300px;*/
/*    width: 100%;*/
/*    position: relative;*/
/*}*/
/*.timeline .swiper-wrapper {*/
/*    transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;*/
/*}*/
/*!*.timeline .swiper-slide {*!*/
/*!*    position: relative;*!*/
/*!*    color: #fff;*!*/
/*!*    overflow: hidden;*!*/
/*!*    background-size: cover;*!*/
/*!*    background-repeat: no-repeat;*!*/
/*!*    background-position: center center;*!*/
/*!*}*!*/
/*!*.timeline .swiper-slide::after {*!*/
/*!*    content: "";*!*/
/*!*    position: absolute;*!*/
/*!*    z-index: 1;*!*/
/*!*    right: -115%;*!*/
/*!*    bottom: -10%;*!*/
/*!*    width: 100%;*!*/
/*!*    height: 100%;*!*/
/*!*    background-color: rgba(0, 0, 0, 0.7);*!*/
/*!*    box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);*!*/
/*!*    border-radius: 100%;*!*/
/*!*}*!*/
/*.timeline .swiper-slide-content {*/
/*    position: absolute;*/
/*    text-align: center;*/
/*    width: 80%;*/
/*    max-width: 900px;*/
/*    right: 50%;*/
/*    top: 13%;*/
/*    transform: translate(50%, 0);*/
/*    font-size: 12px;*/
/*    z-index: 2;*/
/*}*/
/*.timeline .swiper-slide .timeline-year {*/
/*    display: block;*/
/*    font-style: italic;*/
/*    font-size: 42px;*/
/*    margin-bottom: 50px;*/
/*    transform: translate3d(20px, 0, 0);*/
/*    color: #d4a024;*/
/*    font-weight: 300;*/
/*    opacity: 0;*/
/*    transition: 0.2s ease 0.4s;*/
/*}*/
/*.timeline .swiper-slide .timeline-title {*/
/*    font-weight: 800;*/
/*    font-size: 34px;*/
/*    margin: 0 0 30px;*/
/*    opacity: 0;*/
/*    transform: translate3d(20px, 0, 0);*/
/*    transition: 0.2s ease 0.5s;*/
/*}*/
/*.timeline .swiper-slide .timeline-text {*/
/*    line-height: 1.5;*/
/*    opacity: 0;*/
/*    transform: translate3d(20px, 0, 0);*/
/*    transition: 0.2s ease 0.6s;*/
/*}*/
/*.timeline .swiper-slide-active .timeline-year {*/
/*    opacity: 1;*/
/*    transform: translate3d(0, 0, 0);*/
/*    transition: 0.4s ease 1.6s;*/
/*}*/
/*.timeline .swiper-slide-active .timeline-title {*/
/*    opacity: 1;*/
/*    transform: translate3d(0, 0, 0);*/
/*    transition: 0.4s ease 1.7s;*/
/*}*/
/*.timeline .swiper-slide-active .timeline-text {*/
/*    opacity: 1;*/
/*    transform: translate3d(0, 0, 0);*/
/*    transition: 0.4s ease 1.8s;*/
/*}*/
/*.timeline .swiper-pagination {*/
/*    right: 15% !important;*/
/*    height: 100%;*/
/*    display: none;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*    font-style: italic;*/
/*    font-weight: 300;*/
/*    font-size: 18px;*/
/*    z-index: 1;*/
/*}*/
/*.timeline .swiper-pagination::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    left: -30px;*/
/*    top: 0;*/
/*    height: 100%;*/
/*    width: 1px;*/
/*    background-color: rgba(255, 255, 255, 0.2);*/
/*}*/
/*.timeline .swiper-pagination-bullet {*/
/*    width: auto;*/
/*    height: auto;*/
/*    text-align: center;*/
/*    opacity: 1;*/
/*    background: transparent;*/
/*    color: #d4a024;*/
/*    margin: 15px 0 !important;*/
/*    position: relative;*/
/*}*/
/*.timeline .swiper-pagination-bullet::before {*/
/*    content: "";*/
/*    position: absolute;*/
/*    top: 8px;*/
/*    left: -32.5px;*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    border-radius: 100%;*/
/*    background-color: #d4a024;*/
/*    transform: scale(0);*/
/*    transition: 0.2s;*/
/*}*/
/*.timeline .swiper-pagination-bullet-active {*/
/*    color: #d4a024;*/
/*}*/
/*.timeline .swiper-pagination-bullet-active::before {*/
/*    transform: scale(1);*/
/*}*/
/*.timeline .swiper-button-next,*/
/*.timeline .swiper-button-prev {*/
/*    background-size: 20px 20px;*/
/*    top: 15%;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    margin-top: 0;*/
/*    z-index: 2;*/
/*    transition: 0.2s;*/
/*}*/
/*.timeline .swiper-button-prev {*/
/*    left: 8%;*/
/*    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");*/
/*}*/
/*.timeline .swiper-button-prev:hover {*/
/*    transform: translateX(-3px);*/
/*}*/
/*.timeline .swiper-button-next {*/
/*    right: 8%;*/
/*    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");*/
/*}*/
/*.timeline .swiper-button-next:hover {*/
/*    transform: translateX(3px);*/
/*}*/
/*@media screen and (min-width: 768px) {*/
/*    !*.timeline .swiper-slide::after {*!*/
/*    !*    right: -30%;*!*/
/*    !*    bottom: -8%;*!*/
/*    !*    width: 240px;*!*/
/*    !*    height: 50%;*!*/
/*    !*    box-shadow: -230px 0 150px 50vw rgba(0, 0, 0, 0.7);*!*/
/*    !*}*!*/
/*    .timeline .swiper-slide-content {*/
/*        right: 30%;*/
/*        top: 50%;*/
/*        transform: translateY(-40%);*/
/*        width: 900px;*/
/*        font-size: 20px;*/
/*        line-height: 34px;*/
/*        text-align: right;*/
/*        color: #908672;*/
/*    }*/
/*    }*/
/*    .timeline .swiper-slide .timeline-year {*/
/*        margin-bottom: 0;*/
/*        font-size: 32px;*/
/*    }*/
/*    .timeline .swiper-slide .timeline-title {*/
/*        font-size: 46px;*/
/*        margin: 0;*/
/*    }*/
/*    .timeline .swiper-pagination {*/
/*        display: flex;*/
/*    }*/
/*    .timeline .swiper-button-prev {*/
/*        top: 15%;*/
/*        left: auto;*/
/*        right: 15%;*/
/*        transform: rotate(90deg) translate(0, 10px);*/
/*    }*/
/*    .timeline .swiper-button-prev:hover {*/
/*        transform: rotate(90deg) translate(-3px, 10px);*/
/*    }*/
/*    .timeline .swiper-button-next {*/
/*        top: auto;*/
/*        bottom: 15%;*/
/*        right: 15%;*/
/*        transform: rotate(90deg) translate(0, 10px);*/
/*    }*/
/*    .timeline .swiper-button-next:hover {*/
/*        transform: rotate(90deg) translate(3px, 10px);*/
/*    }*/

/*@media screen and (min-width: 1024px) {*/
/*    !*.timeline .swiper-slide::after {*!*/
/*    !*    right: -20%;*!*/
/*    !*    bottom: -12%;*!*/
/*    !*    width: 240px;*!*/
/*    !*    height: 50%;*!*/
/*    !*    box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);*!*/
/*    !*}*!*/
/*    .timeline .swiper-slide-content {*/
/*        right: 25%;*/
/*    }*/
/*}*/


.timeline {
    /*width: 100%;*/
    /*background-color: #fff;*/
    /*box-shadow: 0 5px 25px 5px rgba(0, 0, 0, 0.2);*/
    margin: 0 0 40px 0;
}

.swiper-container-vertical > .swiper-pagination-bullets {
    top: 30%
}

.timeline-header {
    padding: 0 140px 0 0;
    position: relative;
    margin: 30px 0;
}

.timeline-header::before {
    content: "";
    position: absolute;
    right: 90px;
    top: 0;
    height: 100%;
    width: 6px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(211, 204, 191, 0.4) 25%, rgba(211, 204, 191, 0.7) 70%, rgba(211, 204, 191, 0) 100%);
    z-index: 0;
}

.timeline-block {
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #D8C6A5;
    border-radius: 22px;
}

.timeline .swiper-container {
    height: 1200px;
    width: 100%;
    position: relative;
}

.timeline .swiper-wrapper {
    transition: 2s cubic-bezier(0.68, -0.4, 0.27, 1.34) 0.2s;
}

.timeline .swiper-slide {
    position: relative;
    color: #fff;
    overflow: hidden;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

/*.timeline .swiper-slide::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    z-index: 1;*/
/*    right: -115%;*/
/*    bottom: -10%;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    background-color: rgba(0, 0, 0, 0.7);*/
/*    box-shadow: -230px 0 150px 60vw rgba(0, 0, 0, 0.7);*/
/*    border-radius: 100%;*/
/*}*/
.timeline .swiper-slide.scroll-hidden {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.timeline .swiper-slide.scroll-hidden::-webkit-scrollbar {
    display: none;
}

.timeline .swiper-slide-content {
    position: absolute;
    max-width: 1055px;
    right: 50%;
    top: 13%;
    transform: translate(15%, 0);

    z-index: 2;
    width: 100%;
    font-size: 20px;
    line-height: 34px;
    text-align: right;
    color: #908672;
}

.timeline .swiper-slide .timeline-year {
    display: block;
    font-style: italic;
    font-size: 42px;
    margin-bottom: 50px;
    transform: translate3d(20px, 0, 0);
    color: #d4a024;
    font-weight: 300;
    opacity: 0;
    transition: 0.2s ease 0.4s;
}

.timeline-title {
    font-weight: 800;
    font-size: 34px;
    margin: 0 0 30px;
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    transition: 0.2s ease 0.5s;
}

.timeline .swiper-slide .timeline-text {
    line-height: 1.5;
    padding: 30px;
    opacity: 0;
    transform: translate3d(20px, 0, 0);
    transition: 0.2s ease 0.6s;
}

.timeline .swiper-slide-active .timeline-year {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: 0.4s ease 1.6s;
}

.timeline-title {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: 0.4s ease 1.7s;
}

.timeline .swiper-slide-active .timeline-text {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: 0.4s ease 1.8s;
}

.timeline .swiper-pagination {

    display: none;
    flex-direction: column;
    justify-content: center;
    right: 9% !important;
    height: 100%;

}

.timeline .swiper-pagination::before {
    content: "";
    position: absolute;
    right: 58px;
    top: 0;
    height: 100%;
    width: 7px;
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(211, 204, 191, 1) 25%,
            rgba(211, 204, 191, 1) 75%,
            rgba(211, 204, 191, 0) 100%
    );
    z-index: 0;
}


.timeline .swiper-pagination::after {
    content: "";
    position: absolute;
    right: 39%;
    bottom: 0;
    top: auto;
    transform: translateX(98%);
    width: 102px;
    height: 102px;
    background: url("../images/bottom-flower-timeline.svg") no-repeat center;
    background-size: contain;
    z-index: 1;
}

.timeline .swiper-pagination-bullet {
    width: auto;
    height: auto;
    text-align: center;
    opacity: 1;
    background: transparent;
    margin: 9px 0 !important;
    position: relative;
    font-weight: 300;
    font-size: 40px;
    line-height: 36px;
    padding: 10px 90px 10px 130px;
    color: rgba(144, 134, 114, 0.5);
    transition: transform 0.3s ease, color 0.3s ease;

}

.timeline .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    top: 20px;
    right: 52px;
    width: 18px;
    height: 18px;
    border-radius: 100%;
    transform: scale(0.5);
    transition: 0.2s;
    background: #908672;

}

.timeline .swiper-pagination-bullet-active, .timeline .swiper-pagination-bullet:hover {
    background: linear-gradient(
            270deg,
            rgba(216, 198, 165, 0.3) 0%,
            rgba(235, 225, 208, 0.3) 47.3%,
            rgba(255, 255, 255, 0.3) 100%
    );
    border-radius: 22px;
    transform: scale(1.2);
    color: #908672;

}

.timeline .swiper-pagination-bullet-active::before, .timeline .swiper-pagination-bullet:hover::before {
    transform: scale(1);
}

.timeline .swiper-button-next,
.timeline .swiper-button-prev {
    background-size: 20px 20px;
    top: 15%;
    width: 20px;
    height: 20px;
    margin-top: 0;
    z-index: 9999999;
    transition: 0.2s;
}

.timeline .swiper-button-prev {
    left: 8%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}

.timeline .swiper-button-prev:hover {
    transform: translateX(-3px);
}

.timeline .swiper-button-next {
    right: 8%;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23d4a024'%2F%3E%3C%2Fsvg%3E");
}

.timeline .swiper-button-next:hover {
    transform: translateX(3px);
}

.timeline .swiper-pagination-bullet:nth-of-type(2) {
    font-size: 31px;
}

.timeline .swiper-pagination-bullet:nth-of-type(3), .timeline .swiper-pagination-bullet:nth-of-type(4) {
    font-size: 26px;
}

.timeline .swiper-pagination-bullet:nth-of-type(5), .timeline .swiper-pagination-bullet:nth-of-type(6), .timeline .swiper-pagination-bullet:nth-of-type(7) {
    font-size: 21px;
}

.timeline .swiper-pagination-bullet:nth-of-type(8) {
    font-size: 18px;
}

.timeline .swiper-pagination-bullet-active {
    font-size: 36px
}

.timeline-image-wrapper {
    position: relative;
}

.timeline-image-wrapper img {
    margin-bottom: 20px;
}

.timeline-image-wrapper span {
    position: absolute;
    left: 0;
    font-weight: 400;
    font-size: 128px;
    color: #FFFFFF;
    margin: -40px 60px;
}

@media screen and (min-width: 768px) {
    /*.timeline .swiper-slide::after {*/
    /*    right: -30%;*/
    /*    bottom: -8%;*/
    /*    width: 240px;*/
    /*    height: 50%;*/
    /*    box-shadow: -230px 0 150px 50vw rgba(0, 0, 0, 0.7);*/
    /*}*/
    .timeline .swiper-slide-content {
        right: 30%;
        top: 33%;
        transform: translateY(-22%);
        width: 100%;
        font-size: 20px;
        line-height: 34px;
        text-align: right;
        color: #908672;
    }

    .timeline .swiper-slide .timeline-year {
        margin-bottom: 0;
        font-size: 32px;
    }

    .timeline-title {
        font-weight: 400;
        font-size: 24px;
        line-height: 34px;
        text-align: right;
        color: #1C4B74;
        margin: 0;
    }

    .timeline-header p {
        font-size: 36px;
        line-height: 50px;
        text-align: right;
        color: #1C4B74;
    }

    .timeline .swiper-pagination {
        display: flex;
    }

    .timeline .swiper-button-prev {
        top: 2%;
        left: auto;
        right: 15%;
        transform: rotate(90deg) translate(0, 10px);
    }

    .timeline .swiper-button-prev:hover {
        transform: rotate(90deg) translate(-3px, 10px);
    }

    .timeline .swiper-button-next {
        top: auto;
        bottom: 15%;
        right: 15%;
        transform: rotate(90deg) translate(0, 10px);
    }

    .timeline .swiper-button-next:hover {
        transform: rotate(90deg) translate(3px, 10px);
    }
}

@media screen and (min-width: 1024px) {
    /*.timeline .swiper-slide::after {*/
    /*    right: -20%;*/
    /*    bottom: -12%;*/
    /*    width: 240px;*/
    /*    height: 50%;*/
    /*    box-shadow: -230px 0 150px 39vw rgba(0, 0, 0, 0.7);*/
    /*}*/
    .timeline .swiper-slide-content {
        right: 25%;
    }
}


.quote-blocks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    /*max-width: 1200px;*/
    position: relative;
}

.quote-box {
    cursor: pointer;
    position: relative;
    /*overflow: hidden;*/
    transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

.quote-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(216, 198, 165, 0.1) 0%, rgba(211, 204, 191, 0.1) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 16px;
}

.quote-box:hover {
    transform: translateY(-4px) scale(1.02);
}

.quote-box:hover::before {
    opacity: 1;
}

.quote-box.expanded {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(min(1200px, 90vw));
    max-height: 80vh;
    /*overflow-y: auto;*/
    background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    padding: 40px;
}

.quote-box.expanded::before {
    opacity: 1;
}

/* Backdrop للبوكس المفتوح */
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(4px);
}

.backdrop.active {
    opacity: 1;
    pointer-events: all;
}

.quote-box p {
    transition: all 0.5s ease;
    opacity: 0.9;
}

.quote-box:not(.expanded) p {
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.what-they-said .quote-box:not(.expanded) p {
    max-height: 5.5em;
}

.quote-box.expanded p {
    opacity: 1;
    max-height: none;
}

.quote-box:hover p {
    opacity: 1;
}

/* زر الإغلاق */
.close-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(216, 198, 165, 0.2);
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.quote-box.expanded .close-btn {
    display: flex;
}

.close-btn:hover {
    background: rgba(216, 198, 165, 0.4);
    transform: rotate(90deg) scale(1.1);
}

.close-btn::before,
.close-btn::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: #D8C6A5;
    transition: all 0.3s ease;
}

.close-btn::before {
    transform: rotate(45deg);
}

.close-btn::after {
    transform: rotate(-45deg);
}

/* إضافة مؤشر للتوسيع */
.quote-box::after {
    content: '◀';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    color: #D8C6A5;
    font-size: 14px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quote-box:hover::after {
    opacity: 0.6;
    bottom: 12px;
}

.quote-box.expanded::after {
    display: none;
}

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

    .quote-box.expanded {
        width: 95vw;
        padding: 30px 20px;
    }
}

.form-control {
    padding: 10px 20px;
    color: #333;
    border-radius: 25px;
    text-align: right;
    border: 1px solid #f1e7dc;
}

.form-label {
    font-size: 18px;
    color: #174369;
}

.hero-image .big-flower img {
    width: 254px;
    height: 254px;
}

.big-flower {
    position: absolute;
    left: 25%;
    top: 65%;
    width: 254px;
    transform: translate(-50%, -50%);
    animation: rotateFlower 40s linear infinite;
    transform-origin: center center;
    opacity: 0.8;
    z-index: -1;
}

@keyframes rotateFlower {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}