:root{
--dark:#0f172a;
--dark-soft:#1e293b;
--light:#f8fafc;
--border:#e2e8f0;
--accent:#34d399;
--text:#0f172a;
--muted:#64748b;
--radius:16px;

--ease-standard:cubic-bezier(0.4,0,0.2,1);
--ease-bounce:cubic-bezier(0.34,1.56,0.64,1);
--dur-fast:250ms;
--dur-med:350ms;
--dur-slow:600ms;
}

*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:'Inter',sans-serif;
background:var(--light);
color:var(--text);
line-height:1.6;
overflow-x:hidden;
}

.container{width:90%;max-width:1600px;margin:auto}
.center{text-align:center}



/* HEADER */
/* HEADER */

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

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

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

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

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

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

/* HEADER */

/* HEADER */

/* HEADER */

header{
position:fixed;
top:0;
width:100%;
z-index:1000;
background:rgba(255,255,255,0.85);
backdrop-filter:blur(14px);
transition:.35s ease;
border-bottom:1px solid rgba(0,0,0,0.04);
}

header.scrolled{
box-shadow:0 12px 35px rgba(0,0,0,.08);
background:rgba(255,255,255,0.95);
}


/* NAV */

.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 0;
position:relative;
}

/* LOGO */

.logo img{
height:clamp(32px,4vw,44px);
transition:.3s;
}

.logo img:hover{
transform:scale(1.04);
}

/* ISO CENTER (UPGRADED) */

/* .certification{
position:absolute;
left:50%;
transform:translateX(-50%);
font-size:13px;
font-weight:600;
color:#1e40af;
white-space:nowrap;
padding:6px 14px;
border-radius:20px;
background:linear-gradient(135deg,#eff6ff,#dbeafe);
border:1px solid rgba(37,99,235,0.2);
box-shadow:0 4px 12px rgba(37,99,235,0.08);
cursor:default;
} */

.certification{
position:absolute;
left:50%;
transform:translateX(-50%);
font-size:15px;
font-weight:600;
color:#f7f7f9;
white-space:nowrap;
padding:7px 50px;
border-radius:20px;
background:linear-gradient(135deg,#02156e,#033a83,#02156e);
border:1px solid rgba(14, 89, 218, 0.586);
cursor:default;

/* 🔥 PREMIUM GLOW */
animation:isoGlow 1.3s ease-in-out infinite;
}

/* 🔥 GLOW ANIMATION */
@keyframes isoGlow{
0%{
box-shadow:0 0 0 rgba(10, 84, 244, 0.807);
transform:translateX(-50%) scale(1);
}
50%{
box-shadow:3px 3px 25px rgba(15, 127, 231, 0.875);
transform:translateX(-50%) scale(1.05);
}
100%{
box-shadow:0 0 0 rgba(37, 100, 235, 0.914);
transform:translateX(-50%) scale(1);
}
}
/* TOOLTIP */

.certification::after{
content:"Certified Quality Management System";
position:absolute;
bottom:-34px;
left:50%;
transform:translateX(-50%);
background:#111;
color:#fff;
font-size:11px;
padding:5px 10px;
border-radius:6px;
opacity:0;
pointer-events:none;
transition:.25s;
white-space:nowrap;
}

.certification:hover::after{
opacity:1;
}

/* RIGHT GROUP */

.right-group{
display:flex;
align-items:center;
gap:20px;
}

/* NAV LINKS */

nav{
display:flex;
align-items:center;
gap:30px;
}

nav a{
text-decoration:none;
color:#1f2937;
font-weight:500;
position:relative;
transition:.3s;
}

nav a:hover{
color:#2563eb;
}

nav a::after{
content:"";
position:absolute;
bottom:-6px;
left:0;
height:2px;
width:0;
background:linear-gradient(90deg,#2563eb,#60a5fa);
transition:.35s;
border-radius:2px;
}

nav a:hover::after{
width:100%;
}

/* DROPDOWN */

.dropdown{
position:relative;
}

.dropdown-trigger{
display:flex;
align-items:center;
gap:6px;
cursor:pointer;
}

.dropdown-arrow{
font-size:12px;
transition:.3s;
}

.dropdown.active .dropdown-arrow{
transform:rotate(180deg);
}

.dropdown-menu{
position:absolute;
top:34px;
left:0;
gap:10px;
background:white;
border-radius:12px;
box-shadow:0 20px 50px rgba(0,0,0,.1);
padding:12px;
width:210px;
display:none;
flex-direction:column;
border:1px solid rgba(0,0,0,0.05);
}

.dropdown-menu a{
padding:8px 10px;
border-radius:8px;
transition:.25s;
}

.dropdown-menu a:hover{
background:#f1f5f9;
transform:translateX(4px);
}

.dropdown:hover .dropdown-menu{
display:flex;
}

/* LOGIN BUTTON (UPGRADED) */

.btn-login{
padding:8px 20px;
background:linear-gradient(135deg,#111a2f,#2563eb);
color:white;
border-radius:10px;
text-decoration:none;
font-size:14px;
transition:.35s;
box-shadow:0 6px 18px rgba(37,99,235,0.25);
}

.btn-login:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(37,99,235,0.35);
}

/* HAMBURGER */

.menu-toggle{
display:none;
flex-direction:column;
cursor:pointer;
z-index:1200;
}

.menu-toggle span{
width:26px;
height:3px;
background:#111;
margin:2px 0;
border-radius:5px;
transition:.3s;
}

/* OVERLAY */

.nav-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.3);
backdrop-filter:blur(4px);
opacity:0;
pointer-events:none;
transition:.3s;
z-index:900;
}

