/* =========================
MUFAKIR DESIGNS
FINAL PREMIUM CSS
========================= */

:root{

--primary:#F59E0B;
--secondary:#033334;
--dark:#033334;
--light:#F8FAFC;
--white:#FFFFFF;
--gray:#9CAFB0;
--card:#084444;

}

/* LIGHT MODE */

body.light-mode{
    --secondary:#FFFFFF;
    --dark:#F8FAFC;
    --white:#000000;
    --gray:#9CAFB0;

    /* Midab buluug madow yar */
    --card:#2E6868;
}

/* RESET */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--secondary);
color:var(--white);
overflow-x:hidden;
transition:.4s;

}

/* LOADER */

.loader{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:var(--dark);
display:flex;
justify-content:center;
align-items:center;
z-index:99999;

}

.spinner{

width:60px;
height:60px;
border:5px solid rgba(255,255,255,.2);
border-top:5px solid var(--primary);
border-radius:50%;
animation:spin 1s linear infinite;

}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}
/* HEADER */

.header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
padding:18px 8%;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(2,6,23,.85);
backdrop-filter:blur(12px);

transition:all .4s ease;

}

/* HIDE HEADER */

.header.hide{

transform:translateY(-100%);

}
.logo h2{

color:var(--primary);
font-size:1.8rem;

}

.logo span{

font-size:.8rem;
color:var(--gray);

}

/* NAVIGATION */

.navbar{

display:flex;
gap:25px;

}

.navbar a{

text-decoration:none;
color:var(--white);
font-weight:500;
transition:.3s;

}

.navbar a:hover{

color:var(--primary);

}

.navbar a.active{

color:var(--primary);

}

/* RIGHT SIDE */

.header-right{

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

}

/* LANGUAGE BUTTONS */

.language-switcher{

display:flex;
gap:8px;

}

.language-switcher button{

border:none;
background:var(--primary);
color:#000;
padding:8px 12px;
border-radius:8px;
cursor:pointer;
font-weight:700;

}

/* THEME BUTTON */

#themeToggle{

width:45px;
height:45px;
border:none;
border-radius:50%;
cursor:pointer;
background:var(--primary);
color:#000;
font-size:1rem;

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

.menu-toggle{
    display:none;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}

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

@media (max-width:768px){

.header{

    padding:12px 20px;
    min-height:70px;

}

.logo h2{

    font-size:32px;

}

.logo span{

    display:none;

}

.menu-toggle{

    display:block;
    order:3;

}

.navbar{

    position:fixed;
    top:70px;
    left:-100%;
    width:260px;
    height:calc(100vh - 70px);
    background:#08111f;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:25px;
    transition:.4s;
    box-shadow:0 0 20px rgba(0,0,0,.4);

}

.navbar.active{

    left:0;

}

.navbar a{

    width:100%;
    font-size:10px;

}

.language-switcher{

    width:100%;
    justify-content:flex-start;
    margin-top:10px;

}

.language-switcher button{

    padding:10px 16px;

}

#themeToggle{

    margin-top:10px;

}

}
/* HERO SECTION */

.hero{
    min-height:100vh;
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding:120px 8%;
    gap:50px;
}

.hero-content h1{

font-size:4rem;
font-weight:800;
color:var(--primary);
margin-bottom:10px;

}

.hero-content h2{

font-size:2rem;
margin-bottom:20px;

}

.hero-content p{

font-size:1.1rem;
line-height:1.9;
color:var(--gray);
margin-bottom:30px;

}

.hero-buttons{

display:flex;
gap:15px;
flex-wrap:wrap;

}

.btn{

display:inline-block;
padding:14px 28px;
border-radius:50px;
text-decoration:none;
font-weight:700;
background:var(--primary);
color:#000;
transition:.3s;

}

.btn:hover{

transform:translateY(-5px);

}

.btn-whatsapp{

background:#25D366;
color:#fff;

}

/* HERO IMAGE */

.hero-image{

display:flex;
justify-content:center;

}

.hero-video{

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

}

.hero-video video{

    width:100%;
    max-width:450px;
    border:5px solid var(--primary);
    border-radius:25px;
    box-shadow:0 20px 50px rgba(0,0,0,.35);
    object-fit:cover;

}

/* HERO STATS */

.hero-stats{

display:flex;
gap:20px;
margin-top:20px;
flex-wrap:wrap;

}

.hero-stat{

background:var(--card);
padding:20px;
border-radius:15px;
min-width:120px;
text-align:center;

}

.hero-stat h3{

color:var(--primary);
font-size:2rem;

}

.hero-stat p{

margin-top:5px;
font-size:.9rem;

}

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

.section-title{

text-align:center;
margin-bottom:60px;

}

.section-title h2{

font-size:2.8rem;
color:var(--primary);
margin-bottom:10px;

}

.section-title p{

color:var(--gray);
font-size:1rem;

}

/* =========================
ABOUT SECTION
========================= */

