*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:#fff;

color:#111;

overflow-x:hidden;

}

img{

width:100%;

display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:min(92%,1400px);

margin:auto;

}

.navbar{

width:100%;

height:90px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 60px;

position:fixed;

top:0;

left:0;

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

backdrop-filter:blur(15px);

z-index:999;

}

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    height:55px;
    width:auto;
    display:block;
    transition:0.3s ease;
}

.logo img:hover{
    transform:scale(1.05);

}

.nav-links{

display:flex;

gap:50px;

}

.nav-links a{

font-size:15px;

font-weight:500;

color:#111;

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

/*================ MOBILE NAV TOGGLE ================*/

.nav-mobile-btn{
    display:none;
}

.nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:none;
    background:transparent;
    color:#111;
    font-size:22px;
    cursor:pointer;
    z-index:1001;
    border-radius:50%;
    transition:.3s ease;
}

.nav-toggle:hover{
    background:rgba(0,0,0,.05);
}

.nav-toggle i{
    pointer-events:none;
}

.nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(2px);
    z-index:998;
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease;
}

.nav-overlay.active{
    display:block;
    opacity:1;
    visibility:visible;
}

.btn{

padding:14px 34px;

background:var(--primary);

border-radius:50px;

color:#fff;

font-weight:600;

transition:.35s;

}

.btn:hover{

transform:translateY(-4px);

box-shadow:var(--shadow);

}

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:#F5F5F5;

}

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

.loader {
    position: fixed;
    inset: 0;
    background: #fff;

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

    z-index: 99999;

    font-size: 50px;
    font-weight: 700;
    color: var(--primary);
}

.loader.hide{

    opacity:0;
    visibility:hidden;
    pointer-events:none;

}

.loader h1{

    font-size:70px;
    color:#fff;
    letter-spacing:10px;
    text-transform:uppercase;

    animation:loaderAnimation 5s infinite;

}

@keyframes loaderAnimation{

0%{
    opacity:.5;
    transform:scale(.95);
}

50%{
    opacity:1;
    transform:scale(1);
}

100%{
    opacity:.5;
    transform:scale(.95);
}

}

.hero{

position:relative;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

background:#ffffff;

}

.hero-content{

position:relative;

z-index:2;

max-width:1100px;

margin-top:90px;

display:flex;

flex-direction:column;

align-items:center;

}

.subtitle{

font-size:18px;

letter-spacing:3px;

text-transform:uppercase;

margin-bottom:20px;

opacity:.85;

}

.hero-title{
    font-family: 'League Spartan', sans-serif;
    font-size:100px;
    font-weight:400;
    color:#111111;
    line-height:1;
    display:flex;
    justify-content:center;
    gap:40px;
    margin-bottom:-10px;
}

.hero-title span{
    color:#111111;
    font-weight:800;
}

.hero-title span{

display:inline-block;

}

.description{
    color:#4a4a4a;
    max-width:850px;
    font-size:22px;
    line-height:1.8;
    text-align:center;
    margin:40px auto;
}

.hero-buttons{

display:flex;

gap:20px;

}

.btn-outline{

padding:15px 35px;

border:2px solid #111111;

border-radius:50px;

color:#111111;

font-weight:600;

transition:.3s;

}

.btn-outline:hover{

background:#111111;

color:white;

}

.scroll-down{

position:absolute;

bottom:35px;

left:50%;

transform:translateX(-50%);

z-index:10;

}

.scroll-down span{

display:block;

width:28px;

height:45px;

border:2px solid white;

border-radius:25px;

position:relative;

}

.scroll-down span::before{

content:"";

position:absolute;

width:5px;

height:8px;

background:white;

left:50%;

transform:translateX(-50%);

top:8px;

border-radius:10px;

animation:scroll 1.8s infinite;

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

.about{

padding:120px 8%;

background:#fff;

}

.about-container{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:90px;

max-width:1400px;

margin:auto;

}

.about-images{

position:relative;

height:620px;

width:100%;

overflow:visible;

}

.about-images img{

position:absolute;

border-radius:18px;

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

object-fit:cover;

transition:.5s;

z-index:1;

}

.about-images img:hover{

transform:scale(1.05);

}

.about-images img:nth-child(1){

width:320px;

height:420px;

left:0;

top:40px;

}

.about-images img:nth-child(2){

width:270px;

height:340px;

right:0;

top:0;

}

.about-images img:nth-child(3){

width:350px;

height:250px;

bottom:0;

left:120px;

}

.section-tag{

color:#1d4ed8;

font-weight:700;

letter-spacing:3px;

font-size:14px;

text-transform:uppercase;

}

.about-content h2{

font-size:56px;

margin:20px 0;

line-height:1.1;

font-weight:800;

color:#111;

}

.about-content p{

font-size:18px;

line-height:1.9;

color:#666;

margin-bottom:40px;

}

.about-stats{

display:flex;

gap:60px;

margin-bottom:45px;

}

.stat h3{

font-size:52px;

color:#111;

margin-bottom:10px;

}

.stat span{

font-size:15px;

color:#666;

letter-spacing:1px;

}
/*================ WHY NOIRIX ================*/

.why-noirix{

padding:120px 8%;

background:#f8fafc;

}

.section-heading{

max-width:750px;

margin:0 auto 70px;

text-align:center;

}

.section-heading h2{

font-size:52px;

font-weight:800;

margin:20px 0;

color:#111;

}

.section-heading p{

font-size:18px;

color:#666;

line-height:1.8;

}

.why-grid{

display:grid;

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

gap:30px;

}

.why-card{

background:#fff;

padding:40px 35px;

border-radius:20px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

border:1px solid transparent;

}

.why-card:hover{

transform:translateY(-10px);

border-color:#2563eb;

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

}

.why-icon{

font-size:45px;

margin-bottom:25px;

}

.why-card h3{

font-size:26px;

margin-bottom:15px;

color:#111;

}

.why-card p{

color:#666;

line-height:1.8;

font-size:16px;

}

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

.marquee-section{

overflow:hidden;

background:#ffffff;

padding:35px 0;

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

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

}

.marquee-track{

display:flex;

width:max-content;

animation:marqueeScroll 24s linear infinite;

}

.marquee-text{

font-family:'League Spartan',sans-serif;

font-size:90px;

font-weight:800;

text-transform:uppercase;

white-space:nowrap;

letter-spacing:1px;

color:#111111;

padding-right:10px;

transition:color .35s ease, -webkit-text-stroke-color .35s ease;

}

@supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black){

.marquee-text{

color:transparent;

-webkit-text-stroke:1.5px #111111;

text-stroke:1.5px #111111;

}

}

