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

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#f5f7fb;
color:#0d1b2a;
overflow-x:hidden;
line-height:1.7;
}

a{
text-decoration:none;
}

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

.container{
width:90%;
max-width:1280px;
margin:auto;
}

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

.header{
position:sticky;
top:0;
z-index:999;
background:#fff;
box-shadow:0 2px 15px rgba(0,0,0,0.05);
}

.navbar{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;
}

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

.nav-links{
display:flex;
align-items:center;
gap:42px;
}

.nav-links a{
font-size:16px;
font-weight:600;
color:#111827;
position:relative;
transition:0.3s;
}

.nav-links a:hover,
.nav-links a.active{
color:#7ac943;
}

.nav-links a.active::after{
content:'';
position:absolute;
bottom:-10px;
left:0;
width:100%;
height:3px;
background:#7ac943;
border-radius:10px;
}

.nav-btn{
padding:16px 34px;
background:linear-gradient(90deg,#7ac943,#1f6de2);
border-radius:60px;
color:#fff;
font-weight:600;
transition:0.3s;
}

.nav-btn:hover{
transform:translateY(-2px);
}

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

.hero{
padding:90px 0 120px;
background:
linear-gradient(rgba(0,27,71,0.88),
rgba(0,27,71,0.88)),
url('../images/hero-bg.jpg');
background-size:cover;
background-position:center;
overflow:hidden;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

/* LEFT */

.hero-tag{
display:inline-block;
padding:14px 28px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
border-radius:50px;
color:#7ac943;
font-weight:600;
margin-bottom:28px;
font-size:15px;
}

.hero-left h1{
font-size:88px;
line-height:0.95;
font-weight:800;
color:#fff;
margin-bottom:16px;
}

.hero-left h1 span{
color:#7ac943;
}

.hero-left h2{
font-size:66px;
line-height:1.05;
font-weight:700;
color:#fff;
margin-bottom:30px;
}

.hero-left p{
font-size:20px;
line-height:1.8;
color:#d7deea;
max-width:650px;
margin-bottom:42px;
}

/* BUTTONS */

.hero-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:15px;
}

.btn-primary{
padding:18px 38px;
border-radius:60px;
background:linear-gradient(90deg,#7ac943,#1f6de2);
color:#fff;
font-weight:600;
font-size:16px;
transition:0.3s;
display:inline-flex;
align-items:center;
justify-content:center;
}

.btn-primary:hover{
transform:translateY(-3px);
}

.btn-outline{
padding:18px 38px;
border-radius:60px;
border:2px solid rgba(255,255,255,0.25);
color:#fff;
font-weight:600;
font-size:16px;
transition:0.3s;
display:inline-flex;
align-items:center;
justify-content:center;
}

.btn-outline:hover{
background:#fff;
color:#0b2f6d;
}

/* RIGHT */

.hero-right{
position:relative;
display:flex;
justify-content:center;
align-items:center;
}

/* VIDEO CARD */

.video-card{
width:100%;
max-width:620px;
border-radius:34px;
overflow:hidden;
box-shadow:0 25px 70px rgba(0,0,0,0.25);
position:relative;
z-index:2;
background:#000;
}

.video-card video{
width:100%;
height:680px;
object-fit:cover;
display:block;
}

/* FLOATING CARDS */

.floating-card{
position:absolute;
display:flex;
align-items:center;
gap:18px;
background:#fff;
padding:18px 24px;
border-radius:24px;
box-shadow:0 15px 40px rgba(0,0,0,0.12);
z-index:5;
min-width:290px;
}

.floating-card i{
font-size:26px;
color:#1f6de2;
background:#eef4ff;
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}

.floating-card h4{
font-size:22px;
color:#0b2f6d;
margin-bottom:4px;
font-weight:700;
}

.floating-card span{
font-size:15px;
color:#6b7280;
}

/* FLOATING POSITION */

.top-card{
top:-35px;
left:-40px;
}

.bottom-card{
bottom:-35px;
right:-40px;
}

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

.about-section{
padding:120px 0;
background:#fff;
}

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.about-image img{
border-radius:28px;
height:560px;
object-fit:cover;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.about-content span{
font-size:15px;
letter-spacing:4px;
font-weight:700;
color:#7ac943;
}

.about-content h2{
font-size:54px;
line-height:1.15;
margin:18px 0 24px;
color:#0b2f6d;
}

.about-content p{
font-size:18px;
color:#5b6475;
margin-bottom:34px;
}

.about-points{
display:flex;
flex-direction:column;
gap:18px;
}

.about-points div{
display:flex;
align-items:center;
gap:12px;
font-weight:600;
font-size:17px;
color:#111827;
}

.about-points i{
color:#7ac943;
}

/* =========================
SECTION TITLE
========================= */

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

.section-title span{
font-size:15px;
letter-spacing:4px;
font-weight:700;
color:#7ac943;
}

.section-title h2{
font-size:56px;
line-height:1.1;
color:#0b2f6d;
margin-top:16px;
}

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

.values-section{
padding:0 0 120px;
background:#fff;
}

.values-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
margin-bottom:40px;
}

.value-card{
background:#f7f9fd;
padding:42px 24px;
border-radius:24px;
text-align:center;
font-size:24px;
font-weight:700;
color:#0b2f6d;
transition:0.3s;
box-shadow:0 10px 30px rgba(0,0,0,0.04);
border-top:5px solid #7ac943;
}

.value-card:hover{
transform:translateY(-6px);
}

.values-text{
text-align:center;
font-size:26px;
line-height:1.8;
max-width:1000px;
margin:auto;
color:#222;
}

.values-text span{
color:#7ac943;
font-weight:700;
}

/* =========================
SOLUTIONS
========================= */

.solutions{
padding:120px 0;
background:#f5f7fb;
}

.solutions-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:34px;
}

.solution-card{
background:#fff;
border-radius:28px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,0.06);
transition:0.3s;
}

.solution-card:hover{
transform:translateY(-8px);
}

.solution-card img{
height:260px;
object-fit:cover;
}

.solution-card h3{
font-size:32px;
line-height:1.2;
padding:28px 28px 12px;
color:#0b2f6d;
}

.solution-card p{
padding:0 28px 24px;
color:#5b6475;
font-size:17px;
}

