/* ===== ULTRA SMOOTH ENGINE ===== */

*{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

html{
scroll-behavior:smooth;
}

body{
overflow-x:hidden;

text-rendering:optimizeLegibility;
}

/* GPU ACCELERATION */

.card,
.project-card,
.gallery-item,
.feature-item,
.step{
backface-visibility:hidden;
transform:translateZ(0);
}

/* ONLY ON HOVER */
.project-card:hover,
.card:hover,
.gallery-item:hover{
will-change:transform;
}
/* ===================================
   HARI ASSOCIATES PREMIUM STYLE
   White + Charcoal + Copper
=================================== */

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

html{
scroll-behavior:smooth;
}

body{
font-family:Arial, Helvetica, sans-serif;
background:#d1d5db;
color:#222;
overflow-x:hidden;
line-height:1.6;
}

/* HEADER */

header{
position:fixed;
top:10px;
left:50%;
transform:translateX(-50%);
width:96%;
padding:6px 24px;

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

background:transparent;
backdrop-filter:none;
-webkit-backdrop-filter:none;

border:none;
border-radius:0;

box-shadow:none;
z-index:1000;
}

.logo{
width:120px;
height:auto;

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

background:none;
box-shadow:none;

transition:.4s ease;
}

.logo img{
width:100%;
height:auto;

object-fit:contain;

display:block;
}

/* hover */
.logo:hover{
transform:scale(1.05);
}

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

@media(max-width:768px){

.logo{
width:75px;
}

.logo img{
width:100%;
height:auto;
}

}

/* Your existing nav links */
nav a{
text-decoration:none;
color:#222;
font-weight:700;
padding:11px 16px;
border-radius:12px;
transition:.28s ease;
}

/* Active page style (Home, current page) */
nav a.active{
background:none;
color:#c57b30;
border-bottom:2px solid #c57b30;
border-radius:0;
padding-bottom:6px;
}

/* Hover effect */
nav a:hover{
color:#c57b30;
}
/* MENU BTN */

.menu-btn{
display:none;

width:58px;
height:58px;

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

position:relative;

cursor:pointer;

background:rgba(10,15,25,.55);

backdrop-filter:blur(12px);

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

border-radius:18px;

box-shadow:
0 10px 30px rgba(0,0,0,.35),
0 0 18px rgba(255,215,120,.08);

z-index:3000;

transition:.35s ease;
}

/* hover */
.menu-btn:hover{
transform:translateY(-2px);

border-color:rgba(255,215,120,.35);

box-shadow:
0 14px 40px rgba(0,0,0,.45),
0 0 22px rgba(255,215,120,.15);
}

.menu-btn span{
position:absolute;

width:24px;
height:2.5px;

background:#ffffff !important;

border-radius:20px;

transition:.4s ease;
}

/* top line */
.menu-btn span:nth-child(1){
transform:translateY(-8px);
}

/* middle line */
.menu-btn span:nth-child(2){
transform:translateY(0);
}

/* bottom line */
.menu-btn span:nth-child(3){
transform:translateY(8px);
}

/* HERO */

.hero{
position:relative;
height:100vh;
overflow:hidden;
}

.hero{
position:relative;
height:100vh;
overflow:hidden;
}

.hero-image{
position:absolute;
inset:0;

background:
url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.overlay{
position:absolute;
inset:0;

background:
linear-gradient(
rgba(3,7,18,.58),
rgba(2,6,23,.82)
);

pointer-events:none;
}

.hero-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
color:#fff;
width:92%;
max-width:900px;
z-index:5;
}

.hero-content h2{
font-size:62px;
line-height:1.1;
margin-bottom:14px;
font-weight:800;
}

.hero-content p{
font-size:20px;
margin-bottom:24px;
}

.btn{
display:inline-block;
padding:14px 28px;
background:#b87333;
color:#fff;
text-decoration:none;
font-weight:700;
border-radius:30px;
transition:.28s ease;
}

.btn:hover{
transform:translateY(-3px);
background:#9d5f26;
}

/* =========================
   PREMIUM HERO BLOCKS
========================= */

.blocks{
position:relative;

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

gap:34px;

padding:120px 50px;

max-width:1450px;
margin:auto;

overflow:hidden;
}

/* SECTION BACKGROUND */

.blocks::before{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.72)
),
url('https://images.unsplash.com/photo-1600607687644-c7171b42498f?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;

z-index:-2;

transform:scale(1.05);
}

.blocks{
isolation:isolate;
}

/* subtle dark overlay */
.blocks::after{
content:'';

position:absolute;
inset:0;

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

z-index:-1;
}

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

.card{
position:relative;

height:430px;

border-radius:30px;

overflow:hidden;

display:flex;
align-items:flex-end;

background-size:cover;
background-position:center;
background-repeat:no-repeat;

isolation:isolate;

background-color:#111;

box-shadow:
0 14px 40px rgba(0,0,0,.22)
   
transition:
transform .9s cubic-bezier(.16,1,.3,1),
opacity .9s ease,
box-shadow .6s ease;

opacity:0;

transform:translateY(60px) translateZ(0);

will-change:transform, opacity;

backface-visibility:hidden;
}

/* =========================
   ACTIVE REVEAL
========================= */

.card.show{
opacity:1;

transform:translateY(0);

transition:
transform .9s cubic-bezier(.16,1,.3,1),
opacity .9s ease;
}
/* =========================
   IMAGE ZOOM LAYER
========================= */

.card::before{
content:'';

position:absolute;
inset:0;

background:inherit;
background-size:cover;
background-position:center;

transform:scale(1);

transition:transform 26s ease;

z-index:-2;
}

/* gentle auto zoom */
.card:hover::before{
transform:scale(1.03);
}

/* =========================
   DARK OVERLAY
========================= */

.card::after{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.88),
rgba(0,0,0,.28),
rgba(0,0,0,.10)
);

z-index:-1;
}

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

