/* ==========================
   Cattleya Eksklusif Kost
   style.css
========================== */

:root{
    --hijau:#167A57;
    --emas:#B08D3C;
    --putih:#ffffff;
    --abu:#555;
    --shadow:0 5px 20px rgba(0,0,0,.08);
    --radius:15px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#fff;
    color:#333;
    line-height:1.7;
}

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

.container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

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

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    z-index:999;
}

nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 0;
}

.logo{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo img{
    height:60px;
}

.logo h2{
    font-size:24px;
    color:var(--emas);
}

.menu{
    display:flex;
}

.menu a{
    text-decoration:none;
    color:#444;
    margin-left:25px;
    font-weight:500;
    transition:.3s;
}

.menu a:hover{
    color:var(--hijau);
}

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

.hero{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;

    background:
    linear-gradient(rgba(22,122,87,.75),rgba(22,122,87,.75)),
    url("1.jpeg");

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

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

.hero p{
    font-size:20px;
    max-width:700px;
    margin:auto;
    margin-bottom:35px;
}

.btn{
    display:inline-block;
    padding:15px 35px;
    border-radius:50px;
    text-decoration:none;
    background:var(--emas);
    color:#fff;
    font-weight:600;
    transition:.3s;
}

.btn:hover{
    background:#fff;
    color:var(--hijau);
}

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

section{
    padding:90px 0;
}

.title{
    text-align:center;
    color:var(--hijau);
    font-size:36px;
    margin-bottom:50px;
}

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

.about{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.about img{
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.about p{
    font-size:17px;
    color:var(--abu);
}

/* ================= FASILITAS ================= */

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

.card{
    padding:30px;
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    text-align:center;
    transition:.3s;
}

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

.card h3{
    color:var(--hijau);
    margin-bottom:15px;
}

.card p{
    color:#666;
}

/* ================= GALLERY ================= */

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

.gallery img{
    height:240px;
    width:100%;
    object-fit:cover;
    border-radius:var(--radius);
    transition:.3s;
}

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

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

.location iframe{
    width:100%;
    height:450px;
    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

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

footer{
    background:var(--hijau);
    color:#fff;
    text-align:center;
    padding:30px;
}

/* ================= WHATSAPP ================= */

.whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    width:65px;
    height:65px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    animation:float 2s infinite;
    z-index:999;
}

.whatsapp img{
    width:35px;
    height:35px;
}

@keyframes float{

0%,100%{
    transform:translateY(0);
}

50%{
    transform:translateY(-8px);
}

}

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

@media(max-width:768px){

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

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

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

.menu{
    display:none;
}

.logo h2{
    font-size:18px;
}

.title{
    font-size:30px;
}

}

.partner-logo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin-top:40px;
}

.partner-logo img{
    max-width:160px;
    height:60px;
    object-fit:contain;
    transition:.3s;
}

.partner-logo img:hover{
    transform:scale(1.05);
}