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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Montserrat',sans-serif;
    background:#f8f5f0;
    color:#3a322d;
    line-height:1.6;
}

.container{
    width:min(1400px,92%);
    margin:auto;
}

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

.hero{
    position:relative;

    width:100%;
    min-width:1150px;

    height:auto;

    aspect-ratio:1920/650;

    background:
        url('/assets/img/head_pc.png')
        center center
        / 100% auto
        no-repeat;

    display:flex;
    align-items:center;
}

.hero::before{
    content:'';
    position:absolute;
    inset:0;

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

    z-index:1;
}

.hero-content{
    position:relative;
    z-index:2;

    width:100%;
    max-width:900px;

    margin:auto;

    text-align:center;
}

.hero-subtitle{
    display:block;

    color:#b79e86;

    text-transform:uppercase;
    letter-spacing:3px;

    font-size:.9rem;
    font-weight:600;

    margin-bottom:15px;
}

.hero h1{
    font-family:'Amatic SC',sans-serif;

    font-size:5rem;
    line-height:1;

    color:#5f4a3f;

    margin-bottom:20px;
}

.hero-btn{
    display:inline-block;

    background:#d9cab7;
    color:#3a322d;

    text-decoration:none;

    padding:16px 34px;

    border-radius:30px;

    font-weight:600;

    transition:.3s;
}

.hero-logo{
    width:120px;
    height:auto;

    display:block;
    margin:0 auto 25px;
}


.hero-master{
    font-size:1.3rem;
    letter-spacing:4px;

    color:#b79e86;

    margin-bottom:15px;
}

.hero-divider{
    color:#b79e86;

    font-size:1.2rem;

    margin-bottom:15px;
}

.hero-slogan{
    font-size:1.15rem;

    color:#5f4a3f;

    margin-bottom:35px;
}

.hero-btn:hover{
    background:#ccb89f;
}


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

.services{
    padding:90px 0;
}

.services h2{
    text-align:center;
    font-family:'Amatic SC',sans-serif;
    font-size:4rem;
    margin-bottom:50px;
}

/* Лента карточек */

.cards{
    display:flex;
    flex-wrap:nowrap;
    gap:30px;

    overflow-x:auto;
    overflow-y:hidden;

    padding-bottom:15px;

    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}

.cards::-webkit-scrollbar{
    height:8px;
}

.cards::-webkit-scrollbar-thumb{
    background:#d9cab7;
    border-radius:20px;
}

.cards::-webkit-scrollbar-track{
    background:transparent;
}

/* Карточка */

.card{
    flex:0 0 380px;

    background:#fff;
    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.3s;
}

.card:hover{
    transform:translateY(-5px);
}

.card-img-wrapper{
    height:320px;
    overflow:hidden;
}

.card img{
    width:100%;
    height:100%;

    object-fit:cover;
    display:block;
}

.card h3{
    font-family:'Amatic SC',sans-serif;

    font-size:2.3rem;

    padding:20px 20px 10px;
}

.card p{
    padding:0 20px 25px;

    color:#6e645e;
}

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

.contacts{
    background:#efe7dc;
    padding:90px 0;
    text-align:center;
}

.contacts h2{
    font-family:'Amatic SC',sans-serif;
    font-size:4rem;

    margin-bottom:15px;
}

.contacts p{
    max-width:600px;
    margin:0 auto 30px;
}

.contact-btn{
    display:inline-block;

    background:#3a322d;
    color:#fff;

    text-decoration:none;

    padding:16px 34px;

    border-radius:30px;
}

.contact-btn:hover{
    background:#241f1c;
}

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

footer{
    text-align:center;

    padding:30px;

    color:#8a7f77;
}

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

