/*
============================================================
MYAYA TECHNOLOGIES V3
components.css

PART 1/12

Navigation
Loader
Buttons
Brand System
Mobile Navigation Foundation
============================================================
*/

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

.loader{
    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#040404;
    z-index:99999;
    transition:.8s ease;
}

.loader.hidden{
    opacity:0;
    visibility:hidden;
}

.loader-content{
    text-align:center;
}

.loader-logo{
    width:110px;
    height:auto;
    margin-bottom:25px;
    animation:loaderLogo 2s ease-in-out infinite;
}

.loader-content h1{
    font-size:2.4rem;
    font-weight:800;
    letter-spacing:4px;
    color:#fff;
}

.loader-content p{
    margin-top:8px;
    letter-spacing:6px;
    color:var(--text-muted);
    font-size:.9rem;
}

.loader-progress{
    margin-top:30px;
    width:260px;
    height:6px;
    background:rgba(255,255,255,.08);
    border-radius:999px;
    overflow:hidden;
}

.loader-bar{
    width:0%;
    height:100%;
    background:var(--gradient-primary);
    animation:loaderBar 2.5s forwards;
}

/*============================================================
NAVIGATION V5
============================================================*/

#header{

position:fixed;

top:20px;

left:0;

width:100%;

z-index:9999;

transition:.35s ease;

}

.nav-shell{

max-width:1400px;

margin:auto;

padding:0 20px;

}

.navbar{

height:74px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 22px;

border-radius:22px;

background:rgba(10,15,20,.72);

backdrop-filter:blur(24px);

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

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

box-shadow:

0 15px 40px rgba(0,0,0,.35);

}

/*=========================
Brand
=========================*/

.brand{

display:flex;

align-items:center;

gap:14px;

text-decoration:none;

}

.brand-logo{

width:46px;

height:46px;

object-fit:contain;

}

.brand-info{

display:flex;

flex-direction:column;

}

.brand-info h2{

margin:0;

font-size:1rem;

font-weight:800;

letter-spacing:2px;

color:#fff;

}

.brand-info p{

margin:4px 0 0;

font-size:.68rem;

letter-spacing:3px;

color:#00E8FF;

}

/*=========================
Desktop Navigation
=========================*/

.nav-links{

display:flex;

gap:30px;

list-style:none;

margin:0;

padding:0;

}

.nav-links a{

text-decoration:none;

color:#d8d8d8;

font-size:.95rem;

font-weight:600;

transition:.3s;

}

.nav-links a:hover,

.nav-links a.active{

color:#00E8FF;

}

/*=========================
Actions
=========================*/

.nav-actions{

display:flex;

align-items:center;

gap:14px;

}

.desktop-btn{

display:flex;

}

.menu-toggle{

display:none;

width:48px;

height:48px;

border:none;

border-radius:14px;

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

color:#fff;

font-size:1.4rem;

cursor:pointer;

}

/*=========================
Mobile Menu
=========================*/

.mobile-menu{

position:fixed;

top:0;

right:-100%;

width:300px;

max-width:85%;

height:100vh;

padding:90px 30px 40px;

display:flex;

flex-direction:column;

gap:18px;

background:rgba(10,15,20,.95);

backdrop-filter:blur(30px);

transition:right .35s ease;

z-index:10000;

}

.mobile-menu.active{

right:0;

}

.mobile-menu a{

text-decoration:none;

color:#fff;

font-size:1.05rem;

padding:14px 0;

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

}

.mobile-menu .btn{

margin-top:20px;

justify-content:center;

}

.close-menu{

position:absolute;

top:20px;

right:20px;

width:44px;

height:44px;

border:none;

border-radius:12px;

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

color:#fff;

font-size:1.2rem;

cursor:pointer;

}

.mobile-overlay{

position:fixed;

inset:0;

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

backdrop-filter:blur(6px);

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9998;

}

.mobile-overlay.active{

opacity:1;

visibility:visible;

}

/*=========================
Responsive
=========================*/

@media (max-width:900px){

.nav-links{

display:none;

}

.desktop-btn{

display:none;

}

.menu-toggle{

display:flex;

align-items:center;

justify-content:center;

}

.navbar{

height:70px;

padding:0 18px;

}

.brand-logo{

width:42px;

height:42px;

}

.brand-info h2{

font-size:.95rem;

}

.brand-info p{

font-size:.62rem;

}

}

/*============================================================
LOGO
============================================================*/

.brand{

display:flex;

align-items:center;

gap:14px;

text-decoration:none;

}

.brand-logo{

width:46px;

height:46px;

object-fit:contain;

flex-shrink:0;

}

.brand-info{

display:flex;

flex-direction:column;

}

.brand-info h2{

margin:0;

font-size:1rem;

font-weight:800;

letter-spacing:2px;

color:#ffffff;

line-height:1;

}

.brand-info p{

margin-top:4px;

font-size:.68rem;

letter-spacing:3px;

color:var(--primary);

}

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