.card-content{
padding:34px;

transform:translateY(20px);

transition:
transform .27s ease,
opacity .27s ease;

opacity:.28;
}

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

.card h3{
font-size:34px;

font-weight:800;

line-height:1.1;

margin-bottom:16px;

color:#ffffff;

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

letter-spacing:.5px;

position:relative;
}

/* underline */
.card h3::after{
content:'';

position:absolute;

left:0;
bottom:-8px;

width:0;
height:2px;

background:#ffffff;

transition:.6s ease;
}

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

.card p{
font-size:17px;

line-height:1.8;

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

max-width:90%;
}

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

.card:hover{
transform:
translateY(-6px)
scale(1.015);

box-shadow:
0 35px 90px rgba(0,0,0,.5);
}

.card:hover .card-content{
transform:translateY(0);
opacity:1;
}

.card:hover h3::after{
width:100px;
}

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

@media(max-width:992px){

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

}

@media(max-width:768px){

.blocks{
grid-template-columns:1fr;

padding:70px 18px;

gap:24px;
}

.card{
height:300px;
border-radius:22px;
}

.card-content{
padding:22px;
}

.card h3{
font-size:24px;
}

.card p{
font-size:14px;
max-width:100%;
}

}

/* =====================================
   PREMIUM PANEL SERVICES SECTION
===================================== */
.features-clean{
display:grid;
grid-template-columns:repeat(4,1fr);

width:100%;
min-height:560px;

overflow:hidden;
}

/* ===== PANEL IMAGES ===== */

/* PLANNER */
.feature-item:nth-child(1){
background:
linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),
url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=1200&auto=format&fit=crop');

background-size:cover;
background-position:center;
}

/* CONSTRUCTION */
.feature-item:nth-child(2){
background:
linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),
url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?q=80&w=1200&auto=format&fit=crop');

background-size:cover;
background-position:center;
}

/* INTERIOR */
.feature-item:nth-child(3){
background:
linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.50)),
url('https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop');

background-size:cover;
background-position:center;
}

/* LANDSCAPE */
.feature-item:nth-child(4){
background:
linear-gradient(rgba(0,0,0,.68),rgba(0,0,0,.68)),
url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1200&auto=format&fit=crop');

background-size:cover;
background-position:center;
}

/* ===== PANELS ===== */

.feature-item{
position:relative;

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

padding:70px 35px;

text-align:center;

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

overflow:hidden;
}

.feature-item{
opacity:0;

transform:translateY(40px);

transition:
transform 1s cubic-bezier(.22,1,.36,1),
opacity .9s ease;
}

/* ACTIVE */

.feature-item.show{
opacity:1;

transform:translateY(0);
}

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

.feature-text{
max-width:320px;
position:relative;
z-index:2;
}

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

