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


body{

    font-family:Arial,sans-serif;

    background:#F8F6F2;

    color:#263238;

}


/* NAVIGATION */

nav {

    height:90px;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

   background:#ffffff;
box-shadow:0 2px 15px rgba(0,0,0,.05);

  
}

.logo {
    font-size: 24px;
    font-weight: bold;
    color: #0f172a;
}


.logo span {
    color: #c9a227;
}


.menu {
    display: flex;
    gap: 35px;
}
.burger{

    display:none;

    font-size:34px;

    cursor:pointer;

    color:#10233F;

}


.menu a {
    text-decoration: none;
    color: #0f172a;
    font-size: 16px;
     position:relative;
    transition:.35s;

}

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#C8A24C;

    transition:.35s;

}


.menu a:hover {
    color: #c9a227;
}
.menu a:hover::after{

    width:100%;

}




/* HERO SECTION */


.hero {
      position:relative;

    overflow:hidden;

  background:
    linear-gradient(
        rgba(16,35,63,.45),
        rgba(16,35,63,.45)
    ),
   url("../images/hero-house.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:white;
    border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);



}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(16,35,63,.35),
            rgba(16,35,63,.35)
        ),
       url("../images/hero-house.jpg");

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

    filter:blur(4px);

    transform:scale(1.08);

    z-index:-1;

}


.hero-content {

    max-width:750px;

    padding:40px;

    background:rgba(0,0,0,.18);

    backdrop-filter:blur(4px);

    -webkit-backdrop-filter:blur(4px);

    border-radius:20px;
    animation:fadeUp 1.2s ease;

}


.hero h1 {

    font-size:60px;
    margin-bottom:25px;

}



.hero p {

    font-size:22px;
    margin-bottom:40px;

}



.button {

    background:#c9a227;

    color:white;

    padding:16px 35px;

    border-radius:5px;

    text-decoration:none;

    font-size:18px;

}





/* SERVICES */


section {

    padding:80px 8%;

}



h2 {

    text-align:center;

    font-size:40px;

    margin-bottom:50px;

}



.services {

    display:grid;

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

    gap:25px;

}



.card {

    background:#f8fafc;
    text-align:center;

    background:white;

border-radius:20px;

padding:35px;

box-shadow:0 12px 35px rgba(0,0,0,.07);

transition:.35s;

}



.card h3 {

    margin-bottom:15px;

}



.card:hover{

transform:translateY(-10px);

box-shadow:0 20px 45px rgba(0,0,0,.12);

}





/* ABOUT */


.about {

    background:#f8fafc;

    text-align:center;

}



.about p {

    max-width:800px;

    margin:auto;

    font-size:18px;

    line-height:1.7;

}





/* CONTACT */


.contact {

    text-align:center;

}





/* FOOTER */


footer {

    background:#0f172a;

    color:white;

    text-align:center;

    padding:25px;

}
.subtitle {

    letter-spacing: 3px;
    font-size: 16px;
    color:#c9a227;
    margin-bottom:20px;

}

.why {

    background:#ffffff;

}


.why .card {

    border:1px solid #e5e7eb;

}


.why .card h3 {

    color:#0f172a;

}

.logo img {

    height: 65px;
    width: auto;

    border-radius: 15px;

    box-shadow: 0 6px 20px rgba(0,0,0,0.15);


}

.whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:65px;

height:65px;

background:white;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

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

z-index:999;

transition:.3s;

}

.whatsapp img{

width:38px;
     

}

.whatsapp:hover{

transform:scale(1.12);

}
@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.button{

    transition:.35s;

}

.button:hover{

    transform:translateY(-4px);

    background:#B68E36;

    box-shadow:0 12px 25px rgba(200,162,76,.35);

}

.card:hover{

    transform:translateY(-10px) scale(1.03);

}

.logo img{

    transition:.4s;

}

