/* ========================================




   Mashael Premium CSS v2.0




   Hero Slider + Premium Components




   ======================================== */









/* ========================================




   1. PRELOADER




   ======================================== */









.premium-preloader {




    position: fixed;




    inset: 0;




    background: var(--primary);




    z-index: 99999;




    display: flex;




    align-items: center;




    justify-content: center;




    transition: opacity 0.5s var(--ease);




}









.spinner {




    width: 48px;




    height: 48px;




    position: relative;




}









.double-bounce1, .double-bounce2 {




    width: 100%;




    height: 100%;




    border-radius: 50%;




    background: var(--gold);




    opacity: 0.5;




    position: absolute;




    top: 0;




    left: 0;




    animation: sk-bounce 2s infinite ease-in-out;




}









.double-bounce2 { animation-delay: -1s; }









@keyframes sk-bounce {




    0%, 100% { transform: scale(0); }




    50% { transform: scale(1); }




}









/* ========================================




   2. HERO SLIDER - CINEMATIC




   ======================================== */









.hero-slider {




    padding: 0 !important;




    margin: 0 !important;




    position: relative;




    width: 100%;




    height: 100vh;




    min-height: 600px;




    max-height: 1000px;




    overflow: hidden;




}









.hero-swiper {




    width: 100%;




    height: 100%;




}









.hero-swiper .swiper-slide {




    position: relative;




    display: flex;




    align-items: center;




    overflow: hidden;




}









/* Background Image with Ken Burns */




.slide-bg {




    position: absolute;




    inset: 0;




    background-size: cover;




    background-position: center;




    z-index: 0;




    transform: scale(1.15);




    transition: transform 8s linear;




}









.swiper-slide-active .slide-bg {




    transform: scale(1);




}









/* Gradient Overlay - Cinematic */




.slide-overlay {




    position: absolute;




    inset: 0;




    z-index: 1;




    background:




        linear-gradient(180deg, rgba(9,27,48,0.5) 0%, rgba(9,27,48,0.2) 40%, rgba(9,27,48,0.7) 100%),
        linear-gradient(90deg, rgba(9,27,48,0.8) 0%, rgba(9,27,48,0.2) 60%, transparent 100%);
}









/* Slide Content */




.slide-content {




    position: relative;




    z-index: 3;




    max-width: 650px;




    padding: 2rem 0;




}









