/*==================================================
Home N Heart
Premium Boutique Homestay Theme

Author: ChatGPT
==================================================*/


/*==============================
Google Fonts
==============================*/

:root{

--primary:#355E3B;
--secondary:#C79A63;
--background:#F8F5F1;
--white:#ffffff;
--text:#444444;
--dark:#222222;
--border:#e9e9e9;

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

--transition:.35s ease;

}


*{

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

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--background);

color:var(--text);

overflow-x:hidden;

line-height:1.8;

}

h1,h2,h3,h4,h5,h6{

font-family:'Playfair Display',serif;

color:var(--dark);

font-weight:700;

}

a{

text-decoration:none;

transition:var(--transition);

}

img{

max-width:100%;

display:block;

}


/*==============================
Section
==============================*/

section{

padding:100px 0;

}

.section-subtitle{

display:inline-block;

color:var(--secondary);

font-weight:600;

letter-spacing:2px;

margin-bottom:15px;

font-size:.9rem;

text-transform:uppercase;

}

.section-title{

font-size:2.7rem;

margin-bottom:20px;

}


/*==============================
Navbar
==============================*/

.navbar{

padding:18px 0;

transition:.4s;

background:rgba(255,255,255,.18);

backdrop-filter:blur(15px);

-webkit-backdrop-filter:blur(15px);

border-bottom:1px solid rgba(255,255,255,.25);

}

.navbar.scrolled{

background:#fff;

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

}

.navbar-brand{

font-size:1.8rem;

font-weight:700;

font-family:'Playfair Display',serif;

color:var(--dark)!important;

}

.navbar-brand span{

color:var(--secondary);

}

.nav-link{

margin-left:20px;

font-weight:500;

color:var(--dark)!important;

position:relative;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

height:2px;

width:0;

background:var(--secondary);

transition:.3s;

}

.nav-link:hover::after{

width:100%;

}


/*==============================
Hero
==============================*/

.hero{

position:relative;

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(

rgba(0,0,0,.45),

rgba(0,0,0,.45)

),

url("../images/hero.jpg");

background-size:cover;

background-position:center;

background-attachment:fixed;

overflow:hidden;

}

.overlay{

position:absolute;

inset:0;

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

}

.hero .container{

position:relative;

z-index:2;

}

.hero-title{

font-size:4.5rem;

color:#fff;

margin-bottom:20px;

}

.hero-title span{

color:#f4c27a;

}

.hero-subtitle{

color:#fff;

letter-spacing:4px;

font-size:1rem;

margin-bottom:15px;

}

.hero-tagline{

font-size:1.4rem;

color:#fff;

margin-bottom:20px;

font-weight:500;

}

.hero-description{

color:#f1f1f1;

font-size:1.05rem;

max-width:650px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

margin-bottom:45px;

}


/*==============================
Buttons
==============================*/

.btn-book{

background:var(--secondary);

color:#fff;

padding:14px 36px;

border-radius:40px;

font-weight:600;

transition:.35s;

}

.btn-book:hover{

background:#b98447;

transform:translateY(-4px);

color:#fff;

box-shadow:0 10px 20px rgba(0,0,0,.18);

}

.btn-call{

border:2px solid #fff;

color:#fff;

padding:13px 32px;

border-radius:40px;

}

.btn-call:hover{

background:#fff;

color:#222;

}

.btn-book-sm{

display:inline-block;

background:var(--primary);

color:#fff;

padding:10px 25px;

border-radius:30px;

margin-top:15px;

}

.btn-book-sm:hover{

background:#27482d;

color:#fff;

}


/*==============================
Hero Features
==============================*/

.hero-features{

display:flex;

gap:40px;

flex-wrap:wrap;

color:#fff;

font-weight:500;

}

.hero-features i{

font-size:1.3rem;

margin-right:8px;

color:#f4c27a;

}

.hero-image{

display:none;

}

.scroll-indicator{

position:absolute;

bottom:30px;

left:50%;

transform:translateX(-50%);

font-size:2rem;

color:#fff;

animation:bounce 2s infinite;

}

