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

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


body {

    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    line-height: 1.6;
    background: #fff;

}


a {

    text-decoration: none;
    color: inherit;

}


img {

    width: 100%;
    display: block;

}



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


.header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 60px;

    background: white;

    position: sticky;
    top: 10px;

    z-index: 1000;

}


.logo {

    font-size: 24px;

    font-family: var(--font-telma);

    font-weight: 700;

    color: #222;

}



.navbar {

    display: flex;

    align-items: center;

    gap: 35px;

}


.navbar a {

    text-decoration: none;

    color: #222;

    font-size: 16px;

    transition: .3s;

}


.navbar a:hover,
.navbar a.active {

    color: goldenrod;

}



.language-select select {

    padding: 8px 35px 8px 12px;

    border: 1px solid #ddd;

    border-radius: 8px;

    cursor: pointer;

    background: white;

}





/* Hamburger */

.menu-toggle {

    display: none;

    flex-direction: column;

    gap: 5px;

    background: none;

    border: none;

    cursor: pointer;

}


.menu-toggle span {

    width: 28px;

    height: 3px;

    background: #222;

    border-radius: 5px;

    transition: .3s;

}





/* MOBILE */

@media(max-width:768px) {


    .header {

        padding: 20px 5%;

    }



    .menu-toggle {

        display: flex;

    }



    .navbar {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        background: white;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;

        padding: 20px 5%;

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


        transform: translateY(-20px);

        opacity: 0;

        pointer-events: none;

        transition: .3s;

    }



    .navbar a {

        width: 100%;

        padding: 15px 0;

    }



    .language-select {

        padding-top: 15px;

    }



    .navbar.show {

        transform: translateY(0);

        opacity: 1;

        pointer-events: auto;

    }


    .mobile-actions {

        display: none;

        align-items: center;

        gap: 15px;

    }



    .mobile-flags {

        display: flex;

        list-style: none;

        gap: 18px;

        padding: 0 20px;

        margin: 0;

    }


    .mobile-flags a {

        text-decoration: none;

    }


    .mobile-flags .fi {

        width: 24px;

        height: 18px;

        border-radius: 3px;

        display: block;

    }



    @media(max-width:768px) {


        .mobile-actions {

            display: flex;

        }


    }



}



.mobile-flags {

    display: none;

    list-style: none;

}


.language-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 10px 40px 10px 15px;

    border: 1px solid #ddd;
    border-radius: 8px;

    font-size: 15px;

    background-color: #fff;

    cursor: pointer;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.5L8 10.3l4.8-4.8' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

.language-select select:focus {

    outline: none;
    border-color: goldenrod;
}



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


.hero {

    min-height: 80vh;

    background:

    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.45)
    ),

    url(
    "https://images.unsplash.com/photo-1566073771259-6a8506099945"
    );

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

    display: flex;
    align-items: center;

    padding: 0 60px;

}



.hero-content {

    max-width: 700px;
    color: white;

}



.hero h1 {

    font-family: var(--font-telma);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.1;
    margin-bottom: 20px;

}



.hero p {

    font-size: 1rem;
    font-weight: 100;
    margin-bottom: 30px;
    margin-left: 5px;

}



/* BUTTON */

.btn {

    display: inline-block;

    padding: 14px 30px;

    margin-left: 5px;

    background: #c59d5f;

    color: white;

    border-radius: 5px;

    transition: .3s;

}



.btn:hover {

    transform: translateY(-3px);

}



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


.rooms-section {

    padding: 80px 8%;

}



.rooms-section h1 {

    font-family: var(--font-telma);

}

.rooms-section h2 {

    font-family: var(--font-telma);
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 50px;

}



.rooms-container {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

    gap: 30px;

}





.room-card {

    border-radius: 12px;

    overflow: hidden;

    background: white;

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

    transition: .3s;

}



.room-card:hover {

    transform: translateY(-8px);

}




.room-card img {

    height: 230px;

    object-fit: cover;

}




.room-card h3 {

    font-family: var(--font-telma);
    font-size: 1.4rem;
    padding: 20px 20px 5px;

}



.room-card p {

    padding: 0 20px;

    color: #666;

}



.room-card span {

    display: block;

    padding: 15px 20px;

    font-weight: bold;

    color: #c59d5f;

}



.room-card a {

    display: block;

    margin: 0 20px 25px;

    text-align: center;

    padding: 12px;

    background: transparent;

    color: #222;

    background: #c59d5f;

    border-radius: 16px;

}




.room-card a:hover {

    color: #fff;

    background: #c59d5f;

}


.room-features {
    list-style: none;
    padding: 20px;
    margin: 0;
    color: #666;
}

.room-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.room-features svg {
    width: 20px;
    height: 20px;
    color: #03747c;
    flex-shrink: 0;
}


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


.about {

    padding: 80px 8%;

    background: #f7f7f7;

    text-align: center;

}


.about h2 {

    font-family: var(--font-telma);
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 10px;

}