.nav-links{

display:flex;

align-items:center;

gap:34px;

list-style:none;

margin:0;

padding:0;

}

.nav-links a{

font-size:.95rem;

font-weight:600;

color:#d7dde5;

text-decoration:none;

position:relative;

transition:.3s;

}

.nav-links a:hover,

.nav-links a.active{

color:#00E8FF;

}

.nav-links a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

border-radius:999px;

background:#00E8FF;

transition:.3s;

}

.nav-links a:hover::after,

.nav-links a.active::after{

width:100%;

}

/*============================================================
RIGHT SIDE
============================================================*/

.nav-actions{

display:flex;

align-items:center;

gap:18px;

}

.nav-actions .btn{

height:48px;

padding:0 28px;

font-size:.9rem;

}

/*============================================================
HAMBURGER
============================================================*/

.hamburger{

display:none;

width:48px;

height:48px;

border:none;

border-radius:14px;

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

cursor:pointer;

}

.hamburger span{

display:block;

width:22px;

height:2px;

margin:5px auto;

background:#ffffff;

transition:.35s;

}

/*============================================================
SCROLLED
============================================================*/

#header.scrolled{

top:14px;

}

#header.scrolled .navbar{

background:rgba(5,8,14,.88);

box-shadow:

0 18px 55px rgba(0,0,0,.45);

}


/*============================================================
HERO V4
============================================================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

padding:170px 0 100px;

overflow:hidden;

}

.hero-grid{

display:grid;

grid-template-columns:1.05fr .95fr;

align-items:center;

gap:80px;

}

/*============================================================
LEFT SIDE
============================================================*/

.hero-left{

position:relative;

z-index:5;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:12px;

padding:12px 22px;

margin-bottom:28px;

border-radius:999px;

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

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

backdrop-filter:blur(18px);

font-size:.9rem;

font-weight:700;

letter-spacing:1px;

color:var(--primary);

}

.hero-title{

font-size:clamp(3.8rem,7vw,6.4rem);

line-height:1.05;

font-weight:900;

margin-bottom:28px;

color:#fff;

}

.hero-description{

max-width:620px;

font-size:1.1rem;

line-height:2;

color:var(--text-secondary);

margin-bottom:45px;

}

.hero-actions{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-bottom:55px;

}

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

.hero-stats{

display:grid;

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

gap:20px;

max-width:620px;

}

.hero-stats div{

padding:24px;

text-align:center;

border-radius:22px;

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

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

backdrop-filter:blur(20px);

transition:.35s;

}

.hero-stats div:hover{

transform:translateY(-8px);

border-color:rgba(0,232,255,.25);

}

.hero-stats h2{

font-size:2rem;

color:#fff;

margin-bottom:8px;

}

.hero-stats p{

color:var(--text-muted);

}

/*============================================================
RIGHT SIDE
============================================================*/

.hero-right{

position:relative;

display:flex;

justify-content:center;

align-items:center;

min-height:700px;

}

/*============================================================
SPHERE
============================================================*/

.hero-sphere{

position:relative;

width:520px;

height:520px;

display:flex;

justify-content:center;

align-items:center;

}

.sphere-glow{

position:absolute;

width:100%;

height:100%;

border-radius:50%;

background:radial-gradient(circle,

rgba(0,232,255,.22),

transparent 70%);

filter:blur(45px);

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

}

.sphere-logo{

position:absolute;

width:220px;

height:220px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

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

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

backdrop-filter:blur(24px);

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

}

.sphere-logo img{

width:120px;

}

/*============================================================
RINGS
============================================================*/

.sphere-ring{

position:absolute;

border-radius:50%;

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

}

.ring-1{

width:280px;

height:280px;

animation:rotateClockwise 18s linear infinite;

}

.ring-2{

width:390px;

height:390px;

animation:rotateAntiClockwise 26s linear infinite;

}

.ring-3{

width:500px;

height:500px;

border-color:rgba(255,106,0,.20);

animation:rotateClockwise 36s linear infinite;

}

/*============================================================
FLOATING CARDS
============================================================*/

.hero-card{

position:absolute;

padding:18px 24px;

border-radius:20px;

background:rgba(10,18,28,.72);

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

backdrop-filter:blur(20px);

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

transition:.35s;

}

.hero-card:hover{

transform:translateY(-8px);

border-color:rgba(0,232,255,.30);

}

.hero-card h4{

margin-bottom:6px;

color:#fff;

font-size:1rem;

}

.hero-card p{

color:var(--primary);

font-size:.9rem;

}

.hero-card-1{

top:40px;

left:-20px;

}

.hero-card-2{

top:210px;

right:-40px;

}

.hero-card-3{

bottom:40px;

left:20px;

}

/*============================================================
TRUST STRIP
PART 4
============================================================*/

.trust-strip{

    position:relative;

    padding:45px 0;

    overflow:hidden;

}

.trust-content{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

}

.trust-content span{

    padding:14px 28px;

    border-radius:999px;

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

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

    color:var(--text-secondary);

    font-weight:600;

    backdrop-filter:blur(18px);

    transition:.35s;

}

