/*=========================================================
            EXODUS SERVICE PAGE
            PREMIUM SERVICE.CSS
            PART 1A - SECTION 1
=========================================================*/

/*==========================================
ROOT VARIABLES
==========================================*/

:root{

    --primary:#D9A441;
    --primary-light:#F6D78A;
    --primary-dark:#8A6118;

    --bg:#050505;
    --bg-light:#0C0C0C;
    --bg-card:#111111;
    --bg-card-2:#171717;

    --white:#ffffff;
    --text:#e8e8e8;
    --muted:#9c9c9c;

    --border:rgba(255,255,255,.08);

    --glass:rgba(255,255,255,.05);

    --radius-sm:18px;
    --radius:28px;
    --radius-lg:36px;

    --transition:.45s cubic-bezier(.4,0,.2,1);

    --shadow:
    0 20px 60px rgba(0,0,0,.35);

    --shadow-gold:
    0 20px 60px rgba(217,164,65,.20);

    --gold-gradient:
    linear-gradient(
    135deg,
    #D9A441 0%,
    #F6D78A 100%);

}

/*==========================================
GLOBAL
==========================================*/

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);

    color:var(--text);

  font-family:'Outfit',sans-serif;

    overflow-x:hidden;

}

section{

    position:relative;

    padding:120px 0;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    margin:0;

    padding:0;

    list-style:none;

}

/*==========================================
TYPOGRAPHY
==========================================*/

h1,h2,h3,h4,h5,h6{

    font-weight:700;

    color:#fff;

    line-height:1.2;

}

h1{

    font-size:76px;

}

h2{

    font-size:54px;

}

h3{

    font-size:34px;

}

h4{

    font-size:26px;

}

p{

    color:var(--muted);

    font-size:17px;

    line-height:1.9;

}

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

.gradient-text{

    background:var(--gold-gradient);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

/*==========================================
SECTION TITLE
==========================================*/

.section-title{

    text-align:center;

    max-width:820px;

    margin:0 auto 70px;

}

.section-title h2{

    margin-top:18px;

    margin-bottom:20px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}

/*==========================================
MINI TAG
==========================================*/

.mini-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:100px;

    background:rgba(217,164,65,.10);

    border:1px solid rgba(217,164,65,.20);

    color:var(--primary-light);

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

}

/*==========================================
BUTTONS
==========================================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    border-radius:60px;

    background:var(--gold-gradient);

    color:#111;

    font-weight:700;

    transition:var(--transition);

    box-shadow:var(--shadow-gold);

}

.primary-btn:hover{

    transform:translateY(-4px);

    color:#111;

}

.primary-btn i{

    transition:.35s;

}

.primary-btn:hover i{

    transform:translateX(8px);

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:60px;

    border:1px solid var(--border);

    color:#fff;

    backdrop-filter:blur(18px);

}

.secondary-btn:hover{

    background:rgba(255,255,255,.05);

    color:#fff;

}



/*==========================================
SERVICE HERO
==========================================*/

.service-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #050505,
    #090909);

}

.service-hero::before{

    content:"";

    position:absolute;

    width:900px;

    height:900px;

    left:-250px;

    top:-250px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(217,164,65,.12),
    transparent 70%);

    filter:blur(90px);

}

.service-hero::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-250px;

    bottom:-250px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(255,255,255,.04),
    transparent);

    filter:blur(100px);

}

/*==========================================
HERO CONTENT
==========================================*/

.hero-content{

    position:relative;

    z-index:2;

}

.hero-content h1{

    margin:28px 0;

    line-height:1.05;

}

.hero-description{

    max-width:620px;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/*==========================================
HERO BADGE
==========================================*/
 
.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 24px;

    border-radius:100px;

    background:rgba(255,255,255,.04);

    border:1px solid var(--border);

    backdrop-filter:blur(20px);

}

.hero-badge i{

    color:var(--primary);

    font-size:18px;

}


/*=========================================================
            HERO IMAGE
=========================================================*/

.hero-image{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:580px;

    border-radius:36px;

    object-fit:cover;

    transition:all .7s ease;

    box-shadow:
    0 35px 90px rgba(0,0,0,.45);

}

.hero-image:hover img{

    transform:scale(1.03);

}


