/* =========================================
   MZ SIGNATURE CABINETRY
   LUXURY WEBSITE CSS
   PART 1/6
   RESET + GLOBAL + NAV + HERO
========================================= */


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

* {
    box-sizing: border-box;
}


html {
    margin:0;
    padding:0;
    width:100%;
    scroll-behavior:smooth;
    background:#f7f6f2;
}


body {

    margin:0;
    padding:0;

    width:100%;

    overflow-x:hidden;

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

    color:#222;

    background:#f7f6f2;

}



img {

    max-width:100%;

    display:block;

}



h1,
h2,
h3 {

    font-family:'Playfair Display', serif;

    margin-top:0;

}



p {

    line-height:1.8;

}



a {

    text-decoration:none;

    transition:.3s ease;

}





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


nav {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    padding:25px 7%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    z-index:1000;

}



.logo {

    flex-shrink:0;

}



.logo img {

    width:180px;

    height:auto;

    transition:.3s ease;

}



.logo img:hover {

    opacity:.85;

}




.menu {

    display:flex;

    align-items:center;

    gap:35px;

}



.menu a {

    color:white;

    font-size:15px;

    font-weight:500;

    position:relative;

    padding-bottom:8px;

}




.menu a::after {

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:#b89045;

    transition:.3s ease;

}



.menu a:hover::after,
.menu a.active::after {

    width:100%;

}



.menu a:hover,
.menu a.active {

    color:#b89045;

}





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


.hero {

    height:90vh;

    min-height:650px;

    background:

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

    url("kitchen.webp");


    background-size:cover;

    background-position:center;


    display:flex;

    justify-content:center;

    align-items:center;


    text-align:center;

    color:white;

}



.hero-content {

    width:70%;

    max-width:1000px;

}



.hero h1 {

    font-size:70px;

    letter-spacing:3px;

    margin-bottom:20px;

}



.hero h2 {

    font-size:35px;

    font-weight:400;

    margin-bottom:20px;

}



.hero p {

    font-size:20px;

}



.location {

    margin-top:20px;

    font-size:16px;

    letter-spacing:1px;

    opacity:.9;

}





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


button {

    border:none;

    cursor:pointer;

    padding:16px 35px;

    font-size:16px;

    background:#222;

    color:white;

    transition:.3s ease;

}



button:hover {

    transform:translateY(-3px);

    background:#555;

}



.quote-button,
.service-btn {


    display:inline-block;


    background:#b89045;


    color:white;


    padding:15px 32px;


    border-radius:8px;


    font-size:16px;


}



.quote-button:hover,
.service-btn:hover {


    background:#967338;


    transform:translateY(-3px);


}



/* =========================
   GENERAL SECTIONS
========================= */


section {

    padding:80px 10%;

    text-align:center;

}



section h2 {

    font-size:40px;

    margin-bottom:30px;

}



/* =========================
   END PART 1/6
========================= */

/* =========================================
   MZ SIGNATURE CABINETRY
   LUXURY WEBSITE CSS
   PART 2/6
   HOME SECTIONS + CARDS
========================================= */


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


.about {

    background:#f7f6f2;

}



.about p {

    max-width:850px;

    margin:25px auto;

    font-size:18px;

}





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


.services {

    background:white;

}



.service-box {

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:30px;

    flex-wrap:wrap;

}



.service-box div {

    width:230px;

    min-height:200px;

    padding:40px 25px;

    background:white;


    box-shadow:

    0 10px 30px rgba(0,0,0,.08);


    transition:.35s ease;

}



.service-box div:hover {

    transform:translateY(-10px);

    box-shadow:

    0 20px 40px rgba(0,0,0,.15);

}



.service-box h3 {

    font-size:24px;

    margin-bottom:15px;

}







/* =========================
   PORTFOLIO HOME
========================= */


.portfolio {

    background:#222;

    color:white;

}