.solution-buttons{
display:flex;
gap:14px;
padding:0 28px 30px;
flex-wrap:wrap;
margin-top:10px;
}

.solution-buttons a{
padding:14px 24px;
border-radius:50px;
font-weight:600;
font-size:15px;
display:inline-flex;
align-items:center;
justify-content:center;
}

.solution-buttons a:first-child{
background:#0b2f6d;
color:#fff;
}

.solution-buttons a:last-child{
background:#eef3fb;
color:#0b2f6d;
}

/* =========================
WHY SKYETHOS
========================= */

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

.why-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:24px;
}

.why-card{
background:#f7f9fd;
padding:40px 24px;
border-radius:24px;
text-align:center;
transition:0.3s;
}

.why-card:hover{
transform:translateY(-6px);
}

.why-card i{
font-size:36px;
color:#1f6de2;
margin-bottom:20px;
}

.why-card h3{
font-size:22px;
line-height:1.3;
color:#0b2f6d;
}

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

.industries-section{
padding:110px 0;
background:#f5f7fb;
}

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

/* CARD */

.industry-card{
position:relative;
height:300px;
border-radius:24px;
overflow:hidden;
cursor:pointer;
background:#dfe6f2;
box-shadow:0 12px 35px rgba(0,0,0,0.08);
transition:0.4s ease;
}

.industry-card:hover{
transform:translateY(-10px);
box-shadow:0 22px 45px rgba(0,0,0,0.12);
}

/* IMAGE */

.industry-card img{
width:100%;
height:100%;
object-fit:cover;
transition:0.5s ease;
display:block;
}

.industry-card:hover img{
transform:scale(1.08);
}

/* OVERLAY */

.industry-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(3,23,66,0.92) 8%,
rgba(3,23,66,0.55) 45%,
rgba(3,23,66,0.10) 100%
);
display:flex;
align-items:flex-end;
justify-content:flex-start;
padding:30px;
transition:0.4s ease;
}

.industry-card:hover .industry-overlay{
background:linear-gradient(
to top,
rgba(32,84,184,0.92),
rgba(114,198,63,0.25)
);
}

/* TITLE */

.industry-overlay h3{
font-size:30px;
font-weight:650;
color:#fff;
line-height:1.2;
max-width:90%;
letter-spacing:-0.5px;
}

/* RESPONSIVE */

@media(max-width:1200px){

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

}

@media(max-width:768px){

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

.industry-card{
height:260px;
}

.industry-overlay h3{
font-size:26px;
}

}

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

@media(max-width:1200px){

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

}

@media(max-width:768px){

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

.industry-card{
height:300px;
}

}

/* =========================
SMART GLASS
========================= */

.smart-section{
padding:120px 0;
background:#f5f7fb;
}

.smart-wrapper{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:60px;
align-items:center;
background:#fff;
padding:50px;
border-radius:34px;
box-shadow:0 15px 50px rgba(0,0,0,0.06);
overflow:hidden;
}

/* VIDEO */

.smart-video{
border-radius:28px;
overflow:hidden;
background:#000;
height:100%;
}

.smart-video video{
width:100%;
height:100%;
min-height:520px;
object-fit:cover;
display:block;
}

/* CONTENT */

.smart-content span{
font-size:14px;
letter-spacing:4px;
font-weight:700;
color:#7ac943;
}

.smart-content h2{
font-size:52px;
line-height:1.15;
margin:18px 0 22px;
color:#0b2f6d;
font-weight:700;
}

.smart-content p{
font-size:18px;
line-height:1.8;
color:#5b6475;
margin-bottom:34px;
}

/* FEATURES */

.smart-features{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin-bottom:40px;
}

.feature-box{
background:#f5f7fb;
padding:18px 20px;
border-radius:16px;
font-weight:600;
font-size:16px;
color:#0b2f6d;
border-left:5px solid #7ac943;
}

/* BUTTONS */

.smart-buttons{
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:10px;
}

.btn-dark{
padding:18px 34px;
border-radius:60px;
background:#0b2f6d;
color:#fff;
font-weight:600;
font-size:16px;
transition:0.3s;
display:inline-flex;
align-items:center;
justify-content:center;
}

.btn-dark:hover{
transform:translateY(-3px);
}

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

@media(max-width:1100px){

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

.smart-video video{
min-height:420px;
}

}

@media(max-width:768px){

.smart-wrapper{
padding:28px;
gap:40px;
}

.smart-content h2{
font-size:38px;
}

.smart-features{
grid-template-columns:1fr;
}

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

.smart-video video{
min-height:300px;
}

.btn-dark,
.btn-primary{
width:100%;
text-align:center;
}

}

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

.cta-section{
padding:110px 0;
background:#f5f7fb;
}

.cta-box{
background:#fff;
padding:80px;
border-radius:34px;
text-align:center;
box-shadow:0 15px 50px rgba(0,0,0,0.05);
max-width:1100px;
margin:auto;
}

.cta-box h2{
font-size:56px;
line-height:1.15;
color:#0b2f6d;
margin-bottom:24px;
font-weight:700;
}

.cta-box p{
font-size:20px;
line-height:1.8;
color:#5b6475;
max-width:760px;
margin:0 auto 42px;
}

.cta-buttons{
display:flex;
justify-content:center;
gap:22px;
flex-wrap:wrap;
}

.cta-buttons a{
display:inline-flex;
align-items:center;
gap:12px;
}

/* OUTLINE BUTTON */

.btn-outline-dark{
padding:18px 36px;
border-radius:60px;
border:2px solid #d8e2f0;
color:#0b2f6d;
font-weight:600;
font-size:16px;
background:#fff;
transition:0.3s;
}

.btn-outline-dark:hover{
background:#0b2f6d;
color:#fff;
border-color:#0b2f6d;
}

/* RESPONSIVE */

@media(max-width:768px){

.cta-box{
padding:42px 28px;
}

.cta-box h2{
font-size:38px;
}

.cta-box p{
font-size:17px;
}

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

.btn-primary,
.btn-outline-dark{
width:100%;
justify-content:center;
}

}

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

.footer{
background:#071a3a;
padding-top:90px;
}

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

.footer-logo{
height:72px;
width:auto;
margin-bottom:20px;
}

