:root{

    --forest:#2f5d4d;
    --forest-light:#4f816c;
    --dark:#101312;
    --white:#ffffff;
    --text:#eef2ef;
    --glass:rgba(255,255,255,.08);

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Outfit',sans-serif;
    background:#555;
    color:#fff;
    overflow-x:hidden;

}



.container{

    width:min(1280px,92%);
    margin:auto;

}

/* HEADER */

header{

    position:fixed;

    left:50%;
    top:22px;

    transform:translateX(-50%);

    width:min(1320px,92%);

    z-index:1000;

    background:rgba(15,18,17,.45);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:24px;

    transition:.35s;

    box-shadow:

    0 20px 50px rgba(0,0,0,.25);

}

header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:82px;

}

.logo{

    font-size:30px;

    font-weight:700;

    letter-spacing:3px;

    color:white;

}

.logo span{

    display:block;

    font-size:12px;

    letter-spacing:8px;

    color:#8fc0a6;

    margin-top:3px;

}

nav{

    display:flex;

    gap:42px;

}

nav a{

    color:white;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.3s;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    bottom:-8px;
    left:0;

    width:0;

    height:2px;

    background:#8fc0a6;

    transition:.35s;

}

nav a:hover{

    color:#8fc0a6;

}

nav a:hover::after{

    width:100%;

}

.btn{

    padding:15px 28px;

    border-radius:40px;

    text-decoration:none;

    color:white;

    background:

    linear-gradient(
        135deg,
        var(--forest),
        var(--forest-light)
    );

    font-weight:600;

    transition:.35s;

    box-shadow:

    0 10px 35px rgba(47,93,77,.4);

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 45px rgba(47,93,77,.55);

}

/* HERO */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:

    linear-gradient(
        rgba(0,0,0,.45),
        rgba(0,0,0,.65)
    ),

    url("https://images.unsplash.com/photo-1511497584788-876760111969?q=80&w=2200");

    background-size:cover;

    background-position:center;

    animation:zoomHero 18s ease-in-out infinite alternate;

}

.overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(10,15,12,.82),

        rgba(10,15,12,.45),

        rgba(10,15,12,.12)

    );

}

.hero-content{

    position:relative;

    z-index:10;

}

.left{

    max-width:650px;

}

.subtitle{

    color:#9bc7a8;

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:14px;

    margin-bottom:22px;

    animation:fadeUp .7s .2s both;

}

.hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at 70% 25%,

        rgba(255,255,255,.08),

        transparent 40%

    );

    pointer-events:none;

}

h1{

    font-size:82px;

    line-height:.95;

    font-weight:800;

    color:white;

    letter-spacing:-3px;

    margin-bottom:28px;

    animation:fadeUp .8s .35s both;

}

p{

    font-size:21px;

    line-height:1.8;

    color:rgba(255,255,255,.82);

    margin-bottom:40px;

    animation:fadeUp .8s .5s both;

}

.buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    align-items:center;

}

.btn-main{

    background:

    linear-gradient(
        135deg,
        var(--forest),
        var(--forest-light)
    );

    color:white;

    text-decoration:none;

    padding:18px 36px;

    border-radius:45px;

    font-weight:600;

    transition:.35s;

    box-shadow:

    0 15px 40px rgba(47,93,77,.45);

}

.btn-main:hover{

    transform:translateY(-4px);

}

.btn-light{

    padding:18px 36px;

    border-radius:45px;

    text-decoration:none;

    color:white;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.12);

    transition:.35s;

}

.btn-light:hover{

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

}

.phone{

    color:white;

    text-decoration:none;

    font-weight:600;

    margin-right:20px;

    transition:.3s;

}

.phone:hover{

    color:#8fc0a6;

}


/* Анімації */

@keyframes zoomHero{

    0%{

        background-size:100%;
        background-position:center center;

    }

    50%{

        background-size:112%;
        background-position:center top;

    }

    100%{

        background-size:108%;
        background-position:center center;

    }

}

@keyframes zoomHero{

    from{

        background-size:100%;

    }

    to{

        background-size:108%;

    }

}

/* Responsive */

@media(max-width:1000px){

    nav{

        display:none;

    }

    h1{

        font-size:56px;

    }

    p{

        font-size:18px;

    }

    .buttons{

        flex-direction:column;

        align-items:flex-start;

    }

}

@media(max-width:700px){

    header{

        top:10px;

        width:95%;

    }

    header .container{

        height:70px;

    }

    .logo{

        font-size:24px;

    }

    .btn{

        padding:12px 20px;

        font-size:14px;

    }

    h1{

        font-size:44px;

    }

}


/*==========================
        ROOMS
==========================*/

.rooms{

    padding:140px 0;

    background:#f6f7f4;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--forest);

    text-transform:uppercase;

    letter-spacing:4px;

    font-weight:700;

}

