/* =====================================
   LIVMORE LUXURY
   PREMIUM WEBSITE CSS
   PART 1
===================================== */



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



:root{

--black:#080808;

--dark:#111111;

--gold:#c9a24d;

--light-gold:#e8c66d;

--white:#ffffff;

--cream:#f7f4ed;

--grey:#777;

}




*{

margin:0;

padding:0;

box-sizing:border-box;

}




html{

scroll-behavior:smooth;

}



body{

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

background:var(--cream);

color:#111;

overflow-x:hidden;

}




h1,h2,h3{

font-family:'Cinzel',serif;

letter-spacing:1px;

}




a{

text-decoration:none;

color:inherit;

}





img{

max-width:100%;

display:block;

}









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



.header{

position:fixed;

top:0;

left:0;

width:100%;

height:90px;

padding:0 7%;

display:flex;

align-items:center;

justify-content:space-between;

background:rgba(5,5,5,.95);

z-index:999;

border-bottom:1px solid rgba(201,162,77,.25);

}





.logo-area{

display:flex;

align-items:center;

gap:15px;

}





.logo{

width:65px;

height:65px;

object-fit:contain;

}





.brand-name h2{

color:white;

font-size:24px;

font-weight:600;

}





.brand-name span{

color:var(--gold);

}





.brand-name p{

font-size:10px;

letter-spacing:3px;

color:var(--gold);

margin-top:5px;

}





.nav{

display:flex;

align-items:center;

gap:30px;

}





.nav a{

font-size:13px;

letter-spacing:1px;

color:white;

transition:.3s;

}





.nav a:hover{

color:var(--gold);

}





.nav .quote{

background:var(--gold);

color:#000;

padding:13px 22px;

}





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



.hero{
    height:100vh;
    background:url("images/hero.jpg") center center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}





.hero-dark{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,0.20),
        rgba(0,0,0,0.05)
    );
}





.hero-content{
    position:relative;
    z-index:2;
    color:#fff;
    width:min(90%,1200px);
    margin:auto;
}





.hero-content h5{

font-size:16px;

letter-spacing:5px;

color:var(--gold);

margin-bottom:25px;

}





.hero-content h1{
    font-size:clamp(42px,7vw,80px);
    line-height:1.1;
    letter-spacing:4px;
    font-weight:700;
}



.hero-content p{
    max-width:650px;
    font-size:20px;
    line-height:1.8;
    margin:30px 0;
}



.btn{

display:inline-block;

background:var(--gold);

color:#000;

padding:16px 35px;

font-size:14px;

font-weight:600;

letter-spacing:2px;

transition:.4s;

}





.btn:hover{

background:white;

}









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



.section-title{

text-align:center;

font-size:42px;

margin-bottom:60px;

position:relative;

}





.section-title:after{

content:"";

width:80px;

height:2px;

background:var(--gold);

display:block;

margin:20px auto;

}









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



.services{

padding:100px 8%;

background:white;

}





.service-container{

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

}





.service-box{

background:#fff;

padding:40px 25px;

text-align:center;

border:1px solid #eee;

transition:.4s;

}





.service-box:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.12);

}





.icon{

font-size:45px;

margin-bottom:25px;

}





.service-box h3{

font-size:20px;

margin-bottom:15px;

}





.service-box p{

color:#666;

line-height:1.7;

font-size:14px;

}









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



.about{

padding:100px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

background:var(--cream);

}





.about-text h2{

font-size:45px;

margin-bottom:25px;

}





.about-text p{

line-height:2;

color:#555;

margin:30px 0;

}





.gold-line{

width:90px;

height:3px;

background:var(--gold);

}
/* ================= PROJECTS ================= */



.projects{

padding:100px 8%;

background:white;

}





.project-grid{

display:grid;

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

gap:30px;

}





.project-card{

position:relative;

overflow:hidden;

background:#000;

}





.project-card img{

width:100%;

height:380px;

object-fit:cover;

transition:.6s;

}





.project-card:hover img{

transform:scale(1.1);

}