.footer p{
color:#cfd8e7;
max-width:320px;
}

.footer h4{
font-size:22px;
color:#fff;
margin-bottom:22px;
}

.footer ul{
list-style:none;
}

.footer ul li{
margin-bottom:14px;
}

.footer ul li a{
color:#cfd8e7;
transition:0.3s;
}

.footer ul li a:hover{
color:#7ac943;
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.08);
padding:24px 0;
text-align:center;
color:#cfd8e7;
font-size:15px;
}

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

@media(max-width:1100px){

.hero-grid,
.about-grid,
.smart-grid{
grid-template-columns:1fr;
}

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

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

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

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

.hero-left h2{
font-size:52px;
}

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

.top-card,
.bottom-card{
position:relative;
top:auto;
left:auto;
right:auto;
bottom:auto;
margin:20px 0;
}

.video-card video{
height:500px;
}

}

@media(max-width:768px){

.nav-links{
display:none;
}

.hero{
padding:70px 0 90px;
}

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

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

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

.about-content h2,
.smart-content h2,
.section-title h2,
.cta-section h2{
font-size:38px;
}

.values-grid,
.solutions-grid,
.why-grid,
.smart-features,
.footer-grid{
grid-template-columns:1fr;
}

.video-card video{
height:360px;
}

.smart-video video{
height:320px;
}

.smart-grid{
padding:28px;
}

.container{
width:92%;
}

.hero-buttons{
flex-direction:column;
align-items:flex-start;
}

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

.floating-card{
min-width:auto;
width:100%;
}

}

/* FOOTER BRAND */

.footer-brand{
font-size:42px;
font-weight:800;
line-height:1;
color:#fff;
margin-bottom:18px;
letter-spacing:-1px;
}

.footer-tagline{
font-size:28px;
font-weight:600;
color:#7ac943;
margin-bottom:20px;
line-height:1.3;
}

.footer-description{
font-size:17px;
line-height:1.9;
color:#cfd8e7;
max-width:360px;
}

/* =========================================
BUSINESS & TECHNOLOGY PAGE
APPEND THIS AT BOTTOM OF style.css
========================================= */

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

.tech-hero{
padding:100px 0 130px;
background:
linear-gradient(rgba(0,27,71,0.92),
rgba(0,27,71,0.92)),
url('../images/hero-bg.jpg');
background-size:cover;
background-position:center;
overflow:hidden;
}

.tech-hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.tech-tag{
display:inline-block;
padding:14px 28px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
border-radius:50px;
color:#7ac943;
font-weight:600;
margin-bottom:28px;
font-size:15px;
}

.tech-hero-content h1{
font-size:78px;
line-height:1;
font-weight:800;
color:#fff;
margin-bottom:28px;
}

.tech-hero-content p{
font-size:20px;
line-height:1.9;
color:#d7deea;
max-width:650px;
margin-bottom:42px;
}

/* HERO IMAGE */

.tech-hero-image{
position:relative;
}

.tech-hero-image img{
width:100%;
height:680px;
object-fit:cover;
border-radius:34px;
box-shadow:0 25px 70px rgba(0,0,0,0.25);
}

/* FLOATING CARDS */

.tech-floating-card{
position:absolute;
display:flex;
align-items:center;
gap:18px;
background:#fff;
padding:18px 24px;
border-radius:24px;
box-shadow:0 15px 40px rgba(0,0,0,0.12);
z-index:5;
min-width:300px;
}

.tech-floating-card i{
font-size:26px;
color:#1f6de2;
background:#eef4ff;
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
}

.tech-floating-card h4{
font-size:22px;
color:#0b2f6d;
margin-bottom:4px;
font-weight:700;
}

.tech-floating-card span{
font-size:15px;
color:#6b7280;
}

.top-tech-card{
top:-35px;
left:-40px;
}

.bottom-tech-card{
bottom:-35px;
right:-40px;
}

/* =========================
ENTERPRISE SOLUTIONS
========================= */

.enterprise-section{
padding:120px 0;
background:#f5f7fb;
}

.enterprise-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:34px;
margin-top:60px;
}

.enterprise-card{
background:#fff;
border-radius:30px;
overflow:hidden;
box-shadow:0 15px 45px rgba(0,0,0,0.06);
transition:0.35s;
}

.enterprise-card:hover{
transform:translateY(-8px);
}

.enterprise-card img{
width:100%;
height:280px;
object-fit:cover;
display:block;
}

.enterprise-content{
padding:34px;
}

.enterprise-icon{
width:72px;
height:72px;
border-radius:20px;
background:#eef4ff;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:24px;
}

.enterprise-icon i{
font-size:30px;
color:#1f6de2;
}

.enterprise-content h3{
font-size:34px;
line-height:1.2;
color:#0b2f6d;
margin-bottom:18px;
font-weight:700;
}

.enterprise-content p{
font-size:17px;
line-height:1.8;
color:#5b6475;
margin-bottom:28px;
}

.enterprise-content a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 30px;
border-radius:60px;
background:#0b2f6d;
color:#fff;
font-weight:600;
transition:0.3s;
}

.enterprise-content a:hover{
transform:translateY(-3px);
}

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

.tech-video-section{
padding:120px 0;
background:#fff;
}

.tech-video-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.tech-video{
border-radius:34px;
overflow:hidden;
background:#000;
box-shadow:0 20px 60px rgba(0,0,0,0.12);
}

.tech-video video{
width:100%;
height:620px;
object-fit:cover;
display:block;
}

.tech-video-content span{
font-size:15px;
letter-spacing:4px;
font-weight:700;
color:#7ac943;
}

.tech-video-content h2{
font-size:56px;
line-height:1.1;
margin:20px 0 24px;
color:#0b2f6d;
font-weight:700;
}

.tech-video-content p{
font-size:18px;
line-height:1.9;
color:#5b6475;
margin-bottom:34px;
}

.tech-points{
display:flex;
flex-direction:column;
gap:18px;
margin-bottom:40px;
}

.tech-points div{
display:flex;
align-items:center;
gap:12px;
font-size:17px;
font-weight:600;
color:#0b2f6d;
}

.tech-points i{
color:#7ac943;
}

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

.tech-metrics{
padding:120px 0;
background:#071a3a;
}

