/* ===========================
   GOOGLE FONT
=========================== */

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

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

*{
    margin:0; 
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#f7f8fc;
    color:#333;
    overflow-x:hidden;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ===========================
   COLORS
=========================== */

:root{

    --green:#17803d;
    --dark:#14213d;
    --white:#ffffff;
    --light:#f4f6f9;
    --gray:#6b7280;
    --shadow:0 15px 40px rgba(0,0,0,.12);
    --radius:18px;

}

/* ===========================
   HEADER
=========================== */

header{

    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    transition:.4s;

}

header.scrolled{

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

}

.navbar{

    max-width:1400px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 50px;

}

.logo{

    display:flex;
    align-items:center;
    gap:10px;

}

.logo img{

    width:55px;

}

.logo h2{

    color:var(--green);
    font-size:32px;
    font-weight:700;

}

header.scrolled .logo h2{

    color:#222;

}

.logo span{

    color:var(--green);

}

.nav-links{

    display:flex;
    gap:35px;

}

.nav-links a{

    color:white;
    font-weight:500;
    transition:.3s;

}

header.scrolled .nav-links a{

    color:#333;

}

.nav-links a:hover{

    color:var(--green);

}

.active{

    color:var(--green)!important;

}

/* Buttons */

.buttons{

    display:flex;
    gap:15px;

}

.login-btn{

    padding:12px 30px;
    border:2px solid white;
    border-radius:10px;
    color:white;
    transition:.3s;

}

header.scrolled .login-btn{

    border:2px solid var(--green);
    color:var(--green);

}

.login-btn:hover{

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

}

.signup-btn{

    background:var(--green);
    color:white;
    padding:12px 30px;
    border-radius:10px;
    transition:.3s;

}

.signup-btn:hover{

    transform:translateY(-3px);
    box-shadow:0 10px 20px rgba(53,166,54,.3);

}

.menu-btn{

    display:none;
    color:var(--green);
    font-size:28px;
    cursor:pointer;

}

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

.hero{

    min-height:100vh;

    background:url("banner.png") center center/cover no-repeat;

    position:relative;

    display:flex;

    align-items:center;

    padding:140px 80px 50px;

}

.overlay{

    position:absolute;

    inset:0;

    background:rgba(4, 10, 24, 0.6);

}

.hero-content{

    position:relative;

    z-index:2;

    width:100%;

}

.left{

    max-width:700px;

}

.left h1{

    color:white;

    font-size:72px;

    line-height:1.1;

    font-weight:800;

}

.left span{

    color:var(--green);

}

.left p{

    color:#eee;

    font-size:21px;

    margin:30px 0;

    line-height:1.8;

}

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

.features{

    display:flex;

    gap:25px;

    margin-top:40px;

    flex-wrap:wrap;

}

.features div{

    display:flex;

    align-items:center;

    gap:12px;

    color:white;

}

.features i{

    width:55px;

    height:55px;

    background:var(--green);

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:20px;

}

/* ===========================
   SEARCH BOX
=========================== */

.search-card{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    width:90%;

    max-width:1250px;

    background:white;

    border-radius:20px;

    box-shadow:var(--shadow);

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr auto;

    gap:20px;

    padding:25px;

    z-index:5;

}

.search-item{

    display:flex;

    align-items:center;

    gap:15px;

    border-right:1px solid #ddd;

    padding-right:15px;

}

.search-item:last-child{

    border:none;

}

.search-item i{

    color:var(--green);

    font-size:24px;

}

.search-item input{

    width:100%;

    border:none;

    outline:none;

    font-size:16px;

    background:transparent;

}

.search-item select{

    border:none;

    outline:none;

    width:100%;

    background:transparent;

    font-size:16px;

}

.search-card button{

    background:var(--green);

    color:white;

    border:none;

    padding:18px 35px;

    border-radius:12px;

    font-size:17px;

    cursor:pointer;

    transition:.3s;

}

.search-card button:hover{

    background:#12692f;

    transform:translateY(-3px);

}

/* ===========================
   TRUSTED SECTION
=========================== */

.trusted{

    margin-top:120px;

    text-align:center;

    padding:60px 20px;

}

.trusted h2{

    font-size:38px;

    margin-bottom:15px;

}

.trusted span{

    color:var(--green);

}

.stars{

    color:#FFD700;

    font-size:28px;

    letter-spacing:5px;

}
/* ===========================================
   SECTION TITLES
=========================================== */

section{
    padding:90px 8%;
}

section h2{
    text-align:center;
    font-size:42px;
    color:var(--dark);
    margin-bottom:50px;
    font-weight:700;
}

/* ===========================================
   POPULAR HOSTELS
=========================================== */

.popular{
    background:#fff;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

.card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.4s;
}

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

.card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.content{
    padding:25px;
}

.content h3{
    font-size:24px;
    color:var(--dark);
    margin-bottom:10px;
}

.content p{
    color:#777;
    margin-bottom:18px;
}

.price{
    color:var(--green);
    font-size:22px;
    font-weight:700;
    margin-bottom:25px;
}

.content a{
    display:inline-block;
    background:var(--green);
    color:#fff;
    padding:12px 28px;
    border-radius:10px;
    transition:.3s;
}

.content a:hover{
    background:#12692f;
}

/* ===========================================
   HOW IT WORKS
=========================================== */

.steps{
    background:#f7f8fc;
}

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

.step{
    background:#fff;
    border-radius:18px;
    padding:40px;
    text-align:center;
    transition:.4s;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}

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

.step i{
    width:90px;
    height:90px;
    background:var(--green);
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    margin:auto;
    font-size:34px;
    margin-bottom:25px;
}

.step h3{
    font-size:24px;
    margin-bottom:15px;
}

.step p{
    color:#777;
    line-height:1.8;
}

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

.why{
    background:#fff;
}

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

.why-grid div{
    background:#fff;
    border-radius:18px;
    padding:35px;
    text-align:center;
    transition:.4s;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.why-grid div:hover{
    background:var(--green);
    color:#fff;
    transform:translateY(-10px);
}

.why-grid div:hover h3,
.why-grid div:hover p,
.why-grid div:hover i{
    color:#fff;
}

.why-grid i{
    font-size:45px;
    color:var(--green);
    margin-bottom:20px;
}

.why-grid h3{
    margin-bottom:15px;
    font-size:22px;
}

.why-grid p{
    color:#777;
    line-height:1.7;
}

/* ===========================================
   CALL TO ACTION
=========================================== */

.cta{
    background:linear-gradient(rgba(20,33,61,.85),
    rgba(20,33,61,.85)),
    url("../images/cta.jpg") center/cover;
    color:#fff;
    text-align:center;
    border-radius:25px;
    margin:80px auto;
    width:90%;
}

.cta h2{
    color:#fff;
    font-size:50px;
    margin-bottom:20px;
}

.cta p{
    font-size:20px;
    color:#ddd;
    margin-bottom:35px;
}

.cta a{
    display:inline-block;
    background:var(--green);
    color:#fff;
    padding:18px 45px;
    border-radius:12px;
    font-size:18px;
    transition:.3s;
}

.cta a:hover{
    background:#fff;
    color:var(--green);
}

/* ===========================================
   SIMPLE FADE ANIMATION
=========================================== */

.card,
.step,
.why-grid div{
    animation:fadeUp .8s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

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

footer{
    background:#14213d;
    color:white;
    padding:80px 8% 30px;
}

.footer-content{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:40px;
    margin-bottom:50px;
}

.footer-content h2{
    color:white;
    text-align:left;
    margin-bottom:15px;
    font-size:32px;
}

.footer-content h2 span{
    color:var(--green);
}

.footer-content h3{
    margin-bottom:20px;
    font-size:20px;
}

.footer-content p{
    color:#d1d5db;
    line-height:1.8;
}

.footer-content a{
    display:block;
    color:#d1d5db;
    margin-bottom:12px;
    transition:.3s;
}

.footer-content a:hover{
    color:var(--green);
    padding-left:5px;
}

.socials{
    display:flex;
    gap:15px;
    margin-top:20px;
}

.socials i{
    width:45px;
    height:45px;
    background:rgba(255,255,255,.1);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.3s;
}

.socials i:hover{
    background:var(--green);
    transform:translateY(-5px);
}

.copyright{
    border-top:1px solid rgba(255,255,255,.15);
    text-align:center;
    padding-top:25px;
    color:#cbd5e1;
}

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

.scroll-top{
    position:fixed;
    right:25px;
    bottom:25px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:var(--green);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 10px 20px rgba(0,0,0,.2);
    z-index:999;
    transition:.3s;
}

.scroll-top:hover{
    transform:translateY(-5px);
}

/* ===========================================
   UTILITIES
=========================================== */

.text-center{
    text-align:center;
}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:50px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:50px;}

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

@keyframes float{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

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

@media(max-width:1024px){

    .navbar{
        padding:20px 30px;
    }

    .left h1{
        font-size:55px;
    }

    .search-card{
        grid-template-columns:1fr 1fr;
    }

    .search-card button{
        width:100%;
    }

}

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

@media(max-width:768px){

    .menu-btn{
        display:block;
    }

    .buttons{
        display:none;
    }

    .nav-links{
        position:absolute;
        top:100%;
        left:-100%;
        width:100%;
        background:white;
        flex-direction:column;
        text-align:center;
        padding:30px 0;
        transition:.4s;
        box-shadow:0 10px 20px rgba(0,0,0,.1);
    }

    .nav-links.active{
        left:0;
    }

    .nav-links a{
        color:#333 !important;
    }

    .hero{
        padding:150px 25px 120px;
        text-align:center;
    }

    .left{
        margin:auto;
    }

    .left h1{
        font-size:42px;
    }

    .left p{
        font-size:18px;
    }

    .features{
        justify-content:center;
    }

    .search-card{
        position:relative;
        bottom:auto;
        left:auto;
        transform:none;
        width:100%;
        margin-top:40px;
        grid-template-columns:1fr;
    }

    .search-item{
        border-right:none;
        border-bottom:1px solid #eee;
        padding-bottom:15px;
    }

    section h2{
        font-size:32px;
    }

    .cta h2{
        font-size:35px;
    }

}

/* ===========================================
   SMALL PHONES
=========================================== */

@media(max-width:480px){

    .navbar{
        padding:18px;
    }

    .logo h2{
        font-size:24px;
    }

    .left h1{
        font-size:34px;
    }

    .left p{
        font-size:16px;
    }

    .features{
        gap:15px;
    }

    .features div{
        width:100%;
        justify-content:center;
    }

    .card img{
        height:220px;
    }

    .content{
        padding:20px;
    }

    .content h3{
        font-size:20px;
    }

    .price{
        font-size:18px;
    }

    .cta{
        width:95%;
        padding:60px 20px;
    }

    .cta h2{
        font-size:28px;
    }

    .cta p{
        font-size:16px;
    }

}


.hostel-layout{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:40px;
}

.filter-sidebar{
    background:#fff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:fit-content;
}

.filter-group{
    margin:20px 0;
}

.filter-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.filter-group select,
.filter-group input{
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:10px;
}

.hostel-grid{
     display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

.badge{
    display:inline-block;
    padding:6px 12px;
    border-radius:20px;
    color:#fff;
    font-size:12px;
    margin-bottom:15px;
}

.available{
    background:#2ecc71;
}

.limited{
    background:#f39c12;
}

.card-buttons{
    display:flex;
    gap:12px;
    margin-top:20px;
}

.pagination{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:50px 0;
}

.pagination a{
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#f5f5f5;
    color:#333;
    transition:.3s;
}

.pagination a.active,
.pagination a:hover{
    background:#17803d;
    color:#fff;
}

.map-section{
    padding:80px 8%;
    text-align:center;
}

.map-container{
    margin-top:30px;
    overflow:hidden;
    border-radius:20px;
}

.newsletter{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:30px;
    flex-wrap:wrap;
}

.newsletter input{
    width:350px;
    max-width:100%;
    padding:16px;
    border:none;
    border-radius:10px;
}

.details-gallery{
    padding:120px 8% 40px;
}

.gallery-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:20px;
}

.main-image img{
    width:100%;
    height:520px;
    object-fit:cover;
    border-radius:20px;
}

.thumbs{
    display:grid;
    gap:15px;
}

.thumbs img{
    height:95px;
    object-fit:cover;
    border-radius:12px;
    cursor:pointer;
    transition:.3s;
}

.thumbs img:hover,
.thumbs img.active{
    border:3px solid #17803d;
}

.details-container{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    padding:60px 8%;
}

.details-content h1{
    font-size:42px;
}

.rating{
    color:#f4b400;
    margin:15px 0;
}

.location{
    font-size:18px;
    color:#666;
    margin-bottom:20px;
}

.description{
    line-height:2;
    color:#555;
}

.booking-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.1);
    position:sticky;
    top:120px;
}

.booking-card input,
.booking-card select{
    width:100%;
    padding:14px;
    margin:10px 0 20px;
    border:1px solid #ddd;
    border-radius:10px;
}

.quick-info{
    margin-top:20px;
}

.quick-info p{
    margin:10px 0;
}

.amenities-grid,
.room-grid,
.nearby-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:25px;
}