.about p {

    max-width: 700px;

    margin: auto;

    color: #666;

}




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


footer {

    padding: 30px;

    text-align: center;

    background: #111;

    color: white;

}




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


@media(max-width:700px) {


    .hero {

        min-height: 70vh;

    }



}


.room-card ul {

    list-style-position: inside;

}


.room-card li {

    margin-bottom: 8px;

}


/* =========================
   BOOKING PAGE
========================= */


.booking-section {

    padding: 80px 8%;
    max-width: 800px;
    margin: auto;

}



.booking-section h1 {

    font-family: var(--font-telma);
    text-align: center;
    margin-top: 40px;
    margin-bottom: 10px;

}



.booking-section p {

    text-align: center;
    color: #666;
    margin-bottom: 20px;

}




#bookingForm {

    display: flex;
    flex-direction: column;
    gap: 15px;

}




#bookingForm label {

    font-weight: bold;

}



#bookingForm input,
#bookingForm select {


    padding: 15px;

    border: 1px solid #ddd;

    border-radius: 6px;

    font-size: 1rem;

}



#bookingForm button {


    margin-top: 20px;

    padding: 15px;

    background: #c59d5f;

    color: white;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    font-size: 1rem;

}



#bookingForm button:hover {

    background: #222;

}




#message {

    margin-top: 30px;

    text-align: center;

    font-weight: bold;

}



select {
    appearance: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 5.5L8 10.3l4.8-4.8' stroke='%23999' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right 15px center;
}



table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 40px;

}

th,
td {

    padding: 15px;

    border: 1px solid #ddd;

    text-align: left;

}

th {

    background: #222;

    color: white;

}

td button {

    background: #d9534f;

    color: white;

    border: none;

    padding: 8px 12px;

    cursor: pointer;

    border-radius: 4px;

}

td button:hover {

    background: #bb2d2d;

}




.booking-row {

    display: grid;

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

    gap: 20px;

    margin: 20px 0;

}

.booking-row input {

    width: 100%;

}

.guest-input {

    position: relative;

}

.guest-input::before {

    content: "";

    position: absolute;

    left: 14px;

    top: 48%;

    transform: translateY(-50%);

    width: 18px;

    height: 18px;

    pointer-events: none;

    background-repeat: no-repeat;

    background-size: 18px 18px;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23666' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");

}

.guest-input input {

    padding-left: 42px;

}


.guest-input input[type="number"] {

    padding-left: 50px !important;

}

@media (max-width:768px) {

    .booking-row {

        grid-template-columns: 1fr;

    }

}


@media (max-width:768px) {

    .booking-row {

        grid-template-columns: 1fr;

    }

}


.form-group {

    display: flex;

    flex-direction: column;

}

.form-group label {

    margin-bottom: 8px;

    font-weight: 600;

}

.form-group input {

    width: 100%;

}




@media (max-width:768px) {

    .booking-row {

        grid-template-columns: 1fr;

    }

}




.flatpickr-input {

    width: 100%;

    padding: 15px 18px;

    border: 1px solid #ddd;

    border-radius: 10px;

    font-size: 16px;

    background: #fff;

    cursor: pointer;

    transition: .3s;

}

.flatpickr-input:focus {

    border-color: #03747c;

    box-shadow: 0 0 0 3px rgba(3, 116, 124, .15);

    outline: none;

}



/* =====================================
   CONTACT TWO COLUMN SECTION
===================================== */


.contact-wrapper {


    max-width: 1200px;

    margin: 80px auto;

    padding: 0 30px;


    display: grid;

    grid-template-columns: 1fr 1fr;


    gap: 50px;


    align-items: start;


}




/* LEFT SIDE */


.contact-details h2,
.contact-form-section h2 {

    font-family: var(--font-telma);
    font-size: 36px;
    margin-bottom: 20px;
    color: #222;

}



.contact-intro,
.contact-form-section>p {


    color: #666;

    line-height: 1.7;

    margin-bottom: 35px;

}





.contact-card {


    background: white;


    padding: 25px;


    margin-bottom: 20px;


    border-radius: 12px;



    outline-style: solid;
    outline-width: 0.5mm;
    outline-color: #adadad73;


    transition: .3s;


}



.contact-card:hover {


    transform: translateY(-4px);


}



.contact-card h3 {

    font-family: var(--font-telma);
    color: #03747c;
    font-size: 20px;
    margin-bottom: 12px;


}



.contact-card p {


    color: #666;


    line-height: 1.7;


    margin: 0;


}


.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 25px;

}



.contact-item svg {

    flex-shrink: 0;

    color: #03747c;

    margin-top: 3px;

}



.contact-item p {

    margin: 0;

    color: #666;

    line-height: 1.7;

}



/* RIGHT SIDE FORM */


.contact-form-section {


    background: #fff;


    padding: 40px;


    border-radius: 15px;


    box-shadow:

        0 10px 35px rgba(0, 0, 0, .08);


}



