/* ==========================================
GR SOLUTIONS V2
STYLE.CSS - PART 1
========================================== */
/* =========================
RESET
========================= */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Inter',sans-serif;
background:#F6F4F1;
color:#111827;
overflow-x:hidden;
line-height:1.7;
}

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

:root{

--bg:#F6F4F1;
--dark:#111827;
--accent:#C89B5E;
--text:#475569;
--glass:rgba(255,255,255,.72);
--border:rgba(255,255,255,.3);

}

/* =========================
GENERAL
========================= */

section{
padding:120px 8%;
position:relative;
z-index:2;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

.section-title{
text-align:center;
max-width:900px;
margin:0 auto 80px;
}

.section-title span{
color:var(--accent);
font-size:14px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}

.section-title h2{
font-size:64px;
font-weight:800;
line-height:1.1;
margin-top:20px;
}

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

.primary-btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:14px 20px;

background:var(--dark);

color:white;

border-radius:50px;

font-weight:600;

transition:.35s ease;

}

.primary-btn:hover{

transform:translateY(-4px);

}

.secondary-btn{

display:inline-flex;
align-items:center;
justify-content:center;

padding:18px 30px;

border-radius:50px;

border:1px solid rgba(0,0,0,.1);

color:var(--dark);

font-weight:600;

transition:.35s ease;

}

.secondary-btn:hover{

background:white;

}

/* =========================
LOADER
========================= */

.loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100vh;

background:#F6F4F1;

display:flex;
align-items:center;
justify-content:center;

z-index:99999;

}

.loader-logo img{

height:120px;

}

/* =========================
MESH BACKGROUND
========================= */

.mesh-bg{

position:fixed;

inset:0;

overflow:hidden;

z-index:0;

pointer-events:none;

}

.mesh-bg span{

position:absolute;

border-radius:50%;

filter:blur(120px);

opacity:.45;

animation:floatGlow 15s infinite ease-in-out;

}

.mesh-bg span:nth-child(1){

width:450px;
height:450px;

background:#e4c79d;

top:-100px;
left:-100px;

}

.mesh-bg span:nth-child(2){

width:500px;
height:500px;

background:#d7d4ff;

right:-100px;
top:20%;

}

.mesh-bg span:nth-child(3){

width:400px;
height:400px;

background:#c8e6d8;

bottom:-100px;
left:35%;

}

@keyframes floatGlow{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

/* =========================
NAVBAR
========================= */

.navbar{

position:fixed;

top:12px;
left:0;

width:100%;

z-index:999;

padding:0 24px;

}

.nav-container{

max-width:1400px;

margin:auto;

padding:8px 10px;

display:flex;
align-items:center;
justify-content:space-between;

background:transparent;

backdrop-filter:none;
-webkit-backdrop-filter:none;

border:none;

border-radius:18px;

box-shadow:none;

}

.logo img{

height:70px;

}

.desktop-nav{

display:flex;
align-items:center;
gap:40px;

}

.desktop-nav a{

color:var(--dark);

font-weight:600;

position:relative;

}

.desktop-nav a::after{

content:"";

position:absolute;

left:0;
bottom:-8px;

width:0;
height:2px;

background:var(--accent);

transition:.3s;

}

.desktop-nav a:hover::after{

width:100%;

}

/* =========================
NAV ACTIONS
========================= */

.nav-actions{

display:flex;
align-items:center;
gap:15px;

}

.hamburger{

display:none;

width:50px;
height:50px;

border:none;

background:white;

border-radius:50%;

cursor:pointer;

}

.hamburger span{

display:block;

width:20px;
height:2px;

background:var(--dark);

margin:4px auto;

}

/* =========================
MOBILE MENU
========================= */

.mobile-overlay{

position:fixed;

inset:0;

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

opacity:0;

visibility:hidden;

z-index:1000;

}

.mobile-menu{

position:fixed;

top:0;
right:-100%;

width:320px;
height:100vh;

background:white;

padding:40px;

z-index:1001;

transition:.4s ease;

}

.mobile-header{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:50px;

}

.mobile-header img{

height:60px;

}

.close-menu{

background:none;
border:none;

font-size:28px;

cursor:pointer;

}

.mobile-links{

display:flex;
flex-direction:column;
gap:25px;

}

.mobile-links a{

font-size:18px;
font-weight:600;
color:var(--dark);

}

.mobile-btn{

display:block;

margin-top:40px;

text-align:center;

padding:16px;

border-radius:50px;

background:var(--dark);

color:white;

}

/* =========================
HERO
========================= */
/*=========================================
PREMIUM HERO
PART 1
=========================================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    overflow:hidden;

    background:#ffffff;

    padding:140px 30px 90px;
    
    z-index:5;
}

/*==========================
BACKGROUND BRAND
==========================*/

.hero-brand{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.brand-g{

    position:absolute;

    top:-70px;
    left:-40px;

    font-size:620px;      /* 550 → 620 */

    font-weight:900;

    color:#111827;

    opacity:.055;          /* .025 → .055 */

    letter-spacing:-22px;

    user-select:none;

    line-height:.85;

    font-family:"Arial Black",sans-serif;

}

.brand-r{

    position:absolute;

    right:-40px;

    bottom:-170px;

    font-size:620px;      /* 550 → 620 */

    font-weight:900;

    color:#111827;

    opacity:.055;         /* .025 → .055 */

    letter-spacing:-22px;

    user-select:none;

    line-height:.85;

    font-family:"Arial Black",sans-serif;

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

.hero-container{

    position:relative;

    z-index:10;

    max-width:900px;

    margin-top:-30px;

}

.hero-label{

    display:inline-block;

    margin-bottom:35px;

    font-size:13px;

    font-weight:700;

    letter-spacing:6px;

    color:#64748b;

    text-transform:uppercase;

}

.hero-title{

    font-size:78px;

    font-weight:900;

    line-height:1.04;

    letter-spacing:-3px;

    color:#111827;

    margin-bottom:28px;

}

.hero-title .word{

    display:inline-block;

    margin:0 10px;

    opacity:0;

    filter:blur(12px);

    transform:translateY(35px);

    color:#9ca3af;

}

.hero-description{

    max-width:560px;

    margin:auto;

    font-size:21px;

    line-height:1.9;

    color:#6b7280;

    opacity:0;

}

/*=========================================
PREMIUM HERO
PART 2
=========================================*/

/*==========================
SCROLL BUTTON
==========================*/

.scroll-indicator{

    position:absolute;

    right:70px;

    bottom:60px;

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#111827;

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

    border:1px solid rgba(17,24,39,.08);

    backdrop-filter:blur(20px);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.35s ease;

    opacity:0;

    z-index:20;

}

.scroll-indicator:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 60px rgba(0,0,0,.15);

}

.scroll-indicator svg{

    width:22px;

    height:22px;

}

/*==========================
SHOW CLASSES
==========================*/

.hero-title .word.show{

    opacity:1;

    filter:blur(0);

    transform:translateY(0);

    transition:

    opacity .8s cubic-bezier(.22,1,.36,1),

    transform .8s cubic-bezier(.22,1,.36,1),

    filter .8s ease,

    color .8s ease;

}

.hero-title.finish .word{

    color:#111827;

}

.hero-description.show{

    opacity:1;

    transform:translateY(0);

    transition:

    opacity .8s ease,

    transform .8s ease;

}

.scroll-indicator.show{

    opacity:1;

    animation:arrowFloat 2.8s ease-in-out infinite;

}

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

@keyframes arrowFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

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

@media(max-width:992px){

.hero-title{

    font-size:60px;

}

.hero-description{

    font-size:18px;

    max-width:560px;

}

.brand-g,
.brand-r{

    font-size:360px;

}

}

@media(max-width:768px){

.hero{

    padding:120px 20px 90px;

}

.hero-title{

    font-size:40px;

    letter-spacing:-1px;

    line-height:1.15;

}

.hero-title .word{

    display:block;

    margin:8px 0;

}

.hero-description{

    font-size:16px;

    line-height:1.8;

}



.brand-g{

    left:-60px;

    top:20px;

    font-size:220px;

}

.brand-r{

    right:-60px;

    bottom:-20px;

    font-size:220px;

}

.scroll-indicator{

    width:56px;

    height:56px;

    bottom:30px;

}

}

/*=========================================
INDUSTRIES V2
=========================================*/

.industries{

    position:relative;

    padding:140px 8%;

    background:#050505;

    overflow:hidden;

}

.industries::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(37,99,235,.08),
    transparent 40%),

    radial-gradient(circle at bottom left,
    rgba(255,255,255,.03),
    transparent 45%);

    pointer-events:none;

}

