@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Manrope:wght@400;600;700;800&display=swap');

:root
{
    --forest:#244735;
    --leaf:#668c58;
    --sage:#dce5d3;
    --cream:#f7f3e9;
    --paper:#fffdf8;
    --ink:#243128;
    --line:#d8ddcf;
    --orange:#c9824b
}

*{
    box-sizing:border-box}
    html
    {scroll-behavior:smooth}
    body
    {
        margin:0;
        background:var(--cream);
        color:var(--ink);
        font-family:Manrope,Arial,sans-serif}
        a{text-decoration:none;color:inherit}

body:before

{
    content:"";
    position:fixed;
    inset:0;pointer-events:none;
    opacity:.035;
    background-image:radial-gradient(#243128 1px,transparent 1px);
    background-size:9px 9px;
    z-index:100
}

.navbar
{
    position:sticky;
    top:18px;
    z-index:50;
    width:min(1120px,calc(100% - 32px));
    margin:18px auto 0;
    background:rgba(255,253,248,.94);
    border:1px solid rgba(36,71,53,.12);
    border-radius:20px;padding:10px 18px;
    display:flex;align-items:center;
    justify-content:space-between;
    box-shadow:0 12px 35px rgba(36,71,53,.10);
    backdrop-filter:blur(12px)
}

.logo
{
    display:flex;
    align-items:center;
    gap:10px;font-weight:800;
    letter-spacing:1px;
    color:var(--forest);
    line-height:.95
}
    
    .logo-mark{width:42px;
        height:42px;border-radius:50%;
        background:var(--forest);
        color:#fff;
        display:grid;
        place-items:center;
        font-family:Georgia,serif;font-size:20px
}

    .logo-image {
    width: 54px;
    height: 54px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
}

    .logo-text span
    {
        display:block;
        font-size:9px;
        letter-spacing:2.5px;color:var(--orange);
        margin-top:5px
    }

nav
{
    display:flex;
    align-items:center;
    gap:5px
}
nav a
{
    padding:11px 15px;
    border-radius:12px;
    font-size:13px;
    font-weight:700;
    color:#506057
}
nav a:hover,nav a.active
{
    background:var(--sage);
    color:var(--forest)
}nav .logout
{
    color:#a15f38
}
.hero
{
    min-height:78vh;
    margin-top:-78px;
    padding:150px 7% 90px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:
    linear-gradient(rgba(36,71,53,0.55), rgba(36,71,53,0.55)),
    url("pemandangan.jpg") center/cover no-repeat;
    color:white
}
.hero:after
{
    content:"";
    position:absolute;
    right:-130px;
    bottom:-170px;
    width:520px;
    height:520px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    box-shadow:0 0 0 45px rgba(255,255,255,.03),0 0 0 95px rgba(255,255,255,.025)
}
.hero-content
{
    max-width:820px;
    position:relative;
    z-index:2
}
.eyebrow
{
    font-size:11px;
    letter-spacing:3px;
    font-weight:800;
    color:#e7c09c
}
.hero h1
{
    font-family:'DM Serif Display',Georgia,serif;
    font-size:clamp(54px,8vw,94px);
    line-height:.92;font-weight:400;
    margin:18px 0
}.hero h1 em{color:#d9e7ce;font-style:normal}.hero p{max-width:650px;font-size:17px;line-height:1.8;color:#eef3eb}.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:13px 20px;background:var(--leaf);color:#fff;font-weight:800;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(36,71,53,.18)}.btn.dark{background:var(--forest)}.btn.outline{background:transparent;border:1px solid rgba(255,255,255,.55)}
.section{width:min(1120px,calc(100% - 32px));margin:auto;padding:82px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.section-head h2,.section h2{font-family:'DM Serif Display',Georgia,serif;font-size:46px;font-weight:400;margin:8px 0;color:var(--forest)}.section-head p{max-width:520px;color:#6a756c;line-height:1.7}.center{text-align:center}.center p{margin:0 auto}
.grid{display:grid;gap:22px}.three{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:repeat(2,1fr)}.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 10px 30px rgba(36,71,53,.07)}.card:hover{transform:translateY(-3px)}
.feature{padding:30px;min-height:190px;position:relative;overflow:hidden}.feature:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;background:var(--sage);right:-30px;bottom:-30px}.number{font-size:12px;color:var(--orange);font-weight:800;letter-spacing:2px}.feature h3{font-family:'DM Serif Display',Georgia,serif;font-size:28px;font-weight:400;color:var(--forest);margin:18px 0 8px}.feature p,.card li{color:#68746b;line-height:1.7}
.page-banner{margin-top:-78px;padding:170px 7% 75px;background:var(--forest);color:white;position:relative;overflow:hidden}.page-banner:after{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(255,255,255,.14);border-radius:50%;right:-100px;top:40px}.page-banner h1{font-family:'DM Serif Display',Georgia,serif;font-size:64px;font-weight:400;margin:10px 0}.page-banner p{color:#d9e4da}
.package-card{overflow:hidden;padding:0}.package-art{height:210px;background:linear-gradient(135deg,#7c9b6d,#315a42);display:flex;align-items:end;padding:24px;color:white;position:relative}.package-art:before{content:"✦  ✦   ✧";font-size:60px;letter-spacing:18px;position:absolute;top:35px;left:25px;opacity:.17}.package-art span{font-size:12px;letter-spacing:3px;font-weight:800}.package-body{padding:25px}.price{font-family:'DM Serif Display',Georgia,serif;font-size:32px;color:var(--forest);margin:20px 0}.tag{display:inline-block;background:var(--sage);color:var(--forest);border-radius:30px;padding:6px 10px;font-size:11px;font-weight:800}
.rental-card{display:flex;align-items:center;gap:18px}.item-icon{width:55px;height:55px;display:grid;place-items:center;border-radius:16px;background:var(--sage);font-size:25px}.rental-card h3{margin:0;color:var(--forest)}.rental-card p{margin:5px 0;color:#718078}.rental-card .btn{margin-left:auto;padding:10px 14px}
.selected{margin-top:30px;background:var(--forest);color:white;border-radius:20px;padding:25px}.selected h2{color:white;font-size:32px}.selected p{color:#dbe6dc}
.form-wrap{max-width:720px;margin:auto}.form-card{background:var(--paper);padding:32px;border:1px solid var(--line);border-radius:22px;box-shadow:0 12px 35px rgba(36,71,53,.08)}label{display:block;font-weight:800;font-size:13px;color:var(--forest);margin:15px 0 7px}input,select,textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#fbfaf5;color:var(--ink);font:inherit;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--leaf);box-shadow:0 0 0 3px rgba(102,140,88,.12)}textarea{min-height:140px;resize:vertical}.message{padding:13px;border-radius:11px;background:var(--sage);color:var(--forest);font-weight:700;margin:16px 0}
.contact-info{background:var(--forest);color:white;border-radius:22px;padding:32px}.contact-info h2{color:white;font-size:36px}.contact-info p{line-height:1.8;color:#dbe6dc}.map{height:180px;border-radius:16px;background:repeating-linear-gradient(45deg,#3c5e48,#3c5e48 12px,#42664d 12px,#42664d 24px);display:grid;place-items:center;color:#dce9dd;font-weight:800;letter-spacing:2px;margin-top:25px}
footer{margin-top:30px;background:#1b3527;color:#dce8dd;padding:35px 7%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px}.footer-title{font-family:'DM Serif Display',Georgia,serif;font-size:25px;color:white}
.login-page{min-height:100vh;display:grid;place-items:center;padding:25px;background:linear-gradient(135deg,#244735,#76906c);position:relative}.login-page:before{content:"";position:absolute;width:600px;height:600px;border:1px solid rgba(255,255,255,.18);border-radius:50%}.login-box{position:relative;width:min(440px,100%);background:var(--paper);border-radius:24px;padding:42px;box-shadow:0 25px 70px rgba(0,0,0,.25);text-align:center}.login-box h1{font-family:'DM Serif Display',Georgia,serif;font-size:42px;font-weight:400;color:var(--forest);margin:25px 0 5px}.login-box p{color:#6c786f;line-height:1.7}.login-box .logo{justify-content:center}.login-box .btn{width:100%;margin-top:18px}
@media(max-width:760px){.navbar{top:8px;flex-direction:column;gap:8px;padding:12px}.logo{align-self:flex-start}nav{width:100%;overflow:auto;justify-content:flex-start}nav a{padding:9px 10px;white-space:nowrap;font-size:12px}

.hero{margin-top:-70px;padding-top:150px}

.hero h1{font-size:58px}.three,.two{grid-template-columns:1fr}.section-head{display:block}.page-banner h1{font-size:50px}.rental-card{align-items:flex-start;flex-wrap:wrap}.rental-card .btn{margin-left:0}footer{display:block}.login-box{padding:30px}}

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

#contact {
    background: #f4f1e8;
    padding: 100px 7%;
}

#contact h2 {
    text-align: center;
    font-family: Georgia, serif;
    font-size: 48px;
    color: #24483a;
    margin-bottom: 12px;
}

#contact > p {
    text-align: center;
    color: #6f756d;
    margin-bottom: 50px;
    font-size: 16px;
}

/* Main contact layout */

.contact-layout {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: stretch;
}

/* Left side */

.contact-info {
    background: #315b48;
    color: white;
    padding: 35px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(40, 65, 50, 0.15);
}

.contact-info h3 {
    font-family: Georgia, serif;
    font-size: 28px;
    margin-bottom: 25px;
}

.contact-info p {
    margin: 16px 0;
    line-height: 1.6;
    color: #edf2eb;
}

.contact-info b {
    color: #ffffff;
}

/* Google map */

.map-placeholder {
    margin-top: 25px;
    height: 330px;
    border-radius: 18px;
    overflow: hidden;
    background: #dfe8dc;
}

/* Make Google map responsive */

.map-placeholder iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Right form */

.contact-form {
    background: #fffdf8;
    padding: 38px;
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(60, 60, 40, 0.10);
}

.contact-form h3 {
    font-family: Georgia, serif;
    font-size: 28px;
    color: #315b48;
    margin-bottom: 25px;
}

.contact-form label {
    display: block;
    margin-bottom: 18px;
    color: #4c514b;
    font-weight: 600;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    margin-top: 8px;
    padding: 14px 16px;
    border: 1px solid #d8ddd3;
    border-radius: 12px;
    background: #f8f7f1;
    font-family: inherit;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #5d8a70;
    background: white;
}

.contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Button */

.contact-form .btn,
.contact-form button {
    margin-top: 5px;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    background: #315b48;
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s;
}

.contact-form .btn:hover,
.contact-form button:hover {
    background: #24483a;
    transform: translateY(-2px);
}


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

@media (max-width: 800px) {

    #contact {
        padding: 70px 5%;
    }

    #contact h2 {
        font-size: 38px;
    }

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

    .contact-info,
    .contact-form {
        padding: 28px;
    }

    .map-placeholder {
        height: 280px;
    }
}

/* =========================
   E-PASS DESIGN
========================= */

.epass-section {
    max-width: 1050px;
    margin: 0 auto;
    padding: 70px 25px 100px;
}

.epass-heading {
    text-align: center;
    margin-bottom: 35px;
}

.epass-heading h1 {
    font-size: 48px;
    margin: 8px 0 10px;
    font-weight: 500;
}

.epass-heading p {
    color: #777;
    font-size: 16px;
}


/* MAIN PASS */

.epass-card {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.85fr 1.4fr;
    background: rgba(255,255,255,0.92);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(0,0,0,0.10);
    border: 1px solid rgba(0,0,0,0.06);
}


/* LEFT */

.epass-left {
    padding: 45px 35px;
    background: #285b4f;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pass-label {
    font-size: 13px;
    letter-spacing: 3px;
    margin-bottom: 28px;
    opacity: .9;
}

.qr-box {
    width: 190px;
    height: 190px;
    background: white;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
}

.fake-qr {
    width: 145px;
    height: 145px;
    color: #222;
    font-size: 130px;
    line-height: 145px;
    text-align: center;
}

.scan-text {
    margin-top: 20px;
    font-size: 11px;
    letter-spacing: 2px;
    opacity: .8;
}

.confirmation {
    margin-top: 28px;
    text-align: center;
}

.confirmation span {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    opacity: .7;
    margin-bottom: 7px;
}

.confirmation strong {
    font-size: 18px;
    letter-spacing: 2px;
}


/* RIGHT */

.epass-right {
    padding: 45px 48px;
}

.pass-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.pass-top > span:first-child {
    font-size: 12px;
    letter-spacing: 3px;
    color: #777;
}

.status {
    background: #e4eee8;
    color: #285b4f;
    padding: 7px 13px;
    border-radius: 30px;
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 600;
}

.epass-right h2 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 30px;
}


/* DETAILS */

.pass-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.pass-details div {
    background: #f7f7f3;
    padding: 17px 18px;
    border-radius: 14px;
}

.pass-details span {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
    color: #999;
    margin-bottom: 7px;
}

.pass-details strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: #333;
}


/* TOTAL */

.pass-total {
    margin-top: 25px;
    padding-top: 22px;
    border-top: 1px dashed #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pass-total span:first-child {
    font-size: 11px;
    letter-spacing: 2px;
    color: #888;
}

.pass-total strong {
    font-size: 28px;
    color: #285b4f;
}


/* BUTTON */

.epass-right .btn {
    margin-top: 25px;
    width: 100%;
    text-align: center;
}


/* MOBILE */

@media (max-width: 700px) {

    .epass-section {
        padding: 45px 18px 70px;
    }

    .epass-heading h1 {
        font-size: 36px;
    }

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

    .epass-left {
        padding: 35px 25px;
    }

    .epass-right {
        padding: 35px 25px;
    }

    .pass-details {
        grid-template-columns: 1fr;
    }

}


.qr-placeholder {
    width: 260px;
    height: 260px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 20px;
    overflow: hidden;
}

.qr-placeholder img {
    width: 220px;
    height: 220px;
    object-fit: contain;
}

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

@media (max-width: 600px) {

    /* NAVBAR */
    .navbar {
        width: calc(100% - 20px);
        margin: 10px auto 0;
        padding: 10px 12px;
        top: 5px;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .logo {
        justify-content: center;
    }

    .logo-image {
        width: 48px;
        height: 48px;
    }

    .logo-text {
        font-size: 13px;
    }

    nav {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 3px;
        padding-bottom: 3px;
    }

    nav a {
        white-space: nowrap;
        font-size: 11px;
        padding: 8px 10px;
    }


    /* HOME HERO */
    .hero {
        min-height: 75vh;
        margin-top: -85px;
        padding: 150px 22px 70px;
    }

    .hero h1 {
        font-size: 52px;
        line-height: .95;
    }

    .hero p {
        font-size: 14px;
        line-height: 1.7;
    }

    .button-row {
        flex-direction: column;
        width: 100%;
    }

    .button-row .btn {
        width: 100%;
    }


    /* GENERAL SECTION */
    .section {
        width: calc(100% - 28px);
        padding: 55px 0;
    }

    .section-head {
        display: block;
    }

    .section-head h2,
    .section h2 {
        font-size: 36px;
    }


    /* CARDS */
    .three,
    .two {
        grid-template-columns: 1fr;
    }

    .card {
        padding: 20px;
    }


    /* PAGE BANNER */
    .page-banner {
        margin-top: -85px;
        padding: 145px 22px 60px;
    }

    .page-banner h1 {
        font-size: 44px;
        line-height: 1;
    }

    .page-banner p {
        font-size: 14px;
        line-height: 1.7;
    }


    /* PACKAGE */
    .package-art {
        height: 170px;
    }

    .package-body {
        padding: 20px;
    }

    .package-body .btn {
        width: 100%;
    }


    /* RENTAL */
    .rental-card {
        display: grid;
        grid-template-columns: 50px 1fr;
        gap: 12px;
        align-items: center;
    }

    .rental-card .btn {
        grid-column: 1 / -1;
        width: 100%;
        margin: 5px 0 0;
    }

    .selected {
        padding: 20px;
    }


    /* FORM */
    .form-wrap {
        width: 100%;
    }

    .form-card {
        padding: 22px 18px;
        border-radius: 18px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    .form-card .btn {
        width: 100%;
    }


    /* CONTACT */
    .contact-info {
        padding: 22px;
    }

    .contact-info h2 {
        font-size: 32px;
    }

    .map-placeholder,
    .map-placeholder iframe {
        width: 100% !important;
        max-width: 100%;
    }

    .map-placeholder iframe {
        height: 280px;
    }


    /* PAYMENT */
    .payment-layout {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .booking-summary,
    .payment-box {
        width: 100%;
    }

    .qr-placeholder {
        width: 100%;
        max-width: 280px;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .qr-placeholder img {
        width: 85%;
        height: 85%;
    }


    /* BOOKING HISTORY */
    .history-content {
        padding: 0 14px;
    }

    .history-card {
        padding: 20px;
        border-radius: 18px;
    }

    .history-grid {
        grid-template-columns: 1fr !important;
    }


    /* E-PASS */
    .epass-section {
        padding: 40px 14px 60px;
    }

    .epass-heading h1 {
        font-size: 34px;
    }

    .epass-card {
        grid-template-columns: 1fr !important;
    }

    .epass-left,
    .epass-right {
        padding: 25px 20px;
    }

    .pass-details {
        grid-template-columns: 1fr !important;
    }

    .epass-right h2 {
        font-size: 24px;
    }

    .pass-total strong {
        font-size: 24px;
    }


    /* LOGIN */
    .login-page {
        padding: 15px;
    }

    .login-box {
        width: 100%;
        padding: 28px 20px;
    }

    .login-box h1 {
        font-size: 36px;
    }


    /* FOOTER */
    footer {
        padding: 28px 20px;
        display: block;
        text-align: center;
    }

    footer > div {
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) {

    .login-page {
        min-height: 100vh;
        width: 100%;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-box {
        width: 100%;
        max-width: 360px;
        padding: 28px 20px;
        box-sizing: border-box;
    }

    .login-box .logo {
        width: 100%;
        justify-content: center;
    }

    .login-box .logo-image {
        width: 55px;
        height: 55px;
    }

    .login-box .logo-text {
        font-size: 13px;
    }

    .login-box h1 {
        font-size: 38px;
        text-align: center;
    }

    .login-box p {
        font-size: 14px;
        text-align: center;
        line-height: 1.6;
    }

    .login-box form {
        width: 100%;
    }

    .login-box input,
    .login-box button {
        width: 100%;
        box-sizing: border-box;
    }
}

.contact-info p i {
    width: 22px;
    display: inline-block;
    text-align: center;
    margin-right: 8px;
    font-size: 18px;
}

.contact-info p i {
    width: 22px;
    display: inline-block;
    text-align: center;
    margin-right: 8px;
    font-size: 17px;
    font-weight: normal;
    vertical-align: middle;
}

.contact-icon {
    width: 22px;
    display: inline-block;
    text-align: center;
    margin-right: 8px;
    font-size: 18px;
    vertical-align: middle;
}

.hero-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 24px;
}



/* =========================
   HOMEPAGE BOOKING-STYLE SECTIONS
   Keeps the existing Teratak Tokmat colours.
========================= */
.home-hero{gap:50px}
.home-hero .hero-content{flex:1;max-width:600px}
.home-hero .hero-image{flex:1;max-width:560px;position:relative;z-index:2}
.home-hero .hero-image img{display:block;width:100%;height:430px;object-fit:cover;border-radius:24px;border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 50px rgba(0,0,0,.20)}

.home-search-wrap{width:min(1120px,calc(100% - 32px));margin:-42px auto 0;position:relative;z-index:10}
.home-search{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:12px;display:grid;grid-template-columns:1.35fr 1fr 1fr .9fr auto;align-items:center;box-shadow:0 18px 45px rgba(36,71,53,.14)}
.search-field{display:flex;align-items:center;gap:10px;padding:10px 16px;border-right:1px solid var(--line);min-width:0}
.search-icon{font-size:20px;color:var(--leaf);font-weight:800}
.search-field small{display:block;color:#7a847d;font-size:10px;font-weight:700;margin-bottom:4px}
.search-field strong{display:block;color:var(--forest);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-field input,.search-field select{border:0;background:transparent;padding:0;width:100%;font-size:12px;font-weight:700;color:var(--forest);outline:none}
.search-btn{margin-left:8px;min-width:100px}

.section-intro{margin-bottom:30px}
.section-intro h2{margin-bottom:7px}
.section-intro p{color:#6a756c;margin:0}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.home-package-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 10px 30px rgba(36,71,53,.07);transition:.2s}
.home-package-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px rgba(36,71,53,.12)}
.home-package-card>img{width:100%;height:205px;display:block;object-fit:cover}
.home-package-body{padding:22px}
.home-location{display:block;color:#77837a;font-size:11px;margin-bottom:8px}
.home-package-body h3{font-family:'DM Serif Display',Georgia,serif;color:var(--forest);font-size:29px;font-weight:400;margin:0 0 12px}
.home-price{font-family:'DM Serif Display',Georgia,serif;color:var(--forest);font-size:28px;margin-bottom:18px}
.home-price small{font-family:Manrope,Arial,sans-serif;font-size:12px;color:#748078}
.home-package-body .btn{width:100%}

.about-home{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.about-home-text p{color:#68746b;line-height:1.8;max-width:560px}
.about-home-image img{width:100%;height:390px;object-fit:cover;border-radius:22px;display:block;box-shadow:0 15px 35px rgba(36,71,53,.10)}

.why-home{padding-top:55px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 20px;text-align:center;box-shadow:0 8px 25px rgba(36,71,53,.06)}
.why-icon{width:58px;height:58px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--sage);color:var(--forest);font-weight:800;font-size:16px}
.why-card h3{font-family:'DM Serif Display',Georgia,serif;font-size:23px;font-weight:400;color:var(--forest);margin:0 0 8px}
.why-card p{color:#68746b;line-height:1.6;font-size:13px;margin:0}

.explore-home{padding-top:45px}
.explore-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:15px}
.explore-grid img{width:100%;height:300px;object-fit:cover;border-radius:18px;display:block}
.explore-grid img:first-child{height:300px}

.home-cta{width:min(1120px,calc(100% - 32px));height:390px;margin:20px auto 80px;position:relative;overflow:hidden;border-radius:24px;background:var(--forest);color:white}
.home-cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.home-cta-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,53,39,.92),rgba(27,53,39,.38),rgba(27,53,39,.15))}
.home-cta-content{position:relative;z-index:2;padding:65px 7%;max-width:650px}
.home-cta-content h2{font-family:'DM Serif Display',Georgia,serif;font-size:48px;font-weight:400;line-height:1;margin:12px 0;color:white}
.home-cta-content p{color:#eef3eb;line-height:1.7;max-width:520px;margin-bottom:25px}

.home-footer{position:relative;margin-top:0;display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:40px;padding:55px max(7%,calc((100% - 1120px)/2));background:#1b3527;color:#dce8dd}
.home-footer a{display:block;margin:7px 0;color:#dce8dd;font-size:13px}
.home-footer p{font-size:13px;line-height:1.7;margin:6px 0;color:#cbd9cf}
.home-footer .small-title{font-size:20px;margin-bottom:14px}
.footer-bottom{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;margin-top:5px;font-size:12px;color:#aebeb2}

@media(max-width:900px){
    .home-hero{display:block;padding-bottom:60px}
    .home-hero .hero-image{max-width:650px;margin:35px auto 0}
    .home-hero .hero-image img{height:340px}
    .home-search{grid-template-columns:1fr 1fr}
    .search-field{border-right:0;border-bottom:1px solid var(--line)}
    .search-btn{margin:8px 0 0;grid-column:1/-1}
    .package-grid{grid-template-columns:1fr 1fr}
    .why-grid{grid-template-columns:1fr 1fr}
    .about-home{grid-template-columns:1fr}
    .about-home-image{order:-1}
    .explore-grid{grid-template-columns:1fr 1fr}
    .explore-grid img:first-child{grid-column:1/-1}
    .home-footer{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
    .home-hero .hero-image img{height:260px}
    .home-search{grid-template-columns:1fr}
    .search-field{border-bottom:1px solid var(--line)}
    .search-btn{grid-column:auto}
    .package-grid,.why-grid,.explore-grid{grid-template-columns:1fr}
    .explore-grid img,.explore-grid img:first-child{height:240px;grid-column:auto}
    .about-home-image img{height:280px}
    .home-cta{height:430px}
    .home-cta-content{padding:45px 28px}
    .home-cta-content h2{font-size:38px}
    .home-footer{grid-template-columns:1fr;padding:45px 7%}
    .footer-bottom{grid-column:auto}
}

.quick-info-bar {
    width: min(1200px, 92%);
    margin: 0 auto;
    background: #fff;
    border-radius: 22px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: 1.4fr 1.2fr .8fr auto;
    align-items: center;
    gap: 10px;
    box-shadow: 0 15px 35px rgba(45,65,52,.12);
    position: relative;
    z-index: 5;
}

.quick-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: inherit;
    text-decoration: none;
    border-right: 1px solid rgba(50,75,60,.12);
}

.quick-info-item small {
    display: block;
    font-size: 11px;
    margin-bottom: 4px;
    opacity: .65;
}

.quick-info-item strong {
    font-size: 14px;
}

.quick-icon {
    font-size: 20px;
    min-width: 25px;
}

.quick-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #426d58;
    color: #fff;
    text-decoration: none;
    padding: 15px 28px;
    border-radius: 14px;
    font-weight: bold;
    white-space: nowrap;
}

.quick-book-btn:hover {
    opacity: .9;
}

/* =========================
   REGISTER PAGE
========================= */

.login-page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    background: #355d49;
}

.login-box {
    width: 560px;
    max-width: 100%;
    background: #fffdf8;
    padding: 35px 45px;
    box-sizing: border-box;

    border: 1px solid #d8d8c8;
    border-radius: 18px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.10);
}

.login-box .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-decoration: none;
    margin-bottom: 35px;
}

.login-box .logo-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.login-box .logo-text {
    font-size: 23px;
    font-weight: 700;
    color: #164936;
    letter-spacing: 1px;
}

.login-box .logo-text span {
    display: block;
    font-size: 11px;
    color: #c87945;
    letter-spacing: 4px;
    text-align: center;
    margin-top: 3px;
}

.login-box h1 {
    text-align: center;
    font-family: Georgia, serif;
    font-size: 42px;
    color: #24543f;
    margin: 0 0 25px;
}

.login-box > p {
    text-align: center;
    color: #68736e;
    font-size: 18px;
    margin-bottom: 30px;
}

.login-box form {
    width: 100%;
}

.login-box label {
    display: block;
    text-align: left;
    font-weight: 700;
    color: #123f31;
    margin: 18px 0 9px;
}

.login-box input {
    width: 100%;
    height: 55px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid #d7d8cc;
    border-radius: 13px;
    background: #fffefa;
    font-size: 17px;
    color: #333;
    outline: none;
}

.login-box input:focus {
    border-color: #35684f;
}

.login-box .btn.dark {
    width: 100%;
    height: 58px;
    margin-top: 22px;
    border: none;
    border-radius: 15px;
    background: #214f3b;
    color: white;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.login-box .btn.dark:hover {
    opacity: 0.9;
}

.register-link {
    margin-top: 25px !important;
    font-size: 15px !important;
}

.register-link a {
    color: #24543f;
    font-weight: 700;
    text-decoration: none;
}

.register-link a:hover {
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 700px) {
    .login-page {
        padding: 20px 12px;
    }

    .login-box {
        padding: 35px 25px;
    }

    .login-box h1 {
        font-size: 38px;
    }
}

/* REGISTER PAGE - FIT SCREEN */
.register-box {
    width: 620px;
    padding: 22px 45px;
}

.register-box .logo {
    margin-bottom: 12px;
}

.register-box .logo-image {
    width: 52px;
    height: 52px;
}

.register-box .logo-text {
    font-size: 20px;
}

.register-box h1 {
    font-size: 38px;
    margin-bottom: 8px;
}

.register-box > p {
    font-size: 16px;
    margin-bottom: 14px;
}

.register-box label {
    text-align: left;
    padding-left: 5px;
}

.register-box input {
    height: 44px;
    font-size: 16px;
    border-radius: 11px;
}

.register-box .btn.dark {
    height: 46px;
    margin-top: 14px;
}

.register-box .register-link {
    margin-top: 12px !important;
}

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

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    /* NAVBAR */
    .navbar {
        width: 92%;
        margin: 10px auto;
        padding: 10px 12px;
        flex-direction: column;
        gap: 8px;
    }

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

    .logo-image {
        width: 42px;
        height: 42px;
    }

    .logo-text {
        font-size: 13px;
    }

    .logo-text span {
        font-size: 8px;
    }

    .navbar nav {
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 4px;
        flex-wrap: wrap;
    }

    .navbar nav a {
        font-size: 10px;
        padding: 7px 8px;
    }


    /* HERO */
    .hero.home-hero {
        width: 100%;
        min-height: auto;
        padding: 115px 18px 25px;
        display: flex;
        flex-direction: column;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
    }

    .hero-content .eyebrow {
        font-size: 9px;
        margin-bottom: 10px;
    }

    .hero-content h1 {
        font-size: 40px;
        line-height: 1;
        margin-bottom: 15px;
    }

    .hero-content p {
        font-size: 13px;
        line-height: 1.5;
        margin-bottom: 18px;
    }

    .button-row {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 9px;
    }

    .button-row .btn {
        width: 100%;
        text-align: center;
    }


    /* HERO IMAGE */
    .hero-image {
        width: 100%;
        margin-top: 22px;
    }

    .hero-image img {
        width: 100%;
        height: 230px;
        object-fit: cover;
        border-radius: 18px;
    }


    /* QUICK INFO */
    .quick-info-bar {
        width: 92%;
        margin: 15px auto;
        padding: 12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .quick-info-item {
        border-right: none;
        padding: 10px 7px;
    }

    .quick-info-item small {
        font-size: 9px;
    }

    .quick-info-item strong {
        font-size: 11px;
    }

    .quick-icon {
        font-size: 15px;
    }

    .quick-book-btn {
        grid-column: 1 / -1;
        width: 100%;
        padding: 12px;
    }


    /* FEATURED PACKAGES */
    .package-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-package-card {
        width: 100%;
    }


    /* SECTIONS */
    .section {
        padding-left: 18px;
        padding-right: 18px;
    }

}

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

@media (max-width: 768px) {

    .page-banner {
        padding: 150px 20px 45px;
        text-align: center;
    }

    .page-banner h1 {
        font-size: 42px;
        line-height: 1;
        margin-bottom: 12px;
    }

    .page-banner p {
        font-size: 14px;
    }

    .section {
        width: 100%;
        padding: 25px 18px 50px;
        box-sizing: border-box;
    }

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

    .package-card {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .package-art {
        min-height: 150px;
    }

    .package-body {
        padding: 22px;
    }

    .package-body h2 {
        font-size: 28px;
        margin: 8px 0 12px;
    }

    .package-body ul {
        padding-left: 20px;
        margin-bottom: 18px;
    }

    .package-body li {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .package-body .price {
        font-size: 25px;
        margin-bottom: 15px;
    }

    .package-body .btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        display: block;
    }

}

.explore-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
}

.explore-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.explore-label {
    position: absolute;
    left: 15px;
    bottom: 15px;
    background: rgba(36, 71, 53, 0.9);
    color: white;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

/* ZONES PAGE */

.zone-card {
    overflow: hidden;
}

.zone-image {
    width: 100%;
    height: 240px;
    overflow: hidden;
}

.zone-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.zone-body {
    padding: 24px;
}

.zone-body h2 {
    margin: 8px 0 10px;
    font-size: 28px;
}

.zone-body p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.zone-body .btn {
    display: inline-block;
}

/* ACCOUNT MENU */

.account-menu {
    position: relative;
}

.account-btn {
    border: none;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 10px;
}

.account-btn:hover {
    background: rgba(102, 140, 88, 0.12);
}

.account-arrow {
    font-size: 14px;
}

.account-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    width: 230px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 15px 35px rgba(36, 71, 53, 0.15);
    z-index: 100;
}

.account-dropdown.show {
    display: block;
}

.account-email {
    padding: 12px;
    font-size: 13px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.account-email span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-dropdown a {
    display: block;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
}

.account-dropdown a:hover {
    background: var(--sage);
}

.account-dropdown .account-logout {
    color: #a54b3f;
}

.zone-map {
    margin: 0 auto 50px;
    max-width: 1000px;
}

.zone-map img {
    width: 100%;
    display: block;
    border-radius: 20px;
}

.zone-guide {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 auto 50px;
    max-width: 1000px;
}

.zone-guide-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.zone-guide-item > span {
    font-size: 24px;
}

.zone-guide-item strong {
    display: block;
    margin-bottom: 5px;
}

.zone-guide-item p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 50px;
}

.password-wrapper span {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px;
}

@media (max-width: 768px) {

    .navbar {
        padding: 12px 20px;
    }

    .nav-links {
        gap: 12px;
        flex-wrap: wrap;
    }

    .logo-image {
        width: 120px;
    }

    .hero {
        min-height: 70vh;
    }

    .hero h1 {
        font-size: 36px;
    }

    .hero p {
        font-size: 15px;
    }

    .quick-info-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .quick-info-item,
    .quick-book-btn {
        width: 100%;
        box-sizing: border-box;
    }

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

}

@media (max-width: 600px) {

    .nav-links {
        justify-content: center;
        font-size: 13px;
    }

    .nav-links a {
        padding: 6px 4px;
    }

}

@media (max-width: 600px) {

    .hero {
        min-height: 60vh;
        padding: 40px 20px;
    }

    .hero h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .hero p {
        font-size: 14px;
        line-height: 1.5;
    }

}

@media (max-width: 600px) {

    .quick-info-bar {
        gap: 12px;
        padding: 16px;
    }

    .quick-info-item {
        padding: 12px;
    }

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

    .explore-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

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

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

    .hero .btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
        box-sizing: border-box;
    }

}

@media (max-width: 600px) {

    footer {
        text-align: center;
        padding: 30px 20px;
    }

    footer .footer-links {
        flex-direction: column;
        gap: 10px;
    }

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

    .packages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}

@media (max-width: 600px) {

    .package-card {
        padding: 20px;
    }

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

    .package-card h3 {
        font-size: 22px;
    }

    .package-card .price {
        font-size: 20px;
    }

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

    .package-card .btn {
        width: 100%;
        box-sizing: border-box;
        padding: 13px 20px;
    }

}

@media (max-width: 600px) {

    .zone-map img {
        width: 100%;
        height: auto;
        display: block;
    }

}

@media (max-width: 600px) {

    .zone-guide {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .zone-guide-item {
        padding: 15px;
    }

}

@media (max-width: 600px) {

    .zone-card img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
    }

}

@media (max-width: 600px) {

    .booking-form {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

}

@media (max-width: 600px) {

    .booking-form input,
    .booking-form select {
        width: 100%;
        box-sizing: border-box;
        padding: 13px;
        font-size: 16px;
    }

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

    .booking-form button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }

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

    .payment-form {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

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

    .payment-form input,
    .payment-form select {
        width: 100%;
        box-sizing: border-box;
        padding: 13px;
        font-size: 16px;
    }

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

    .payment-form button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }

}

@media (max-width: 600px) {

    .booking-card {
        width: 100%;
        box-sizing: border-box;
        padding: 18px;
    }

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

    .booking-card p {
        font-size: 14px;
        line-height: 1.6;
    }

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

    .contact-form {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

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

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        width: 100%;
        box-sizing: border-box;
        padding: 13px;
        font-size: 16px;
    }

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

    .contact-form button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }

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

    .login-form {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

}

@media (max-width: 600px) {
    .account-menu {
        position: static;
    }

    .account-dropdown {
        position: absolute;
        right: 15px;
        top: 100%;
        width: 230px;
        z-index: 9999;
    }
}
@media (max-width: 600px) {

    .login-form {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

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

    .login-form input {
        width: 100%;
        box-sizing: border-box;
        padding: 13px;
        font-size: 16px;
    }

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

    .login-form button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }

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

    .register-form {
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

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

    .register-form input {
        width: 100%;
        box-sizing: border-box;
        padding: 13px;
        font-size: 16px;
    }

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

    .register-form button {
        width: 100%;
        padding: 14px;
        font-size: 16px;
    }

}

.contact-form {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.contact-form {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}

.slideshow {
    position: relative;
}

.slide-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #30483b;
    font-size: 26px;
    cursor: pointer;
    z-index: 5;
}

.slide-btn.prev {
    left: 12px;
}

.slide-btn.next {
    right: 12px;
}