/*=========================================================
            IMAGE FRAME
=========================================================*/

.hero-image::before{

    content:"";

    position:absolute;

    inset:-15px;

    border-radius:42px;

    border:1px solid rgba(255,255,255,.08);

    pointer-events:none;

}

.hero-image::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.14),

    transparent 70%);

    filter:blur(60px);

    z-index:-1;

}


/*=========================================================
            FLOATING CARD
=========================================================*/

.floating-card{

    position:absolute;

    right:-25px;

    top: 25px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px 28px;

    border-radius:24px;

    background:rgba(10,10,10,.78);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(25px);

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

}

.floating-card i{

    width:60px;

    height:60px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    background:var(--gold-gradient);

    color:#111;

}

.floating-card h5{

    margin:0;

    font-size:18px;

}

.floating-card p{

    margin:4px 0 0;

    font-size:14px;

    color:#bfbfbf;

}


/*=========================================================
            MINI STATS
=========================================================*/

.mini-stat{

    padding:22px;

    text-align:center;

    border-radius:22px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:all .4s ease;

}

.mini-stat:hover{

    transform:translateY(-8px);

    border-color:rgba(217,164,65,.30);

    box-shadow:

    0 20px 40px rgba(217,164,65,.14);

}

.mini-stat h3{

    font-size:36px;

    margin-bottom:8px;

    color:var(--primary-light);

}

.mini-stat span{

    display:block;

    font-size:14px;

    color:var(--muted);

    letter-spacing:1px;

}


/*=========================================================
            HERO GLOW
=========================================================*/

.hero-glow{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.10),

    transparent 70%);

    filter:blur(90px);

    pointer-events:none;

}


/*=========================================================
            FLOATING BLOBS
=========================================================*/

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.18;

    pointer-events:none;

}

.blob-1{

    width:420px;

    height:420px;

    left:-150px;

    top:80px;

    background:#D9A441;

    animation:blobFloatOne 14s ease-in-out infinite;

}

.blob-2{

    width:360px;

    height:360px;

    right:-120px;

    bottom:-100px;

    background:#7A5313;

    animation:blobFloatTwo 18s ease-in-out infinite;

}


/*=========================================================
            BLOB ANIMATION
=========================================================*/

@keyframes blobFloatOne{

    0%,100%{

        transform:translateY(0) scale(1);

    }

    50%{

        transform:translateY(-35px) scale(1.08);

    }

}

@keyframes blobFloatTwo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(35px);

    }

}


/*=========================================================
            SCROLL INDICATOR
=========================================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    width:34px;

    height:56px;

    border-radius:50px;

    border:2px solid rgba(255,255,255,.20);

}

.scroll-indicator::before{

    content:"";

    position:absolute;

    left:50%;

    top:10px;

    transform:translateX(-50%);

    width:6px;

    height:12px;

    border-radius:30px;

    background:var(--primary);

    animation:scrollWheel 2s infinite;

}

@keyframes scrollWheel{

    0%{

        opacity:0;

        transform:translate(-50%,0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translate(-50%,20px);

    }

}


/*=========================================================
            HERO RESPONSIVE
=========================================================*/

@media (max-width:991px){

    .service-hero{

        text-align:center;

        padding-top:120px;

    }

    .hero-content{

        margin-bottom:60px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-description{

        margin-left:auto;

        margin-right:auto;

    }

    .floating-card{

        position:relative;

        right:auto;

        bottom:auto;

        margin:30px auto 0;

        max-width:320px;

    }

}

@media (max-width:576px){

    .hero-content h1{

        font-size:44px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .primary-btn,

    .secondary-btn{

        width:100%;

        justify-content:center;

    }

    .mini-stat{

        padding:18px;

    }

    .img-fluid1{
        display:none;
    }

}


/*=========================================================
                SERVICE BREADCRUMB
=========================================================*/

.service-breadcrumb{

    position:relative;

    padding:22px 0;

    background:#0b0b0b;

    border-top:1px solid rgba(255,255,255,.05);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.service-breadcrumb ul{

    display:flex;

    align-items:center;

    gap:14px;

    flex-wrap:wrap;

}

.service-breadcrumb li{

    color:#8f8f8f;

    font-size:14px;

    letter-spacing:.5px;

}

.service-breadcrumb li.active{

    color:var(--primary-light);

    font-weight:600;

}

.service-breadcrumb a{

    color:#bfbfbf;

    transition:.35s;

}

.service-breadcrumb a:hover{

    color:#fff;

}

.service-breadcrumb i{

    color:rgba(255,255,255,.35);

    font-size:18px;

}


/*=========================================================
                ABOUT EXPERIENCE
=========================================================*/

.service-about{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(

    180deg,

    #070707,

    #101010);

}

.service-about::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-220px;

    top:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.06),

    transparent 70%);

    filter:blur(90px);

}

.service-about::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-180px;

    bottom:-150px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,255,255,.03),

    transparent);

    filter:blur(90px);

}


