/* ==========================================================
                LAFAYETTE PHOTO STUDIO
                CSS VERSION 1.0
========================================================== */


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

html{

    scroll-behavior:smooth;

    scroll-padding-top:100px;

}

#paket,
#galeri,
#lokasi{

    scroll-margin-top:100px;

}

body{
    margin:0;
    padding:0;
    font-family:'Montserrat',sans-serif;
    background:#FAF8F6;
    color:#4A3525;
    overflow-x:hidden;
}

/* =====================================
        COLOR PALETTE LAFAYETTE
===================================== */

:root{

    --primary:#8A6141;
    --secondary:#6E4C34;

    --accent:#C79A68;

    --button:#8A6141;

    --button-hover:#6E4C34;

    --cream:#FDF9F4;

    --text:#555555;

    --shadow:rgba(138,97,65,.18);

}

a{
    text-decoration:none;
}

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


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

.navbar-lafayette{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99999;

    background:#fff;

}

/* Navbar */

.navbar-lafayette{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:99999;

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

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    padding:18px 0;

    box-shadow:0 8px 24px rgba(0,0,0,.06);

    border-bottom:1px solid #EFE6DC;

}

/* Gold Line */

.navbar-lafayette::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #D7B289,
        #F7E9D6,
        #D7B289,
        transparent
    );

}

/* Container */

.navbar-lafayette .container{

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

}

/* ==========================================================
                        LOGO
========================================================== */

.navbar-brand{

    display:flex !important;
    align-items:center !important;
    flex-direction:row !important;
    gap:14px;
}

.logo-title{

    font-size:28px;

}

.logo-title:hover{

color:var(--primary);

}

.logo-subtitle{

    margin-top:6px;

    font-size:11px;

    letter-spacing:6px;

    color:#999;

}

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

.navbar-menu{

    display:flex;

    align-items:center;

    gap:34px;

}

.navbar-menu a{

    position:relative;

    color:#6B4324;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.navbar-menu a i{

    margin-right:7px;

    font-size:17px;

}

/* Hover */

.navbar-menu a:hover{

    color:var(--accent);

    transform:translateY(-2px);

}

/* Underline */

.navbar-menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--accent);

    border-radius:50px;

    transition:.35s;

}

.navbar-menu a:hover::after{

    width:100%;

}

/* Active */

.navbar-menu a.active{

    color:var(--primary);

}

.navbar-menu a.active::after{

    width:100%;

}

/* ==========================================================
                    ADMIN LOGIN
========================================================== */

.btn-outline-lafayette{

    color:#0D6EFD;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.btn-outline-lafayette:hover{

    color:#084298;

}


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

.hero{

    position:relative;

    display:flex;

    align-items:center;

    height:100vh;

    overflow:hidden;

    background:
    linear-gradient(
        rgba(250,248,245,.12),
        rgba(250,248,245,.12)
    ),
    url('/images/lafayette-hero1.jpg');

    background-size:cover;

    background-repeat:no-repeat;

    background-position:center 30%;

}


/* Overlay */

.hero::before{

    content:"";

    position:absolute;

    inset:0;

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

    backdrop-filter:blur(2px);

    z-index:1;

}

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

.hero-container{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1200px;

    margin:auto;

    padding:95px 70px 0;

}

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

.hero-content{
    max-width:560px;
    margin-top:-45px;   
}

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

.hero-title{

    font-family:'Playfair Display',serif;

    font-size:64px;

    line-height:1.08;

    font-weight:700;

    color:var(--primary);

    letter-spacing:-1px;

    margin:0;

    text-shadow:
        0 2px 10px rgba(255,255,255,.30);

    animation:fadeHero .8s ease;

}

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

.hero-line{
    width:140px;
    height:4px;
    background:var(--accent);
    border-radius:20px;
    margin:22px 0;
}

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

.hero-desc{
    max-width:540px;
    font-size:18px;
    line-height:1.8;
    color:#555;
    margin-bottom:24px;
}

/* ==========================================================
                    BOOKING BUTTON
========================================================== */

.btn-booking{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:14px 30px;

    background:var(--button);

    color:#fff;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 10px 25px rgba(138,97,65,.25);

    animation:fadeHero 1.2s ease;

}

.btn-booking:hover{

    background:var(--button-hover);;

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 16px 35px rgba(107,67,36,.28);

}

.btn-booking i{

    font-size:17px;

}

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

section{

    scroll-margin-top:110px;

}

.section-title{

    font-family:'Playfair Display',serif;

    color:var(--secondary);

    font-size:48px;

    font-weight:700;

    margin-bottom:18px;

}