.about{

padding:100px 8%;

}

.about-content{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;

}

.about-text p{

font-size:1.05rem;
line-height:2;
color:var(--gray);
margin-bottom:30px;

}

.about-image img{

width:100%;
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.25);

}

/* FEATURES */

.about-features{

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

}

.feature-box{

display:flex;
align-items:center;
gap:15px;
background:var(--card);
padding:18px;
border-radius:16px;
transition:.3s;

}

.feature-box:hover{

transform:translateY(-5px);

}

.feature-box i{

font-size:1.8rem;
color:var(--primary);

}

.feature-box h4{

margin-bottom:5px;

}

.feature-box p{

font-size:.9rem;
color:var(--gray);

}

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

.services{

padding:100px 8%;

}

.services-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;

}

.service-card{

background:var(--card);
padding:35px 25px;
border-radius:20px;
text-align:center;
transition:.35s;

}

.service-card:hover{

transform:translateY(-10px);
box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.service-card i{

font-size:3rem;
color:var(--primary);
margin-bottom:20px;

}

.service-card h3{

margin-bottom:15px;
font-size:1.3rem;

}

.service-card p{

color:var(--gray);
line-height:1.8;

}

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

.founder{

padding:100px 8%;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;

}

.founder-image{

display:flex;
justify-content:center;

}
/* ========================= */
/* HAMBURGER MENU */
/* ========================= */

.menu-toggle{
    display:none;
    font-size:28px;
    color:#fff;
    cursor:pointer;
}

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

@media (max-width:768px){

.header{
    padding:12px 20px;
    min-height:70px;
}

.logo h2{
    font-size:1.4rem;
}

.logo span{
    display:none;
}

.menu-toggle{
    display:block;
}

.navbar{
    position:fixed;
    top:70px;
    right:-100%;
    width:260px;
    height:100vh;
    background:#08111f;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:25px;
    gap:18px;
    transition:.4s ease;
}

.navbar.active{
    right:0;
}

.navbar a{
    width:100%;
    font-size:18px;
}

.language-switcher{
    margin-top:15px;
}

.theme-btn{
    margin-top:15px;
}

}
.founder-image img{

width:100%;
max-width:450px;
border-radius:25px;
border:4px solid var(--primary);
box-shadow:0 20px 50px rgba(0,0,0,.25);

}

.founder-content span{

display:inline-block;
background:rgba(245,158,11,.15);
color:var(--primary);
padding:8px 16px;
border-radius:30px;
font-weight:600;
margin-bottom:15px;

}

.founder-content h2{

font-size:2.5rem;
margin-bottom:20px;

}

.founder-content p{

line-height:2;
color:var(--gray);
margin-bottom:20px;

}

.founder-content .btn{

margin-top:5px;

}

/* =========================
PORTFOLIO SECTION
========================= */

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

.portfolio{

padding:100px 8%;
text-align:center;

}

.section-subtitle{

display:block;
color:var(--primary);
font-size:15px;
font-weight:600;
letter-spacing:2px;
margin-bottom:10px;

}

.section-title h2 span{

color:var(--primary);

}

/* FILTER */

.portfolio-filter{

display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
margin:50px 0;

}

.filter-btn{

padding:14px 28px;
border:none;
border-radius:12px;
background:#1c2942;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:.35s;

}

.filter-btn:hover{

background:var(--primary);
color:#000;
transform:translateY(-5px);

}

.filter-btn.active{

background:var(--primary);
color:#000;

}

/* GRID */

.portfolio-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;

}

.portfolio-item{

overflow:hidden;
border-radius:20px;
transition:.4s;

}

.portfolio-item img{

width:100%;
height:280px;
object-fit:cover;
display:block;
border-radius:20px;
cursor:pointer;
transition:.4s;
box-shadow:0 12px 35px rgba(0,0,0,.30);

}

.portfolio-item:hover img{

transform:scale(1.08);

}

.portfolio-item.hide{

display:none;

}

/* =========================
VIDEO SECTION
========================= */

.video-showcase{

padding:100px 8%;
text-align:center;

}

.video-container{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
gap:30px;
margin-top:0px;

}

.video-container video{

width:100%;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.35);
transition:.4s;

}

.video-container video:hover{

transform:translateY(-8px);

}

/* MOBILE */

@media(max-width:768px){

.portfolio-filter{

gap:10px;

}

.filter-btn{

padding:10px 18px;
font-size:14px;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.video-container{

grid-template-columns:1fr;

}

}

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

.testimonials{

padding:100px 8%;

}

.testimonial-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;

}

.testimonial-card{

background:var(--card);
padding:30px;
border-radius:20px;
transition:.3s;

}

.testimonial-card:hover{

transform:translateY(-10px);

}

.testimonial-card p{

line-height:1.9;
color:var(--gray);
margin-bottom:15px;

}

.testimonial-card h4{

color:var(--primary);

}
/* =========================
REGISTRATION SECTION
========================= */