.industries-container{

    position:relative;

    z-index:2;

    max-width:1400px;

    margin:auto;

}

.industries-tag{

    display:inline-block;

    padding:12px 26px;

    border-radius:50px;

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

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

    color:#dbeafe;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:30px;

}

.industries-title{

    color:#fff;

    font-size:68px;

    font-weight:900;

    line-height:1.05;

    letter-spacing:-2px;

    max-width:850px;

    margin-bottom:28px;

}

.industries-subtitle{

    max-width:760px;

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

    font-size:20px;

    line-height:1.9;

    margin-bottom:70px;

}

.industry-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-bottom:80px;

}

/*=========================================
INDUSTRY BOXES
=========================================*/

.industry-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:16px;

    height:170px;

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

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

    border-radius:24px;

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    transition:.35s ease;

    cursor:pointer;

}

.industry-box:hover{

    transform:translateY(-10px);

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

    border-color:rgba(37,99,235,.45);

    box-shadow:0 25px 60px rgba(37,99,235,.18);

}

.industry-box i{

    font-size:42px;

    color:#60a5fa;

    transition:.35s;

}

.industry-box:hover i{

    transform:scale(1.18);

    color:#ffffff;

}

.industry-box span{

    color:#fff;

    font-size:18px;

    font-weight:700;

}

/*=========================================
EXPLORE
=========================================*/

.explore-area{

    text-align:center;

    margin:90px 0 70px;

}

.explore-area p{

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

    font-size:18px;

    margin-bottom:28px;

}

.explore-btn{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:18px 42px;

    border:none;

    border-radius:60px;

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.explore-btn:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 50px rgba(37,99,235,.35);

}

/*=========================================
DEMO BROWSER
=========================================*/

.demo-browser{

    margin-top:40px;

    border-radius:28px;

    overflow:hidden;

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

    background:#0d0d0d;

    box-shadow:0 30px 80px rgba(0,0,0,.45);

}

.demo-browser-top{

    height:68px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 26px;

    background:#161616;

}

.demo-browser-top span{

    width:14px;

    height:14px;

    border-radius:50%;

}

.demo-browser-top span:nth-child(1){

    background:#ff5f57;

}

.demo-browser-top span:nth-child(2){

    background:#febc2e;

}

.demo-browser-top span:nth-child(3){

    background:#28c840;

}

.demo-browser-title{

    margin-left:18px;

    color:#d1d5db;

    font-weight:600;

}

.demo-browser-body{

    position:relative;

    min-height:520px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:
    radial-gradient(circle at top,#1e3a8a22,transparent 55%),
    #090909;

    overflow:hidden;

}

/*=========================================
DEMO LOADER
=========================================*/

.demo-loader{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:#050505;

    z-index:10;

}

.loader-logo{

    width:130px;

    height:130px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:48px;

    font-weight:900;

    color:#fff;

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

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

    backdrop-filter:blur(20px);

    margin-bottom:35px;

    animation:loaderPulse 2s ease-in-out infinite;

}

@keyframes loaderPulse{

0%{

transform:scale(1);

box-shadow:0 0 0 rgba(255,255,255,0);

}

50%{

transform:scale(1.08);

box-shadow:0 0 60px rgba(255,255,255,.12);

}

100%{

transform:scale(1);

box-shadow:0 0 0 rgba(255,255,255,0);

}

}

.loader-title{

    color:#fff;

    font-size:38px;

    font-weight:800;

    margin-bottom:30px;

    letter-spacing:-1px;

}

.loader-bar{

    width:360px;

    height:8px;

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

    border-radius:50px;

    overflow:hidden;

    margin-bottom:20px;

}

.loader-fill{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#2563eb,#60a5fa,#ffffff);

    border-radius:50px;

}

.loader-text{

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

    font-size:15px;

    letter-spacing:3px;

    text-transform:uppercase;

}

/*=========================================
DEMO SITE
=========================================*/

.demo-site{

    display:none;

    width:100%;

    height:100%;

    background:#ffffff;

}

/*=========================================
MINI WEBSITE
PART 1
=========================================*/

.mini-site{

    width:100%;
    min-height:520px;

    background:
    radial-gradient(circle at top right,
    rgba(59,130,246,.10),
    transparent 40%),

    #080808;

    color:#fff;

    padding:35px;

    box-sizing:border-box;

}

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

.mini-nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:30px;

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

}