/*=========================================================
                IMAGE GROUP
=========================================================*/

.experience-images{

    position:relative;

    min-height:640px;

}

.image-one{

    width:78%;

    border-radius:34px;

    overflow:hidden;

    position:relative;

    box-shadow:

    0 30px 80px rgba(0,0,0,.45);

}

.image-two{

    position:absolute;

    right:0;

    bottom:0;

    width:52%;

    border-radius:28px;

    overflow:hidden;

    border:8px solid #0d0d0d;

    box-shadow:

    0 30px 70px rgba(0,0,0,.40);

}

.image-one img,

.image-two img{

    width:100%;

    transition:.8s;

}

.image-one:hover img,

.image-two:hover img{

    transform:scale(1.08);

}


/*=========================================================
                IMAGE FRAME
=========================================================*/

.image-one::after,

.image-two::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid rgba(255,255,255,.08);

    pointer-events:none;

}

.image-one::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-80px;

    top:-80px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.16),

    transparent);

    filter:blur(45px);

}


/*=========================================================
                CONTENT
=========================================================*/

.service-about h2{

    margin:25px 0;

    line-height:1.15;

}

.service-about p{

    margin-bottom:18px;

    max-width:600px;

}


/*=========================================================
                CHECK LIST
=========================================================*/

.check-item{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.35s;

    color:#e7e7e7;

    font-weight:500;

}

.check-item:hover{

    transform:translateX(8px);

    border-color:rgba(217,164,65,.30);

    box-shadow:

    0 15px 40px rgba(217,164,65,.10);

}

.check-item i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--gold-gradient);

    color:#111;

    font-size:18px;

    flex-shrink:0;

}


/*=========================================================
                DECORATIVE ACCENTS
=========================================================*/

.service-about .accent-line{

    width:120px;

    height:4px;

    border-radius:50px;

    margin:35px 0;

    background:

    linear-gradient(

    90deg,

    var(--primary),

    transparent);

}

.service-about .floating-dot{

    position:absolute;

    width:14px;

    height:14px;

    border-radius:50%;

    background:var(--primary);

    opacity:.45;

    animation:pulseDot 4s infinite;

}

@keyframes pulseDot{

    0%,100%{

        transform:scale(1);

        opacity:.4;

    }

    50%{

        transform:scale(1.5);

        opacity:1;

    }

}


/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:991px){

    .experience-images{

        min-height:auto;

        margin-bottom:60px;

    }

    .image-one{

        width:100%;

    }

    .image-two{

        position:relative;

        width:70%;

        margin:-80px auto 0;

        right:auto;

        bottom:auto;

    }

    .service-about{

        text-align:center;

    }

    .service-about p{

        margin-left:auto;

        margin-right:auto;

    }

}

@media(max-width:576px){

    .image-two{

        width:82%;

        margin-top:-60px;

        border-width:5px;

    }

    .check-item{

        padding:15px 18px;

        font-size:15px;

    }

    .check-item i{

        width:36px;

        height:36px;

        font-size:16px;

    }

}


/*=========================================================
                WHY CHOOSE EXODUS
=========================================================*/

.why-service{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #050505,
    #0d0d0d);

}

.why-service::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-200px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(217,164,65,.08),
    transparent 70%);

    filter:blur(100px);

}

.feature-card{

    position:relative;

    padding:45px;

    height:100%;

    border-radius:30px;

    overflow:hidden;

    background:
    rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.45s ease;

}

.feature-card:hover{

    transform:translateY(-12px);

    border-color:rgba(217,164,65,.30);

    box-shadow:

    0 30px 80px rgba(217,164,65,.12);

}

