/* =========================
   COASTAL KITCHEN STYLE
========================= */


/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: Arial, Helvetica, sans-serif;

    background: #f7f3ec;

    color: #1c2b33;

    line-height: 1.6;

}



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


nav {

    position: fixed;

    top: 0;

    width: 100%;

    padding: 20px 8%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(15, 30, 40, 0.9);

    backdrop-filter: blur(10px);

    z-index: 1000;

}



.logo {

    color: #d6b36a;

    font-size: 26px;

    font-weight: bold;

}



.nav-links {

    display: flex;

    gap: 25px;

    align-items: center;

}



.nav-links a {

    text-decoration: none;

    color: white;

    font-size: 15px;

    transition: 0.3s;

}



.nav-links a:hover {

    color: #d6b36a;

}



.nav-button {

    background: #d6b36a;

    padding: 10px 18px;

    border-radius: 30px;

    color: #111 !important;

}






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


.hero {


    min-height: 100vh;


    display: flex;


    justify-content: center;


    align-items: center;


    text-align: center;


    padding: 120px 20px 40px;


    background:

    linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.55)
    ),

    url("Images/hero.jpg");

    background-size: cover;

    background-position: center;

    color: white;

}



.hero-content {

    max-width: 800px;

}



.hero h1 {

    font-size: 70px;

    margin-bottom: 15px;

}



.hero h2 {

    font-size: 30px;

    color: #d6b36a;

    margin-bottom: 20px;

}



.hero p {

    font-size: 20px;

    margin-bottom: 35px;

}





.hero-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

}





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


.btn {


    display: inline-block;


    padding: 14px 30px;


    border-radius: 30px;


    background: #d6b36a;


    color: #111;


    text-decoration: none;


    font-weight: bold;


    transition: 0.3s;


}



.btn:hover {

    transform: translateY(-3px);

}



.secondary {


    background: transparent;


    border: 2px solid #d6b36a;


    color: white;


}







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


.section {


    padding: 90px 8%;


}




.section-header {


    text-align: center;


    max-width: 750px;


    margin: auto;


    margin-bottom: 50px;


}



.section-header h2 {


    font-size: 42px;


    margin-bottom: 15px;


    color: #13232d;


}



.section-header p {


    font-size: 18px;


}






/* =========================
   CONTENT BOX
========================= */


.content-box {


    max-width: 900px;


    margin: auto;


    background: white;


    padding: 40px;


    border-radius: 20px;


    box-shadow: 0 15px 40px rgba(0,0,0,0.08);


}








/* =========================
   CARDS
========================= */


.card-grid {


    display: grid;


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


    gap: 30px;


}




.card {


    background: white;


    padding: 35px;


    border-radius: 20px;


    text-align: center;


    box-shadow: 0 15px 35px rgba(0,0,0,0.08);


    transition: 0.3s;


}



.card:hover {


    transform: translateY(-10px);


}




.card h3 {


    margin-bottom: 15px;


    color: #c49b4c;


}






/* =========================
   GALLERY
========================= */


.gallery {


    display: grid;


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


    gap: 25px;


}



.gallery-item img {


    width: 100%;


    height: 350px;


    object-fit: cover;


    border-radius: 20px;


    transition: 0.3s;


}




.gallery-item img:hover {


    transform: scale(1.03);


}






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


footer {


    background: #0f1e28;


    color: white;


    text-align: center;


    padding: 30px;


}







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


@media(max-width:900px){


    nav {

        flex-direction: column;

        gap: 20px;

    }


    .nav-links {

        flex-wrap: wrap;

        justify-content: center;

    }



    .hero h1 {

        font-size: 45px;

    }



    .hero h2 {

        font-size: 22px;

    }



    .hero-buttons {

        flex-direction: column;

    }




    .card-grid {


        grid-template-columns: 1fr;


    }




    .gallery {


        grid-template-columns: 1fr;


    }



}