.mini-logo{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:900;

    font-size:20px;

    background:#fff;

    color:#000;

}

.mini-menu{

    display:flex;

    gap:35px;

    list-style:none;

}

.mini-menu li{

    color:#d1d5db;

    cursor:pointer;

    transition:.3s;

    font-size:15px;

}

.mini-menu li:hover{

    color:#60a5fa;

}

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

.mini-hero{

    max-width:700px;

    margin:70px auto;

    text-align:center;

}

.mini-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

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

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

    color:#60a5fa;

    font-size:12px;

    letter-spacing:2px;

    margin-bottom:25px;

}

.mini-hero h2{

    font-size:52px;

    line-height:1.08;

    margin-bottom:25px;

    font-weight:900;

}

.mini-hero p{

    color:#bdbdbd;

    font-size:18px;

    line-height:1.8;

    max-width:620px;

    margin:auto auto 40px;

}

.mini-btn{

    padding:16px 36px;

    border-radius:50px;

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

    background:#ffffff;

    color:#000;

    font-weight:700;

    cursor:pointer;

    transition:.35s;

}

.mini-btn:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-4px);

}

/*=========================================
MINI WEBSITE
PART 2
=========================================*/

.mini-features{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin-top:60px;

}

.mini-card{

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

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

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    transition:.35s ease;

    backdrop-filter:blur(20px);

}

.mini-card:hover{

    transform:translateY(-10px);

    border-color:rgba(59,130,246,.40);

    box-shadow:0 20px 50px rgba(59,130,246,.18);

}

.mini-card{

    font-size:38px;

}

.mini-card h4{

    margin:18px 0 10px;

    font-size:22px;

    color:#fff;

}

.mini-card p{

    color:#bdbdbd;

    font-size:15px;

    line-height:1.7;

}

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

.demo-back{

    position:absolute;

    top:18px;

    right:22px;

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:40px;

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

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

    color:#fff;

    cursor:pointer;

    transition:.3s;

    z-index:20;

}

.demo-back:hover{

    background:#2563eb;

}

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

@media(max-width:900px){

    .mini-menu{

        display:none;

    }

    .mini-features{

        grid-template-columns:1fr;

    }

    .mini-hero h2{

        font-size:38px;

    }

    .mini-hero{

        margin:50px auto;

    }

}

@media(max-width:768px){

    .mini-site{

        padding:25px;

    }

    .mini-logo{

        width:42px;

        height:42px;

    }

    .mini-hero h2{

        font-size:30px;

    }

    .mini-hero p{

        font-size:15px;

    }

    .mini-btn{

        width:100%;

    }

}

.demo-overlay{

    text-align:center;

    max-width:700px;

}

.demo-logo{

    width:110px;

    height:110px;

    margin:auto;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:42px;

    font-weight:900;

    color:#fff;

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

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

    margin-bottom:28px;

}

.demo-overlay h3{

    color:#fff;

    font-size:48px;

    margin-bottom:18px;

}

.demo-overlay p{

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

    font-size:20px;

    line-height:1.8;

}

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

@media(max-width:992px){

    .industry-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .industries-title{

        font-size:46px;

    }

}

@media(max-width:768px){

    .industries{

        padding:100px 20px;

    }

    .industry-grid{

        grid-template-columns:1fr;

    }

    .demo-overlay h3{

        font-size:34px;

    }

}
/*=========================================
PROCESS V3 - PREMIUM DARK
=========================================*/

.process{

    position:relative;

    padding:140px 8%;

    background:linear-gradient(
    135deg,
    #0f172a 0%,
    #111827 50%,
    #1e293b 100%
    );

    overflow:hidden;

}

/* Glow */

.process::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    background:#2563eb;

    filter:blur(180px);

    opacity:.18;

    top:-180px;
    right:-120px;

    border-radius:50%;

}

.process::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:#06b6d4;

    filter:blur(180px);

    opacity:.10;

    bottom:-150px;
    left:-120px;

    border-radius:50%;

}

/* Title */

.process .section-title{

    position:relative;

    z-index:2;

}

.process .section-title span{

    color:#60a5fa;

}

.process .section-title h2{

    color:#fff;

}

.process .section-title p{

    color:#cbd5e1;

}

/* Wrapper */

.process-wrapper{

    position:relative;

    z-index:2;

    max-width:1450px;

    margin:90px auto 0;

    display:flex;

    flex-direction:column;

    gap:70px;

}

/* Card */

.process-card{

    display:grid;

    grid-template-columns:48% 52%;

    align-items:center;

    gap:50px;

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

    backdrop-filter:blur(18px);

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

    border-radius:32px;

    overflow:hidden;

    box-shadow:0 30px 70px rgba(0,0,0,.25);

    opacity:0;

    transform:translateY(-70px);

    transition:
    .5s,
    opacity .8s,
    transform .8s;

}

.process-card.show{

    opacity:1;

    transform:translateY(0);

}

.process-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:
    0 35px 80px rgba(37,99,235,.25);

}

/* Reverse */

.process-card.reverse .process-image{

    order:2;

}

.process-card.reverse .process-content{

    order:1;

}

/* Image */

.process-image{

    height:380px;

    overflow:hidden;

}

.process-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

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

    transition:
    .9s;

}

.process-card.show .process-image img{

    opacity:1;

    transform:translateY(0) scale(1);

}

.process-card:hover .process-image img{

    transform:scale(1.08);

}

/* Content */

.process-content{

    padding:55px;

}

.step-no{

    display:inline-block;

    padding:8px 18px;

    background:rgba(59,130,246,.15);

    color:#60a5fa;

    border:1px solid rgba(96,165,250,.25);

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    margin-bottom:20px;

}