.section-title h2{

    font-size:58px;

    color:#222;

    margin:18px 0;

    font-weight:800;

}

.section-title p{

    color:#666;

    max-width:650px;

    margin:auto;

}

.rooms-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

    gap:35px;

}

.room-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    height:470px;

    cursor:pointer;

    box-shadow:

    0 20px 60px rgba(0,0,0,.12);

    transition:.45s;

}

.room-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.room-overlay{

    position:absolute;

    inset:0;

    padding:35px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    background:

    linear-gradient(

        transparent,

        rgba(0,0,0,.85)

    );

}

.sale{

    position:absolute;

    top:25px;

    left:25px;

    background:#2f5d4d;

    color:white;

    padding:10px 18px;

    border-radius:40px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.room-card h3{

    color:white;

    font-size:30px;

    margin-bottom:20px;

    line-height:1.2;

}

.price{

    color:white;

    margin-bottom:28px;

    font-size:18px;

}

.price span{

    font-size:34px;

    color:#8fc0a6;

    font-weight:800;

}

.room-btn{

    width:max-content;

    padding:16px 30px;

    border-radius:40px;

    background:white;

    color:#222;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

.room-card:hover{

    transform:translateY(-12px);

}

.room-card:hover img{

    transform:scale(1.12);

}

.room-card:hover .room-btn{

    background:#2f5d4d;

    color:white;

}

.room-card:hover .sale{

    background:#1d382e;

}

@media(max-width:900px){

    .rooms{

        padding:90px 0;

    }

    .section-title h2{

        font-size:42px;

    }

    .rooms-grid{

        grid-template-columns:1fr;

    }

}



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

.about{

    position:relative;
    min-height:760px;
    overflow:hidden;
    display:flex;
    align-items:center;

}

.about-bg{

    position:absolute;
    inset:0;

    background:url("img/about.jpg") center center/cover no-repeat;

    animation:aboutZoom 18s ease-in-out infinite alternate;

    transition:1s;

}

/* затемнення */

.about-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(7,12,10,.90),
        rgba(7,12,10,.60),
        rgba(7,12,10,.30)
    );

}

/* світлова пляма */

.about::before{

    content:"";

    position:absolute;

    width:850px;
    height:850px;

    right:-260px;
    top:-220px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,255,255,.12),
        transparent 70%
    );

    animation:lightMove 12s ease-in-out infinite;

    pointer-events:none;

    z-index:2;

}

/* нижній градієнт */

.about::after{

    content:"";

    position:absolute;
    left:0;
    right:0;
    bottom:0;

    height:220px;

    background:
    linear-gradient(
        transparent,
        rgba(0,0,0,.45)
    );

    z-index:2;

}

.about-wrapper{

    position:relative;
    z-index:5;

    min-height:760px;

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

    gap:90px;

}

/* ---------- ТЕКСТ ---------- */

.about-text{

    max-width:650px;

}

.about-text span{

    display:inline-block;

    color:#8fc0a6;

    font-weight:700;

    letter-spacing:5px;

    font-size:14px;

    margin-bottom:18px;

}

.about-text h2{

    color:#fff;

    font-size:72px;

    line-height:.95;

    margin-bottom:30px;

    letter-spacing:-2px;

    transition:.4s;

}

.about:hover h2{

    transform:translateY(-4px);

}

.about-text p{

    color:rgba(255,255,255,.82);

    font-size:19px;

    line-height:1.9;

    margin-bottom:45px;

}

/* ---------- КНОПКА ---------- */

.about .btn-main{

    position:relative;

    display:inline-block;

    padding:18px 42px;

    border-radius:60px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #2f5d4d,
        #4f816c
    );

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 18px 45px rgba(47,93,77,.35);

}

.about .btn-main::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transition:.8s;

}

.about .btn-main:hover{

    transform:
        translateY(-6px)
        scale(1.04);

    box-shadow:
    0 30px 70px rgba(47,93,77,.45);

}

.about .btn-main:hover::before{

    left:170%;

}

/* ---------- КАРТКА ---------- */

.about-number{

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

}

.about-number div{

    width:360px;

    padding:55px 45px;

    border-radius:35px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.14);

    transition:.45s;

    animation:floatCard 7s ease-in-out infinite;

}

.about-number div:hover{

    transform:
        translateY(-10px);

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

    box-shadow:
    0 40px 90px rgba(0,0,0,.35);

}

.about-number h3{

    color:#8fc0a6;

    font-size:82px;

    margin-bottom:18px;

    line-height:1;

}

.about-number span{

    display:block;

    color:white;

    font-size:14px;

    letter-spacing:3px;

    margin-bottom:35px;

}

.about-number ul{

    list-style:none;

}