.logo img:hover{

    transform:scale(1.05);

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

.whatsapp{

    animation:pulse 2.5s infinite;

}
.language-switcher{

    display:flex;

    gap:10px;

    margin-left:30px;

}

.language-switcher button{

    background:none;

    border:none;

    cursor:pointer;

    font-size:15px;

    font-weight:bold;

    color:#10233F;

    transition:.3s;

}

.language-switcher button:hover{

    color:#C8A24C;

}

/* ==========================================
   MOBILE VERSION
========================================== */

@media (max-width: 768px) {
   .burger{

    display:none;

    width:35px;

    height:28px;

    cursor:pointer;

    position:relative;

    z-index:1001;

}

.burger span{

    position:absolute;

    left:0;

    width:100%;

    height:3px;

    background:#10233F;

    border-radius:5px;

    transition:.35s;

}

.burger span:nth-child(1){

    top:0;

}

.burger span:nth-child(2){

    top:12px;

}

.burger span:nth-child(3){

    top:24px;

}
    .burger.active span:nth-child(1){

    transform:rotate(45deg);

    top:12px;

}

.burger.active span:nth-child(2){

    opacity:0;

}

.burger.active span:nth-child(3){

    transform:rotate(-45deg);

    top:12px;

}

.menu{

    position:fixed;

    top:0;

    right:-100%;

    width:280px;

    height:100vh;

    background:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:35px;

    transition:.4s;

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

    z-index:1000;

}

.menu.active{

    right:0;

}

.menu.active{

    display:flex;

}

    nav {
        flex-direction: column;
        height: auto;
        padding: 20px;
        gap: 20px;
    }

    .logo img {
        height: 55px;
    }

    .menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 18px;
    }

    .hero {
        height: 430px;
        padding: 25px;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 25px;
    }

    .hero h1 {
        font-size: 34px;
    }

    .hero p {
        font-size: 18px;
    }

    h2 {
        font-size: 30px;
    }

    .services {
        grid-template-columns: 1fr;
    }

    .about p {
        font-size: 17px;
    }

    .button {
        display: inline-block;
        width: 100%;
        max-width: 280px;
    }

    .whatsapp {
        width: 55px;
        height: 55px;
        right: 18px;
        bottom: 18px;
    }

}

/* Телефоны */
@media (max-width: 768px) {

}

/* Планшеты */
@media (max-width: 1024px) {

}

/* Очень большие мониторы */
@media (min-width: 1400px) {

}

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

.contact{
    background:#F8F6F2;
    padding:100px 8%;
}

.contact-container{
    max-width:1200px;
    margin:auto;
    background:#fff;
    border-radius:24px;
    padding:60px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
}

.contact-title{
    text-align:center;
    margin-bottom:50px;
}

.contact-title h2{
    color:#10233F;
    font-size:42px;
    margin-bottom:15px;
}

.contact-title p{
    color:#666;
    font-size:18px;
}

#bookingForm{
    display:flex;
    flex-direction:column;
    gap:28px;
}

.row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.input-group{
    display:flex;
    flex-direction:column;
}

.input-group label{
    margin-bottom:10px;
    font-weight:600;
    color:#10233F;
}

.input-group input,
.input-group textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #ddd;

    border-radius:14px;

    font-size:16px;

    transition:.3s;

    background:white;

}

.input-group textarea{

    resize:vertical;
    min-height:170px;

}

.input-group input:focus,
.input-group textarea:focus{

    outline:none;

    border-color:#C8A24C;

    box-shadow:0 0 0 4px rgba(200,162,76,.15);

}

.guests{

    background:#fafafa;

    border-radius:18px;

    padding:30px;

}

.guests h3{

    color:#10233F;

    margin-bottom:25px;

}

.guest-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.counter{

    display:flex;

    align-items:center;

    gap:18px;

}

.counter button{

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:#10233F;

    color:white;

    cursor:pointer;

    font-size:22px;

    transition:.3s;

}

.counter button:hover{

    background:#C8A24C;

}

.counter span{

    font-size:20px;

    font-weight:bold;

    width:25px;

    text-align:center;

    color:#10233F;

}

.send-button{

    background:#C8A24C;

    color:white;

    border:none;

    padding:18px;

    border-radius:14px;

    font-size:18px;

    cursor:pointer;

    transition:.35s;

}

.send-button:hover{

    background:#B68E36;

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(200,162,76,.35);

}

/* Mobile */

@media(max-width:768px){

.row{

grid-template-columns:1fr;

}

.contact-container{

padding:30px;

}

.contact-title h2{

font-size:32px;

}

}