.process-content h3{

    font-size:42px;

    color:#fff;

    margin-bottom:18px;

}

.process-content p{

    color:#cbd5e1;

    font-size:18px;

    line-height:1.9;

    margin-bottom:30px;

}

/* Tags */

.step-tags{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}

.step-tags span{

    padding:10px 18px;

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

    color:#fff;

    border-radius:40px;

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

    font-size:14px;

    transition:.35s;

}

.step-tags span:hover{

    background:#2563eb;

    border-color:#2563eb;

}

/* Tablet */

@media(max-width:992px){

.process-card{

    grid-template-columns:1fr;

}

.process-card.reverse .process-image,
.process-card.reverse .process-content{

    order:unset;

}

.process-image{

    height:260px;

}

.process-content{

    padding:35px;

}

.process-content h3{

    font-size:34px;

}

}

/* Mobile */

@media(max-width:768px){

.process{

    padding:90px 20px;

}

.process-wrapper{

    gap:35px;

}

.process-card{

    grid-template-columns:1fr;

}

.process-image{

    height:220px;

}

.process-content{

    padding:28px;

}

.process-content h3{

    font-size:28px;

}

.process-content p{

    font-size:16px;

}

.step-tags{

    gap:10px;

}

.step-tags span{

    padding:8px 14px;

    font-size:13px;

}

}
/* =========================
WHY GR SOLUTIONS
========================= */

.why-gr{

padding:140px 8%;

}

.why-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

margin-top:80px;

}

.why-box{
   
position:relative;
   
overflow:hidden;

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

backdrop-filter:blur(20px);

padding:40px;

border-radius:30px;

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

transition:.35s ease;

box-shadow:
0 15px 40px rgba(0,0,0,.05);

}


.why-box::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background-size:cover;
background-position:center;

opacity:.15;

z-index:0;

transition:.5s;

}

.why-box:nth-child(1)::before{
background-image:url('https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200');
}

.why-box:nth-child(2)::before{
background-image:url('https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=1200');
}

.why-box:nth-child(3)::before{
background-image:url('https://images.unsplash.com/photo-1558655146-d09347e92766?w=1200');
}

.why-box:nth-child(4)::before{
background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1200');
}

.why-box:nth-child(5)::before{
background-image:url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1200');
}

.why-box:nth-child(6)::before{
background-image:url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200');
}


.why-box *{
position:relative;
z-index:2;
}

.why-box:hover::before{
transform:scale(1.1);
opacity:.25;
}

.why-box:hover{

transform:translateY(-10px);

}

.why-box i{

font-size:36px;

color:var(--accent);

margin-bottom:25px;

}

.why-box h3{

font-size:26px;

margin-bottom:15px;

}

.why-box p{

color:var(--text);

}

/* =========================
TECHNOLOGY MARQUEE
========================= */

.tech-section{

padding:140px 0;

overflow:hidden;

}

.tech-marquee{

width:100%;

overflow:hidden;

margin-top:80px;

}

.tech-track{

display:flex;

gap:40px;

width:max-content;

animation:techScroll 25s linear infinite;

}

.tech-track span{

padding:20px 40px;

background:white;

border-radius:60px;

font-size:20px;

font-weight:700;

color:#111827;

box-shadow:
0 15px 40px rgba(0,0,0,.06);

}

@keyframes techScroll{

0%{
transform:translateX(0);
}

100%{
transform:translateX(-50%);
}

}

/* =========================
CONTACT
========================= */

.contact-section{

padding:140px 8%;

}

.contact-wrapper{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.contact-left h2{

font-size:64px;

line-height:1.1;

margin:20px 0;

}

.contact-left p{

font-size:18px;

color:var(--text);

max-width:600px;

}

.contact-info{

margin-top:40px;

display:flex;

flex-direction:column;

gap:20px;

}

.info-box{

display:flex;

align-items:center;

gap:15px;

font-weight:600;

}

.info-box i{

color:var(--accent);

font-size:22px;

}

.contact-form{

background:white;

padding:40px;

border-radius:30px;

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

}

.form-group{

margin-bottom:20px;

}

.contact-form input,
.contact-form textarea{

width:100%;

padding:18px;

border:none;

background:#f8fafc;

border-radius:16px;

font-size:16px;

}

.contact-form textarea{

height:180px;

resize:none;

}


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

.premium-cta{
    padding:180px 8%;
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(rgba(17,24,39,.78),rgba(17,24,39,.78)),
    url("https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1800&q=80");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    color:#fff;
    text-align:center;
}

.cta-content{
    position:relative;
    z-index:2;
    max-width:900px;
    margin:auto;
}

.cta-glow{

position:absolute;

width:500px;
height:500px;

background:#C89B5E;

filter:blur(180px);

opacity:.18;

top:-100px;
left:50%;

transform:translateX(-50%);

}

.cta-content{

position:relative;

z-index:2;

max-width:900px;

margin:auto;

}

.cta-content span{

color:#C89B5E;

font-weight:700;

letter-spacing:2px;

}

.cta-content h2{

font-size:72px;

line-height:1.05;

margin:25px 0;

}

.cta-content p{

font-size:20px;

color:#cbd5e1;

margin-bottom:35px;

}

.cta-image{
    width:520px;
    max-width:100%;
    margin:0 auto 40px;
    display:block;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.25);
}

@media(max-width:768px){
    .cta-image{
        width:100%;
        margin-bottom:25px;
    }
}


/* ==========================================
RESPONSIVE - TABLET
========================================== */

@media(max-width:1200px){

.hero{
grid-template-columns:1fr;
text-align:center;
}

.hero-left p{
margin:auto;
}

.hero-buttons{
justify-content:center;
}

.hero-stats{
justify-content:center;
}

.project-showcase{
grid-template-columns:1fr;
gap:50px;
}

.project-showcase.reverse .project-browser,
.project-showcase.reverse .project-info{
order:unset;
}

.contact-wrapper{
grid-template-columns:1fr;
}

.footer-top{
grid-template-columns:1fr 1fr;
}

.timeline{
grid-template-columns:1fr;
gap:40px;
}

.timeline-line{
display:none;
}

}