@keyframes bounce{

0%,100%{

transform:translate(-50%,0);

}

50%{

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

}

}
/*==================================================
ABOUT SECTION
==================================================*/

#about{
    background:#fff;
}

#about img{
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
    transition:.5s ease;
}

#about img:hover{
    transform:scale(1.02);
}

.feature-box{
    background:#fff;
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
    transition:.35s ease;
    height:100%;
}

.feature-box:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.feature-box i{
    font-size:2rem;
    color:var(--secondary);
    margin-bottom:15px;
}

.feature-box h5{
    margin-bottom:10px;
}

/*==================================================
STATISTICS
==================================================*/

.stats-section{
    background:linear-gradient(
        135deg,
        var(--primary),
        #2b4b32
    );
    color:#fff;
}

.stat-card{
    padding:35px 20px;
}

.stat-card h2{
    font-size:3rem;
    color:#fff;
    margin-bottom:10px;
}

.stat-card p{
    color:#e8e8e8;
    letter-spacing:1px;
    margin:0;
}

/*==================================================
ROOMS
==================================================*/

.room-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.45s ease;
    height:100%;
}

.room-card:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,.15);
}

.room-card img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.6s ease;
}

.room-card:hover img{
    transform:scale(1.08);
}

.room-content{
    padding:28px;
}

.room-content h4{
    margin-bottom:15px;
}

.room-content p{
    margin-bottom:20px;
}

.room-content ul{
    list-style:none;
    padding:0;
    margin-bottom:20px;
}

.room-content li{
    padding:6px 0;
    color:#666;
}

/*==================================================
AMENITIES
==================================================*/

.amenity-box{
    background:#fff;
    border-radius:20px;
    padding:35px 20px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
    transition:.35s;
    height:100%;
}

.amenity-box:hover{
    transform:translateY(-10px);
    background:var(--primary);
    color:#fff;
}

.amenity-box:hover h5{
    color:#fff;
}

.amenity-box i{
    font-size:2.4rem;
    color:var(--secondary);
    margin-bottom:18px;
    transition:.35s;
}

.amenity-box:hover i{
    color:#fff;
}

.amenity-box h5{
    margin-bottom:0;
}
/*==================================================
GALLERY
==================================================*/

#gallery{
    background:#f8f8f8;
}

.gallery-img{
    width:100%;
    height:280px;
    object-fit:cover;
    border-radius:20px;
    cursor:pointer;
    transition:.5s ease;
    box-shadow:0 15px 30px rgba(0,0,0,.08);
}

.gallery-img:hover{
    transform:scale(1.04);
    box-shadow:0 30px 60px rgba(0,0,0,.18);
}

/*==================================================
ATTRACTIONS
==================================================*/

.attraction-card{

    background:#fff;

    padding:35px 25px;

    text-align:center;

    border-radius:22px;

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

    transition:.35s;

    height:100%;

}

.attraction-card:hover{

    transform:translateY(-10px);

    background:var(--primary);

}

.attraction-card:hover h5,
.attraction-card:hover p{

    color:#fff;

}

.attraction-card i{

    font-size:2.8rem;

    color:var(--secondary);

    margin-bottom:20px;

    display:block;

}

.attraction-card h5{

    margin-bottom:15px;

}

.attraction-card p{

    color:#666;

    margin:0;

}

/*==================================================
TESTIMONIALS
==================================================*/

.testimonial-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

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

    transition:.35s;

    height:100%;

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 55px rgba(0,0,0,.15);

}

.stars{

    color:#ffc107;

    font-size:1.2rem;

    margin-bottom:20px;

    letter-spacing:2px;

}

.testimonial-card p{

    font-style:italic;

    color:#666;

    margin-bottom:25px;

}

.testimonial-card h6{

    margin:0;

    color:var(--primary);

}

/*==================================================
FAQ
==================================================*/