.trust-content span:hover{

    transform:translateY(-6px);

    color:var(--primary);

    border-color:rgba(0,232,255,.25);

    box-shadow:

        0 18px 40px rgba(0,232,255,.10);

}

/*============================================================
ABOUT V5
============================================================*/

.about{

position:relative;

padding:140px 0;

overflow:hidden;

}

.about::before{

content:"";

position:absolute;

top:-200px;

right:-200px;

width:500px;

height:500px;

border-radius:50%;

background:radial-gradient(circle,
rgba(0,232,255,.12),
transparent 70%);

filter:blur(60px);

pointer-events:none;

}

.about-grid{

display:grid;

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

gap:80px;

align-items:center;

}

.about-left{

position:relative;

z-index:2;

}

.about-right{

display:flex;

justify-content:center;

align-items:center;

}

.about-subtitle{

display:inline-block;

padding:10px 18px;

border-radius:999px;

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

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

color:var(--primary);

font-weight:700;

letter-spacing:2px;

margin-bottom:24px;

}

.about-title{

font-size:clamp(2.8rem,5vw,4.5rem);

line-height:1.15;

margin-bottom:26px;

color:#fff;

}

.about-description{

font-size:1.05rem;

line-height:2;

color:var(--text-secondary);

margin-bottom:40px;

max-width:680px;

}

.about-features{

display:grid;

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

gap:22px;

}

.about-feature{

padding:24px;

border-radius:24px;

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

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

backdrop-filter:blur(18px);

transition:.35s;

}

.about-feature:hover{

transform:translateY(-8px);

border-color:rgba(0,232,255,.25);

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

}

.about-feature h3{

margin-bottom:12px;

font-size:1.2rem;

color:#fff;

}

.about-feature p{

color:var(--text-secondary);

line-height:1.8;

}

.about-panel{

width:100%;

max-width:420px;

padding:38px;

border-radius:30px;

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

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

backdrop-filter:blur(24px);

}

.about-stat{

padding:22px;

margin-bottom:18px;

border-radius:18px;

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

}

.about-stat:last-child{

margin-bottom:0;

}

.about-stat h2{

font-size:2.5rem;

color:#fff;

margin-bottom:8px;

}

.about-stat p{

color:var(--text-secondary);

}

/*============================================================
HIGHLIGHTS
============================================================*/

.about-highlights{

    display:grid;

    gap:24px;

}

.highlight-item{

    padding:28px;

    border-radius:22px;

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

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

    backdrop-filter:blur(16px);

    transition:.35s;

}

.highlight-item:hover{

    transform:translateX(12px);

    border-color:rgba(0,232,255,.30);

    box-shadow:

        0 20px 45px rgba(0,232,255,.10);

}

.highlight-item h3{

    color:#fff;

    margin-bottom:12px;

    font-size:1.3rem;

}

.highlight-item p{

    color:var(--text-secondary);

    line-height:1.8;

}

/*============================================================
ABOUT CARD
============================================================*/

.about-card{

    padding:40px;

    border-radius:30px;

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

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

    backdrop-filter:blur(24px);

    box-shadow:

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

}

.about-card-header{

    font-size:1.4rem;

    font-weight:800;

    color:var(--primary);

    margin-bottom:35px;

    letter-spacing:2px;

}

/*============================================================
ABOUT STATS
============================================================*/

.about-card-body{

    display:grid;

    gap:22px;

}

.about-stat{

    padding:24px;

    border-radius:20px;

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

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

    transition:.35s;

}

.about-stat:hover{

    transform:translateY(-8px);

    border-color:rgba(0,232,255,.25);

}

.about-stat h3{

    font-size:2rem;

    color:#ffffff;

    margin-bottom:8px;

}

.about-stat p{

    color:var(--text-muted);

}

/*============================================================
SECTION TRANSITION
============================================================*/

.section{

    position:relative;

}

.section::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:140px;

    height:2px;

    background:linear-gradient(

        90deg,

        transparent,

        var(--primary),

        transparent

    );

    opacity:.35;

}

/*============================================================
SERVICES V5
============================================================*/

.services{

position:relative;

padding:150px 0;

overflow:hidden;

}

.services::before{

content:"";

position:absolute;

left:-250px;

top:80px;

width:600px;

height:600px;

border-radius:50%;

background:radial-gradient(circle,
rgba(0,232,255,.10),
transparent 72%);

filter:blur(70px);

pointer-events:none;

}

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

gap:34px;

margin-top:70px;

}

/*============================================================
SERVICE CARD
============================================================*/

.service-card{

position:relative;

overflow:hidden;

padding:40px;

border-radius:30px;

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

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

backdrop-filter:blur(22px);

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

transition:all .35s ease;

}

.service-card:hover{

transform:translateY(-12px);

border-color:rgba(0,232,255,.25);

box-shadow:

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

0 0 35px rgba(0,232,255,.15);

}

