/* =====================================================
   MODULHAUS PREMIUM MODULAR HOME WEBSITE
   STYLE SHEET

   Theme:
   Luxury Architecture
   Dark Green + Champagne Gold

===================================================== */



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


*{

margin:0;

padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:

"Helvetica Neue",
Arial,
sans-serif;

color:#222;

background:#fff;

line-height:1.6;

}



img{

width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

}



.container{


width:1200px;

max-width:90%;

margin:auto;

}




.section{

padding:100px 0;

}




h2{

font-family:Georgia,serif;

font-size:48px;

font-weight:500;

}







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



.header{

position:absolute;

top:0;

left:0;

width:100%;

z-index:99;

padding:30px 0;


}



.nav{

display:flex;

align-items:center;

justify-content:space-between;


}



.logo{


font-size:28px;

letter-spacing:5px;

font-weight:bold;

color:#d5ad63;


}



.logo span{


display:block;

font-size:10px;

letter-spacing:8px;

color:white;

margin-top:5px;

}




.nav ul{


display:flex;

gap:35px;

list-style:none;


}



.nav ul a{


color:white;

font-size:14px;

transition:.3s;


}



.nav ul a:hover{


color:#d5ad63;


}



.quote-btn{


background:#d5ad63;

padding:13px 30px;

color:white;

font-size:14px;

}





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


.hero{


height:850px;


background-image:


url(
"https://images.unsplash.com/photo-1600585154340-be6161a56a0c"
);


background-size:cover;


background-position:center;


display:flex;


align-items:center;


position:relative;


color:white;


}



.hero-mask{


position:absolute;


inset:0;


background:

linear-gradient(

90deg,

rgba(0,0,0,.7),

rgba(0,0,0,.25)

);


}




.hero-content{


position:relative;

z-index:2;


}



.hero h1{


font-family:Georgia,serif;


font-size:75px;


line-height:1.15;


font-weight:400;


margin-bottom:30px;


}



.hero p{


font-size:20px;


max-width:550px;


margin-bottom:40px;


color:#eee;


}




.gold-btn{


display:inline-block;


background:#d5ad63;


padding:16px 40px;


margin-right:15px;


color:white;


}




.line-btn{


display:inline-block;


border:1px solid white;


padding:15px 40px;


color:white;


}








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


.products h2{


text-align:center;


margin-bottom:60px;


}




.product-grid{


display:grid;


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


gap:30px;


}




.card{


background:white;


box-shadow:

0 15px 35px rgba(0,0,0,.08);


border-radius:8px;


overflow:hidden;


transition:.4s;


}




.card:hover{


transform:translateY(-10px);


}




.card img{


height:260px;


object-fit:cover;


}



.card h3{


font-family:Georgia,serif;


font-size:24px;


padding:25px 25px 10px;


}



.card p{


padding:0 25px;


color:#777;


font-size:15px;


}



.card a{


display:block;


padding:25px;


color:#b68c43;


font-weight:bold;


}









/* =========================
 WHY CHOOSE
========================= */


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



.stats{


background:#033d36;


color:white;


padding:70px 0;


}



.stats .container{


display:grid;


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


text-align:center;


}



.stats strong{


display:block;


font-size:48px;


color:#d5ad63;


font-family:Georgia,serif;


}



.stats span{


font-size:14px;


color:#ddd;


}







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



.about-box{


display:grid;


grid-template-columns:1fr 1fr;


gap:70px;


align-items:center;


}



.about-box img{


height:600px;


object-fit:cover;


border-radius:10px;


}



.about-box small{


color:#c39a52;


letter-spacing:3px;


}



.about-box h2{


margin:20px 0;


line-height:1.2;


}



.about-box p{


color:#666;


margin-bottom:25px;


}



.about-box ul{


list-style:none;


}



.about-box li{


margin:15px 0;


}



.about-box button{


margin-top:30px;


background:#d5ad63;


border:none;


padding:15px 35px;


color:white;


}







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



@media(max-width:900px){


.nav ul{


display:none;


}



.hero h1{


font-size:45px;


}



.product-grid,


.why-grid,


.stats .container,


.about-box{


grid-template-columns:1fr;


}



.section{


padding:60px 0;


}



}