/* Halkan ayaan ku siin doonaa CSS-ka cusub */

/* =========================
REGISTRATION SECTION
========================= */

.registration{
padding:100px 8%;
background:var(--bg);
}

.registration-box{
max-width:700px;
margin:auto;
background:var(--card);
padding:35px;
border-radius:20px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
}

#registrationForm{
display:flex;
flex-direction:column;
gap:18px;
}

#registrationForm input,
#registrationForm select,
#registrationForm textarea{

width:100%;
padding:15px;
border:none;
border-radius:12px;
background:#1d1d1d;
color:#fff;
font-size:16px;
font-family:inherit;

}

#registrationForm textarea{

height:140px;
resize:none;

}

#registrationForm button{

padding:15px;
border:none;
border-radius:50px;
background:var(--primary);
color:#000;
font-size:17px;
font-weight:700;
cursor:pointer;
transition:.3s;

}

#registrationForm button:hover{

transform:translateY(-3px);

}

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

.contact{

padding:100px 8%;

}

.contact-container{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;

}

.contact-info{

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

}

.contact-item{

display:flex;
gap:15px;
align-items:center;
background:var(--card);
padding:20px;
border-radius:16px;

}

.contact-item i{

font-size:1.8rem;
color:var(--primary);

}

.contact-form{

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

}

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

padding:15px;
border:none;
border-radius:12px;
background:var(--card);
color:var(--white);
font-family:inherit;

}

.contact-form textarea{

height:180px;
resize:none;

}

.contact-form button{

padding:15px;
border:none;
border-radius:50px;
background:var(--primary);
color:#000;
font-weight:700;
cursor:pointer;

}

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

.footer{

padding:50px 8%;
text-align:center;
background:var(--dark);

}

.footer h2{

color:var(--primary);
margin-bottom:10px;

}

.footer p{

color:var(--gray);

}

.footer-socials{

margin:25px 0;
display:flex;
justify-content:center;
gap:15px;

}

.footer-socials a{

width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:var(--card);
color:var(--primary);
font-size:1.2rem;
text-decoration:none;
transition:.3s;

}

.footer-socials a:hover{

transform:translateY(-5px);

}

/* =========================
FLOATING WHATSAPP
========================= */

.floating-whatsapp{

position:fixed;
bottom:25px;
right:25px;
width:65px;
height:65px;
border-radius:50%;
background:#25D366;
display:flex;
justify-content:center;
align-items:center;
font-size:2rem;
color:#fff;
text-decoration:none;
z-index:999;

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

}

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

#scrollTopBtn{

position:fixed;
bottom:105px;
right:25px;
width:55px;
height:55px;
border:none;
border-radius:50%;
background:var(--primary);
color:#000;
font-size:1.2rem;
cursor:pointer;
display:none;
z-index:999;

}
@media(max-width:768px){

/* HEADER */

.header{
    padding:12px 20px;
    min-height:70px;
}

.logo h2{
    font-size:30px;
}

.logo span{
    display:none;
}

.menu-toggle{
    display:block;
    font-size:28px;
    color:#fff;
    cursor:pointer;
    z-index:1001;
}

/* MENU */

.navbar{
    position:fixed;
    top:70px;
    left:-100%;
    width:260px;
    height:calc(100vh - 70px);
    background:#08111f;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:25px;
    transition:.4s;
    z-index:999;
}

.navbar.active{
    left:0;
}

.navbar a{
    font-size:18px;
    width:100%;
}

.language-switcher{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.language-switcher button{
    padding:8px 14px;
}

#themeToggle{
    margin-top:15px;
}

/* HERO */

.hero{
    flex-direction:column;
    text-align:center;
    padding-top:120px;
}

.hero-content h1{
    font-size:2.4rem;
}

.hero-content h2{
    font-size:1.5rem;
}

.hero-image img{
    width:100%;
    max-width:250px;
}

.hero-stats{
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
}

/* OTHER */

.section-title h2{
    font-size:2rem;
}

.founder-content h2{
    font-size:2rem;
}

.about,
.services,
.founder,
.portfolio,
.contact,
.testimonials,
.video-showcase{
    padding:80px 5%;
}

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

.portfolio-grid img{
    height:240px;
}

}/* =========================
LIGHTBOX
========================= */

.lightbox{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.95);
justify-content:center;
align-items:center;
z-index:99999;
}

.lightbox img{
max-width:90%;
max-height:90%;
border-radius:12px;
box-shadow:0 0 30px rgba(255,255,255,.2);
}

#closeLightbox{
position:absolute;
top:20px;
right:30px;
color:#fff;
font-size:40px;
cursor:pointer;
}
/* =========================
MOBILE FIXES
========================= */