/*============================================================
NUMBER
============================================================*/

.service-number{

position:absolute;

top:28px;

right:28px;

font-size:3rem;

font-weight:900;

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

}

/*============================================================
ICON
============================================================*/

.service-icon{

width:80px;

height:80px;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:30px;

border-radius:22px;

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

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

transition:.35s;

}

.service-card:hover .service-icon{

transform:rotate(6deg) scale(1.08);

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

}

.service-icon img{

width:40px;

height:40px;

}

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

.service-card h3{

font-size:1.6rem;

margin-bottom:18px;

color:#fff;

}

.service-card p{

line-height:1.9;

color:var(--text-secondary);

margin-bottom:28px;

}

/*============================================================
FEATURES
============================================================*/

.service-features{

list-style:none;

padding:0;

margin:0 0 30px;

display:grid;

gap:12px;

}

.service-features li{

display:flex;

align-items:center;

gap:10px;

color:var(--text-secondary);

}

.service-features li::before{

content:"✓";

color:var(--primary);

font-weight:700;

}

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

.service-link{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:700;

color:var(--primary);

transition:.35s;

}

.service-link:hover{

gap:18px;

}

/*============================================================
SECTION HEADER
============================================================*/

.services .section-heading{

    max-width:760px;

    margin:0 auto;

}

.services .section-title{

    margin:20px 0;

}

.services .section-description{

    color:var(--text-secondary);

    line-height:1.9;

}

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

.service-card::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(0,232,255,.18),

        transparent 70%

    );

    top:-120px;

    right:-120px;

    opacity:0;

    transition:.45s;

}

.service-card:hover::after{

    opacity:1;

}

/*============================================================
PROJECTS V5
============================================================*/

.projects{

position:relative;

padding:160px 0;

overflow:hidden;

}

.projects::before{

content:"";

position:absolute;

right:-250px;

top:-120px;

width:650px;

height:650px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(0,232,255,.10),

transparent 72%

);

filter:blur(70px);

pointer-events:none;

}

/*============================================================
GRID
============================================================*/

.projects-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(380px,1fr));

gap:36px;

margin-top:70px;

}

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

.project-card{

position:relative;

overflow:hidden;

border-radius:32px;

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

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

backdrop-filter:blur(24px);

transition:.4s ease;

}

.project-card:hover{

transform:translateY(-12px);

border-color:rgba(0,232,255,.30);

box-shadow:

0 30px 70px rgba(0,0,0,.35),

0 0 45px rgba(0,232,255,.15);

}

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

.project-image{

position:relative;

height:260px;

display:flex;

justify-content:center;

align-items:center;

background:

linear-gradient(

135deg,

rgba(0,232,255,.08),

rgba(255,255,255,.03)

);

overflow:hidden;

}

.project-image::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(

180deg,

transparent,

rgba(0,0,0,.25)

);

}

.project-placeholder{

font-size:2rem;

font-weight:900;

letter-spacing:4px;

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

text-align:center;

z-index:2;

}

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

.project-content{

padding:34px;

}

.project-tags{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:22px;

}

.project-tag{

padding:8px 16px;

border-radius:999px;

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

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

font-size:.75rem;

font-weight:700;

letter-spacing:1px;

color:var(--primary);

}

.project-content h3{

font-size:1.7rem;

margin-bottom:18px;

color:#ffffff;

}

.project-content p{

line-height:1.9;

margin-bottom:28px;

color:var(--text-secondary);

}

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

.project-footer{

display:flex;

justify-content:space-between;

align-items:center;

padding-top:22px;

border-top:

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

}

.project-status{

display:flex;

align-items:center;

gap:10px;

font-size:.9rem;

color:var(--text-muted);

}

.project-status::before{

content:"";

width:10px;

height:10px;

border-radius:50%;

background:#00ff88;

box-shadow:

0 0 18px #00ff88;

}

.project-link{

display:inline-flex;

align-items:center;

gap:10px;

font-weight:700;

color:var(--primary);

transition:.35s;

}

.project-link:hover{

gap:18px;

}

/*============================================================
SHOWCASE
============================================================*/

.project-card.featured{

grid-column:span 2;

}

.project-card.featured .project-image{

height:320px;

}

/*============================================================
COMPANY METRICS
============================================================*/

.metrics{

    padding:120px 0;

}

.metrics-grid{

    display:grid;

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

    gap:28px;

}

.metric-box{

    padding:40px;

    text-align:center;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

    transition:.35s;

}

.metric-box:hover{

    transform:translateY(-10px);

    border-color:rgba(0,232,255,.25);

    box-shadow:

    0 25px 60px rgba(0,232,255,.12);

}

.metric-box h2{

    font-size:3rem;

    color:#fff;

    margin-bottom:14px;

}

.metric-box p{

    color:var(--text-secondary);

}

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

.industries{

    padding:140px 0;

}

.industries-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:28px;

    margin-top:70px;

}

