@font-face{
    font-family:"BlackerSans";
    src:url("../fonts/BlackerSansPro-Book.woff2") format("woff2");
    font-display:swap;
}

@font-face{
    font-family:"Rounds Black";
    src:url("../fonts/RoundsBlack-Regular.woff2") format("woff2");
    font-display:swap;
}

:root {
  --green-dark: #2c3e2f;
  --dark: #2c3e2f;
  --green: #446a5c;
  --gold: #efc890;
  --accent: #9d4916;
  --white: #ffffff;
}

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

body{
    margin:0;
    padding:0;

    font-family:"BlackerSans",sans-serif;

    background:var(--dark);

    color:var(--white);

}

.hero{

    min-height:100vh;

    background:
        linear-gradient(rgba(0,0,0,.45),
        rgba(0,0,0,.45)),
        url("../images/hero.jpg");

    background-size:cover;

    background-position:center;

    position:relative;

}

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

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:90px;

    padding:0 70px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(28,42,31,.92);

    backdrop-filter:blur(8px);

    z-index:1000;

}

.nav{

    display:flex;

    gap:55px;

    align-items:center;

}

.nav:first-child{

    justify-content:flex-start;

}

.nav:last-child{

    justify-content:flex-end;

}

.nav a{

    text-decoration:none;

    color:var(--gold);

    text-transform:uppercase;

    font-size:16px;

    letter-spacing:2px;

    transition:.3s;

}

.nav a:hover{

    color:var(--accent);

}

.logo{

    position:absolute;

    left:50%;
    transform:translateX(-50%);

}

.logo img{
    width:70px;
    display:block;
}


.hero-content{

    position:absolute;

    left:50%;

    top:55%;

    transform:translate(-50%,-50%);

    width:80%;

    max-width:1400px;

    text-align:center;

}

.hero-content h1{

    font-family:"Rounds Black";

    font-size:72px;

    line-height:0.95;

    color:var(--gold);

    margin-bottom:35px;

}

h1, h2, h3 {
  font-family: "Rounds Black", sans-serif;
  color: var(--gold);
  font-weight: normal;
}

.hero-content p{

    max-width:700px;

    margin:0 auto 50px;

    font-size:20px;

    line-height:1.6;

}

.btn {

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

    padding: 18px 42px;

    background-color: var(--accent);
    color: var(--white);

    text-decoration: none;
    font-family: "BlackerSans", sans-serif;
    font-size: 18px;
    letter-spacing: 0.5px;

    border: 2px solid var(--accent);
    border-radius: 6px;

    cursor: pointer;

    transition: all 0.3s ease;
}

.btn:hover{

    background:var(--gold);

    color:var(--green-dark);

}

/* ===========================
   Контакты
=========================== */

.page-hero{
    position: relative;
    margin-top: 90px;
    height: 340px;

    background:
        linear-gradient(
            to bottom,
            rgba(20, 30, 22, 0.15) 0%,
            rgba(20, 30, 22, 0.35) 30%,
            rgba(20, 30, 22, 0.65) 65%,
            #27392d 100%
        ),
        radial-gradient(
            circle at center,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,0.35) 100%
        ),
        url("../images/hero.jpg");

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

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

.page-overlay{

    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.25);

}

.page-title{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}

.page-title h1{

    font-family:"Rounds Black";

    font-size:64px;

    color:var(--gold);

    letter-spacing:2px;

}

.page-hero h1{

    color:var(--gold);

    font-size:64px;

    font-family:"Rounds Black";

    margin:0;

    z-index:2;

}

.contacts{

    padding:70px 20px 100px;

    background:var(--dark);

}

.contacts-container{

    width:100%;

    max-width:900px;

    margin:0 auto;

    text-align:center;

}

.contacts h1{

    font-family:"Rounds Black",sans-serif;

    font-size:60px;

    color:var(--gold);

    margin-bottom:30px;

}

.contacts-text{

    font-size:20px;

    line-height:1.8;

    margin-bottom:70px;

    color:#f2f2f2;

}

.contact-list{

    display:flex;

    flex-direction:column;

    gap:35px;

}

.contact-item{

    width:100%;

    max-width:700px;

    margin:0 auto;

    padding:30px;

    border:1px solid rgba(239,200,144,.25);

    border-radius:10px;

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

    transition:.3s;

}

.contact-item:hover{

    transform:translateY(-5px);

    border-color:var(--gold);

}

.contact-item h3{

    font-family:"Rounds Black",sans-serif;

    color:var(--gold);

    margin-bottom:15px;

    font-size:26px;

}

.contact-item a{

    color:var(--white);

    text-decoration:none;

    font-size:20px;

    transition:.3s;

}

.contact-item a:hover{

    color:var(--gold);

}

/* ===== Шапка на внутренних страницах ===== */

body:not(.home) .header{

    position: relative;

    top: 0;
    left: 0;
    transform: none;

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

    padding: 25px 80px;
    background: var(--dark);
    border-bottom: 1px solid rgba(239,200,144,.2);

}

.inner-page .header{

    background:rgba(28,42,31,.92);

    backdrop-filter:blur(8px);

    border-bottom:1px solid rgba(239,200,144,.15);

}

.about{
    padding-top:170px;
}

.projects{
    padding-top:170px;
}

.design{
    padding-top:170px;
}

.home .header{

    background:transparent;

    border-bottom:none;

}

.header.scrolled{

    background:rgba(28,42,31,.95);

    backdrop-filter:blur(12px);

    border-bottom:1px solid rgba(239,200,144,.18);

}

.inner-page{
    padding-top:0;
}

.nav a.active{

    color:var(--accent);

    border-bottom:2px solid var(--accent);

    padding-bottom:5px;

}

@media (max-width: 780px) {
  .header {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .nav-left,
  .nav-right {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-content {
    padding-top: 1.5rem;
  }
}

@media (max-width: 520px) {
  .hero {
    padding: 1.5rem;
  }

  .hero-content h1 {
    font-size: 2.4rem;
  }

  .nav-left,
  .nav-right {
    gap: 1rem;
  }
}