/* =============================== */
/* RESET */
/* =============================== */

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Montserrat',sans-serif;
background:#0a0a0a;
color:white;
line-height:1.6;
overflow-x:hidden;
}

/* =============================== */
/* CONTAINER */
/* =============================== */

.container{
max-width:1300px;
margin:auto;
padding:0 20px;
}

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

header{

position:fixed;
top:0;
left:0;
width:100%;

background:rgba(0,0,0,0.5);

backdrop-filter:blur(12px);

z-index:1000;

transition:0.4s;

}

.nav-container{

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

padding:20px 0;

}

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

.logo{

font-size:22px;
font-weight:700;
letter-spacing:2px;

}

/* =============================== */
/* NAVIGATION */
/* =============================== */

nav a{

margin-left:30px;
text-decoration:none;
color:white;
font-size:14px;

letter-spacing:1px;

position:relative;

transition:0.3s;

}

nav a:hover{
color:#ff2c2c;
}

nav a::after{

content:"";

position:absolute;

left:0;
bottom:-5px;

width:0%;
height:2px;

background:#ff2c2c;

transition:0.3s;

}

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

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

.hero{

height:100vh;

background:url("https://images.unsplash.com/photo-1503376780353-7e6692767b70");

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

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

position:relative;

}

.hero-overlay{

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

width:100%;
height:100%;

background:linear-gradient(
180deg,
rgba(0,0,0,0.5),
rgba(0,0,0,0.9)
);

}

.hero-content{

position:relative;
text-align:center;
max-width:800px;

}

.hero h1{

font-family:'Playfair Display', serif;

font-size:72px;

font-weight:600;

letter-spacing:1px;

line-height:1.2;

margin-bottom:25px;
position:relative;

}
.hero h1::after{

content:"";

display:block;

width:120px;

height:3px;

background:linear-gradient(
90deg,
transparent,
#ff2c2c,
transparent
);

margin:25px auto 0 auto;

}

.hero p{

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

font-size:18px;

letter-spacing:2px;

text-transform:uppercase;

color:#cfcfcf;

margin-bottom:35px;

}

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

.btn-primary{

display:inline-block;

padding:15px 40px;

background:#e11d2e;

border-radius:6px;

text-decoration:none;

color:white;

font-weight:500;

transition:0.3s;

}

.btn-primary:hover{

background:#ff1f3c;

transform:translateY(-2px);

}

.btn-secondary{

display:inline-block;

padding:15px 40px;

border:1px solid white;

border-radius:6px;

text-decoration:none;

color:white;

margin-left:15px;

transition:0.3s;

}

.btn-secondary:hover{

background:white;
color:black;

}

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

.section-title{

text-align:center;

font-size:40px;

margin-bottom:70px;

}

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

.services{

padding:120px 0;

}

.services-grid{

display:grid;

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

gap:40px;

}

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

.service-card{

background:#121212;

padding:40px;

border-radius:12px;

transition:0.4s;

position:relative;

overflow:hidden;

}

.service-card:hover{

transform:translateY(-10px);

background:#1b1b1b;

}

/* glow */

.service-card::before{

content:"";

position:absolute;

top:-50%;
left:-50%;

width:200%;
height:200%;

background:radial-gradient(
circle,
rgba(255,0,0,0.2),
transparent
);

opacity:0;

transition:0.5s;

}

.service-card:hover::before{

opacity:1;

}

/* icon */

.service-icon{

font-size:40px;

font-weight:700;

color:#ff2c2c;

margin-bottom:20px;

}

/* text */

.service-card h3{

margin-bottom:15px;

}

.service-card p{

color:#aaa;

}

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

.process{

padding:120px 0;

background:#0f0f0f;

}

.process-grid{

display:grid;

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

gap:40px;

}

.process-step{

text-align:center;

padding:30px;

}

/* number */

.step-number{

width:70px;
height:70px;

border-radius:50%;

background:#e11d2e;

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

margin:auto;

font-size:22px;
font-weight:600;

margin-bottom:20px;

}

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

.before-after{

padding:120px 0;

}

.compare-container{

position:relative;

max-width:900px;
height:500px;

margin:60px auto;

overflow:hidden;

border-radius:12px;

}

.compare-container img{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

pointer-events:none;

}

.before-wrapper{

position:absolute;

top:0;
left:0;

width:50%;
height:100%;

overflow:hidden;

}

#compare-slider{

position:absolute;

bottom:20px;
left:50%;

transform:translateX(-50%);

width:70%;

z-index:10;

}

.compare-container img{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

top:0;
left:0;

}

.before-wrapper{

position:absolute;

top:0;
left:0;

width:50%;
height:100%;

overflow:hidden;

}

#compare-slider{

position:absolute;

bottom:25px;
left:50%;

transform:translateX(-50%);

width:70%;

z-index:10;

cursor:pointer;

}

.compare-container img{

width:100%;
display:block;

}

.before{

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

width:50%;
height:100%;

object-fit:cover;

}

.after{

width:100%;
height:100%;

object-fit:cover;

}

/* slider */

#compare-slider{

width:100%;

margin-top:20px;

}

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

.gallery{

padding:120px 0;

background:#0f0f0f;

}

.gallery-grid{

display:grid;

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

gap:20px;

}

.gallery-grid img{

width:100%;

border-radius:10px;

transition:0.4s;

cursor:pointer;

}

.gallery-grid img:hover{

transform:scale(1.05);

}

/* =============================== */
/* PRICING */
/* =============================== */

.pricing{

padding:120px 0;

}

.pricing-grid{

display:grid;

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

gap:40px;

}