.marquee-section:hover .marquee-text{

color:#2F80FF;

}

@supports (-webkit-text-stroke: 1px black) or (text-stroke: 1px black){

.marquee-section:hover .marquee-text{

color:transparent;

-webkit-text-stroke-color:#2F80FF;

text-stroke-color:#2F80FF;

}

}

@keyframes marqueeScroll{

from{
    transform:translateX(0);
}

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

}

.marquee-section:hover .marquee-track{

animation-play-state:paused;

}

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

.marquee-track{
    animation:none;
}

}

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

.services{

padding:120px 8%;

background:#ffffff;

}

.services-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.service-card{

background:#fff;

padding:40px 30px;

border-radius:22px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.35s;

border:1px solid #ececec;

}

.service-card:hover{

transform:translateY(-12px);

border-color:#2563eb;

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

}

.service-icon{

font-size:45px;

margin-bottom:25px;

}

.service-card h3{

font-size:24px;

margin-bottom:15px;

color:#111;

}

.service-card p{

line-height:1.8;

color:#666;

margin-bottom:25px;

}

.service-card a{

color:#2563eb;

font-weight:600;

text-decoration:none;

}

.service-card a:hover{

letter-spacing:1px;

}
/*================ PORTFOLIO ================*/

.portfolio{

padding:120px 8%;

background:#f7f8f9;

}

.portfolio-grid{

display:grid;

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

gap:40px;

margin-top:60px;

}

.portfolio-card{

background:#fff;

border-radius:24px;

overflow:hidden;

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

transition:.4s;

}

.portfolio-card:hover{

transform:translateY(-12px);

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

}

.portfolio-card img{

width:100%;

height:320px;

object-fit:cover;

display:block;

transition:.5s;

}

.portfolio-card:hover img{

transform:scale(1.05);

}

.portfolio-content{

padding:35px;

}

.portfolio-content span{

display:inline-block;

margin:10px 0 20px;

color:#2563eb;

font-weight:600;

}

.portfolio-content h3{

font-size:30px;

margin-bottom:10px;

}

.portfolio-content p{

color:#666;

line-height:1.8;

margin-bottom:25px;

}

.portfolio-content a{

text-decoration:none;

font-weight:600;

color:#2563eb;

}
/*================ CLIENTS ================*/

.clients{

padding:120px 8%;

background:#ffffff;

}

.clients-grid{

display:grid;

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

gap:40px;

margin-top:60px;

align-items:center;

}

.clients-grid img{

width:170px;

margin:auto;

opacity:.65;

transition:.35s;

filter:grayscale(100%);

}

.clients-grid img:hover{

opacity:1;

filter:grayscale(0);

transform:scale(1.08);

}
/*================ PROCESS ================*/

.process{

padding:120px 8%;

background:#f8fafc;

}

.process-grid{

display:grid;

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

gap:25px;

margin-top:70px;

}

.process-card{

background:#fff;

padding:40px 25px;

border-radius:22px;

text-align:center;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

}

.process-card:hover{

transform:translateY(-10px);

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

}

.process-number{

width:70px;

height:70px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:#2563eb;

color:#fff;

font-size:26px;

font-weight:700;

display:flex;

justify-content:center;

align-items:center;

}

.process-card h3{

margin-bottom:15px;

font-size:24px;

color:#111;

}

.process-card p{

line-height:1.8;

color:#666;

}
/*================ COUNTERS ================*/

.counter-section{

padding:100px 8%;

background:#f3f1f1;

}
.section-title{
    text-align:center;
    margin-bottom:60px;
}

.section-title h2{
    color:#0010f1;
}

.section-title p{
    color:#444444;
}

.counter-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.counter-card{

background:#fff;

padding:45px 30px;

text-align:center;

border-radius:18px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.35s;

}

.counter-card:hover{

transform:translateY(-10px);

}

.counter-card h3{

font-size:58px;

font-weight:700;

color:#2563eb;

display:inline-block;

}

.counter-card span{

font-size:42px;

font-weight:700;

color:#2563eb;

margin-left:3px;

}

.counter-card p{

margin-top:18px;

font-size:18px;

color:#64748b;

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

.testimonials{

padding:120px 8%;

background:#ffffff;

}

.testimonial-grid{

display:grid;

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

gap:35px;

margin-top:70px;

}

.testimonial-card{

background:#fff;

padding:40px;

border-radius:24px;

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

transition:.35s;

border:1px solid #ececec;

}

.testimonial-card:hover{

transform:translateY(-10px);

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

border-color:#2563eb;

}

.stars{

font-size:22px;

color:#f4b400;

margin-bottom:25px;

}

.review{

font-size:16px;

line-height:1.9;

color:#555;

margin-bottom:35px;

font-style:italic;

}

.client-info{

display:flex;

align-items:center;

gap:18px;

}

.client-info img{

width:60px;

height:60px;

object-fit:contain;

background:#fff;

padding:8px;

border-radius:50%;

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

}

.client-info h4{

font-size:19px;

margin-bottom:5px;

color:#111;

}

.client-info span{

font-size:15px;

color:#2563eb;

font-weight:600;

}
/*================ FAQ ================*/

.faq{

padding:120px 8%;

background:#f8fafc;

}

.faq-container{

max-width:900px;

margin:60px auto 0;

}

.faq-item{

background:#fff;

border-radius:18px;

margin-bottom:20px;

overflow:hidden;

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

}

.faq-question{

width:100%;

padding:25px 30px;

background:none;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

font-size:20px;

font-weight:600;

cursor:pointer;

text-align:left;

}

.faq-question span{

font-size:30px;

color:#2563eb;

transition:.3s;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:.4s ease;

}

.faq-answer p{

padding:0 30px 25px;

line-height:1.8;

color:#666;

}

.faq-item.active .faq-answer{

max-height:300px;

}

.faq-item.active .faq-question span{

transform:rotate(45deg);

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

.contact{

padding:120px 8%;

background:#ffffff;

}

.contact-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.contact-info h2{

font-size:52px;

margin:20px 0;

color:#111;

}

.contact-info p{

line-height:1.9;

color:#666;

margin-bottom:20px;

}

.contact-box{

margin-bottom:30px;

}

.contact-box h4{

font-size:20px;

margin-bottom:8px;

color:#111;

}

.contact-form{

background:#f8fafc;

padding:45px;

border-radius:25px;

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

}

.input-group{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-bottom:20px;

}

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

width:100%;

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

font-family:inherit;

outline:none;

transition:.3s;

}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

border-color:#2563eb;

box-shadow:0 0 10px rgba(37,99,235,.2);

}

