/* =====================================
   BROTHERS COTTAGE & CAFE
   FINAL CSS PART 7
===================================== */


/* GOOGLE FONT */

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



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


*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

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

color:#2d1b14;

overflow-x:hidden;

}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

}



ul{

list-style:none;

}



:root{

--brown:#2d1b14;

--gold:#c8a96a;

--cream:#f8f5f0;

--white:#ffffff;

}





/* =========================
PRELOADER
========================= */


#preloader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:white;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}



.loader{

width:60px;

height:60px;

border:6px solid #ddd;

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

border-radius:50%;

animation:spin 1s linear infinite;

}



@keyframes spin{

100%{

transform:rotate(360deg);

}

}







/* =========================
NAVBAR
========================= */


nav{

position:fixed;

top:0;

left:0;

width:100%;


padding:20px 8%;


display:flex;

align-items:center;

justify-content:space-between;


background:rgba(45,27,20,.92);


backdrop-filter:blur(10px);


z-index:9999;


}





/* LOGO ONLY */


.logo{

display:flex;

align-items:center;

}



.logo img{


height:65px;


width:auto;


object-fit:contain;


}




.nav-links{


display:flex;

gap:35px;


}



.nav-links a{


color:white;

font-size:16px;

transition:.3s;


}



.nav-links a:hover{


color:var(--gold);


}



.menu-toggle{


display:none;

color:white;

font-size:32px;

cursor:pointer;

}







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


.hero{


height:100vh;

position:relative;

overflow:hidden;


}



.hero-slider{


position:absolute;

width:100%;

height:100%;


}



.slide{


position:absolute;

inset:0;


background-size:cover;

background-position:center;


opacity:0;


transition:opacity 1.5s ease;


}



.slide.active{


opacity:1;


}





.hero:before{


content:"";


position:absolute;


inset:0;


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


z-index:1;


}




.hero-content{


position:absolute;


top:50%;

left:50%;


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


width:90%;


max-width:900px;


text-align:center;


color:white;


z-index:2;


}



.hero-content h4{


letter-spacing:5px;

color:var(--gold);


margin-bottom:20px;


}




.hero-content h1{


font-size:70px;


line-height:1.2;


margin-bottom:20px;


}



.hero-content p{


font-size:22px;


}





.hero-buttons{


margin-top:40px;


}




.btn{


display:inline-block;


padding:15px 35px;


background:var(--gold);


color:white;


border-radius:50px;


margin:10px;


font-weight:600;


transition:.3s;


}




.btn:hover{


transform:translateY(-5px);


}



.btn-outline{


background:transparent;


border:2px solid white;


}






.scroll-down{


position:absolute;


bottom:30px;


left:50%;


transform:translateX(-50%);


color:white;


font-size:35px;


z-index:2;


animation:bounce 2s infinite;


}




@keyframes bounce{


50%{

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

}


}/* =====================================
   CSS PART 8
   ABOUT • STATS • COTTAGES • MENU • GALLERY
===================================== */


/* =========================
SECTION TITLE
========================= */


.section-title{

text-align:center;

margin-bottom:60px;

}


.section-title h2{

font-size:45px;

color:#2d1b14;

margin-bottom:15px;

}



.section-title p{

color:#666;

font-size:18px;

}





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


.about{

padding:100px 8%;

background:#f8f5f0;

}



.about-container{


display:flex;

align-items:center;

gap:60px;


}



.about-image,
.about-content{

flex:1;

}



.about-image img{


width:100%;

border-radius:20px;

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


}



.about-content h5{


color:#c8a96a;

letter-spacing:3px;


}



.about-content h2{


font-size:45px;

margin:20px 0;


}



.about-content p{


font-size:17px;

line-height:1.8;

color:#666;

margin-bottom:20px;


}



.about-features{


display:grid;

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

gap:15px;

margin:30px 0;


}



.feature{


background:white;

padding:18px;

border-radius:12px;

box-shadow:0 5px 20px rgba(0,0,0,.1);


}







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


.stats{


background:#2d1b14;

display:flex;

justify-content:center;

gap:70px;

padding:70px 8%;

text-align:center;

flex-wrap:wrap;


}



