/* =========================================
MATRIX AVENUE HOTEL WEBSITE CSS
Mobile First | Bootstrap Compatible
========================================= */


/* =========================================
COLOR VARIABLES
========================================= */

:root {

    --primary: #1C2A39;
    --secondary: #D4AF37;

    --dark: #0F1720;
    --text: #2B2B2B;
    --light: #F7F8FA;

    --border: #E6E6E6;

}


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

body {

    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.7;

    color: var(--text);

    background: white;

    -webkit-font-smoothing: antialiased;

}

h1,
h2,
h3,
h4,
h5 {

    font-family: 'Playfair Display', serif;
    font-weight: 600;
    color: var(--primary);

}

p {
    margin-bottom: 16px;
}

a {

    text-decoration: none;
    transition: all .3s ease;

}

a:hover {
    opacity: .85;
}

img {
    max-width: 100%;
    height: auto;
}


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

section {

    /* padding: 80px 0; */

}

@media(max-width:768px) {

    section {

        /* padding: 50px 0; */

    }

}


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

.navbar {

    background: var(--primary);
    padding: 14px 0;

}

.navbar-brand {

    font-weight: 700;
    font-size: 22px;
    letter-spacing: 1px;

}

.navbar-dark .navbar-nav .nav-link {

    color: white;
    font-weight: 500;
    padding-left: 15px;
    padding-right: 15px;

}

.navbar-dark .navbar-nav .nav-link:hover {

    color: var(--secondary);

}

.navbar-toggler {
    border: none;
}
.logo{
    height: 50px;
    width: auto;
}


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

.btn {

    border-radius: 4px;
    padding: 10px 20px;
    font-weight: 500;

}

.btn-warning {

    background: var(--secondary);
    border: none;
    color: white;

}

.btn-warning:hover {

    background: #b9982c;

}

.btn-outline-dark:hover {

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

}


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

.hero {

    position: relative;
    height: 80vh;
    min-height: 500px;

    overflow: hidden;

}

.hero-img {

    width: 100%;
    height: 100%;
    object-fit: cover;

}

.hero-overlay {

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    /* background: linear-gradient(rgba(28, 42, 57, 0.75),
            rgba(28, 42, 57, 0.5)); */

}

.hero h1 {

    font-size: 46px;
    color: white;

}

.hero p {

    color: white;
    font-size: 18px;

}


/* =========================================
BOOKING WIDGET
========================================= */

.hero-container {
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 4rem 2rem;
    border-radius: 0.5rem;
    text-align: center;
}

/* Booking Widget Styling */
.booking-widget {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-book {
    background-color: #b9982c;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-book:hover {
    background-color: #ff5722;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.info-text {
    font-size: 0.9rem;
    margin-top: 1rem;
    opacity: 0.8;
}

.booking-widget button:hover {

    background: #b9982c;

}


/* =========================================
FEATURE ICONS
========================================= */

.feature-icon {

    font-size: 28px;
    margin-bottom: 10px;

    color: var(--secondary);

}

.feature-box {

    padding: 20px;

}

.feature-box h6 {

    font-weight: 600;

}


/* =========================
SECTION BACKGROUND
========================= */

.bg-soft{
background:#F5F3F1;
}


/* =========================
TEXT STYLES
========================= */

.tag{
color:#C8A97E;
font-size:14px;
letter-spacing:1px;
text-transform:uppercase;
display:block;
margin-bottom:10px;
}

.section-title{
font-size:32px;
line-height:1.4;
margin-bottom:15px;
}

.section-text{
font-size:15px;
color:#555;
}


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

.filter-btn{

border:none;
background:#eee;
padding:8px 16px;
margin:5px;
border-radius:20px;
font-size:14px;
cursor:pointer;

}

.filter-btn.active,
.filter-btn:hover{

background:#C8A97E;
color:white;

}


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

.gallery img{

width:100%;
border-radius:6px;
cursor:pointer;

transition:all .3s ease;

}

.gallery img:hover{

transform:scale(1.05);

}


/* =========================
LIGHTBOX
========================= */


/* LIGHTBOX (HIDDEN BY DEFAULT) */

.lightbox{

display:none; /* IMPORTANT */

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.92);

z-index:9999;

padding:20px;

}