.price-card{

background:#141414;

padding:40px;

border-radius:12px;

text-align:center;

transition:0.4s;

}

.price-card:hover{

transform:translateY(-10px);

}

/* featured */

.featured{

border:2px solid #e11d2e;

}

/* price */

.price{

font-size:36px;

margin:20px 0;

}

/* list */

.price-card ul{

list-style:none;

margin-bottom:30px;

}

.price-card ul li{

margin-bottom:10px;

color:#ccc;

}
/* =============================== */
/* REVIEWS */
/* =============================== */

.reviews{

padding:120px 0;

background:#0a0a0a;

}

.reviews-grid{

display:grid;

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

gap:40px;

}

.review{

background:#121212;

padding:40px;

border-radius:12px;

position:relative;

transition:0.4s;

}

.review:hover{

transform:translateY(-10px);

background:#1b1b1b;

}

.review p{

color:#ccc;

margin-bottom:20px;

font-size:15px;

}

.review span{

font-size:14px;

color:#ff2c2c;

}

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

.cta{

padding:120px 0;

background:linear-gradient(
135deg,
#0a0a0a,
#1a1a1a
);

text-align:center;

}

.cta h2{

font-size:42px;

margin-bottom:40px;

}

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

.contact{

padding:120px 0;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:start;

}

.contact-info p{

margin-bottom:20px;

font-size:16px;

color:#ccc;

}

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

.contact-form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input{

padding:15px;

border-radius:6px;

border:none;

background:#141414;

color:white;

font-size:14px;

}

.contact-form textarea{

padding:15px;

border-radius:6px;

border:none;

background:#141414;

color:white;

height:120px;

resize:none;

}

/* focus */

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

outline:2px solid #e11d2e;

}

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

footer{

background:#050505;

padding:40px 0;

text-align:center;

}

.footer-container{

display:flex;

justify-content:center;

}

/* =============================== */
/* ANIMATIONS */
/* =============================== */

.fade-up{

opacity:0;

transform:translateY(40px);

transition:0.8s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/* =============================== */
/* GLOW EFFECT */
/* =============================== */

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:100%;
height:100%;

background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.4),
transparent
);

transition:0.6s;

}

.btn-primary:hover::before{

left:100%;

}

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

.gallery-grid img{

filter:brightness(0.85);

}

.gallery-grid img:hover{

filter:brightness(1);

}

/* =============================== */
/* SCROLLBAR */
/* =============================== */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#0a0a0a;

}

::-webkit-scrollbar-thumb{

background:#e11d2e;

border-radius:10px;

}

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

@media(max-width:1000px){

.hero h1{

font-size:50px;

}

.section-title{

font-size:34px;

}

}

/* tablet */

@media(max-width:800px){

nav{

display:none;

}

.hero{

padding:0 20px;

}

.services-grid{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:1fr;

}

.pricing-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

}

/* mobile */

@media(max-width:500px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.section-title{

font-size:28px;

}

.btn-primary,
.btn-secondary{

padding:12px 25px;

}

}

/* =============================== */
/* EXTRA EFFECTS */
/* =============================== */

.service-card,
.price-card,
.review{

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

}

.service-card:hover,
.price-card:hover,
.review:hover{

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

}

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

.hero{

background-attachment:fixed;

}

/* =============================== */
/* IMAGE SHADOW */
/* =============================== */

.gallery-grid img{

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

}

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

.service-card::after{

content:"";

position:absolute;

bottom:0;
left:0;

width:100%;
height:2px;

background:linear-gradient(
90deg,
transparent,
#ff2c2c,
transparent
);

opacity:0;

transition:0.4s;

}

.service-card:hover::after{

opacity:1;

}

/* =============================== */
/* END */
/* =============================== */
.before-after{
padding:120px 0;
}



.compare-container img{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

top:0;
left:0;

}

.before-wrapper{

position:absolute;

top:0;
left:0;

width:50%;
height:100%;

overflow:hidden;

}

#compare-slider{

position:absolute;

bottom:25px;
left:50%;

transform:translateX(-50%);

width:70%;

z-index:10;

cursor:pointer;

}

.compare-container img{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

top:0;
left:0;

}

.before-wrapper{

position:absolute;

top:0;
left:0;

width:50%;
height:100%;

overflow:hidden;

}

#compare-slider{

position:absolute;

bottom:25px;
left:50%;

transform:translateX(-50%);

width:70%;

z-index:10;

cursor:pointer;

}

.compare-container img{

width:100%;
height:100%;
object-fit:cover;

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

}

.before-wrapper{

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

width:50%;
height:100%;

overflow:hidden;

}

#compare-slider{

position:absolute;

bottom:20px;
left:50%;

transform:translateX(-50%);

width:80%;

z-index:10;

}
#compare-slider{

-webkit-appearance:none;

height:6px;

background:#ddd;

border-radius:5px;

}

#compare-slider::-webkit-slider-thumb{

-webkit-appearance:none;

width:20px;
height:20px;

background:#ff2c2c;

border-radius:50%;

cursor:pointer;

}
/* =============================== */
/* 3D CARD EFFECT */
/* =============================== */

.service-card{

transform-style:preserve-3d;

transition:transform 0.2s ease;

}

.service-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:radial-gradient(

circle at var(--x) var(--y),

rgba(255,50,50,0.25),

transparent 40%

);

opacity:0;

transition:opacity 0.3s;

}

.service-card:hover::before{

opacity:1;

}
.map-container{

margin-top:40px;

border-radius:14px;

overflow:hidden;

border:2px solid rgba(255,255,255,0.08);

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

}

.map-container iframe{

width:100%;

height:400px;

border:none;

}