.project-card h3{

position:absolute;

bottom:0;

left:0;

width:100%;

padding:25px;

background:linear-gradient(
transparent,
rgba(0,0,0,.8)
);

color:white;

font-size:22px;

letter-spacing:2px;

}








/* ================= INTERIOR COLLECTION ================= */



.interior{

padding:100px 8%;

background:var(--cream);

}





.interior-grid{

display:grid;

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

gap:40px;

}





.interior-item{

background:white;

display:flex;

align-items:center;

overflow:hidden;

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

}





.interior-item img{

width:50%;

height:320px;

object-fit:cover;

}





.interior-text{

padding:30px;

}





.interior-text h3{

font-size:25px;

color:var(--gold);

margin-bottom:20px;

}





.interior-text p{

line-height:1.8;

color:#555;

}








/* ================= DARK FEATURE SECTION ================= */



.feature-dark{

padding:100px 8%;

background:#080808;

color:white;

}





.feature-light{

padding:100px 8%;

background:white;

}





.feature-content{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}





.feature-content img{

width:100%;

height:500px;

object-fit:cover;

}





.feature-content h2{

font-size:50px;

color:var(--gold);

margin-bottom:25px;

}





.feature-content p{

line-height:2;

font-size:17px;

color:#ddd;

margin-bottom:35px;

}








/* ================= STATISTICS ================= */



.statistics{

padding:70px 8%;

background:#080808;

}





.stats-container{

display:grid;

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

gap:30px;

text-align:center;

}





.stat-box{

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

color:white;

}





.stat-box h2{

font-size:55px;

color:var(--gold);

}





.stat-box p{

letter-spacing:2px;

font-size:13px;

}









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



.why{

padding:100px 8%;

background:var(--cream);

}





.why-container{

display:grid;

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

gap:30px;

}





.why-box{

background:white;

padding:45px 30px;

text-align:center;

border-top:3px solid var(--gold);

}





.why-box h3{

font-size:25px;

margin-bottom:20px;

}





.why-box p{

line-height:1.8;

color:#666;

}









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



.contact{

padding:100px 8%;

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

background:white;

}





.contact-left h2{

font-size:45px;

}





.contact-left p{

margin:20px 0;

line-height:1.8;

color:#555;

}





.contact-form form{

width:100%;

}





.form-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}





.contact-form input,
.contact-form select,
.contact-form textarea{

width:100%;

padding:16px;

margin-bottom:20px;

border:1px solid #ddd;

font-family:Montserrat;

}





.contact-form textarea{

height:150px;

}





.contact-form button{

width:100%;

padding:18px;

background:var(--gold);

border:none;

font-weight:bold;

letter-spacing:2px;

cursor:pointer;

}








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



.footer{

background:#070707;

color:white;

padding:70px 8% 30px;

}





.footer-container{

display:grid;

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

gap:40px;

}





.footer img{

width:80px;

}





.footer h3{

color:var(--gold);

margin-bottom:25px;

}





.footer a{

display:block;

color:#ccc;

margin:12px 0;

}





.footer p{

color:#ccc;

line-height:1.8;

}





.copyright{

margin-top:50px;

padding-top:25px;

border-top:1px solid #333;

text-align:center;

color:#aaa;

}









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



@media(max-width:1100px){


.service-container{

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

}


.project-grid{

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

}


.stats-container{

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

}


.footer-container{

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

}


}




@media(max-width:768px){



.header{

height:auto;

padding:20px;

flex-direction:column;

gap:20px;

}




.nav{

flex-wrap:wrap;

justify-content:center;

gap:15px;

}





.hero-content{

width:90%;

}





.hero-content h1{

font-size:42px;

}





.services,
.projects,
.interior,
.contact{

padding:70px 5%;

}




.service-container,
.project-grid,
.interior-grid,
.feature-content,
.about,
.contact,
.why-container{

grid-template-columns:1fr;

}





.interior-item{

display:block;

}





.interior-item img{

width:100%;

}





.feature-content img{

height:350px;

}





.stats-container{

grid-template-columns:1fr;

}





.stat-box{

border:none;

}





.form-row{

grid-template-columns:1fr;

}





.footer-container{

grid-template-columns:1fr;

}
/* =====================================================
   LIVMORE LUXURY RESPONSIVE IMPROVEMENTS
   ADD THIS AT THE END OF style.css
===================================================== */


/* Prevent all overflow issues */
html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}