/* ACTIVE STATE (ONLY WHEN OPEN) */

.lightbox.active{

display:flex;
align-items:center;
justify-content:center;

}

/* IMAGE */

.lightbox-img{

max-width:90%;
max-height:85vh;

border-radius:8px;

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

}


/* CLOSE BUTTON */

.lightbox .close{

position:absolute;

top:20px;
right:30px;

font-size:32px;
color:white;

cursor:pointer;

z-index:10;

}


/* RESPONSIVE FIX */

@media (max-width:768px){

.lightbox-img{

max-width:95%;
max-height:75vh;

}

}


/* =========================
OFFERS SECTION
========================= */

.offer-card{

background:#fff;

border-radius:10px;

overflow:hidden;

transition:all .35s ease;

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

}

.offer-card:hover{

transform:translateY(-8px);

box-shadow:
0 18px 40px rgba(0,0,0,0.15);

}


/* IMAGE */

.offer-img{

position:relative;

overflow:hidden;

}

.offer-img img{

width:100%;

transition:all .4s ease;

}

.offer-card:hover .offer-img img{

transform:scale(1.08);

}


/* BADGE */

.offer-badge{

position:absolute;

top:15px;
left:15px;

background:#C8A97E;

color:white;

font-size:12px;

padding:6px 12px;

border-radius:20px;

font-weight:500;

z-index:2;

}


/* CONTENT */

.offer-content{

padding:20px;

}

.offer-content h5{

margin-bottom:8px;

font-size:18px;

}

.offer-content h5 a{

color:#2D2D2D;

}

.offer-content p{

font-size:14px;
color:#777;

}


/* RESPONSIVE */

@media(max-width:768px){

.offer-content{

padding:15px;

}

}

/* =========================
OFFERS SECTION
========================= */

.offers-section{

background:#F5F3F1;
padding:80px 0;

}


/* =========================
BASE CARD
========================= */

.offer-card{

position:relative;

border-radius:16px;

overflow:hidden;

background:#fff;

transition:all .4s ease;

}

.offer-card img{

width:100%;
height:100%;
object-fit:cover;

display:block;

}


/* =========================
LEFT & RIGHT STYLE
========================= */

/* ========================================
OFFERS SECTION
======================================== */

.offers-section{
background:#F5F3F1;
padding:80px 0;
}


/* ========================================
BASE CARD
======================================== */

.offer-card{

position:relative;

border-radius:16px;

overflow:hidden;

background:#fff;

transition:all .4s ease;

height:520px;

}

.offer-card img{

width:100%;
height:100%;
object-fit:cover;

display:block;

}


/* ========================================
HOVER EFFECT
======================================== */

.offer-card:hover{

transform:translateY(-10px);

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

}


/* ========================================
BADGE
======================================== */

.offer-badge{

position:absolute;

top:20px;
left:20px;

background:#C8A97E;

color:white;

padding:8px 14px;

font-size:13px;

border-radius:6px;

z-index:2;

}


/* ========================================
ELEMENTOR STYLE SYSTEM
======================================== */