.feature-text h3{
font-size:34px;
font-weight:700;

letter-spacing:1px;

margin-bottom:24px;

color:#fff;

text-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* ===== PARAGRAPH ===== */

.feature-text p{
font-size:16px;
line-height:1.9;

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

text-shadow:0 2px 10px rgba(0,0,0,.4);
}

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

.feature-item:hover{
transform:scale(1.03);
z-index:2;
}

/* IMAGE ZOOM */
.feature-item::after{
content:'';

position:absolute;
inset:0;

background:inherit;

background-size:cover;
background-position:center;

transform:scale(1);

transition:transform 1.2s ease;

z-index:0;
}

.feature-item:hover::after{
transform:scale(1.03);
}

/* PREMIUM TOP LINE */

.feature-item::before{
content:'';

position:absolute;
top:0;
left:0;

width:100%;
height:4px;

background:#e5e7eb;

transform:scaleX(0);

transform-origin:left;

transition:.4s ease;

z-index:3;
}

.feature-item:hover::before{
transform:scaleX(1);
}

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

@media(max-width:1000px){

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

}

@media(max-width:768px){

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

.feature-item{
min-height:300px;
border-right:none;
border-bottom:1px solid rgba(255,255,255,.08);
}

.feature-text h3{
font-size:28px;
}

.feature-text p{
font-size:15px;
}

}

/* ===============================
   MODERN PREMIUM FOOTER
================================*/

.footer{
position:relative;

background:
linear-gradient(
rgba(10,15,25,.72),
rgba(5,8,15,.82)
),
url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;

padding-top:90px;

overflow:hidden;

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

/* subtle cinematic glow */
.footer::before{
content:'';

position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(255,255,255,.04),
transparent 35%
);

z-index:0;
}

/* ===============================
   TOP AREA
================================*/

.footer-top{
position:relative;
z-index:2;

display:grid;
grid-template-columns:1.4fr 1fr 1fr 1fr;

gap:50px;

max-width:1400px;
margin:auto;

padding:0 60px 70px;

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

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

.footer-col{
position:relative;

padding:10px 10px;

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

backdrop-filter:blur(3px);
}

/* elegant divider */
.footer-col::after{
content:'';

position:absolute;

top:8%;
right:-25px;

width:1px;
height:84%;

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

/* remove last divider */
.footer-col:last-child::after{
display:none;
}

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

.footer-logo{
width:92px;

margin-bottom:28px;

border-radius:14px;

box-shadow:
0 8px 24px rgba(0,0,0,.25);
}

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

.footer-col h3{
font-size:32px;
line-height:1.1;

margin-bottom:18px;

font-weight:700;

color:#ffffff;
}

.footer-col h4{
font-size:24px;

margin-bottom:28px;

font-weight:600;

color:#ffffff;
}

/* tagline */
.footer-tagline{
color:#9ca3af;

font-size:15px;
line-height:1.9;

margin-bottom:26px;

max-width:320px;
}

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

.footer-col p{
display:flex;
align-items:flex-start;
gap:12px;

font-size:15px;
line-height:1.8;

color:#d1d5db;

margin-bottom:18px;

word-break:break-word;
}

.footer-col p i{
margin-top:6px;

font-size:16px;

min-width:18px;
}

/* MOBILE */
@media(max-width:768px){

.footer-col p{
justify-content:center;
text-align:left;
}

}

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

.footer-col a{
position:relative;

display:block;
width:fit-content;

color:#d1d5db;

text-decoration:none;

margin-bottom:18px;

transition:.35s ease;
}

/* underline */
.footer-col a::after{
content:'';

position:absolute;

left:0;
bottom:-5px;

width:0;
height:1px;

background:#e5e7eb;

transition:.35s ease;
}

.footer-col a:hover{
color:#ffffff;

transform:translateX(6px);
}

.footer-col a:hover::after{
width:100%;
}

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

.footer-stats{
margin:32px 0;
}

.footer-stats span{
display:block;

margin-bottom:16px;

font-size:16px;

color:#cbd5e1;
}

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

.footer-btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:15px 34px;

background:#cbd5e1;

color:#111827;

font-weight:700;
font-size:15px;

text-decoration:none;

border-radius:60px;

transition:.35s ease;

margin-top:12px;

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

.footer-btn,
.footer-btn:visited,
.footer-btn:hover{
color:#111827 !important;

opacity:1 !important;

-webkit-text-fill-color:#111827 !important;
}

.footer-btn *{
opacity:1 !important;
color:#111827 !important;
}

/* hover */
.footer-btn:hover{
transform:translateY(-4px);

background:#e2e8f0;

box-shadow:
0 14px 30px rgba(0,0,0,.24);
}

/* ===============================
   SOCIAL
================================*/

.social-icons{
display:flex;
gap:18px;

flex-wrap:wrap;
}

/* icons */
.social-icons a{
width:50px;
height:50px;

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

border-radius:16px;

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

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

color:#ffffff;

font-size:19px;

text-decoration:none;

transition:.35s ease;

backdrop-filter:blur(5px);
}

/* hover */
.social-icons a:hover{
transform:translateY(-5px);

background:#e5e7eb;

color:#111827;

border-color:#e5e7eb;

box-shadow:
0 12px 28px rgba(0,0,0,.22);
}

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

.footer-bottom{
position:relative;
z-index:2;

padding:34px 20px;

text-align:center;
}

.footer-links{
margin-bottom:16px;
}

.footer-links span{
margin:0 16px;

color:#9ca3af;

cursor:pointer;

transition:.3s ease;
}

.footer-links span:hover{
color:#ffffff;
}

.footer-bottom p{
color:#6b7280;

font-size:14px;
}

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

@media(max-width:1000px){

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

padding:0 24px 60px;

gap:40px;
}

.footer-col:nth-child(2)::after{
display:none;
}

}

@media(max-width:768px){

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

gap:45px;
}

/* remove dividers */
.footer-col::after{
display:none;
}

.footer-col{
text-align:center;

padding:0;
}

.footer-col a{
margin-left:auto;
margin-right:auto;
}

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

.footer-logo{
margin:auto auto 24px;
}

.footer-tagline{
margin:auto auto 24px;
}

.footer-col h3{
font-size:30px;
}

.footer-col h4{
font-size:22px;
}

.footer-btn{
width:100%;
max-width:280px;
}

}
/* ===== ABOUT HERO ===== */
.about-hero{
position:relative;
height:78vh;

background:
linear-gradient(
rgba(8,12,20,.58),
rgba(8,12,20,.78)
),
url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;

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

.about-overlay{
position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(255,255,255,.05),
transparent 35%
);
}

.about-content{
position:relative;
color:#fff;
text-align:center;
max-width:900px;
padding:0 20px;
}

.about-content h1{
font-size:78px;
line-height:1.02;

font-weight:800;

letter-spacing:-3px;

margin-bottom:20px;

text-shadow:
0 10px 30px rgba(0,0,0,.35);
}

.about-content p{
font-size:20px;
line-height:1.8;

color:#d1d5db;
}

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

.about-section{
padding:110px 8%;

background:#0a0a0a;

color:#fff;

position:relative;
}

/* GRID */

.about-grid{
display:grid;
grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;
}

/* TEXT */

.about-text{
background:rgba(255,255,255,.02);

backdrop-filter:blur(6px);

padding:40px;

border-radius:30px;

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

/* HEADING */

.about-text h2{
font-size:64px;

line-height:1;

font-weight:800;

letter-spacing:-3px;

margin-bottom:30px;

color:#fff;
}

/* PARAGRAPH */

.about-text p{
font-size:19px;

line-height:2;

color:#cbd5e1;

margin-bottom:22px;
}

/* IMAGE */

.about-image{
position:relative;

overflow:hidden;

border-radius:30px;
}

.about-image img{
width:100%;
height:100%;

object-fit:cover;

border-radius:30px;

transition:.6s ease;

filter:brightness(.88);

box-shadow:
0 30px 80px rgba(0,0,0,.35);
}

/* hover */

.about-image:hover img{
transform:scale(1.03);

filter:brightness(1);
}

/* overlay */

.about-image::after{
content:'';

position:absolute;
inset:0;

background:linear-gradient(
rgba(0,0,0,.08),
rgba(0,0,0,.45)
);
}

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

.about-stats{
display:flex;

justify-content:center;

gap:90px;

padding:80px 20px;

background:#050816;

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

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

/* EACH STAT */

.stat{
text-align:center;

transition:.35s ease;
}

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

/* NUMBER */

.stat h3{
font-size:52px;

font-weight:800;

margin-bottom:8px;

color:#e5e7eb;
}

/* LABEL */

.stat p{
color:#9ca3af;

font-size:15px;

letter-spacing:.5px;
}

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

@media(max-width:768px){

.about-hero{
height:auto;

padding:180px 20px 120px;
}

.about-content h1{
font-size:46px;

letter-spacing:-1px;
}

.about-content p{
font-size:16px;
}

.about-section{
padding:70px 18px;
}

.about-grid{
grid-template-columns:1fr;

gap:45px;
}

.about-text{
padding:28px;
}

.about-text h2{
font-size:42px;
}

.about-text p{
font-size:15px;
line-height:1.9;
}

.about-stats{
flex-direction:column;

gap:35px;

padding:60px 20px;
}

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

}



/* =================================
   PREMIUM SERVICES SHOWCASE
================================= */

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

.services-hero{
position:relative;

height:60vh;

background:
linear-gradient(
rgba(0,0,0,.55),
rgba(0,0,0,.68)
),
url('https://images.unsplash.com/photo-1519643381401-22c77e60520e?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;

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

text-align:center;

overflow:hidden;
}

.services-hero .overlay{
position:absolute;
inset:0;
}

.services-hero-content{
position:relative;
z-index:2;

max-width:700px;

padding:0 20px;

color:#fff;
}

.services-hero-content h1{
font-size:64px;

font-weight:800;

margin-bottom:18px;

letter-spacing:-2px;

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

text-shadow:
0 10px 30px rgba(0,0,0,.35);
}

.services-hero-content p{
font-size:20px;

line-height:1.8;

letter-spacing:1px;

color:#e5e7eb;
}

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

.services-section{
background:#0a0a0a;

padding:110px 8%;

display:flex;
flex-direction:column;

gap:120px;
}

/* EACH BLOCK */

.service-block{
display:grid;
grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;
}

/* reverse layout */

.service-block.reverse .service-image{
order:2;
}

.service-block.reverse .service-details{
order:1;
}

/* IMAGE */

.service-image{
position:relative;

overflow:hidden;

border-radius:32px;

height:520px;

box-shadow:
0 30px 80px rgba(0,0,0,.45);
}

.service-image img{
width:100%;
height:100%;

object-fit:cover;

transition:1s ease;
}

/* overlay */

.service-image::after{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
rgba(0,0,0,.08),
rgba(0,0,0,.45)
);
}

/* hover */

.service-block:hover .service-image img{
transform:scale(1.03);
}

/* DETAILS */

.service-details{
color:#fff;
}

/* number */

.service-tag{
display:inline-block;

font-size:14px;

letter-spacing:4px;

margin-bottom:24px;

color:#94a3b8;
}

/* title */

.service-details h2{
font-size:64px;

line-height:1;

margin-bottom:28px;

font-weight:800;

letter-spacing:-2px;

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

color:#fff;
}

/* paragraph */

.service-details p{
font-size:18px;

line-height:2;

color:#cbd5e1;

margin-bottom:30px;
}

/* LIST */

.service-details ul{
list-style:none;
}

.service-details ul li{
position:relative;

padding-left:28px;

margin-bottom:18px;

font-size:16px;

color:#f1f5f9;
}

/* custom dot */

.service-details ul li::before{
content:'';

position:absolute;

left:0;
top:11px;

width:10px;
height:10px;

border-radius:50%;

background:#0a0a0a;
}

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

@media(max-width:768px){

.services-hero{
height:48vh;

padding:0 20px;
}

.services-hero-content{
max-width:100%;

text-align:center;
}

.services-hero-content h1{
font-size:42px;

margin-bottom:14px;
}

.services-hero-content p{
font-size:15px;

line-height:1.8;
}

.services-section{
padding:70px 18px;

gap:70px;
}

.service-block{
grid-template-columns:1fr;

gap:35px;
}

.service-block.reverse .service-image,
.service-block.reverse .service-details{
order:unset;
}

.service-image{
height:280px;

border-radius:22px;
}

.service-details h2{
font-size:40px;
}

.service-details p{
font-size:15px;

line-height:1.9;
}

.service-details ul li{
font-size:14px;
}

}

/* ===============================
   PROCESS SECTION
================================*/

.process-section{
background:#f5f5f3;

padding:110px 8%;

text-align:center;

color:#fff;
}

.process-section h2{
font-size:58px;

margin-bottom:70px;

font-weight:800;

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

color:#111111;   
}

/* STEPS */

.process-steps{
display:grid;
grid-template-columns:repeat(4,1fr);

gap:35px;
}

/* CARD */

.step{
position:relative;

background:
linear-gradient(
180deg,
#0f0f0f,
#050505
);

padding:55px 28px 38px;

border-radius:34px;

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

overflow:hidden;

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

transition:.45s ease;
}

.step::before{
content:'';

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:#e5e7eb;

transform:scaleX(0);

transform-origin:left;

transition:.45s ease;
}

.step:hover::before{
transform:scaleX(1);
}

.step:hover{
transform:
translateY(-12px)
scale(1.03);

background:#151515;
}

/* hover */

.step:hover{
transform:translateY(-10px);

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

/* NUMBER */

.step span{
position:absolute;

top:18px;
right:24px;

font-size:72px;

font-weight:800;

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

line-height:1;

pointer-events:none;
}

/* TITLE */

.step h4{
font-size:30px;

margin-top:35px;
margin-bottom:18px;

font-weight:700;

color:#ffffff;

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

/* TEXT */

.step p{
font-size:15px;

line-height:1.9;

color:#bfc5d1;
}

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

.services-cta{
background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.82)
),
url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;

padding:120px 20px;

text-align:center;

color:#fff;
}

.services-cta h2{
font-size:58px;

margin-bottom:30px;

font-weight:800;

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

.services-cta .btn{
display:inline-block;

padding:16px 40px;

background:#e5e7eb;

color:#111827;

font-weight:700;

border-radius:60px;

text-decoration:none;

transition:.35s ease;
}

.services-cta .btn:hover{
transform:translateY(-4px);

background:#fff;
}

/* MOBILE */

@media(max-width:768px){

.process-section{
padding:70px 18px;
}

.process-section h2{
font-size:40px;

margin-bottom:45px;
}

.process-steps{
grid-template-columns:1fr;

gap:24px;
}

.step{
padding:30px 24px;
}

.step span{
color:#111827;
}

.step h4{
font-size:22px;
}

.services-cta{
padding:80px 20px;
}

.services-cta h2{
font-size:38px;

line-height:1.3;
}

}

/* ===============================
   PROJECTS PAGE (FINAL FIXED)
================================*/

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

.projects-hero{
height:55vh;
background:
url('https://images.unsplash.com/photo-1519643381401-22c77e60520e')
center/cover no-repeat;

position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.projects-hero::before{
content:'';
position:absolute;
inset:0;

background:
url('https://images.unsplash.com/photo-1519643381401-22c77e60520e')
center/cover no-repeat;

animation:none;
z-index:0;
}

@keyframes heroZoom{
0%{transform:scale(1);}
100%{transform:scale(1.1);}
}

.projects-hero .overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.68);
z-index:1;
}

.projects-hero .hero-content{
position:relative;
z-index:2;
text-align:center;
color:#fff;
}

.projects-hero h1{
font-size:56px;
font-weight:800;
}

/* ===== FILTER ===== */

.project-filter{
text-align:center;
padding:55px 20px 35px;
background:#050505;
}

.project-filter button{
padding:13px 24px;
margin:6px;
border:none;
border-radius:40px;

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

color:#fff;

cursor:pointer;

transition:.35s ease;
}

.project-filter button.active,
.project-filter button:hover{
background:#f3f4f6;
color:#111827;
transform:translateY(-3px);
}

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

.projects-section{
position:relative;

padding:70px 6% 120px;

background:
linear-gradient(
180deg,
#050505,
#0b0b0b
);

overflow:hidden;

/* PERFORMANCE */
content-visibility:auto;
contain-intrinsic-size:1000px;
}

/* ambient glow */

.projects-section::before{
content:'';

position:absolute;
top:-150px;
right:-120px;

width:500px;
height:500px;

background:
radial-gradient(
circle,
rgba(212,161,93,.10),
transparent 70%
);

filter:blur(40px);

z-index:0;
}

.projects-section::after{
content:'';

position:absolute;
bottom:-150px;
left:-120px;

width:420px;
height:420px;

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

filter:blur(40px);

z-index:0;
}

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

.projects-grid{
position:relative;
z-index:2;

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

gap:28px;
}

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

.project-card{
position:relative;

height:340px;

overflow:hidden;

border-radius:28px;

display:flex;
align-items:flex-end;

padding:34px;

cursor:pointer;

background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat;

border:none;

box-shadow:
0 8px 24px rgba(0,0,0,.22);

backface-visibility:hidden;

contain:layout paint;

isolation:isolate;

opacity:0;

transform:translateY(40px);

transition:
opacity .7s ease,
transform .7s cubic-bezier(.22,1,.36,1);
}

/* hover */
.project-card:hover{
transform:translateY(-4px);

box-shadow:
0 14px 34px rgba(0,0,0,.30);

will-change:transform;
}

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

/* overlay */

.project-card::after{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.82),
rgba(0,0,0,.28),
rgba(0,0,0,.06)
);

z-index:1;

transition:opacity .4s ease;

opacity:1;
}

/* hover */

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

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


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

.project-content{
position:relative;
z-index:2;

color:#fff;

transform:translateY(12px);

opacity:.96;

transition:
transform .4s ease,
opacity .4s ease;
}

.project-card:hover .project-content{
transform:translateY(0);
opacity:1;
}


/* number */

.project-content::before{
content:attr(data-number);

display:block;

font-size:14px;

letter-spacing:3px;

margin-bottom:14px;

color:#d4a15d;

font-weight:700;
}

/* title */

.project-content h3{
font-size:clamp(34px,4vw,56px);

font-weight:800;

line-height:1;

margin-bottom:12px;

color:#fff;

text-shadow:none;
}

/* text */

.project-content p{
font-size:17px;

line-height:1.6;

color:rgba(255,255,255,.82);
}

/* ===== LAYOUT ===== */

.project-card:nth-child(1){
grid-column:span 4;
}

.project-card:nth-child(2){
grid-column:span 8;
}

.project-card:nth-child(3){
grid-column:span 7;
}

.project-card:nth-child(4){
grid-column:span 5;
}

.project-card:nth-child(5){
grid-column:span 6;
}

.project-card:nth-child(6){
grid-column:span 6;
}

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

@media(max-width:900px){

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

.project-card{
grid-column:span 1 !important;
height:300px;
}

}

@media(max-width:600px){

.projects-grid{
grid-template-columns:1fr;
gap:20px;
}

.project-card{
height:280px;
padding:22px;
}

.project-content h3{
font-size:30px;
}

.project-content p{
font-size:14px;
}

}


/* ===== CONTACT HERO ===== */
.contact-hero{
height:45vh;
background:url('https://images.unsplash.com/photo-1497366216548-37526070297c') center/cover;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}

.contact-hero .overlay{
position:absolute;
inset:0;
background:rgba(0,0,0,.6);
}

.contact-hero .hero-content{
position:relative;
color:#fff;
text-align:center;
}

/* ===== CONTACT SECTION ===== */
.contact-section{
padding:80px 8%;
background:#f7f7f7;
}

.contact-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
max-width:1200px;
margin:auto;
}