.contact-form textarea{

resize:none;

margin:20px 0 30px;

}

.contact-form .btn{

width:100%;

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

.footer{

background:#0b1120;

padding:90px 8% 30px;

color:#fff;

}

.footer-container{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:50px;

}

.footer-logo{

width:180px;

margin-bottom:25px;

}

.footer-column p{

color:#cbd5e1;

line-height:1.9;

margin-bottom:30px;

}

.footer-column h3{

font-size:22px;

margin-bottom:25px;

}

.footer-column ul{

list-style:none;

padding:0;

}

.footer-column ul li{

margin-bottom:15px;

color:#cbd5e1;

transition:.3s;

}

.footer-column ul li a{

text-decoration:none;

color:#cbd5e1;

transition:.3s;

}

.footer-column ul li a:hover{

color:#3b82f6;

padding-left:8px;

}

.social-links{

display:flex;

gap:15px;

margin-top:25px;

}

.social-links a{

width:45px;

height:45px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#1e293b;

color:#fff;

text-decoration:none;

transition:.35s;

}

.social-links a:hover{

background:#2563eb;

transform:translateY(-6px);

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 0;

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

    margin-top:50px;

    flex-wrap:wrap;

    gap:15px;

}

.footer-bottom p{

    margin:0;

    color:#b5b5b5;

    font-size:15px;

}

.footer-links{

    display:flex;

    align-items:center;

    gap:18px;

}

.footer-links span{

    color:#666;

}

.footer-links a{

    text-decoration:none;

    color:#b5b5b5;

    font-size:15px;

    transition:.3s;

}

.footer-links a:hover{

    color:#2F80FF;

}
/*================ WHATSAPP BUTTON ================*/

.whatsapp-btn{

position:fixed;

right:30px;

bottom:30px;

width:65px;

height:65px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:32px;

color:#fff;

text-decoration:none;

box-shadow:0 10px 35px rgba(37,211,102,.35);

z-index:999;

transition:.35s ease;

animation:whatsappFloat 2.5s infinite;

}

.whatsapp-btn:hover{

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

box-shadow:0 18px 40px rgba(37,211,102,.45);

}

@keyframes whatsappFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}
/*================ COUNTERS ================*/

.counter-section{

padding:100px 8%;

background:#f8fafc;

}

.counter-grid{

display:grid;

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

gap:30px;

margin-top:60px;

}

.counter-card{

background:#fff;

padding:45px 30px;

text-align:center;

border-radius:18px;

box-shadow:0 12px 35px rgba(0,0,0,.08);

transition:.35s;

}

.counter-card:hover{

transform:translateY(-10px);

}

.counter-card h3{

font-size:58px;

font-weight:700;

color:#2563eb;

display:inline-block;

}

.counter-card span{

font-size:42px;

font-weight:700;

color:#2563eb;

margin-left:3px;

}

.counter-card p{

margin-top:18px;

font-size:18px;

color:#64748b;

}
/*================ PAGE LOADER ================*/

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100vh;

background:#0b1120;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

transition:opacity .8s ease, visibility .8s ease;

}

.loader-content{

text-align:center;

}

.loader-logo{

width:180px;

margin-bottom:35px;

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

}

.loader-line{

width:220px;

height:5px;

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

border-radius:20px;

overflow:hidden;

margin:0 auto 25px;

}

.loader-line span{

display:block;

height:100%;

width:0;

background:#2563eb;

animation:loadingBar 2s linear forwards;

}

.loader-content p{

color:#cbd5e1;

font-size:17px;

letter-spacing:2px;

}

#loader.hide{

opacity:0;

visibility:hidden;

pointer-events:none;

}

@keyframes loaderLogo{

0%{

transform:scale(.95);

}

50%{

transform:scale(1);

}

100%{

transform:scale(.95);

}

}

@keyframes loadingBar{

0%{

width:0;

}

100%{

width:100%;

}
}
/*==============================
OUR TEAM PAGE
==============================*/

body{
    background:#050816;
    color:#fff;
    font-family:'Poppins',sans-serif;
}

.navbar ul li a.active{
    color:#3B82F6;
}
/*======================================
TEAM HERO
======================================*/

.team-hero{

position:relative;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

background:#ffffff;

}

.team-hero-content{

position:relative;

z-index:2;

width:90%;

max-width:1100px;

margin-top:90px;

}

.team-tag{

display:inline-block;

padding:10px 24px;

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

border-radius:40px;

color:#555555;

font-size:15px;

letter-spacing:2px;

margin-bottom:30px;

}

.team-hero h1{

font-family:'League Spartan',sans-serif;

font-size:100px;

line-height:1;

font-weight:400;

color:#111111;

margin-bottom:10px;

}

.team-hero h1 span{

color:#2F80FF;

font-weight:800;

}

.team-hero p{

max-width:850px;

margin:auto;

font-size:22px;

line-height:1.8;

color:#4a4a4a;

margin-bottom:45px;

}