.metrics-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:26px;
}

.metric-card{
background:rgba(255,255,255,0.05);
padding:42px 28px;
border-radius:28px;
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
transition:0.35s;
}

.metric-card:hover{
transform:translateY(-6px);
}

.metric-card h3{
font-size:34px;
color:#7ac943;
margin-bottom:18px;
font-weight:700;
}

.metric-card p{
font-size:16px;
line-height:1.8;
color:#d7deea;
}

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

@media(max-width:1200px){

.tech-hero-grid,
.tech-video-grid{
grid-template-columns:1fr;
}

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

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

.top-tech-card,
.bottom-tech-card{
position:relative;
top:auto;
left:auto;
right:auto;
bottom:auto;
margin-top:20px;
}

.tech-hero-image img{
height:520px;
}

.tech-video video{
height:480px;
}

}

@media(max-width:768px){

.tech-hero{
padding:80px 0 100px;
}

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

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

.tech-video-content h2{
font-size:38px;
}

.enterprise-content h3{
font-size:28px;
}

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

.tech-hero-image img{
height:360px;
}

.tech-video video{
height:320px;
}

.tech-floating-card{
min-width:auto;
width:100%;
}

}

/* =========================================
SMART GLASS PAGE
ADD THIS AT BOTTOM OF style.css
========================================= */

/* =========================
SMART GLASS HERO
========================= */

.glass-hero{
position:relative;
height:100vh;
min-height:850px;
overflow:hidden;
display:flex;
align-items:center;
}

.glass-hero video{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:1;
}

.glass-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
rgba(0,27,71,0.72),
rgba(0,27,71,0.78)
);
z-index:2;
}

.glass-hero-content{
position:relative;
z-index:5;
max-width:760px;
}

.glass-tag{
display:inline-block;
padding:14px 28px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(12px);
border-radius:50px;
color:#7ac943;
font-weight:600;
margin-bottom:30px;
font-size:15px;
}

.glass-hero-content h1{
font-size:88px;
line-height:0.95;
font-weight:800;
color:#fff;
margin-bottom:28px;
}

.glass-hero-content p{
font-size:22px;
line-height:1.9;
color:#d7deea;
max-width:680px;
margin-bottom:44px;
}

/* GLASS BUTTON */

.btn-glass-outline{
padding:18px 36px;
border-radius:60px;
border:2px solid rgba(255,255,255,0.22);
color:#fff;
font-weight:600;
font-size:16px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
transition:0.3s;
display:inline-flex;
align-items:center;
justify-content:center;
}

.btn-glass-outline:hover{
background:#fff;
color:#0b2f6d;
}

/* =========================
ABOUT SMART GLASS
========================= */

.glass-about{
padding:130px 0;
background:#fff;
}

.glass-about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
}

.glass-about-image img{
width:100%;
height:640px;
object-fit:cover;
border-radius:34px;
box-shadow:0 20px 60px rgba(0,0,0,0.08);
}

.glass-about-content span{
font-size:15px;
letter-spacing:4px;
font-weight:700;
color:#7ac943;
}

.glass-about-content h2{
font-size:58px;
line-height:1.1;
margin:22px 0 24px;
color:#0b2f6d;
font-weight:700;
}

.glass-about-content p{
font-size:19px;
line-height:1.9;
color:#5b6475;
margin-bottom:36px;
}

.glass-features{
display:flex;
flex-direction:column;
gap:20px;
}

.glass-features div{
display:flex;
align-items:center;
gap:14px;
font-size:18px;
font-weight:600;
color:#0b2f6d;
}

.glass-features i{
color:#7ac943;
}

/* =========================
APPLICATIONS
========================= */

.glass-applications{
padding:130px 0;
background:#f5f7fb;
}

.glass-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:34px;
margin-top:70px;
}

.glass-card{
background:#fff;
border-radius:30px;
overflow:hidden;
box-shadow:0 15px 45px rgba(0,0,0,0.06);
transition:0.35s;
}

.glass-card:hover{
transform:translateY(-8px);
}

.glass-card img{
width:100%;
height:340px;
object-fit:cover;
transition:0.4s;
}

.glass-card:hover img{
transform:scale(1.04);
}

.glass-card-content{
padding:34px;
}

.glass-card-content h3{
font-size:34px;
line-height:1.2;
color:#0b2f6d;
margin-bottom:18px;
font-weight:700;
}

.glass-card-content p{
font-size:17px;
line-height:1.8;
color:#5b6475;
}

/* =========================
BEFORE AFTER
========================= */

.before-after-section{
padding:130px 0;
background:#071a3a;
}

.before-after-section .section-title h2{
color:#fff;
}

.before-after-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:36px;
margin-top:70px;
}

.before-after-card{
position:relative;
border-radius:34px;
overflow:hidden;
height:620px;
box-shadow:0 20px 60px rgba(0,0,0,0.2);
}

.before-after-card img{
width:100%;
height:100%;
object-fit:cover;
}

.before-after-overlay{
position:absolute;
inset:0;
background:linear-gradient(
to top,
rgba(0,0,0,0.72),
rgba(0,0,0,0.08)
);
display:flex;
align-items:flex-end;
justify-content:center;
padding-bottom:40px;
}

.before-after-overlay h3{
font-size:42px;
color:#fff;
font-weight:700;
}

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

.glass-video-section{
padding:130px 0;
background:#fff;
}

.glass-video-wrapper{
position:relative;
border-radius:38px;
overflow:hidden;
height:760px;
box-shadow:0 25px 70px rgba(0,0,0,0.12);
}

.glass-video-wrapper video{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

.glass-video-content{
position:absolute;
bottom:60px;
left:60px;
max-width:620px;
background:rgba(255,255,255,0.08);
backdrop-filter:blur(14px);
padding:40px;
border-radius:30px;
border:1px solid rgba(255,255,255,0.12);
}

.glass-video-content h2{
font-size:54px;
line-height:1.1;
color:#fff;
margin-bottom:20px;
font-weight:700;
}

.glass-video-content p{
font-size:18px;
line-height:1.8;
color:#d7deea;
}

/* =========================
BENEFITS
========================= */

.glass-benefits{
padding:130px 0;
background:#f5f7fb;
}

.benefits-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:24px;
margin-top:70px;
}

