/* ==========================================
   LAPRIMA GUEST EXPERIENCE
   FINAL WHITE PREMIUM STYLE
========================================== */


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

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


html{
    scroll-behavior:smooth;
}


body{

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

    background:#ffffff;

    color:#111111;

    overflow-x:hidden;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}



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

:root{

    --black:#111111;

    --dark:#f7f7f7;

    --gold:#c9a45c;

    --white:#ffffff;

    --gray:#666666;

}





/* ==========================================
   CONTAINER
========================================== */


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}





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


section{

    position:relative;

    padding:100px 0;

}



.section-heading{

    max-width:800px;

    margin:0 auto 60px;

    text-align:center;

}



.section-subtitle{

    display:block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.8rem;

    margin-bottom:20px;

}



.section-title{

    font-family:'Cormorant Garamond',serif;

    font-size:3.5rem;

    line-height:1.2;

    margin-bottom:25px;

    color:#111;

}



.section-description{

    color:#555;

    line-height:1.8;

    font-size:1rem;

}





/* ==========================================
   LOADING SCREEN
========================================== */


#loading-screen{

    position:fixed;

    inset:0;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:.8s ease;

}



#loading-screen.hide{

    opacity:0;

    visibility:hidden;

}



.loader-container{

    text-align:center;

}



.loader-logo{

    width:120px;

    margin:0 auto 25px;

}



.loader-title{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    color:#111;

}



.loader-subtitle{

    margin-top:10px;

    color:#777;

}



.loader-bar{

    width:180px;

    height:3px;

    background:#ddd;

    margin:30px auto 0;

}



.loader-progress{

    height:100%;

    width:100%;

    background:var(--gold);

    animation:loading 2s ease;

}



@keyframes loading{

from{

    transform:translateX(-100%);

}

to{

    transform:translateX(0);

}

}





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


.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:15px 0;

    z-index:1000;

    transition:.4s ease;

}



.navbar.scrolled{

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(15px);

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

}



.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.logo img{

    width:90px;

}



.navbar nav ul{

    display:flex;

    gap:35px;

}



.navbar nav a{

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#111;

}



.navbar nav a:hover{

    color:var(--gold);

}



.language{

    display:flex;

    gap:8px;

}



.language button{

    background:white;

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

    color:#111;

    padding:7px 12px;

    border-radius:50px;

    cursor:pointer;

}





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


.hero{

    min-height:100vh;

    height:100svh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background-image:url("Assets/images/hero.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    position:relative;

}



.hero-overlay{

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.05);

}



.hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    width:90%;

}



.hero-logo{

    width:180px;

    margin:0 auto 40px;

}



.hero-subtitle{

    color:var(--gold);

    letter-spacing:5px;

    text-transform:uppercase;

    font-size:.85rem;

}



.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,6vw,5rem);

    line-height:1.05;

    margin:25px 0;

    color:#111;

}



.hero p{

    max-width:700px;

    margin:auto;

    line-height:1.8;

    color:#333;

}



.hero-button{

    display:inline-flex;

    margin-top:40px;

    padding:18px 45px;

    border-radius:100px;

    background:var(--gold);

    color:white;

    border:none;

    text-transform:uppercase;

    letter-spacing:2px;

    gap:15px;

}/* ==========================================
   SCROLL INDICATOR
========================================== */


.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    z-index:3;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    animation:scrollMove 2s infinite;

}



.scroll-indicator span{

    font-size:.75rem;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#111;

}



@keyframes scrollMove{


0%{

transform:translate(-50%,0);

}


50%{

transform:translate(-50%,12px);

}


100%{

transform:translate(-50%,0);

}


}





/* ==========================================
   WELCOME
========================================== */


.welcome{

    background:#ffffff;

}



.welcome-card{

    display:grid;

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

    gap:30px;

}



.welcome-item{

    background:#ffffff;

    border:1px solid rgba(0,0,0,.1);

    padding:40px 30px;

    text-align:center;

    border-radius:20px;

    transition:.4s ease;

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

}



