/* RESET */
html {
    scroll-behavior: smooth;
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Georgia, serif;
    background:#166f69;
    overflow-x:hidden;
}

/* HEADER */

header{
    width:100%;
    height:85px;

    background:#d85724;

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

    padding:0 5%;
}

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

.logo img{
    width:60px;
}

.logo h2{
    font-family : TT-Ramillas-Trl-Variable-Roman;
    color:white;
    font-size:27px;
    
}

nav{
    display:flex;
    gap:40px;
}

nav a{
    text-decoration:none;
    color:white;
    font-size:18px;
    font-weight:bold;
}

nav a:hover{
    color:#ffe08a;
}

/* HERO */

.hero{

    width:100%;
    min-height:calc(100vh - 85px);

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

    padding:0 5%;

}

.hero-text{

    width:48%;

}

.hero-text h1{
    font-family:Designer Signature;
    color:white;
    font-size:41px;
    line-height:75px;

}

.hero-text h2{

    color:white;
    font-size:45px;
    margin-top:3px;
    
}

.hero-text p{
     font-family :Book-Antiqua;
    color:rgb(255, 255, 255);
    font-size:17px;
    line-height:1,6;
    max-width: 550px;       /* Membatasi lebar teks agar patah ke bawah sebelum kena teko */
    padding-right: 40px;

    margin-top:25px;
    margin-bottom:35px;
    margin-right: auto;

}

.button{

    display:flex;
    gap:20px;

}

.button a{

    background:#d85724;

    color:white;

    text-decoration:none;

    padding:15px 35px;

    border-radius:10px;

    font-weight:bold;

    transition:.3s;

}

.button a:hover{

    background:#ff7d44;

}

.hero{
    position:relative;

    width:100%;
    min-height:calc(100vh - 85px);

    display:flex;
    align-items:center;

    padding:0 5%;

    overflow:hidden;
}

.hero-text{
    width:45%;
    position:relative;
    z-index:2;
}

.hero-bg{
    position:absolute;

    left:0%;
    bottom:-75%;

    width:104%;
    

    height:auto;

    z-index:1;
}

/* FOOTER */

footer{

    background:#784d2b;

    color:white;

    text-align:center;

    padding:15px;

}

.footer-pattern{
    width:100%;
    display:block;
}

/* 1. BUAT ANIMASI FADE IN DARI BAWAH */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px); /* Memulai dari 40px lebih bawah */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* Kembali ke posisi asli */
    }
}

/* 2. PASANG ANIMASI HANYA PADA KONTEN DI BAWAH HEADER */
.hero, footer, .footer-pattern {
    animation: fadeUp 1s ease-out forwards;
}