.feature-card::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.16),

    transparent);

    transition:.6s;

}

.feature-card:hover::before{

    transform:scale(1.3);

}

.feature-icon{

    width:85px;

    height:85px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    margin-bottom:30px;

    background:

    linear-gradient(

    135deg,

    rgba(217,164,65,.20),

    rgba(255,255,255,.03));

}

.feature-icon i{

    font-size:36px;

    color:var(--primary-light);

}

.feature-card h4{

    margin-bottom:18px;

}

.feature-card p{

    margin:0;

}

.tilt-card{

    transform-style:preserve-3d;

}

.tilt-card:hover{

    transform:

    perspective(1000px)

    rotateX(3deg)

    rotateY(-3deg)

    translateY(-12px);

}

/*=========================================================
                EXPERIENCE TIMELINE
=========================================================*/

.experience-timeline{

    position:relative;

    background:#090909;

}

.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:42px;

    top:0;

    width:2px;

    height:100%;

    background:

    linear-gradient(

    var(--primary),

    rgba(255,255,255,.10));

}

.timeline-item{

    position:relative;

    display:flex;

    gap:35px;

    margin-bottom:70px;

}

.timeline-item:last-child{

    margin-bottom:0;

}

.timeline-number{

    min-width:84px;

    width:84px;

    height:84px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    color:#111;

    background:var(--gold-gradient);

    box-shadow:

    0 15px 40px rgba(217,164,65,.25);

    z-index:2;

}

.timeline-content{

    flex:1;

    padding:35px;

    border-radius:28px;

    background:

    rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;

}

.timeline-content:hover{

    transform:translateX(12px);

    border-color:rgba(217,164,65,.30);

}

.timeline-content h4{

    margin-bottom:15px;

}

.timeline-content p{

    margin:0;

}

/*=========================================================
                TIMELINE GLOW
=========================================================*/

.timeline-item::after{

    content:"";

    position:absolute;

    left:31px;

    top:84px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:

    rgba(217,164,65,.15);

    filter:blur(12px);

}

.timeline-item:last-child::after{

    display:none;

}

/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:991px){

.timeline::before{

left:30px;

}

.timeline-number{

width:60px;

height:60px;

min-width:60px;

font-size:18px;

}

.timeline-item{

gap:25px;

}

.timeline-content{

padding:28px;

}

}

@media(max-width:576px){

.timeline::before{

left:22px;

}

.timeline-item{

gap:18px;

margin-bottom:40px;

}

.timeline-number{

width:46px;

height:46px;

min-width:46px;

font-size:15px;

}

.timeline-content{

padding:22px;

}

.feature-card{

padding:30px;

}

.feature-icon{

width:70px;

height:70px;

}

.feature-icon i{

font-size:28px;

}

}

/*=========================================================
                FEATURED GALLERY
=========================================================*/

.service-gallery{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #0b0b0b 0%,
    #050505 100%);

}

.service-gallery::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:-250px;

    top:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(217,164,65,.07),
    transparent 72%);

    filter:blur(90px);

}

.service-gallery::after{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.03),
    transparent);

    filter:blur(90px);

}

/*=========================================================
                GALLERY ITEM
=========================================================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    cursor:pointer;

    transition:all .45s ease;

    box-shadow:
    0 20px 50px rgba(0,0,0,.30);

}

.gallery-large{

    height:100%;

    min-height:640px;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
    transform .9s ease,
    filter .6s ease;

}

.gallery-item:hover{

    transform:translateY(-8px);

    border-color:rgba(217,164,65,.25);

    box-shadow:
    0 30px 80px rgba(217,164,65,.15);

}

.gallery-item:hover img{

    transform:scale(1.08);

    filter:brightness(.85);

}

/*=========================================================
                SHINE EFFECT
=========================================================*/

.gallery-item::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:
    linear-gradient(
    110deg,
    transparent,
    rgba(255,255,255,.18),
    transparent);

    transform:skewX(-25deg);

    transition:1.1s;

    z-index:3;

}

.gallery-item:hover::before{

    left:140%;

}

/*=========================================================
                GOLD FRAME
=========================================================*/

.gallery-item::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    border:1px solid transparent;

    transition:.4s;

    pointer-events:none;

}

