@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');


:root{

--primary:#0F172A;
--secondary:#C9A227;
--white:#ffffff;
--light:#f8f9fc;
--dark:#1f2937;
--gray:#6b7280;

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

}


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--white);
color:var(--dark);
overflow-x:hidden;

}

img{

width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1200px;
margin:auto;

}

.section{

padding:90px 0;

}

.title{

text-align:center;
margin-bottom:60px;

}

.title h5{

color:var(--secondary);
letter-spacing:2px;
margin-bottom:10px;

}

.title h2{

font-size:40px;
color:var(--primary);

}


.btn{

display:inline-block;
padding:14px 34px;
background:var(--secondary);
color:white;
border-radius:40px;
font-weight:600;
transition:.4s;

}

.btn:hover{

background:#b78d13;
transform:translateY(-4px);

}

.btn-outline{

display:inline-block;
padding:14px 34px;
border:2px solid white;
color:white;
border-radius:40px;
margin-left:15px;
transition:.4s;

}

.btn-outline:hover{

background:white;
color:var(--primary);

}

   

header{

position:fixed;
width:100%;
z-index:1000;

}

.navbar{

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

padding:12px 8%;

background:rgba(255, 255, 255, 0.92);

backdrop-filter:blur(10px);

}

.logo img{

width:250px;

}

.nav-links{

display:flex;
gap:35px;

}

.nav-links a{

color:var(--secondary);
font-weight:500;
transition:.3s;

}

.nav-links a:hover{

color:rgb(0, 0, 0);
text-decoration-color: #C9A227;

}

.menu{

display:none;
color:white;
font-size:28px;
cursor:pointer;

}


.hero{

position:relative;

height:100vh;

background:url(images/hero.jpg) center/cover no-repeat;

display:flex;

align-items:center;

padding:0 8%;

color:white;

}

.overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

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

}

.hero-content{

position:relative;
max-width:650px;
z-index:2;

}

.hero h4{

color:var(--secondary);

letter-spacing:3px;

margin-bottom:20px;

}

.hero h1{

font-size:65px;
font-weight:800;
line-height:1.2;

margin-bottom:25px;

}

.hero h1 span{

color:var(--secondary);

}

.hero p{

font-size:18px;

line-height:1.8;

margin-bottom:35px;

color:#ddd;

}


.hero-card{

position:absolute;

right:8%;
bottom:60px;

background:white;

display:flex;

gap:40px;

padding:30px;

border-radius:20px;

box-shadow:var(--shadow);

z-index:3;

}

.hero-card h2{

color:var(--secondary);

font-size:34px;

}

.hero-card p{

color:#555;
font-size:14px;

}


.about .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.about-image img{

border-radius:20px;

box-shadow:var(--shadow);

}

.about-content h5{

color:var(--secondary);

margin-bottom:15px;

letter-spacing:2px;

}

.about-content h2{

font-size:42px;

margin-bottom:25px;

color:var(--primary);

}

.about-content p{

line-height:1.9;

color:#555;

margin-bottom:30px;

}

.about-features{

display:grid;

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

gap:20px;

margin-bottom:35px;

}

.about-features div{

text-align:center;

padding:25px;

border-radius:15px;

background:var(--light);

transition:.4s;

}

.about-features div:hover{

background:var(--secondary);

color:white;

transform:translateY(-8px);

}

.about-features i{

font-size:35px;

margin-bottom:15px;

}


.services{

background:#fafafa;

}

.service-grid{

display:grid;

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

gap:30px;

}

.service-card{

background:white;

padding:40px;

border-radius:20px;

text-align:center;

transition:.4s;

box-shadow:0 5px 25px rgba(0,0,0,.08);

}

.service-card:hover{

transform:translateY(-12px);

}

.service-card i{

font-size:48px;

color:var(--secondary);

margin-bottom:20px;

}

.service-card h3{

margin-bottom:15px;

color:var(--primary);

}

.service-card p{

line-height:1.8;

color:#666;

}


.why{

background:var(--primary);

padding:80px 0;

}

.why .container{

display:grid;

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

gap:30px;

}

.box{

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

padding:40px 25px;

border-radius:20px;

text-align:center;

transition:.4s;

color:white;

backdrop-filter:blur(5px);

}

.box:hover{

background:var(--secondary);

transform:translateY(-10px);

}