.section-desc{

    max-width:820px;

    margin:auto;

    color:#666;

    font-size:18px;

    line-height:1.9;

}

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

@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

.about-section{

    background:#ffffff;

    padding:90px 0;

}

.about-section .section-desc{

    max-width:850px;

    margin:auto;

    text-align:center;

}


/* ==========================================================
                    PAKET FOTO
========================================================== */

#paket{

    background:#F8F8F8;

    padding:90px 0;

}

/* Card */

.paket-card{

    border:none;

    border-radius:22px;

    overflow:hidden;

    background:#ffffff;

    transition:.35s ease;

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

    height:100%;

}

.paket-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(138,97,65,.18);

}

.paket-card .card-body{

    padding:40px 35px;

}

/* Judul */

.paket-card h4{

    font-size:28px;

    font-weight:700;

    color:#4A3525;

    margin-bottom:15px;

}

/* Harga */

.paket-card h3{

    color:var(--primary) !important;

    font-size:40px;

    font-weight:700;

    margin-bottom:20px;

}

/* Garis */

.paket-card hr{

    border:none;

    height:1px;

    background:#ECECEC;

    margin:22px 0;

}

/* Isi */

.paket-card p{

    color:#666;

    font-size:17px;

    margin-bottom:15px;

    transition:.3s;

}

.paket-card:hover p{

    color:#444;

}

/* Checklist */

.paket-card p{
    position:relative;
    padding-left:24px;
    margin-bottom:14px;
}

.paket-card p::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--primary);
    font-weight:700;
}


/* ==========================================================
                    GALERI
========================================================== */

.gallery-item{

    overflow:hidden;

    border-radius:22px;

    background:#fff;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.gallery-item:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(138,97,65,.18);

}

.gallery-img{

    width:100%;

    height:290px;

    object-fit:cover;

    transition:.5s;

}

.gallery-item:hover .gallery-img{

    transform:scale(1.06);

}


/* ==========================================================
                    LOKASI
========================================================== */

.location-section{

    background:#FFF8F3;

    padding:95px 0;

}

.location-section iframe{

    border-radius:20px;

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

}

.location-section h4{

    font-size:28px;

    color:var(--primary);

    font-weight:700;

    margin-bottom:20px;

}

.location-section p{

    font-size:17px;

    color:#666;

    line-height:1.9;

}

.location-section i{

    color:#B4845C;

    margin-right:8px;

}


/* Tombol Maps */

.location-section .btn-booking{

    margin-top:15px;

}


/* ==========================================================
                    SCROLL
========================================================== */

#paket,
#galeri,
#lokasi{

    scroll-margin-top:60px;

}

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

.footer{

    background:linear-gradient(
        180deg,
        #5E412F,
        #4A3525
    );

    color:#fff;

    padding:75px 0 30px;

    position:relative;

}

.footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #D7B289,
        transparent
    );

}

/* ===========================
        LOGO
=========================== */

.footer-logo{

    font-family:'Playfair Display',serif;

    font-size:42px;

    font-weight:700;

    color:#fff;

    letter-spacing:-1px;

}

.footer-subtitle{

    color:#E8D7C5;

    letter-spacing:7px;

    font-size:12px;

    margin-top:4px;

    margin-bottom:28px;

}

.footer-desc{

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

    line-height:1.9;

    font-size:17px;

    max-width:340px;

}

/* ===========================
        FOLLOW US
=========================== */

.follow-us{

    display:flex;

    align-items:center;

    gap:15px;

    margin:30px 0 22px;

    max-width:280px;   

}

.follow-us span{

    flex:.8;          

    height:1px;

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

}

.follow-us p{

    margin:0;

    color:#D9B58A;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;

}

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

.footer-social{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-social a{

    display:flex;

    align-items:center;

    gap:14px;

    color:#fff;

    text-decoration:none;

    transition:.35s;

    font-size:17px;

}

.footer-social a i{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#D9B58A;

    font-size:20px;

    transition:.35s;

}

.footer-social a:hover{

    color:#D9B58A;

    transform:translateX(8px);

}

.footer-social a:hover i{

    background:#D9B58A;

    color:#4A3525;

}

/* ===========================
        TITLE
=========================== */

.footer-title{

    color:#FFF3E5;

    font-size:22px;

    margin-bottom:28px;

    position:relative;

    padding-bottom:12px;

}

.footer-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:50px;

    height:2px;

    background:#D9B58A;

}

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

.footer-contact{

    display:flex;

    gap:15px;

    margin-bottom:24px;

}

.footer-contact i{

    color:#D9B58A;

    font-size:22px;

    margin-top:2px;

}

