:root{
    --brand-red:#c8102e;
    --brand-red-dark:#8f0b20;
    --brand-green:#0e8a3e;
    --brand-blue:#1a4fa0;
    --bg-dark:#0b0e13;
    --panel-dark:#12161d;
}

*{box-sizing:border-box;}


/* Scroll sirf preloader active hote waqt lock hoti hai */
body.preloader-active{
    height:100%;
    overflow:hidden;
}

/* ================= PRELOADER ================= */
#preloader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:
            radial-gradient(circle at 50% 40%, rgba(26,79,160,.25) 0%, transparent 55%),
            radial-gradient(circle at 50% 60%, rgba(14,138,62,.18) 0%, transparent 55%),
            var(--bg-dark);
    transition:opacity .6s ease, visibility .6s ease;
}

#preloader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:38px;
}

/* ---------- Orbit system ---------- */
.orbit-stage{
    position:relative;
    width:230px;
    height:230px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Faint decorative rings */
.orbit-ring{
    position:absolute;
    border-radius:50%;
    border:1px dashed rgba(255,255,255,.14);
}
.orbit-ring.r1{width:230px;height:230px;}
.orbit-ring.r2{width:230px;height:230px;transform:rotate(45deg);border-color:rgba(200,16,46,.18);}

/* Center compass glow behind center plane */
.center-glow{
    position:absolute;
    width:92px;
    height:92px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(26,79,160,.55), rgba(14,138,62,.35) 55%, transparent 75%);
    filter:blur(2px);
    animation:pulseGlow 2.2s ease-in-out infinite;
}
@keyframes pulseGlow{
    0%,100%{transform:scale(.9);opacity:.75;}
    50%{transform:scale(1.15);opacity:1;}
}

/* Center plane */
.plane-center{
    position:relative;
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:3;
    animation:hover 1.8s ease-in-out infinite;
}
@keyframes hover{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(-6px);}
}
.plane-center svg{
    width:100%;
    height:100%;
    transform:rotate(-45deg);
    filter:drop-shadow(0 0 6px rgba(255,255,255,.55));
}

/* Orbiting groups: one rotates the whole 230px circle */
.orbit{
    position:absolute;
    inset:0;
    animation:spin 3.4s linear infinite;
}
.orbit.reverse{
    animation:spin 4.6s linear infinite reverse;
}
@keyframes spin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* small orbiting plane sits at top of its orbit circle, tangent-facing */
.orbit-plane{
    position:absolute;
    top:-2px;
    left:50%;
    width:30px;
    height:30px;
    margin-left:-15px;
    transform:rotate(45deg);
}
.orbit.reverse .orbit-plane{
    transform:rotate(-135deg);
}
.orbit-plane svg{
    width:100%;
    height:100%;
    filter:drop-shadow(0 0 4px rgba(0,0,0,.5));
}

/* ---------- Brand text ---------- */
.brand-text{
    text-align:center;
}
.brand-title{
    font-weight:800;
    font-size:2.1rem;
    letter-spacing:2px;
    margin:0;
    color:var(--brand-red);
    text-shadow:0 2px 0 var(--brand-red-dark), 0 4px 10px rgba(0,0,0,.5);
}
.brand-sub{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-top:6px;
}
.brand-sub span{
    font-weight:600;
    letter-spacing:4px;
    font-size:.85rem;
    color:#eef1f5;
}
.brand-sub .line{
    width:36px;
    height:2px;
    background:var(--brand-red);
}

/* ---------- Loading progress ---------- */
.loading-status{
    width:220px;
    text-align:center;
}
.status-text{
    font-size:.8rem;
    letter-spacing:1px;
    color:#9aa4b2;
    margin-bottom:8px;
}
.status-text .pct{
    color:#fff;
    font-weight:600;
}
.progress{
    height:5px;
    background:rgba(255,255,255,.08);
    border-radius:20px;
    overflow:hidden;
}
.progress-bar-brand{
    background:linear-gradient(90deg, var(--brand-blue), var(--brand-green) 55%, var(--brand-red));
    transition:width .15s ease;
}

/* ================= PAGE CONTENT BEHIND ================= */
.page-content{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-align:center;
    padding:2rem;
}















/* =========================================================
   ARAFAT INTERNATIONAL TRAVEL — HOME PAGE STYLES
   Single external stylesheet (moved out of welcome.blade.php)
   Color scheme:
     --primary   (blue)  #0250A4
     --secondary (green) #017402
     --accent    (red)   #D40108
   ========================================================= */

:root{
    --primary:#0250A4;
    --primary-dark:#013A78;
    --primary-light:rgba(2,80,164,.08);
    --secondary:#017402;
    --secondary-dark:#015601;
    --accent:#D40108;
    --accent-dark:#A80106;
    --ink:#0d1b3e;
    --muted:#5a6a8a;
}

.hero-shapes .shape.three{ left:75%; }

/* =========================================================
   1. CTA STRIP (skytravel1 — currently hidden with d-none)
   ========================================================= */