/* ==========================================
MOBILE
========================================== */

@media(max-width:768px){

section{
padding:90px 6%;
}

.logo img{
height:55px;
}

.desktop-nav{
display:none;
}

.nav-actions .primary-btn{
display:none;
}

.hamburger{
display:block;
}

.nav-container{
padding:12px 22px;
}

.hero{
padding-top:150px;
}

.hero-left h1{
font-size:48px;
}

.hero-left p{
font-size:17px;
}

.hero-buttons{
flex-direction:column;
}

.hero-stats{
flex-direction:column;
gap:25px;
}

.browser-window{
max-width:100%;
}

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

.section-title h2{
font-size:42px;
}

.project-info h3{
font-size:38px;
}

.contact-left h2{
font-size:42px;
}

.cta-content h2{
font-size:44px;
}

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

.footer-top{
grid-template-columns:1fr;
}

}

/* ==========================================
SMALL MOBILE
========================================== */

@media(max-width:480px){

.hero-left h1{
font-size:38px;
}

.section-title h2{
font-size:34px;
}

.contact-left h2{
font-size:34px;
}

.cta-content h2{
font-size:36px;
}

.primary-btn,
.secondary-btn{
width:100%;
}

}

/* ==================================================
   HERO BROWSER PREVIEW V2
   Mini Agency Website Inside Browser
================================================== */

.preview-navbar{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:35px;

}

.preview-logo{

font-size:18px;
font-weight:800;

color:#111827;

}

.preview-nav-links{

display:flex;
gap:20px;

font-size:13px;
font-weight:600;

color:#64748b;

}

.preview-hero h2{

font-size:42px;
line-height:1.05;

font-weight:800;

margin-bottom:15px;

color:#111827;

}

.preview-hero p{

font-size:15px;

line-height:1.8;

color:#64748b;

margin-bottom:20px;

}

.preview-hero button{

background:#111827;

color:white;

border:none;

padding:12px 22px;

border-radius:50px;

font-weight:600;

cursor:pointer;

margin-bottom:25px;

}

.preview-services{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:12px;

}

.service-preview-card{

background:#f8fafc;

padding:18px;

border-radius:16px;

text-align:center;

font-size:13px;

font-weight:700;

border:1px solid rgba(17,24,39,.06);

transition:.3s ease;

}

.service-preview-card:hover{

transform:translateY(-5px);

}

/* ==================================================
   FEATURED WORK PREVIEWS V2
   Premium Mini Website Mockups
================================================== */

.project-mini-site{

height:100%;

display:flex;
flex-direction:column;

justify-content:flex-start;

align-items:flex-start;

padding:35px;

text-align:left;

}

.mini-topbar{

font-size:14px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:25px;

color:#d4a45f;

}

.project-mini-site h4{

font-size:22px;

font-weight:800;

line-height:1.2;

margin-bottom:12px;

color:white;

}

.project-mini-site p{

font-size:15px;

line-height:1.8;

max-width:320px;

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

margin-bottom:25px;

}

.mini-btn{

padding:12px 24px;

background:white;

color:#111827;

font-weight:700;

border-radius:50px;

}

.mini-products{

display:flex;

gap:15px;

margin-top:20px;

}

.mini-products span{

width:90px;
height:110px;

border-radius:14px;

background:white;

display:block;

}

/* FEATURED WORK PREVIEWS V2 */

.mini-navbar{

display:flex;

justify-content:space-between;

align-items:center;

width:100%;

margin-bottom:40px;

}

.mini-brand{

font-size:12px;

font-weight:800;

color:white;

letter-spacing:1px;

}

.mini-menu{

display:flex;

gap:15px;

font-size:11px;

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

}
/* ==========================================
FEATURED WORK REDESIGN
========================================== */

.corporate-preview,
.restaurant-preview,
.ecommerce-preview{
padding:30px;
height:450px;
}

.corp-nav,
.shop-top{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}

.corp-logo{
font-weight:800;
color:white;
}

.corp-links{
display:flex;
gap:15px;
color:rgba(255,255,255,.7);
font-size:12px;
}

.corp-hero h3,
.restaurant-site h3,
.shop-site h3{
font-size:32px;
line-height:1.1;
color:white;
margin-bottom:15px;
}

.corp-hero p,
.restaurant-site p{
color:rgba(255,255,255,.75);
margin-bottom:20px;
}

.corp-btn{
display:inline-block;
background:white;
color:#111827;
padding:12px 24px;
border-radius:40px;
font-weight:700;
}

.corp-cards{
display:flex;
gap:15px;
margin-top:40px;
}

.corp-card{
background:white;
color:#111827;
padding:15px;
border-radius:16px;
font-weight:700;
flex:1;
}

.product-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
margin-top:25px;
}

.product-box{
height:110px;
background:white;
border-radius:18px;
}