.industry-card{

    padding:34px;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-10px);

    border-color:rgba(0,232,255,.25);

    box-shadow:

    0 22px 55px rgba(0,232,255,.12);

}

.industry-card h3{

    color:#fff;

    font-size:1.45rem;

    margin-bottom:18px;

}

.industry-card p{

    color:var(--text-secondary);

    line-height:1.9;

}

/*============================================================
SECTION SPACING
============================================================*/

.projects .section-heading,

.industries .section-heading,

.metrics .section-heading{

    max-width:760px;

    margin:0 auto;

}

/*============================================================
TIMELINE
PART 7
============================================================*/

.timeline{

    padding:140px 0;

}

.timeline-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

    gap:32px;

    margin-top:70px;

}

.timeline-card{

    position:relative;

    overflow:hidden;

    padding:36px;

    border-radius:30px;

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

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

    backdrop-filter:blur(20px);

    transition:.4s;

}

.timeline-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,232,255,.25);

    box-shadow:

    0 28px 65px rgba(0,0,0,.35),

    0 0 40px rgba(0,232,255,.15);

}

.timeline-card span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:90px;

    height:38px;

    padding:0 18px;

    border-radius:999px;

    margin-bottom:24px;

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

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

    color:var(--primary);

    font-weight:700;

    letter-spacing:1px;

}

.timeline-card h3{

    color:#fff;

    font-size:1.5rem;

    margin-bottom:18px;

}

.timeline-card p{

    color:var(--text-secondary);

    line-height:1.9;

}

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

.testimonials{

    padding:140px 0;

}

.testimonials-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:32px;

    margin-top:70px;

}

.testimonial-card{

    padding:36px;

    border-radius:30px;

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

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

    backdrop-filter:blur(20px);

    transition:.4s;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:rgba(0,232,255,.25);

    box-shadow:

    0 30px 70px rgba(0,0,0,.35),

    0 0 40px rgba(0,232,255,.15);

}

.testimonial-stars{

    font-size:1.2rem;

    color:#FFD54A;

    margin-bottom:24px;

}

.testimonial-card p{

    color:var(--text-secondary);

    line-height:2;

    margin-bottom:28px;

}

.testimonial-user h4{

    color:#ffffff;

    font-size:1.1rem;

    margin-bottom:6px;

}

.testimonial-user span{

    color:var(--primary);

    font-size:.9rem;

}

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

.technology-stack{

    padding:140px 0;

}

.tech-stack-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:24px;

    margin-top:70px;

}

.tech-item{

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:90px;

    padding:24px;

    border-radius:24px;

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

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

    backdrop-filter:blur(18px);

    color:#ffffff;

    font-weight:700;

    letter-spacing:.5px;

    transition:.35s;

}

.tech-item:hover{

    transform:translateY(-8px);

    border-color:rgba(0,232,255,.25);

    color:var(--primary);

    box-shadow:

    0 20px 50px rgba(0,232,255,.12);

}

/*============================================================
COMMON SECTION TITLES
============================================================*/

.timeline .section-heading,

.testimonials .section-heading,

.technology-stack .section-heading{

    max-width:760px;

    margin:0 auto;

}

/*============================================================
NEWSLETTER
PART 8
============================================================*/

.newsletter{

    padding:140px 0;

}

.newsletter-box{

    position:relative;

    overflow:hidden;

    max-width:950px;

    margin:0 auto;

    padding:70px;

    text-align:center;

    border-radius:36px;

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

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

    backdrop-filter:blur(24px);

    box-shadow:

        0 35px 80px rgba(0,0,0,.35);

}

.newsletter-box::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    top:-180px;

    right:-180px;

    background:radial-gradient(

        circle,

        rgba(0,232,255,.18),

        transparent 70%

    );

}

.newsletter-box h2{

    color:#ffffff;

    font-size:3rem;

    margin:20px 0;

}

.newsletter-box p{

    max-width:620px;

    margin:0 auto 45px;

    color:var(--text-secondary);

    line-height:2;

}

/*============================================================
NEWSLETTER FORM
============================================================*/

.newsletter-form{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.newsletter-form input{

    flex:1;

    min-width:300px;

    max-width:520px;

    height:64px;

    padding:0 24px;

    border-radius:999px;

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

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

    backdrop-filter:blur(18px);

    color:#ffffff;

    outline:none;

    transition:.35s;

}

.newsletter-form input:focus{

    border-color:rgba(0,232,255,.40);

    box-shadow:

        0 0 20px rgba(0,232,255,.20);

}

.newsletter-form input::placeholder{

    color:var(--text-muted);

}

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

.contact-cta{

    padding:140px 0;

}

.cta-card{

    position:relative;

    overflow:hidden;

    padding:90px 70px;

    text-align:center;

    border-radius:40px;

    background:linear-gradient(

        135deg,

        rgba(0,232,255,.08),

        rgba(255,255,255,.05)

    );

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

    backdrop-filter:blur(24px);

}

.cta-card::before{

    content:"";

    position:absolute;

    left:-120px;

    bottom:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(255,106,0,.15),

        transparent 70%

    );

}