.slide-tag {




    display: inline-flex;




    align-items: center;




    gap: 0.6rem;




    font-size: 0.85rem;




    font-weight: 700;




    color: var(--gold-light, #D9BA6E);




    text-transform: uppercase;




    letter-spacing: 0.15em;




    margin-bottom: 1.25rem;




    opacity: 0;




    transform: translateY(20px);




    transition: all 0.6s var(--ease-out, ease) 0.2s;




}









.slide-tag::before {




    content: '';




    width: 40px;




    height: 2px;




    background: var(--gold, #C8A355);




    border-radius: 2px;




}









.swiper-slide-active .slide-tag {




    opacity: 1;




    transform: translateY(0);




}









.slide-title {




    font-family: var(--font-heading, 'Tajawal', sans-serif);




    font-size: clamp(2.25rem, 5.5vw, 3.75rem);




    font-weight: 800;




    color: #fff;




    line-height: 1.15;




    margin-bottom: 1.25rem;




    opacity: 0;




    transform: translateY(30px);




    transition: all 0.7s var(--ease-out, ease) 0.35s;




}









.swiper-slide-active .slide-title {




    opacity: 1;




    transform: translateY(0);




}









.slide-desc {




    font-size: 1.15rem;




    color: rgba(255,255,255,0.8);




    line-height: 1.7;




    margin-bottom: 2rem;




    max-width: 500px;




    opacity: 0;




    transform: translateY(25px);




    transition: all 0.7s var(--ease-out, ease) 0.5s;




}









.swiper-slide-active .slide-desc {




    opacity: 1;




    transform: translateY(0);




}









.slide-actions {




    display: flex;




    gap: 1rem;




    flex-wrap: wrap;




    opacity: 0;




    transform: translateY(25px);




    transition: all 0.7s var(--ease-out, ease) 0.65s;




}









.swiper-slide-active .slide-actions {




    opacity: 1;




    transform: translateY(0);




}









/* Slider Buttons */




.slide-actions .btn-gold {




    background: var(--gold, #C8A355);




    color: #fff;




    border: 2px solid var(--gold, #C8A355);




    padding: 0.9rem 2.2rem;




    font-size: 1rem;




}









.slide-actions .btn-gold:hover {




    background: var(--gold-dark, #A6883F);




    border-color: var(--gold-dark, #A6883F);




    transform: translateY(-2px);




    box-shadow: 0 4px 25px rgba(200,163,85,0.4);




}









.slide-actions .btn-outline-light {




    padding: 0.9rem 2.2rem;




    font-size: 1rem;




}









/* Swiper Navigation Arrows */




.hero-swiper .swiper-button-next,




.hero-swiper .swiper-button-prev {




    width: 52px;




    height: 52px;




    border-radius: 50%;




    background: rgba(255,255,255,0.08);




    backdrop-filter: blur(10px);




    border: 1px solid rgba(255,255,255,0.15);




    transition: all 0.35s var(--ease, ease);




    color: #fff;




}









.hero-swiper .swiper-button-next:after,




.hero-swiper .swiper-button-prev:after {




    font-size: 1rem;




    font-weight: 700;




}









.hero-swiper .swiper-button-next:hover,




.hero-swiper .swiper-button-prev:hover {




    background: var(--gold, #C8A355);




    border-color: var(--gold, #C8A355);




    transform: scale(1.08);




}









/* Swiper Pagination */




.hero-swiper .swiper-pagination {




    bottom: 40px;




}









.hero-swiper .swiper-pagination-bullet {




    width: 10px;




    height: 10px;




    background: rgba(255,255,255,0.4);




    opacity: 1;




    border-radius: 10px;




    transition: all 0.4s var(--ease, ease);




    margin: 0 5px;




}









.hero-swiper .swiper-pagination-bullet-active {




    background: var(--gold, #C8A355);




    width: 32px;




}









/* Hero Progress Bar */




.hero-progress {




    position: absolute;




    bottom: 0;




    left: 0;




    right: 0;




    height: 3px;




    background: rgba(255,255,255,0.1);




    z-index: 10;




}









.hero-progress-bar {




    height: 100%;




    background: linear-gradient(90deg, var(--gold, #C8A355), var(--gold-light, #D9BA6E));




    width: 0%;




    transition: width 0.1s linear;




}









/* Bottom wave divider */




.hero-wave {




    display: none;




}









.hero-wave svg {




    display: none;




}









/* Decorative floating elements */




.hero-decor {




    position: absolute;




    z-index: 2;




    pointer-events: none;




}









.hero-decor-line {




    top: 50%;




    left: 5%;




    transform: translateY(-50%);




    width: 1px;




    height: 120px;




    background: linear-gradient(180deg, transparent, rgba(200,163,85,0.4), transparent);




}









.hero-decor-dot {




    bottom: 25%;




    left: 8%;




    width: 6px;




    height: 6px;




    border-radius: 50%;




    background: var(--gold, #C8A355);




    opacity: 0.5;




    animation: pulse-dot 3s infinite;




}









@keyframes pulse-dot {




    0%, 100% { opacity: 0.3; transform: scale(1); }




    50% { opacity: 0.7; transform: scale(1.5); }




}









/* ========================================




   3. PREMIUM CARDS




   ======================================== */









.premium-card {




    border-radius: var(--r, 12px);




    overflow: hidden;




    background: var(--bg, #fff);




    border: 1px solid var(--border-light, #F0EDE8);




    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);




}









.premium-card:hover {




    transform: translateY(-8px);




    box-shadow: 0 16px 40px rgba(0,0,0,0.1);




    border-color: transparent;




}









.premium-image-wrap {




    overflow: hidden;




    height: 260px;




    position: relative;




}









.premium-image-wrap img {




    width: 100%;




    height: 100%;




    object-fit: cover;




    transition: transform 0.7s var(--ease, ease);




}









.premium-card:hover .premium-image-wrap img {




    transform: scale(1.07);




}









.premium-card-content {




    padding: 1.75rem;




}









.premium-card-content .card-title {




    color: var(--primary, #091B30);




    font-size: 1.15rem;




    font-weight: 700;




    margin-bottom: 0.5rem;




}









.premium-card-content .card-description {




    color: var(--text-muted, #7A8599);




    font-size: 0.92rem;




    line-height: 1.65;




    margin-bottom: 1rem;




}









/* ========================================




   4. PREMIUM CTA SECTION




   ======================================== */









.premium-cta-section {




    background: linear-gradient(135deg, var(--primary, #091B30) 0%, var(--primary-lighter, #163560) 100%);




    padding: 6rem 0;




    position: relative;




    overflow: hidden;




}









.premium-cta-section::before {




    content: '';




    position: absolute;




    inset: 0;




    background: radial-gradient(ellipse at 30% 120%, rgba(200,163,85,0.1) 0%, transparent 50%);




    pointer-events: none;




}









.premium-cta-inner {




    position: relative;




    z-index: 2;




    text-align: center;




    max-width: 700px;




    margin: 0 auto;




}









.premium-cta-inner h2 {




    color: #fff;




    font-size: clamp(1.75rem, 4vw, 2.5rem);




    margin-bottom: 1rem;




    font-weight: 800;




}









.premium-cta-inner p {




    color: var(--text-on-dark-muted, #A0AABE);




    font-size: 1.1rem;




    margin-bottom: 2.5rem;




    line-height: 1.7;




}









.premium-cta-inner .btn-gold {




    padding: 1rem 2.5rem;




    font-size: 1rem;




    animation: pulse-gold 3s infinite;




}









@keyframes pulse-gold {




    0% { box-shadow: 0 0 0 0 rgba(200,163,85,0.5); }




    70% { box-shadow: 0 0 0 15px rgba(200,163,85,0); }




    100% { box-shadow: 0 0 0 0 rgba(200,163,85,0); }




}









/* ========================================




   5. SCROLL PROGRESS ON HEADER




   ======================================== */









.header-progress {




    position: absolute;




    bottom: 0;




    left: 0;




    right: 0;




    height: 2px;




    background: transparent;




}









.header-progress-bar {




    height: 100%;




    background: linear-gradient(90deg, var(--gold, #C8A355), var(--gold-light, #D9BA6E));




    width: 0%;




    transition: width 0.15s linear;




}









/* ========================================




   6. SECTION TRANSITIONS




   ======================================== */









.section-divider {




    width: 100%;




    height: 1px;




    background: linear-gradient(90deg, transparent, var(--border, #E5E3DE), transparent);




    margin: 0;




}









/* ========================================




   7. RESPONSIVE PREMIUM




   ======================================== */









@media (max-width: 768px) {




    .hero-slider {




    padding: 0 !important;




    margin: 0 !important;




        height: 85vh;




        min-height: 500px;




    }









    .slide-content {




        max-width: 100%;




        padding: 1.5rem;




        text-align: center;




    }









    .slide-tag {




        justify-content: center;




    }









    .slide-title {




        font-size: clamp(1.75rem, 6vw, 2.5rem);




    }









    .slide-desc {




        font-size: 1rem;




        max-width: 100%;




    }









    .slide-actions {




        justify-content: center;




    }









    .slide-overlay {




        background:




        linear-gradient(180deg, rgba(9,27,48,0.5) 0%, rgba(9,27,48,0.2) 40%, rgba(9,27,48,0.7) 100%),
        linear-gradient(90deg, rgba(9,27,48,0.8) 0%, rgba(9,27,48,0.2) 60%, transparent 100%);
}









    .hero-swiper .swiper-button-next,




    .hero-swiper .swiper-button-prev {




        display: none;




    }









    .hero-swiper .swiper-pagination {




        bottom: 25px;




    }









    .hero-decor { display: none; }




}









@media (max-width: 480px) {




    .hero-slider {




    padding: 0 !important;




    margin: 0 !important;




        height: 75vh;




        min-height: 420px;




    }









    .slide-content {




        padding: 1rem;




    }









    .slide-actions .btn {




        width: 100%;




        justify-content: center;




    }




}