.welcome-item:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

}



.welcome-item i{

    color:var(--gold);

    font-size:2rem;

    margin-bottom:25px;

}



.welcome-item h3{

    font-family:'Cormorant Garamond',serif;

    font-size:1.8rem;

    margin-bottom:15px;

    color:#111;

}



.welcome-item p{

    color:#666;

    line-height:1.7;

}






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


.guest-information,
.stay-information,
.comments{

    background:#ffffff;

}





.form-card{

    background:#ffffff;

    border:1px solid rgba(0,0,0,.1);

    border-radius:25px;

    padding:45px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

}



.form-grid{

    display:grid;

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

    gap:25px;

}



.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}



.form-group label{

    font-size:.9rem;

    color:#111;

}



.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:16px;

    border-radius:12px;

    border:1px solid rgba(0,0,0,.15);

    background:#fafafa;

    color:#111;

    outline:none;

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

}



.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:var(--gold);

}



.form-group input::placeholder,
.form-group textarea::placeholder{

    color:#999;

}



.form-group select option{

    background:white;

    color:#111;

}



.form-group textarea{

    resize:none;

}



.full-width{

    grid-column:1/-1;

}





/* ==========================================
   RATING
========================================== */


.experience{

    background:#f7f7f7;

}



.rating-card{

    display:flex;

    flex-direction:column;

    gap:20px;

}



.rating-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#ffffff;

    border:1px solid rgba(0,0,0,.1);

    padding:25px 30px;

    border-radius:15px;

}



.rating-title{

    font-size:1rem;

    color:#111;

}



.stars{

    display:flex;

    gap:10px;

}



.stars i{

    font-size:1.4rem;

    color:var(--gold);

    cursor:pointer;

    transition:.3s ease;

}



.stars i:hover{

    transform:scale(1.25);

}





/* ==========================================
   THANK YOU IMAGE
========================================== */


.thankyou-image{

    max-width:900px;

    margin:50px auto;

    border-radius:25px;

    overflow:hidden;

}



.thankyou-image img{

    width:100%;

    object-fit:cover;

}/* ==========================================
   SUBMIT
========================================== */


.submit-section{

    text-align:center;

    background:

    linear-gradient(

    180deg,

    #ffffff,

    #f7f7f7

    );

    position:relative;

    top:-100px;

}

}



.submit-section h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    margin-bottom:20px;

    color:#111;

}



.submit-section p{

    max-width:600px;

    margin:auto;

    margin-bottom:35px;

    color:#666;

    line-height:1.8;

}



.submit-btn{

    padding:18px 50px;

    border:none;

    border-radius:100px;

    background:var(--gold);

    color:white;

    cursor:pointer;

    text-transform:uppercase;

    letter-spacing:2px;

    transition:.3s ease;

}



.submit-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(201,164,92,.3);

}





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


.footer{

    background:#1f4d3a;

    text-align:center;

    padding:60px 0;

}



.footer-logo{

    width:100px;

    margin:0 auto 20px;

}



.footer p{

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

}



.footer-social{

    display:flex;

    justify-content:center;

    gap:20px;

    margin:25px 0;

}



.footer-social a{

    width:40px;

    height:40px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

}



.footer-social a:hover{

    background:var(--gold);

    color:white;

}





/* ==========================================
   ANIMATION
========================================== */


.hero-content{

    animation:heroShow 1.2s ease forwards;

}



@keyframes heroShow{

from{

    opacity:0;

    transform:translateY(40px);

}


to{

    opacity:1;

    transform:translateY(0);

}

}





/* ==========================================
   BUTTON + LINK EFFECT
========================================== */


button,
a{

    transition:.3s ease;

}





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


@media(max-width:992px){


    .welcome-card{

        grid-template-columns:1fr;

    }


    .navbar nav{

        display:none;

    }


}