.amenity,
.near-card{
    background:#fff;
    padding:25px;
    text-align:center;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

.amenity:hover,
.near-card:hover{
    transform:translateY(-8px);
}

.amenity i,
.near-card i{
    font-size:40px;
    color:#17803d;
    margin-bottom:15px;
}

.room-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.room-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.room-info{
    padding:20px;
}

.room-info h4{
    color:#17803d;
    margin:15px 0;
}

.facility-list{
    max-width:700px;
    margin:auto;
    line-height:2.3;
    font-size:18px;
}

.rules-card{
    max-width:800px;
    margin:auto;
    background:#fff;
    padding:30px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.rules-card p{
    margin:15px 0;
}

.review-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:25px;
}

.review-card{
    background:#fff;
    padding:25px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.review-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}

.review-header img{
    width:70px;
    height:70px;
    border-radius:50%;
    object-fit:cover;
}

.owner-card{
    display:flex;
    gap:30px;
    align-items:center;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.owner-card img{
    width:180px;
    height:180px;
    border-radius:50%;
    object-fit:cover;
}

.owner-buttons{
    margin-top:20px;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

@media(max-width:768px){
    .owner-card{
        flex-direction:column;
        text-align:center;
    }
}

/* ================= MODAL ================= */

.modal{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

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

justify-content:center;

align-items:center;

z-index:9999;

}

.modal-content{

background:#fff;

padding:40px;

border-radius:20px;

max-width:500px;

width:90%;

text-align:center;

position:relative;

animation:fadeUp .4s ease;

}

.close-modal{

position:absolute;

right:20px;

top:15px;

font-size:30px;

cursor:pointer;

}

.success-icon{

font-size:70px;

color:#17803d;

margin-bottom:20px;

}

.modal-content p{

margin:20px 0;

line-height:1.8;

color:#666;

}

/* Owner Registration Form */

.rules-card form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.rules-card form input,
.rules-card form select,
.rules-card form textarea{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
    outline:none;
}

.rules-card form input:focus,
.rules-card form select:focus,
.rules-card form textarea:focus{
    border-color:#17803d;
    box-shadow:0 0 8px rgba(53,166,54,.2);
}

.rules-card form button{
    align-self:flex-start;
}

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

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

.contact-card{
    background:#fff;
    padding:35px;
    text-align:center;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}

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

.contact-card i{
    font-size:45px;
    color:#17803d;
    margin-bottom:20px;
}

.contact-wrapper{
    max-width:800px;
    margin:auto;
}

.contact-form{
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.contact-form form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.contact-form input,
.contact-form textarea{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    font-size:16px;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:#17803d;
    box-shadow:0 0 8px rgba(53,166,54,.25);
}

.results-summary{
    text-align:center;
    padding:60px 8% 20px;
}

.results-summary p{
    color:#666;
    margin-top:10px;
}

.sort-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
    flex-wrap:wrap;
    gap:15px;
}

.sort-bar select{
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
}

.saved-preview{
    padding:80px 8%;
    background:#f8f9fa;
}

.saved-preview h2{
    text-align:center;
    margin-bottom:40px;
}

.pagination-section{
    margin:40px 0;
}

.pagination{
    display:flex;
    justify-content:center;
    gap:12px;
}

.pagination a{
    width:45px;
    height:45px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:#f1f1f1;
    transition:.3s;
    text-decoration:none;
    color:#333;
}

.pagination a:hover,
.pagination a.active{
    background:#17803d;
    color:#fff;
}
/* Search Page Extras */

.list-view{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.list-view .card{
    display:flex;
    gap:25px;
    align-items:center;
}

.list-view .card img{
    width:320px;
    height:220px;
    object-fit:cover;
}

.save-hostel{
    cursor:pointer;
    border:none;
    background:#f5f5f5;
    padding:10px 16px;
    border-radius:8px;
    transition:.3s;
}

.save-hostel.saved{
    background:#17803d;
    color:#fff;
}

#emptyResults{
    display:none;
    text-align:center;
    padding:80px 20px;
}

#emptyResults i{
    font-size:70px;
    color:#17803d;
    margin-bottom:20px;
}

@media(max-width:768px){

    .list-view .card{
        flex-direction:column;
    }

    .list-view .card img{
        width:100%;
    }

}

/* ===================================
   LOGIN PAGE
=================================== */

.login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:120px 8% 60px;
    background:#f5f7fa;
}

.login-container{
    width:100%;
    max-width:1200px;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.1);
}