.stat-box h2{


font-size:50px;

color:#c8a96a;


}



.stat-box p{


color:white;

font-size:18px;


}








/* =========================
COTTAGES
========================= */


.cottages{


padding:100px 8%;

background:#fff;


}



.cottage-container{


display:grid;

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

gap:30px;


}



.cottage-card{


background:#f8f5f0;

border-radius:20px;

overflow:hidden;

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


transition:.3s;


}



.cottage-card:hover{


transform:translateY(-10px);


}



.cottage-card img{


width:100%;

height:260px;

object-fit:cover;


}



.cottage-card h3{


margin:20px;

font-size:25px;


}



.cottage-card p{


margin:0 20px;

color:#666;

line-height:1.7;


}



.cottage-card h4{


margin:20px;

color:#c8a96a;

font-size:22px;


}









/* =========================
RESTAURANT MENU
========================= */


.menu{


padding:100px 8%;

background:#f8f5f0;


}




.menu-container{


display:grid;

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

gap:30px;


}




.menu-card{


background:white;

border-radius:20px;

overflow:hidden;

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


}



.menu-card img{


height:250px;

width:100%;

object-fit:cover;


}



.menu-card h3{


font-size:24px;

margin:20px;


}



.menu-card p{


margin:0 20px;

color:#666;

line-height:1.6;


}



.menu-card span{


display:block;

margin:20px;

font-size:25px;

font-weight:bold;

color:#c8a96a;


}









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


.gallery{


padding:100px 8%;

background:white;


}



.gallery-container{


display:grid;

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

gap:25px;


}



.gallery-item{


overflow:hidden;

border-radius:18px;


}



.gallery-item img{


width:100%;

height:300px;

object-fit:cover;

transition:.5s;


}



.gallery-item img:hover{


transform:scale(1.08);


}




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


.popup{


position:fixed;

inset:0;

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

display:none;

justify-content:center;

align-items:center;

z-index:99999;


}



.popup img{


max-width:85%;

max-height:85%;

border-radius:20px;


}



.close{


position:absolute;

top:30px;

right:40px;

font-size:50px;

color:white;

cursor:pointer;


}/* =====================================
   CSS PART 8
   ABOUT • STATS • COTTAGES • MENU • GALLERY
===================================== */


/* =========================
SECTION TITLE
========================= */


.section-title{

text-align:center;

margin-bottom:60px;

}


.section-title h2{

font-size:45px;

color:#2d1b14;

margin-bottom:15px;

}



.section-title p{

color:#666;

font-size:18px;

}





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


.about{

padding:100px 8%;

background:#f8f5f0;

}



.about-container{


display:flex;

align-items:center;

gap:60px;


}



.about-image,
.about-content{

flex:1;

}



.about-image img{


width:100%;

border-radius:20px;

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


}



.about-content h5{


color:#c8a96a;

letter-spacing:3px;


}



.about-content h2{


font-size:45px;

margin:20px 0;


}



.about-content p{


font-size:17px;

line-height:1.8;

color:#666;

margin-bottom:20px;


}



.about-features{


display:grid;

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

gap:15px;

margin:30px 0;


}



.feature{


background:white;

padding:18px;

border-radius:12px;

box-shadow:0 5px 20px rgba(0,0,0,.1);


}







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


.stats{


background:#2d1b14;

display:flex;

justify-content:center;

gap:70px;

padding:70px 8%;

text-align:center;

flex-wrap:wrap;


}



.stat-box h2{


font-size:50px;

color:#c8a96a;


}



.stat-box p{


color:white;

font-size:18px;


}








/* =========================
COTTAGES
========================= */


.cottages{


padding:100px 8%;

background:#fff;


}



.cottage-container{


display:grid;

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

gap:30px;


}



.cottage-card{


background:#f8f5f0;

border-radius:20px;

overflow:hidden;

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


transition:.3s;


}



.cottage-card:hover{


transform:translateY(-10px);


}



.cottage-card img{


width:100%;

height:260px;

object-fit:cover;


}



.cottage-card h3{


margin:20px;

font-size:25px;


}



.cottage-card p{


margin:0 20px;

color:#666;

line-height:1.7;


}



.cottage-card h4{


margin:20px;

color:#c8a96a;

font-size:22px;


}