@media(max-width:850px){

    .hero{
        min-width:0;
        min-height:auto;
        aspect-ratio:1/1;

        background:
            url('/assets/img/head_mobile.png')
            center center
            / contain
            no-repeat;

        background-color:#f8f5f0;
        align-items:flex-start;
        position:relative;
    }
	
	.hero .container{
		position:relative;
		width:100%;
		height:100%;
	}

    .hero::before{
        display:none;
    }

    .container{
        width:100%;
        position:relative;
    }

    .hero-content{
    position:absolute;
    top:20px;
    right:20px;

    margin:0;
    width:auto;

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;
}

    .hero-logo{
        width:66px;
        height:auto;
        display:block;
        margin:0 0 6px 0;
    }

    .hero h1{
        font-family:'Amatic SC',sans-serif;
        font-size:2.8rem;
        line-height:.95;
        color:#5f4a3f;
        margin:0;
    }

    .hero-btn,
    .hero-master,
    .hero-divider,
    .hero-slogan,
    .hero-desktop-text{
        display:none;
    }

        .cards{
    flex-wrap:nowrap;

    justify-content:flex-start;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-snap-type:x mandatory;

    padding:0 20px 10px;
}

.card{
    flex:0 0 85%;
    width:auto;

    scroll-snap-align:center;
}


    .card-img-wrapper{
        height:280px;
    }

    .services{
        padding:60px 0;
    }

    .contacts{
        padding:60px 0;
    }

    .services h2,
    .contacts h2{
        font-size:3rem;
    }
	
	.cards-nav{
        display:none;
    }

    .cards{
        padding:0 20px;
    }
}

.advantages,
.gallery,
.photobooks,
.steps,
.reviews{
    padding:90px 0;
}

.advantages h2,
.gallery h2,
.photobooks h2,
.steps h2,
.reviews h2{
    text-align:center;
    font-family:'Amatic SC',sans-serif;
    font-size:4rem;
    margin-bottom:50px;
}

.advantages-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.advantage{
    background:#fff;
    padding:30px;
    border-radius:20px;
    text-align:center;
}

.advantage span{
    font-size:2rem;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.gallery-grid img{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:16px;
}

.photobooks{
    background:#efe7dc;
    text-align:center;
}

.photobooks p{
    max-width:700px;
    margin:auto;
}

.steps-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.steps-grid div{
    background:#fff;
    padding:25px;
    border-radius:16px;
    text-align:center;
}

.review{
    background:#fff;
    padding:30px;
    border-radius:20px;
    margin-bottom:20px;
}

@media(max-width:850px){

    .advantages-grid,
    .gallery-grid,
    .steps-grid{
        grid-template-columns:1fr;
    }

    .advantages h2,
    .gallery h2,
    .photobooks h2,
    .steps h2,
    .reviews h2{
        font-size:3rem;
    }

    .gallery-grid img{
        height:260px;
    }
}

/* ==========================
   PRINTING
========================== */

.printing{
    padding:90px 0;
    background:#efe7dc;
}

.printing h2{
    text-align:center;
    font-family:'Amatic SC',sans-serif;
    font-size:4rem;
    margin-bottom:50px;
}

.printing-cards{
    display:flex;
    gap:25px;

    overflow-x:auto;
    overflow-y:hidden;

    padding-bottom:10px;

    scroll-snap-type:x proximity;

    -webkit-overflow-scrolling:touch;
}

.printing-cards::-webkit-scrollbar{
    height:8px;
}

.printing-cards::-webkit-scrollbar-thumb{
    background:#d9cab7;
    border-radius:20px;
}

.printing-card{
    flex:0 0 300px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.3s;

    scroll-snap-align:start;
}

.printing-card:hover{
    transform:translateY(-5px);
}

.printing-card img{
    width:100%;
    height:240px;
    object-fit:cover;
    display:block;
}

.printing-card h3{
    font-family:'Amatic SC',sans-serif;
    font-size:2rem;

    text-align:center;

    padding:20px;
}

@media(max-width:850px){

    .printing{
        padding:60px 0;
    }

    .printing h2{
        font-size:3rem;
    }

    .printing-card{
        flex:0 0 80%;
    }

    .printing-card img{
        height:220px;
    }

}

.cards-wrapper{
    position:relative;
}

.cards{
    display:flex;
    gap:30px;

    overflow-x:auto;
    overflow-y:hidden;

    scroll-behavior:smooth;

    padding:10px 60px;
}

.cards-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    background:#ffffff;
    color:#5f4a3f;

    cursor:pointer;

    font-size:24px;
    font-weight:bold;

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

    z-index:10;
}

