/* ==========================
   GOOGLE FONTS
========================== */

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



/* ==========================
   COLOUR VARIABLES - original
========================== */

:root {

    --main-bg: #CAD2C5;
    --dark-bg: #2F3E46;
    --dark-green: #354F52;

    --primary-green: #52796F;
    --secondary-rose: #9A7A86;

    --rose-gold: #B88C7A;

    --white: #FAF7F2;
    --text-dark: #2F3E46;

}


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

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


html {
    scroll-behavior: smooth;
}


body {

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

    background-color: var(--main-bg);

    color: var(--dark-green);

    line-height: 1.8;

    font-size: 16px;

}



/* ==========================
   HEADINGS
========================== */

h1,
h2,
h3 {

    font-family: 'Playfair Display', serif;

    font-weight: 600;

    letter-spacing: 0.5px;

}


h1 {

    font-size: 4rem;

    color: var(--white);

}


h2 {

    font-size: 2.5rem;

    color: var(--white);

    text-align: center;

    margin-bottom: 40px;

}


h3 {

    font-size: 1.5rem;

    color: var(--dark-green);

}



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


header {

    background-color: var(--dark-bg);

    padding: 25px 8%;

    border-bottom: 1px solid var(--rose-gold);

}


nav {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.logo img {

    width: 100px;
    height:auto;

}



.nav-links {

    display: flex;

    list-style: none;

    gap: 35px;

}


.nav-links a {

    text-decoration: none;

    color: var(--main-bg);

    font-size: 1rem;

    transition: 0.3s;

}


.nav-links a:hover {

    color: var(--rose-gold);

}



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


.button,
.book-button {


    display: inline-block;

    padding: 12px 30px;

    border-radius: 30px;

    text-decoration: none;

    font-weight: 700;

    transition: 0.3s;

}



.button {

    background-color: var(--primary-green);

    color: white;

    border: 1px solid var(--primary-green);

}



.button:hover {

    background-color: transparent;

    color: var(--primary-green);

    border-color: var(--rose-gold);

}



.book-button {

    border: 1px solid var(--rose-gold);

    color: var(--rose-gold);

}


.book-button:hover {

    background-color: var(--rose-gold);

    color: var(--white);

}



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


.hero {

    height: 85vh;

    background:

    linear-gradient(
        rgba(47,62,70,0.65),
        rgba(47,62,70,0.65)
    ),

    url("../images/hero3.jpeg");

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.hero-content {

    max-width: 800px;

}


.hero p {

    color: var(--main-bg);

    font-size: 1.3rem;

    margin: 25px auto 40px;

    max-width: 600px;

}



/* ==========================
   INTRO SECTION
========================== */


.intro {

    background-color: var(--main-bg);

    padding: 80px 10%;

    text-align: center;

}


.intro p {

    max-width: 850px;

    margin: auto;

    color: var(--dark-bg);

    font-size: 1.1rem;

}



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


.services-preview {

    background-color: var(--dark-bg);

    padding: 80px 8%;

}



.service-container {

    display: flex;

    justify-content: center;

    gap: 30px;

    flex-wrap: wrap;

}



.service-card {

    background-color: #E3E8DE;

    width: 300px;

    padding: 30px;

    text-align: center;

    border-radius: 20px;

    border: 1px solid var(--rose-gold);

    transition: 0.3s;

}


.service-card:hover {

    transform: translateY(-10px);

}



.service-card img {

    width: 100%;

    height: 220px;

    object-fit: cover;

    border-radius: 10px;

    margin-bottom: 20px;

}



.service-card p {

    color: var(--dark-bg);

}



/* ==========================
   FEATURES SECTION
========================== */


.features {

    background-color: var(--main-bg);

    padding: 80px 8%;

}



.feature-container {

    display: flex;

    justify-content: space-around;

    text-align: center;

    gap: 40px;

}


.feature-container div {

    max-width: 300px;

}


.feature-container p {

    color: var(--dark-bg);

}



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


.gallery-preview {

    background-color: var(--dark-green);

    padding: 80px 8%;

}



.gallery-container {

    display: flex;

    gap: 25px;

    justify-content: center;

    flex-wrap: wrap;

}



.gallery-container img {

    width: 400px;

    height: 400px;

    object-fit: cover;

    border-radius: 5px;

    border: 2px solid var(--rose-gold);

    transition: 0.3s;

}

.gallery-container img:hover {

    transform: scale(1.03);

}



/* ==========================
   BOOKING CTA
========================== */


.booking {

    background-color: var(--dark-bg);

    padding: 80px 10%;

    text-align: center;

}


.booking p {

    color: var(--main-bg);

    margin-bottom: 30px;

}



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


footer {

    background-color: #1F292D;

    padding: 40px;

    text-align: center;

}


footer h3 {

    color: var(--rose-gold);

}


footer p {

    color: var(--main-bg);

}



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


@media(max-width:768px){


    nav {

        flex-direction: column;

        gap: 25px;

    }


    .nav-links {

        flex-direction: column;

        text-align: center;

    }


    h1 {

        font-size: 2.5rem;

    }


    h2 {

        font-size: 2rem;

    }


    .feature-container {

        flex-direction: column;

        align-items: center;

    }


}

section {

    overflow: hidden;

}


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

/* ---------- Banner ---------- */

.page-banner{
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

.page-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(45%);
}

.banner-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--white);
}

