/* =========================
   ОСНОВА
========================= */

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


html {
    scroll-behavior: smooth;
}


body {

    background: #E6D5C3;

    color: #3B3028;

    font-family: 'Inter', sans-serif;

    line-height: 1.7;

}




.container {

    max-width: 1100px;

    margin: auto;

    padding: 80px 30px;

}




h1,
h2,
h3 {

    font-family: 'Cormorant Garamond', serif;

    font-weight: 500;

    color: #342820;

}





/* =========================
   ВЕРХНЕЕ МЕНЮ
========================= */


header {

    position: relative;

}



.navbar {

    max-width: 1100px;

    margin: auto;

    padding: 35px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}




.logo-name {

    font-family: 'Cormorant Garamond', serif;

    font-size: 32px;

    letter-spacing: 5px;

    color: #342820;

}



.logo-sub {

    margin-top: 8px;

    font-size: 11px;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #806653;

}




.menu {

    display: flex;

    list-style: none;

    gap: 40px;

}



.menu a {

    text-decoration: none;

    color: #514238;

    font-size: 14px;

    letter-spacing: 1px;

    transition: .3s;

}



.menu a:hover {

    color: #79563D;

}





/* =========================
   ПЕРВЫЙ ЭКРАН
========================= */


.hero {

    min-height: 90vh;

    display: flex;

    align-items: center;

}



.hero-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 70px;

}



.hero-text {

    max-width: 600px;

}



.small-title {

    text-transform: uppercase;

    letter-spacing: 4px;

    font-size: 12px;

    color: #806653;

    margin-bottom: 25px;

}




h1 {

    font-size: 90px;

    line-height: 1;

    margin-bottom: 30px;

}




.intro {

    font-size: 21px;

    color: #514238;

    margin-bottom: 25px;

}




.location {

    color: #745943;

    margin-bottom: 35px;

}





/* =========================
   КНОПКИ
========================= */


.button {

    display: inline-block;

    background: #79563D;

    color: white;

    padding: 16px 38px;

    border-radius: 50px;

    text-decoration: none;

    transition: .3s;

    font-size: 15px;

}



.button:hover {

    background: #5F4431;

}





/* =========================
   ФОТО
========================= */


.hero-photo img {

    width: 350px;

    height: 430px;

    object-fit: cover;

    border-radius: 180px 180px 35px 35px;

    box-shadow:

    0 20px 50px rgba(70,40,20,0.18);

}





/* =========================
   ЗАГОЛОВКИ
========================= */


h2 {

    font-size: 58px;

    margin-bottom: 35px;

}





/* =========================
   БЛОКИ
========================= */


.box {

    background: #F7EFE6;

    padding: 45px;

    border-radius: 30px;

    font-size: 18px;

    box-shadow:

    0 10px 30px rgba(70,40,20,.08);

}



.box p {

    margin-bottom: 20px;

}



.box p:last-child {

    margin-bottom: 0;

}





/* =========================
   СЕКЦИЯ С ФОНОМ
========================= */


.soft {

    background: #DCC5AE;

}







/* =========================
   КАРТОЧКИ
========================= */


.cards {

    display: grid;

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

    gap: 25px;

}



.card {

    background: #F7EFE6;

    padding: 35px;

    border-radius: 30px;

    transition: .3s;

}



.card:hover {

    transform: translateY(-7px);

}



.card h3 {

    font-size: 32px;

    margin-bottom: 15px;

}



.card p {

    color: #5B4A3C;

}







/* =========================
   ФОРМАТ ВСТРЕЧ
========================= */


.format {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 30px;

}



.format div {

    background: #F7EFE6;

    padding: 35px;

    border-radius: 30px;

}



.format h3 {

    font-size: 32px;

    margin-bottom: 10px;

}






/* =========================
   КОНТАКТЫ
========================= */


.contact {

    text-align: center;

    background: #D8BFA4;

    border-radius: 40px;

}




.phone {

    margin: 40px 0;

}



.phone a {

    font-family: 'Cormorant Garamond', serif;

    font-size: 50px;

    color: #68462F;

    text-decoration: none;

}



.phone a:hover {

    opacity: .7;

}




.contact-info {

    color: #604C3C;

    font-size: 18px;

}





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


footer {

    text-align: center;

    padding: 40px 20px;

    color: #725B48;

    font-size: 14px;

}





/* =========================
   МОБИЛЬНАЯ ВЕРСИЯ
========================= */


@media(max-width:800px){


.navbar {

    flex-direction: column;

    gap: 30px;

}



.menu {

    gap: 20px;

    flex-wrap: wrap;

    justify-content: center;

}



.logo {

    text-align: center;

}



.hero-inner {

    flex-direction: column;

    text-align: center;

}



h1 {

    font-size: 60px;

}



h2 {

    font-size: 42px;

}



.hero-photo img {

    width: 280px;

    height: 350px;

}



.cards {

    grid-template-columns: 1fr;

}



.format {

    grid-template-columns: 1fr;

}



.phone a {

    font-size: 36px;

}



}
/* МОБИЛЬНАЯ ВЕРСИЯ */

@media (max-width: 768px) {


body {
    overflow-x: hidden;
}


.navbar {

    padding: 25px 20px;

}


.logo-name {

    font-size: 26px;

}


.menu {

    flex-direction: column;

    align-items:center;

    gap:15px;

}



.hero {

    min-height:auto;

}


.hero-inner {

    flex-direction:column;

    text-align:center;

}



h1 {

    font-size:55px;

}



.intro {

    font-size:18px;

}



.hero-photo img {

    width:260px;

    height:320px;

}



h2 {

    font-size:42px;

}



.box {

    padding:30px 20px;

}



.cards {

    grid-template-columns:1fr;

}



.card {

    padding:25px;

}



.phone a {

    font-size:32px;

}


.button {

    padding:14px 25px;

}



}