.team-btn{

display:inline-block;

padding:18px 42px;

background:#2F80FF;

color:#fff;

border:2px solid transparent;

border-radius:50px;

font-weight:600;

text-decoration:none;

transition:.4s;

}

.team-btn:hover{

background:#fff;

color:#111;

border-color:#111;

transform:translateY(-5px);

}
/*==================================
FOUNDER SECTION
==================================*/

.founder-section{

padding:140px 8%;

background:#ffffff;

}

.founder-container{

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:520px 1fr;

gap:90px;

align-items:center;

}

.founder-image{

display:flex;

justify-content:center;

align-items:center;

position:relative;

}

.founder-image::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:#F2F7FF;

border-radius:30px;

transform:rotate(-8deg);

}

.founder-image img{

position:relative;

width:420px;

z-index:2;

transition:.5s;

}

.founder-image img:hover{

transform:translateY(-12px);

}

.founder-tag{

display:inline-block;

padding:10px 22px;

background:#EDF4FF;

color:#2F80FF;

font-size:14px;

font-weight:600;

border-radius:30px;

margin-bottom:25px;

letter-spacing:1px;

}

.founder-content h2{

font-family:'League Spartan',sans-serif;

font-size:72px;

color:#111;

margin-bottom:10px;

}

.founder-content h4{

font-size:24px;

font-weight:500;

color:#2F80FF;

margin-bottom:30px;

}

.founder-content p{

font-size:18px;

line-height:1.9;

color:#666;

margin-bottom:40px;

}

.founder-skills{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-bottom:40px;

}

.founder-skills span{

padding:14px 22px;

background:#000000;

border-radius:40px;

font-weight:500;

transition:.3s;

}

.founder-skills span:hover{

background:#2F80FF;

color:#010000;

}

.founder-social{

display:flex;

gap:18px;

}

.founder-social a{

width:55px;

height:55px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

background:#F4F4F4;

color:#111;

font-size:20px;

text-decoration:none;

transition:.3s;

}

.founder-social a:hover{

background:#2F80FF;

color:#fff;

transform:translateY(-6px);

}
/*==================================
LEADERSHIP TEAM
==================================*/

.leadership-section{

padding:120px 8%;

background:#F8FAFC;

}

.section-title{

text-align:center;

max-width:700px;

margin:auto auto 70px;

}

.section-title span{

display:inline-block;

padding:8px 22px;

background:#EDF4FF;

color:#2F80FF;

border-radius:30px;

font-weight:600;

letter-spacing:1px;

margin-bottom:18px;

}

.section-title h2{

font-family:'League Spartan',sans-serif;

font-size:56px;

color:#111;

margin-bottom:20px;

}

.section-title p{

font-size:18px;

color:#666;

line-height:1.8;

}

.leadership-grid{

display:grid;

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

gap:40px;

max-width:1200px;

margin:auto;

}

.leader-card{

background:#fff;

border-radius:25px;

overflow:hidden;

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

transition:.4s;

}

.leader-card:hover{

transform:translateY(-12px);

}

.leader-image{

height:500px;

overflow:hidden;

background:#EDF4FF;

}

.leader-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.leader-card:hover img{

transform:scale(1.05);

}

.leader-content{

padding:35px;

}

.leader-content h3{

font-size:34px;

font-family:'League Spartan',sans-serif;

color:#111;

margin-bottom:8px;

}

.leader-content h5{

color:#2F80FF;

font-size:18px;

margin-bottom:20px;

font-weight:600;

}

.leader-content p{

color:#666;

line-height:1.8;

margin-bottom:25px;

}

.leader-social{

display:flex;

gap:15px;

}

.leader-social a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#EDF4FF;

color:#2F80FF;

text-decoration:none;

transition:.3s;

}

.leader-social a:hover{

background:#2F80FF;

color:#fff;

}
/*==================================
VALUES
==================================*/

.values-section{

padding:120px 8%;

background:#fff;

}

.values-grid{

max-width:1300px;

margin:auto;

display:grid;

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

gap:30px;

}

.value-card{

background:#fff;

padding:45px 35px;

border-radius:20px;

text-align:left;

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

transition:.35s;

border:1px solid #F0F0F0;

}

.value-card:hover{

transform:translateY(-10px);

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

}

.value-card i{

font-size:42px;

color:#2F80FF;

margin-bottom:25px;

}

.value-card h3{

font-family:'League Spartan',sans-serif;

font-size:30px;

color:#111;

margin-bottom:15px;

}

.value-card p{

line-height:1.8;

color:#666;

}
/*==================================
GALLERY
==================================*/

.gallery-section{

padding:120px 8%;

background:#F8FAFC;

}

.gallery-grid{

max-width:1300px;

margin:auto;

display:grid;

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

gap:25px;

}

.gallery-item{

overflow:hidden;

border-radius:25px;

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

perspective:900px;

}

.gallery-item img{

width:100%;

display:block;

transition:transform .15s ease-out;

will-change:transform;

}

.gallery-item:hover img{

transform:scale(1.08);

}

/* Mobile/tablet scroll fade-in (desktop uses the 3D tilt instead —
   see initGalleryScrollFade in main.js, which only adds these
   classes on non-desktop devices). */
.gallery-item.gallery-pending{
    opacity:0;
    transform:translateY(40px);
    transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}

.gallery-item.gallery-pending.gallery-in-view{
    opacity:1;
    transform:translateY(0);
}

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

    .gallery-item.gallery-pending{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }

}
/*==================================
TIMELINE
==================================*/

.timeline-section{

padding:120px 8%;

background:#fff;

}

.timeline{

max-width:900px;

margin:80px auto 0;

position:relative;

}

.timeline::before{

content:"";

position:absolute;

left:120px;

top:0;

bottom:0;

width:3px;

background:#2F80FF;

}

.timeline-item{

display:flex;

gap:40px;

margin-bottom:70px;

position:relative;

}

.timeline-year{

min-width:90px;

height:90px;

background:#2F80FF;

color:#fff;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

font-size:22px;

font-variant-numeric:tabular-nums;

z-index:2;

box-shadow:0 10px 25px rgba(47,128,255,.3);

}