/* LEFT */
.contact-info h2{
margin-bottom:10px;
}

.contact-info p{
margin:10px 0;
color:#555;
}

/* FORM */
.contact-form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{
padding:14px;
border:none;
border-radius:8px;
background:#fff;
box-shadow:0 5px 15px rgba(0,0,0,.08);
}

.contact-form textarea{
height:120px;
resize:none;
}

.contact-form button{
padding:14px;
background:#e5e7eb;
border:none;
color:#000;
font-weight:700;
border-radius:30px;
cursor:pointer;
}

/* ===== MOBILE ===== */
@media(max-width:768px){
.contact-container{
grid-template-columns:1fr;
}
}

/* ===============================
   NAVIGATION (LUXURY MINIMAL)
================================*/

/* hide checkbox */
#menuToggle{
display:none;
}

/* hamburger */


.menu-btn span{
position:absolute;

width:24px;
height:2.5px;

background:#ffffff;

border-radius:20px;

transition:.4s ease;
}

/* ===== BASE NAV ===== */
#navMenu{
display:flex;
align-items:center;
justify-content:center;

gap:34px;

padding:22px 40px;

background:#ffffff;

border-radius:0;

box-shadow:none;
}

/* ===== LINKS ===== */
#navMenu a{
position:relative;

display:flex;
align-items:center;

