*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
scroll-behavior:smooth;
}


:root{

--primary:#00ffbf;
--bg:#071313;
--card:#102525;
--text:#ffffff;

}


.light{

--bg:#f4f4f4;
--card:#ffffff;
--text:#111;

}


body{

background:var(--bg);
color:var(--text);
transition:.4s;
overflow-x:hidden;

}


/* HEADER */

header{

position:fixed;
top:0;
left:0;
width:100%;
padding:20px 8%;
display:flex;
justify-content:space-between;
align-items:center;

background:rgba(0,0,0,.45);
backdrop-filter:blur(15px);

z-index:1000;

}


.logo{

font-size:30px;
font-weight:700;
color:var(--primary);

}


nav a{

color:white;
text-decoration:none;
margin-left:25px;
transition:.3s;

}


nav a:hover{

color:var(--primary);

}


.header-buttons button{

margin-left:10px;

}


.theme-btn,
.menu-btn{

border:none;
background:var(--primary);
padding:10px 15px;
border-radius:20px;
cursor:pointer;

}


.menu-btn{

display:none;

}



/* HERO */


.hero{

height:100vh;

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

padding:20px;

background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.65)
),

url("https://th.bing.com/th/id/OIP.vae-ptUNB9VlfaMqSKSUbwHaEJ?w=275&h=180&c=7&r=0&o=7&dpr=1.5&pid=1.7&rm=3");

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

}


.hero h1{

font-size:65px;

}


.hero span{

color:var(--primary);

}


.hero p{

max-width:700px;
margin:20px auto;

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

}



.btn{

display:inline-block;

padding:15px 35px;

background:var(--primary);

color:#000;

text-decoration:none;

border-radius:40px;

font-weight:bold;

cursor:pointer;

border:none;

transition:.3s;

}


.btn:hover{

transform:translateY(-5px);

}



/* SECTIONS */


section{

padding:100px 8%;

}


.title{

text-align:center;

font-size:40px;

color:var(--primary);

margin-bottom:50px;

}



/* GRID */


.grid{

display:grid;

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

gap:25px;

}



.card,
.testimonial{

background:var(--card);

padding:35px;

border-radius:20px;

transition:.4s;

}


.card:hover{

transform:translateY(-10px);

}


.card h3{

color:var(--primary);

margin-bottom:15px;

}



.price{

color:var(--primary);

margin:15px 0;

}



/* ABOUT */


.about{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}


.about img{

width:100%;

border-radius:20px;

}


.about h2{

color:var(--primary);

font-size:35px;

margin-bottom:20px;

}


.about p{

line-height:2;

}



/* GALLERY */




.gallery img{

width:100%;

height:280px;

object-fit:cover;

border-radius:20px;

border:2px solid rgba(0,255,191,.2);

transition:.5s;

}


.gallery img:hover{

transform:scale(1.05);

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

}



/* FORM */


form{

max-width:600px;

margin:auto;

display:grid;

gap:15px;

}


input,
textarea{

padding:15px;

border:none;

border-radius:10px;

font-size:16px;

}


textarea{

height:130px;

}



.contact-info{

text-align:center;

margin-top:30px;

line-height:2;

}



/* MAP */


.map iframe{

width:100%;

height:350px;

border-radius:20px;

border:0;

}



/* FOOTER */


footer{

background:#050909;

padding:30px;

text-align:center;

}



/* WHATSAPP */


.whatsapp{

position:fixed;

right:25px;

bottom:25px;

width:65px;

height:65px;

background:#25D366;

color:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:30px;

text-decoration:none;

}



/* ANIMATION */


.fade{

opacity:0;

transform:translateY(40px);

transition:1s;

}


.show{

opacity:1;

transform:translateY(0);

}

/* ===================================
   PERFECT MOBILE RESPONSIVE VERSION
=================================== */


@media(max-width:900px){


/* GLOBAL MOBILE FIX */

html,
body{

width:100%;
overflow-x:hidden;

}


img,
iframe{

max-width:100%;

}



/* HEADER */

header{

height:70px;

padding:15px 18px;

}


.logo{

font-size:20px;

white-space:nowrap;

}



.header-buttons{

display:flex;

align-items:center;

gap:8px;

}



.theme-btn,
.menu-btn{

padding:8px 12px;

font-size:15px;

}



.menu-btn{

display:block;

}




/* NAV MENU */


nav{

position:absolute;

top:70px;

left:0;

width:100%;

display:none;

background:#071313;

padding:15px 0;

}



nav.active{

display:block;

}



nav a{

display:block;

margin:18px 0;

font-size:16px;

}





/* HERO SECTION */


.hero{

min-height:100vh;

height:auto;

padding:120px 20px 70px;

}


.hero-content{

width:100%;

}



.hero h1{

font-size:32px;

line-height:1.25;

word-break:break-word;

}


.hero p{

font-size:15px;

line-height:1.8;

margin:20px auto;

}



.btn{

width:100%;

max-width:300px;

padding:14px 20px;

}





/* SECTIONS */


section{

padding:60px 18px;

}



.title{

font-size:28px;

line-height:1.3;

margin-bottom:30px;

}





/* SERVICES / CARDS */


.grid{

display:flex;

flex-direction:column;

gap:20px;

}



.card,
.testimonial{

width:100%;

padding:25px;

}



.card h3{

font-size:19px;

}



.card p,
.testimonial p{

font-size:14px;

line-height:1.7;

}





/* PRICES */


.price{

font-size:28px;

}





/* ABOUT */


.about{

display:flex;

flex-direction:column;

gap:25px;

}



.about img{

width:100%;

height:280px;

object-fit:cover;

}



.about h2{

font-size:26px;

}



.about p{

font-size:15px;

line-height:1.8;

}





/* GALLERY */


.gallery{

display:grid;

grid-template-columns:1fr;

gap:20px;

}



.gallery img{

width:100%;

height:240px;

object-fit:cover;

}




/* CONTACT FORM */


form{

width:100%;

}



input,
textarea{

width:100%;

font-size:15px;

}



textarea{

height:120px;

}




/* MAP */


.map iframe{

width:100%;

height:250px;

}





/* WHATSAPP */


.whatsapp{

width:58px;

height:58px;

right:15px;

bottom:15px;

font-size:28px;

}





footer{

font-size:13px;

padding:20px;

}


}




/* SMALL PHONES */

@media(max-width:400px){


.logo{

font-size:18px;

}



.hero h1{

font-size:27px;

}



.hero p{

font-size:14px;

}



.title{

font-size:24px;

}



section{

padding-left:15px;

padding-right:15px;

}


.card{

padding:20px;

}


}