.gallery-item:hover::after{

    border-color:rgba(217,164,65,.30);

}

/*=========================================================
                OVERLAY
=========================================================*/

.gallery-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:40px 30px;

    background:
    linear-gradient(
    transparent,
    rgba(0,0,0,.92));

    transform:translateY(100%);

    transition:.45s ease;

    z-index:2;

}

.gallery-item:hover .gallery-overlay{

    transform:translateY(0);

}

.gallery-overlay h3{

    margin-bottom:10px;

    color:#fff;

}

.gallery-overlay h4{

    margin:0;

    color:#fff;

}

.gallery-overlay p{

    margin:0;

    color:#d6d6d6;

}

/*=========================================================
                FLOATING LABEL
=========================================================*/

.gallery-tag{

    position:absolute;

    top:25px;

    left:25px;

    padding:10px 18px;

    border-radius:100px;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:13px;

    letter-spacing:1px;

    z-index:4;

}

/*=========================================================
                IMAGE ZOOM ICON
=========================================================*/

.gallery-zoom{

    position:absolute;

    top:50%;

    left:50%;

    width:74px;

    height:74px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(217,164,65,.95);

    color:#111;

    font-size:28px;

    transform:
    translate(-50%,-50%)
    scale(.5);

    opacity:0;

    transition:.35s;

    z-index:4;

}

.gallery-item:hover .gallery-zoom{

    transform:
    translate(-50%,-50%)
    scale(1);

    opacity:1;

}

/*=========================================================
                GALLERY GRID SPACING
=========================================================*/

.service-gallery .row{

    position:relative;

    z-index:2;

}

.service-gallery .col-lg-6{

    display:flex;

    flex-direction:column;

}

.service-gallery .col-lg-6>.row{

    flex:1;

}

.service-gallery .col-6 .gallery-item{

    min-height:300px;

}

.service-gallery .col-12 .gallery-item{

    min-height:320px;

}

/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:991px){

.gallery-large{

min-height:480px;

margin-bottom:25px;

}

.service-gallery .col-6 .gallery-item{

min-height:220px;

}

.service-gallery .col-12 .gallery-item{

min-height:250px;

}

.gallery-overlay{

padding:25px;

}

}

@media(max-width:576px){

.gallery-large{

min-height:340px;

}

.service-gallery .col-6{

width:100%;

}

.service-gallery .col-6 .gallery-item{

min-height:250px;

margin-bottom:20px;

}

.service-gallery .col-12 .gallery-item{

min-height:250px;

}

.gallery-overlay{

transform:translateY(0);

padding:20px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.82));

}

.gallery-overlay h3{

font-size:22px;

}

.gallery-overlay h4{

font-size:18px;

}

.gallery-zoom{

display:none;

}

}

/*=========================================================
                SERVICES INCLUDED
=========================================================*/

.included-services{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #050505 0%,
    #0d0d0d 100%);

}

.included-services::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-260px;

    left:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(217,164,65,.08),
    transparent 70%);

    filter:blur(100px);

    pointer-events:none;

}

.included-services::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.03),
    transparent);

    filter:blur(90px);

    pointer-events:none;

}

/*=========================================================
                SERVICE BOX
=========================================================*/

.service-box{

    position:relative;

    height:100%;

    padding:45px 30px;

    text-align:center;

    border-radius:30px;

    overflow:hidden;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:all .45s ease;

}

.service-box:hover{

    transform:translateY(-10px);

    border-color:rgba(217,164,65,.30);

    box-shadow:

    0 30px 80px rgba(217,164,65,.12);

}

.service-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(217,164,65,.12),

    transparent 60%);

    opacity:0;

    transition:.45s;

}

.service-box:hover::before{

    opacity:1;

}

.service-box i{

    width:95px;

    height:95px;

    margin:auto;

    margin-bottom:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    font-size:40px;

    color:var(--primary-light);

    background:

    linear-gradient(

    135deg,

    rgba(217,164,65,.18),

    rgba(255,255,255,.03));

    transition:.45s;

}

.service-box:hover i{

    transform:rotate(-8deg) scale(1.08);

    color:#fff;

}

.service-box h5{

    margin:0;

    color:#fff;

    font-size:20px;

    line-height:1.5;

    position:relative;

    z-index:2;

}

