/* =====================================================
   SKSTAYS
   Premium Boutique Monthly Stay
=====================================================*/

:root{

--primary:#0D1B2A;
--secondary:#1B263B;
--gold:#D4AF37;
--orange:#ff6b35;
--white:#ffffff;
--light:#F8FAFC;
--dark:#202124;
--text:#555;
--shadow:0 15px 45px rgba(0,0,0,.10);
--radius:18px;
--transition:.35s ease;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
font-size:16px;
background:#fff;
color:var(--text);
overflow-x:hidden;
line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
transition:var(--transition);

}

ul{

list-style:none;
padding:0;
margin:0;

}

section{

padding:90px 0;

}

.container{

max-width:1200px;

}






/*=========================
TOP BAR
=========================*/

.top-bar{

background:#081726;
padding:10px 0;
color:#fff;
font-size:14px;

}

.top-bar a{

color:#fff;

}

.top-bar i{

color:var(--gold);
margin-right:8px;

}






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

.custom-navbar{

background:rgba(13,27,42,.78);

backdrop-filter:blur(12px);

padding:18px 0;

transition:.4s;

}

.custom-navbar.scrolled{

background:#081726;
box-shadow:0 10px 25px rgba(0,0,0,.15);

}

/*=========================
Website Logo
=========================*/

.site-logo{

height:82px;

width:auto;

display:block;

transition:all .3s ease;

}

.site-logo:hover{

transform:scale(1.05);

}
.navbar-brand{

padding:0;

margin-right:30px;

display:flex;

align-items:center;

}
@media(max-width:992px){

.site-logo{

height:65px;

}

}

@media(max-width:768px){

.site-logo{

height:58px;

}

}

@media(max-width:576px){

.site-logo{

height:50px;

}

}
.navbar-nav .nav-link{

color:#fff!important;
font-weight:500;
margin-left:20px;
position:relative;

}

.navbar-nav .nav-link::after{

content:"";
position:absolute;
bottom:-6px;
left:0;
width:0;
height:2px;
background:var(--gold);
transition:.4s;

}
.custom-navbar.scrolled .site-logo{

height:68px;

}
.navbar-nav .nav-link:hover::after{

width:100%;

}

.navbar-nav .nav-link:hover{

color:var(--gold)!important;

}






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

.hero-btn{

display:inline-block;
padding:16px 38px;
border-radius:50px;
background:var(--orange);
color:#fff;
font-weight:600;
transition:.4s;
box-shadow:var(--shadow);

}

.hero-btn:hover{

background:var(--gold);
color:#111;
transform:translateY(-4px);

}

.hero-outline{

background:transparent;
border:2px solid #fff;
color:#fff;

}

.hero-outline:hover{

background:#fff;
color:#111;

}

.btn-book{

padding:12px 28px;
background:var(--orange);
border-radius:40px;
font-weight:600;
color:#fff!important;

}

.btn-book:hover{

background:var(--gold);
color:#111!important;

}






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

.hero{

position:relative;

background:url('../images/hero/banner.jpg');

background-size:cover;
background-position:center;
background-repeat:no-repeat;

min-height:100vh;

display:flex;
align-items:center;

overflow:hidden;

}

.hero-overlay{

position:absolute;
left:0;
top:0;
width:100%;
height:100%;

background:linear-gradient(to right,
rgba(8,18,34,.92),
rgba(8,18,34,.55));

}

.hero .container{

position:relative;
z-index:99;

}

.hero-tag{

display:inline-block;
background:rgba(255,255,255,.15);

backdrop-filter:blur(10px);

padding:10px 24px;

border-radius:40px;

color:#fff;

font-size:15px;

letter-spacing:1px;

}

.hero-title{

font-size:65px;
line-height:1.1;
font-weight:800;
color:#fff;
margin-top:25px;

}

.hero-desc{

font-size:19px;
color:#ddd;
max-width:650px;

}

.hero-features{

display:flex;
flex-wrap:wrap;
gap:20px;

margin-top:35px;

}

.hero-features span{

color:#fff;

font-size:16px;

}

.hero-features i{

color:var(--gold);
margin-right:6px;

}

.hero-card{

background:#fff;

padding:14px;

border-radius:24px;

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

transform:rotate(-2deg);

transition:.4s;

}

.hero-card:hover{

transform:rotate(0deg) scale(1.03);

}

.hero-card img{

border-radius:18px;

}






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

.section-tag{

display:inline-block;

padding:8px 20px;

background:#FFEFD7;

color:#C17A00;

font-size:14px;

font-weight:600;

border-radius:30px;

letter-spacing:1px;

}