.accordion-item{

    border:none;

    border-radius:18px!important;

    overflow:hidden;

    margin-bottom:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.accordion-button{

    font-weight:600;

    padding:22px;

    background:#fff;

}

.accordion-button:not(.collapsed){

    background:var(--primary);

    color:#fff;

}

.accordion-button:focus{

    box-shadow:none;

}

.accordion-body{

    padding:22px;

    color:#666;

    line-height:1.8;

}

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

.contact-card{

    background:#fff;

    padding:40px;

    border-radius:25px;

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

    height:100%;

}

.contact-card p{

    margin-bottom:18px;

    color:#666;

}

.contact-card i{

    color:var(--secondary);

    margin-right:10px;

}

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:25px;

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

}

.form-control{

    border-radius:12px;

    padding:14px 18px;

    border:1px solid #ddd;

}

.form-control:focus{

    border-color:var(--secondary);

    box-shadow:none;

}

.map-container{

    margin-top:50px;

    border-radius:25px;

    overflow:hidden;

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

}

/*==================================================
SOCIAL ICONS
==================================================*/

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    transition:.35s;

}

.social-icons a:hover{

    background:var(--secondary);

    transform:translateY(-5px);

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

.footer{

    background:#1f2d23;

    color:#d9d9d9;

    padding:80px 0 30px;

}

.footer h3,
.footer h5{

    color:#fff;

    margin-bottom:20px;

}

.footer h3 span{

    color:var(--secondary);

}

.footer p{

    color:#cfcfcf;

    line-height:1.9;

}

.footer-links{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-links li{

    margin-bottom:12px;

}

.footer-links a{

    color:#d6d6d6;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--secondary);

    padding-left:8px;

}

.footer hr{

    border-color:rgba(255,255,255,.12);

    margin:40px 0 25px;

}


/*==================================================
WHATSAPP BUTTON
==================================================*/

.whatsapp-btn{

    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

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

    z-index:999;

    transition:.35s;

}

.whatsapp-btn:hover{

    transform:scale(1.12);

    color:#fff;

}


/*==================================================
BACK TO TOP
==================================================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:100px;

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

}

.back-to-top:hover{

    background:var(--primary);

}


/*==================================================
SMOOTH HOVER EFFECTS
==================================================*/

img{

    transition:.45s ease;

}

.card,
.room-card,
.feature-box,
.amenity-box,
.attraction-card,
.testimonial-card{

    transition:all .35s ease;

}


/*==================================================
CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f2f2f2;

}

::-webkit-scrollbar-thumb{

    background:var(--secondary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary);

}


/*==================================================
TEXT SELECTION
==================================================*/

::selection{

    background:var(--secondary);

    color:#fff;

}


/*==================================================
UTILITY CLASSES
==================================================*/

.shadow-soft{

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.rounded-xl{

    border-radius:24px;

}

.bg-primary-soft{

    background:#f7f5ef;

}

.text-primary-custom{

    color:var(--primary);

}

.text-secondary-custom{

    color:var(--secondary);

}


/*==================================================
ANIMATIONS
==================================================*/

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.zoom-in{

    animation:zoomIn .6s ease forwards;

}

@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.9);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}


/*==================================================
LOADING EFFECT
==================================================*/

.hero-title,
.hero-tagline,
.hero-description{

    animation:fadeUp 1s ease both;

}

.hero-title{

    animation-delay:.2s;

}

.hero-tagline{

    animation-delay:.4s;

}

.hero-description{

    animation-delay:.6s;

}


/*==================================================
END OF STYLE.CSS
==================================================*/
/*==================================================
LIGHTBOX
==================================================*/

#lightbox{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

display:flex;

justify-content:center;

align-items:center;

opacity:0;

visibility:hidden;

transition:.3s;

z-index:9999;

}

#lightbox.show{

opacity:1;

visibility:visible;

}

.lightbox-content{

position:relative;

max-width:90%;

max-height:90%;

}

.lightbox-content img{

max-width:100%;

max-height:85vh;

border-radius:12px;

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

}

.close-lightbox{

position:absolute;

top:-45px;

right:0;

font-size:40px;

color:#fff;

cursor:pointer;

transition:.3s;

}

.close-lightbox:hover{

color:var(--secondary);

}