/*=========================================================
                HOVER BORDER
=========================================================*/

.service-box::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:30px;

    border:1px solid transparent;

    transition:.45s;

    pointer-events:none;

}

.service-box:hover::after{

    border-color:rgba(217,164,65,.25);

}

/*=========================================================
                STATISTICS
=========================================================*/

.stats-section{

    position:relative;

    background:#080808;

    overflow:hidden;

}

.stats-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(217,164,65,.05),

    transparent 65%);

    pointer-events:none;

}

.stat-box{

    position:relative;

    padding:45px 20px;

    border-radius:28px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    transition:.45s;

    overflow:hidden;

}

.stat-box:hover{

    transform:translateY(-8px);

    border-color:rgba(217,164,65,.30);

    box-shadow:

    0 30px 80px rgba(217,164,65,.12);

}

.stat-box::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-60px;

    top:-60px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.18),

    transparent);

    transition:.5s;

}

.stat-box:hover::before{

    transform:scale(1.3);

}

.stat-box h2{

    font-size:58px;

    font-weight:700;

    margin-bottom:12px;

    color:var(--primary-light);

}

.stat-box p{

    margin:0;

    color:#cfcfcf;

    font-size:15px;

    letter-spacing:1px;

    text-transform:uppercase;

}

/*=========================================================
                COUNTER DECORATION
=========================================================*/

.stat-box .counter{

    position:relative;

    display:inline-block;

}

.stat-box .counter::after{

    content:"+";

    font-size:.55em;

    color:var(--primary);

    margin-left:4px;

    vertical-align:top;

}

/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:991px){

.service-box{

padding:35px 25px;

}

.service-box i{

width:80px;

height:80px;

font-size:34px;

}

.stat-box{

padding:35px 20px;

}

.stat-box h2{

font-size:46px;

}

}

@media(max-width:576px){

.service-box{

padding:30px 20px;

border-radius:22px;

}

.service-box i{

width:70px;

height:70px;

font-size:28px;

margin-bottom:20px;

}

.service-box h5{

font-size:18px;

}

.stat-box{

padding:28px 15px;

}

.stat-box h2{

font-size:36px;

}

.stat-box p{

font-size:13px;

}

}


/*=========================================================
                OUR PROCESS
=========================================================*/

.our-process{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #0d0d0d,
    #070707);

}

.our-process::before{

    content:"";

    position:absolute;

    left:-220px;

    top:-180px;

    width:650px;

    height:650px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(217,164,65,.08),
    transparent 70%);

    filter:blur(90px);

}

.our-process::after{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-200px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,255,255,.03),
    transparent);

    filter:blur(80px);

}

/*=========================================================
                PROCESS CARD
=========================================================*/

.process-card{

    position:relative;

    padding:80px 35px 40px;

    height:100%;

    text-align:center;

    border-radius:30px;

    overflow:hidden;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:all .45s ease;

}

.process-card:hover{

    transform:translateY(-12px);

    border-color:rgba(217,164,65,.30);

    box-shadow:

    0 30px 70px rgba(217,164,65,.15);

}

.process-card span{

    position:absolute;

    top:28px;

    left:28px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    font-size:22px;

    font-weight:700;

    color:#111;

    background:var(--gold-gradient);

    box-shadow:

    0 12px 35px rgba(217,164,65,.25);

}

.process-card h4{

    margin-bottom:18px;

}

.process-card p{

    margin:0;

}

/*=========================================================
                PROCESS CONNECTOR
=========================================================*/

.process-card::before{

    content:"";

    position:absolute;

    top:56px;

    right:-55px;

    width:110px;

    height:2px;

    background:

    linear-gradient(

    90deg,

    rgba(217,164,65,.60),

    rgba(217,164,65,0));

}

.col-lg-3:last-child .process-card::before{

    display:none;

}

.process-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-80px;

    bottom:-80px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.15),

    transparent);

    opacity:0;

    transition:.45s;

}

.process-card:hover::after{

    opacity:1;

}

/*=========================================================
                PREMIUM TESTIMONIALS
=========================================================*/

.premium-testimonials{

    position:relative;

    overflow:hidden;

    background:#050505;

}

.premium-testimonials::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(217,164,65,.05),

    transparent 65%);

}