.nav-overlay.active{
opacity:1;
pointer-events:auto;
}

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

@media(max-width:998px){

.nav{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
}

.menu-toggle{
display:flex;
justify-self:start;
}

.logo{
justify-self:center;
}

.right-group{
justify-self:end;
}

.certification{
display:none;
}

nav{
position:fixed;
top:70px;
left:-100%;
width:80%;
height:calc(100vh - 70px);
background:white;
flex-direction:column;
padding:30px;
transition:.4s cubic-bezier(0.77,0,0.175,1);
display:flex;
z-index:1100;
box-shadow:10px 0 40px rgba(0,0,0,.1);
overflow-y:auto;
}

nav.active{
left:0;
}

nav a{
margin:12px 0;
font-size:18px;
}

.dropdown-menu{
position:relative;
box-shadow:none;
display:none;
width:100%;
}

.dropdown.active .dropdown-menu{
display:flex;
}

}

@media(max-width:480px){

.logo img{
height:30px;
}

.btn-login{
padding:6px 12px;
font-size:12px;
}

.menu-toggle span{
width:22px;
height:2.5px;
}

}


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

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

.hero{
min-height:100dvh; /* 🔥 FIX mobile viewport issue */
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
padding:clamp(80px, 10vh, 140px) 20px;

/* CLEAN BACKGROUND */
background:url("https://myntreal.10web.cloud/wp-content/uploads/2026/02/myntreal_business_hub_verticals_hero.webp")
center center / cover no-repeat;
}

/* OVERLAY */

.hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(25, 38, 65, 0.72);
}

/* CONTENT WRAPPER */

.hero-inner{
position:relative;
color:white;
width:100%;
max-width:900px;
margin:auto;
padding:0 10px;
}

/* 🔥 HEADING (REAL RESPONSIVE) */

.hero h1{
font-family:'Playfair Display',serif;

/* FLUID TYPOGRAPHY */
font-size:clamp(28px, 5vw + 1rem, 68px);

line-height:1.15;
margin-bottom:clamp(16px, 2vw, 30px);
letter-spacing:-0.5px;
}

/* 🔥 PARAGRAPH (REAL RESPONSIVE) */

.hero p{
font-size:clamp(14px, 1.8vw + 0.5rem, 22px);
color:#e2e8f0;
line-height:1.7;
margin-bottom:clamp(20px, 3vw, 40px);

max-width:clamp(280px, 90%, 700px);
margin-left:auto;
margin-right:auto;
}

/* BUTTON */

.btn-primary{
font-size:clamp(14px, 1vw + 0.6rem, 18px);
padding:clamp(12px, 1.2vw, 18px) clamp(24px, 2vw, 38px);
border-radius:10px;
}

/* ================= EXTRA RESPONSIVE CONTROL ================= */

/* TABLET */

@media(max-width:900px){

.hero{
padding-top:100px;
padding-bottom:80px;
}

/* improve readability */

.hero p{
max-width:90%;
}

}

/* SMALL MOBILE */

