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

/* ==========================
   Global Styles
========================== */

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

html{
    width:100%;
    min-height:100%;
    scroll-behavior:smooth;
}

body{
    min-height:100%;
    font-family:'Poppins',sans-serif;
    background:#f4f6f8;
    color:#333;
}

/* ==========================
   Header
========================== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:rgba(8,32,50,.95);
    padding:20px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:1000;
    box-shadow:0 3px 15px rgba(0,0,0,.2);
}

.logo{
    color:#fff;
    font-size:28px;
    font-weight:700;
}

nav a{
    color:#fff;
    text-decoration:none;
    margin-left:30px;
    font-weight:500;
    transition:.3s;
}

nav a:hover{
    color:#f5b942;
}

nav a{
    color:#fff;
    text-decoration:none;
    margin-left:30px;
    font-weight:500;
    transition:.3s;
    position:relative;
    padding-bottom:8px;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0;
    height:3px;
    background:#f5b942;
    border-radius:5px;
    transition:.3s;
}

nav a.active::after{
    width:100%;
}

nav a.active{
    color:#f5b942;
}

nav a:hover{
    color:#f5b942;
}

/* ==========================
   Hero
========================== */

.hero{
    height:700px;
    min-height:300px;

    background:
        linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35)),
        url("Media/beach.jpg") center center / cover no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
}

.hero-content{
    max-width:600px;
}

.hero h1{
    font-size:40px;
    margin-bottom:20px;
}

.hero p{
    font-size:24px;
    margin-bottom:35px;
}

/* ==========================
   Buttons
========================== */

.button{
    display:inline-block;
    padding:16px 35px;
    background:#d68c1d;
    color:#fff;
    text-decoration:none;
    border-radius:40px;
    transition:.3s;
}

.button:hover{
    background:#b87510;
    transform:translateY(-4px);
}

/* ==========================
   Sections
========================== */

section{
    padding:100px 8%;
}

section h2{
    text-align:center;
    font-size:42px;
    margin-bottom:50px;
    color:#082032;
}

/* ==========================
   Featured Cards
========================== */

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

.card{
    background:#fff;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
    transition:.35s;
}

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

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

.card-content{
    padding:25px;
}

.card h3{
    margin-bottom:15px;
}

.card p{
    margin-bottom:25px;
    color:#666;
}

/* ==========================
   Amenities
========================== */

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