.contact-form {


    display: flex;

    flex-direction: column;

    gap: 18px;


}



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


    width: 100%;


    padding: 15px;


    border: 1px solid #ddd;


    border-radius: 8px;


    font-size: 15px;


    font-family: inherit;


}



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


    outline: none;

    border-color: #222;


}



.contact-form textarea {


    resize: none;


}




.contact-form button {


    margin-top: 20px;

    padding: 15px;

    background: transparent;

    color: #c59d5f;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-size: 1rem;

    outline-style: solid;
    outline-width: 0.5mm;
    outline-color: #c59d5f;


}



.contact-form button:hover {

    color: #222;
    background: #c59d5f;


}




/* RESPONSIVE */


@media(max-width:900px) {


    .contact-wrapper {


        grid-template-columns: 1fr;


        padding: 0 20px;


    }



    .contact-form-section {


        padding: 30px;


    }


}





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

.map-wrapper {

    display: grid;

    grid-template-columns: 1fr;

    max-width: 1200px;

    margin: 80px auto;

    padding: 0 30px;

}



.map-wrapper h2 {

    font-family: var(--font-telma);
    font-size: 36px;
    margin-bottom: 15px;

}



.map-wrapper p {

    max-width: 700px;

    margin-bottom: 15px;

    color: #666;

    line-height: 1.7;

}






.map-section {

    width: 100%;

    margin: 40px 0;

}

.map-section iframe {

    display: block;

    width: 100%;

    height: 500px;

    border-radius: 16px;

    border: 0;

}


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


.faq {

    padding: 80px 8%;

}



.faq h2 {

    font-family: var(--font-telma);
    text-align: center;
    font-size: 36px;
    margin-bottom: 50px;

}



.faq-item {


    max-width: 900px;

    margin: 0 auto 25px;


    padding: 25px;


    background: white;


    border-radius: 10px;


    box-shadow:

        0 5px 20px rgba(0, 0, 0, .06);

}



.faq-item h3 {

    font-family: var(--font-telma);
    color: #03747c;
    margin-bottom: 10px;

}



.faq-item p {

    color: #666;

    line-height: 1.6;

}




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


.contact-cta {


    padding: 80px 20px;


    text-align: center;


    background: #03747c;


    color: white;

}



.contact-cta h2 {

    font-family: var(--font-telma);
    font-size: 40px;
    margin-bottom: 20px;

}



.contact-cta p {


    max-width: 700px;

    margin: 0 auto 35px;


    line-height: 1.7;

}



.contact-cta .btn {


    display: inline-block;


    padding: 15px 35px;


    background: white;


    color: #03747c;


    text-decoration: none;


    border-radius: 8px;


    font-weight: bold;


    transition: .3s;

}



.contact-cta .btn:hover {


    transform: translateY(-3px);

}




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


@media(max-width:1000px) {


    .contact-info {

        grid-template-columns:
            repeat(2, 1fr);

    }


}



@media(max-width:600px) {


    .page-hero h1 {

        font-size: 36px;

    }



    .contact-info {

        grid-template-columns: 1fr;

        padding: 50px 20px;

    }



    .contact-cta h2 {

        font-size: 32px;

    }


}




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

.footer {

    background: #101b19;

    color: white;

    padding-top: 70px;

    text-align: left;

}


.footer-main {

    display: grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1fr;

    gap: 50px;

    padding:
        0 30px
        60px;

}


.footer-logo {

    font-size: 25px;

    font-family: var(--font-telma);

    font-weight: 700;

    color: white;

}


.footer-brand p {

    max-width: 320px;

    color: rgba(255,255,255,.6);

    font-size: 14px;

    margin-top: 15px;

    text-align: left;

}


.footer-socials {

    display: flex;

    gap: 8px;

    margin-top: 25px;

}


.footer-socials a {

    width: 35px;

    height: 35px;

    display: grid;

    place-items: center;

    border: 1px solid rgba(255,255,255,.2);

    font-size: 12px;

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.footer-column h3 {

    color: var(--accent-light);

    font-size: 13px;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 8px;

}


.footer-column a,
.footer-column span {

    color: rgba(255,255,255,.62);

    font-size: 13px;

}


.footer-column a:hover {

    color: white;

}


.footer-bottom {

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

    padding:
        22px 30px;

    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: rgba(255,255,255,.45);

    font-size: 12px;

}


.footer-bottom div {

    display: flex;

    gap: 20px;

}


.footer-bottom a:hover {

    color: white;

}


.footer-main {
    max-width: var(--container);

    margin-left: auto;

    margin-right: auto;
}




@media (max-width: 800px) {

    .footer-main {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


@media (max-width: 550px) {


    .footer-main {

        grid-template-columns: 1fr;

        padding-left: 20px;

        padding-right: 20px;

    }


    .footer-bottom {

        flex-direction: column;

        padding:
            20px;

    }


    .footer-bottom div {

        flex-direction: column;

        gap: 7px;

    }

}