@media(max-width:480px){

.hero{
align-items:flex-end; /* 🔥 better layout */
padding-bottom:60px;
}

/* tighter text */

.hero h1{
line-height:1.25;
}

.hero p{
line-height:1.6;
}

}




/* BUTTON */
.btn-primary{
background:var(--accent);
border:none;padding:16px 38px;
border-radius:8px;font-weight:600;
cursor:pointer;
transition:
transform var(--dur-med) var(--ease-bounce),
box-shadow var(--dur-med) var(--ease-standard);
}
.btn-primary:hover{
transform:scale(1.02);
box-shadow:0 16px 40px rgba(52,211,153,.4);
}

/* SECTION */
.section{padding:50px 0}

/* ECOSYSTEM */
/* SECTION */

.ecosystem-section{
padding:100px 0;
background:#f9fafb;
}

/* GRID */

.eco-grid{
display:grid;
grid-template-columns:1fr 1.2fr;
gap:100px;
align-items:center;
}

/* LABEL */

.eco-label{
font-size:12px;
letter-spacing:1.6px;
font-weight:600;
color:#6b7280;
display:block;
margin-bottom:14px;
}

/* TITLE */

.eco-title{
font-size:42px;
line-height:1.2;
font-weight:600;
margin-bottom:26px;
letter-spacing:-0.6px;
}

/* DESCRIPTION */

.eco-description{
font-size:16px;
line-height:1.8;
color:#6b7280;
margin-bottom:20px;
max-width:460px;
}

/* RIGHT GRID */

.eco-right{
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
}

/* CARD */

.eco-card{
display:flex;
align-items:center;
gap:18px;
background:white;
padding:26px 28px;
border-radius:18px;
border:1px solid #e5e7eb;
transition:all .35s cubic-bezier(.34,1.56,.64,1);
position:relative;
overflow:hidden;
}

/* PREMIUM HOVER */

.eco-card:hover{
transform:translateY(-8px);
box-shadow:0 30px 60px rgba(0,0,0,.08);
}

/* ICON */

.eco-icon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
background:#f1f5f9;
border-radius:14px;
flex-shrink:0;
}

.eco-icon img{
width:30px;
height:30px;
object-fit:contain;
}

/* TEXT */

.eco-text h4{
font-size:16px;
font-weight:600;
margin-bottom:4px;
}

.eco-text p{
font-size:14px;
color:#6b7280;
margin:0;
}

/* RESPONSIVE */

@media(max-width:1000px){

.eco-grid{
grid-template-columns:1fr;
gap:70px;
}

.eco-left{
text-align:center;
}

.eco-description{
margin:auto;
}

.eco-right{
grid-template-columns:1fr;
}

}




/* BRANDS SECTION */

.brands{
padding:100px 0;
background:#ffffff;
text-align:center;
}

.brand-container{
max-width:1100px;
margin:auto;
}

/* TITLE */

.brand-title{
font-size:36px;
font-weight:600;
margin-bottom:12px;
letter-spacing:-0.4px;
}

/* SUBTITLE */

.brand-subtitle{
font-size:16px;
color:#6b7280;
max-width:520px;
margin:auto;
line-height:1.7;
}

/* GRID */

.brand-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:28px;
margin-top:60px;
}

/* CARD */

.brand-card{
height:110px;
background:white;
border:1px solid #e5e7eb;
border-radius:14px;

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

transition:all .35s cubic-bezier(.34,1.56,.64,1);
}

/* LOGO */

.brand-card img{
max-width:120px;
max-height:60px;
object-fit:contain;
opacity:.85;
transition:.3s;
}

/* HOVER EFFECT */

.brand-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 35px rgba(0,0,0,.08);
}

.brand-card:hover img{
opacity:1;
transform:scale(1.05);
}

/* RESPONSIVE */

@media(max-width:900px){

.brand-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.brand-card{
height:95px;
}

}






/* VERTICALS */
/* SECTION */

.key-verticals{
padding:100px 0;
background:#f3f6fc;
text-align:center;
}

/* TITLE */

.vertical-title{
font-size:38px;
font-weight:600;
margin-bottom:12px;
letter-spacing:-0.5px;
}

/* SUBTITLE */

.vertical-subtitle{
font-size:16px;
color:#6b7280;
max-width:520px;
margin:auto;
line-height:1.7;
}

/* GRID */