/* LEFT SIDE */

.login-left{
    background:linear-gradient(135deg,#17803d,#0d5b2b);
    color:#fff;
    padding:70px 50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.login-left h1{
    font-size:48px;
    margin-bottom:20px;
}

.login-left p{
    line-height:1.8;
    opacity:.95;
}

.login-features{
    margin-top:40px;
}

.login-features p{
    margin:18px 0;
    font-size:17px;
}

.login-features i{
    margin-right:10px;
}

/* RIGHT SIDE */

.login-right{
    padding:60px;
}

.login-right h2{
    font-size:36px;
    margin-bottom:10px;
}

.login-right>p{
    color:#666;
    margin-bottom:30px;
}

/* ACCOUNT TABS */

.account-tabs{
    display:flex;
    gap:15px;
    margin-bottom:35px;
}

.account-tabs button{
    flex:1;
    padding:15px;
    border:none;
    border-radius:10px;
    background:#eee;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.account-tabs button.active{
    background:;
    color:#000000;
}

/* INPUTS */

.input-group{
    margin-bottom:22px;
}

.input-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
}

.input-group input{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:15px;
    transition:.3s;
}

.input-group input:focus{
    border-color:#17803d;
    outline:none;
    box-shadow:0 0 10px rgba(53,166,54,.2);
}

/* PASSWORD */

.password-box{
    position:relative;
}

.password-box i{
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    color:#777;
}

/* OPTIONS */

.login-options{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
    font-size:14px;
}

.login-options a{
    color:#17803d;
    text-decoration:none;
    font-weight:600;
}

/* BUTTONS */

.login-submit{
    width:100%;
    padding:16px;
    font-size:17px;
}

.google-btn{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    background:#fff;
    border-radius:10px;
    cursor:pointer;
    font-size:16px;
    transition:.3s;
}

.google-btn:hover{
    background:#f7f7f7;
}

.google-btn i{
    margin-right:10px;
    color:#db4437;
}

/* DIVIDER */

.divider{
    text-align:center;
    margin:30px 0;
    position:relative;
}

.divider span{
    background:#fff;
    padding:0 15px;
    position:relative;
    z-index:2;
}

.divider::before{
    content:"";
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:1px;
    background:#ddd;
}

/* SIGNUP LINK */

.signup-link{
    text-align:center;
    margin-top:30px;
}

.signup-link a{
    color:#17803d;
    font-weight:600;
    text-decoration:none;
}

/* MOBILE */

@media(max-width:900px){

.login-container{

grid-template-columns:1fr;

}

.login-left{

display:none;

}

.login-right{

padding:40px 25px;

}

.login-right h2{

font-size:30px;

}

}
/* LOGIN SUCCESS */

.success-toast{

position:fixed;

top:30px;

right:30px;

background:#17803d;

color:#fff;

padding:18px 25px;

border-radius:10px;

display:none;

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

z-index:9999;

animation:slideDown .4s ease;

}

.success-toast i{

margin-right:10px;

}

@keyframes slideDown{

from{

transform:translateY(-40px);

opacity:0;

}

to{

transform:translateY(0);

opacity:1;

}

}

/* ===================================
   SIGNUP PAGE
=================================== */

/* Profile Image */

.profile-preview{
    width:120px;
    height:120px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #17803d;
    margin-top:20px;
    display:block;
}

input[type="file"]{
    padding:10px;
    border:2px dashed #17803d;
    border-radius:10px;
    width:100%;
    cursor:pointer;
    background:#fafafa;
}

/* Password Strength */

.strength-meter{
    width:100%;
    height:8px;
    background:#ddd;
    border-radius:10px;
    margin-top:10px;
    overflow:hidden;
}

#strengthBar{
    width:0%;
    height:100%;
    background:red;
    transition:.4s;
}