.banner-text h1{
    font-family: 'Cormorant Garamond', serif;
    font-size: 4rem;
    margin-bottom: 15px;
}

.banner-text p{
    font-size: 1.1rem;
    letter-spacing: 1px;
}


/* ---------- Shared Container ---------- */

.container{
    width: 90%;
    max-width: 1200px;
    margin: auto;
}


/* ---------- Our Story ---------- */

.about-section{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 100px 0;
}

.about-image{
    flex: 1;
}

.about-image img{
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}

.about-content{
    flex: 1;
}

.about-content h2{
    font-family: 'Cormorant Garamond', serif;
    color: var(--dark-green);
    font-size: 2.8rem;
    margin-bottom: 25px;
}

.about-content p{
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}


/* ---------- Why Choose Us ---------- */

.features{
    background: var(--main-bg);
    padding: 90px 0;
}

.features h2{
    text-align: center;
    color: var(--dark-bg);
    font-size: 2.8rem;
    font-family: 'Cormorant Garamond', serif;
    margin-bottom: 60px;
}

.feature-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    gap: 30px;
}

.feature-card{
    background: var(--white);
    padding: 40px 30px;
    border-radius: 15px;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.feature-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.feature-card h3{
    color: var(--primary-green);
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.feature-card p{
    line-height: 1.7;
    color: #555;
}


/* ---------- Owner ---------- */

.owner-section{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 100px 0;
}

.owner-content{
    flex: 1;
}

.owner-content h2{
    color: var(--dark-green);
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem;
    margin-bottom: 25px;
}

.owner-content p{
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.owner-image{
    flex: 1;
    text-align: center;
}

.owner-image img{
    width: 100%;
    max-width: 450px;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.15);
}


/* ---------- Call To Action ---------- */

.cta{
    background: var(--dark-green);
    color: var(--white);
    text-align: center;
    padding: 90px 20px;
}

.cta h2{
    font-family: 'Cormorant Garamond', serif;
    font-size: 3rem;
    margin-bottom: 20px;
}

.cta p{
    max-width: 700px;
    margin: 0 auto 35px;
    line-height: 1.8;
}

.cta .btn{
    display: inline-block;
    background: var(--secondary-rose);
    color: var(--white);
    text-decoration: none;
    padding: 14px 35px;
    border-radius: 50px;
    transition: 0.3s;
    font-weight: 600;
}

.cta .btn:hover{
    background: var(--primary-green);
    transform: translateY(-3px);
}


/* ---------- Active Navigation Link ---------- */

.nav-links a.active{
    color: var(--secondary-rose);
    font-weight: 600;
}


/* ---------- Responsive ---------- */

@media (max-width: 900px){

    .about-section,
    .owner-section{
        flex-direction: column;
        text-align: center;
    }

    .banner-text h1{
        font-size: 3rem;
    }

    .about-content h2,
    .owner-content h2,
    .features h2,
    .cta h2{
        font-size: 2.2rem;
    }

}

@media (max-width:600px){

    .page-banner{
        height:300px;
    }

    .banner-text h1{
        font-size:2.4rem;
    }

    .banner-text p{
        font-size:1rem;
    }

    .about-section,
    .owner-section{
        padding:70px 0;
    }

    .features,
    .cta{
        padding:70px 20px;
    }

}


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


.contact-section{
    max-width:1100px;
    margin:140px auto 80px;
    padding:0 20px;
    text-align:center;
}

.contact-section h1{
    font-family:'Cormorant Garamond', serif;
    font-size:3rem;
    color:var(--dark-green);
    margin-bottom:20px;
}

.contact-intro{
    max-width:700px;
    margin:auto;
    color:#555;
    line-height:1.8;
    font-size:1.05rem;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
    margin-top:60px;
}

.contact-card{
    background:var(--white);
    padding:35px 25px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;
}

.contact-card:hover{
    transform:translateY(-8px);
}

.contact-card i{
    font-size:2.5rem;
    color:var(--primary-green);
    margin-bottom:20px;
}

.contact-card h3{
    margin-bottom:15px;
    color:var(--dark-green);
}

.contact-card p{
    line-height:1.8;
    color:#666;
    margin-bottom:25px;
}

.contact-card a{
    display:inline-block;
    padding:12px 24px;
    background:var(--primary-green);
    color:var(--white);
    text-decoration:none;
    border-radius:30px;
    transition:0.3s;
}

.contact-card a:hover{
    background:var(--dark-green);
}

/* ===========================
   OPENING HOURS
=========================== */

.hours-section{

    max-width:650px;

    margin:90px auto;

    text-align:center;

    padding:0 20px;

}


/* ---------- Heading ---------- */

.hours-section h2{

    font-family:'Playfair Display', serif;

    font-size:2.7rem;

    color:var(--dark-green);

    margin-bottom:15px;

}


.hours-section h2::after{

    content:"";

    display:block;

    width:80px;

    height:3px;

    background:var(--secondary-rose);

    margin:18px auto 0;

    border-radius:20px;

}


/* ---------- Hours Card ---------- */

.hours-card{

    margin-top:40px;

    background:white;

    padding:40px 30px;

    border-radius:25px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

    transition:.3s;

}


.hours-card:hover{

    transform:translateY(-5px);

    box-shadow:

    0 25px 45px rgba(0,0,0,.12);

}



/* ---------- Icon ---------- */

.hours-icon{

    font-size:2.5rem;

    color:var(--secondary-rose);

    margin-bottom:15px;

}


/* ---------- Text ---------- */

.hours-card h3{

    font-family:'Playfair Display',serif;

    color:var(--dark-green);

    font-size:1.8rem;

    margin-bottom:15px;

}


.hours-card p{

    font-size:1.2rem;

    color:var(--text-dark);

    margin:8px 0;

}


.hours-time{

    font-size:2rem !important;

    font-weight:700;

    color:var(--primary-green) !important;

}



/* ---------- Mobile ---------- */

@media(max-width:600px){

    .hours-section h2{

        font-size:2.2rem;

    }


    .hours-card{

        padding:30px 20px;

    }


    .hours-time{

        font-size:1.6rem !important;

    }

}

/* ===========================
   FLOATING SOCIAL BUTTONS
=========================== */
.floating-social {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
}


.float-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 28px;
    color: var(--white);
    transition: 0.3s ease;
}


/* WhatsApp */

.whatsapp-float {
    background-color: #25D366;
}


/* Instagram */

.instagram-float {
    background: linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    );
}