@media(max-width:768px){



    section{

        padding:70px 0;

    }



    .container{

        width:92%;

    }



    .logo img{

        width:70px;

    }



    .language button{

        padding:6px 9px;

        font-size:.7rem;

    }



    .hero{

        min-height:100svh;

        background-position:center;

    }



    .hero-logo{

        width:130px;

        margin-bottom:30px;

    }



    .hero h1{

        font-size:3rem;

    }



    .hero p{

        font-size:.95rem;

        line-height:1.7;

    }



    .hero-button{

        padding:15px 30px;

        font-size:.75rem;

    }



    .section-title{

        font-size:2.5rem;

    }



    .section-description{

        font-size:.95rem;

    }



    .form-card{

        padding:25px;

    }



    .form-grid{

        grid-template-columns:1fr;

    }



    .rating-item{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }



    .stars i{

        font-size:1.2rem;

    }



    .submit-section h2{

        font-size:2.4rem;

    }



}





@media(max-width:480px){



    .hero h1{

        font-size:2.5rem;

    }



    .hero-logo{

        width:110px;

    }



    .language{

        display:none;

    }



    .section-title{

        font-size:2.2rem;

    }



}





/* ==========================================
   SELECTION COLOR
========================================== */


::selection{

    background:var(--gold);

    color:white;

}/* ==========================================
   FINAL POSITION ADJUSTMENT
========================================== */


/* Geser logo + tulisan hero sedikit ke atas */

.hero-content{

    transform:translateY(-50px);

}



/* Mobile adjustment */

@media(max-width:768px){

    .hero-content{

        transform:translateY(-35px);

    }

}



/* ==========================================
   THANK YOU SECTION POSITION
========================================== */


.thankyou-image{

    margin-top:30px;

}



/* Jika ada tulisan thank you di atas gambar */



    transform:translateY(-30px);

}




/* ==========================================
   SCROLL DOWN WHITE
========================================== */


.scroll-indicator span{

    color:white;

}


.scroll-indicator::after{

    color:white;

}



/* kalau menggunakan icon panah */

.scroll-indicator i{

    color:white;

}




/* ==========================================
   SOCIAL MEDIA GOLD
========================================== */


.footer-social a{

    color:var(--gold);

    border-color:var(--gold);

}



.footer-social a:hover{

    background:var(--gold);

    color:white;

}/* ==========================================
   THANK YOU TEXT POSITION
========================================== */

.thankyou-image{

    margin-bottom:20px;

}


.thankyou-image ~ .section-heading{

    transform:translateY(-40px);

}



/* Judul Thank You */

.thankyou h2,
.thankyou h1{

    transform:translateY(-40px);

}



/* Paragraf Thank You */

.thankyou p{

    transform:translateY(-40px);

}/* ==========================================
   THANK YOU TEXT MOVE HIGHER
========================================== */

.thankyou .section-heading{

    transform:translateY(-100px);

}


.thankyou .section-subtitle,
.thankyou .section-title,
.thankyou .section-description{

    transform:translateY(-100px);
/* ==========================================
   THANK YOU SECTION FIX
========================================== */

.submit-section{

    padding:80px 0;

    text-align:center;

}


.submit-section h2{

    margin-top:0;

}


.submit-section p{

    margin-top:0;

}
}


.submit-btn{

    margin-top:-20px;

}/* Move only hero text upward */

.hero-content{

    position:relative;

    top:-80px;

}/* Make hero text white */

.hero-content,
.hero-content h1,
.hero-content h2,
.hero-content h3,
.hero-content p,
.hero-content span{

    color:white !important;


/* Move logo higher */

.hero-logo{

    transform:translateY(-70px);

}
}

}

}.logo-text,
.hero-logo-text{

    color:#111111 !important;

} /* FINAL LOGO HERO POSITION */

.hero-logo{

    width:120px !important;

    transform:translateY(-25px) !important;

}


/* Mobile */

@media(max-width:768px){

    .hero-logo{

        width:100px !important;

        transform:translateY(-20px) !important;

    }

}/* FIX SCROLL DOWN WHITE */

.scroll-indicator,
.scroll-indicator span,
.scroll-indicator i{

    color:white !important;

}