font-size:15px;

font-weight:500;

letter-spacing:2px;

text-transform:uppercase;

color:#111827;

text-decoration:none;

transition:.3s ease;
}

/* divider */
#navMenu a:not(:last-child)::after{
content:'/';

position:absolute;

right:-22px;

top:50%;

transform:translateY(-55%);

color:#c89b3c;

font-size:14px;

line-height:1;
}

/* hover */
#navMenu a:hover,
#navMenu a.active{
color:#c89b3c;
}

/* ===== DESKTOP ===== */
@media(min-width:769px){

.menu-btn{
display:none;
}

#navMenu{
position:static;

opacity:1;

pointer-events:auto;

padding:0;

background:none;
}

/* hide close button */
.menu-close{
display:none;
}

}

/* ===== MOBILE ===== */
@media(max-width:768px){

.menu-btn{
display:flex;
}

/* mobile full screen menu */
#navMenu{
position:fixed;

top:18px;
left:18px;

width:calc(100vw - 36px);
height:calc(100vh - 36px);

display:flex;
flex-direction:column;

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

gap:42px;

background:
linear-gradient(
rgba(3,10,25,.82),
rgba(5,15,35,.92)
);

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

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

border-radius:34px;

box-shadow:
0 20px 80px rgba(0,0,0,.55);

opacity:0;

transform:scale(.96);

pointer-events:none;

transition:.45s ease;

z-index:9999;

overflow:hidden;
}
/* open menu */
#menuToggle:checked ~ #navMenu{
opacity:1;