.footer-contact span{

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

    line-height:1.8;

}

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

.footer-list{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-list li{

     margin-bottom:12px;

}

.footer-list a{

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

    text-decoration:none;

    transition:.35s;

}

.footer-list a:hover{

    color:#D9B58A;

    padding-left:8px;

}

/* ===========================
        COPYRIGHT
=========================== */

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

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

    text-align:center;

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

    font-size:15px;

}


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

@media (max-width:1200px){

.hero-title{

font-size:58px;

}

.hero-content{

max-width:520px;

}

}

@media (max-width:992px){

.navbar-menu{

display:none;

}

.hero{

text-align:center;

min-height:calc(100vh - 82px);

padding:80px 0;

}

.hero-container{

padding:0 25px;

}

.hero-content{

margin:auto;

max-width:100%;

}

.hero-title{

font-size:50px;

}

.hero-line{
    width:140px;
    height:4px;
    background:var(--accent);
    border-radius:20px;
    margin:22px 0;
}

.hero-desc{

max-width:100%;

}

.btn-booking{

margin:auto;

}

.section-title{

font-size:38px;

}

.gallery-img{

height:260px;

}

.footer{

text-align:center;

}

.footer-desc{

margin:auto;

}

.footer-contact{

justify-content:center;

}

.footer-social{

justify-content:center;

}

}

@media (max-width:576px){

.logo-title{

font-size:30px;

}

.hero-title{

font-size:42px;

}

.hero-desc{

font-size:16px;

}

.btn-booking{

padding:12px 24px;

font-size:14px;

}

.section-title{

font-size:34px;

}

.section-desc{

font-size:16px;

}

.gallery-img{

height:220px;

}

}

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

.fade-up{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================
        GOOGLE MAPS CARD
=========================== */

.map-card{

    background:#fff;

    padding:12px;

    border-radius:20px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.map-card iframe{

    width:100%;

    border:none;

    border-radius:16px;

}

/* ===========================
        INFO LOKASI
=========================== */

.location-card{

    background:#fff;

    padding:40px;

    border-radius:20px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    height:100%;

}

.location-card h4{

    color:var(--primary);

    font-size:30px;

    font-weight:700;

    margin-bottom:28px;

}

.location-card p{

    font-size:18px;

    color:#666;

    line-height:1.8;

    margin-bottom:28px;

}

.location-card i{

    color:var(--primary);

    font-size:22px;

    margin-right:10px;

}

.action-card{

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

padding:22px;

border-radius:18px;

background:#fff;

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

transition:.3s;

height:110px;

color:#4A3525;

}

.action-card:hover{

transform:translateY(-4px);

box-shadow:0 18px 35px rgba(0,0,0,.12);

}

.action-icon{

width:60px;
height:60px;

border-radius:16px;

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

font-size:30px;

color:white;

}

.excel-card .action-icon{

background:#1D9A57;

}

.pdf-card .action-icon{

background:#E74B5A;

}

.scan-card .action-icon{

background:#9D7250;

}

.action-text{

flex:1;
padding-left:18px;

}

.action-text h5{

margin:0;
font-weight:700;

font-size:24px;

}

.action-text small{

color:#777;

}

.action-arrow{

font-size:28px;

color:#999;

}

/* Scrollbar */

::-webkit-scrollbar{
    width:14px;
}

::-webkit-scrollbar-track{
    background:#EFE6DD;
    border-radius:20px;
}

::-webkit-scrollbar-thumb{
    background:#C49A72;
    border-radius:20px;
    border:2px solid #F5EDE6;
}

::-webkit-scrollbar-thumb:hover{
    background:#A97B53;
}

html{
    scrollbar-width: thin;
    scrollbar-color:#C49A72 #EFE6DD;
}

html,
body{
    overflow-y: scroll;
}

body::-webkit-scrollbar{
    width:14px;
}

body::-webkit-scrollbar-track{
    background:#EFE6DD;
}

body::-webkit-scrollbar-thumb{
    background:#C49A72;
    border-radius:20px;
}

.table-custom thead th{

    background:#BA8E68;

    color:#fff;

    font-weight:700;

    font-size:16px;

    padding:18px 15px;

    text-align:center;

    border:none;

    vertical-align:middle;

}

.table-custom thead th:first-child{

    border-top-left-radius:15px;

}

.table-custom thead th:last-child{

    border-top-right-radius:15px;

}

.table-custom tbody td{

    padding:18px 15px;

    vertical-align:middle;

    border-color:#EFE3D8;

}

.table-custom tbody tr{

    transition:.25s;

}

.table-custom tbody tr:hover{

    background:#FCF8F4;

}