#strengthText{
    display:block;
    margin-top:8px;
    font-size:13px;
    color:#666;
}

/* Terms */

.terms-box{
    margin:25px 0;
    font-size:15px;
    line-height:1.8;
}

.terms-box a{
    color:#17803d;
    text-decoration:none;
    font-weight:600;
}

/* Owner Fields */

.owner-fields{
    animation:fadeIn .4s ease;
}

/* Success Modal */

.modal{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.modal-content{
    width:90%;
    max-width:480px;
    background:#fff;
    border-radius:20px;
    padding:40px;
    text-align:center;
    animation:scaleUp .3s ease;
}

.success-icon{
    font-size:70px;
    color:#17803d;
    margin-bottom:20px;
}

.modal-content h2{
    margin-bottom:15px;
}

.modal-content p{
    color:#666;
    line-height:1.8;
    margin-bottom:30px;
}

/* Animations */

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes scaleUp{

from{

transform:scale(.8);

opacity:0;

} 

to{

transform:scale(1);

opacity:1;

}

}

/* Responsive */

@media(max-width:768px){

.profile-preview{

width:90px;

height:90px;

margin:auto;
margin-top:20px;

}

.modal-content{

padding:30px 20px;

}

}

/* ===================================
   FORGOT PASSWORD PAGE
=================================== */

#forgotPasswordForm{
    animation:fadeIn .5s ease;
}

#resetSuccess{
    text-align:center;
    animation:fadeIn .5s ease;
}

#resetSuccess h3{
    margin:20px 0 10px;
    font-size:28px;
    color:#17803d;
}

#resetSuccess p{
    color:#666;
    line-height:1.8;
    margin-bottom:30px;
}

#resetSuccess .signup-btn{
    display:inline-block;
    padding:15px 30px;
}

/* Loading Button */

.loading{

pointer-events:none;

opacity:.8;

}

.loading i{

margin-right:8px;

}

/* Email Icon */

.login-left .fa-envelope-circle-check{

font-size:18px;

margin-right:10px;

color:#fff;

}

/* Smooth Inputs */

#forgotPasswordForm input{

transition:.3s ease;

}

#forgotPasswordForm input:focus{

border-color:#17803d;

box-shadow:0 0 10px rgba(53,166,54,.25);

}

/* Fade Animation */

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* Mobile */

@media(max-width:768px){

#resetSuccess h3{

font-size:24px;

}

#resetSuccess i{

font-size:55px;

}

}