.testimonial-card{

    position:relative;

    height:100%;

    padding:45px;

    border-radius:32px;

    overflow:hidden;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    transition:.45s;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    border-color:rgba(217,164,65,.30);

    box-shadow:

    0 30px 80px rgba(217,164,65,.14);

}

.quote-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    border-radius:22px;

    background:var(--gold-gradient);

    color:#111;

    font-size:30px;

}

.testimonial-card p{

    margin-bottom:35px;

    font-size:17px;

    line-height:1.9;

}

.testimonial-card h5{

    margin:0;

    font-size:21px;

}

.testimonial-card span{

    display:block;

    margin-top:8px;

    color:var(--primary-light);

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    top:-70px;

    right:-70px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.14),

    transparent);

    transition:.45s;

}

.testimonial-card:hover::before{

    transform:scale(1.35);

}

/*=========================================================
                CLIENT RATING
=========================================================*/

.client-rating{

    display:flex;

    gap:6px;

    margin-bottom:22px;

}

.client-rating i{

    color:var(--primary);

    font-size:18px;

}

/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:991px){

.process-card{

padding:70px 30px 35px;

}

.process-card::before{

display:none;

}

.testimonial-card{

padding:35px;

}

}

@media(max-width:576px){

.process-card{

padding:65px 25px 30px;

border-radius:24px;

}

.process-card span{

width:50px;

height:50px;

font-size:18px;

}

.process-card h4{

font-size:22px;

}

.testimonial-card{

padding:30px 25px;

border-radius:24px;

}

.quote-icon{

width:60px;

height:60px;

font-size:24px;

margin-bottom:22px;

}

.testimonial-card p{

font-size:15px;

}

.testimonial-card h5{

font-size:18px;

}

}

/*=========================================================
                FAQ SECTION
=========================================================*/

.faq-section{

    position:relative;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #080808,
    #050505);

}

.faq-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-250px;

    top:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(217,164,65,.07),
    transparent 70%);

    filter:blur(90px);

}

.faq-section .accordion{

    max-width:900px;

    margin:auto;

}

.accordion-item{

    margin-bottom:20px;

    border:none;

    border-radius:24px !important;

    overflow:hidden;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

.accordion-button{

    padding:26px 30px;

    background:transparent;

    color:#fff;

    font-size:18px;

    font-weight:600;

    box-shadow:none;

}

.accordion-button:not(.collapsed){

    background:rgba(217,164,65,.08);

    color:var(--primary-light);

}

.accordion-button::after{

    filter:invert(1);

}

.accordion-body{

    padding:0 30px 30px;

    color:#c8c8c8;

    line-height:1.9;

}

/*=========================================================
                RELATED SERVICES
=========================================================*/

.related-services{

    position:relative;

    background:#0b0b0b;

    overflow:hidden;

}

.related-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:22px;

    text-align:center;

    padding:50px 30px;

    border-radius:28px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:.45s;

    color:#fff;

    overflow:hidden;

}

.related-card:hover{

    color:#fff;

    transform:translateY(-10px);

    border-color:rgba(217,164,65,.30);

    box-shadow:

    0 30px 80px rgba(217,164,65,.14);

}

.related-card i{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    background:var(--gold-gradient);

    color:#111;

    font-size:36px;

    transition:.4s;

}

.related-card:hover i{

    transform:rotate(-8deg) scale(1.08);

}

.related-card h4{

    margin:0;

    transition:.4s;

}

.related-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(217,164,65,.12),

    transparent 65%);

    opacity:0;

    transition:.4s;

}

.related-card:hover::before{

    opacity:1;

}

/*=========================================================
                PREMIUM CTA
=========================================================*/

.service-cta{

    position:relative;

    overflow:hidden;

    padding:150px 0;

    background:

    linear-gradient(

    135deg,

    #0f0f0f,

    #050505);

}

.cta-glow{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    width:900px;

    height:900px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(217,164,65,.10),

    transparent 70%);

    filter:blur(120px);

    animation:ctaPulse 8s ease-in-out infinite;

}

@keyframes ctaPulse{

    0%,100%{

        transform:

        translate(-50%,-50%)

        scale(1);

    }

    50%{

        transform:

        translate(-50%,-50%)

        scale(1.12);

    }

}