.vertical-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:40px;
margin-top:70px;
}

/* CARD */

.vertical-card{
padding:42px;
border-radius:20px;
transition:all .35s cubic-bezier(.34,1.56,.64,1);
position:relative;
opacity:0;
transform:translateY(40px);
}

/* LIGHT */

.vertical-card.light{
background:white;
border:1px solid #e5e7eb;
}

/* DARK */

.vertical-card.dark{
background:#111827;
color:white;
}

/* ICON */

.vertical-icon{
width:54px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
font-size:26px;
margin-bottom:20px;
border-radius:12px;
background:#f1f5f9;
}

.vertical-card.dark .vertical-icon{
background:rgba(255,255,255,0.1);
}

/* TEXT */

.vertical-card h4{
font-size:18px;
margin-bottom:10px;
}

.vertical-card p{
font-size:15px;
color:#6b7280;
line-height:1.6;
}

.vertical-card.dark p{
color:#d1d5db;
}

/* HOVER */

.vertical-card:hover{
transform:translateY(-8px);
box-shadow:0 25px 45px rgba(0,0,0,.1);
}

/* BUTTON */

.btn-outline{
margin-top:22px;
padding:10px 22px;
border-radius:8px;
border:1px solid #e5e7eb;
background:white;
cursor:pointer;
font-size:14px;
transition:all .3s;
}

.vertical-card.dark .btn-outline{
background:white;
color:black;
}

.btn-outline:hover{
transform:scale(1.04);
box-shadow:0 8px 20px rgba(0,0,0,.1);
}

/* SCROLL ANIMATION */

.vertical-card.show{
opacity:1;
transform:translateY(0);
}





/* TESTIMONIAL */

/* SECTION */

/* ================= WHY SECTION ================= */

.why-section{
background:#ffffff;
padding:120px 0;
}

/* GRID */

.why-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:100px;
align-items:center;
}

/* LEFT */

.why-label{
font-size:12px;
letter-spacing:1.6px;
font-weight:600;
color:#6b7280;
margin-bottom:12px;
display:block;
}

.why-title{
font-size:40px;
font-weight:600;
margin-bottom:18px;
}

.why-intro{
font-size:16px;
color:#6b7280;
margin-bottom:30px;
max-width:420px;
line-height:1.7;
}

/* ITEMS */

.why-item{
margin-bottom:18px;
}

.why-item h4{
font-size:18px;
margin-bottom:6px;
}

.why-item p{
font-size:15px;
color:#6b7280;
}

/* TESTIMONIAL */

.testimonial-box{
background:rgba(232, 237, 255, 0.762);
border-radius:20px;
padding:60px 50px;
position:relative;
box-shadow:0 15px 40px rgba(0,0,0,.05);
overflow:hidden;
}

.quote-icon{
font-size:60px;
opacity:.1;
margin-bottom:20px;
}

/* SLIDER */

.testimonial-track{
display:flex;
transition:transform .6s ease;
}

.testimonial-slide{
min-width:100%;
}

.testimonial-slide p{
font-size:18px;
line-height:1.7;
margin-bottom:30px;
}

/* AUTHOR */

.testimonial-author{
display:flex;
gap:15px;
align-items:center;
}

.accent-line{
width:4px;
height:35px;
background:#2563eb;
border-radius:2px;
}

/* ARROWS */

.why-arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:40px;
height:40px;
border-radius:50%;
border:1px solid #e5e7eb;
background:white;
cursor:pointer;
transition:.3s;
}

.why-arrow.left{left:10px;}
.why-arrow.right{right:10px;}

.why-arrow:hover{
box-shadow:0 6px 15px rgba(0,0,0,.1);
}

/* DOTS */

.why-dots{
text-align:center;
margin-top:25px;
}

.dot{
width:8px;
height:8px;
border-radius:50%;
background:#d1d5db;
display:inline-block;
margin:0 5px;
cursor:pointer;
}

.dot.active{
background:#2563eb;
transform:scale(1.3);
}

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

/* TABLET */

@media(max-width:992px){

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

.why-left{
text-align:center;
}

.why-intro{
margin:auto;
}

}

/* MOBILE */