.benefit-card{
background:#fff;
padding:50px 26px;
border-radius:28px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,0.05);
transition:0.35s;
border-top:6px solid #7ac943;
}

.benefit-card:hover{
transform:translateY(-8px);
}

.benefit-card h3{
font-size:28px;
line-height:1.3;
color:#0b2f6d;
font-weight:700;
}

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

.glass-cta{
padding:130px 0;
background:#071a3a;
}

.glass-cta-box{
max-width:1100px;
margin:auto;
text-align:center;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(14px);
padding:90px 70px;
border-radius:40px;
}

.glass-cta-box h2{
font-size:62px;
line-height:1.1;
color:#fff;
margin-bottom:24px;
font-weight:700;
}

.glass-cta-box p{
font-size:20px;
line-height:1.9;
color:#d7deea;
max-width:760px;
margin:0 auto 46px;
}

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

@media(max-width:1200px){

.glass-about-grid,
.before-after-grid{
grid-template-columns:1fr;
}

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

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

.glass-hero-content h1{
font-size:68px;
}

.glass-about-content h2,
.glass-video-content h2{
font-size:46px;
}

.glass-video-wrapper{
height:620px;
}

}

@media(max-width:768px){

.glass-hero{
min-height:720px;
padding:120px 0;
}

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

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

.glass-about-content h2,
.glass-video-content h2,
.glass-cta-box h2{
font-size:38px;
}

.glass-about-image img,
.before-after-card{
height:380px;
}

.glass-video-wrapper{
height:420px;
}

.glass-video-content{
left:20px;
right:20px;
bottom:20px;
padding:24px;
}

.glass-video-content p{
font-size:15px;
}

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

.glass-cta-box{
padding:50px 28px;
}

.glass-cta-box p{
font-size:17px;
}

}

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

.whatsapp-float{
position:fixed;
right:24px;
bottom:24px;
display:flex;
align-items:center;
gap:14px;
background:#25D366;
padding:14px 22px 14px 14px;
border-radius:80px;
box-shadow:0 18px 45px rgba(0,0,0,0.22);
z-index:9999;
transition:0.35s;
animation:floatWhatsapp 3s ease-in-out infinite;
}

.whatsapp-float:hover{
transform:translateY(-6px) scale(1.03);
background:#1ebe5d;
}

/* ICON */

.whatsapp-icon{
width:54px;
height:54px;
border-radius:50%;
background:#fff;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}

.whatsapp-icon i{
font-size:30px;
color:#25D366;
}

/* TEXT */

.whatsapp-text{
display:flex;
flex-direction:column;
line-height:1.2;
}

.whatsapp-text span{
font-size:13px;
font-weight:500;
color:#eafff2;
}

.whatsapp-text strong{
font-size:16px;
font-weight:700;
color:#fff;
}

/* FLOATING EFFECT */

@keyframes floatWhatsapp{

0%{
transform:translateY(0);
}

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

100%{
transform:translateY(0);
}

}

/* MOBILE */

@media(max-width:768px){

.whatsapp-float{
right:16px;
bottom:16px;
padding:12px 18px 12px 12px;
}

.whatsapp-icon{
width:48px;
height:48px;
}

.whatsapp-icon i{
font-size:26px;
}

.whatsapp-text strong{
font-size:15px;
}

.whatsapp-text span{
font-size:12px;
}

}

/* =========================================
LEAD POPUP
========================================= */

.lead-popup-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,0.6);
backdrop-filter:blur(8px);
display:flex;
align-items:center;
justify-content:center;
z-index:99999;
opacity:0;
visibility:hidden;
transition:0.4s;
padding:20px;
}

.lead-popup-overlay.active{
opacity:1;
visibility:visible;
}

.lead-popup-box{
background:#fff;
width:100%;
max-width:620px;
padding:50px;
border-radius:34px;
position:relative;
box-shadow:0 25px 70px rgba(0,0,0,0.25);
animation:popupUp 0.45s ease;
}

@keyframes popupUp{

from{
transform:translateY(40px);
opacity:0;
}

to{
transform:translateY(0);
opacity:1;
}

}

/* CLOSE */

.popup-close{
position:absolute;
top:22px;
right:22px;
width:44px;
height:44px;
border:none;
border-radius:50%;
background:#f3f5f9;
cursor:pointer;
font-size:18px;
color:#0b2f6d;
transition:0.3s;
}

.popup-close:hover{
background:#0b2f6d;
color:#fff;
}

/* BADGE */

.popup-badge{
display:inline-block;
padding:12px 24px;
background:#eef4ff;
border-radius:50px;
font-size:14px;
font-weight:600;
color:#1f6de2;
margin-bottom:24px;
}

/* TITLES */

.lead-popup-box h2{
font-size:42px;
line-height:1.15;
color:#0b2f6d;
margin-bottom:18px;
font-weight:700;
}

.lead-popup-box p{
font-size:17px;
line-height:1.8;
color:#5b6475;
margin-bottom:34px;
}

/* SOLUTIONS */

.popup-solutions{
display:flex;
flex-wrap:wrap;
gap:14px;
margin-bottom:28px;
}

.popup-solutions button{
padding:16px 24px;
border:none;
border-radius:60px;
background:#f5f7fb;
color:#0b2f6d;
font-weight:600;
cursor:pointer;
transition:0.3s;
font-size:15px;
}

.popup-solutions button:hover{
background:#0b2f6d;
color:#fff;
}

/* DIRECT BUTTON */