.year-digits{

display:inline-block;

min-width:2ch;

text-align:left;

}

.timeline-content{

background:#F8FAFC;

padding:35px;

border-radius:20px;

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

flex:1;

transition:.3s;

}

.timeline-content:hover{

transform:translateY(-6px);

}

.timeline-content h3{

font-family:'League Spartan',sans-serif;

font-size:30px;

margin-bottom:15px;

color:#111;

}

.timeline-content p{

color:#666;

line-height:1.8;

}
/*==================================
TEAM QUOTE
==================================*/

.team-quote{

padding:140px 8%;

background:#F8FAFC;

text-align:center;

}

.quote-wrapper{

max-width:1000px;

margin:auto;

}

.team-quote span{

display:inline-block;

padding:10px 24px;

background:#EDF4FF;

color:#2F80FF;

border-radius:40px;

font-weight:600;

letter-spacing:1px;

margin-bottom:35px;

}

.team-quote h2{

font-family:'League Spartan',sans-serif;

font-size:60px;

line-height:1.3;

color:#111;

font-weight:700;

margin-bottom:40px;

}

.quote-line{

width:120px;

height:4px;

background:#2F80FF;

margin:auto;

border-radius:50px;

margin-bottom:30px;

}

.team-quote h4{

font-size:22px;

color:#666;

font-weight:500;

letter-spacing:1px;

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

.team-cta{

padding:120px 8%;

background:#050816;

}

.cta-content{

max-width:850px;

margin:auto;

text-align:center;

}

.cta-content h2{

font-family:'League Spartan',sans-serif;

font-size:60px;

color:#fff;

margin-bottom:25px;

line-height:1.2;

}

.cta-content p{

font-size:20px;

color:#d5d5d5;

line-height:1.8;

margin-bottom:45px;

}

.cta-content .btn{

padding:18px 42px;

font-size:18px;

}
/* =========================
   CUSTOM CURSOR
========================= */

/* Custom cursor is DESKTOP ONLY. It stays hidden and the native
   cursor stays on until JS confirms a fine-pointer, hover-capable,
   non-touch device and adds .custom-cursor-active to <body>. */

.cursor,
.cursor-dot {
    display: none;
}

/* Custom cursor is DESKTOP ONLY. It stays hidden and the native
   cursor stays on until JS confirms a fine-pointer, hover-capable,
   non-touch device and adds .custom-cursor-active to <body>. */

.cursor,
.cursor-dot {
    display: none;
}

body.custom-cursor-active {
    cursor: none;
}

/* The ring cursor is retired — .cursor is kept in the DOM (main.js
   still references it) but permanently hidden so only the plain
   dot shows. */
body.custom-cursor-active .cursor {
    display: none;
}

body.custom-cursor-active .cursor-dot {
    display: block;
    width: 14px;
    height: 14px;
    background: #111111;
    border-radius: 50%;
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    transition:
        transform .18s ease,
        background .18s ease;
    z-index: 100000;
}

body.custom-cursor-active .cursor-dot.is-hovering {
    transform: translate(-50%, -50%) scale(1.8);
    background: #2F80FF;
}

body.custom-cursor-active .cursor-dot.is-pressing {
    transform: translate(-50%, -50%) scale(.8);
}

/* Over a dark section (e.g. the footer), the dot flips to white so it
   stays visible against a dark background — added/removed by main.js. */
body.custom-cursor-active .cursor-dot.on-dark {
    background: #ffffff;
}

body.custom-cursor-active .cursor-dot.on-dark.is-hovering {
    background: #2F80FF;
}

/* Safety net: touch devices never get the custom cursor, even if
   JS hasn't run yet or a media feature is misreported. */
@media (hover: none), (pointer: coarse) {

    body.custom-cursor-active {
        cursor: auto;
    }

    body.custom-cursor-active .cursor,
    body.custom-cursor-active .cursor-dot {
        display: none;
    }

}
.portfolio-content h3{
    color:#111 !important;
}
/*================ NEWSLETTER ================*/

.newsletter-section{

    padding:120px 20px;

    background:#ffffff;

}

.newsletter-card{

    max-width:1180px;

    margin:auto;

    background:#ffffff;

    border-radius:28px;

    padding:70px;

    border:1px solid #EAEAEA;

    box-shadow:
    0 25px 70px rgba(15,23,42,.08);

    transition:.4s ease;

}

.newsletter-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 35px 90px rgba(15,23,42,.12);

}

.newsletter-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:#EEF4FF;

    color:#2F80FF;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:25px;

}

.newsletter-card h2{

    font-size:52px;

    color:#111827;

    margin-bottom:20px;

    line-height:1.2;

    max-width:750px;

}

.newsletter-card p{

    font-size:18px;

    color:#6B7280;

    line-height:1.8;

    max-width:700px;

    margin-bottom:45px;

}

.newsletter-form{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.newsletter-form input{

    flex:1;

    min-width:300px;

    height:65px;

    border-radius:16px;

    border:1px solid #D8DDE5;

    padding:0 24px;

    font-size:17px;

    outline:none;

    transition:.35s;

    background:#FAFAFA;

}

.newsletter-form input:focus{

    border-color:#2F80FF;

    background:#fff;

    box-shadow:0 0 0 5px rgba(47,128,255,.10);

}

.newsletter-form button{

    height:65px;

    padding:0 40px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    background:linear-gradient(135deg,#2F80FF,#4F46E5);

    color:#fff;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.newsletter-form button:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(47,128,255,.30);

}

.newsletter-points{

    display:flex;

    gap:35px;

    flex-wrap:wrap;

    margin-top:35px;

}

.newsletter-points span{

    color:#6B7280;

    font-size:15px;

    font-weight:500;

}

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

@media (max-width:768px){

    /* Newsletter */

    .newsletter-card{
        padding:40px 25px;
    }

    .newsletter-card h2{
        font-size:34px;
        line-height:1.3;
    }

    .newsletter-card p{
        font-size:16px;
        line-height:1.7;
    }

    .newsletter-form{
        flex-direction:column;
    }

    .newsletter-form input,
    .newsletter-form button{
        width:100%;
        min-width:100%;
    }

    .newsletter-points{
        flex-direction:column;
        gap:12px;
        align-items:flex-start;
    }

    /* Footer */

    .footer-bottom{
        flex-direction:column;
        text-align:center;
        gap:15px;
    }

    .footer-links{
        justify-content:center;
        flex-wrap:wrap;
        gap:12px;
    }

}
/*================ PREMIUM LEGAL PAGES ================*/

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:#f8fafc;
    color:#1f2937;
}

.legal-page{

    padding:80px 20px 120px;

    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 30%),
    radial-gradient(circle at bottom left,#eff6ff 0%,transparent 30%),
    #f8fafc;

}

.legal-container{

    max-width:1000px;

    margin:auto;

    background:#ffffff;

    border-radius:28px;

    padding:70px;

    border:1px solid #E5E7EB;

    box-shadow:
        0 10px 30px rgba(15,23,42,.05),
        0 30px 80px rgba(15,23,42,.08);

    transition:.4s ease;

}

.legal-container:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 45px rgba(15,23,42,.08),
        0 40px 100px rgba(15,23,42,.12);

}