/* Green View Hostel */

.rooms-section,
.amenities,
.booking-section{
    padding:80px 8%;
}

.booking-wrapper{
    display:grid;
    grid-template-columns:1fr 420px;
    gap:40px;
    align-items:start;
}

.booking-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.booking-card form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.booking-card input,
.booking-card select,
.booking-card textarea{
    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
}

.booking-card input:focus,
.booking-card select:focus,
.booking-card textarea:focus{
    border-color:#17803d;
}

@media(max-width:900px){

.booking-wrapper{

grid-template-columns:1fr;

}

}
/* Green View Description */

.hostel-description,
.location-section,
.reviews,
.owner-profile,
.faq-section{
    padding:80px 8%;
}

.description p{
    margin:20px 0;
    line-height:1.9;
    color:#555;
}

.map-container{
    margin-top:30px;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.faq-item{
    background:#fff;
    margin:20px 0;
    padding:25px;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.06);
}

.faq-item h3{
    color:#17803d;
    margin-bottom:10px;
}

.owner-profile img{
    max-width:100%;
    display:block;
}
/* ================= GREEN VIEW EXTRAS ================= */

.related-hostels{
    padding:80px 8%;
    background:#f8f9fa;
}

.related-hostels h2{
    text-align:center;
    margin-bottom:40px;
}

.gallery{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.main-photo img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:20px;
}

.thumbnail-row{
    display:flex;
    gap:15px;
    overflow-x:auto;
}

.thumbnail-row img{
    width:120px;
    height:90px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
}

.thumbnail-row img:hover,
.thumbnail-row img.active{
    border:3px solid #17803d;
}

.facts{
    padding:60px 8%;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:20px;
}

.fact-card{
    background:#fff;
    text-align:center;
    padding:30px;
    border-radius:20px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.fact-card i{
    font-size:35px;
    color:#17803d;
    margin-bottom:15px;
}

@media(max-width:768px){

.main-photo img{
    height:260px;
}

.thumbnail-row img{
    width:90px;
    height:70px;
}

}








/* 1. Hero Container Base */
.hero.hostel-hero {
  position: relative;
  min-height: 80vh; /* Better than fixed height for responsiveness */
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Keeps content to the left */
  padding: 80px 5%; /* Relative padding */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* 2. Responsive Hero Content */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px; /* Better control for readability */
  width: 100%;
  color: #ffffff; /* Typically hero text is light on dark overlays */
  text-align: left;
}

/* 3. Typography Enhancements */
.hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem); /* Responsive font scaling */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff; /* Ensuring visibility */
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.6;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
}

/* 4. Responsive Buttons Layout */
.hero-buttons {
  display: flex;
  flex-wrap: wrap; /* Allows buttons to stack on very small screens */
  gap: 15px;
  margin-top: 20px;
}

.hero-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  min-width: 160px;
}

.hero-buttons .signup-btn {
  background-color: #17803d;
  color: #fff;
  border: 2px solid #17803d;
}

.hero-buttons .signup-btn:hover {
  background-color: #12692f;
  border-color: #12692f;
  transform: translateY(-2px);
}

.hero-buttons .login-btn {
  background-color: transparent;
  color: #fff;
  border: 2px solid #fff;
}

.hero-buttons .login-btn:hover {
  background-color: #fff;
  color: #000;
  transform: translateY(-2px);
}

/* 5. Mobile Responsiveness */
@media (max-width: 768px) {
  .hero.hostel-hero {
    padding: 60px 20px;
    justify-content: center; /* Center content on mobile */
    text-align: center;
  }

  .hero-content {
    text-align: center;
  }

  .hero-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }
}

/* 6. View Transitions (Optional modern feature) */
@view-transition {
  navigation: auto; /* Smoother page entries if supported */
}







/* Container for cards (likely .summary-right in your case) */
.summary-right {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 20px;
}

/* Responsive Price Card */
.price-card {
  display: flex;
  flex-direction: column;
  align-items: center; /* Center content for a modern look */
  text-align: center;
  padding: 30px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  
  /* Responsive Widths */
  width: 100%;
  max-width: 350px; /* Prevents card from getting too wide on desktop */
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.price-card:hover {
  transform: translateY(-5px);
}

/* Typography Scaling */
.price-card h1 {
  font-size: clamp(2rem, 5vw, 3rem); /* Scales between 2rem and 3rem based on viewport */
  margin: 10px 0;
}

.price-card h3 {
  font-size: 1.2rem;
  color: #666;
  text-transform: uppercase;
}

.price-card p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 25px;
}

/* Responsive Button */
.signup-btn {
  display: inline-block;
  background-color: #17803d;
  color: #fff;
  padding: 12px 30px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  width: fit-content;
  transition: background 0.3s ease;
}

.signup-btn:hover {
  background-color: #12692f;
}

/* Mobile Adjustments */
@media (max-width: 480px) {
  .price-card {
    padding: 20px;
    max-width: 100%; /* Full width on small phones */
  }
}










/* Section Container */
section.related-hostels {
  padding: 60px 5%; /* Reduced padding for mobile */
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Section Title */
section.related-hostels h2 {
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: left; /* Or center if you prefer */
}

/* Responsive Grid */
.hostel-grid {
  display: grid;
  /* 
     On very small screens (under 350px), it will be 1 column. 
     The 280px min ensures cards don't overflow on small mobile devices.
  */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; /* Smaller gap for mobile */
  width: 100%;
}

/* Tablet and Desktop adjustments */
@media (min-width: 768px) {
  section.related-hostels {
    padding: 80px 8%;
  }

  section.related-hostels h2 {
    font-size: 2.4rem;
  }

  .hostel-grid {
    gap: 35px; /* Restoration of your original gap for larger screens */
  }
}

/* Optional: Large screens - cap columns to 3 or 4 if desired */
@media (min-width: 1200px) {
  .hostel-grid {
    /* If you want to limit to 3 columns even on huge screens */
    /* grid-template-columns: repeat(3, 1fr); */
  }
}









/* Base styles and Desktop */
.hero {
  display: flex;
  flex-direction: row; /* Desktop default */
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 150px 5% 120px;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

/* Tablet and Mobile */
@media (max-width: 992px) {
  .hero {
    flex-direction: column;
    padding: 120px 25px 60px;
    text-align: center;
    justify-content: center;
  }

  .hero-content {
    max-width: 100% !important;
    margin-bottom: 40px;
  }

  .hero-content .left {
    text-align: center !important; /* Center text on mobile */
  }
}

.hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* Dynamically scales between 32px and 56px */
  line-height: 1.2;
}

.hero-content p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  max-width: 600px;
  margin: 20px auto; /* Centers the paragraph if text-align is center */
}

