/*==================================================
  RASPUTIN SPA
  style.css
==================================================*/

:root{

    --bg:#14091C;
    --bg2:#1D0E27;
    --card:#241130;

    --gold:#D6B16A;
    --gold-hover:#E7C98D;

    --text:#ffffff;
    --text-light:#C8C1CC;

    --border:rgba(255,255,255,.08);

    --radius:18px;

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

    --transition:.35s ease;

    --container:1280px;

}

/*========================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);
    color:var(--text);

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

    overflow-x:hidden;

}

img{

    display:block;
    width:100%;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:min(92%,var(--container));
    margin:auto;

}

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

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    background:rgba(20,9,28,.45);

    backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.05);

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    height:52px;
    width:auto;

}

.menu{

    display:flex;

    gap:42px;

}

.menu a{

    color:white;

    font-size:15px;

    transition:var(--transition);

}

.menu a:hover{

    color:var(--gold);

}

.btn-header{

    padding:14px 28px;

    border-radius:999px;

    background:var(--gold);

    color:#14091C;

    font-weight:700;

    transition:var(--transition);

}

.btn-header:hover{

    background:var(--gold-hover);

}

/*========================*/
/* HERO */
/*========================*/

.hero{

    height:100vh;

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.hero-image{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(20,9,28,.55),

    rgba(20,9,28,.82));

}

.hero .container{

    position:relative;
    z-index:2;

}

.hero-content{

    max-width:640px;

}

.subtitle{

    display:inline-block;

    color:var(--gold);

    letter-spacing:4px;

    margin-bottom:18px;

    text-transform:uppercase;

    font-size:14px;

}

.hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:78px;

    line-height:1;

    margin-bottom:26px;

}

.hero p{

    color:var(--text-light);

    line-height:1.9;

    font-size:18px;

    max-width:520px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:42px;

}

.btn-primary{

    padding:18px 36px;

    background:var(--gold);

    color:#14091C;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

}

.btn-primary:hover{

    background:var(--gold-hover);

    transform:translateY(-3px);

}

.btn-secondary{

    padding:18px 36px;

    border:1px solid var(--gold);

    border-radius:999px;

    color:white;

    transition:var(--transition);

}

.btn-secondary:hover{

    background:var(--gold);

    color:#14091C;

}

/*========================*/
/* FEATURES */
/*========================*/

.features{

    padding:110px 0;

    background:var(--bg2);

}

.features .container{

    display:grid;

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

    gap:30px;

}

.feature{

    text-align:center;

    padding:40px 30px;

    background:var(--card);

    border-radius:var(--radius);

    border:1px solid var(--border);

    transition:var(--transition);

}

.feature:hover{

    transform:translateY(-8px);

}

.feature img{

    width:90px;

    margin:auto;

    margin-bottom:25px;

}

.feature h3{

    margin-bottom:14px;

    font-size:22px;

    font-family:'Cormorant Garamond',serif;

}

.feature p{

    color:var(--text-light);

    line-height:1.8;

}

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

.about{

    padding:130px 0;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.about-image img{

    border-radius:24px;

    box-shadow:var(--shadow);

}

.about-content span{

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

}

.about-content h2{

    font-size:54px;

    line-height:1.15;

    margin:24px 0;

    font-family:'Cormorant Garamond',serif;

}

.about-content p{

    color:var(--text-light);

    line-height:2;

    margin-bottom:30px;

}

.about-content li{

    margin-bottom:16px;

    position:relative;

    padding-left:30px;

}

.about-content li::before{

    content:"✓";

    color:var(--gold);

    position:absolute;

    left:0;

}

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

.services{

    padding:120px 0;

    background:var(--bg2);

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    color:var(--gold);

    letter-spacing:3px;

    text-transform:uppercase;

}

.section-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:56px;

    margin-top:18px;

}

.cards{

    display:grid;

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

    gap:28px;

}

.card{

    overflow:hidden;

    background:var(--card);

    border-radius:22px;

    border:1px solid var(--border);

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

}

.card img{

    aspect-ratio:4/3;

    object-fit:cover;

}

.card-body{

    padding:30px;

}

.card h3{

    font-size:30px;

    font-family:'Cormorant Garamond',serif;

    margin-bottom:16px;

}

.card p{

    color:var(--text-light);

    line-height:1.8;

}

.price{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:28px;

}

.price strong{

    color:var(--gold);

    font-size:24px;

}

/*========================*/
/* CTA */
/*========================*/

.cta{

    padding:140px 0;

    text-align:center;

}

.cta h2{

    font-size:60px;

    max-width:760px;

    margin:auto;

    margin-bottom:45px;

    font-family:'Cormorant Garamond',serif;

}

/*========================*/
/* CONTACTS */
/*========================*/

.contacts{

    padding:120px 0;

    background:var(--bg2);

    text-align:center;

}

.contacts h2{

    font-size:54px;

    margin-bottom:25px;

    font-family:'Cormorant Garamond',serif;

}

.contacts p{

    line-height:2;

    color:var(--text-light);

}

.contacts a{

    display:inline-block;

    margin-top:30px;

    color:var(--gold);

    font-size:28px;

}

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

footer{

    border-top:1px solid rgba(255,255,255,.05);

    padding:35px 0;

    text-align:center;

    color:var(--text-light);

}

/*==========================
    Scroll Animation
==========================*/

.hidden{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/*==========================
    Burger Animation
==========================*/

.burger{

    display:none;

}

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

    transform:
        rotate(45deg)
        translateY(10px);

}

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

    opacity:0;

}

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

    transform:
        rotate(-45deg)
        translateY(-10px);

}