/* =========================
RESTAURANT MENU
========================= */


.menu{


padding:100px 8%;

background:#f8f5f0;


}




.menu-container{


display:grid;

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

gap:30px;


}




.menu-card{


background:white;

border-radius:20px;

overflow:hidden;

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


}



.menu-card img{


height:250px;

width:100%;

object-fit:cover;


}



.menu-card h3{


font-size:24px;

margin:20px;


}



.menu-card p{


margin:0 20px;

color:#666;

line-height:1.6;


}



.menu-card span{


display:block;

margin:20px;

font-size:25px;

font-weight:bold;

color:#c8a96a;


}









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


.gallery{


padding:100px 8%;

background:white;


}



.gallery-container{


display:grid;

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

gap:25px;


}



.gallery-item{


overflow:hidden;

border-radius:18px;


}



.gallery-item img{


width:100%;

height:300px;

object-fit:cover;

transition:.5s;


}



.gallery-item img:hover{


transform:scale(1.08);


}




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


.popup{


position:fixed;

inset:0;

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

display:none;

justify-content:center;

align-items:center;

z-index:99999;


}



.popup img{


max-width:85%;

max-height:85%;

border-radius:20px;


}



.close{


position:absolute;

top:30px;

right:40px;

font-size:50px;

color:white;

cursor:pointer;


}/* =========================
BOOKING SECTION LUXURY STYLE
========================= */

.booking {

    padding: 100px 8%;
    background: linear-gradient(
        rgba(45,27,20,0.85),
        rgba(45,27,20,0.85)
    ),
    url("images/booking-bg.jpg");

    background-size: cover;
    background-position: center;
    background-attachment: fixed;

}



.booking .section-title h2 {

    color: #ffffff;
    font-size: 42px;
    font-family: Georgia, serif;

}


.booking .section-title p {

    color: #e6d5b8;
    font-size: 18px;

}



/* FORM BOX */

.booking-form {

    max-width: 700px;
    margin: 40px auto;
    background: #ffffff;
    padding: 45px;
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    box-shadow: 0 20px 50px rgba(0,0,0,0.25);

}



/* INPUTS */

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


    width:100%;
    padding:15px 18px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:16px;

    outline:none;

}


.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {

    border-color:#b08d57;

}



.booking-form label {

    font-weight:600;
    color:#5a4030;

}



.booking-form textarea {

    height:120px;
    resize:none;

}



/* BUTTON */

.booking-form button {


    background:#b08d57;

    color:white;

    border:none;

    padding:16px;

    font-size:18px;

    border-radius:30px;

    cursor:pointer;

    transition:0.3s;

}



.booking-form button:hover {


    background:#8c6a3d;

    transform:translateY(-3px);

}



/* WHATSAPP EMAIL BUTTONS */


.booking-buttons {

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:30px;

}



.whatsapp-btn,
.email-btn {


    padding:14px 30px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

    color:white;

}



.whatsapp-btn {

    background:#25D366;

}



.email-btn {

    background:#8b5e3c;

}



/* MOBILE */

@media(max-width:768px){


.booking {

padding:70px 20px;

}


.booking .section-title h2 {

font-size:32px;

}


.booking-form {

padding:25px;

}


.booking-buttons {

flex-direction:column;

align-items:center;

}


.whatsapp-btn,
.email-btn {

width:90%;

text-align:center;

}


}.about-image img{

    width:100%;

    height:500px;

    object-fit:cover;

    border-radius:20px;

}/* Gallery */

.gallery{

padding:80px 8%;

background:#f8f5ef;

}


.gallery-container{

display:grid;

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

gap:25px;

margin-top:40px;

}



.gallery-item{

overflow:hidden;

border-radius:20px;

height:300px;

}



.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:0.5s;

}



.gallery-item img:hover{

transform:scale(1.1);

}



/* Mobile */

@media(max-width:768px){

.gallery-container{

grid-template-columns:1fr;

}


.gallery-item{

height:250px;

}

}.instagram{

position:fixed;

right:25px;

bottom:90px;

width:55px;

height:55px;

border-radius:50%;

background:#E1306C;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

text-decoration:none;

z-index:999;

}