transform:scale(1);

pointer-events:auto;
}
/* mobile links */
#navMenu a{
position:relative;

color:#fff;

font-size:26px;

font-weight:300;

letter-spacing:7px;

text-transform:uppercase;

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

transition:.35s ease;
}

#navMenu a::before{
content:'';

position:absolute;

left:50%;
bottom:-16px;

transform:translateX(-50%);

width:34px;
height:1px;

background:rgba(255,255,255,.55);
}

/* remove divider in mobile */
#navMenu a::after{
display:none;
}

/* close button */
.menu-close{
position:absolute;

top:26px;
right:26px;

width:52px;
height:52px;

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

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

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

border-radius:18px;

backdrop-filter:blur(12px);

font-size:28px;

color:#fff;

cursor:pointer;

transition:.35s ease;
}

.menu-close:hover{
transform:rotate(90deg);

background:rgba(255,255,255,.12);
}

/* hamburger animation */
#menuToggle:checked + .menu-btn span:nth-child(1){
transform:rotate(45deg);
}

#menuToggle:checked + .menu-btn span:nth-child(2){
opacity:0;
}

#menuToggle:checked + .menu-btn span:nth-child(3){
transform:rotate(-45deg);
}

}

/* ===============================
   PREMIUM GALLERY SECTION
================================*/

/* ===== HERO ===== */
.gallery-hero{
height:38vh;

background:
linear-gradient(
rgba(0,0,0,.62),
rgba(0,0,0,.72)
),
url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;

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

text-align:center;

position:relative;
overflow:hidden;
}

.gallery-hero h1{
font-size:72px;
font-weight:800;

color:#fff;

letter-spacing:1px;

text-shadow:
0 10px 35px rgba(0,0,0,.45);

position:relative;
z-index:2;
}

/* ===== MAIN SECTION ===== */
.gallery-section{
position:relative;
overflow:hidden;

padding:70px 0 100px;

background:
linear-gradient(
rgba(0,0,0,.70),
rgba(0,0,0,.80)
),
url('https://images.unsplash.com/photo-1497366412874-3415097a27e7?q=80&w=1800&auto=format&fit=crop');
   
background-size:cover;
background-position:center;
background-attachment:fixed;
}

/* luxury background */
.gallery-section::before{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
rgba(245,245,245,.90),
rgba(240,240,240,.94)
),
url('https://images.unsplash.com/photo-1511818966892-d7d671e672a2?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;

filter:blur(2px);

transform:scale(1.05);

z-index:-1;
}

/* ===== FILTER ===== */
.gallery-filter{
display:flex;
justify-content:center;
gap:18px;

flex-wrap:wrap;

margin-top:-35px;
margin-bottom:55px;

position:relative;
z-index:10;
}

.gallery-filter button{
padding:14px 30px;

border:none;
border-radius:50px;

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

backdrop-filter:blur(12px);

font-size:15px;
font-weight:700;

cursor:pointer;

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

transition:.35s ease;
}

