*{margin:0;padding:0;box-sizing:border-box}
html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}
html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{font-family:Pretendard,sans-serif;background:#f8f6f1;color:#222;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}

/* NAV */
nav{
position:fixed;top:0;left:0;width:100%;height:90px;
display:flex;justify-content:space-between;align-items:center;
padding:0 70px;z-index:999;
background:rgba(15,20,20,.18);
backdrop-filter:blur(18px);
transition:.35s;
}

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

.logo img{
    height:58px;
    width:auto;
    display:block;
}

.logo-text{
    display:flex;
    flex-direction:column;
}

.logo-text h3{
    font-family:"Cormorant Garamond",serif;
    font-size:26px;
    font-weight:700;
    color:#fff;
    line-height:1;
    margin:0;
}

.logo-text span{
    margin-top:6px;
    color:#C8A55D;
    font-size:11px;
    letter-spacing:4px;
    font-weight:600;
}
nav ul{display:flex;gap:48px}
nav li{
font-size:15px;
font-weight:600;
letter-spacing:2px;
color:#fff;
transition:.3s;
}
nav li:hover{color:#d5b56a}

.btn{
padding:15px 34px;
background:#c9a447;
border-radius:50px;
font-weight:700;
color:#fff;
}

/* HERO */

.hero{
    position:relative;
    min-height:calc(100vh - 90px);
    height:calc(100vh - 90px);
    display:flex;
    align-items:center;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(7,10,10,.94) 0%,
        rgba(7,10,10,.92) 12%,
        rgba(7,10,10,.88) 24%,
        rgba(7,10,10,.78) 38%,
        rgba(7,10,10,.60) 52%,
        rgba(7,10,10,.35) 63%,
        rgba(7,10,10,.12) 72%,
        rgba(7,10,10,0) 84%
    ),
    url("../images/hero.png");

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

.hero-content{
    position:absolute;
    left:180px;
    top:52%;
    transform:translateY(-50%);
    z-index:2;

    width:700px;
    margin:0;
    padding:0;
}

.hero-content p:first-child{
color:#c8a55d;
font-size:18px;
letter-spacing:6px;
margin-bottom:25px;
}

.hero-content h1{
font-family:"Cormorant Garamond","Noto Serif KR",serif;
font-size:92px;
font-weight:600;
line-height:1.02;
letter-spacing:-2px;
color:#fff;
margin-bottom:30px;
text-shadow:0 8px 24px rgba(0,0,0,.25);
}

.hero-content h2{
font-size:24px;
font-weight:300;
line-height:1.8;
color:rgba(255,255,255,.92);
margin-bottom:55px;
}

.buttons{display:flex;gap:18px}

.primary,.secondary{
width:220px;
height:66px;
display:flex;
justify-content:center;
align-items:center;
font-size:17px;
transition:.3s;
}

.primary{
background:#0f5347;
color:#fff;
}

.primary:hover{
background:#167061;
}

.secondary{
border:1px solid rgba(255,255,255,.45);
color:#fff;
}

.secondary:hover{
background:#fff;
color:#111;
}

/* ===========================
   STATS
=========================== */

.stats{
    display:grid;
    grid-template-columns:repeat(5,1fr);

    background:#163125;
    border-top:1px solid rgba(201,164,71,.35);
}

.stat{
    padding:18px 12px;
    text-align:center;
    border-right:1px solid rgba(255,255,255,.08);
    transition:.3s;
}

.stat:last-child{
    border-right:none;
}

.stat:hover{
    background:#143126;
}

.stat h2{
    font-family:"Cormorant Garamond",serif;
    font-size:30px;
    color:#d3b06a;
    margin-bottom:2px;
    line-height:1;
    font-weight:700;
}

.stat p{
    font-size:11px;
    color:rgba(255,255,255,.82);
    letter-spacing:.3px;
}

.stats{
    border-top:1px solid rgba(201,164,71,.35);
}
/* ===========================
   ABOUT
=========================== */

.about{

    width:1200px;

    margin:120px auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.about-image img{

    width:100%;

    height:620px;

    object-fit:cover;

    border-radius:6px;

}

.about-text span{

    color:#C8A55D;

    font-size:15px;

    letter-spacing:5px;

    font-weight:600;

}

.about-text h2{

    margin:25px 0 35px;

    font-family:"Cormorant Garamond","Noto Serif KR",serif;

    font-size:58px;

    line-height:1.15;

    color:#163125;

}

.about-text p{

    font-size:18px;

    line-height:2;

    color:#666;

    margin-bottom:45px;

}

.about-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:190px;

    height:60px;

    background:#163125;

    color:white;

    transition:.3s;

}

.about-btn:hover{

    background:#215040;

}
/* ===========================
   SERVICES
=========================== */

.services{

    background:#f7f5f1;

    padding:120px 0;

}

.section-title{

    width:1200px;

    margin:0 auto 70px;

    text-align:center;

}

.section-title span{

    color:#c8a55d;

    letter-spacing:4px;

    font-size:14px;

    font-weight:600;

}

.section-title h2{

    margin-top:18px;

    font-family:"Cormorant Garamond","Noto Serif KR",serif;

    font-size:56px;

    color:#163125;

}

.service-grid{

    width:1200px;

    margin:auto;

    display:grid;

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

    gap:30px;

}

.service-card{

    background:#fff;

    padding:45px;

    border-radius:8px;

    transition:.35s;

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

    cursor:pointer;

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.service-card h3{

    font-size:28px;

    color:#163125;

    margin-bottom:20px;

    font-family:"Cormorant Garamond","Noto Serif KR",serif;

}

.service-card p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}
/* ===========================
   PORTFOLIO
=========================== */

.portfolio{
    padding:120px 0;
    background:#fff;
}

.portfolio-grid{
    width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
}

.portfolio-item{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    cursor:pointer;
}

.portfolio-item img{
    width:100%;
    height:250px;
    object-fit:cover;
    transition:.5s;
}

.portfolio-item:hover img{
    transform:scale(1.08);
}

.overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(10,20,15,.45);
    opacity:0;
    transition:.35s;
}

.portfolio-item:hover .overlay{
    opacity:1;
}

.overlay h3{
    color:#fff;
    font-size:34px;
    font-family:"Cormorant Garamond",serif;
}
.services{
    scroll-margin-top:-30px;
}
.about{
    scroll-margin-top:100px;
}

.portfolio{
    scroll-margin-top:-70px;
}
/* ===========================
   CONTACT MODAL
=========================== */

.modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.65);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:9999;
}