.cards-prev{
    left:0;
}

.cards-next{
    right:0;
}

.cards-nav:hover{
    background:#d9cab7;
}

.cards-nav{
    opacity:.3;
    transition:.3s;
}

.cards-wrapper:hover .cards-nav{
    opacity:1;
}

/* ==========================
   FORMS
========================== */

.form{
    max-width:420px;
    margin:40px auto 0;
}

.form-group{
    margin-bottom:20px;
}

.form input,
.form textarea,
.form select{

    width:100%;

    padding:14px 18px;

    border:1px solid #d9cab7;
    border-radius:30px;

    background:#fff;

    font-size:16px;
    font-family:'Montserrat',sans-serif;

    color:#3a322d;

    transition:.2s;
}

.form input:focus,
.form textarea:focus,
.form select:focus{

    outline:none;

    border-color:#b79e86;

    box-shadow:0 0 0 4px rgba(183,158,134,.15);

}

.form button{

    width:100%;

    padding:16px;

    border:none;
    border-radius:30px;

    background:#d9cab7;

    color:#3a322d;

    font-size:16px;
    font-weight:600;

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

    cursor:pointer;

    transition:.25s;
}

.form button:hover{

    background:#ccb89f;

}

a{

    color:inherit;

    text-decoration:none;

}

a:hover{

    color:#5f4a3f;

}

a:visited{

    color:inherit;

}

.card-slider{
    padding:90px 0;
}

.card-slider h2{
    text-align:center;
    font-family:'Amatic SC',sans-serif;
    font-size:4rem;
    margin-bottom:50px;
}

.card-slider__wrapper{
    position:relative;
}

.card-slider__viewport{

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;
    -ms-overflow-style:none;

}

.card-slider__track{

    display:flex;
    gap:30px;

    justify-content:center;

    transition:.2s;

}

.card-slider__card{

    flex:0 0 380px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:.25s;

}

.card-slider__card:hover{
    transform:translateY(-5px);
}

.card-slider__image{
    height:320px;
    overflow:hidden;
}

.card-slider__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.card-slider__card h3{
    font-family:'Amatic SC',sans-serif;
    font-size:2.2rem;
    padding:20px 20px 10px;
}

.card-slider__card p{
    padding:0 20px 20px;
    color:#6e645e;
}

.card-slider__footer{
    padding:0 20px 20px;
}

.card-slider__footer a{
    display:inline-block;
    padding:12px 24px;
    border-radius:30px;
    background:#d9cab7;
    color:#3a322d;
    text-decoration:none;
}

.card-slider__button{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    cursor:pointer;

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

    font-size:24px;

    display:none;

    z-index:10;

}

.card-slider__button:hover{

    background:#d9cab7;

}

.card-slider__button--prev{

    left:-24px;

}

.card-slider__button--next{

    right:-24px;

}

@media(max-width:850px){

    .card-slider{

        padding:60px 0;

    }

    .card-slider h2{

        font-size:3rem;

    }

    .card-slider__viewport{

        overflow-x:auto;

        overflow-y:hidden;

        scroll-behavior:smooth;

        -webkit-overflow-scrolling:touch;

    }

    .card-slider__viewport::-webkit-scrollbar{

        display:none;

    }

    .card-slider__track{

        justify-content:flex-start;

        padding:0 20px;

    }

    .card-slider__card{

        flex:0 0 85%;

    }

    .card-slider__image{

        height:260px;

    }

    .card-slider__button{

        display:none !important;

    }

}