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

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Times+New+Roman&display=swap');

/* Jika anda mempunyai font Mileast Regular */

@font-face{
    font-family:"Mileast";
    src:url("fonts/Mileast-Regular.ttf");
}

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

:root{

    --bg:#ecd5dc;
    --primary:#f1e0e4;
    --card:#f5eaed;
    --text:#000000;
    --white:#ffffff;

    --shadow:rgba(0,0,0,.08);

}

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

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

body{

    background:var(--bg);
    color:var(--text);

    font-family:"Times New Roman",serif;

    overflow-x:hidden;

}

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

h1,
h2,
h3,
.logo{

    font-family:"Mileast",serif;
    letter-spacing:2px;

}

p,
li,
a{

    font-family:"Times New Roman",serif;

}

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

header{

    position:fixed;

    width:100%;

    top:0;

    background:rgba(245,234,237,.85);

    backdrop-filter:blur(15px);

    box-shadow:0 8px 20px var(--shadow);

    z-index:999;

}

.navbar{

    width:90%;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

}

.logo{

    font-size:30px;

    color:#7b6469;

}

.nav-links{
    list-style: none;
    display: flex;
    gap: 35px;
    margin: 0;
    padding: 0;
}


.nav-links a{
    text-decoration: none;
    color: #000;
    font-family: "Times New Roman", serif;
    font-size: 18px;
    transition: 0.3s;
}

.nav-links a:hover{

    color:#a98692;

}

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

.hero{

    width:90%;

    margin:140px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.hero h1{

    font-size:70px;

    color:#7b6469;

}

.hero h2{

    font-size:55px;

    margin:10px 0;

}

.hero p{

    font-size:22px;

    margin:30px 0;

}

.hero img{

    width: 450px;
    height: 350px;
    border-radius: 25px;
    margin: auto;
}

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

.btn{

    display:inline-block;

    padding:15px 40px;

    border-radius:50px;

    background:#d7b8c2;

    color:black;

    transition:.4s;

}

.btn:hover{

    background:#c8a2ae;

    transform:translateY(-5px);

}

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

section{

    padding:90px 10%;

}

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:50px;

    color:#7b6469;

}

.section-title h2::after{

    content:"";

    display:block;

    width:90px;

    height:4px;

    background:#c8a2ae;

    margin:12px auto;

    border-radius:50px;

}

/*==========================================
        CARD
==========================================*/

.card{

    background:var(--card);

    border-radius:30px;

    overflow:hidden;

    box-shadow:0 10px 25px var(--shadow);

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

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

}

.card img{

    height:230px;

    object-fit:cover;

}

.card h3{

    padding:20px;

    color:#7b6469;

}

.card p{

    padding:0 20px 25px;

}

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

.about-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

    align-items:center;

}

.about img{

    width: 300px;
    height:350px;
    border-radius: 25px;
    margin: auto;

}

/*==========================================
        SKILLS
==========================================*/

.progress{

    background:#e6cfd5;

    border-radius:30px;

    overflow:hidden;

}

.progress div{

    background:#b38b97;

    color:white;

    padding:12px;

    border-radius:30px;

}

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

.contact-box{

    background:var(--card);

    border-radius:25px;

    padding:35px;

    box-shadow:0 10px 25px var(--shadow);

    transition:.4s;
    
    margin-top:10px;
    font-size:16px;
    font-weight:500;


}

.contact-box:hover{

    transform:translateY(-10px);
     color:#000000;

}

.contact-box i{

    color:#b38b97;

    font-size:40px;

    margin-bottom:15px;

}

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

footer{

    background:#d7b8c2;

    color:black;

    text-align:center;

    padding:30px;

}

/*==========================================
        BACK TO TOP
==========================================*/

#topBtn{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:#d7b8c2;

    cursor:pointer;

    color:black;

}

/*==========================================
        BACKGROUND BLOBS
==========================================*/

body::before{

    content:"";

    position:fixed;

    width:350px;

    height:350px;

    background:#f5eaed;

    border-radius:50%;

    top:-120px;

    left:-120px;

    filter:blur(120px);

    z-index:-1;

}

body::after{

    content:"";

    position:fixed;

    width:350px;

    height:350px;

    background:#f1e0e4;

    border-radius:50%;

    right:-100px;

    bottom:-120px;

    filter:blur(120px);

    z-index:-1;

}

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

@media(max-width:992px){

.hero,
.about-container,
.goal-container{

grid-template-columns:1fr;

text-align:center;

}

.card-container{

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

}

.contact-container{

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

}

}

@media(max-width:768px){

.hero h1{

font-size:45px;

}

.hero h2{

font-size:35px;

}

.card-container{

grid-template-columns:1fr;

}

.contact-container{

grid-template-columns:1fr;

}

.nav-links{

display:none;

}

.menu-btn{

display:block;

}

}