.legal-container h1{

    font-size:54px;

    margin:0 0 15px;

    color:#111827;

    line-height:1.2;

}

.legal-container h1::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    margin-top:18px;

    border-radius:50px;

    background:linear-gradient(90deg,#2563EB,#60A5FA);

}

.legal-container h2{

    font-size:28px;

    color:#111827;

    margin-top:55px;

    margin-bottom:18px;

    position:relative;

    padding-left:18px;

}

.legal-container h2::before{

    content:"";

    position:absolute;

    left:0;

    top:8px;

    width:5px;

    height:26px;

    border-radius:20px;

    background:#2563EB;

}

.legal-container p{

    font-size:17px;

    line-height:1.9;

    color:#6B7280;

}

.legal-container ul{

    margin:20px 0;

    padding-left:25px;

}

.legal-container li{

    margin-bottom:14px;

    color:#6B7280;

    line-height:1.8;

}

.legal-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:55px;

    padding:16px 34px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    color:#fff;

    background:linear-gradient(135deg,#2563EB,#3B82F6);

    transition:.35s;

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

}

.legal-btn:hover{

    transform:translateY(-4px);

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

}

.legal-container strong{

    color:#111827;

}

.legal-container a{

    color:#f9f9f9;

    text-decoration:none;

}

.legal-container a:hover{

    text-decoration:underline;

}

/* Last Updated */

.legal-container>p:first-of-type{

    display:inline-block;

    padding:10px 18px;

    background:#EFF6FF;

    color:#2563EB;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:35px;

}

/* Responsive */

@media(max-width:768px){

.legal-page{

padding:50px 15px 80px;

}

.legal-container{

padding:35px 25px;

border-radius:22px;

}

.legal-container h1{

font-size:36px;

}

.legal-container h2{

font-size:22px;

}

.legal-container p{

font-size:15px;

}

.legal-btn{

width:100%;

justify-content:center;

}

}
/* Founder Skills */

.founder-skills span{

    color:#ffffff !important;

}
/*=====================================================================
   DEVICE-FRIENDLY / RESPONSIVE LAYER
   Added to make the whole site scale automatically across
   desktop, tablet and mobile, add a working mobile nav toggle,
   and restrict the custom cursor to desktop pointers.
=====================================================================*/

/* ---------- Global fluid safety net ---------- */

html{
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    overflow-x:hidden;
}

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

/* Any grid that hasn't been given a mobile override below still
   won't overflow the viewport. */
[class*="-grid"]{
    max-width:100%;
}

/* =======================================================
   NAVBAR / MOBILE TOGGLE — tablets & phones (<=1100px)
======================================================= */

@media (max-width:1100px){

    .navbar{
        padding:0 20px !important;
        height:76px !important;
    }

    .logo img{
        height:42px !important;
    }

    /* Hide the desktop "Let's Talk" button and show the toggle */
    .nav-desktop-btn{
        display:none !important;
    }

    .nav-toggle{
        display:flex !important;
        margin-left:auto !important;
    }

    /* Slide-in mobile menu */
    #navLinks.nav-links{
        display:flex !important;
        position:fixed !important;
        top:0 !important;
        right:-320px !important;
        left:auto !important;
        width:min(80%,320px) !important;
        max-width:320px !important;
        height:100vh !important;
        background:#ffffff !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:flex-start !important;
        gap:0 !important;
        padding:100px 30px 40px !important;
        box-shadow:-10px 0 40px rgba(0,0,0,.15);
        transition:right .4s ease;
        z-index:1000 !important;
        overflow-y:auto !important;
        margin:0 !important;
    }

    #navLinks.nav-links.active{
        right:0 !important;
    }

    #navLinks.nav-links li{
        width:100% !important;
        display:block !important;
        border-bottom:1px solid rgba(0,0,0,.06);
    }

    #navLinks.nav-links a{
        display:block !important;
        padding:16px 0 !important;
        font-size:17px !important;
        color:#111 !important;
    }

    .nav-mobile-btn{
        display:block !important;
        border-bottom:none !important;
        margin-top:20px;
    }

    #navLinks .nav-mobile-btn .btn{
        display:block !important;
        width:100% !important;
        text-align:center;
        padding:14px 20px;
        color:#fff !important;
    }

    body.nav-open{
        overflow:hidden;
    }

}

/* =======================================================
   LAPTOP / SMALL DESKTOP (1025px – 1600px)
   Keeps the spacious, proportioned look on common laptop
   screens instead of the oversized text/buttons that show
   up once a screen is narrower than a big external monitor.
   Does NOT affect tablets/phones (handled separately below)
   or large desktop monitors (left at full size above 1600px).
======================================================= */