.skytravel1-cta-section{ padding:100px 0; background:#f8fbff; }
.skytravel1-container{ max-width:1320px; margin:auto; padding:0 15px; }
.skytravel1-wrapper{
    display:flex; align-items:center; overflow:hidden;
    background:var(--primary); border-radius:30px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    border:1px solid #e8eef5; position:relative;
}
.skytravel1-content-area{ width:55%; padding:70px; background:var(--primary); }
.skytravel1-badge{
    display:inline-block; background:rgba(255,255,255,.12); color:#fff;
    padding:10px 20px; border-radius:50px; font-size:14px; font-weight:700; margin-bottom:20px;
}
.skytravel1-title{ color:#fff; font-size:54px; font-weight:800; line-height:1.2; margin-bottom:20px; }
.skytravel1-description{ color:rgba(255,255,255,.85); font-size:16px; line-height:1.9; margin-bottom:35px; }
.skytravel1-button-group{ display:flex; gap:15px; flex-wrap:wrap; }
.skytravel1-login-btn{
    display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:#fff;
    text-decoration:none; padding:15px 35px; border-radius:50px; font-size:15px; font-weight:700; transition:.4s ease;
}
.skytravel1-login-btn:hover{ background:var(--accent-dark); color:#fff; transform:translateY(-3px); }
.skytravel1-register-btn{
    display:inline-flex; align-items:center; gap:10px; background:#E5E7EB; color:var(--primary);
    text-decoration:none; padding:15px 35px; border-radius:50px; font-size:15px; font-weight:700; transition:.4s ease;
}
.skytravel1-register-btn:hover{ background:#fff; color:var(--primary); transform:translateY(-3px); }
.skytravel1-image-area{ width:45%; height:520px; overflow:hidden; }
.skytravel1-image-area img{ width:100%; height:100%; object-fit:cover; transition:.8s ease; }
.skytravel1-wrapper:hover .skytravel1-image-area img{ transform:scale(1.05); }
.skytravel1-wrapper::before{ content:''; position:absolute; top:0; left:0; width:6px; height:100%; background:var(--secondary); }

@media(max-width:1199px){ .skytravel1-title{ font-size:46px; } }
@media(max-width:991px){
    .skytravel1-wrapper{ flex-direction:column; }
    .skytravel1-content-area, .skytravel1-image-area{ width:100%; }
    .skytravel1-content-area{ padding:50px 35px; }
    .skytravel1-title{ font-size:36px; }
    .skytravel1-image-area{ height:350px; }
}
@media(max-width:767px){
    .skytravel1-content-area{ padding:40px 25px; }
    .skytravel1-title{ font-size:28px; }
    .skytravel1-button-group{ flex-direction:column; }
    .skytravel1-login-btn, .skytravel1-register-btn{ justify-content:center; width:100%; }
    .skytravel1-image-area{ height:280px; }
}

/* =========================================================
   2. PREMIUM TRAVEL SHOWCASE ("Travel Smarter With ...")
   ========================================================= */
.ms-travel-showcase{ padding:120px 0; background:var(--primary); position:relative; overflow:hidden; }
.ms-travel-showcase:before{
    content:''; position:absolute; width:450px; height:450px; background:rgba(255,255,255,.03);
    border-radius:50%; top:-200px; right:-150px;
}
.ms-travel-showcase:after{
    content:''; position:absolute; width:350px; height:350px; background:rgba(212,1,8,.06);
    border-radius:50%; bottom:-150px; left:-100px;
}
.ms-travel-container{ width:92%; max-width:1320px; margin:auto; position:relative; z-index:2; }
.ms-travel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.ms-travel-badge{
    display:inline-block; padding:10px 20px; background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15); color:#fff; border-radius:50px; margin-bottom:25px; font-size:14px; font-weight:600;
}
.ms-travel-content h2{ color:#fff; font-size:52px; font-weight:800; line-height:1.2; margin-bottom:25px; }
.ms-main-text{ color:rgba(255,255,255,.85); font-size:17px; line-height:30px; margin-bottom:35px; }
.ms-feature-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:40px; }
.ms-feature-item{ display:flex; align-items:center; color:#fff; font-weight:500; }
.ms-feature-item i{ color:var(--secondary); margin-right:12px; font-size:18px; background:#fff; border-radius:50%; padding:2px; }
.ms-action-buttons{ display:flex; gap:15px; flex-wrap:wrap; }
.ms-btn{ padding:15px 28px; border-radius:50px; text-decoration:none; font-weight:700; transition:.4s; display:inline-flex; align-items:center; gap:10px; }
.ms-btn-light{ background:#fff; color:var(--primary); }
.ms-btn-light:hover{ transform:translateY(-5px); }
.ms-btn-red{ background:var(--accent); color:#fff; }
.ms-btn-red:hover{ background:var(--accent-dark); transform:translateY(-5px); }
.ms-btn-whatsapp{ background:var(--secondary); color:#fff; }
.ms-btn-whatsapp:hover{ background:var(--secondary-dark); transform:translateY(-5px); }

.ms-travel-images{ position:relative; min-height:550px; }
.ms-image-large{ width:78%; overflow:hidden; border-radius:30px; box-shadow:0 20px 60px rgba(0,0,0,.30); }
.ms-image-large img{ width:100%; display:block; transition:.5s; }
.ms-image-large:hover img{ transform:scale(1.08); }
.ms-image-small{
    position:absolute; right:0; bottom:40px; width:45%; overflow:hidden; border-radius:25px;
    border:6px solid #fff; box-shadow:0 15px 40px rgba(0,0,0,.35);
}
.ms-image-small img{ width:100%; display:block; transition:.5s; }
.ms-image-small:hover img{ transform:scale(1.08); }

@media(max-width:991px){
    .ms-travel-grid{ grid-template-columns:1fr; }
    .ms-travel-content h2{ font-size:40px; }
    .ms-travel-images{ min-height:auto; }
}
@media(max-width:767px){
    .ms-travel-content h2{ font-size:32px; }
    .ms-feature-list{ grid-template-columns:1fr; }
    .ms-image-large{ width:100%; }
    .ms-image-small{ position:relative; width:70%; margin:20px auto 0; right:auto; bottom:auto; }
}

/* =========================================================
   3. STEPS & PROCEDURE (alt card style, currently unused
      markup lives in booking-process-section below)
   ========================================================= */
.ms-procedure-area{ padding:120px 0; background:#f4f9ff; position:relative; }
.ms-procedure-container{ width:90%; max-width:1320px; margin:auto; }
.ms-procedure-title{ text-align:center; margin-bottom:70px; }
.ms-procedure-title span{
    display:inline-block; background:rgba(212,1,8,.08); color:var(--accent);
    padding:10px 22px; border-radius:50px; font-size:14px; font-weight:700; letter-spacing:1px;
}
.ms-procedure-title h2{ font-size:48px; font-weight:800; color:var(--primary); margin-top:20px; margin-bottom:15px; }
.ms-procedure-title p{ max-width:650px; margin:auto; color:#666; line-height:28px; }
.ms-process-wrapper{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; }
.ms-process-card{
    position:relative; background:#fff; padding:50px 30px; text-align:center; border-radius:25px;
    overflow:hidden; transition:all .4s ease; box-shadow:0 15px 40px rgba(0,0,0,.06);
}
.ms-process-card::before{
    content:""; position:absolute; top:0; left:0; width:100%; height:6px;
    background:linear-gradient(90deg,var(--accent),var(--primary));
}
.ms-process-card:hover{ transform:translateY(-15px); box-shadow:0 25px 60px rgba(0,0,0,.12); }
.ms-step-count{ position:absolute; top:15px; right:20px; font-size:70px; font-weight:900; color:rgba(2,80,164,.06); line-height:1; }
.ms-icon-circle{
    width:95px; height:95px; margin:0 auto 25px; border-radius:100%; background:rgba(212,1,8,.08);
    display:flex; align-items:center; justify-content:center; transition:all .4s ease;
}
.ms-icon-circle i{ font-size:40px; color:var(--accent); transition:all .4s ease; }
.ms-process-card:hover .ms-icon-circle{ background:var(--accent); transform:rotate(360deg); }
.ms-process-card:hover .ms-icon-circle i{ color:#fff; }
.ms-process-card h4{ font-size:24px; font-weight:700; color:var(--primary); margin-bottom:15px; }
.ms-process-card p{ color:#666; line-height:28px; margin:0; }

@media(max-width:991px){
    .ms-process-wrapper{ grid-template-columns:repeat(2,1fr); }
    .ms-procedure-title h2{ font-size:36px; }
}
@media(max-width:767px){
    .ms-process-wrapper{ grid-template-columns:1fr; }
    .ms-procedure-title h2{ font-size:30px; }
    .ms-process-card{ padding:40px 25px; }
}

/* =========================================================
   4. LANDING GROUPS SECTION (flight results widget)
   ========================================================= */
.api-landing-groups-section{ background:#f8fbff; position:relative; padding:80px 0; display:none; }
.api-landing-groups-section .section-header{ text-align:center; margin-bottom:50px; }
.api-landing-groups-section .section-header .section-badge{
    display:inline-block; background:var(--primary-light); color:var(--primary); padding:8px 20px;
    border-radius:50px; font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:15px;
}
.api-landing-groups-section .section-header h2{ font-size:42px; font-weight:800; color:var(--ink); margin-bottom:15px; }
.api-landing-groups-section .section-header h2 span{ color:var(--accent); }
.api-landing-groups-section .section-header p{ max-width:650px; margin:0 auto; color:#6c757d; font-size:16px; line-height:28px; }

.api-landing-groups-container{
    max-width:1320px; margin:0 auto; padding:20px 15px; height:600px; overflow-y:auto; scroll-behavior:smooth;
    background:#fff; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,0.06);
}
.api-landing-groups-container::-webkit-scrollbar{ width:8px; }
.api-landing-groups-container::-webkit-scrollbar-track{ background:#e9ecef; border-radius:10px; }
.api-landing-groups-container::-webkit-scrollbar-thumb{ background:var(--primary); border-radius:10px; }
.api-landing-groups-container::-webkit-scrollbar-thumb:hover{ background:var(--primary-dark); }

.landing-flight-header{ background:linear-gradient(to right,#f8f9fa,#e9ecef); border-radius:8px; padding:12px 16px; margin-bottom:8px; }
.landing-airline-logo{ width:120px; height:auto; object-fit:contain; border-radius:8px; padding:6px; background:#fff; box-shadow:0 2px 4px rgba(0,0,0,0.1); }
.landing-sector-code{ font-size:20px; font-weight:700; color:var(--primary); }
.landing-flight-table{
    font-size:14px; border-collapse:separate; border-spacing:0; width:100%; border-radius:8px;
    overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,0.05); background:#fff;
}
.landing-flight-table th{ background:var(--primary) !important; color:#fff; padding:10px 8px; font-weight:600; text-align:center; vertical-align:middle; font-size:13px; }
.landing-flight-table td{ padding:10px 8px; vertical-align:middle; border-bottom:1px solid #dee2e6; text-align:center; }
.landing-flight-table tr:last-child td{ border-bottom:none; }
.landing-flight-table tr:hover{ background-color:var(--primary-light); }
.landing-btn-book{
    background-color:var(--accent); color:#fff; border:none; padding:8px 16px; border-radius:6px;
    font-weight:600; font-size:13px; transition:all 0.3s; text-decoration:none; display:inline-block;
}
.landing-btn-book:hover{ background-color:var(--accent-dark); transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1); color:#fff; }
.landing-meal-yes{ color:var(--secondary); font-weight:600; }
.landing-meal-no{ color:var(--accent); font-weight:600; }
.landing-price-tag{ font-size:14px; color:var(--accent); font-weight:700; }
.landing-flight-detail{ font-size:13px; margin-bottom:2px; font-weight:600; }
.landing-flight-detail i{ width:16px; color:var(--primary); }

.landing-loader-wrapper{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:560px; background:#fff; border-radius:12px; width:100%; }
.landing-loader-plane{ font-size:48px; color:var(--primary); animation:landingPlaneTakeoff 1.2s ease-in-out infinite; }
.landing-loader-text{ margin-top:20px; font-size:16px; color:#6c757d; font-weight:500; letter-spacing:0.5px; }
.landing-loader-dots::after{ content:''; animation:landingDots 1.5s steps(4,end) infinite; }
@keyframes landingDots{ 0%{content:'';} 25%{content:'.';} 50%{content:'..';} 75%{content:'...';} 100%{content:'';} }
@keyframes landingPlaneTakeoff{
    0%{ transform:translateY(0) rotate(0deg); opacity:1; }
    50%{ transform:translateY(-20px) rotate(-5deg); opacity:0.7; }
    100%{ transform:translateY(0) rotate(0deg); opacity:1; }
}
.landing-loader-progress-bar{ width:200px; height:4px; background:#e9ecef; border-radius:4px; margin-top:20px; overflow:hidden; position:relative; }
.landing-loader-progress-bar::after{
    content:''; position:absolute; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg,var(--primary),#3498db,var(--primary)); border-radius:4px;
    animation:landingProgressSlide 1.5s ease-in-out infinite;
}
@keyframes landingProgressSlide{ 0%{ left:-100%; } 100%{ left:100%; } }
.landing-loader-container{ background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.08); padding:40px; text-align:center; width:100%; max-width:450px; margin:0 auto; }

@media(max-width:767px){
    .api-landing-groups-container{ height:450px; padding:12px; }
    .landing-loader-wrapper{ height:410px; }
    .landing-flight-table{ font-size:12px; }
    .landing-flight-table th, .landing-flight-table td{ padding:6px 4px; }
    .landing-airline-logo{ width:80px; }
    .landing-sector-code{ font-size:16px; }
    .landing-btn-book{ padding:6px 12px; font-size:11px; }
    .api-landing-groups-section .section-header h2{ font-size:28px; }
    .api-landing-groups-section .section-header p{ font-size:14px; padding:0 15px; }
}

/* =========================================================
   5. DESTINATION AUTO SLIDER (top marquee — 1st section)
   ========================================================= */
.pd-marquee-outer{ overflow:hidden; position:relative; width:100%; }
.pd-marquee-outer::before, .pd-marquee-outer::after{ content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.pd-marquee-outer::before{ left:0; background:linear-gradient(to right,#ffffff,rgba(255,255,255,0)); }
.pd-marquee-outer::after{ right:0; background:linear-gradient(to left,#ffffff,rgba(255,255,255,0)); }
.pd-marquee-track{ display:flex; width:max-content; gap:20px; padding:10px 5px 20px; animation:pdMarqueeScroll 35s linear infinite; }
.pd-marquee-outer:hover .pd-marquee-track{ animation-play-state:paused; }
.pd-slide{ flex:0 0 auto; width:290px; }
.pd-slide .premium-destination-card{ width:100%; }
@keyframes pdMarqueeScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }

@media(max-width:767px){
    .pd-slide{ width:220px; }
    .pd-marquee-track{ animation-duration:22s; }
    .pd-marquee-outer::before, .pd-marquee-outer::after{ width:40px; }
}

/* =========================================================
   6. COMPREHENSIVE PILGRIMAGE SERVICES (new services section)
   ========================================================= */
.service-area-modern{
    padding:100px 0; background:linear-gradient(160deg,#eef4fb 0%,#e4eefb 45%,#d8e8f8 100%);
    position:relative; overflow:hidden;
}
.container-modern{ max-width:1320px; margin:0 auto; padding:0 20px; position:relative; z-index:2; }

.services-header{
    display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:50px; flex-wrap:wrap; gap:20px;
}
.header-left .sub-title-modern{
    display:inline-block; background:var(--primary-light); color:var(--primary); padding:8px 20px;
    border-radius:50px; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; margin-bottom:14px;
}
.header-left .sec-title-modern{ font-size:42px; font-weight:900; color:var(--ink); margin:0; line-height:1.2; }
.header-right .btn-modern{
    display:inline-flex; align-items:center; gap:10px; background:var(--primary); color:#fff;
    padding:14px 30px; border-radius:50px; text-decoration:none; font-weight:700; transition:.35s ease;
    box-shadow:0 8px 22px rgba(2,80,164,.25);
}
.header-right .btn-modern:hover{ background:var(--accent); transform:translateX(4px); color:#fff; box-shadow:0 10px 26px rgba(212,1,8,.3); }
.header-right .btn-modern svg{ transition:.3s ease; }
.header-right .btn-modern:hover svg{ transform:translateX(3px); }

.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }

.service-card{
    background:#fff; border-radius:22px; padding:42px 32px; position:relative; overflow:hidden;
    box-shadow:0 10px 34px rgba(2,26,74,.08); transition:transform .4s ease, box-shadow .4s ease;
    opacity:0; transform:translateY(24px); animation:modernFadeUp .6s ease forwards; animation-delay:var(--delay,0s);
}
@keyframes modernFadeUp{ to{ opacity:1; transform:translateY(0); } }
.service-card::before{
    content:''; position:absolute; top:0; left:0; width:100%; height:5px;
    background:linear-gradient(90deg,var(--primary),var(--accent));
    transform:scaleX(0); transform-origin:left; transition:transform .45s ease;
}
.service-card:hover{ transform:translateY(-10px); box-shadow:0 22px 50px rgba(2,26,74,.15); }
.service-card:hover::before{ transform:scaleX(1); }

.service-card .card-icon{
    width:64px; height:64px; border-radius:16px; background:var(--primary-light);
    display:flex; align-items:center; justify-content:center; margin-bottom:22px; transition:.35s ease;
}
.service-card .card-icon svg{ stroke:var(--primary); transition:.35s ease; }
.service-card:hover .card-icon{ background:var(--primary); }
.service-card:hover .card-icon svg{ stroke:#fff; }

.service-card .card-number{
    position:absolute; top:30px; right:32px; font-size:38px; font-weight:900; color:rgba(2,26,74,.06); line-height:1;
}
.service-card .card-title{ font-size:20px; font-weight:800; margin:0 0 12px; }
.service-card .card-title a{ color:var(--ink); text-decoration:none; transition:.25s ease; }
.service-card .card-title a:hover{ color:var(--primary); }
.service-card .card-text{ font-size:14.5px; color:var(--muted); line-height:1.75; margin-bottom:22px; }
.service-card .card-link{
    display:inline-flex; align-items:center; gap:6px; color:var(--accent); font-weight:700;
    text-decoration:none; font-size:14px; transition:.25s ease;
}
.service-card .card-link:hover{ color:var(--primary); gap:10px; }

@media(max-width:1199px){
    .header-left .sec-title-modern{ font-size:36px; }
}
@media(max-width:991px){
    .services-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:767px){
    .service-area-modern{ padding:60px 0; }
    .services-header{ flex-direction:column; align-items:flex-start; }
    .header-left .sec-title-modern{ font-size:28px; }
    .services-grid{ grid-template-columns:1fr; }
    .service-card{ padding:34px 24px; }
}

/* =========================================================
   7. OUR SERVICES / HOT DEALS / STEPS / HERO / GROUPS
   (styles previously pasted as standalone blocks)
   ========================================================= */

/* ---- Hero (CTA) section ---- */
.hero-section{
    position:relative; width:100%;
    background:linear-gradient(135deg,#eaf3fb 0%,#dce9f8 40%,#cdddf5 70%,#e8f0fa 100%);
    padding:60px 0 0; overflow:hidden; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.hero-section::before{
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background-image:radial-gradient(circle,rgba(2,80,164,.07) 1px,transparent 1px);
    background-size:22px 22px; pointer-events:none; z-index:0;
}
.hero-main-card{
    position:relative; z-index:2; max-width:1380px; margin:0 auto;
    background:linear-gradient(135deg,#edf4fc 0%,#dde9f7 50%,#c8d8f0 100%);
    border-radius:28px; overflow:hidden; box-shadow:0 20px 60px rgba(2,26,74,.13);
    display:grid; grid-template-columns:1fr 1fr; min-height:580px;
}
.hero-left{ padding:65px 55px 60px 65px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:3; }
.hero-badge{
    display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.75);
    border:1px solid rgba(2,80,164,.15); border-radius:50px; padding:8px 20px; font-size:13.5px; font-weight:600;
    color:var(--ink); margin-bottom:28px; width:fit-content; backdrop-filter:blur(4px); box-shadow:0 2px 10px rgba(2,80,164,.08);
}
.hero-badge i{ font-size:13px; color:var(--primary); transform:rotate(-30deg); display:inline-block; }
.hero-heading{ font-size:56px; font-weight:900; color:var(--ink); line-height:1.1; margin:0 0 22px; letter-spacing:-1px; }
.hero-heading .highlight{ color:var(--accent); display:inline; }
.hero-underline{ display:flex; align-items:center; gap:8px; margin-bottom:26px; }
.hero-underline .line-bar{ width:55px; height:4px; background:var(--primary); border-radius:4px; }
.hero-underline .line-dot{ width:8px; height:8px; background:var(--accent); border-radius:50%; }
.hero-desc{ font-size:16px; color:var(--muted); line-height:1.75; margin:0 0 38px; max-width:480px; }
.hero-btns{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

.hero-btn-login{
    display:inline-flex; align-items:center; gap:10px; background:var(--primary); color:#fff; border:none;
    border-radius:50px; padding:15px 34px; font-size:15px; font-weight:700; text-decoration:none;
    transition:all .3s ease; box-shadow:0 6px 20px rgba(2,80,164,.3);
}
.hero-btn-login:hover{ background:var(--primary-dark); transform:translateY(-2px); box-shadow:0 10px 28px rgba(2,80,164,.4); color:#fff; }
.hero-btn-login i{ font-size:15px; }

.hero-btn-register{
    display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.85); color:var(--ink);
    border:2px solid rgba(2,26,74,.15); border-radius:50px; padding:13px 30px; font-size:15px; font-weight:700;
    text-decoration:none; transition:all .3s ease; backdrop-filter:blur(4px); box-shadow:0 4px 15px rgba(0,0,0,.06);
}
.hero-btn-register:hover{ background:#fff; border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 22px rgba(212,1,8,.15); }
.hero-btn-register i{ font-size:15px; }

.hero-right{ position:relative; overflow:hidden; }
.hero-image-wrapper{ position:absolute; top:0; right:0; bottom:0; width:100%; height:100%; overflow:hidden; }
.hero-image-clip{
    position:absolute; top:-5%; right:-5%; width:115%; height:115%;
    border-radius:50% 0 0 50% / 50% 0 0 50%; overflow:hidden; clip-path:ellipse(72% 58% at 60% 50%);
}
.hero-image-clip img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.hero-image-overlay{
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:linear-gradient(135deg,rgba(2,26,74,.15) 0%,transparent 50%,rgba(2,26,74,.25) 100%);
    pointer-events:none; z-index:2;
}
.hero-plane-deco{ position:absolute; top:28px; right:35px; z-index:5; pointer-events:none; }
.hero-plane-deco .plane-icon{ font-size:28px; color:#fff; transform:rotate(-30deg); display:inline-block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)); }
.hero-plane-deco::before{
    content:''; position:absolute; top:14px; right:38px; width:90px; height:50px;
    border:2px dashed rgba(255,255,255,.7); border-radius:0 0 0 80px; border-top:none; border-right:none; transform:rotate(10deg);
}
.hero-card-wave{ position:absolute; bottom:0; left:0; right:0; height:70px; z-index:4; overflow:hidden; pointer-events:none; }
.hero-card-wave svg{ display:block; width:100%; height:100%; }

.hero-features-strip{
    position:relative; z-index:5; max-width:1380px; margin:0 auto; background:#fff;
    border-radius:0 0 28px 28px; box-shadow:0 10px 40px rgba(2,26,74,.10); padding:28px 40px;
    display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:-22px; margin-bottom:20px;
}
.hero-feature-item{ display:flex; align-items:flex-start; gap:16px; padding:10px 24px; border-right:1px solid #e8edf5; transition:background .2s ease; }
.hero-feature-item:last-child{ border-right:none; }
.hero-feature-item:hover{ background:#f5f8ff; border-radius:12px; }
.feature-icon-circle{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feature-icon-circle i{ font-size:20px; color:#fff; }

.hero-feature-item.feat-blue   .feature-icon-circle{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); box-shadow:0 4px 14px rgba(2,80,164,.3); }
.hero-feature-item.feat-green  .feature-icon-circle{ background:linear-gradient(135deg,var(--secondary),var(--secondary-dark)); box-shadow:0 4px 14px rgba(1,116,2,.3); }
.hero-feature-item.feat-purple .feature-icon-circle{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); box-shadow:0 4px 14px rgba(212,1,8,.3); }
.hero-feature-item.feat-orange .feature-icon-circle{ background:linear-gradient(135deg,var(--primary-dark),var(--ink)); box-shadow:0 4px 14px rgba(2,80,164,.3); }

.feature-text h4{ font-size:15px; font-weight:700; color:var(--ink); margin:0 0 4px; line-height:1.3; }
.feature-text p{ font-size:13px; color:var(--muted); margin:0; line-height:1.5; }

.hero-float-shape{ position:absolute; border-radius:50%; pointer-events:none; z-index:1; }
.hero-float-shape.shape-1{ width:220px; height:220px; background:radial-gradient(circle,rgba(2,80,164,.07) 0%,transparent 70%); top:-60px; left:-60px; }
.hero-float-shape.shape-2{ width:160px; height:160px; background:radial-gradient(circle,rgba(2,80,164,.05) 0%,transparent 70%); bottom:80px; left:30%; }

@media(max-width:1199px){
    .hero-heading{ font-size:44px; }
    .hero-left{ padding:50px 40px 50px 45px; }
    .hero-features-strip{ grid-template-columns:repeat(2,1fr); gap:16px; }
    .hero-feature-item{ border-right:none; border-bottom:1px solid #e8edf5; padding:14px 16px; }
    .hero-feature-item:nth-child(2){ border-right:none; }
    .hero-feature-item:nth-last-child(-n+2){ border-bottom:none; }
}
@media(max-width:991px){
    .hero-main-card{ grid-template-columns:1fr; min-height:auto; }
    .hero-right{ height:320px; position:relative; }
    .hero-image-clip{ clip-path:ellipse(80% 80% at 50% 50%); border-radius:0; top:0; right:0; width:100%; height:100%; }
    .hero-left{ padding:40px 30px; }
    .hero-heading{ font-size:38px; }
}
@media(max-width:767px){
    .hero-section{ padding:30px 12px 0; }
    .hero-main-card{ border-radius:20px; }
    .hero-heading{ font-size:30px; }
    .hero-left{ padding:30px 22px; }
    .hero-btns{ flex-direction:column; align-items:flex-start; }
    .hero-features-strip{ grid-template-columns:1fr; padding:20px 22px; border-radius:0 0 20px 20px; }
    .hero-feature-item{ border-right:none; border-bottom:1px solid #e8edf5; }
    .hero-feature-item:last-child{ border-bottom:none; }
    .hero-plane-deco{ display:none; }
}

/* ---- Groups We Offer section ---- */
.groups-section{
    position:relative; width:100%;
    background:linear-gradient(160deg,#f0f6ff 0%,#e4eefb 40%,#d8e8f8 70%,#cce0f5 100%);
    padding:80px 0 0; overflow:hidden; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.groups-section::before{
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background-image:radial-gradient(circle,rgba(2,80,164,.06) 1px,transparent 1px);
    background-size:20px 20px; pointer-events:none; z-index:0;
}
.groups-section::after{
    content:''; position:absolute; top:0; right:0; width:55%; height:100%;
    background-image:url('https://arafatgroupticket.com/public/assets/images/world-map-dots.png');
    background-size:contain; background-repeat:no-repeat; background-position:right center; opacity:.07; pointer-events:none; z-index:0;
}
.groups-kaaba-bg{
    position:absolute; bottom:0; right:0; width:42%; height:75%;
    background-image:url('https://images.unsplash.com/photo-1591604129939-f1efa4f87000?w=800&q=70');
    background-size:cover; background-position:center top; opacity:.18; pointer-events:none; z-index:0;
    mask-image:linear-gradient(to left,rgba(0,0,0,.6) 0%,transparent 80%);
    -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.6) 0%,transparent 80%);
}
.groups-plane-deco{ position:absolute; top:35px; right:55px; z-index:3; pointer-events:none; }
.groups-plane-deco .plane-icon{ font-size:36px; color:var(--primary); transform:rotate(-30deg); display:inline-block; filter:drop-shadow(0 3px 8px rgba(2,80,164,.35)); }
.groups-plane-deco::before{
    content:''; position:absolute; top:18px; right:42px; width:80px; height:45px;
    border:2px dashed rgba(2,80,164,.45); border-radius:0 0 0 60px; border-top:none; border-right:none; transform:rotate(5deg);
}
.groups-plane-deco::after{
    content:''; position:absolute; top:5px; right:95px; width:55px; height:30px;
    border:2px dashed rgba(2,80,164,.3); border-radius:0 50px 0 0; border-bottom:none; border-left:none; transform:rotate(-5deg);
}

.groups-container{
    position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:0 40px;
    display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
}
.groups-cards-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.group-card{
    background:#fff; border-radius:20px; overflow:hidden; box-shadow:0 6px 28px rgba(2,26,74,.10);
    transition:transform .35s ease, box-shadow .35s ease; display:flex; flex-direction:column; position:relative;
}
.group-card:hover{ transform:translateY(-7px); box-shadow:0 16px 44px rgba(2,26,74,.18); }
.group-card .card-top{ padding:28px 22px 18px; text-align:center; display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }
.group-card .card-icon-circle{
    width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:0 6px 18px rgba(2,80,164,.35); position:relative;
}
.group-card .card-icon-circle::before{ content:''; position:absolute; inset:-5px; border-radius:50%; border:2px solid rgba(2,80,164,.2); }
.group-card .card-icon-circle i{ font-size:26px; color:#fff; }
.group-card .card-title{ font-size:18px; font-weight:800; color:var(--ink); margin:0 0 8px; line-height:1.2; }
.group-card .card-subtitle{ font-size:13.5px; color:var(--muted); margin:0 0 14px; line-height:1.5; }
.group-card .card-line-deco{ width:36px; height:3px; background:var(--accent); border-radius:3px; margin:0 auto; }
.group-card .card-skyline{ position:relative; height:110px; overflow:hidden; margin-top:auto; }
.group-card .card-skyline .skyline-img{ position:absolute; bottom:0; left:0; right:0; height:100%; background-size:cover; background-position:bottom center; opacity:.55; }
.group-card.card-ksa   .skyline-img{ background-image:url('https://images.unsplash.com/photo-1586724237569-f3d0c1dee8c6?w=400&q=60'); }
.group-card.card-umrah .skyline-img{ background-image:url('https://images.unsplash.com/photo-1591604129939-f1efa4f87000?w=400&q=60'); }
.group-card.card-oman  .skyline-img{ background-image:url('https://images.unsplash.com/photo-1578895101408-1a36b834405b?w=400&q=60'); }
.group-card.card-uae   .skyline-img{ background-image:url('https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=400&q=60'); }
.group-card .card-wave{ position:absolute; bottom:0; left:0; right:0; height:32px; overflow:hidden; }
.group-card .card-wave svg{ display:block; width:100%; height:100%; }
.group-card .card-skyline::before{ content:''; position:absolute; top:0; left:0; right:0; height:40px; background:linear-gradient(to bottom,#ffffff,transparent); z-index:1; }

.groups-right{ padding-top:10px; }
.groups-badge{
    display:inline-flex; align-items:center; gap:8px; background:var(--primary-light);
    border:1px solid rgba(2,80,164,.2); border-radius:50px; padding:8px 20px; font-size:12.5px;
    font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--primary); margin-bottom:24px;
}
.groups-badge i{ font-size:13px; }
.groups-heading{ font-size:46px; font-weight:900; color:var(--ink); line-height:1.12; margin:0 0 20px; letter-spacing:-.5px; }
.groups-heading .highlight{ color:var(--accent); }
.groups-underline{ display:flex; align-items:center; gap:8px; margin-bottom:24px; }
.groups-underline .line-bar{ width:50px; height:4px; background:var(--primary); border-radius:4px; }
.groups-underline .line-dot{ width:8px; height:8px; background:var(--accent); border-radius:50%; }
.groups-desc{ font-size:15.5px; color:var(--muted); line-height:1.75; margin:0 0 32px; max-width:520px; }

.groups-feature-list{ list-style:none; margin:0 0 36px; padding:0; display:flex; flex-direction:column; gap:0; }
.groups-feature-item{ display:flex; align-items:flex-start; gap:16px; padding:16px 0; border-bottom:1px solid rgba(2,80,164,.1); }
.groups-feature-item:last-child{ border-bottom:none; }
.feature-check{
    width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--secondary),var(--secondary-dark));
    display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; box-shadow:0 3px 10px rgba(1,116,2,.3);
}
.feature-check i{ font-size:13px; color:#fff; }
.feature-info h4{ font-size:15.5px; font-weight:700; color:var(--ink); margin:0 0 3px; line-height:1.3; }
.feature-info p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.5; }

.groups-cta-btn{
    display:inline-flex; align-items:center; gap:0; background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#fff; border:none; border-radius:14px; overflow:hidden; text-decoration:none; font-size:16px; font-weight:700;
    transition:all .3s ease; box-shadow:0 8px 25px rgba(2,80,164,.35);
}
.groups-cta-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 35px rgba(212,1,8,.35); color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); }
.groups-cta-btn .btn-icon-left{ display:flex; align-items:center; justify-content:center; width:52px; height:54px; background:rgba(255,255,255,.15); font-size:18px; flex-shrink:0; }
.groups-cta-btn .btn-text{ padding:0 28px; white-space:nowrap; }
.groups-cta-btn .btn-icon-right{ display:flex; align-items:center; justify-content:center; width:48px; height:54px; background:rgba(255,255,255,.1); font-size:16px; flex-shrink:0; transition:transform .3s ease; }
.groups-cta-btn:hover .btn-icon-right{ transform:translateX(4px); }

.groups-bottom-wave{ position:relative; width:100%; height:70px; z-index:2; overflow:hidden; margin-top:70px; }
.groups-bottom-wave svg{ display:block; width:100%; height:100%; }

@media(max-width:1199px){
    .groups-heading{ font-size:36px; }
    .groups-container{ gap:40px; padding:0 24px; }
}
@media(max-width:991px){
    .groups-container{ grid-template-columns:1fr; gap:50px; }
    .groups-cards-grid{ max-width:560px; }
    .groups-right{ padding-top:0; }
    .groups-kaaba-bg{ display:none; }
    .groups-plane-deco{ top:20px; right:24px; }
}
@media(max-width:767px){
    .groups-section{ padding:50px 0 0; }
    .groups-container{ padding:0 16px; }
    .groups-cards-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; }
    .groups-heading{ font-size:28px; }
    .groups-plane-deco{ display:none; }
    .groups-cta-btn{ width:100%; justify-content:center; }
    .groups-cta-btn .btn-text{ padding:0 20px; }
}

/* ---- Booking Process (Our Steps & Procedure) section ---- */
.booking-process-section{
    position:relative; width:100%;
    background:linear-gradient(180deg,#eef4fb 0%,#e3edf9 35%,#d6e6f6 65%,#c8ddf3 100%);
    padding:80px 0 0; overflow:hidden; font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}
.booking-process-section::before{
    content:''; position:absolute; top:0; left:0; right:0; bottom:0;
    background-image:radial-gradient(circle,rgba(2,80,164,.05) 1px,transparent 1px);
    background-size:22px 22px; pointer-events:none; z-index:0;
}
.booking-process-section::after{
    content:''; position:absolute; top:5%; left:-5%; width:45%; height:70%;
    background-image:url('https://arafatgroupticket.com/public/assets/images/world-map-dots.png');
    background-size:contain; background-repeat:no-repeat; background-position:left center; opacity:.06; pointer-events:none; z-index:0;
}
.bp-cloud{ position:absolute; border-radius:50%; background:rgba(255,255,255,.55); pointer-events:none; z-index:0; }
.bp-cloud.c1{ width:220px; height:70px; top:18%; left:-40px; border-radius:40px; }
.bp-cloud.c2{ width:160px; height:50px; top:25%; left:80px; border-radius:30px; }
.bp-cloud.c3{ width:200px; height:60px; top:55%; right:-30px; border-radius:35px; }
.bp-cloud.c4{ width:140px; height:45px; top:62%; right:100px; border-radius:28px; }
.bp-cloud.c5{ width:180px; height:55px; bottom:18%; left:5%; border-radius:32px; }

.bp-airplane-img{
    position:absolute; top:30px; right:40px; width:240px; z-index:1; pointer-events:none;
    filter:drop-shadow(0 8px 24px rgba(2,80,164,.2)); transform:rotate(-8deg);
}
.bp-airplane-img img{ width:100%; height:auto; display:block; }

.bp-header{ text-align:center; position:relative; z-index:2; margin-bottom:55px; }
.bp-badge{
    display:inline-flex; align-items:center; gap:10px; background:rgba(255,255,255,.8);
    border:1.5px solid rgba(2,80,164,.2); border-radius:50px; padding:9px 24px; margin-bottom:22px;
    backdrop-filter:blur(6px); box-shadow:0 3px 14px rgba(2,80,164,.1);
}
.bp-badge .badge-dot-left, .bp-badge .badge-dot-right{ width:7px; height:7px; border-radius:50%; background:var(--primary); opacity:.5; }
.bp-badge .badge-plane{ font-size:14px; color:var(--primary); transform:rotate(-30deg); display:inline-block; }
.bp-badge span{ font-size:12.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--primary); }
.bp-heading{ font-size:52px; font-weight:900; color:var(--ink); line-height:1.1; margin:0 0 18px; letter-spacing:-1px; }
.bp-heading .amp{ color:var(--accent); font-style:italic; }
.bp-underline{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:24px; }
.bp-underline .ul-line{ width:50px; height:4px; background:var(--primary); border-radius:4px; }
.bp-underline .ul-plane{ font-size:16px; color:var(--accent); transform:rotate(-30deg); }
.bp-underline .ul-line.right{ background:var(--accent); }
.bp-subtitle{ max-width:600px; margin:0 auto; color:var(--muted); line-height:1.75; }

.bp-cards-wrapper{ position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:0 24px; }
.bp-cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }

.step-card{
    background:#fff; border-radius:22px; position:relative; overflow:hidden; padding-top:6px;
    box-shadow:0 10px 30px rgba(2,26,74,.08); transition:transform .35s ease, box-shadow .35s ease;
}
.step-card:hover{ transform:translateY(-8px); box-shadow:0 20px 46px rgba(2,26,74,.15); }
.step-top-bar{ height:5px; width:100%; background:linear-gradient(90deg,var(--primary),var(--accent)); }
.step-number{ position:absolute; top:18px; right:22px; font-size:34px; font-weight:900; color:rgba(2,26,74,.06); z-index:1; }
.step-body{ padding:34px 26px 10px; text-align:center; position:relative; z-index:2; }
.step-icon-ring{
    position:relative; width:78px; height:78px; margin:0 auto 20px; border-radius:50%;
    background:var(--primary-light); display:flex; align-items:center; justify-content:center;
}
.step-card .step-icon-ring::before{ content:''; position:absolute; inset:-6px; border-radius:50%; border:2px dashed rgba(2,26,74,.08); }
.step-card .step-icon-ring::after{ content:''; position:absolute; top:-4px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.step-icon-ring i{ font-size:28px; color:var(--primary); }
.step-title{ font-size:19px; font-weight:800; color:var(--ink); margin:0 0 12px; }
.step-dot-sep{ display:flex; align-items:center; justify-content:center; gap:6px; margin-bottom:14px; }
.step-dot-sep .dot-line{ width:30px; height:2px; background:rgba(2,80,164,.25); }
.step-dot-sep .dot-circle{ width:6px; height:6px; border-radius:50%; background:var(--accent); }
.step-desc{ font-size:13.5px; color:var(--muted); line-height:1.7; margin:0 0 20px; }

.step-illustration{ position:relative; height:70px; }
.step-illustration .illust-img{ position:absolute; inset:0; opacity:.5; }
.step-card-wave{ position:absolute; bottom:0; left:0; right:0; height:28px; overflow:hidden; }
.step-card-wave svg path{ fill:var(--primary); opacity:.12; }

.step-blue  .step-icon-ring{ background:rgba(2,80,164,.1); }
.step-blue  .step-icon-ring i{ color:var(--primary); }
.step-red   .step-icon-ring{ background:rgba(212,1,8,.1); }
.step-red   .step-icon-ring i{ color:var(--accent); }
.step-blue2 .step-icon-ring{ background:rgba(1,116,2,.1); }
.step-blue2 .step-icon-ring i{ color:var(--secondary); }
.step-red2  .step-icon-ring{ background:rgba(2,80,164,.1); }
.step-red2  .step-icon-ring i{ color:var(--primary-dark); }

.bp-features-strip{ position:relative; z-index:2; max-width:1320px; margin:70px auto 0; padding:0 24px; }
.bp-features-inner{
    background:#fff; border-radius:22px; box-shadow:0 10px 34px rgba(2,26,74,.08);
    display:grid; grid-template-columns:repeat(4,1fr); padding:10px 0;
}
.bp-feature-item{ display:flex; align-items:center; gap:14px; padding:24px 26px; border-right:1px solid #eef2f8; }
.bp-feature-item:last-child{ border-right:none; }
.bp-feat-icon{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bp-feat-icon i{ font-size:20px; color:#000; }
.bp-feature-item.fi-blue  .bp-feat-icon{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); }
.bp-feature-item.fi-red   .bp-feat-icon{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); }
.bp-feature-item.fi-blue2 .bp-feat-icon{ background:linear-gradient(135deg,var(--secondary),var(--secondary-dark)); }
.bp-feature-item.fi-red2  .bp-feat-icon{ background:linear-gradient(135deg,var(--primary-dark),var(--ink)); }
.bp-feat-text h4{ font-size:15px; font-weight:700; color:var(--ink); margin:0 0 3px; }
.bp-feat-text p{ font-size:12.5px; color:var(--muted); margin:0; }

.bp-bottom-wave{ position:relative; width:100%; height:65px; z-index:2; overflow:hidden; margin-top:60px; }
.bp-bottom-wave svg{ display:block; width:100%; height:100%; }

@media(max-width:991px){
    .bp-cards-grid{ grid-template-columns:repeat(2,1fr); }
    .bp-features-inner{ grid-template-columns:repeat(2,1fr); }
    .bp-feature-item{ border-right:none; border-bottom:1px solid #eef2f8; }
    .bp-heading{ font-size:38px; }
}
@media(max-width:767px){
    .bp-cards-grid{ grid-template-columns:1fr; }
    .bp-features-inner{ grid-template-columns:1fr; }
    .bp-heading{ font-size:30px; }
    .bp-airplane-img{ display:none; }
}

/* ---- "Our Services" card grid (Air Ticket / Umrah / Visa / Support) ---- */
.our-services-section{ position:relative; padding:100px 0 60px; overflow:hidden; }
.services-airplane-deco{ position:absolute; top:30px; right:40px; z-index:1; pointer-events:none; }
.services-airplane-deco .plane-icon{ font-size:34px; color:rgba(2,80,164,.25); transform:rotate(-25deg); }
.services-pin-deco{ position:absolute; bottom:60px; left:30px; z-index:1; pointer-events:none; }
.services-pin-deco i{ font-size:30px; color:rgba(212,1,8,.2); }
.our-services-section .services-header{ text-align:center; margin-bottom:50px; display:block; }
.services-label{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:14px; }
.services-label .label-line{ width:40px; height:2px; background:var(--primary); }
.services-label .label-plane{ font-size:14px; color:var(--accent); transform:rotate(-30deg); }
.services-label .label-text{ font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--primary); }
.services-heading{ font-size:40px; font-weight:900; color:var(--ink); margin:0 0 10px; }
.services-heading .highlight{ color:var(--accent); }
.services-subtitle{ color:var(--muted); margin:0; }

.services-cards-wrapper{ max-width:1320px; margin:0 auto; padding:0 24px; }
.services-cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.our-services-section .service-card{
    background:#fff; border-radius:22px; overflow:hidden; position:relative;
    box-shadow:0 10px 30px rgba(2,26,74,.08); transition:transform .35s ease, box-shadow .35s ease;
}
.our-services-section .service-card:hover{ transform:translateY(-8px); box-shadow:0 20px 46px rgba(2,26,74,.15); }
.our-services-section .card-top-bar{ height:5px; width:100%; }
.card-blue  .card-top-bar{ background:var(--primary); }
.card-green .card-top-bar{ background:var(--secondary); }
.card-purple .card-top-bar{ background:var(--primary-dark); }
.card-orange .card-top-bar{ background:var(--accent); }

.card-illustration{ position:relative; height:110px; display:flex; align-items:center; justify-content:center; }
.illust-bg{ position:absolute; inset:0; opacity:.08; }
.card-blue   .illust-bg{ background:var(--primary); }
.card-green  .illust-bg{ background:var(--secondary); }
.card-purple .illust-bg{ background:var(--primary-dark); }
.card-orange .illust-bg{ background:var(--accent); }

.icon-circle{ width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.icon-circle i{ font-size:26px; color:#fff; }
.card-blue   .icon-circle{ background:linear-gradient(135deg,var(--primary),var(--primary-dark)); }
.card-green  .icon-circle{ background:linear-gradient(135deg,var(--secondary),var(--secondary-dark)); }
.card-purple .icon-circle{ background:linear-gradient(135deg,var(--primary-dark),var(--ink)); }
.card-orange .icon-circle{ background:linear-gradient(135deg,var(--accent),var(--accent-dark)); }

.card-wave-divider{ height:22px; overflow:hidden; }
.card-wave-divider svg path{ fill:#fff; }
.card-body-content{ padding:0 26px 30px; text-align:center; }
.our-services-section .card-title{ font-size:18px; font-weight:800; color:var(--ink); margin:0 0 10px; }
.card-dot-sep{ width:30px; height:2px; background:rgba(2,80,164,.2); margin:0 auto 14px; }
.card-desc{ font-size:13.5px; color:var(--muted); line-height:1.7; margin:0 0 18px; }
.card-arrow-btn{
    display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%;
    background:var(--primary-light); color:var(--primary); text-decoration:none; transition:.3s ease;
}
.card-arrow-btn:hover{ background:var(--accent); color:#fff; transform:translateX(3px); }

.services-bottom-wave{ position:relative; width:100%; height:60px; overflow:hidden; margin-top:60px; }
.services-bottom-wave svg{ display:block; width:100%; height:100%; }

@media(max-width:991px){ .services-cards-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:767px){
    .services-cards-grid{ grid-template-columns:1fr; }
    .services-heading{ font-size:30px; }
    .services-airplane-deco, .services-pin-deco{ display:none; }
}

/* ---- Airline partner marquee ---- */
.airline-section{ background:#f8fbff; }
.airline-marquee{ overflow:hidden; position:relative; width:100%; }
.airline-track{ display:flex; gap:40px; width:max-content; animation:airlineScroll 30s linear infinite; align-items:center; }
.airline-marquee:hover .airline-track{ animation-play-state:paused; }
.airline-logo{ flex:0 0 auto; height:60px; display:flex; align-items:center; justify-content:center; filter:grayscale(30%); opacity:.85; transition:.3s ease; }
.airline-logo:hover{ filter:grayscale(0%); opacity:1; }
.airline-logo img{ max-height:100%; max-width:140px; object-fit:contain; }
@keyframes airlineScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-50%); } }


/*footer*/

.aas-body-demo{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:#f4f5f7;
}

/* ---------------------------------------------------------
   FOOTER WRAPPER + BACKGROUND IMAGE
--------------------------------------------------------- */
.aas-footer{
    position:relative;
    color:#fff;
    background:
            linear-gradient(180deg, rgba(11,15,22,.55) 0%, rgba(11,15,22,.62) 55%, rgba(6,8,12,.75) 100%),
            url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1920&q=80') center / cover no-repeat fixed;
    overflow:hidden;
    text-shadow:0 1px 3px rgba(0,0,0,.55);
}

.aas-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:4px;
    background:linear-gradient(90deg, #1a4fa0 0%, #0e8a3e 50%, #c8102e 100%);
    z-index:3;
}

.aas-footer__overlay{
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 15% 20%, rgba(26,79,160,.25), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(14,138,62,.22), transparent 45%);
    pointer-events:none;
    z-index:1;
}

.aas-footer__top,
.aas-footer__bottom{
    position:relative;
    z-index:2;
}

.aas-footer__top{
    padding:70px 0 40px;
}

/* ---------------------------------------------------------
   BRAND COLUMN
--------------------------------------------------------- */
.aas-footer__logo{
    font-weight:800;
    font-size:1.55rem;
    letter-spacing:1.5px;
    margin:0 0 18px;
    color:#c8102e;
    text-shadow:0 2px 0 #8f0b20;
}

.aas-footer__logo span{
    display:block;
    font-size:.72rem;
    font-weight:600;
    letter-spacing:4px;
    color:#e9edf3;
    margin-top:4px;
}

.aas-footer__desc{
    font-size:.9rem;
    line-height:1.9;
    color:rgba(255,255,255,.85);
    margin-bottom:24px;
    max-width:360px;
}

.aas-footer__social{
    display:flex;
    gap:12px;
    list-style:none;
    padding:0;
    margin:0;
}

.aas-footer__social a{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    color:#e9edf3;
    background:rgba(255,255,255,.04);
    text-decoration:none;
    font-size:1rem;
    transition:all .3s ease;
}

.aas-footer__social a:hover{
    background:linear-gradient(135deg, #1a4fa0, #0e8a3e);
    border-color:transparent;
    color:#fff;
    transform:translateY(-4px);
}

/* ---------------------------------------------------------
   TITLES
--------------------------------------------------------- */
.aas-footer__title{
    font-size:1.02rem;
    font-weight:700;
    color:#fff;
    margin-bottom:24px;
    position:relative;
    padding-bottom:12px;
}

.aas-footer__title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:36px;
    height:3px;
    border-radius:3px;
    background:linear-gradient(90deg, #c8102e, #0e8a3e);
}

/* ---------------------------------------------------------
   LINKS
--------------------------------------------------------- */
.aas-footer__links{
    list-style:none;
    padding:0;
    margin:0;
}

.aas-footer__links li + li{
    margin-top:12px;
}

.aas-footer__links a{
    color:rgba(255,255,255,.85);
    text-decoration:none;
    font-size:.9rem;
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:color .25s ease, transform .25s ease;
}

.aas-footer__links a i{
    color:#c8102e;
    font-size:.75rem;
    transition:transform .25s ease;
}

.aas-footer__links a:hover{
    color:#fff;
    transform:translateX(4px);
}

.aas-footer__links a:hover i{
    transform:translateX(3px);
}

/* ---------------------------------------------------------
   CONTACT
--------------------------------------------------------- */
.aas-footer__contact{
    list-style:none;
    padding:0;
    margin:0;
}

.aas-footer__contact li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    font-size:.88rem;
    color:rgba(255,255,255,.85);
    margin-bottom:16px;
    line-height:1.6;
}

.aas-footer__contact li i{
    width:34px;
    height:34px;
    min-width:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    color:#0e8a3e;
    font-size:.85rem;
}

/* ---------------------------------------------------------
   BOTTOM BAR
--------------------------------------------------------- */
.aas-footer__bottom{
    border-top:1px solid rgba(255,255,255,.08);
    padding:20px 0;
    background:#8f0b20;
}

.aas-footer__bottom-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
}

.aas-footer__copy{
    margin:0;
    font-size:.82rem;
    color:rgba(255,255,255,.85);
}

.aas-footer__legal{
    list-style:none;
    display:flex;
    gap:24px;
    margin:0;
    padding:0;
}

.aas-footer__legal a{
    font-size:.82rem;
    color:rgba(255,255,255,.85);
    text-decoration:none;
    transition:color .25s ease;
}

.aas-footer__legal a:hover{
    color:#fff;
}

/* ---------------------------------------------------------
   BACK TO TOP BUTTON
--------------------------------------------------------- */
.aas-footer__totop{
    position:fixed;
    right:24px;
    bottom:24px;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg, #1a4fa0, #0e8a3e);
    color:#fff;
    font-size:1.1rem;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    transition:all .3s ease;
    z-index:999;
    box-shadow:0 6px 18px rgba(0,0,0,.35);
}

.aas-footer__totop--visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.aas-footer__totop:hover{
    background:linear-gradient(135deg, #c8102e, #8f0b20);
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 767px){
    .aas-footer__top{
        padding:50px 0 24px;
        text-align:left;
    }

    .aas-footer__bottom-inner{
        flex-direction:column;
        text-align:center;
    }

    .aas-footer__desc{
        max-width:100%;
    }
}

/*hero*/
.aas-hero-body-demo{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:#0b0e13;
}

/* ---------------------------------------------------------
   SECTION WRAPPER + BACKGROUND
--------------------------------------------------------- */
.aas-hero{
    position:relative;
    min-height:68vh;
    overflow:hidden;
    color:#fff;
    display:flex;
    flex-direction:column;
}

.aas-hero__bg{
    position:absolute;
    inset:0;
    background: url("../../front/2.jpeg") center / cover no-repeat;
    z-index:0;
}

.aas-hero__overlay{
    position:absolute;
    inset:0;
    background:
            linear-gradient(180deg, rgba(8,11,17,.75) 0%, rgba(8,11,17,.55) 40%, rgba(8,11,17,.85) 100%),
            radial-gradient(circle at 20% 15%, rgba(26,79,160,.35), transparent 45%),
            radial-gradient(circle at 90% 75%, rgba(14,138,62,.3), transparent 50%);
    z-index:1;
}

/* ---------------------------------------------------------
   CONTENT
--------------------------------------------------------- */
.aas-hero__content{
    position:relative;
    z-index:2;
    flex:1;
    display:flex;
    align-items:center;
    padding:70px 0 70px;
}

.aas-hero__badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(200,16,46,.14);
    border:1px solid rgba(200,16,46,.4);
    color:#f3b8bf;
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.5px;
    padding:8px 16px;
    border-radius:30px;
    margin-bottom:26px;
}

.aas-hero__badge i{
    color:#c8102e;
    font-size:.8rem;
}

.aas-hero__title{
    font-family:'Playfair Display', serif;
    font-weight:800;
    font-size:3.3rem;
    line-height:1.15;
    margin:0 0 22px;
    color:#fff;
}

.aas-hero__title span{
    color:#0e8a3e;
    background:linear-gradient(90deg, #12a24a, #1a4fa0);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.aas-hero__desc{
    font-size:1.02rem;
    line-height:1.85;
    color:#c9d0da;
    max-width:560px;
    margin-bottom:34px;
}

.aas-hero__cta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:46px;
}

.aas-hero__btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 28px;
    border-radius:30px;
    font-weight:600;
    font-size:.95rem;
    text-decoration:none;
    transition:all .25s ease;
}

.aas-hero__btn--primary{
    background:linear-gradient(135deg, #c8102e, #8f0b20);
    color:#fff;
    box-shadow:0 10px 24px rgba(200,16,46,.35);
}

.aas-hero__btn--primary:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(200,16,46,.5);
    color:#fff;
}

.aas-hero__btn--outline{
    background:rgba(255,255,255,.06);
    color:#fff;
    border:1px solid rgba(255,255,255,.35);
}

.aas-hero__btn--outline:hover{
    background:rgba(255,255,255,.14);
    border-color:#fff;
    color:#fff;
    transform:translateY(-3px);
}

.aas-hero__stats-row{
    gap:38px;
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:26px;
}

.aas-hero__stat h4{
    font-weight:800;
    font-size:1.5rem;
    margin:0 0 2px;
    color:#0e8a3e;
}

.aas-hero__stat span{
    font-size:.75rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#aab2c0;
}

/* ---------------------------------------------------------
   PLANE IMAGE (right side)
--------------------------------------------------------- */
.aas-hero__plane{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:420px;
}

.aas-hero__plane::before{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    max-width:100%;
    border-radius:50%;
    background:
            radial-gradient(circle, rgba(14,138,62,.3), transparent 60%),
            radial-gradient(circle at 65% 65%, rgba(26,79,160,.28), transparent 55%);
    filter:blur(6px);
    z-index:0;
}

.aas-hero__plane img{
    position:relative;
    z-index:1;
    width:100%;
    max-width:560px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 24px 34px rgba(0,0,0,.5));
    animation:aasPlaneFloat 3.6s ease-in-out infinite;
    transform:translateX(70px);
}

@keyframes aasPlaneFloat{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-16px) rotate(-2deg);}
}

/* ---------------------------------------------------------
   SCROLL INDICATOR
--------------------------------------------------------- */
.aas-hero__scroll{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:#c9d0da;
    font-size:.7rem;
    letter-spacing:2px;
    text-transform:uppercase;
    animation:aasBounce 2s ease-in-out infinite;
}

@keyframes aasBounce{
    0%,100%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,8px);}
}

/* ---------------------------------------------------------
   WHATSAPP BUTTON
--------------------------------------------------------- */
.aas-hero__whatsapp{
    position:fixed;
    right:24px;
    bottom:24px;
    width:56px;
    height:56px;
    border-radius:50%;
    background:#0e8a3e;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.5rem;
    text-decoration:none;
    box-shadow:0 10px 24px rgba(14,138,62,.5);
    z-index:999;
    transition:transform .25s ease;
}

.aas-hero__whatsapp:hover{
    transform:scale(1.08);
    color:#fff;
}

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 991px){
    .aas-hero__title{
        font-size:2.4rem;
    }

    .aas-hero__plane{
        margin-top:20px;
        min-height:300px;
    }

    .aas-hero__plane img{
        max-width:360px;
    }
}

@media (max-width: 575px){
    .aas-hero__title{
        font-size:1.9rem;
    }

    .aas-hero__stats-row{
        gap:24px;
    }

    .aas-hero__btn{
        padding:12px 20px;
        font-size:.88rem;
    }
}