@media(max-width:768px){

.header{
padding:12px 8%;
}

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

.logo img{
width:50px;
height:auto;
}

.logo h2{
font-size:1.8rem;
line-height:1.2;
}

.hero{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding-top:120px;
}

.hero-content{
width:100%;
}

.hero-content h1{
font-size:2.3rem;
line-height:1.2;
}

.hero-content h2{
font-size:1.4rem;
}

.hero-content p{
font-size:1rem;
max-width:90%;
margin:auto;
}

.hero-image{
margin-top:20px;
}

.hero-image img{
width:280px;
max-width:90%;
display:block;
margin:auto;
}

.hero-buttons{
justify-content:center;
flex-wrap:wrap;
gap:15px;
}

.hero-stats{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
margin-top:30px;
}

.stat-box{
width:120px;
}

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

.portfolio-grid img{
width:100%;
height:auto;
}

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

}
/* =====================================
   PREMIUM RESPONSIVE HEADER
===================================== */

.menu-toggle{

display:none;

background:none;

border:none;

color:#F59E0B;

font-size:28px;

cursor:pointer;

z-index:1002;

}

@media (max-width:768px){

.header{

position:fixed;

top:0;

left:0;

width:100%;

height:75px;

padding:0 20px;

display:flex;

justify-content:space-between;

align-items:center;

background:#08111f;

z-index:999;

}

.logo span{

display:none;

}

.logo h2{

font-size:34px;

}

.menu-toggle{

display:block;

}

.navbar{

position:fixed;

top:75px;

left:-100%;

width:270px;

height:calc(100vh - 75px);

background:#1A6868;

display:flex;

flex-direction:column;

align-items:flex-start;

padding:30px;

gap:18px;

transition:.35s ease;

overflow-y:auto;

}

.navbar.active{

left:0;

}

.navbar a{

font-size:20px;

width:100%;

}

.language-switcher{

display:flex;

gap:10px;

margin-top:10px;

}

.theme-btn{

margin-top:10px;

}

.hero{

padding-top:120px;

}

/* Light Mode */

body.light-mode .header{

background:#1A6868;

box-shadow:0 2px 10px rgba(0,0,0,.1);

}

body.light-mode .navbar{

background:#1A6868;

}

}

img{
    transition: transform 0.3s ease;
    cursor: pointer;
}

img:hover{
    transform: scale(1.1);
}
.portfolio-item{
    opacity:1;
    transform:scale(1);
    transition:.35s ease;
}
/* =========================
SMOOTH SCROLL ANIMATION
========================= */

.reveal{

opacity:0;
transform:translateY(60px) scale(.96);
transition:all .8s cubic-bezier(.22,1,.36,1);

}

.reveal.active{

opacity:1;
transform:translateY(0) scale(1);

}

/* TEXT */

.section-title h2{

transition:.8s;

}

.section-title h2:hover{

letter-spacing:2px;

}

/* IMAGE */

.portfolio-item{

overflow:hidden;

}

.portfolio-item img{

transition:transform .6s ease,
box-shadow .6s ease;

}

.portfolio-item:hover img{

transform:scale(1.08) rotate(.5deg);

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

}
.portfolio-category-title{
    text-align:center;
    font-size:32px;
    font-weight:700;
    color:#ffb000;
    margin:40px 0 30px;
    text-transform:uppercase;
    letter-spacing:2px;
}

@media(max-width:768px){

.portfolio-category-title{
    font-size:24px;
    margin:25px 0 20px;
}

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

.clients{

padding:100px 8%;
text-align:center;

}

.clients-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:30px;
margin-top:60px;

}

.client-card{

background:#0f172a;
padding:35px 25px;
border-radius:20px;
transition:.4s;
box-shadow:0 15px 35px rgba(0,0,0,.25);

}

.client-card:hover{

transform:translateY(-10px);

}

.client-card img{

width:90px;
height:90px;
border-radius:50%;
object-fit:cover;
margin-bottom:20px;
border:4px solid var(--primary);

}

.client-card h3{

color:var(--primary);
margin-bottom:8px;

}

.client-card span{

color:#bdbdbd;
display:block;
margin-bottom:15px;

}

.stars{

color:#FFD700;
font-size:20px;
letter-spacing:3px;

}

/* =========================================================
   MUFAKIR DESIGNS — REFERENCE GREEN THEME + READABLE THEMES
   Based on the V11 reference palette. Applied only to Copy.
========================================================= */
:root{
  --primary:#57D7D0;
  --secondary:#071112;
  --dark:#0A1718;
  --light:#EEF7F6;
  --white:#EEF7F6;
  --gray:#9CAFB0;
  --card:#0E1B1C;
  --card2:#122324;
  --line:#243B3C;
  --input:#091617;
  --soft:rgba(87,215,208,.09);
  --accent:#F5C85B;
  --muted:#9CAFB0;
}

/* Exact green reference theme */
body.green{
  --primary:#57D7D0;
  --secondary:#071112;
  --dark:#0A1718;
  --light:#EEF7F6;
  --white:#EEF7F6;
  --gray:#9CAFB0;
  --card:#0E1B1C;
  --card2:#122324;
  --line:#243B3C;
  --input:#091617;
  --soft:rgba(87,215,208,.09);
  --accent:#F5C85B;
  --muted:#9CAFB0;
}