.service-cta .container{

    position:relative;

    z-index:2;

}

.service-cta h2{

    font-size:64px;

    margin:25px auto;

    max-width:900px;

}

.service-cta p{

    max-width:720px;

    margin:0 auto 45px;

    font-size:19px;

}

.service-cta .hero-buttons{

    justify-content:center;

}

/*=========================================================
                SECTION DIVIDERS
=========================================================*/

.section-divider{

    width:120px;

    height:4px;

    margin:35px auto;

    border-radius:30px;

    background:

    linear-gradient(

    90deg,

    transparent,

    var(--primary),

    transparent);

}

/*=========================================================
                SCROLL REVEAL
=========================================================*/

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/*=========================================================
                GLASS UTILITY
=========================================================*/

.glass{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

}

/*=========================================================
                GOLD BORDER
=========================================================*/

.gold-border{

    border:1px solid rgba(217,164,65,.30);

}

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

.text-gold{

    color:var(--primary-light);

}

.bg-dark-premium{

    background:#090909;

}

/*=========================================================
                CUSTOM SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

    180deg,

    var(--primary),

    #8a6118);

    border-radius:50px;

}

/*=========================================================
                SELECTION
=========================================================*/

::selection{

    background:rgba(217,164,65,.30);

    color:#fff;

}

/*=========================================================
                RESPONSIVE
=========================================================*/

@media(max-width:991px){

.service-cta{

padding:110px 0;

}

.service-cta h2{

font-size:46px;

}

.related-card{

padding:40px 25px;

}

}

@media(max-width:576px){

.accordion-button{

padding:20px;

font-size:16px;

}

.accordion-body{

padding:0 20px 20px;

}

.related-card{

padding:30px 20px;

border-radius:22px;

}

.related-card i{

width:70px;

height:70px;

font-size:28px;

}

.related-card h4{

font-size:20px;

}

.service-cta{

padding:90px 0;

}

.service-cta h2{

font-size:34px;

}

.service-cta p{

font-size:16px;

}

}


/* AOS Animation */

@keyframes float {

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

    50%{
        transform:translateY(-15px);
    }

}

.hero-image{

    animation:float 5s ease-in-out infinite;

}


@keyframes cardFloat{

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

    50%{
        transform:translateY(-8px);
    }

}

.floating-card{

    animation:cardFloat 4s ease-in-out infinite;

}


@keyframes pulseGlow{

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

    50%{
        opacity:.8;
        transform:scale(1.1);
    }

}

.hero-glow{

    animation:pulseGlow 6s ease infinite;

}

@keyframes blobMove{

    0%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(30px,-25px);
    }

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

}

.blob{

    animation:blobMove 10s ease-in-out infinite alternate;

}


.primary-btn,
.secondary-btn{

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-6px);

}


.feature-card,
.process-card,
.service-box,
.related-card{

    transition:.35s ease;

}

.feature-card:hover{

    transform:translateY(-10px);

}

.gallery-item{

    overflow:hidden;

}

.gallery-item img{

    transition:.7s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.mouse-glow{

    position:fixed;

    width:320px;

    height:320px;

    border-radius:50%;

    pointer-events:none;

    left:0;

    top:0;

    z-index:1;

    transform:translate(-50%,-50%);

    background:radial-gradient(circle,
        rgba(255,170,0,.18),
        rgba(255,170,0,.08),
        transparent 70%);

    filter:blur(45px);

    transition:opacity .3s;

}




/*=========================================================
        GLOBAL READ MORE
=========================================================*/

.read-more-wrapper{
    position:relative;
    margin-top:15px;
}

.read-more-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:
        max-height .6s ease,
        opacity .45s ease,
        margin .45s ease;
}



.read-more-content.active{
    max-height:2500px;
    opacity:1;
    margin-top:18px;
}

.read-more-btn{

    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:18px;

    padding:10px 16px;

    background:none;
    border:none;

    color:#22d3ee;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    border-radius:8px;
}

@media(max-width:768px){
  .read-more-btn{
    min-height:44px;
    padding:12px 16px;
  }
}

.read-more-btn i{
    transition:.35s;
}

.read-more-btn.active i{
    transform:rotate(180deg);
}

.read-more-btn:hover{

    color:#7ee7ff;

}