.about-number li{

    color:white;

    margin:14px 0;

    font-size:17px;

    opacity:.92;

}

/* ---------- Анімації ---------- */

@keyframes aboutZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.10);

    }

}

@keyframes lightMove{

    0%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(-130px,90px);

    }

    100%{

        transform:translate(0,0);

    }

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ---------- Responsive ---------- */

@media(max-width:1000px){

.about-wrapper{

    flex-direction:column;

    justify-content:center;

    text-align:center;

    padding:120px 0;

}

.about-text{

    max-width:100%;

}

.about-text h2{

    font-size:50px;

}

.about-number div{

    width:100%;

    max-width:420px;

}

}


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

.contact{

padding:150px 0;

}

.contact-title{

text-align:center;

margin-bottom:70px;

}

.contact-title span{

color:#8fc0a6;

letter-spacing:4px;

font-weight:700;

}

.contact-title h2{

font-size:58px;

margin:20px 0;

color:#fff;

}

.contact-title p{

color:rgba(255,255,255,.75);

}

.contact-grid{

display:grid;

grid-template-columns:1.3fr .7fr;

gap:35px;

}

.contact-form,
.info-card{

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

backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.08);

border-radius:35px;

padding:45px;

transition:.45s;

}

.contact-form:hover,
.info-card:hover{

transform:translateY(-10px);

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

box-shadow:

0 35px 70px rgba(0,0,0,.25);

}

.contact-form form{

display:flex;

flex-direction:column;

gap:22px;

}

.contact-form input,
.contact-form textarea{

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

border:1px solid rgba(255,255,255,.08);

height:60px;

padding:0 22px;

border-radius:18px;

color:#fff;

font-size:16px;

transition:.35s;

}

.contact-form textarea{

height:170px;

padding-top:18px;

resize:none;

}

.contact-form input:focus,
.contact-form textarea:focus{

outline:none;

border-color:#8fc0a6;

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

box-shadow:

0 0 25px rgba(143,192,166,.2);

}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

color:rgba(255,255,255,.55);

}

.contact-form button{

height:62px;

border:none;

border-radius:50px;

background:linear-gradient(
135deg,
#2f5d4d,
#4f816c);

color:#fff;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.4s;

position:relative;

overflow:hidden;

}

.contact-form button::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.4),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.contact-form button:hover{

transform:

translateY(-5px)

scale(1.03);

}

.contact-form button:hover::before{

left:170%;

}

.contact-info{

display:flex;

flex-direction:column;

gap:30px;

}

.info-card h3{

color:white;

margin-bottom:25px;

font-size:30px;

}

.info-card p{

color:rgba(255,255,255,.82);

margin:14px 0;

}

.info-card a{

display:block;

color:#8fc0a6;

text-decoration:none;

margin-top:14px;

transition:.3s;

}

.info-card a:hover{

padding-left:12px;

}

@media(max-width:1000px){

.contact-grid{

grid-template-columns:1fr;

}

}

/*==============================
        PREMIUM GALLERY
==============================*/

.gallery{

    padding:170px 0;
    overflow:hidden;
    position:relative;

}

.gallery-coverflow{

    position:relative;
    perspective:2200px;
    margin-top:70px;

}

.gallery-track{

    display:flex;
    justify-content:center;
    align-items:center;
    gap:0;
    height:620px;

}

.gallery-slide{

    width:320px;
    height:470px;
    margin:0 -60px;

    border-radius:30px;
    overflow:hidden;

    position:relative;

    transition:.8s cubic-bezier(.22,1,.36,1);

    transform:scale(.72) rotateY(45deg);

    opacity:.35;

    filter:blur(2px);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.gallery-slide img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:1s;

}

.gallery-slide::after{

    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.35)
    );

}

/* Центральне фото */

.gallery-slide.active{

    width:650px;
    height:560px;

    margin:0;

    opacity:1;

    filter:none;

    transform:
        scale(1)
        rotateY(0)
        translateZ(120px);

    z-index:10;

}

.gallery-slide.active:hover{

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

}

.gallery-slide.active:hover img{

    transform:scale(1.08);

}

/* Кнопки */

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:70px;
    height:70px;

    border:none;

    border-radius:50%;

    color:white;

    font-size:34px;

    cursor:pointer;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    transition:.35s;

    z-index:20;

}

.gallery-arrow:hover{

    background:#2f5d4d;

    transform:
        translateY(-50%)
        scale(1.15);

}

.prev{

    left:0;

}

.next{

    right:0;

}

/* Адаптив */

@media(max-width:900px){

.gallery-slide{

display:none;

}

.gallery-slide.active{

display:block;

width:100%;

max-width:500px;

height:420px;

margin:auto;

}

.gallery-arrow{

width:55px;
height:55px;

font-size:26px;

}

}