/* Dark = same family, slightly deeper */
body.dark{
  --primary:#57D7D0;
  --secondary:#071112;
  --dark:#050C0D;
  --light:#EEF7F6;
  --white:#EEF7F6;
  --gray:#A9BCBD;
  --card:#0B1819;
  --card2:#102122;
  --line:#213839;
  --input:#071011;
  --soft:rgba(87,215,208,.08);
  --accent:#F5C85B;
  --muted:#A9BCBD;
}

/* Clean, high-contrast light theme */
body.light, body.light-mode{
  --primary:#137F7A;
  --secondary:#FFFFFF;
  --dark:#F3F8F8;
  --light:#142526;
  --white:#142526;
  --gray:#42595A;
  --card:#FFFFFF;
  --card2:#F1F7F7;
  --line:#C8DADA;
  --input:#FFFFFF;
  --soft:rgba(19,127,122,.08);
  --accent:#B77900;
  --muted:#42595A;
}

/* Optional themes remain readable in both backgrounds */
body.blue{
  --primary:#4FA3FF; --secondary:#071321; --dark:#091B2D;
  --light:#EEF7FF; --white:#EEF7FF; --gray:#AFC5D8;
  --card:#0D2034; --card2:#112A43; --line:#29445C; --input:#091A2A;
  --soft:rgba(79,163,255,.10); --accent:#FFD166; --muted:#AFC5D8;
}
body.gold{
  --primary:#F5C85B; --secondary:#151108; --dark:#1B1508;
  --light:#FFF9E9; --white:#FFF9E9; --gray:#C9B98D;
  --card:#241D0D; --card2:#2C2411; --line:#514426; --input:#191307;
  --soft:rgba(245,200,91,.10); --accent:#57D7D0; --muted:#C9B98D;
}

/* Theme colors must follow the selected theme everywhere */
body, .header, .navbar, .hero, .about, .services, .portfolio, .contact, footer,
.service-card, .portfolio-item, .contact-form input, .contact-form textarea,
.about-features, .hero-stat, .theme-switcher, .language-switcher{
  color:var(--white);
}