.gallery-filter button:hover,
.gallery-filter button.active{

background:#e5e7eb;
color:#111;

transform:translateY(-5px);

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

/* ===== GRID ===== */
.gallery{
padding:0 40px;

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

gap:38px;

max-width:1450px;
margin:auto;
}

/* stagger effect */
.gallery-item:nth-child(2),
.gallery-item:nth-child(5){
margin-top:55px;
}

/* ===== CARD ===== */
.gallery-item{
position:relative;
overflow:hidden;

border-radius:30px;

background:#111;

border-top:4px solid #e5e7eb;

box-shadow:
0 20px 55px rgba(0,0,0,.16);

transition:
transform .45s ease,
box-shadow .45s ease;
}

.gallery-item:hover{
transform:translateY(-12px);

box-shadow:
0 30px 80px rgba(0,0,0,.24);
}

/* ===== IMAGE ===== */
.gallery-item img{
width:100%;
height:420px;

object-fit:cover;
display:block;

transition:
transform 1.2s ease,
filter .6s ease;
}

.gallery-item:hover img{
transform:scale(1.03);
filter:brightness(.75);
}

/* ===== OVERLAY ===== */
.gallery-item::after{
content:'';

position:absolute;
inset:0;

background:
linear-gradient(
to top,
rgba(0,0,0,.92),
rgba(0,0,0,.25),
transparent
);

opacity:0;
transition:.45s ease;
}

.gallery-item:hover::after{
opacity:1;
}

/* ===== INFO ===== */
.gallery-info{
position:absolute;
left:0;
bottom:0;

width:100%;

padding:28px;

color:#fff;

z-index:3;

transform:translateY(60px);
opacity:0;

transition:.45s ease;
}

.gallery-item:hover .gallery-info{
transform:translateY(0);
opacity:1;
}

/* ===== TEXT ===== */
.gallery-info h3{
font-size:22px;
font-weight:700;
margin-bottom:6px;
}

.gallery-info p{
font-size:14px;
opacity:.82;
}

/* ===== ZOOM ICON ===== */
.zoom-icon{
position:absolute;
top:50%;
left:50%;

transform:translate(-50%,-50%) scale(.8);

width:65px;
height:65px;

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

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

backdrop-filter:blur(10px);

border-radius:50%;

opacity:0;

transition:.35s ease;

z-index:5;
}

.zoom-icon svg{
width:22px;
height:22px;
fill:#fff;
}

.gallery-item:hover .zoom-icon{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

/* ===== MOBILE ===== */
@media(max-width:768px){

.gallery{
padding:0 18px;
gap:22px;
}

.gallery-item:nth-child(2),
.gallery-item:nth-child(5){
margin-top:0;
}

.gallery-item img{
height:260px;
}

.gallery-hero{
height:26vh;
}

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

.gallery-filter{
gap:12px;
margin-bottom:35px;
}

.gallery-filter button{
padding:12px 22px;
font-size:14px;
}

}

/* ===== INTRO ===== */
#intro{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:#000;

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

z-index:99999;
overflow:hidden;
transition:opacity .6s ease, visibility .6s;
}

/* ===== IMAGE GRID BACKGROUND ===== */
.intro-grid{
position:absolute;
inset:0;
display:grid;
grid-template-columns:repeat(5,1fr);
height:100%;
overflow:hidden;
}

.grid-item{
position:relative;
background-size:cover;
background-position:center;

transform:translateY(-100%);
animation:slidePanels 1.2s cubic-bezier(.77,0,.18,1) forwards;
}

/* stagger delays */
.grid-item:nth-child(1){animation-delay:.1s;}
.grid-item:nth-child(2){animation-delay:.25s;}
.grid-item:nth-child(3){animation-delay:.4s;}
.grid-item:nth-child(4){animation-delay:.55s;}
.grid-item:nth-child(5){animation-delay:.7s;}

@keyframes slidePanels{
0%{
transform:translateY(-100%);
}

100%{
transform:translateY(0%);
}
}

/* DARK OVERLAY */
#intro::after{
content:'';
position:absolute;
inset:0;
background:rgba(0,0,0,0.65);
}

/* ===== CENTER CONTENT ===== */
.intro-content{
position:relative;
z-index:2;
text-align:center;
}

/* ===== LOGO ===== */
.logo-text{
font-family:'Poppins', sans-serif;
font-size:72px;
font-weight:800;
letter-spacing:6px;
color:#fff;

opacity:0;
transform:scale(0.7);
animation:logoIn .8s ease forwards;
animation-delay:1s;
}

@keyframes logoIn{
to{
opacity:1;
transform:scale(1);
}
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(10px);
}

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

/* ===== BRAND TEXT ===== */
.brand-text{
font-family:'Poppins', sans-serif;
font-size:14px;
letter-spacing:4px;
color:#ccc;
margin-top:10px;

opacity:0;
animation:fadeUp .8s ease forwards;
animation-delay:1.4s;
}

/* ===== LOADER ===== */
.loader{
margin-top:25px;
width:200px;
margin-left:auto;
margin-right:auto;
}

.bar{
height:3px;
background:#fff;
width:0%;
animation:loadbar 2s ease forwards;
margin-bottom:10px;
}

@keyframes loadbar{
to{width:100%;}
}

#percent{
font-size:14px;
color:#aaa;
}

/* ===== HIDE ===== */
#intro.hide{
opacity:0;
visibility:hidden;
}

header{
background:none;
border:none;
box-shadow:none;
}
/* nav links */
nav a{
color:#d6d6d6;
}

nav a:hover,
nav a.active{
color:#111827;
}

/* active page */
nav a.active{
color:#111827;
}
/* premium underline animation */
nav a{
position:relative;
transition:.3s ease;
}

nav a::after{
content:'';
position:absolute;
left:0;
bottom:-6px;

width:0;
height:2px;

background:#e5e7eb;

transition:.3s ease;
}

nav a:hover::after,
nav a.active::after{
width:100%;
}
nav a{
color:#ffffff !important;
}

nav a:hover,
nav a.active{
color:#e5e7eb !important;
}

/* ===============================
   CONSULTATION POPUP
================================*/

/* ===============================
   PREMIUM CHAT BUTTON
================================*/