.corporate-preview{
background:linear-gradient(135deg,#111827,#334155);
}


.ecommerce-preview{
background:linear-gradient(135deg,#0f172a,#2563eb);
}


.clinic-preview{
background:linear-gradient(135deg,#0f766e,#14b8a6);
padding:30px;
height:450px;
}

.clinic-badge{
color:white;
font-size:14px;
font-weight:700;
margin-bottom:20px;
}

.clinic-site h3{
font-size:32px;
color:white;
margin-bottom:15px;
}

.clinic-site p{
color:rgba(255,255,255,.8);
margin-bottom:30px;
}

.clinic-cards{
display:flex;
gap:15px;
margin-top:30px;
}

.clinic-card{
flex:1;
background:white;
padding:20px;
border-radius:16px;
font-weight:700;
text-align:center;
}

/* ==========================================
PROJECT 04 - EDUCATION WEBSITE
========================================== */

.education-preview{
background:linear-gradient(135deg,#4c1d95,#7c3aed);
padding:30px;
height:450px;
}

.education-badge{
color:white;
font-size:14px;
font-weight:700;
margin-bottom:20px;
}

.education-site h3{
font-size:32px;
color:white;
margin-bottom:15px;
line-height:1.1;
}

.education-site p{
color:rgba(255,255,255,.8);
margin-bottom:30px;
}

.education-cards{
display:flex;
gap:15px;
margin-top:30px;
}

.education-card{
flex:1;
background:white;
padding:20px;
border-radius:16px;
font-weight:700;
text-align:center;
color:#111827;
}

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

.ecommerce-badge{
color:white;
font-size:14px;
font-weight:700;
margin-bottom:20px;
}

.ecommerce-site h3{
font-size:32px;
color:white;
margin-bottom:15px;
}

.ecommerce-site p{
color:rgba(255,255,255,.8);
margin-bottom:30px;
}

.ecommerce-cards{
display:flex;
gap:15px;
margin-top:30px;
}

.ecommerce-card{
flex:1;
background:white;
padding:20px;
border-radius:16px;
font-weight:700;
text-align:center;
color:#111827;
}


/* ==========================================
GLOBAL MOBILE SAFETY NET
========================================== */

@media (max-width:768px){

    *{
        max-width:100%;
    }

    body{
        overflow-x:hidden;
    }

    img{
        max-width:100%;
        height:auto;
    }

    section{
        padding:80px 20px;
    }

    /* ALL GRID LAYOUTS */

    .hero,
    .project-showcase,
    .contact-wrapper,
    .footer-top{
        display:grid;
        grid-template-columns:1fr !important;
        gap:40px;
    }

    /* ALL FLEX ROWS */

    .hero-buttons,
    .hero-stats,
    .corp-cards,
    .clinic-cards,
    .ecommerce-cards,
    .education-cards{
        flex-direction:column;
    }

    /* TITLES */

    h1{
        font-size:42px !important;
        line-height:1.1;
    }

    h2{
        font-size:34px !important;
        line-height:1.1;
    }

    h3{
        font-size:28px !important;
        line-height:1.2;
    }

    /* BROWSER PREVIEWS */

    .browser-window,
    .browser-frame{
        width:100%;
    }

    .corporate-preview,
    .clinic-preview,
    .ecommerce-preview,
    .education-preview{
        height:auto;
        min-height:350px;
    }

    /* WHY SECTION */

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

    /* PROCESS */

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

    .timeline-line{
        display:none;
    }

    /* TECH */

    .tech-track{
        gap:20px;
    }

}




/* =========================
ABOUT
========================= */
/*=========================================
ABOUT - PREMIUM DARK
=========================================*/

.about{

    position:relative;

    background:#0B0B0C;

    padding:140px 8%;

    overflow:hidden;

}

.about-glow{

    position:absolute;

    top:-180px;

    left:50%;

    transform:translateX(-50%);

    width:700px;

    height:700px;

    background:#2563eb;

    opacity:.08;

    filter:blur(180px);

    border-radius:50%;

    pointer-events:none;

}

.about-container{

    position:relative;

    z-index:2;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;

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

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

    backdrop-filter:blur(28px);

    -webkit-backdrop-filter:blur(28px);

    border-radius:36px;

    padding:70px;

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

}

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

.about-tag{

    display:inline-block;

    padding:12px 22px;

    border-radius:50px;

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

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

    color:#cbd5e1;

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:28px;

}

.about-title{

    color:#fff;

    font-size:58px;

    line-height:1.08;

    font-weight:900;

    letter-spacing:-2px;

    margin-bottom:28px;

}

.about-text{

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

    font-size:18px;

    line-height:2;

    max-width:640px;

    margin-bottom:42px;

}

.about-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:58px;

    padding:0 34px;

    border-radius:999px;

    background:#fff;

    color:#111;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.about-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(255,255,255,.15);

}
/*=========================================
ABOUT FOUNDER
=========================================*/

.about-founder{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

}

/*==========================
PHOTO FRAME
==========================*/

.founder-frame{

    width:420px;
    height:420px;

    margin:0 auto 30px;

    border-radius:50%;
    overflow:hidden;

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

    background:#151515;

    box-shadow:
    0 25px 80px rgba(0,0,0,.55),
    0 0 0 12px rgba(255,255,255,.03);

}

.founder-frame:hover{

    transform:translateY(-8px) scale(1.02);

    box-shadow:
    0 45px 90px rgba(37,99,235,.22);

}

.founder-frame img{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center top;

    display:block;

}

/*==========================
NAME
==========================*/

.about-founder h3{

    margin-top:28px;

    color:#ffffff;

    font-size:30px;

    font-weight:800;

    letter-spacing:-1px;

}

.about-founder span{

    margin-top:8px;

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

    font-size:17px;

    letter-spacing:2px;

    text-transform:uppercase;

}

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

@media(max-width:992px){

.about-container{

    grid-template-columns:1fr;

    text-align:center;

    padding:50px;

}

.about-text{

    margin:auto auto 40px;

}

.founder-frame{

    width:320px;

    height:430px;

}

}

@media(max-width:768px){

.about{

    padding:90px 20px;

}

.about-container{

    padding:30px;

    gap:50px;

}

.about-title{

    font-size:38px;

}

.about-text{

    font-size:16px;

    line-height:1.9;

}

.founder-frame{

     width:280px;
    
    height:280px;

}

.about-founder h3{

    font-size:24px;

}

.about-founder span{

    font-size:15px;

}

}
/*=========================================
ABOUT ANIMATION
=========================================*/

.about-content,
.about-founder{

    opacity:0;

    transform:translateY(50px);

    transition:all .9s ease;

}

.about.show .about-content{

    opacity:1;

    transform:translateY(0);

}

.about.show .about-founder{

    opacity:1;

    transform:translateY(0);

    transition-delay:.25s;

}

.founder-frame::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-60%;

    width:45%;

    height:300%;

    background:linear-gradient(

        rgba(255,255,255,0),

        rgba(255,255,255,.22),

        rgba(255,255,255,0)

    );

    transform:rotate(25deg);

    transition:1.2s;

}

.founder-frame:hover::after{

    left:160%;

}

/*=========================================
TECH STACK V2
=========================================*/

.tech-stack{

    position:relative;

    background:#050505;

    padding:140px 8%;

    overflow:hidden;

}

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

.tech-bg-gr{

    position:absolute;

    top:50%;

    left:50%;

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

    font-size:18vw;

    font-weight:900;

    letter-spacing:-25px;

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

    user-select:none;

    pointer-events:none;

    z-index:1;

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

}

@keyframes grFloat{

0%,100%{

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

}

50%{

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

}

}

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

.tech-container{

    position:relative;

    z-index:2;

    max-width:1400px;

    margin:auto;

}

.tech-tag{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

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

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

    color:#dbeafe;

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

    margin-bottom:30px;

}

.tech-title{

    color:#fff;

    font-size:64px;

    line-height:1.05;

    font-weight:900;

    letter-spacing:-2px;

    max-width:760px;

    margin-bottom:28px;

}

.tech-subtitle{

    max-width:700px;

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

    font-size:19px;

    line-height:2;

    margin-bottom:70px;

}

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

.tech-grid{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:24px;

}

/*=========================================
TECH PILLS
=========================================*/

.tech-pill{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

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

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

    border-radius:18px;

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    transition:.35s ease;

    cursor:pointer;

}

.tech-pill:hover{

    transform:translateY(-10px);

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

    border-color:rgba(255,255,255,.18);

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

}


.tech-pill:nth-child(1):hover{
box-shadow:0 0 35px rgba(227,79,38,.35);
}

.tech-pill:nth-child(2):hover{
box-shadow:0 0 35px rgba(38,77,228,.35);
}

.tech-pill:nth-child(3):hover{
box-shadow:0 0 35px rgba(247,223,30,.35);
}

.tech-pill:nth-child(4):hover{
box-shadow:0 0 35px rgba(97,218,251,.35);
}

.tech-pill:nth-child(5):hover{
box-shadow:0 0 35px rgba(221,27,22,.35);
}

.tech-pill:nth-child(6):hover{
box-shadow:0 0 35px rgba(104,160,99,.35);
}

.tech-pill:nth-child(7):hover{
box-shadow:0 0 35px rgba(255,70,70,.35);
}

.tech-pill:nth-child(8):hover{
box-shadow:0 0 35px rgba(255,212,59,.35);
}

.tech-pill i{

    font-size:42px;

    transition:.35s;

}

.tech-pill:hover i{

    transform:scale(1.15) rotate(5deg);

}

.tech-pill span{

    color:#fff;

    font-size:18px;

    font-weight:700;

    letter-spacing:.3px;

}

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

.tech-container{

    opacity:0;

    transform:translateY(60px);

    transition:
    opacity .9s ease,
    transform .9s ease;

}

.tech-stack.show .tech-container{

    opacity:1;

    transform:translateY(0);

}

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

@media(max-width:1200px){

.tech-grid{

    grid-template-columns:repeat(3,1fr);

}

}

@media(max-width:768px){

.tech-stack{

    padding:100px 20px;

}

.tech-title{

    font-size:40px;

}

.tech-subtitle{

    font-size:16px;

    line-height:1.8;

}

.tech-grid{

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.tech-pill{

    padding:18px;

}

.tech-pill i{

    font-size:32px;

}

.tech-pill span{

    font-size:15px;

}

.tech-bg-gr{

    font-size:55vw;

    letter-spacing:-10px;

}

}

@media(max-width:480px){

.tech-grid{

    grid-template-columns:1fr;

}

}




/* ===========================
   PREMIUM SERVICES SECTION
=========================== */
/*=========================================
SERVICES V3
=========================================*/

.services{

    position:relative;

    padding:160px 8%;

    overflow:hidden;

    background:
    linear-gradient(rgba(8,10,15,.78),rgba(8,10,15,.82)),
    url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2000&q=80");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}

.services-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.35),
        rgba(0,0,0,.10),
        rgba(0,0,0,.35)
    );

}

.services-container{

    position:relative;

    z-index:2;

    max-width:1200px;

    margin:auto;

}

.services-tag{

    display:inline-block;

    padding:12px 22px;

    border-radius:40px;

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

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

    color:#dbeafe;

    letter-spacing:2px;

    font-size:13px;

    font-weight:700;

    margin-bottom:30px;

}

.services-title{

    font-size:64px;

    color:#fff;

    line-height:1.05;

    font-weight:900;

    letter-spacing:-2px;

    max-width:820px;

    margin-bottom:30px;

}

.services-subtitle{

    max-width:650px;

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

    font-size:19px;

    line-height:2;

    margin-bottom:80px;

}

.services-list{

    display:flex;

    flex-direction:column;

    gap:0;

}

/*=========================================
SERVICE ITEMS
=========================================*/

.service-item{

    display:grid;

    grid-template-columns:120px 1fr;

    gap:45px;

    align-items:flex-start;

    padding:45px 0;

    transition:.45s ease;

}

.service-number{

    font-size:62px;

    font-weight:900;

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

    transition:.4s;

    line-height:1;

}

.service-content h3{

    color:#fff;

    font-size:34px;

    font-weight:800;

    margin-bottom:15px;

    transition:.35s;

}

.service-content p{

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

    font-size:18px;

    line-height:1.9;

    max-width:700px;

    transition:.35s;

}

.service-divider{

    width:100%;

    height:1px;

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

    transition:.35s;

}

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

.service-item:hover{

    transform:translateX(18px);

}

.service-item:hover .service-number{

    color:#60a5fa;

}

.service-item:hover .service-content h3{

    color:#60a5fa;

}

.service-item:hover + .service-divider{

    background:#60a5fa;

    box-shadow:0 0 20px rgba(96,165,250,.45);

}

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

@media(max-width:992px){

.services-title{

    font-size:50px;

}

.service-item{

    grid-template-columns:80px 1fr;

    gap:25px;

}

.service-number{

    font-size:42px;

}

.service-content h3{

    font-size:28px;

}

}

@media(max-width:768px){

.services{

    padding:100px 20px;

    background-attachment:scroll;

}

.services-title{

    font-size:38px;

    letter-spacing:-1px;

}

.services-subtitle{

    font-size:16px;

    line-height:1.8;

    margin-bottom:50px;

}

.service-item{

    grid-template-columns:1fr;

    gap:15px;

    padding:30px 0;

}

.service-number{

    font-size:30px;

}

.service-content h3{

    font-size:24px;

}

.service-content p{

    font-size:15px;

}

}

/*=========================================
SERVICES ANIMATION
=========================================*/

.services-container{

    opacity:0;

    transform:translateY(60px);

    transition:
    opacity .9s ease,
    transform .9s ease;

}

.services.show .services-container{

    opacity:1;

    transform:translateY(0);

}

/* Background Zoom */

.services::before{

    content:"";

    position:absolute;

    inset:0;

    background:inherit;

    transform:scale(1);

    transition:transform 8s ease;

    z-index:0;

}

.services:hover::before{

    transform:scale(1.05);

}

/* Glow */

.service-item:hover{

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

    border-radius:20px;

}

/* Title Animation */

.services-title{

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

}

@keyframes titleFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-4px);

}

}