@media(max-width:600px){

.why-section{
padding:80px 0;
}

.why-title{
font-size:28px;
}

.why-intro{
font-size:14px;
}

.why-item h4{
font-size:16px;
}

.testimonial-box{
padding:40px 25px;
}

.testimonial-slide p{
font-size:15px;
}

.why-arrow{
width:34px;
height:34px;
}

}


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

@media(max-width:992px){
.eco-grid,.why-grid{
grid-template-columns:1fr;
gap:60px;
}
}
/* CTA */
/* CTA SECTION */

.cta-dark{
background-image:url("https://images.unsplash.com/photo-1451187580459-43490279c0fa");
color:white;
padding:50px 0;
text-align:center;
}

.cta-dark h2{
font-size:38px;
margin-bottom:12px;
}

.cta-dark p{
color:#d1d5db;
margin-bottom:28px;
}

.btn-primary{
background:#2563eb;
color:white;
border:none;
padding:12px 26px;
border-radius:8px;
cursor:pointer;
transition:.3s;
}

.btn-primary:hover{
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,.2);
}


/* FOOTER */

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

.site-footer{
background:#0f172a;
color:#cbd5f5;
padding-top:90px;
font-size:14px;
position:relative;
}

/* GRID */

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1.5fr;
gap:60px;
padding-bottom:70px;
}

/* BRAND */

.footer-brand img{
height:50px;
margin-bottom:10px;
}

.footer-brand p{
line-height:1.8;
max-width:320px;
color:#94a3b8;
}

/* SOCIAL */

.footer-social{
margin-top:25px;
display:flex;
gap:12px;
}

.footer-social a{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:#1e293b;
border-radius:10px;
color:white;
font-size:15px;
transition:all .3s ease;
}

.footer-social a:hover{
background:#2563eb;
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(37,99,235,.3);
}

/* LINKS */

.footer-links h4{
font-size:15px;
margin-bottom:18px;
color:white;
letter-spacing:.5px;
}

.footer-links a{
display:block;
margin-bottom:10px;
color:#94a3b8;
text-decoration:none;
transition:.3s;
}

.footer-links a:hover{
color:white;
transform:translateX(6px);
}

/* CONTACT */

.footer-contact p{
margin-bottom:10px;
color:#94a3b8;
}

/* NEWSLETTER */

.footer-newsletter{
margin-top:25px;
}

.footer-newsletter h5{
font-size:14px;
margin-bottom:10px;
color:white;
}

.newsletter-box{
display:flex;
background:#1e293b;
border-radius:10px;
overflow:hidden;
}

.newsletter-box input{
flex:1;
border:none;
background:transparent;
padding:12px;
color:white;
outline:none;
font-size:14px;
}

.newsletter-box button{
background:#34d399;
border:none;
padding:12px 18px;
cursor:pointer;
font-weight:600;
transition:.3s;
}

.newsletter-box button:hover{
background:#10b981;
}

/* DIVIDER */

.footer-divider{
height:1px;
background:linear-gradient(to right, transparent, #1e293b, transparent);
margin-bottom:20px;
}

/* BOTTOM */

.footer-bottom{
padding:25px 0;
}

.footer-bottom-inner{
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-policy a{
color:#94a3b8;
margin-left:20px;
text-decoration:none;
transition:.3s;
}

.footer-policy a:hover{
color:white;
}

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

/* TABLET */

@media(max-width:992px){

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

}

/* MOBILE */

@media(max-width:600px){

.site-footer{
padding-top:70px;
}

/* STACK CLEANLY */

.footer-grid{
grid-template-columns:1fr;
gap:35px;
text-align:center;
}

/* CENTER BRAND */

.footer-brand p{
margin:auto;
}

/* SOCIAL CENTER */

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

/* LINKS CENTER */

.footer-links a{
text-align:center;
}

/* NEWSLETTER STACK */

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

.newsletter-box input{
text-align:center;
}

.newsletter-box button{
width:100%;
}

/* BOTTOM STACK */

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

.footer-policy{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}

}

/* RESPONSIVE */
@media(max-width:992px){
.eco-grid{grid-template-columns:1fr}
.hero h1{font-size:48px}
}
/* @media(max-width:768px){
nav{display:none;flex-direction:column;background:white;
position:absolute;top:80px;right:5%;padding:20px;border-radius:10px}
nav.open{display:block}
nav a{color:var(--text);margin:12px 0}
.hero h1{font-size:36px}
.hero p{font-size:18px}
.section{padding:70px 0}
} */