.cta-card h2{

    font-size:clamp(2.8rem,5vw,4.5rem);

    color:#ffffff;

    line-height:1.2;

    margin:20px 0 30px;

}

.cta-card p{

    max-width:760px;

    margin:0 auto 45px;

    color:var(--text-secondary);

    line-height:2;

    font-size:1.08rem;

}

.cta-card .hero-actions{

    justify-content:center;

    margin-bottom:0;

}

/*============================================================
BUTTON ENHANCEMENTS
============================================================*/

.cta-card .btn{

    min-width:210px;

}

.newsletter-form .btn{

    height:64px;

    padding:0 36px;

}

/*============================================================
SECTION SPACING
============================================================*/

.newsletter .section-subtitle,

.contact-cta .section-subtitle{

    color:var(--primary);

    letter-spacing:2px;

    font-weight:700;

}

/*============================================================
FOOTER
PART 9
============================================================*/

.footer{

    position:relative;

    padding:120px 0 40px;

    overflow:hidden;

    background:

    linear-gradient(

        180deg,

        transparent,

        rgba(255,255,255,.02)

    );

}

.footer::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-280px;

    bottom:-280px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(0,232,255,.12),

        transparent 72%

    );

    pointer-events:none;

}

/*============================================================
FOOTER GRID
============================================================*/

.footer-grid{

    display:grid;

    grid-template-columns:

    2fr

    1fr

    1fr

    1.2fr;

    gap:60px;

    margin-bottom:70px;

}

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

.footer-brand{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

}

.footer-logo{

    width:72px;

    height:auto;

}

.footer-brand h2{

    color:#ffffff;

    letter-spacing:2px;

    margin-bottom:4px;

}

.footer-brand p{

    color:var(--primary);

    letter-spacing:3px;

    font-size:.8rem;

}

.footer-description{

    max-width:420px;

    color:var(--text-secondary);

    line-height:2;

}

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

.footer-column h3{

    color:#ffffff;

    margin-bottom:24px;

    font-size:1.2rem;

}

.footer-column ul{

    list-style:none;

}

.footer-column li{

    margin-bottom:16px;

}

.footer-column a{

    color:var(--text-secondary);

    transition:.3s;

}

.footer-column a:hover{

    color:var(--primary);

    padding-left:8px;

}

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

.footer-column li{

    color:var(--text-secondary);

    line-height:1.8;

}

/*============================================================
DIVIDER
============================================================*/

.footer-divider{

    height:1px;

    margin:50px 0 35px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

}

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

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.footer-bottom p{

    color:var(--text-muted);

}

.footer-links{

    display:flex;

    gap:28px;

    flex-wrap:wrap;

}

.footer-links a{

    color:var(--text-secondary);

    transition:.3s;

}

.footer-links a:hover{

    color:var(--primary);

}

/*============================================================
BACK TO TOP
============================================================*/

.back-to-top{

    position:fixed;

    right:32px;

    bottom:32px;

    width:60px;

    height:60px;

    border:none;

    border-radius:50%;

    background:

    linear-gradient(

        135deg,

        #00E8FF,

        #00BFFF

    );

    color:#000;

    font-size:1.4rem;

    font-weight:700;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:999;

    box-shadow:

    0 20px 45px rgba(0,232,255,.25);

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    transform:

    translateY(-8px)

    scale(1.08);

    box-shadow:

    0 30px 60px rgba(0,232,255,.40);

}

/*============================================================
FOOTER HOVER GLOW
============================================================*/

.footer-column{

    transition:.35s;

}

.footer-column:hover{

    transform:translateY(-4px);

}

/*============================================================
UTILITY COMPONENTS
PART 10
============================================================*/

/*============================================================
GLASS SYSTEM
============================================================*/

.glass{

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

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

    backdrop-filter:blur(22px);

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

    box-shadow:

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

}

.glass-light{

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

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

}

.glass-heavy{

    background:rgba(15,20,28,.78);

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

    backdrop-filter:blur(32px);

}

/*============================================================
CARD SYSTEM
============================================================*/

.card{

    border-radius:30px;

    transition:all .35s ease;

}

.card-hover:hover{

    transform:translateY(-10px);

    box-shadow:

        0 30px 70px rgba(0,232,255,.15);

}

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

.gradient-text{

    background:linear-gradient(

        90deg,

        #00E8FF,

        #7AF7FF,

        #00E8FF

    );

    background-size:300%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:gradientFlow 8s linear infinite;

}

/*============================================================
GLOW HELPERS
============================================================*/

.glow-primary{

    box-shadow:

        0 0 35px rgba(0,232,255,.20);

}

.glow-orange{

    box-shadow:

        0 0 35px rgba(255,106,0,.18);

}

.glow-soft{

    box-shadow:

        0 12px 40px rgba(0,0,0,.25);

}

/*============================================================
ICON CONTAINERS
============================================================*/