.popup-direct-btn{
width:100%;
padding:18px;
border:none;
border-radius:60px;
background:linear-gradient(90deg,#7ac943,#1f6de2);
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.popup-direct-btn:hover{
transform:translateY(-3px);
}

/* FORM */

.popup-form{
margin-top:20px;
}

.popup-form-group{
margin-bottom:20px;
}

.popup-form input,
.popup-form textarea{
width:100%;
padding:18px 22px;
border-radius:18px;
border:1px solid #dce3ee;
font-size:16px;
font-family:'Poppins',sans-serif;
outline:none;
transition:0.3s;
background:#fff;
}

.popup-form input:focus,
.popup-form textarea:focus{
border-color:#1f6de2;
}

.popup-submit{
width:100%;
margin-top:10px;
}

/* MOBILE */

@media(max-width:768px){

.lead-popup-box{
padding:34px 24px;
}

.lead-popup-box h2{
font-size:30px;
}

.popup-solutions{
flex-direction:column;
}

.popup-solutions button{
width:100%;
}

}

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

.contact-hero{
padding:140px 0 90px;
background:#f5f7fb;
}

.contact-hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.contact-hero-content h1{
font-size:68px;
line-height:1.05;
color:#0b2f6d;
margin:24px 0;
font-weight:800;
}

.contact-hero-content p{
font-size:18px;
line-height:1.9;
color:#5b6475;
max-width:620px;
}

.contact-highlights{
display:flex;
flex-direction:column;
gap:16px;
margin-top:32px;
}

.contact-highlights div{
display:flex;
align-items:center;
gap:12px;
font-size:16px;
font-weight:600;
color:#0b2f6d;
}

.contact-highlights i{
color:#7ac943;
}

.contact-hero-image img{
width:100%;
border-radius:32px;
object-fit:cover;
box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

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

.contact-section{
padding:100px 0;
background:#fff;
}

.contact-grid{
display:grid;
grid-template-columns:420px 1fr;
gap:50px;
align-items:start;
}

.contact-info-card,
.contact-form-card{
background:#fff;
padding:50px;
border-radius:32px;
box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

.contact-info-card h2,
.contact-form-card h2{
font-size:42px;
line-height:1.1;
color:#0b2f6d;
margin:18px 0;
font-weight:800;
}

.contact-info-card p{
font-size:16px;
line-height:1.8;
color:#5b6475;
}

.contact-info-item{
display:flex;
gap:18px;
margin-top:34px;
}

.contact-icon{
width:62px;
height:62px;
border-radius:18px;
background:#eef4ff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
color:#1f6de2;
flex-shrink:0;
}

.contact-info-item h4{
font-size:18px;
color:#0b2f6d;
margin-bottom:4px;
}

.contact-whatsapp{
margin-top:40px;
display:inline-flex;
align-items:center;
gap:14px;
padding:18px 28px;
border-radius:60px;
background:linear-gradient(90deg,#25D366,#0aa84f);
color:#fff;
font-weight:600;
text-decoration:none;
transition:0.3s;
}

.contact-whatsapp:hover{
transform:translateY(-4px);
}

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

.contact-form{
margin-top:24px;
}

.contact-form-group{
margin-bottom:22px;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
width:100%;
padding:18px 22px;
border-radius:18px;
border:1px solid #dce3ee;
font-size:16px;
font-family:'Poppins',sans-serif;
outline:none;
transition:0.3s;
background:#fff;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
border-color:#1f6de2;
}

.contact-submit-btn{
width:100%;
margin-top:10px;
}

/* =========================================
SOLUTION LINKS
========================================= */

.solution-links-section{
padding:100px 0;
background:#f5f7fb;
}

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

.solution-link-card{
background:#fff;
border-radius:28px;
padding:40px 30px;
text-align:center;
text-decoration:none;
transition:0.4s;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
border-top:5px solid #7ac943;
}

.solution-link-card:hover{
transform:translateY(-8px);
}

.solution-link-card h3{
font-size:24px;
font-weight:700;
color:#0b2f6d;
}

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

.contact-cta{
padding:100px 0;
background:#071d49;
}

.contact-cta-box{
text-align:center;
max-width:760px;
margin:auto;
}

.contact-cta-box h2{
font-size:54px;
line-height:1.1;
color:#fff;
margin-bottom:22px;
font-weight:800;
}

.contact-cta-box p{
font-size:18px;
line-height:1.9;
color:rgba(255,255,255,0.75);
margin-bottom:40px;
}

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

@media(max-width:991px){

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

.solution-links-grid{
grid-template-columns:1fr 1fr;
}

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

.contact-info-card h2,
.contact-form-card h2,
.contact-cta-box h2{
font-size:36px;
}

}

@media(max-width:768px){

.contact-hero{
padding:120px 0 70px;
}

.contact-info-card,
.contact-form-card{
padding:36px 28px;
}

.solution-links-grid{
grid-template-columns:1fr;
}

.contact-hero-content h1{
font-size:40px;
}

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

}

/* =========================================
FLOATING SOLUTIONS NAV
========================================= */

.floating-solutions{
position:fixed;
right:0;
top:50%;
transform:translateY(-50%);
z-index:9999;
display:flex;
flex-direction:column;
gap:14px;
}

/* ITEM */

.float-solution-item{
position:relative;
width:64px;
height:64px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(7,29,73,0.96);
backdrop-filter:blur(12px);
border-radius:18px 0 0 18px;
text-decoration:none;
transition:0.35s;
box-shadow:0 10px 25px rgba(0,0,0,0.18);
overflow:visible;
}

/* SHORT TEXT */

.float-short{
font-size:15px;
font-weight:700;
color:#fff;
letter-spacing:1px;
}

/* LABEL */

.float-solution-item span{
position:absolute;
right:78px;
top:50%;
transform:translateY(-50%);
white-space:nowrap;
background:#fff;
padding:14px 20px;
border-radius:14px;
font-size:14px;
font-weight:600;
color:#0b2f6d;
opacity:0;
visibility:hidden;
transition:0.3s;
box-shadow:0 10px 25px rgba(0,0,0,0.14);
min-width:max-content;
}

/* HOVER */

.float-solution-item:hover{
background:linear-gradient(180deg,#7ac943,#1f6de2);
transform:translateX(-4px);
}

.float-solution-item:hover span{
opacity:1;
visibility:visible;
}

/* ACTIVE */

.float-solution-item.active{
background:linear-gradient(180deg,#7ac943,#1f6de2);
}

/* MOBILE */

@media(max-width:768px){

.floating-solutions{
right:14px;
bottom:92px;
top:auto;
transform:none;
gap:10px;
}

.float-solution-item{
width:52px;
height:52px;
border-radius:50%;
}

.float-short{
font-size:12px;
}

.float-solution-item span{
display:none;
}

}

.hygiene-hero{
    padding:140px 0 100px;
    background:
    linear-gradient(rgba(2,25,72,.85), rgba(2,25,72,.85)),
    url('images/hygiene/hygiene-bg.jpg');
    background-size:cover;
    background-position:center;
    color:#fff;
}

.category-grid,
.products-grid,
.industry-grid{
    display:grid;
    gap:30px;
}

.category-grid{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

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

.category-card,
.product-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.category-card{
    padding:30px;
}

.category-card h3{
    margin-bottom:20px;
    color:#07245f;
}

.category-card ul{
    padding-left:18px;
}

.category-card li{
    margin-bottom:12px;
    color:#555;
}

.product-card img{
    width:100%;
    height:240px;
    object-fit:cover;
}

.product-content{
    padding:25px;
}

.product-content span{
    color:#66c43d;
    font-weight:700;
}

.product-content h3{
    margin:10px 0;
    color:#07245f;
}

.product-content button{
    margin-top:20px;
    background:linear-gradient(90deg,#66c43d,#1d72f3);
    color:#fff;
    border:none;
    padding:12px 22px;
    border-radius:40px;
    cursor:pointer;
}

.industry-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    margin-top:40px;
}

.industry-grid div{
    background:#07245f;
    color:#fff;
    padding:25px;
    border-radius:14px;
    text-align:center;
    font-weight:600;
}

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

.why-grid img{
    width:100%;
    border-radius:20px;
}

.why-list{
    margin-top:25px;
}

.why-list li{
    margin-bottom:16px;
    font-size:17px;
}

.final-cta{
    padding:80px 0;
    text-align:center;
    background:#07245f;
    color:#fff;
}

.final-cta button{
    margin-top:25px;
    background:linear-gradient(90deg,#66c43d,#1d72f3);
    border:none;
    color:#fff;
    padding:15px 34px;
    border-radius:50px;
    cursor:pointer;
}

@media(max-width:991px){

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

}

/* =========================================
TYPOGRAPHY REFINEMENT
========================================= */

body{
font-weight:400;
line-height:1.7;
color:#24324a;
}

h1{
font-weight:700;
letter-spacing:-1px;
}

h2{
font-weight:650;
letter-spacing:-0.5px;
}

h3{
font-weight:600;
}

p{
font-size:16px;
color:#5d6b82;
line-height:1.8;
}

.section-heading span{
font-size:13px;
letter-spacing:2px;
font-weight:600;
color:#73c83e;
text-transform:uppercase;
}

.section-heading h2{
margin-top:8px;
margin-bottom:28px;
font-size:42px;
line-height:1.2;
color:#07245f;
}

.products-grid{
margin-top:50px;
}

.category-grid{
margin-top:50px;
}

.industry-grid{
margin-top:50px;
}

@media(max-width:768px){

.section-heading h2{
font-size:32px;
}

}

/* =========================================
PRODUCT CARDS CLEANUP
========================================= */

.product-card{
background:#fff;
border-radius:22px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.06);
transition:0.35s ease;
border:1px solid rgba(0,0,0,.04);
}

.product-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,.10);
}

.product-card img{
width:100%;
height:250px;
object-fit:cover;
display:block;
background:#eef2f7;
}

.product-content{
padding:26px;
}

.product-content span{
display:inline-block;
margin-bottom:10px;
font-size:13px;
font-weight:700;
color:#73c83e;
letter-spacing:1px;
}

.product-content h3{
font-size:24px;
line-height:1.3;
margin-bottom:12px;
color:#082055;
}

.product-content p{
font-size:15px;
margin-bottom:18px;
}

.product-content button{
background:linear-gradient(90deg,#72c63f,#1f6de2);
border:none;
color:#fff;
padding:13px 24px;
border-radius:50px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.product-content button:hover{
transform:translateY(-2px);
}

/* =========================================
CATEGORY CARDS
========================================= */

.category-card{
background:#fff;
padding:36px;
border-radius:22px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
border-top:5px solid #73c83e;
}

.category-card h3{
font-size:28px;
line-height:1.3;
margin-bottom:20px;
color:#082055;
}

.category-card ul{
padding-left:18px;
}

.category-card li{
margin-bottom:14px;
font-size:16px;
color:#556377;
}

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

section{
position:relative;
}

.hygiene-categories,
.featured-products,
.industry-use,
.why-hygiene{
padding:100px 0;
}

/* =========================================
ENQUIRY POPUP
========================================= */

.enquiry-popup{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:0.3s ease;
}

.enquiry-popup.active{
opacity:1;
visibility:visible;
}

.enquiry-overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,0.65);
backdrop-filter:blur(4px);
}

.enquiry-box{
position:relative;
width:92%;
max-width:620px;
background:#fff;
border-radius:28px;
padding:50px;
z-index:2;
animation:popupFade 0.35s ease;
box-shadow:0 30px 80px rgba(0,0,0,0.18);
}

@keyframes popupFade{

from{
transform:translateY(30px);
opacity:0;
}

to{
transform:translateY(0);
opacity:1;
}

}

.close-popup{
position:absolute;
top:22px;
right:22px;
width:42px;
height:42px;
border:none;
border-radius:50%;
background:#f1f4fa;
cursor:pointer;
font-size:18px;
}

.popup-header span{
display:inline-block;
padding:10px 18px;
background:#eef4ff;
border-radius:30px;
font-size:13px;
font-weight:600;
color:#1f6de2;
margin-bottom:18px;
}

.popup-header h2{
font-size:48px;
line-height:1.1;
margin-bottom:12px;
color:#082055;
}

.popup-header p{
color:#5d6b82;
margin-bottom:30px;
}

.popup-form{
display:flex;
flex-direction:column;
gap:18px;
}

.popup-form input,
.popup-form textarea{
width:100%;
padding:18px 22px;
border:1px solid #d8e0ee;
border-radius:16px;
font-size:16px;
font-family:'Poppins',sans-serif;
outline:none;
transition:0.3s;
}

.popup-form input:focus,
.popup-form textarea:focus{
border-color:#1f6de2;
}

.popup-form textarea{
height:140px;
resize:none;
}

.popup-form button{
background:linear-gradient(90deg,#72c63f,#1f6de2);
color:#fff;
border:none;
padding:18px;
border-radius:50px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

.popup-form button:hover{
transform:translateY(-2px);
}

@media(max-width:768px){

.enquiry-box{
padding:35px 24px;
border-radius:22px;
}

.popup-header h2{
font-size:34px;
}

}

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

.hero-buttons{
display:flex;
gap:18px;
margin-top:38px;
flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:16px 34px;
border-radius:60px;
font-size:16px;
font-weight:600;
font-family:'Poppins',sans-serif;
text-decoration:none;
cursor:pointer;
transition:0.35s ease;
border:none;
}

/* PRIMARY */

.primary-btn{
background:linear-gradient(90deg,#72c63f,#1f6de2);
color:#fff;
box-shadow:0 12px 30px rgba(31,109,226,0.25);
}

.primary-btn:hover{
transform:translateY(-3px);
box-shadow:0 18px 40px rgba(31,109,226,0.35);
}

/* SECONDARY */

.secondary-btn{
background:rgba(255,255,255,0.14);
border:1px solid rgba(255,255,255,0.25);
backdrop-filter:blur(10px);
color:#fff;
}

.secondary-btn:hover{
background:#fff;
color:#082055;
transform:translateY(-3px);
}

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

.stationery-hero{
padding:160px 0 110px;
background:
linear-gradient(rgba(3,23,66,0.88),rgba(3,23,66,0.88)),
url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1800&auto=format&fit=crop');
background-size:cover;
background-position:center;
color:#fff;
}

.stationery-hero-content{
max-width:760px;
}

.stationery-hero-content span{
display:inline-block;
padding:12px 22px;
background:rgba(255,255,255,0.12);
border-radius:50px;
font-size:13px;
letter-spacing:1px;
font-weight:600;
margin-bottom:24px;
}

.stationery-hero-content h1{
font-size:74px;
line-height:1.05;
font-weight:700;
margin-bottom:26px;
letter-spacing:-2px;
}

.stationery-hero-content p{
font-size:18px;
line-height:1.9;
color:rgba(255,255,255,0.82);
max-width:680px;
}

/* =========================================
CATEGORY SECTION
========================================= */

.stationery-categories{
padding:110px 0;
background:#f5f7fb;
}

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

.stationery-category-card{
background:#fff;
padding:36px;
border-radius:24px;
box-shadow:0 12px 35px rgba(0,0,0,0.05);
transition:0.35s ease;
border-top:5px solid #72c63f;
}

.stationery-category-card:hover{
transform:translateY(-8px);
}

.stationery-category-card h3{
font-size:28px;
line-height:1.3;
margin-bottom:14px;
color:#082055;
font-weight:650;
}

.stationery-category-card p{
font-size:15px;
line-height:1.8;
color:#5b6475;
}

/* =========================================
PRODUCTS
========================================= */

.stationery-products{
padding:110px 0;
background:#fff;
}

.stationery-products-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:60px;
}

.stationery-product-card{
background:#fff;
border-radius:24px;
overflow:hidden;
box-shadow:0 12px 35px rgba(0,0,0,0.06);
transition:0.35s ease;
border:1px solid rgba(0,0,0,0.04);
}

.stationery-product-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,0.10);
}

.stationery-product-card img{
width:100%;
height:240px;
object-fit:cover;
display:block;
}

.stationery-product-content{
padding:28px;
}

.stationery-product-content h3{
font-size:26px;
line-height:1.3;
margin-bottom:12px;
color:#082055;
font-weight:650;
}

.stationery-product-content p{
font-size:15px;
line-height:1.8;
margin-bottom:22px;
color:#5b6475;
}

/* QUOTE SELECT */

.quote-select{
display:flex;
align-items:center;
gap:12px;
padding-top:18px;
border-top:1px solid #eef2f7;
}

.quote-select input{
width:18px;
height:18px;
accent-color:#1f6de2;
cursor:pointer;
}

.quote-select span{
font-size:15px;
font-weight:600;
color:#082055;
}

/* =========================================
QUOTE SECTION
========================================= */

.quote-section{
padding:120px 0;
background:#f5f7fb;
}

.quote-grid{
display:grid;
grid-template-columns:1fr 520px;
gap:60px;
align-items:start;
}

.quote-left span{
display:inline-block;
padding:12px 22px;
background:#e8f0ff;
border-radius:40px;
font-size:13px;
font-weight:600;
color:#1f6de2;
margin-bottom:24px;
}

.quote-left h2{
font-size:58px;
line-height:1.08;
margin-bottom:24px;
color:#082055;
font-weight:700;
letter-spacing:-1.5px;
}

.quote-left p{
font-size:17px;
line-height:1.9;
color:#5b6475;
margin-bottom:34px;
}

.quote-left ul{
display:flex;
flex-direction:column;
gap:18px;
}

.quote-left li{
font-size:17px;
font-weight:500;
color:#082055;
}

/* FORM */

.quote-form-box{
background:#fff;
padding:46px;
border-radius:30px;
box-shadow:0 18px 50px rgba(0,0,0,0.06);
}

.quote-form-box h3{
font-size:34px;
margin-bottom:28px;
color:#082055;
font-weight:650;
}

.quote-form-box form{
display:flex;
flex-direction:column;
gap:18px;
}

.quote-form-box input,
.quote-form-box textarea{
width:100%;
padding:18px 22px;
border-radius:18px;
border:1px solid #dce3ee;
font-size:15px;
font-family:'Poppins',sans-serif;
outline:none;
transition:0.3s;
}

.quote-form-box textarea{
height:140px;
resize:none;
}

.quote-form-box input:focus,
.quote-form-box textarea:focus{
border-color:#1f6de2;
}

.quote-form-box button{
background:linear-gradient(90deg,#72c63f,#1f6de2);
border:none;
color:#fff;
padding:18px;
border-radius:50px;
font-size:16px;
font-weight:600;
cursor:pointer;
transition:0.3s ease;
}

.quote-form-box button:hover{
transform:translateY(-3px);
}

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

@media(max-width:1200px){

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

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

}

@media(max-width:768px){

.stationery-hero{
padding:130px 0 90px;
}

.stationery-hero-content h1{
font-size:46px;
line-height:1.1;
}

.stationery-category-grid,
.stationery-products-grid{
grid-template-columns:1fr;
}

.quote-left h2{
font-size:38px;
}

.quote-form-box{
padding:34px 24px;
}

}