.search-card {
  display: grid;
  /* Adjust columns based on space: 1 column on mobile, more on desktop if needed */
  grid-template-columns: 1fr; 
  gap: 15px;
  width: 100%;
  max-width: 450px; /* Limit width on desktop so it doesn't stretch too far */
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* If you want the search card to be horizontal on wide screens */
@media (min-width: 1200px) {
  .search-card {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    max-width: 1000px;
  }
}

.hero {
  background-size: cover;
  background-position: center;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
  z-index: 1;
}

.hero-content, .search-card {
  z-index: 2; /* Ensure content is above overlay */
}








/* Base styles (Mobile First) */
.hostel-layout {
  display: grid;
  grid-template-columns: 1fr; /* Stack vertically by default */
  gap: 20px;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}
 
/* Desktop styles */
@media (min-width: 768px) {
  .hostel-layout {
    grid-template-columns: 280px 1fr; /* Side-by-side on larger screens */
    padding: 20px;
  }
}

.hostel-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.filter-sidebar {
  flex: 0 0 280px; /* Fixed width sidebar */
  width: 100%; /* Fallback for older browsers */
}

.hostel-results {
  flex: 1 1 300px; /* Grow to fill space, but wrap if width < 300px */
}

/* ===========================================
   POLISH LAYER
   Visual refresh: softer depth, calmer green,
   clearer hierarchy, tactile states.
   Appended so it overrides earlier rules.
=========================================== */

:root{
    --green:#17803d;
    --green-deep:#12692f;
    --green-bright:#2fae5b;
    --green-soft:#eaf6ee;
    --ink:#12203a;
    --ink-soft:#233042;
    --muted-2:#667085;
    --line-soft:rgba(18,32,58,.08);
    --surface:#ffffff;
    --paper:#fbfcfe;
    --shadow-soft:0 10px 30px -12px rgba(18,32,58,.18);
    --shadow-lift:0 28px 48px -18px rgba(18,32,58,.28);
    --ease-out:cubic-bezier(.16,1,.3,1);
}

html{
    scroll-padding-top:88px;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

body{
    background:
        radial-gradient(1100px 520px at 8% -12%, rgba(23,128,61,.09), transparent 62%),
        radial-gradient(900px 480px at 96% 0%, rgba(18,32,58,.05), transparent 60%),
        var(--paper);
    color:var(--ink-soft);
    font-size:16px;
    line-height:1.62;
}

img{
    outline:1px solid rgba(18,32,58,.08);
    outline-offset:-1px;
}

h1,h2,h3,h4{
    letter-spacing:-.02em;
    text-wrap:balance;
}

p,li{
    text-wrap:pretty;
}

::selection{
    background:rgba(23,128,61,.18);
    color:var(--ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-btn:focus-visible{
    outline:3px solid rgba(23,128,61,.42);
    outline-offset:3px;
    border-radius:10px;
}

/* ---------- Navigation ---------- */

header.scrolled{
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(14px) saturate(1.3);
    -webkit-backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 1px 0 var(--line-soft), 0 12px 30px -22px rgba(18,32,58,.45);
}

.navbar{
    padding:14px 50px;
}

.logo .logo-mark{
    color:#fff;
}

.logo-mark{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--green);
    color:#fff;
    font-size:17px;
    box-shadow:0 8px 18px -10px rgba(23,128,61,.8);
}

.logo img{
    width:44px;
    height:44px;
    object-fit:contain;
    outline:none;
}

.logo h2{
    font-size:26px;
    letter-spacing:-.03em;
}

.nav-links{
    gap:30px;
}

.nav-links a{
    position:relative;
    font-size:15.5px;
}

.login-btn,
.signup-btn{
    padding:11px 22px;
    border-radius:12px;
    font-weight:600;
    font-size:15px;
}

.login-btn{
    transition:background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}

.signup-btn{
    box-shadow:0 8px 18px -10px rgba(23,128,61,.7);
    transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), background-color .2s var(--ease-out);
}

.signup-btn:hover{
    background:var(--green-deep);
    transform:translateY(-2px);
    box-shadow:0 14px 26px -12px rgba(23,128,61,.75);
}

.login-btn:hover{
    background:rgba(255,255,255,.92);
    color:var(--green-deep);
    border-color:rgba(255,255,255,.92);
}

header.scrolled .login-btn:hover{
    background:var(--green-soft);
    border-color:rgba(23,128,61,.35);
}

/* ---------- Hero ---------- */

.hero{
    min-height:min(100dvh, 860px);
    padding:clamp(112px, 13vh, 150px) 8% clamp(96px, 12vh, 150px);
    background:url("banner.png") center 35%/cover no-repeat;
}

.overlay{
    background:
        linear-gradient(100deg, rgba(7,15,31,.9) 0%, rgba(7,15,31,.64) 48%, rgba(7,15,31,.3) 100%),
        linear-gradient(0deg, rgba(7,15,31,.45), rgba(7,15,31,0) 45%);
}

.left h1{
    font-size:clamp(2.4rem, 4.5vw, 3.85rem);
    line-height:1.08;
    letter-spacing:-.035em;
    max-width:17ch;
    text-shadow:0 2px 24px rgba(0,0,0,.22);
}

.left p{
    font-size:clamp(1.05rem, 1.4vw, 1.25rem);
    line-height:1.7;
    max-width:52ch;
    margin:26px 0;
    color:rgba(255,255,255,.88);
}

.features{
    display:grid;
    grid-template-columns:repeat(2, max-content);
    gap:12px;
    margin-top:26px;
}

.features div{
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:9px 18px 9px 10px;
    border-radius:999px;
    font-size:14.5px;
    font-weight:500;
    transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}

.features p{
    margin:0;
    font-size:14.5px;
    line-height:1.3;
    color:#fff;
}

.features div:hover{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.28);
    transform:translateY(-2px);
}

.features i{
    width:36px;
    height:36px;
    font-size:15px;
    border-radius:999px;
    background:var(--green);
    box-shadow:0 6px 14px -4px rgba(23,128,61,.55);
}

/* ---------- Search card ---------- */

.search-card{
    bottom:40px;
    padding:16px;
    gap:12px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.55);
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 30px 70px -28px rgba(7,15,31,.55);
    grid-template-columns:minmax(210px, 1.6fr) repeat(2, minmax(130px, 1fr)) minmax(120px, .9fr) auto;
}