.section-title{

font-size:46px;

font-weight:700;

color:#091726;

margin-top:15px;

}

.section-sub{

font-size:18px;

max-width:760px;

margin:auto;

color:#666;

}






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

.small-card{

background:#fff;

padding:30px;

border-radius:18px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

}

.small-card:hover{

transform:translateY(-10px);

}

.small-card h3{

font-size:34px;

font-weight:700;

color:var(--orange);

margin-bottom:10px;

}

.small-card p{

margin:0;

}






/*=========================
TARGET USERS
=========================*/

.target-users{

background:#F7F9FC;

}

.user-card{

background:#fff;

padding:45px;

text-align:center;

border-radius:20px;

box-shadow:var(--shadow);

transition:.35s;

height:100%;

}

.user-card:hover{

transform:translateY(-12px);

}

.user-card .icon{

width:90px;
height:90px;

margin:auto;

background:linear-gradient(135deg,
var(--orange),
var(--gold));

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

margin-bottom:25px;

}

.user-card .icon i{

font-size:34px;

color:#fff;

}

.user-card h3{

font-size:26px;

font-weight:600;

margin-bottom:15px;

color:#091726;

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

#amenities{
    background:#f8fafc;
}

.amenity-card{
    background:#fff;
    border-radius:20px;
    padding:40px 25px;
    text-align:center;
    transition:.35s ease;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    height:100%;
    position:relative;
    overflow:hidden;
}

.amenity-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:linear-gradient(90deg,#ff6b35,#d4af37);
}

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

.amenity-icon{
    width:85px;
    height:85px;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#ff6b35,#d4af37);
    margin-bottom:25px;
}

.amenity-icon i{
    color:#fff;
    font-size:34px;
}

.amenity-card h4{
    color:#0d1b2a;
    font-weight:600;
    margin-bottom:10px;
}

.amenity-card p{
    margin:0;
    color:#666;
}


/*====================================================
  ROOM SHOWCASE
====================================================*/