.icon-box{

    display:flex;

    justify-content:center;

    align-items:center;

    width:72px;

    height:72px;

    border-radius:22px;

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

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

    transition:.35s;

}

.icon-box img{

    width:36px;

    height:36px;

}

.icon-box:hover{

    transform:rotate(6deg) scale(1.08);

    box-shadow:

        0 0 30px rgba(0,232,255,.25);

}

/*============================================================
BADGES
============================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 18px;

    border-radius:999px;

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

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

    color:var(--primary);

    font-weight:700;

    font-size:.82rem;

    letter-spacing:1px;

}

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

.divider{

    width:100%;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

}

/*============================================================
TRANSITIONS
============================================================*/

.transition{

    transition:all .35s ease;

}

.scale-hover:hover{

    transform:scale(1.04);

}

.lift-hover:hover{

    transform:translateY(-8px);

}

.rotate-hover:hover{

    transform:rotate(3deg);

}

/*============================================================
SHADOW UTILITIES
============================================================*/

.shadow-sm{

    box-shadow:

        0 10px 25px rgba(0,0,0,.20);

}

.shadow-md{

    box-shadow:

        0 20px 50px rgba(0,0,0,.28);

}

.shadow-lg{

    box-shadow:

        0 35px 80px rgba(0,0,0,.40);

}

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

.text-center{

    text-align:center;

}

.text-primary{

    color:var(--primary);

}

.text-muted{

    color:var(--text-muted);

}

.text-white{

    color:#ffffff;

}

/*============================================================
SPACING HELPERS
============================================================*/

.mt-1{margin-top:1rem;}
.mt-2{margin-top:2rem;}
.mt-3{margin-top:3rem;}
.mt-4{margin-top:4rem;}

.mb-1{margin-bottom:1rem;}
.mb-2{margin-bottom:2rem;}
.mb-3{margin-bottom:3rem;}
.mb-4{margin-bottom:4rem;}

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

@keyframes gradientFlow{

    from{

        background-position:0%;

    }

    to{

        background-position:300%;

    }

}


/*============================================================
MICRO INTERACTIONS
PART 11
============================================================*/

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

a,
button,
input,
textarea,
select,
.card,
.glass,
.service-card,
.project-card,
.industry-card,
.metric-card,
.metric-box,
.timeline-card,
.testimonial-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease,

        background .35s ease,

        color .35s ease,

        opacity .35s ease;

}

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

img{

    transition:

        transform .45s ease,

        filter .45s ease;

}

img:hover{

    transform:scale(1.02);

}

/*============================================================
SECTION FADE
============================================================*/

.section{

    opacity:1;

    transform:translateY(0);

}

.section.reveal{

    opacity:0;

    transform:translateY(60px);

}

.section.reveal.active{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

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

.float{

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

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/*============================================================
PULSE GLOW
============================================================*/

.pulse-glow{

    animation:pulseGlow 2.8s infinite;

}

@keyframes pulseGlow{

    0%{

        box-shadow:

            0 0 0 rgba(0,232,255,.15);

    }

    50%{

        box-shadow:

            0 0 35px rgba(0,232,255,.35);

    }

    100%{

        box-shadow:

            0 0 0 rgba(0,232,255,.15);

    }

}

/*============================================================
AMBIENT LIGHT
============================================================*/

.light-top{

    position:relative;

}

.light-top::before{

    content:"";

    position:absolute;

    top:-220px;

    left:50%;

    transform:translateX(-50%);

    width:520px;

    height:520px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(0,232,255,.12),

            transparent 70%

        );

    filter:blur(60px);

    pointer-events:none;

}

/*============================================================
GLASS BORDER
============================================================*/

.glass-border{

    position:relative;

}

.glass-border::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.18),

            transparent,

            rgba(0,232,255,.18)

        );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

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

::selection{

    background:#00E8FF;

    color:#000;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#06090d;

}

::-webkit-scrollbar-thumb{

    border-radius:999px;

    background:

        linear-gradient(

            #00E8FF,

            #0099ff

        );

}

::-webkit-scrollbar-thumb:hover{

    background:

        linear-gradient(

            #7AF7FF,

            #00E8FF

        );

}

/*============================================================
FOCUS STATES
============================================================*/

button:focus-visible,

a:focus-visible,

input:focus-visible{

    outline:2px solid rgba(0,232,255,.45);

    outline-offset:4px;

    border-radius:12px;

}

/*============================================================
REDUCED MOTION
============================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/*============================================================
COMPONENT POLISH
PART 12/12
============================================================*/

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

:root{

    --radius-sm:16px;

    --radius-md:24px;

    --radius-lg:32px;

    --radius-xl:42px;

}

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

.glass,
.card,
.service-card,
.project-card,
.industry-card,
.metric-box,
.metric-card,
.timeline-card,
.testimonial-card,
.tech-item,
.highlight-item,
.about-stat{

    will-change:transform;

}

.glass:hover,
.card:hover{

    transform:translateY(-8px);

}

/*============================================================
GRADIENT BORDER
============================================================*/