.consultation-toggle{
position:fixed;

right:22px;
bottom:22px;

width:54px;
height:54px;

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

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

backdrop-filter:blur(10px);

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

border-radius:18px;

cursor:pointer;

z-index:9999;

transition:.35s ease;

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

/* icon */
.consultation-toggle i{
font-size:20px;

color:#fff;
}

/* hover */
.consultation-toggle:hover{
transform:translateY(-4px);

background:#fff;
}

.consultation-toggle:hover i{
color:#111;
}

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

.consultation-popup{
position:fixed;

right:25px;
bottom:105px;

width:340px;

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

backdrop-filter:blur(14px);

padding:30px;

border-radius:24px;

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

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

z-index:9999;

opacity:0;
visibility:hidden;

transform:translateY(20px);

transition:.4s ease;
}

/* active */
.consultation-popup.active{
opacity:1;
visibility:visible;

transform:translateY(0);
}

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

.close-popup{
position:absolute;

top:14px;
right:14px;

background:none;
border:none;

color:#fff;

font-size:18px;

cursor:pointer;

transition:.3s ease;
}

.close-popup:hover{
opacity:.7;
}

/* ===============================
   HEADING
================================*/

.consultation-popup h3{
font-size:28px;

margin-bottom:14px;

color:#ffffff;
}

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

.consultation-popup p{
font-size:15px;
line-height:1.8;

color:#d1d5db;

margin-bottom:22px;
}

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

.popup-btn{
display:inline-block;

padding:14px 24px;

background:#d1d5db;
color:#1f2937;

font-weight:700;
text-decoration:none;

border-radius:50px;

transition:.3s ease;
}

/* hover */
.popup-btn:hover{
background:#e5e7eb;

transform:translateY(-3px);
}

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

@media(max-width:768px){

.consultation-popup{
width:90%;
right:5%;
bottom:95px;
}

.consultation-toggle{
width:58px;
height:58px;

font-size:24px;
}

}

.hero-main-content{
position:absolute;

top:52%;
left:50%;

transform:translate(-50%,-50%);

text-align:center;

z-index:5;

width:100%;

padding:0 40px;
}



/* subtle blue glow */
.hero-main-content::after{
content:'';

position:absolute;
top:-120px;
right:-120px;

width:260px;
height:260px;

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

filter:blur(90px);

border-radius:50%;
}

/* title */
.hero-main-content h2{
font-size:82px;

font-weight:800;

letter-spacing:6px;

line-height:1;

text-transform:uppercase;

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

color:#ffffff;

margin-bottom:38px;

text-shadow:
0 10px 35px rgba(0,0,0,.35);
}

.hero-main-content h3{
font-size:34px;

font-weight:700;

letter-spacing:5px;

line-height:1.2;

text-transform:uppercase;

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

color:#facc15;

margin-bottom:42px;

text-shadow:
0 6px 20px rgba(0,0,0,.28);
}

/* subtitle */
.hero-main-content p{
font-size:20px;

font-weight:300;

letter-spacing:2px;

line-height:2;

font-style:italic;

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

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

text-shadow:
0 2px 12px rgba(0,0,0,.25);
}

@media(max-width:768px){

.hero-main-content{
position:absolute;

top:58%;

left:50%;

transform:translate(-50%,-50%);

width:100%;

padding:0 20px;

text-align:center;
}

.hero-main-content h2{
font-size:clamp(34px,13vw,56px);

font-weight:800;

line-height:.92;

letter-spacing:1px;

margin-bottom:18px;

white-space:normal;

word-break:keep-all;

max-width:100%;

overflow-wrap:break-word;
}
   
.hero-main-content h3{
font-size:clamp(16px,6vw,24px);

font-weight:700;

line-height:1.25;

letter-spacing:2px;

margin-bottom:22px;

white-space:normal;

max-width:100%;
}

.hero-main-content p{
font-size:clamp(11px,2.8vw,15px);

line-height:1.8;

letter-spacing:.5px;

padding:0 6px;
}

}

/* ===============================
   PREMIUM MAP SECTION
================================*/

.map-section{
position:relative;

padding:100px 8%;

overflow:hidden;

background:
linear-gradient(
rgba(5,10,20,.88),
rgba(10,15,25,.94)
),
url('https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=1800&auto=format&fit=crop');

background-size:cover;
background-position:center;
}

/* subtle map glow */

.map-section::before{
content:'';

position:absolute;
inset:0;

background:
radial-gradient(
circle at top right,
rgba(255,255,255,.04),
transparent 35%
);

pointer-events:none;
}

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

.map-header{
position:relative;
z-index:2;

text-align:center;

margin-bottom:45px;
}

.map-header span{
display:inline-block;

font-size:13px;

letter-spacing:4px;

font-weight:700;

color:#94a3b8;

margin-bottom:18px;
}

.map-header h2{
font-size:58px;

font-weight:800;

line-height:1;

margin-bottom:18px;

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

color:#ffffff;
}

.map-header p{
font-size:17px;

color:#cbd5e1;

max-width:700px;

margin:auto;

line-height:1.9;
}

/* ===== MAP WRAPPER ===== */

.map-wrapper{
position:relative;

overflow:hidden;

border-radius:34px;

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

box-shadow:
0 30px 80px rgba(0,0,0,.35);

background:#111827;
}

/* ===== MAP ===== */

.map-wrapper iframe{
width:100%;
height:520px;

border:none;

display:block;

filter:
grayscale(.25)
contrast(1.05)
brightness(.92);
}

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

.map-overlay-card{
position:absolute;

left:40px;
bottom:40px;

width:340px;

padding:30px;

background:rgba(10,15,25,.82);

backdrop-filter:blur(18px);

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

border-radius:28px;

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

.map-overlay-card h3{
font-size:30px;

margin-bottom:12px;

color:#fff;

font-weight:700;
}

.map-overlay-card p{
font-size:15px;

line-height:1.8;

color:#d1d5db;

margin-bottom:24px;
}

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

.map-btn{
display:inline-flex;
align-items:center;
justify-content:center;

padding:14px 28px;

background:#ffffff;
color:#111827;

font-weight:700;

text-decoration:none;

border-radius:50px;

transition:.35s ease;
}

.map-btn:hover{
transform:translateY(-4px);

background:#f3f4f6;
}

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

@media(max-width:768px){

.map-section{
padding:70px 18px;
}

.map-header h2{
font-size:40px;
}

.map-header p{
font-size:15px;
}

.map-wrapper{
border-radius:24px;
}

.map-wrapper iframe{
height:350px;
}

.map-overlay-card{
position:relative;

left:auto;
bottom:auto;

width:100%;

border-radius:0;

padding:24px;
}

.map-overlay-card h3{
font-size:24px;
}

}