@media (min-width:1025px) and (max-width:1600px){

    .navbar{
        padding:0 40px;
        height:82px;
    }

    .logo img{
        height:46px;
    }

    .nav-links{
        gap:34px;
    }

    .nav-links a{
        font-size:14px;
    }

    .hero-title{
        font-size:66px;
        gap:26px;
    }

    .hero-content{
        max-width:820px;
    }

    .description{
        font-size:17px;
        max-width:680px;
        margin:26px auto;
    }

    .hero-buttons{
        gap:14px;
    }

    .btn{
        padding:12px 26px;
        font-size:14px;
    }

    .btn-outline{
        padding:13px 27px;
        font-size:14px;
    }

    /* ---- About ---- */
    .about-content h2{
        font-size:42px;
    }

    .about-images{
        height:480px;
    }

    .stat h3{
        font-size:40px;
    }

    /* ---- Generic section headings (Why Noirix, Services, etc.) ---- */
    .section-heading h2{
        font-size:40px;
    }

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

    /* ---- FAQ ---- */
    .faq-question{
        padding:20px 24px;
        font-size:17px;
    }

    .faq-question span{
        font-size:24px;
    }

    /* ---- Contact ---- */
    .contact-info h2{
        font-size:40px;
    }

    /* ---- Footer ---- */
    .footer-logo{
        width:140px;
    }

    /* ---- Team page hero ---- */
    .team-hero h1{
        font-size:66px;
    }

    .team-hero-content{
        max-width:820px;
    }

    .team-hero p{
        font-size:17px;
        max-width:680px;
        margin-bottom:26px;
    }

    /* ---- Founder ---- */
    .founder-content h2{
        font-size:54px;
    }

    .founder-image::before,
    .founder-image img{
        width:320px;
    }

    .founder-image::before{
        height:320px;
    }

    /* ---- Leadership ---- */
    .leader-image{
        height:400px;
    }

    /* ---- Team quote / CTA / newsletter ---- */
    .team-quote h2{
        font-size:46px;
    }

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

    .newsletter-card h2{
        font-size:40px;
    }

    .marquee-text{
        font-size:64px;
        -webkit-text-stroke-width:1.2px;
        text-stroke-width:1.2px;
    }

}

/* =======================================================
   TABLET (<=1024px)
======================================================= */

@media (max-width:1024px){

    .hero-title{
        font-size:70px;
        gap:20px;
    }

    .description{
        font-size:18px;
    }

    .team-hero h1{
        font-size:70px;
    }

    .team-hero p{
        font-size:18px;
    }

    .about-container{
        grid-template-columns:1fr;
        gap:60px;
    }

    .about-images{
        height:480px;
        max-width:520px;
        margin:0 auto;
    }

    .why-grid,
    .services-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

    .clients-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .process-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .counter-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .testimonial-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-container{
        grid-template-columns:1fr;
        gap:50px;
    }

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

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

    .founder-image{
        margin:0 auto 40px;
    }

    .founder-image::before{
        width:min(60vw,380px);
        height:min(60vw,380px);
    }

    .founder-image img{
        width:min(60vw,380px);
        height:auto;
    }

    .founder-skills,
    .founder-social{
        justify-content:center;
    }

    .leadership-grid,
    .values-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .marquee-text{
        font-size:60px;
        -webkit-text-stroke-width:1px;
        text-stroke-width:1px;
    }

}

/* =======================================================
   MOBILE (<=768px)
======================================================= */