.gradient-border{

    position:relative;

}

.gradient-border::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    padding:1px;

    background:

    linear-gradient(

        135deg,

        rgba(0,232,255,.45),

        transparent,

        rgba(255,106,0,.25)

    );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    pointer-events:none;

}

/*============================================================
PREMIUM SHINE
============================================================*/

.shine{

    position:relative;

    overflow:hidden;

}

.shine::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-60%;

    width:40%;

    height:300%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transform:rotate(25deg);

    transition:.8s;

}

.shine:hover::after{

    left:150%;

}

/*============================================================
SOFT BACKGROUND LIGHT
============================================================*/

.soft-light{

    position:relative;

}

.soft-light::before{

    content:"";

    position:absolute;

    inset:auto;

    width:450px;

    height:450px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(0,232,255,.10),

        transparent 72%

    );

    filter:blur(60px);

    pointer-events:none;

}

/*============================================================
SECTION HEADINGS
============================================================*/

.section-title{

    font-size:clamp(2.6rem,5vw,4.3rem);

    line-height:1.15;

    color:#ffffff;

    margin-bottom:22px;

}

.section-description{

    max-width:760px;

    color:var(--text-secondary);

    line-height:2;

}

.section-subtitle{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary);

    font-weight:700;

    letter-spacing:2px;

}

/*============================================================
BUTTON IMPROVEMENTS
============================================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    transition:.6s;

}

.btn:hover::before{

    left:120%;

}

/*============================================================
PREMIUM LINKS
============================================================*/

a{

    text-decoration:none;

}

a:hover{

    text-decoration:none;

}

/*============================================================
IMAGE OPTIMIZATION
============================================================*/

img{

    max-width:100%;

    display:block;

    user-select:none;

    -webkit-user-drag:none;

}

/*============================================================
FINAL PERFORMANCE
============================================================*/

.hero,
.services,
.projects,
.timeline,
.footer{

    contain:layout;

}

/*============================================================
PRINT
============================================================*/

@media print{

    .loader,

    .back-to-top,

    .hamburger,

    .mobile-menu,

    .mobile-overlay{

        display:none !important;

    }

}


/*============================================================
PRODUCTION POLISH
PART 8
============================================================*/

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

section{

position:relative;

padding:140px 0;

}

.container{

width:min(92%,1400px);

margin:auto;

}

/*============================================================
AMBIENT BACKGROUND
============================================================*/

body::before{

content:"";

position:fixed;

top:-400px;

left:-400px;

width:900px;

height:900px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,232,255,.08),

transparent 72%);

filter:blur(90px);

pointer-events:none;

z-index:-2;

}

body::after{

content:"";

position:fixed;

right:-350px;

bottom:-350px;

width:800px;

height:800px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,106,0,.08),

transparent 72%);

filter:blur(90px);

pointer-events:none;

z-index:-2;

}

/*============================================================
SECTION TITLES
============================================================*/

.section-title{

font-size:clamp(2.8rem,5vw,4.8rem);

font-weight:900;

line-height:1.15;

margin-bottom:22px;

}

.section-description{

max-width:760px;

line-height:2;

font-size:1.05rem;

color:var(--text-secondary);

}

/*============================================================
GLASS SYSTEM
============================================================*/

.glass{

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

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

backdrop-filter:blur(24px);

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

}

/*============================================================
PREMIUM SHADOWS
============================================================*/

.shadow-premium{

box-shadow:

0 20px 45px rgba(0,0,0,.35),

0 0 40px rgba(0,232,255,.10);

}

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

.service-card,

.project-card,

.timeline-card,

.industry-card,

.metric-card,

.testimonial-card,

.about-feature{

transition:

transform .35s ease,

box-shadow .35s ease,

border-color .35s ease;

}

.service-card:hover,

.project-card:hover,

.timeline-card:hover,

.industry-card:hover,

.metric-card:hover,

.testimonial-card:hover,

.about-feature:hover{

transform:translateY(-10px);

}

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

.btn{

transition:

transform .35s,

box-shadow .35s;

}

.btn:hover{

transform:translateY(-4px);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#05070b;

}

::-webkit-scrollbar-thumb{

border-radius:999px;

background:

linear-gradient(

#00E8FF,

#008CFF

);

}

::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(

#6CF7FF,

#00E8FF

);

}

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

::selection{

background:#00E8FF;

color:#000;

}

/*============================================================
SMOOTH SCROLL
============================================================*/

html{

scroll-behavior:smooth;

}

/*============================================================
IMAGE QUALITY
============================================================*/

img{

display:block;

max-width:100%;

height:auto;

}

/*============================================================
ACCESSIBILITY
============================================================*/

button:focus-visible,

a:focus-visible,

input:focus-visible{

outline:2px solid rgba(0,232,255,.45);

outline-offset:4px;

}

/*============================================================
PRINT
============================================================*/

@media print{

header,

footer,

.back-to-top,

.mobile-menu,

.mobile-overlay{

display:none !important;

}

}