.project-box {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.project-box div {

    width:240px;

    min-height:300px;

    overflow:hidden;

    background:white;

    color:#222;

    border-radius:12px;


    box-shadow:

    0 10px 30px rgba(0,0,0,.12);


    transition:.35s ease;

}



.project-box div:hover {

    transform:translateY(-10px);


    box-shadow:

    0 20px 40px rgba(0,0,0,.20);

}



.project-box img {

    width:100%;

    height:220px;

    object-fit:cover;

}



.project-box h3 {

    padding:15px;

    font-size:24px;

}






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


.process {

    background:white;

}



.process-box {


    display:flex;


    justify-content:center;


    gap:30px;


    flex-wrap:wrap;


}



.process-box div {


    width:220px;


    padding:35px 25px;


    background:#f7f6f2;


    border-radius:10px;


}



.process-box h3 {

    font-size:25px;

}







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


.reviews {

    background:#f7f6f2;

}



.review-box {

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.review-box div {


    width:280px;


    padding:35px;


    background:white;


    border-radius:10px;


    box-shadow:

    0 10px 25px rgba(0,0,0,.08);


}



.review-box p {

    font-size:16px;

    color:#555;

}



.review-box h3 {

    font-size:22px;

}





/* =========================
   HOME CTA SECTION
========================= */


.quote-section {

    background:#1f1f1f;

    color:white;

    text-align:center;

    padding:90px 20px;

}



.quote-section h2 {

    font-size:42px;

    margin-bottom:20px;

}



.quote-section p {

    max-width:750px;

    margin:0 auto 35px;

    color:#ddd;

    font-size:18px;

}



.quote-section .quote-button {

    display:inline-block;

}






/* =========================
   END PART 2/6
========================= */

/* =========================================
   MZ SIGNATURE CABINETRY
   LUXURY WEBSITE CSS
   PART 3/6
   INNER PAGES + SERVICES FIX
========================================= */


/* =========================
   INNER PAGE HERO
========================= */


.page-hero {

    background:#1f1f1f;

    color:white;

    text-align:center;

    padding:140px 20px 90px;

}



.page-hero h1 {

    font-size:48px;

    margin-bottom:15px;

}



.page-hero p {

    font-size:22px;

    color:#d8c6a3;

}






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


.about-page {

    max-width:1000px;

    margin:80px auto;

    padding:0 30px;

    text-align:center;

}



.about-page h2 {

    font-size:40px;

}



.about-page p {

    font-size:20px;

    line-height:1.9;

}





.about-values {

    max-width:1100px;

    margin:60px auto;

    display:flex;

    gap:30px;

}



.about-values div {

    flex:1;

    padding:35px;

    background:#f7f5f0;

    border-radius:10px;

}



.about-values h3 {

    font-size:28px;

}



.about-values p {

    color:#555;

    font-size:16px;

}







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


.services-page {

    max-width:1200px;

    margin:80px auto;

    padding:0 20px;

}





/* MAIN SERVICE ROW */


.service-item {


    display:flex;


    align-items:center;


    gap:50px;


    margin-bottom:80px;


}



.service-item.reverse {


    flex-direction:row-reverse;


}





/* SERVICE IMAGE */


.service-item img {


    width:50%;


    border-radius:18px;


    box-shadow:

    0 15px 40px rgba(0,0,0,.15);


}






/* SERVICE TEXT */


.service-text {


    width:50%;


}



.service-text h2 {


    font-size:36px;


    margin-bottom:20px;


}



.service-text p {


    font-size:19px;


    line-height:1.8;


    margin-bottom:30px;


}



.service-text ul {


    list-style:none;


    padding:0;


    margin-bottom:30px;


}



.service-text li {


    margin:12px 0;


    font-size:16px;


}





/* =========================
   SERVICES MOBILE FIX
========================= */


@media(max-width:768px){



    .services-page {


        width:100%;


        padding:40px 20px;


    }





    .service-item,

    .service-item.reverse {


        display:flex;


        flex-direction:column !important;


        width:100%;


        gap:25px;


        margin-bottom:70px;


    }






    .service-item img {


        width:100%;


        height:auto;


        order:1;


    }






    .service-text {


        width:100%;


        order:2;


        text-align:center;


        display:block;


    }






    .service-text h2 {


        font-size:28px;


        margin-bottom:15px;


        color:#222;


    }






    .service-text p {


        font-size:16px;


        line-height:1.7;


        color:#222;


    }






    .service-text ul {


        text-align:left;


        padding-left:20px;


    }






    .service-text li {


        display:list-item;


        margin-bottom:10px;


    }






    .service-btn {


        display:inline-block;


        margin-top:15px;


    }


}







/* =========================
   END PART 3/6
========================= */

/* =========================================
   MZ SIGNATURE CABINETRY
   LUXURY WEBSITE CSS
   PART 4/6
   PORTFOLIO + CONTACT
========================================= */


/* =========================
   PORTFOLIO PAGE
========================= */


.portfolio-page {

    max-width:1200px;

    margin:auto;

    padding:0 20px;

}



.portfolio-page h2 {

    text-align:center;

    font-size:36px;

    margin-top:80px;

    margin-bottom:35px;

}





/* GALLERY */


.gallery {


    display:grid;


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


    gap:25px;


}



.gallery img {


    width:100%;


    height:350px;


    object-fit:cover;


    border-radius:12px;


    cursor:pointer;



    box-shadow:


    0 10px 30px rgba(0,0,0,.15);



    transition:.35s ease;


}





.gallery img:hover {


    transform:scale(1.03);



    box-shadow:


    0 20px 40px rgba(0,0,0,.25);


}







/* =========================
   IMAGE POPUP VIEWER
========================= */


.image-viewer {


    display:none;


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:100%;


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


    z-index:9999;



    justify-content:center;


    align-items:center;


}





.image-viewer img {


    max-width:90%;


    max-height:85%;


    border-radius:10px;


}





.close-viewer {


    position:absolute;


    top:30px;


    right:40px;


    color:white;


    font-size:50px;


    cursor:pointer;


}







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


.contact-page {


    max-width:900px;


    margin:80px auto;


    padding:0 30px;


}





.contact-intro {


    text-align:center;


    margin-bottom:50px;


}





.contact-intro h2 {


    font-size:38px;


}





.contact-intro p {


    color:#666;


}






/* CONTACT FORM */


.contact-form {


    background:white;


    padding:50px;


    border-radius:12px;



    box-shadow:


    0 15px 40px rgba(0,0,0,.12);


}





.contact-form label {


    display:block;


    margin-top:20px;


    margin-bottom:8px;


    font-weight:500;


}






.contact-form input,

.contact-form select,

.contact-form textarea {


    width:100%;


    padding:15px;


    border:1px solid #ddd;


    border-radius:5px;


    font-size:15px;


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


}






.contact-form textarea {


    height:160px;


    resize:none;


}





.contact-form button {


    width:100%;


    margin-top:30px;


    padding:16px;


    background:#b89045;


    border-radius:5px;


}






.contact-form button:hover {


    background:#967338;


}








/* =========================
   SERVICE AREA
========================= */


.service-area {


    max-width:1100px;


    margin:80px auto;


    padding:40px;


    text-align:center;


}





.service-area h2 {


    font-size:38px;


}





.service-area p {


    max-width:850px;


    margin:auto;


    color:#555;


}





.service-area iframe {


    width:100%;


    border-radius:12px;


}








/* =========================
   MOBILE PORTFOLIO + CONTACT
========================= */


@media(max-width:768px){



    .gallery {


        grid-template-columns:1fr;


    }




    .gallery img {


        height:300px;


    }




    .portfolio-page h2 {


        font-size:30px;


    }




    .contact-form {


        padding:25px;


    }




    .contact-page {


        padding:0 20px;


    }



}







/* =========================
   END PART 4/6
========================= */

/* =========================================
   MZ SIGNATURE CABINETRY
   LUXURY WEBSITE CSS
   PART 5/6
   FOOTER + ANIMATIONS + POLISH
========================================= */


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


footer {


    background:#222;


    color:white;


    text-align:center;


    padding:60px 20px;


}





footer h2 {


    font-size:32px;


    letter-spacing:2px;


    margin-bottom:20px;


}





footer p {


    line-height:1.8;


    opacity:.9;


}





.copyright {


    margin-top:40px;


    font-size:14px;


    opacity:.7;


}








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


img {


    transition:transform .4s ease;


}





.service-item img:hover {


    transform:scale(1.03);


}







/* =========================
   BUTTON POLISH
========================= */


.quote-button,

.service-btn,

button {


    transition:all .3s ease;


}





.quote-button:hover,

.service-btn:hover,

button:hover {


    transform:translateY(-3px);


}







/* =========================
   SCROLL REVEAL
========================= */


.reveal {


    opacity:0;


    transform:translateY(40px);


    transition:


    opacity .7s ease,


    transform .7s ease;


}





.reveal.active {


    opacity:1;


    transform:translateY(0);


}








/* =========================
   PAGE LOAD
========================= */


body {


    animation:pageFade .5s ease;


}





@keyframes pageFade {


    from {


        opacity:0;


    }


    to {


        opacity:1;


    }


}








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


header {


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:25px 7%;


    background:#f7f6f2;


}





header nav {


    position:static;


    width:auto;


    padding:0;


}





header .menu a {


    color:#222;


}





header .menu a:hover,

header .menu a.active {


    color:#b89045;


}








/* =========================
   SMOOTH LINK EFFECT
========================= */


a {


    transition:.3s ease;


}








/* =========================
   END PART 5/6
========================= */

/* =========================================
   MZ SIGNATURE CABINETRY
   LUXURY WEBSITE CSS
   PART 6/6
   FINAL RESPONSIVE DESIGN
========================================= */


/* =========================
   TABLET
========================= */


@media(max-width:1024px){



    .hero h1 {

        font-size:55px;

    }



    .hero-content {

        width:85%;

    }



    .service-item {

        gap:30px;

    }



    .service-text h2 {

        font-size:32px;

    }



    .gallery {

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

    }


}









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


@media(max-width:768px){



/* GLOBAL */


html,
body {


    width:100%;


    overflow-x:hidden;


}



section {


    width:100%;


    padding:50px 20px;


}





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


nav {


    padding:15px 20px;


    display:flex;


    align-items:center;


}





.logo img {


    width:110px;


}





.menu {


    gap:10px;


}





.menu a {


    font-size:11px;


    white-space:nowrap;


}







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


.hero {


    height:85vh;


    min-height:600px;


}





.hero-content {


    width:90%;


}





.hero h1 {


    font-size:32px;


    letter-spacing:1px;


}





.hero h2 {


    font-size:22px;


}





.hero p {


    font-size:15px;


}








/* =========================
   TITLES
========================= */


section h2 {


    font-size:32px;


}





.page-hero {


    padding:120px 20px 70px;


}





.page-hero h1 {


    font-size:34px;


}





.page-hero p {


    font-size:17px;


}








/* =========================
   HOME BOXES
========================= */


.service-box,

.project-box,

.process-box,

.review-box {


    flex-direction:column;


    align-items:center;


}





.service-box div,

.project-box div,

.process-box div,

.review-box div {


    width:90%;


}








/* =========================
   SERVICES PAGE FINAL FIX
========================= */


.services-page {


    width:100%;


    padding:40px 20px;


}





.service-item,

.service-item.reverse {


    display:flex;


    flex-direction:column !important;


    width:100%;


    gap:25px;


    margin-bottom:60px;


}





.service-item img {


    width:100%;


    order:1;


}





.service-text {


    width:100% !important;


    order:2;


    text-align:center;


    display:block;


}





.service-text h2 {


    font-size:28px;


}





.service-text p {


    font-size:16px;


}





.service-text ul {


    text-align:left;


    padding-left:20px;


}








.service-btn {


    margin-top:15px;


}








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


.about-values {


    flex-direction:column;


}





.about-page {


    padding:0 20px;


}





.about-page h2 {


    font-size:32px;


}





.about-page p {


    font-size:17px;


}









/* =========================
   PORTFOLIO
========================= */


.gallery {


    grid-template-columns:1fr;


}





.gallery img {


    height:280px;


}








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


.contact-page {


    padding:0 20px;


}





.contact-form {


    padding:25px;


}








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


footer h2 {


    font-size:26px;


}



}









/* =========================
   SMALL PHONES
========================= */


@media(max-width:480px){



.logo img {


    width:95px;


}





.menu {


    gap:6px;


}





.menu a {


    font-size:9px;


}





.hero h1 {


    font-size:28px;


}





.hero h2 {


    font-size:20px;


}





.quote-section h2 {


    font-size:30px;


}



}








/* =================================
   END OF MZ SIGNATURE CABINETRY CSS
   CLEAN VERSION 6/6
================================= */

.address-wrapper {
    position: relative;
}


#address-results {

    position:absolute;
    top:100%;
    left:0;

    width:100%;

    background:white;

    z-index:99999;

    border-radius:8px;

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

    overflow:hidden;

}


.address-option {

    padding:14px;

    cursor:pointer;

    border-bottom:1px solid #eee;

    font-size:15px;

}


.address-option:hover {

    background:#f5f5f5;

}