/* Universal responsive images */
img{
    max-width:100%;
    height:auto;
    object-fit:cover;
}


/* Main container control */
.container,
section{
    width:100%;
}


/* Fluid heading sizes */
h1{
    font-size:clamp(36px,5vw,80px);
}

h2{
    font-size:clamp(28px,3vw,45px);
}

h3{
    font-size:clamp(20px,2vw,28px);
}


/* Better button size for mobile */
button,
.btn,
a.quote{
    min-height:45px;
    padding:14px 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}



/* ===============================
   TABLET
   768px - 1024px
================================ */

@media(max-width:1024px){

.header{
    padding:20px 5%;
}


.logo{
    width:55px;
    height:auto;
}


.nav{
    gap:18px;
}


.hero-content{
    width:90%;
}


.hero-content h1{
    font-size:55px;
}


.service-container{
    grid-template-columns:repeat(2,1fr);
}


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


.project-grid{
    grid-template-columns:repeat(2,1fr);
}


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


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


.footer-container{
    grid-template-columns:repeat(2,1fr);
}


}






/* ===============================
   MOBILE
   481px - 767px
================================ */


/* MOBILE HEADER FIX */

@media(max-width:767px){

.header{

height:80px;
padding:10px 20px;
flex-direction:row;
justify-content:space-between;

}


.logo{

width:55px;
height:auto;

}


.brand-name h2{

font-size:16px;

}


.brand-name p{

font-size:7px;

}


/* hide menu normally */

.nav{

display:none;

}


/* show when clicked */

.nav.active{

display:flex;

position:absolute;

top:80px;

left:0;

width:100%;

background:#080808;

padding:25px;

flex-direction:column;

text-align:center;

z-index:999;

}


.menu-toggle{

display:block;

font-size:30px;

color:#c9a24d;

}


/* hero text fix */


.hero-content h1{

font-size:clamp(35px,9vw,45px);

line-height:1.1;

letter-spacing:2px;

}


.hero-content p{

font-size:15px;

line-height:1.6;

}


}
/* ===============================
   MOBILE CONTENT FIX
   ADD AFTER YOUR EXISTING CSS
================================ */


*{
    box-sizing:border-box;
}


html,body{
    width:100%;
    overflow-x:hidden;
}


img{
    max-width:100%;
    height:auto;
    display:block;
}


/* Services cards mobile */

.services,
.services-container,
.service-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:25px;

}


.service-card{

    width:100%;
}



/* About section mobile */

.about,
.about-section{

    display:flex;
    flex-direction:column;

}


.about img{

    width:100%;
    margin-top:30px;

}



/* Our work gallery mobile */


.gallery,
.work-grid,
.projects-grid{

    display:grid;
    grid-template-columns:1fr;
    gap:25px;

}


.gallery-item,
.project-card{

    width:100%;

}


.gallery-item img,
.project-card img{

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

}


/* Text spacing */

section{

    width:100%;
    max-width:100%;
    padding-left:25px;
    padding-right:25px;

}


/* buttons */

button,
.btn,
.quote{

    min-height:48px;
    padding:14px 25px;

}
@media (max-width:768px){

.hero{
    height:90vh;
    background-position:center center;
}

.hero-content{
    width:90%;
}

.hero-content h5{
    font-size:14px;
    letter-spacing:3px;
}

.hero-content h1{
    font-size:42px;
    letter-spacing:2px;
}

.hero-content p{
    font-size:16px;
    line-height:1.7;
}

.btn{
    padding:14px 28px;
    font-size:13px;
}

}