body{ background:var(--secondary); }
.header{ background:rgba(7,17,18,.92); border-color:var(--line); }
body.light .header, body.light-mode .header{ background:rgba(255,255,255,.94); }
.navbar{ background:var(--secondary); }
body.light .navbar, body.light-mode .navbar{ background:#FFFFFF; }

.logo h2, .hero-content h1, .hero-content h2, .section-title,
.about-text h2, .services h2, .contact h2,
.service-card h3, .portfolio-category-title, .contact-item h3,
.hero-stat h3, .portfolio-filter .filter-btn.active{
  color:var(--primary) !important;
}

.hero-content p, .about-text p, .service-card p, .hero-stat p,
.contact-item p, .contact-form label, .portfolio-category-title p,
.section-subtitle, footer, .portfolio-description{
  color:var(--muted) !important;
}

.contact-form input, .contact-form textarea{
  background:var(--input) !important;
  color:var(--white) !important;
  border-color:var(--line) !important;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{
  color:var(--gray) !important;
  opacity:1;
}

.service-card, .portfolio-item, .hero-stat{
  background:linear-gradient(145deg,var(--card2),var(--card)) !important;
  border-color:var(--line) !important;
}

.navbar a{ color:var(--white) !important; }
.navbar a:hover, .navbar a.active{ color:var(--primary) !important; }
.theme-btn, .menu-toggle{ color:var(--primary) !important; }
.language-switcher button{ color:var(--white) !important; border-color:var(--line) !important; }

body.light .theme-btn, body.light-mode .theme-btn,
body.light .menu-toggle, body.light-mode .menu-toggle{
  color:var(--primary) !important;
}
body.light .navbar a, body.light-mode .navbar a,
body.light .language-switcher button, body.light-mode .language-switcher button{
  color:#142526 !important;
}

.hero-buttons a, .hero-buttons button, .contact-form button{
  color:#031011 !important;
  background:linear-gradient(135deg,var(--primary),var(--accent)) !important;
}

.portfolio-filter .filter-btn{
  color:var(--muted) !important;
  border-color:var(--line) !important;
  background:var(--card) !important;
}
.portfolio-filter .filter-btn:hover,
.portfolio-filter .filter-btn.active{
  background:var(--primary) !important;
  color:#031011 !important;
}

body.light .header, body.light-mode .header{
  border-bottom:1px solid var(--line);
}
body.light .service-card, body.light-mode .service-card,
body.light .portfolio-item, body.light-mode .portfolio-item,
body.light .hero-stat, body.light-mode .hero-stat{
  box-shadow:0 12px 35px rgba(20,37,38,.10);
}

/* Never allow low-contrast fixed white/gray text in light mode */
body.light [style*="color:#fff"], body.light [style*="color: #fff"],
body.light-mode [style*="color:#fff"], body.light-mode [style*="color: #fff"]{
  color:#142526 !important;
}

@media (max-width:768px){
  body.light .navbar, body.light-mode .navbar{ background:#FFFFFF !important; }
  body.green .navbar, body.dark .navbar, body.blue .navbar, body.gold .navbar{ background:var(--card) !important; }
}

/* =========================
   ADMIN LOGIN / PROTECTED REGISTRATION
   ========================= */
.admin-link{
    border:0;
    background:transparent;
    color:var(--white, #fff);
    font:inherit;
    font-weight:800;
    cursor:pointer;
    padding:10px 8px;
    transition:.25s ease;
}
.admin-link:hover{
    color:var(--primary, #22c55e) !important;
    transform:translateY(-1px);
}

.admin-registration[hidden]{
    display:none !important;
}

.admin-modal[hidden]{
    display:none !important;
}
.admin-modal{
    position:fixed;
    inset:0;
    z-index:100000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(8px);
}
.admin-login-card{
    position:relative;
    width:min(430px,100%);
    padding:34px 28px 30px;
    border:1px solid var(--line, rgba(255,255,255,.15));
    border-radius:22px;
    background:var(--secondary, #10201f);
    color:var(--text, #fff);
    box-shadow:0 25px 70px rgba(0,0,0,.35);
    text-align:center;
}
.admin-login-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin:0 auto 14px;
    border-radius:50%;
    background:var(--primary, #22c55e);
    color:#fff;
    font-size:25px;
}
.admin-login-card h2{
    margin:0 0 8px;
    color:var(--heading, #fff);
}
.admin-login-card p{
    margin:0 0 20px;
    color:var(--muted, #b8c8c5);
}
.admin-login-card form{
    display:grid;
    gap:12px;
}
.admin-login-card input{
    width:100%;
    box-sizing:border-box;
    padding:14px 15px;
    border:1px solid var(--line, rgba(255,255,255,.18));
    border-radius:12px;
    background:var(--input-bg, rgba(255,255,255,.06));
    color:var(--text, #fff);
    outline:none;
}
.admin-login-card input:focus{
    border-color:var(--primary, #22c55e);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--primary, #22c55e) 18%, transparent);
}
.admin-login-card form button{
    border:0;
    border-radius:12px;
    padding:14px 18px;
    background:var(--primary, #22c55e);
    color:#fff;
    font-weight:800;
    cursor:pointer;
}
.admin-close{
    position:absolute;
    top:10px;
    right:14px;
    border:0;
    background:transparent;
    color:var(--muted, #b8c8c5);
    font-size:32px;
    cursor:pointer;
}
.admin-login-error{
    margin:0 !important;
    color:#ef4444 !important;
    font-size:.9rem;
    font-weight:700;
}
body.admin-modal-open{
    overflow:hidden;
}

/* High-contrast light mode for Admin + registration */
body.light .admin-login-card,
body.light-mode .admin-login-card{
    background:#ffffff;
    color:#13201f;
    border-color:#cbd5d3;
}
body.light .admin-login-card h2,
body.light-mode .admin-login-card h2{
    color:#10201f;
}
body.light .admin-login-card p,
body.light-mode .admin-login-card p{
    color:#40504d;
}
body.light .admin-login-card input,
body.light-mode .admin-login-card input{
    background:#f4f7f6;
    color:#10201f;
    border-color:#b8c8c5;
}
body.light .admin-link,
body.light-mode .admin-link{
    color:#10201f !important;
}

@media (max-width:700px){
    .admin-link{ width:100%; text-align:left; }
    .admin-login-card{ padding:30px 20px 24px; }
}


/* =========================================================
   MUFAKIR PREMIUM MOTION + UNIFIED ADMIN NAV
   ========================================================= */

/* Admin is intentionally identical to the normal navigation links. */
.navbar .admin-link{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  margin:0;
  padding:0;
  background:transparent !important;
  color:var(--white) !important;
  font-family:inherit;
  font-size:inherit;
  font-weight:500;
  line-height:inherit;
  letter-spacing:inherit;
  cursor:pointer;
  transition:color .3s ease, transform .3s ease, opacity .3s ease;
}
.navbar .admin-link:hover,
.navbar .admin-link:focus-visible{
  color:var(--primary) !important;
  transform:translateY(-2px);
  outline:none;
}
body.light .navbar .admin-link,
body.light-mode .navbar .admin-link{
  color:#142526 !important;
}
body.light .navbar .admin-link:hover,
body.light-mode .navbar .admin-link:hover,
body.light .navbar .admin-link:focus-visible,
body.light-mode .navbar .admin-link:focus-visible{
  color:var(--primary) !important;
}

/* Remove the old special Admin styling so it can never look heavier than nav. */
.admin-link{
  font-weight:500 !important;
  padding:0 !important;
  width:auto !important;
  text-align:inherit !important;
}

/* ---------- Animated ambient background ---------- */
body{
  position:relative;
  isolation:isolate;
  background:var(--secondary);
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-2;
  pointer-events:none;
  will-change:transform;
}
body::before{
  background:
    radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--primary) 18%, transparent) 0, transparent 25%),
    radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--accent) 12%, transparent) 0, transparent 22%),
    radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--primary) 10%, transparent) 0, transparent 28%);
  filter:blur(18px);
  animation:ambientDrift 18s ease-in-out infinite alternate;
}
body::after{
  z-index:-1;
  background:
    linear-gradient(120deg, transparent 0 35%, color-mix(in srgb, var(--primary) 5%, transparent) 45%, transparent 58% 100%);
  background-size:220% 220%;
  opacity:.65;
  animation:ambientSweep 20s linear infinite;
}

@keyframes ambientDrift{
  0%{ transform:translate3d(-3%, -2%, 0) scale(1); }
  50%{ transform:translate3d(3%, 2%, 0) scale(1.05); }
  100%{ transform:translate3d(-1%, 4%, 0) scale(1.02); }
}
@keyframes ambientSweep{
  0%{ background-position:0% 50%; transform:rotate(0deg); }
  50%{ background-position:100% 50%; transform:rotate(3deg); }
  100%{ background-position:0% 50%; transform:rotate(0deg); }
}

/* ---------- Header glass motion ---------- */
.header{
  border-bottom:1px solid color-mix(in srgb, var(--primary) 16%, transparent);
  box-shadow:0 8px 35px color-mix(in srgb, #000 18%, transparent);
}
.header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  background-size:200% 100%;
  opacity:.7;
  animation:headerLine 6s linear infinite;
}
@keyframes headerLine{
  from{background-position:200% 0;}
  to{background-position:-200% 0;}
}

/* ---------- Premium reveal animation ---------- */
.reveal,
.service-card,
.feature-box,
.portfolio-item,
.client-card,
.founder-content,
.founder-image,
.hero-stat,
.contact-item,
.contact-form,
.section-title{
  will-change:transform,opacity;
}

.reveal,
.service-card,
.feature-box,
.portfolio-item,
.client-card,
.founder-content,
.founder-image,
.hero-stat,
.contact-item,
.contact-form,
.section-title{
  opacity:0;
  transform:translateY(35px) scale(.98);
  transition:opacity .75s cubic-bezier(.22,1,.36,1),
             transform .75s cubic-bezier(.22,1,.36,1);
}

.reveal.active,
.service-card.show,
.feature-box.show,
.portfolio-item.show,
.client-card.show,
.founder-content.show,
.founder-image.show,
.hero-stat.show,
.contact-item.show,
.contact-form.show,
.section-title.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Gentle stagger when several cards enter together. */
.service-card:nth-child(2), .feature-box:nth-child(2), .hero-stat:nth-child(2), .client-card:nth-child(2){ transition-delay:.08s; }
.service-card:nth-child(3), .feature-box:nth-child(3), .hero-stat:nth-child(3), .client-card:nth-child(3){ transition-delay:.16s; }
.service-card:nth-child(4), .client-card:nth-child(4){ transition-delay:.24s; }

/* ---------- Floating card interaction ---------- */
.service-card,
.client-card,
.hero-stat,
.feature-box,
.portfolio-item{
  transition-property:opacity,transform,box-shadow,border-color;
}
.service-card:hover,
.client-card:hover,
.hero-stat:hover,
.feature-box:hover{
  transform:translateY(-8px) scale(1.015);
  box-shadow:0 18px 45px color-mix(in srgb, var(--primary) 12%, transparent);
  border-color:color-mix(in srgb, var(--primary) 55%, var(--line)) !important;
}

/* Hero content enters softly on page load. */
.hero-content > *{
  animation:heroRise .8s cubic-bezier(.22,1,.36,1) both;
}
.hero-content > *:nth-child(2){animation-delay:.08s;}
.hero-content > *:nth-child(3){animation-delay:.16s;}
.hero-content > *:nth-child(4){animation-delay:.24s;}
.hero-content > *:nth-child(5){animation-delay:.32s;}
.hero-video{
  animation:heroVideoIn 1s cubic-bezier(.22,1,.36,1) .18s both;
}
@keyframes heroRise{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes heroVideoIn{
  from{opacity:0;transform:translateX(35px) scale(.96);}
  to{opacity:1;transform:translateX(0) scale(1);}
}

/* Portfolio images have a polished hover glow. */
.portfolio-item{
  overflow:hidden;
}
.portfolio-item::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 0%, transparent);
  transition:box-shadow .35s ease;
}
.portfolio-item:hover::after{
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* Admin modal gets the same visual language as the site. */
.admin-modal{
  background:color-mix(in srgb, var(--dark) 78%, transparent);
}
.admin-login-card{
  background:linear-gradient(145deg,var(--card2),var(--card)) !important;
  border-color:var(--line) !important;
  box-shadow:0 30px 90px color-mix(in srgb, #000 45%, transparent),
             0 0 0 1px color-mix(in srgb, var(--primary) 8%, transparent);
  animation:adminPop .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes adminPop{
  from{opacity:0;transform:translateY(22px) scale(.94);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.admin-login-card input{
  background:var(--input) !important;
  color:var(--white) !important;
  border-color:var(--line) !important;
}
.admin-login-card form button{
  background:linear-gradient(135deg,var(--primary),var(--accent)) !important;
  color:#031011 !important;
}

/* Keep light theme readable while preserving the exact same motion. */
body.light::before,
body.light-mode::before{opacity:.5;}
body.light::after,
body.light-mode::after{opacity:.28;}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}

@media (max-width:768px){
  .navbar .admin-link{
    width:auto !important;
    text-align:left !important;
  }
  body::before{filter:blur(24px);}
}


/* =========================================================
   ADMIN PASSWORD / ACCOUNT MANAGEMENT
   ========================================================= */
.admin-text-btn,
.admin-back-btn{
  border:0;
  background:transparent;
  color:var(--primary, #148a86);
  font-weight:700;
  cursor:pointer;
  padding:8px 4px;
  transition:transform .25s ease, opacity .25s ease;
}
.admin-text-btn:hover,
.admin-back-btn:hover{ transform:translateY(-1px); opacity:.82; }
.admin-extra-panel{ margin-top:14px; animation:adminPanelIn .35s ease both; }
.admin-extra-panel h3{ margin:0 0 7px; color:var(--primary, #148a86); }
.admin-extra-panel p{ line-height:1.6; }
.admin-extra-panel form{ display:grid; gap:11px; }
.admin-extra-panel input{ width:100%; box-sizing:border-box; }
.admin-form-message{
  margin:2px 0 0;
  padding:10px 12px;
  border-radius:10px;
  font-size:.9rem;
  font-weight:700;
}
.admin-form-message.error{ background:rgba(220,53,69,.12); color:#b42318; }
.admin-form-message.success{ background:rgba(20,138,134,.13); color:#08746f; }
@keyframes adminPanelIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
body.light .admin-text-btn,
body.light-mode .admin-text-btn,
body.light .admin-back-btn,
body.light-mode .admin-back-btn{ color:#08746f; }
body.light .admin-extra-panel h3,
body.light-mode .admin-extra-panel h3{ color:#08746f; }


/* Registration service selector + visible Change Password controls */
.registration-label{
  display:block;
  margin:4px 0 -3px;
  color:var(--white, #f4f8f7);
  font-weight:700;
  font-size:.95rem;
}
#registrationForm select{
  width:100%;
  box-sizing:border-box;
  padding:14px 15px;
  border:1px solid var(--line, rgba(255,255,255,.14));
  border-radius:12px;
  background:var(--input, rgba(255,255,255,.06));
  color:var(--white, #f4f8f7);
  font:inherit;
  outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
#registrationForm select:focus{
  border-color:var(--primary, #148a86);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--primary, #148a86) 15%, transparent);
}
#registrationForm select option{
  background:#102423;
  color:#fff;
}
.registration-change-btn{
  margin-top:14px;
  border:1px solid color-mix(in srgb, var(--primary, #148a86) 45%, transparent);
  background:linear-gradient(135deg,var(--primary, #148a86),var(--accent, #d9b44a));
  color:#061312;
  font-weight:800;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.registration-change-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px color-mix(in srgb, var(--primary, #148a86) 22%, transparent);
}
.admin-login-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:6px;
}
.admin-change-btn{
  color:var(--accent, #d9b44a);
}
body.light .registration-label, body.light-mode .registration-label{color:#142526;}
body.light #registrationForm select, body.light-mode #registrationForm select{
  background:#fff;
  color:#142526;
  border-color:#b9c9c7;
}
body.light #registrationForm select option, body.light-mode #registrationForm select option{
  background:#fff;
  color:#142526;
}
body.light .admin-change-btn, body.light-mode .admin-change-btn{color:#08746f;}


/* Consent link result panel — added for customer registration workflow */
.consent-result{margin:22px auto 0;padding:20px;border-radius:14px;overflow-wrap:anywhere;line-height:1.6}
.consent-result-success{background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.45);color:var(--text,#fff)}
.consent-result-error{background:rgba(220,53,69,.10);border:1px solid rgba(220,53,69,.5);color:var(--text,#fff)}
.consent-result h3{margin:0 0 8px;color:#2fc9be}
.consent-url{display:block;margin:10px 0;color:#d8a7ff;text-decoration:underline;word-break:break-all}
.consent-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.consent-actions button{border:0;border-radius:10px;padding:12px 16px;background:#2ebfb7;color:#031313;font-weight:700;cursor:pointer}
.consent-actions button:hover{filter:brightness(1.08)}
#registrationForm button:disabled{opacity:.65;cursor:wait}