/* Hover effect */

.float-btn:hover {
    transform: scale(1.1);
}

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

@media(max-width:768px){

    .contact-section h1{
        font-size:2.3rem;
    }

    .hours-section h2{
        font-size:2rem;
    }

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

}

/* ===========================
   FIND NEAREST BRANCH
=========================== */

.nearest-branch{
    max-width:900px;
    margin:80px auto;
    text-align:center;
    padding:20px;
}

.nearest-branch h2{
    font-family:'Cormorant Garamond', serif;
    font-size:2.5rem;
    color:var(--dark-green);
    margin-bottom:20px;
}

.nearest-branch p{
    color:#666;
    margin-bottom:30px;
}

#findBranchBtn{

    background:var(--primary-green);
    color:var(--white);
    border:none;
    padding:15px 35px;
    border-radius:40px;
    font-size:1rem;
    cursor:pointer;
    transition:.3s;

}

#findBranchBtn:hover{

    background:var(--dark-green);

}

#result{

    margin:35px auto;
    max-width:500px;
    background:var(--white);
    padding:25px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

#result h3{

    color:var(--dark-green);
    margin-bottom:10px;

}

#result p{

    margin:10px 0;

}

#result a{

    display:inline-block;
    margin-top:20px;
    padding:12px 25px;
    background:var(--primary-green);
    color:var(--white);
    text-decoration:none;
    border-radius:30px;

}

#result a:hover{

    background:var(--dark-green);

}

#map{

    width:100%;
    height:450px;
    border:none;
    border-radius:18px;
    margin-top:40px;

}