.room-image{
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.room-image img{
    transition:.5s;
}

.room-image:hover img{
    transform:scale(1.05);
}

.feature-list{
    padding:0;
    margin:0;
}

.feature-list li{
    margin-bottom:14px;
    font-size:16px;
    color:#555;
}

.feature-list i{
    color:#d4af37;
    margin-right:8px;
}

.room-content{
    padding-left:40px;
}


/*====================================================
  WHY CHOOSE US
====================================================*/

.why-card{
    background:#fff;
    border-radius:20px;
    padding:40px 30px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

.why-card:hover{
    transform:translateY(-12px);
}

.why-card i{
    width:90px;
    height:90px;
    line-height:90px;
    border-radius:50%;
    background:linear-gradient(135deg,#ff6b35,#d4af37);
    color:#fff;
    font-size:34px;
    margin-bottom:25px;
}

.why-card h4{
    color:#0d1b2a;
    font-weight:700;
    margin-bottom:15px;
}

.why-card p{
    color:#666;
}


/*====================================================
  BOOJEE CAFE
====================================================*/

.cafe-section{

    position:relative;

    background:url('../images/cafe/boojee.jpg') center center/cover no-repeat;

    padding:120px 0;

    overflow:hidden;

}

.cafe-section .overlay{

    position:absolute;

    inset:0;

    background:rgba(13,27,42,.82);

}

.cafe-section .container{

    position:relative;

    z-index:5;

}

.cafe-section h2{

    color:#fff;

    font-size:52px;

    font-weight:700;

}

.cafe-section p{

    color:#eee;

    font-size:18px;

    line-height:1.9;

    max-width:850px;

    margin:auto;

}


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

.stats-section{

    background:linear-gradient(135deg,#0d1b2a,#1b263b);

    color:#fff;

    padding:80px 0;

}

.stats-section .counter{

    font-size:60px;

    font-weight:700;

    color:#d4af37;

    margin-bottom:10px;

}

.stats-section p{

    font-size:18px;

    margin:0;

    color:#fff;

}


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

img{
    transition:.4s ease;
}

.shadow-hover:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.scale-hover{
    overflow:hidden;
    border-radius:20px;
}

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


/*====================================================
  CTA BANNER
====================================================*/

.premium-cta{

    background:linear-gradient(135deg,#ff6b35,#d4af37);

    color:#fff;

    border-radius:30px;

    padding:70px;

    margin:80px auto;

}

.premium-cta h2{

    font-size:44px;

    font-weight:700;

}

.premium-cta p{

    font-size:18px;

    margin-top:15px;

}

.premium-cta .hero-btn{

    background:#fff;

    color:#0d1b2a;

}

.premium-cta .hero-btn:hover{

    background:#0d1b2a;

    color:#fff;

}


/*====================================================
  ANIMATION HELPERS
====================================================*/

.fade-up{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*====================================================
GALLERY PREVIEW
====================================================*/

.gallery-preview{

background:#fff;

}

.gallery-item{

position:relative;

overflow:hidden;

border-radius:20px;

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

cursor:pointer;

margin-bottom:30px;

}

.gallery-item img{

width:100%;

height:280px;

object-fit:cover;

transition:.5s;

}

.gallery-item:hover img{

transform:scale(1.10);

}

.gallery-overlay{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(13,27,42,.75);

display:flex;

justify-content:center;

align-items:center;

opacity:0;

transition:.4s;

}

.gallery-item:hover .gallery-overlay{

opacity:1;

}

.gallery-overlay i{

font-size:42px;

color:#fff;

}




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

.room-card{

background:#fff;

border-radius:20px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.room-card:hover{

transform:translateY(-12px);

}

.room-card img{

width:100%;

height:280px;

object-fit:cover;

}

.room-content{

padding:30px;

}

.room-content h3{

font-size:28px;

color:#091726;

margin-bottom:15px;

font-weight:700;

}

.room-content p{

color:#666;

margin-bottom:20px;

}

.room-price{

font-size:28px;

font-weight:700;

color:var(--orange);

}




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

.testimonial{

background:#fff;

padding:45px;

border-radius:22px;

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

text-align:center;

}

.testimonial img{

width:90px;

height:90px;

border-radius:50%;

margin:auto;

margin-bottom:20px;

}

.testimonial p{

font-style:italic;

margin-bottom:20px;

}

.testimonial h5{

margin-bottom:5px;

font-weight:700;

color:#091726;

}

.testimonial span{

font-size:14px;

color:#999;

}




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

.accordion-item{

border:none;

margin-bottom:20px;

border-radius:15px!important;

overflow:hidden;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.accordion-button{

font-weight:600;

padding:22px;

background:#fff;

}

.accordion-button:not(.collapsed){

background:var(--orange);

color:#fff;

}

.accordion-body{

padding:25px;

line-height:1.8;

}




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

.contact-box{

background:#fff;

padding:40px;

border-radius:20px;

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

height:100%;

}

.contact-box h3{

margin-bottom:20px;

color:#091726;

}

.contact-box p{

margin-bottom:18px;

}

.contact-box i{

color:var(--orange);

width:35px;

font-size:18px;

}




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

.form-control,

.form-select{

height:58px;

border-radius:12px;

box-shadow:none;

border:1px solid #ddd;

}

textarea.form-control{

height:180px;

resize:none;

padding-top:15px;

}

.form-control:focus,

.form-select:focus{

border-color:var(--orange);

box-shadow:none;

}




/*====================================================
GOOGLE MAP
====================================================*/

.map-box{

border-radius:25px;

overflow:hidden;

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.map-box iframe{

width:100%;

height:450px;

border:0;

}




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

footer{

background:#081726;

color:#fff;

padding:90px 0 30px;

margin-top:80px;

}

footer h3{

font-size:34px;

font-weight:700;

margin-bottom:25px;

}

footer h4{

margin-bottom:20px;

font-size:22px;

}

footer p{

color:#ccc;

}

footer ul{

padding:0;

}

footer ul li{

margin-bottom:12px;

}

footer ul li a{

color:#ccc;

transition:.3s;

}

footer ul li a:hover{

color:var(--gold);

padding-left:8px;

}

footer hr{

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

margin:40px 0;

}




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

.whatsapp{

position:fixed;

right:25px;

bottom:30px;

width:65px;

height:65px;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:32px;

color:#fff;

z-index:99999;

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

transition:.3s;

}

.whatsapp:hover{

transform:scale(1.1);

color:#fff;

}




/*====================================================
SCROLL TOP
====================================================*/

.scrollTop{

position:fixed;

left:25px;

bottom:30px;

width:60px;

height:60px;

display:flex;

justify-content:center;

align-items:center;

background:var(--orange);

color:#fff;

border-radius:50%;

font-size:24px;

z-index:9999;

transition:.3s;

}

.scrollTop:hover{

background:var(--gold);

color:#111;

}




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

.zoom{

overflow:hidden;

border-radius:20px;

}

.zoom img{

transition:.5s;

}

.zoom:hover img{

transform:scale(1.08);

}




/*====================================================
SECTION SPACING
====================================================*/

.mt-80{

margin-top:80px;

}

.mb-80{

margin-bottom:80px;

}

.py-100{

padding:100px 0;

}




/*====================================================
END
====================================================*/