.search-item{
    padding:10px 14px;
    border-radius:14px;
    border-right:1px solid var(--line-soft);
    transition:background-color .18s var(--ease-out);
}

.search-item:hover{
    background:rgba(18,32,58,.025);
}

.search-item:focus-within{
    background:rgba(23,128,61,.07);
}

.search-item input,
.search-item select{
    color:var(--ink);
}

.search-item input::placeholder{
    color:#8a94a6;
}

.search-card button{
    padding:17px 30px;
    border-radius:14px;
    font-weight:600;
    white-space:nowrap;
    background:var(--green);
    box-shadow:0 12px 24px -12px rgba(23,128,61,.8);
    transition:transform .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.search-card button:hover{
    background:var(--green-deep);
    transform:translateY(-2px);
    box-shadow:0 18px 30px -14px rgba(23,128,61,.85);
}

.search-card button:active{
    transform:scale(.98);
}

/* Search card that sits in its own section (hostels, search results) */
.search-section .search-card{
    position:relative;
    bottom:auto;
    left:auto;
    transform:none;
    width:100%;
    max-width:1250px;
    margin:0 auto;
}

/* ---------- Auth pages: header on light background ---------- */

body.auth .login-left{
    background:linear-gradient(135deg,var(--green) 0%,#0d5b2b 100%);
}

body.auth .login-submit{
    display:block;
    width:100%;
    padding:15px 20px;
    border-radius:14px;
    box-shadow:0 14px 26px -14px rgba(23,128,61,.85);
}

body.auth .google-btn{
    border-radius:14px;
    transition:background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}

body.auth .google-btn:hover{
    background:#f7f9fc;
    border-color:rgba(18,32,58,.2);
}

body.auth header{
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--line-soft), 0 12px 30px -26px rgba(18,32,58,.4);
}

body.auth .nav-links a{
    color:#344054;
}

body.auth .nav-links a:hover{
    color:var(--green);
}

body.auth .login-btn{
    border-color:rgba(18,32,58,.2);
    color:var(--ink);
}

body.auth .login-btn:hover{
    background:var(--green-soft);
    border-color:rgba(23,128,61,.4);
    color:var(--green-deep);
}

/* ---------- Section rhythm ---------- */

section h2,
.trusted h2{
    font-size:clamp(1.9rem, 3.4vw, 2.65rem);
    letter-spacing:-.03em;
    color:var(--ink);
    margin-bottom:44px;
}

.trusted{
    margin-top:96px;
    padding:64px 20px;
}

.trusted h2{
    margin-bottom:16px;
}

.stars{
    color:#f0a92a;
    font-size:24px;
    letter-spacing:7px;
}

/* ---------- Cards ---------- */

.cards{
    gap:30px;
}

.card{
    border:1px solid var(--line-soft);
    border-radius:20px;
    box-shadow:var(--shadow-soft);
    transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}

.card:hover{
    transform:translateY(-6px);
    border-color:rgba(23,128,61,.3);
    box-shadow:var(--shadow-lift);
}

.card img{
    height:240px;
    transition:transform .6s var(--ease-out);
}

.card:hover img{
    transform:scale(1.045);
}

.content{
    padding:24px;
}

.content h3{
    letter-spacing:-.025em;
    color:var(--ink);
}

.content p{
    color:var(--muted-2);
    margin-bottom:16px;
}

.price{
    color:var(--green-deep);
    font-variant-numeric:tabular-nums;
    letter-spacing:-.02em;
}

.content a{
    padding:12px 24px;
    border-radius:12px;
    font-weight:600;
    font-size:15px;
    background:var(--green);
    transition:transform .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}

.content a:hover{
    background:var(--green-deep);
    transform:translateY(-1px);
    box-shadow:0 12px 22px -12px rgba(23,128,61,.8);
}

.content a:active{
    transform:scale(.98);
}

/* ---------- Steps and value cards ---------- */

.step,
.why-grid div{
    background:var(--surface);
    border:1px solid var(--line-soft);
    border-radius:20px;
    box-shadow:var(--shadow-soft);
    transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}

.step:hover,
.why-grid div:hover{
    transform:translateY(-5px);
    border-color:rgba(23,128,61,.28);
    box-shadow:var(--shadow-lift);
}

.step i{
    width:76px;
    height:76px;
    border-radius:22px;
    font-size:28px;
    background:var(--green-soft);
    color:var(--green-deep);
    box-shadow:inset 0 0 0 1px rgba(23,128,61,.14);
    margin-bottom:22px;
}

.step h3{
    letter-spacing:-.02em;
    color:var(--ink);
}

.step p{
    color:var(--muted-2);
}

.why-grid div:hover{
    background:var(--surface);
    color:inherit;
}

.why-grid div:hover h3,
.why-grid div:hover p{
    color:inherit;
}

.why-grid i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    border-radius:18px;
    font-size:26px;
    color:var(--green-deep);
    background:var(--green-soft);
    box-shadow:inset 0 0 0 1px rgba(23,128,61,.14);
    margin-bottom:18px;
    transition:background-color .3s var(--ease-out), color .3s var(--ease-out);
}