.modal.active{
    opacity:1;
    visibility:visible;
}

.modal-box{
    width:520px;
    max-width:90%;
    background:#fff;
    border-radius:14px;
    padding:45px;
    position:relative;
    animation:popup .35s ease;
}

@keyframes popup{

    from{
        transform:translateY(30px);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }

}

.close-btn{
    position:absolute;
    top:18px;
    right:22px;
    border:none;
    background:none;
    font-size:34px;
    cursor:pointer;
}

.modal-box span{
    color:#C8A55D;
    letter-spacing:4px;
    font-size:13px;
    font-weight:600;
}

.modal-box h2{
    margin:12px 0 15px;
    font-size:42px;
    color:#163125;
    font-family:"Cormorant Garamond","Noto Serif KR",serif;
}

.modal-box p{
    color:#666;
    margin-bottom:30px;
    line-height:1.7;
}

.modal-box form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.modal-box input,
.modal-box textarea{
    width:100%;
    padding:16px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:15px;
    outline:none;
}

.modal-box textarea{
    height:150px;
    resize:none;
}

.send-btn{
    height:58px;
    border:none;
    background:#163125;
    color:#fff;
    border-radius:8px;
    font-size:16px;
    cursor:pointer;
    transition:.3s;
}

.send-btn:hover{
    background:#24523f;
}