.elementor-box{

display:flex;
flex-direction:column;

/* VARIABLES */
gap:var(--gap,10px);

padding-top:var(--padding-top,30px);
padding-bottom:var(--padding-bottom,30px);
padding-left:var(--padding-left,30px);
padding-right:var(--padding-right,30px);

background:var(--bg-color,#5C4E48);

color:var(--text-color,#fff);

}


/* ========================================
LEFT CARD (Romantic Stay)
======================================== */

.style-1 .offer-content{

position:absolute;

bottom:0;
left:0;
right:0;

/* Elementor variables */
--padding-top:40px;
--padding-bottom:40px;
--padding-left:40px;
--padding-right:40px;

--bg-color:#5C4E48;

}


/* ========================================
RIGHT CARD FIX (Family Getaway)
======================================== */

/* Your HTML uses .offer-bottom instead of .offer-content */

.offer-bottom{

position:absolute;

bottom:0;
left:0;
right:0;

display:flex;
flex-direction:column;

gap:10px;

padding:40px;

background:#5C4E48;

color:white;

}


/* ========================================
CENTER CARD (FEATURED)
======================================== */

.style-2{

display:flex;
flex-direction:column;

height:520px;

}

.offer-top{

/* Elementor-like system */

display:flex;
flex-direction:column;

gap:10px;

padding:40px;

background:#5C4E48;

color:white;

}

.style-2 img{

flex:1;

height:100%;

object-fit:cover;

}


/* ========================================
TYPOGRAPHY
======================================== */

.offer-card h4{

font-size:22px;
margin:0;

}

.offer-card p{

font-size:14px;
margin:0;

color:#ddd;

}

.elementor-box h4{
    /* font-family:"CalSans", Sans-serif; */
    font-size:26px;line-height:1em;
    font-weight:600;
    letter-spacing:0px;
    color:var( --e-global-color-accent );
}

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

@media(max-width:992px){

.offer-card{
height:auto;
}

.style-2{
height:auto;
}

.style-2 img{
height:300px;
}

}

@media(max-width:768px){

.offer-bottom,
.offer-content,
.offer-top{
padding:25px;
}

.offer-card h4{
font-size:18px;
}

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

.about-img {

    border-radius: 10px;

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

}


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

.room-card {

    border: none;

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

    transition: all .35s ease;

}

.room-card img {

    border-radius: 8px 8px 0 0;

}

.room-card:hover {

    transform: translateY(-8px);

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

}

.room-card .card-body {

    padding: 22px;

}

.room-card h5 {

    font-size: 20px;

    margin-bottom: 8px;

}

.room-card p {

    font-size: 14px;

}


/* =========================================
CORPORATE SECTION
========================================= */

.corporate-section {

    background: var(--light);

}

.corporate-section h2 {

    margin-bottom: 15px;

}


/* =========================================
CTA SECTION
========================================= */

.cta {

    background: var(--primary);

    color: white;

    text-align: center;

}

.cta h2 {

    color: white;
    font-size: 36px;

}

.cta p {

    color: #ddd;

}


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

.gallery img {

    border-radius: 6px;

    transition: all .3s;

}

.gallery img:hover {

    transform: scale(1.05);

}


/* =========================================
OFFERS
========================================= */

.offer-card {

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

    border-radius: 8px;

    /* padding: 30px; */

    transition: .3s;

}

.offer-card:hover {

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

}


/* =========================================
MAP SECTION
========================================= */

.map iframe {

    border-radius: 8px;
    border: 0;

}


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

.contact-form input,
.contact-form textarea {

    border-radius: 4px;

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

    padding: 12px;

    width: 100%;

    margin-bottom: 15px;

}

.contact-form textarea {

    min-height: 120px;

}


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

footer {

    background: var(--dark);

    color: #c9c9c9;

    padding: 50px 0;

}

footer h5,
footer h6 {

    color: white;

    margin-bottom: 15px;

}

footer ul {

    padding: 0;
    list-style: none;

}

footer ul li {

    margin-bottom: 8px;

}

footer a {

    color: #c9c9c9;

}

footer a:hover {

    color: var(--secondary);

}

footer hr {

    border-color: #2c3440;

    margin: 30px 0;

}


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

.whatsapp-btn {

    position: fixed;

    bottom: 25px;
    right: 25px;

    background: #25D366;

    color: white;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 26px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.2);

    z-index: 999;

}

.whatsapp-btn:hover {

    background: #20b85a;

}


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

@media(max-width:992px) {

    .hero {

        height: 65vh;

    }

    .hero h1 {

        font-size: 34px;

    }

}

@media(max-width:768px) {

    .hero {

        height: 60vh;

    }

    .hero h1 {

        font-size: 30px;

    }

    .hero p {

        font-size: 16px;

    }

}

@media(max-width:576px) {

    .hero {

        height: 55vh;

    }

    .hero h1 {

        font-size: 26px;

    }

    .booking-widget {

        padding: 12px;

    }

}