.why-grid div:hover i{
    background:var(--green);
    color:#fff;
}

.why-grid h3{
    letter-spacing:-.02em;
    color:var(--ink);
}

.why-grid p{
    color:var(--muted-2);
}

/* ---------- Call to action ---------- */

.cta{
    background:
        linear-gradient(115deg, rgba(9,19,38,.92), rgba(18,32,58,.68)),
        url("../images/pic5.jpg") center/cover no-repeat;
    border-radius:28px;
    box-shadow:0 36px 70px -34px rgba(9,19,38,.65);
    padding:80px 24px;
}

.cta h2{
    font-size:clamp(2rem, 4vw, 3.1rem);
    letter-spacing:-.03em;
    margin-bottom:18px;
}

.cta p{
    color:rgba(255,255,255,.82);
    margin-bottom:32px;
}

.cta a{
    border-radius:14px;
    font-weight:600;
    box-shadow:0 14px 28px -14px rgba(23,128,61,.9);
    transition:transform .18s var(--ease-out), background-color .18s var(--ease-out), color .18s var(--ease-out);
}

.cta a:hover{
    transform:translateY(-2px);
}

.cta a:active{
    transform:scale(.98);
}

/* ---------- Footer ---------- */

footer{
    background:linear-gradient(180deg,#101d36 0%,#0b1628 100%);
}

.footer-content h3{
    font-size:16px;
    letter-spacing:.02em;
    color:#fff;
}

.footer-content a{
    color:#c3ccdb;
}

.footer-content a:hover{
    color:#7ddfa1;
    padding-left:4px;
}

.socials i{
    border:1px solid rgba(255,255,255,.09);
    transition:background-color .2s var(--ease-out), transform .2s var(--ease-out), border-color .2s var(--ease-out);
}

.socials i:hover{
    background:var(--green);
    border-color:transparent;
    transform:translateY(-3px);
}

.copyright{
    color:#9aa6b8;
}

/* ---------- Floating button ---------- */

.scroll-top{
    border-radius:16px;
    box-shadow:0 16px 30px -14px rgba(18,32,58,.5);
    transition:transform .2s var(--ease-out), background-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

.scroll-top:hover{
    background:var(--green-deep);
    transform:translateY(-3px);
    box-shadow:0 20px 36px -16px rgba(18,32,58,.55);
}

/* ---------- Smooth scroll and pointer detail ---------- */

html.lenis,
html.lenis body{
    height:auto;
}

.lenis.lenis-smooth{
    scroll-behavior:auto !important;
}

.lenis.lenis-stopped{
    overflow:hidden;
}

.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:3px;
    z-index:1000;
    pointer-events:none;
    background:linear-gradient(90deg,var(--green),var(--green-bright));
    box-shadow:0 0 12px rgba(23,128,61,.45);
}

.card,
.why-grid div{
    position:relative;
    isolation:isolate;
}

.card::after,
.why-grid div::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    border-radius:inherit;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s var(--ease-out);
    background:radial-gradient(
        340px circle at var(--mx, 50%) var(--my, 50%),
        rgba(23,128,61,.12),
        transparent 62%
    );
}

.card:hover::after,
.why-grid div:hover::after{
    opacity:1;
}

/* ---------- Motion safety ---------- */

@media (prefers-reduced-motion: reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ---------- Short desktop viewports ---------- */

@media (min-width:769px) and (max-height:800px){
    .hero{
        min-height:auto;
        align-items:flex-start;
        padding-top:100px;
        padding-bottom:140px;
    }

    .left h1{
        font-size:clamp(2.1rem, 3.5vw, 3.05rem);
        max-width:20ch;
    }

    .left p{
        font-size:1rem;
        margin:18px 0;
    }

    .features{
        margin-top:20px;
    }

    .search-card{
        bottom:22px;
        padding:12px;
        gap:8px;
    }

    .search-item{
        padding:8px 12px;
    }

    .search-card button{
        padding:14px 24px;
    }
}

/* ---------- Small screens ---------- */

@media(max-width:768px){
    .navbar{
        padding:12px 22px;
    }

    .hero{
        align-items:flex-start;
        min-height:auto;
        padding:108px 20px 56px;
    }

    .hero-content{
        width:100%;
    }

    .left{
        max-width:100%;
    }

    .left h1{
        max-width:100%;
        font-size:clamp(2.1rem, 8.5vw, 2.9rem);
    }

    .left p{
        font-size:1rem;
    }

    .features{
        display:grid;
        grid-template-columns:1fr 1fr;
        justify-content:center;
        gap:10px;
        width:100%;
    }

    .features div{
        justify-content:flex-start;
        padding:6px 10px 6px 6px;
        font-size:12px;
        white-space:nowrap;
        gap:7px;
    }

    .features i{
        width:28px;
        height:28px;
        min-width:28px;
        font-size:12px;
    }

    .features p{
        font-size:12px;
        white-space:nowrap;
    }

    .search-card{
        margin-top:32px;
        bottom:auto;
        width:100%;
        max-width:none;
        padding:14px;
        grid-template-columns:1fr;
    }

    .search-item{
        border-right:none;
        border-bottom:1px solid var(--line-soft);
        padding:8px 10px;
    }

    .card img{
        height:220px;
    }

    section h2,
    .trusted h2{
        font-size:1.75rem;
        margin-bottom:32px;
    }

    .step,
    .why-grid div{
        padding:30px 24px;
    }

    .cta{
        padding:60px 22px;
        border-radius:22px;
        width:94%;
    }

    .details-container{
        grid-template-columns:1fr;
        gap:24px;
        padding:40px 20px;
    }

    .details-content h1{
        font-size:2rem;
        letter-spacing:-.02em;
    }

    .booking-card{
        position:static;
        padding:22px;
    }
}

/* ===========================================
   END OF FILE
=========================================== */