@media (max-width:768px){

    .container{
        width:92%;
    }

    section, .hero, .about, .why-noirix, .services, .portfolio,
    .clients, .process, .counter-section, .testimonials, .faq,
    .contact, .founder-section, .leadership-section, .values-section,
    .gallery-section, .timeline-section, .team-quote, .team-cta{
        padding-left:6%;
        padding-right:6%;
    }

    .hero-title{
        font-size:44px;
        flex-direction:column;
        gap:5px;
    }

    .description{
        font-size:16px;
        line-height:1.7;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{
        width:100%;
        text-align:center;
    }

    .about{
        padding-top:80px;
        padding-bottom:80px;
    }

    .about-images{
        height:360px;
    }

    .about-images img:nth-child(1){ width:56%; height:70%; }
    .about-images img:nth-child(2){ width:48%; height:56%; }
    .about-images img:nth-child(3){ width:60%; height:44%; left:20px; }

    .about-content h2,
    .section-heading h2,
    .section-title h2{
        font-size:32px;
    }

    .about-stats{
        gap:30px;
        flex-wrap:wrap;
    }

    .stat h3{
        font-size:36px;
    }

    .why-grid,
    .services-grid,
    .clients-grid,
    .process-grid,
    .counter-grid,
    .testimonial-grid,
    .leadership-grid,
    .values-grid,
    .gallery-grid{
        grid-template-columns:1fr;
    }

    .clients-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

    .social-links{
        justify-content:center;
    }

    .input-group{
        grid-template-columns:1fr;
    }

    .contact-form{
        padding:30px 22px;
    }

    .whatsapp-btn{
        width:55px;
        height:55px;
        font-size:26px;
        right:18px;
        bottom:18px;
    }

    /* Team page */

    .team-hero h1{
        font-size:44px;
    }

    .team-hero p{
        font-size:16px;
    }

    .founder-image::before{
        width:min(78vw,320px);
        height:min(78vw,320px);
    }

    .founder-image img{
        width:min(78vw,320px);
        height:auto;
    }

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

    .timeline::before{
        left:35px;
    }

    .timeline-item{
        gap:20px;
    }

    .timeline-year{
        min-width:70px;
        height:70px;
        font-size:16px;
    }

    .team-quote h2{
        font-size:30px;
    }

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

    .marquee-text{
        font-size:46px;
        -webkit-text-stroke-width:.7px;
        text-stroke-width:.7px;
    }

}

/* =======================================================
   SMALL MOBILE (<=480px)
======================================================= */

@media (max-width:480px){

    .hero-title{
        font-size:34px;
    }

    .team-hero h1{
        font-size:34px;
    }

    .description{
        font-size:15px;
    }

    .about-content h2,
    .section-heading h2,
    .section-title h2{
        font-size:26px;
    }

    .service-card,
    .why-card,
    .value-card{
        padding:30px 22px;
    }

    .leader-image{
        height:340px;
    }

    .founder-content h2{
        font-size:34px;
    }

    .newsletter-card h2{
        font-size:26px;
    }

    .marquee-text{
        font-size:34px;
        letter-spacing:0;
        -webkit-text-stroke-width:.5px;
        text-stroke-width:.5px;
    }

}

/*=====================================================================
   PAGE TRANSITION — animated curtain shown between page navigations
=====================================================================*/

.page-transition{
    position:fixed;
    inset:0;
    z-index:999999;
    pointer-events:none;
    overflow:hidden;
}

.pt-panel{
    position:absolute;
    inset:0;
    transform:translateX(0);
}

.pt-panel-1{
    background:#050816;
    z-index:2;
}

.pt-panel-2{
    background:linear-gradient(135deg,#2F80FF,#7FB3FF);
    z-index:1;
    transition-delay:.08s !important;
}

.pt-brand{
    position:absolute;
    inset:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 8%;
    opacity:0;
    transform:translateY(24px);
    transition:opacity .35s ease, transform .35s ease;
}

.pt-brand span{
    font-family:'League Spartan',sans-serif;
    font-size:clamp(20px,5vw,52px);
    letter-spacing:4px;
    color:#fff;
    font-weight:600;
    text-align:center;
    white-space:nowrap;
}

@media (max-width:480px){

    .pt-brand span{
        font-size:clamp(16px,6vw,26px);
        letter-spacing:2px;
        white-space:normal;
    }

}

/* Covering the screen (used before navigating away) */
.page-transition.pt-cover .pt-panel{
    transition:transform .55s cubic-bezier(.76,0,.24,1);
    transform:translateX(0);
}

.page-transition.pt-cover .pt-brand{
    opacity:1;
    transform:translateY(0);
    transition-delay:.25s;
}

/* Revealing the page (used right after this page has loaded) */
.page-transition.pt-hide .pt-panel{
    transition:transform .7s cubic-bezier(.76,0,.24,1);
    transform:translateX(100%);
}

.page-transition.pt-hide .pt-brand{
    opacity:0;
    transform:translateY(-16px);
    transition:opacity .3s ease, transform .3s ease;
}

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

    .page-transition,
    .pt-panel,
    .pt-brand{
        transition:none !important;
    }

}

/*=====================================================================
   TEAM PHOTOS — subtle zoom-in on scroll
   (Founder/CEO, Co-Founder, CMO). Toggled by an IntersectionObserver
   in main.js which adds the .in-view class the first time each
   photo enters the viewport.
=====================================================================*/

.photo-reveal{
    position:relative;
    overflow:hidden;
}

.photo-reveal img{
    transition:transform 1s cubic-bezier(.16,1,.3,1) !important;
    transform:scale(1.12);
}

.photo-reveal.in-view img{
    transform:scale(1);
}

/* Stagger the two leadership photos so they don't reveal in lockstep */
.leadership-grid .leader-card:nth-child(2) .photo-reveal img{
    transition-delay:.15s;
}

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

    .photo-reveal img{
        transition:none !important;
        transform:none !important;
    }

}

.legal-hero .legal-tag.fade-up{
    transition-delay:.05s;
}

.legal-hero h1.fade-up{
    transition-delay:.2s;
}

.legal-hero .legal-updated.fade-up{
    transition-delay:.35s;
}

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

    .legal-hero .fade-up{
        transition-delay:0s !important;
    }

}

/*=====================================================================
   LEGAL PAGES (Privacy Policy / Terms & Conditions)
=====================================================================*/

.legal-hero{
    padding:170px 8% 60px;
    text-align:center;
    background:#ffffff;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.legal-tag{
    display:inline-block;
    padding:8px 20px;
    border:1px solid rgba(0,0,0,.15);
    border-radius:40px;
    color:#555555;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:22px;
}

.legal-hero h1{
    font-family:'League Spartan',sans-serif;
    font-size:58px;
    font-weight:700;
    color:#111111;
    margin-bottom:14px;
}

.legal-updated{
    color:#777777;
    font-size:15px;
}

.legal-wrapper{
    max-width:860px;
    margin:0 auto;
    padding:80px 6% 120px;
}

.legal-wrapper h2{
    font-family:'League Spartan',sans-serif;
    font-size:28px;
    font-weight:700;
    color:#111111;
    margin:50px 0 16px;
    scroll-margin-top:110px;
}

.legal-wrapper h2:first-of-type{
    margin-top:0;
}

.legal-wrapper h3{
    font-size:19px;
    font-weight:600;
    color:#111111;
    margin:26px 0 10px;
}

.legal-wrapper p{
    color:#444444;
    line-height:1.9;
    font-size:16px;
    margin-bottom:16px;
}

.legal-wrapper ul{
    margin:0 0 20px 22px;
    color:#444444;
    line-height:1.9;
    font-size:16px;
}

.legal-wrapper li{
    margin-bottom:8px;
}

.legal-wrapper a{
    color:var(--primary);
    text-decoration:underline;
}

.legal-wrapper strong{
    color:#111111;
}

.legal-toc{
    background:#F7F9FF;
    border-radius:20px;
    padding:32px 36px;
    margin-bottom:55px;
}

.legal-toc h3{
    margin:0 0 16px;
    font-size:15px;
    text-transform:uppercase;
    letter-spacing:1.5px;
    color:#555555;
    font-weight:600;
}

.legal-toc ol{
    margin:0;
    padding-left:20px;
    columns:2;
    column-gap:30px;
}

.legal-toc li{
    margin-bottom:10px;
    break-inside:avoid;
}

.legal-toc a{
    color:#111111;
    text-decoration:none;
    font-size:15px;
    transition:.25s;
}

.legal-toc a:hover{
    color:var(--primary);
}

@media (max-width:768px){

    .legal-hero{
        padding:130px 6% 40px;
    }

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

    .legal-wrapper{
        padding:50px 6% 80px;
    }

    .legal-wrapper h2{
        font-size:23px;
    }

    .legal-toc{
        padding:26px 24px;
    }

    .legal-toc ol{
        columns:1;
    }

}