.feature-box{
    background:#fff;
    padding:35px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

/* ==========================
   Gallery
========================== */

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

.gallery img{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:12px;
    transition:.3s;
}

.gallery img:hover{
    transform:scale(1.04);
}

.gallery .button{
    grid-column:1 / -1;
    justify-self:center;
    margin-top:20px;
}

/* ==========================
   Large Photo Slider
========================== */

.slider-section{
    padding:100px 5%;
}

.slider{
    position:relative;
    width:100%;
    height:700px;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.slider img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:1;
    transition:opacity .8s ease-in-out;
}

.slider img.fade{
    opacity:0;
}

/* ==========================
   Slider Controls
========================== */

.slider button.prev,
.slider button.next{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:55px;
    height:55px;

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

    background:rgba(0,0,0,.55);
    color:#fff;

    border:none;
    border-radius:50%;

    font-size:28px;
    cursor:pointer;

    z-index:5;
    transition:.3s;
}

.slider button.prev{
    left:20px;
}

.slider button.next{
    right:20px;
}

.slider button.prev:hover,
.slider button.next:hover{
    background:#d68c1d;
    transform:translateY(-50%) scale(1.1);
}


/* ==========================
   View All Button
========================== */

.view-all{
    position:absolute;
    bottom:20px;
    right:20px;

    background:#fff;
    color:#082032;

    border:none;

    padding:10px 18px;

    border-radius:25px;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    z-index:5;

    box-shadow:0 4px 12px rgba(0,0,0,.25);

    transition:.3s;
}

.view-all:hover{
    background:#d68c1d;
    color:#fff;
}


/* ==========================
   Fullscreen Photo Gallery
========================== */

.photo-gallery{

    display:none;

    position:fixed;

    inset:0;

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

    padding:60px 5%;

    overflow-y:auto;

    z-index:2000;

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

    gap:25px;
}

.photo-gallery img{

    width:100%;
    height:300px;

    object-fit:cover;

    border-radius:15px;
}

.close-gallery{

    position:fixed;

    top:20px;
    right:40px;

    color:#fff;

    font-size:55px;

    cursor:pointer;
}

.photo-gallery{
    display:none;
}

.photo-gallery.active{
    display:grid;
}


/* ==========================
   Booking Section
========================== */

.booking{
    background:#082032;
    color:#fff;
    text-align:center;
    border-radius:20px;
    max-width:900px;
    margin:0 auto 40px;
}

.booking h2{
    color:#fff;
    font-size:32px;
    margin-bottom:15px;
}

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

.booking-buttons{
    margin-top:20px;
}

.booking-buttons a{
    margin:8px;
    padding:12px 25px;
    font-size:14px;
}


/* ==========================
   Footer
========================== */

footer{
    background:#06141f;
    color:#fff;
    text-align:center;
    padding:40px;
}


/* ==========================
   Responsive Design
========================== */

@media(max-width:900px){

    header{
        flex-direction:column;
        padding:20px;
    }

    nav{
        margin-top:15px;
    }

    nav a{
        margin:0 10px;
    }

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

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

    section h2{
        font-size:34px;
    }

    .slider{
        height:400px;
    }

    .slider button.prev,
    .slider button.next{

        width:45px;
        height:45px;
        font-size:22px;
    }

    .view-all{

        bottom:15px;
        right:15px;
        padding:8px 15px;
        font-size:13px;
    }

}

/* ==========================
   Additional Utility Styles
========================== */

/* Ensures hidden fullscreen galleries
   can become visible through JavaScript */
.photo-gallery.active{
    display:grid;
}


/* ==========================
   Accessibility & Interaction
========================== */

button{
    font-family:'Poppins',sans-serif;
}


/* ==========================
   Small Screen Adjustments
========================== */

@media(max-width:600px){

    header{
        padding:15px;
    }

    .logo{
        font-size:24px;
    }

    nav a{
        display:inline-block;
        margin:5px;
        font-size:14px;
    }

    .hero{
        height:600px;
    }

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

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

    section{
        padding:70px 5%;
    }

    section h2{
        font-size:30px;
        margin-bottom:35px;
    }

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

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

    .slider{
        height:300px;
    }

    .close-gallery{
        font-size:40px;
        right:20px;
    }

    .booking h2{
        font-size:26px;
    }

    .booking-buttons a{
        display:block;
        margin:10px auto;
        width:max-content;
    }

}

/* ==========================
   Contact Form
========================== */

.contact{
    background:#f4f6f8;
}


.contact-container{

    max-width:700px;

    margin:auto;

    background:#fff;

    padding:45px;

    border-radius:20px;

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

}


.contact form{

    display:flex;

    flex-direction:column;

    gap:20px;

}


.contact input,
.contact textarea{

    width:100%;

    padding:15px 20px;

    border:1px solid #ddd;

    border-radius:12px;

    font-family:'Poppins',sans-serif;

    font-size:15px;

    outline:none;

    transition:.3s;

}


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

    border-color:#d68c1d;

    box-shadow:
    0 0 0 3px rgba(214,140,29,.2);

}


.contact textarea{

    resize:none;

}


.contact button{

    border:none;

    cursor:pointer;

}

.contactmessage {
    text-align: center;
    margin-bottom: 30px;
    color: #666;
}

.required-message{
    text-align:center;
    font-size:14px;
    color:#777;
    margin-top:-5px;
    margin-bottom:5px;
}

#formStatus{

    text-align:center;

    font-weight:600;

    margin-top:10px;

}


/* Mobile */

@media(max-width:600px){

    .contact-container{

        padding:25px;

    }

}

/* ==========================
   Under Construction Page
========================== */

.construction-page{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}


.construction-page .hero{

    flex:1;

    min-height:100vh;

}


.construction-page footer{

    margin-top:auto;

}


.construction-title{

    color:#e89820;

}
/* ==========================
   Enhanced Mobile Layout
========================== */

