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

.dining-hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:780px;

    overflow:hidden;

}


/*===== IMAGE =====*/

.dining-hero img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*===== OVERLAY =====*/

.dining-hero .hero-overlay{

    position:absolute;

    inset:0;

}


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

.dining-hero .hero-content{

    position:absolute;

    left:10%;

    bottom:14%;

    max-width:700px;

    color:#fff;

    z-index:2;

}

.dining-hero span{

    display:block;

    margin-bottom:18px;

    font-size:.85rem;

    letter-spacing:3px;

    text-transform:uppercase;

}

.dining-hero h1{

    font-size:5rem;

    font-weight:300;

    line-height:1.05;

    margin-bottom:30px;

}

.dining-hero p{

    max-width:580px;

    line-height:1.9;

    margin-bottom:45px;

}

.dining-hero a{

    display:inline-block;

    padding:16px 38px;

    border:1px solid #fff;

    color:#fff;

    text-decoration:none;

    letter-spacing:2px;

    transition:.35s;

}

.dining-hero a:hover{

    background:#fff;

    color:#222;

}


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

@media(max-width:992px){

    .dining-hero h1{

        font-size:3.8rem;

    }

}

@media(max-width:768px){

    .dining-hero{

        min-height:650px;

    }

    .dining-hero .hero-content{

        left:8%;

        right:8%;

        bottom:10%;

    }

    .dining-hero h1{

        font-size:3rem;

    }

}

/*==================================================
BREAKFAST EXPERIENCE
==================================================*/

.breakfast-section{

    max-width:1450px;

    margin:160px auto;

    padding:0 40px;

    display:grid;

    grid-template-columns:1.1fr 1fr;

    gap:90px;

    align-items:center;

}


/*===== IMAGE =====*/

.breakfast-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    display:block;

}


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

.breakfast-content span{

    display:block;

    margin-bottom:18px;

    font-size:.8rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#777;

}

.breakfast-content h2{

    font-size:3.5rem;

    font-weight:300;

    line-height:1.15;

    margin-bottom:35px;

}

.breakfast-content p{

    font-size:1.05rem;

    line-height:2;

    color:#666;

    margin-bottom:40px;

}

.breakfast-content a{

    display:inline-block;

    text-decoration:none;

    border-bottom:1px solid #222;

    color:#222;

    padding-bottom:5px;

    transition:.3s;

}

.breakfast-content a:hover{

    padding-left:8px;

}


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

@media(max-width:992px){

    .breakfast-section{

        grid-template-columns:1fr;

        gap:50px;

    }

}

@media(max-width:768px){

    .breakfast-section{

        padding:0 25px;

    }

    .breakfast-image img{

        height:420px;

    }

    .breakfast-content h2{

        font-size:2.7rem;

    }

}


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

.dining-gallery{

    max-width:1500px;

    margin:180px auto;

    padding:0 40px;

}


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

.gallery-header{

    text-align:center;

    max-width:800px;

    margin:0 auto 70px;

}

.gallery-header span{

    display:block;

    margin-bottom:18px;

    font-size:.8rem;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#777;

}

.gallery-header h2{

    font-size:3.5rem;

    font-weight:300;

    line-height:1.15;

    margin-bottom:30px;

}

.gallery-header p{

    font-size:1.05rem;

    line-height:2;

    color:#666;

}


/*===== GRID =====*/

.gallery-grid{

    display:grid;

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

    gap:25px;

}


/*===== IMAGE =====*/

.gallery-grid img{

    width:100%;

    height:380px;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.gallery-grid img:hover{

    transform:scale(1.03);

}


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

@media(max-width:1100px){

    .gallery-grid{

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

    }

}

@media(max-width:768px){

    .dining-gallery{

        padding:0 25px;

    }

    .gallery-header h2{

        font-size:2.6rem;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
BOOK YOUR STAY
==================================================*/

.dining-cta{

    position:relative;

    width:100%;

    height:700px;

    margin-top:220px;

    overflow:hidden;

}


/*===== IMAGE =====*/

.dining-cta img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


/*===== OVERLAY =====*/

.dining-cta::before{

    content:"";

    position:absolute;

    inset:0;

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

}


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

.dining-cta .cta-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:90%;

    max-width:850px;

    text-align:center;

    color:#fff;

    z-index:2;

}

.dining-cta span{

    display:block;

    margin-bottom:18px;

    font-size:.85rem;

    letter-spacing:3px;

    text-transform:uppercase;

}

.dining-cta h2{

    font-size:4.2rem;

    font-weight:300;

    line-height:1.15;

    margin-bottom:40px;

}

.dining-cta a{

    display:inline-block;

    padding:18px 42px;

    border:1px solid #fff;

    color:#fff;

    text-decoration:none;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.35s;

}

.dining-cta a:hover{

    background:#fff;

    color:#222;

}


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

@media(max-width:768px){

    .dining-cta{

        height:520px;

    }

    .dining-cta h2{

        font-size:2.8rem;

    }

}