/* ==========================================
   PREMIUM FOOTER
========================================== */

.footer{

    position:relative;

    padding:120px 8% 40px;

    background:linear-gradient(
    180deg,
    #f8fbff 0%,
    #eef5ff 100%
    );

    overflow:hidden;

    border-top:1px solid #e5e7eb;

}

.footer::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    background:#3b82f6;

    opacity:.08;

    filter:blur(120px);

    top:-150px;
    right:-120px;

    border-radius:50%;

}

.footer::after{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:#06b6d4;

    opacity:.08;

    filter:blur(120px);

    bottom:-120px;
    left:-120px;

    border-radius:50%;

}

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

.footer-cta{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.footer-cta span{

    display:inline-block;

    color:#2563eb;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

.footer-cta h2{

    font-size:60px;

    line-height:1.1;

    color:#111827;

    margin-bottom:25px;

}

.footer-cta p{

    max-width:700px;

    margin:auto;

    font-size:18px;

    line-height:1.9;

    color:#64748b;

}

.footer-cta-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-top:40px;

    padding:18px 34px;

    border-radius:50px;

    background:#111827;

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.footer-cta-btn:hover{

    transform:translateY(-6px);

    background:#2563eb;

}

.footer-divider{

    width:100%;

    height:1px;

    background:#dbe4ef;

    margin-bottom:70px;

}

/* ===========================
FOOTER MAIN
=========================== */

.footer-main{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.4fr 1fr 1fr 1.2fr;

    gap:60px;

    align-items:flex-start;

}

/* ===========================
BRAND
=========================== */

.footer-brand img{

    width:170px;

    margin-bottom:25px;

}

.footer-brand p{

    color:#64748b;

    line-height:1.9;

    font-size:17px;

    max-width:360px;

}

/* ===========================
COLUMNS
=========================== */

.footer-column h4{

    font-size:22px;

    color:#111827;

    margin-bottom:28px;

    font-weight:700;

}

.footer-column{

    display:flex;

    flex-direction:column;

}

.footer-column a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#64748b;

    text-decoration:none;

    margin-bottom:16px;

    transition:.35s;

    font-size:16px;

}

.footer-column a:hover{

    color:#2563eb;

    transform:translateX(6px);

}

.footer-column i{

    width:18px;

    color:#2563eb;

}

/* ===========================
SOCIAL
=========================== */

.footer-social{

    display:flex;

    gap:16px;

    margin-top:25px;

}

.footer-social a{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    color:#2563eb;

    font-size:18px;

    border:1px solid #e5e7eb;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

    transition:.35s;

    margin:0;

}

.footer-social a:hover{

    background:#2563eb;

    color:#fff;

    transform:translateY(-6px);

    box-shadow:0 18px 35px rgba(37,99,235,.25);

}

/* ===========================
FOOTER BOTTOM
=========================== */

.footer-bottom{

    position:relative;

    z-index:2;

    margin-top:70px;

    padding-top:30px;

    border-top:1px solid #dbe4ef;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.footer-bottom span{

    color:#64748b;

    font-size:15px;

}

/* ===========================
HOVER EFFECTS
=========================== */

.footer-brand,
.footer-column{

    transition:.35s;

}

.footer-column:hover{

    transform:translateY(-5px);

}

.footer-brand img{

    transition:.35s;

}

.footer-brand img:hover{

    transform:scale(1.04);

}

.footer a{

    text-decoration:none;

}

.footer-cta-btn i{

    transition:.35s;

}

.footer-cta-btn:hover i{

    transform:translateX(6px);

}

/* ===========================
TABLET
=========================== */

@media(max-width:992px){

.footer{

    padding:90px 6% 35px;

}

.footer-cta{

    margin-bottom:70px;

}

.footer-cta h2{

    font-size:42px;

}

.footer-main{

    grid-template-columns:1fr 1fr;

    gap:50px;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

}

/* ===========================
MOBILE
=========================== */

@media(max-width:768px){

.footer{

    padding:70px 22px 30px;

}

.footer-cta{

    margin-bottom:50px;

}

.footer-cta span{

    font-size:12px;

    letter-spacing:1px;

}

.footer-cta h2{

    font-size:32px;

    line-height:1.2;

}

.footer-cta p{

    font-size:16px;

    line-height:1.8;

}

.footer-cta-btn{

    width:100%;

    justify-content:center;

    padding:16px;

}

.footer-main{

    grid-template-columns:1fr;

    gap:40px;

}

.footer-brand{

    text-align:center;

}

.footer-brand img{

    margin:auto auto 20px;

}

.footer-brand p{

    max-width:100%;

}

.footer-column{

    text-align:center;

}

.footer-column a{

    justify-content:center;

}

.footer-social{

    justify-content:center;

}

.footer-bottom{

    margin-top:50px;

    gap:10px;

}

.footer-bottom span{

    font-size:14px;

}

}


/*=========================================
COMING SOON TOAST
=========================================*/

.toast{

    position:fixed;

    right:30px;

    bottom:30px;

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 24px;

    min-width:320px;

    border-radius:18px;

    background:rgba(20,20,20,.92);

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

    backdrop-filter:blur(18px);

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

    color:#fff;

    transform:translateY(120px);

    opacity:0;

    visibility:hidden;

    transition:.45s ease;

    z-index:99999;

}

.toast.show{

    transform:translateY(0);

    opacity:1;

    visibility:visible;

}

.toast i{

    font-size:28px;

    color:#3b82f6;

}

.toast h4{

    margin:0;

    font-size:18px;

}

.toast p{

    margin-top:5px;

    color:#bdbdbd;

    font-size:14px;

}