@media (max-width: 768px){

    body{
        overflow-x:hidden;
    }


    /* Header */

    header{

        position:fixed;

        padding:15px 20px;

        flex-direction:column;

        gap:12px;

        text-align:center;

    }


    .logo{

        font-size:24px;

    }


    nav{

        width:100%;

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:8px;

    }


    nav a{

        margin:0;

        font-size:14px;

        padding:5px 8px;

    }



    /* Hero */

    .hero{

        height:100vh;

        min-height:600px;

        padding:0 20px;

        background-position:center;

    }


    .hero-content{

        width:100%;

    }


    .hero h1{

        font-size:32px;

        line-height:1.2;

        margin-bottom:15px;

    }


    .hero p{

        font-size:18px;

        line-height:1.5;

        margin-bottom:25px;

    }


    .button{

        width:100%;

        max-width:280px;

        padding:14px 25px;

    }



    /* Sections */

    section{

        padding:60px 20px;

    }


    section h2{

        font-size:30px;

        margin-bottom:30px;

    }



    /* Cards */

    .featured,
    .features{

        grid-template-columns:1fr;

        gap:20px;

    }


    .card img{

        height:200px;

    }


    .card-content{

        padding:20px;

    }



    /* Gallery */

    .gallery{

        grid-template-columns:1fr;

        gap:15px;

    }


    .gallery img{

        height:220px;

    }



    /* Slider */

    .slider-section{

        padding:50px 15px;

    }


    .slider{

        height:260px;

        border-radius:15px;

    }


    .slider button.prev,
    .slider button.next{

        width:40px;

        height:40px;

        font-size:20px;

    }


    .slider button.prev{

        left:10px;

    }


    .slider button.next{

        right:10px;

    }


    .view-all{

        bottom:10px;

        right:10px;

        padding:8px 12px;

        font-size:12px;

    }



    /* Full Gallery */

    .photo-gallery{

        padding:50px 15px;

        grid-template-columns:1fr;

    }


    .photo-gallery img{

        height:220px;

    }


    .close-gallery{

        top:10px;

        right:20px;

        font-size:40px;

    }



    /* Booking */

    .booking{

        margin:20px;

        padding:30px 20px;

        border-radius:15px;

    }


    .booking h2{

        font-size:26px;

    }


    .booking-buttons a{

        display:block;

        width:100%;

        max-width:250px;

        margin:10px auto;

    }



    /* Contact */

    .contact-container{

        padding:25px 20px;

        border-radius:15px;

    }


    .contact input,
    .contact textarea{

        font-size:14px;

        padding:12px 15px;

    }



    /* Footer */

    footer{

        padding:25px 15px;

        font-size:14px;

    }

}



/* Extra Small Phones */

@media(max-width:400px){

    .hero h1{

        font-size:28px;

    }


    .hero p{

        font-size:16px;

    }


    section h2{

        font-size:26px;

    }


    .card img{

        height:180px;

    }


    .slider{

        height:220px;

    }

}

/* ==========================
   View All Button Fix
========================== */

.view-all{

    position:absolute;

    bottom:20px;
    right:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    height:40px;

    padding:0 18px;

    line-height:1;

    white-space:nowrap;

    font-size:14px;

    border-radius:25px;

}


/* Keep button hover behavior */

.view-all:hover{

    transform:translateY(-3px);

}


/* Mobile */

@media(max-width:600px){

    .view-all{

        height:36px;

        padding:0 14px;

        font-size:12px;

    }

}

/* ==========================
   Booking Page Layout
========================== */

.booking-layout{

    padding:120px 8% 80px;

    background:#f4f6f8;

}


.booking-layout-header{

    text-align:center;

    max-width:800px;

    margin:auto;

    margin-bottom:60px;

}


.booking-layout-header h1{

    color:#082032;

    font-size:48px;

    margin-bottom:20px;

}


.booking-layout-header p{

    color:#666;

    font-size:20px;

}



.booking-layout-content{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    background:white;

    border-radius:25px;

    overflow:hidden;

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

}



.booking-layout-image img{

    width:100%;

    height:100%;

    min-height:600px;

    object-fit:cover;

}



.booking-layout-details{

    padding:50px;

}



.booking-layout-details h2{

    color:#082032;

    font-size:36px;

    margin-bottom:15px;

}


.booking-layout-details .location{

    color:#082032;

    font-weight:600;

    margin-bottom:25px;

    font-size:17px;

}



.booking-layout-details p{

    line-height:1.7;

    color:#555;

}



.amenities{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:15px;

    margin:35px 0;

}



.amenities div{

    background:#f4f6f8;

    padding:20px;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    gap:6px;

}



.amenities strong{

    color:#082032;

}



.amenities span{

    color:#666;

}



.booking-layout-details h3{

    color:#082032;

    margin-bottom:20px;

}



.booking-layout-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

}



.booking-layout-buttons .button{

    margin:0;

}



@media(max-width:900px){

    .booking-layout-content{

        grid-template-columns:1fr;

    }


    .booking-layout-image img{

        min-height:300px;

    }


    .booking-layout-details{

        padding:30px;

    }


    .booking-layout-header h1{

        font-size:36px;

    }

}