.box i{

font-size:48px;

margin-bottom:20px;

}

.box h3{

font-size:22px;

font-weight:600;

}


.portfolio{

background:white;

}

.gallery{

display:grid;

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

gap:30px;

}

.project{

position:relative;

overflow:hidden;

border-radius:20px;

box-shadow:var(--shadow);

cursor:pointer;

}

.project img{

height:350px;

object-fit:cover;

transition:.5s;

}

.project:hover img{

transform:scale(1.12);

}

.project::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

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

opacity:0;

transition:.5s;

z-index:1;

}

.project:hover::before{

opacity:1;

}

.project .content{

position:absolute;

left:30px;

bottom:25px;

color:white;

z-index:2;

opacity:0;

transition:.5s;

}

.project:hover .content{

opacity:1;

bottom:40px;

}

.project h3{

font-size:28px;

}


.testimonial{

background:#f8f9fc;

}

.testimonial-box{

max-width:850px;

margin:auto;

background:white;

padding:50px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

}

.testimonial-box p{

font-size:20px;

line-height:2;

color:#555;

margin-bottom:30px;

font-style:italic;

}

.testimonial-box h3{

color:#FFD700;

font-size:30px;

margin-bottom:10px;

}

.testimonial-box h4{

color:var(--primary);

}


.contact{

background:white;

}

.contact .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}

.contact-info h2{

font-size:42px;

margin-bottom:20px;

color:var(--primary);

}

.contact-info p{

line-height:1.8;

margin-bottom:30px;

color:#666;

}

.contact-info div{

margin-bottom:20px;

font-size:18px;

display:flex;

align-items:center;

gap:15px;

}

.contact-info i{

color:var(--secondary);

font-size:24px;

}

.contact-form{

background:#fafafa;

padding:40px;

border-radius:20px;

box-shadow:var(--shadow);

}

.contact-form input,

.contact-form textarea{

width:100%;

padding:16px;

margin-bottom:20px;

border:1px solid #ddd;

border-radius:10px;

outline:none;

font-size:16px;

}

.contact-form textarea{

height:170px;

resize:none;

}

.contact-form button{

border:none;

cursor:pointer;

width:100%;

}



footer{

background:var(--primary);

color:white;

padding-top:70px;

}

.footer-content{

width:90%;

max-width:1200px;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:60px;

padding-bottom:40px;

}

.footer-content h2{

margin-bottom:20px;

}

.footer-content h3{

margin-bottom:20px;

color:var(--secondary);

}

.footer-content p{

line-height:1.8;

color:#ddd;

}

.footer-content ul li{

margin-bottom:12px;

cursor:pointer;

transition:.3s;

}

.footer-content ul li:hover{

color:var(--secondary);

padding-left:5px;

}

.social{

display:flex;

gap:15px;

margin-top:20px;

}

.social i{

width:45px;

height:45px;

background:white;

color:var(--primary);

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

cursor:pointer;

transition:.3s;

}

.social i:hover{

background:var(--secondary);

color:white;

transform:translateY(-5px);

}

.copyright{

text-align:center;

padding:25px;

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

font-size:15px;

color:#ddd;

}


::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--secondary);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#eee;

}


@media(max-width:992px){

.hero h1{

font-size:48px;

}

.hero-card{

position:relative;

right:auto;

bottom:auto;

margin-top:40px;

}

.about .container,

.contact .container{

grid-template-columns:1fr;

}

.service-grid{

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

}

.why .container{

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

}

.gallery{

grid-template-columns:1fr;

}

.footer-content{

grid-template-columns:1fr;

text-align:center;

}

.social{

justify-content:center;

}

}

@media(max-width:768px){

.nav-links{

display:none;

}

.menu{

display:block;

}

.hero{

text-align:center;

justify-content:center;

}

.hero h1{

font-size:38px;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.btn-outline{

margin-left:0;

}

.hero-card{

flex-direction:column;

width:100%;

margin-top:30px;

}

.service-grid{

grid-template-columns:1fr;

}

.about-features{

grid-template-columns:1fr;

}

.why .container{

grid-template-columns:1fr;

}

.title h2{

font-size:32px;

}

.about-content h2,

.contact-info h2{

font-size:34px;

}

}

@media(max-width:480px){

.hero{

padding:120px 20px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

.section{

padding:70px 0;

}

.contact-form{

padding:25px;

}

}