/* GENERAL */

body {font-family: Roboto, sans-serif; color: #000; font-size: 18px; line-height: 1.3em;}
.container {max-width: 1280px; padding: 0 20px; }
a {transition: all .25s ease;}
.orange-btn {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    min-height: 50px; font-size: 17px; color: #fff; text-decoration: none; width: 240px;
    padding: 0 10px; background: #fc8662; font-weight: 500;
}
.orange-btn:hover {color: #1a1e30;box-shadow: inset 0px 0px 0px 3px #d4d4d4;background: #fff;}
.section {padding: 80px 0 80px;}
.hidden {display: none !important;}
.mt-20 {margin-top: 20px !important;}
.mt-40 {margin-top: 40px !important;}

@media (max-width: 1200px){
    .container {max-width: 960px;}
}
@media (max-width: 992px){
    .container {max-width: 720px;}
    .section {padding: 60px 0 60px;}
}
@media (max-width: 768px){
    .container {max-width: 540px;}
    .orange-btn {min-height: 48px; width: 235px;}
    .section {padding: 50px 0 60px;}
    .section {padding: 70px 0 60px;}
}
@media (max-width: 576px) {
    .container {max-width: 343px;}
}

/* MOB MENU */

#mob-menu {display: none; position: fixed; width: 100%; height: 100%; background: rgba(255, 255, 255, 1); left: 0; top: 0;z-index: 200;}
#mob-menu .container {height: 100%;}
#mob-menu .menu-wrap {height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;}
#mob-menu .menu {text-align: center;}
#mob-menu .menu li {display: block;padding-top: 15px;padding-bottom: 15px;}
#mob-menu .menu li a {font-size: 23px;}
#mob-menu .mob-menu-close {margin-top: 14px;position: absolute; cursor: pointer;}

/* FIXED MENU */

#fixed-menu {display: none; position: fixed; z-index: 100; top: 0; background: #E9E9E9; width: 100%;}
#fixed-menu .menu-wrap {display: flex; justify-content: space-between;}
#fixed-menu .phone a {font-size: 33px; color: #d13100; font-weight: 900; text-decoration: none;}
#fixed-menu .phone i {font-size: 39px; position: absolute; margin-left: -53px; color: gray; opacity: 0.4; margin-top: -6px;}

@media (max-width: 1200px){
    #fixed-menu .phone a {font-size: 30px;}
    #fixed-menu .phone i {font-size: 31px; margin-left: -45px; margin-top: -2px;}
}
@media (max-width: 992px){
    #fixed-menu .menu li a {font-size: 14px;}
    #fixed-menu .menu li {padding-right: 10px;}
    #fixed-menu .phone a {font-size: 23px;}
    #fixed-menu .phone i {font-size: 27px; margin-left: -41px; margin-top: -1px;}
}
@media (max-width: 768px){
    #fixed-menu .menu {display: none;}
    #fixed-menu .mob-menu-btn {display: block; cursor: pointer;}
}
@media (max-width: 576px) {
    #fixed-menu .phone {padding-top: 2px;}
    #fixed-menu .phone a {font-size: 22px;}
    #fixed-menu .phone i {font-size: 23px;margin-left: -36px;margin-top: 1px;}
    #fixed-menu .menu-wrap {padding: 15px 0;}
}

/* HERO SCREEN */

#main {background: #E9E9E9; background: linear-gradient(rgba(233, 233, 233, 0.95), rgba(233, 233, 233, 0.95)), url(../img/slider-bg.png) left 50% top 50% / cover no-repeat; padding: 40px 0 100px;}
.header {display: flex; justify-content: space-between; padding: 0 0 20px 0; border-bottom: 1px solid #dbdbdb;}
.header .logo {font-size: 20px; margin-bottom: 10px; color: #4b4b4d;}
.header .slogan {font-size: 30px; font-weight: 900;}
.header .address {margin-bottom: 12px; font-size: 15px; color: rgb(122, 122, 122); line-height: 1.3; text-align: right;}
.header .phone i {font-size: 58px; position: absolute; margin-left: -84px; color: gray; opacity: 0.4; margin-top: -26px;}
.header .phone a {font-size: 37px; color: #d13100; font-weight: 900; text-decoration: none;}
.header .phone a:hover {color: #E93701;}

.menu-wrap {padding: 20px 0;}
.menu {padding: 0; margin: 0;}
.menu li {list-style: none; display: inline-block; padding-right: 20px;}
.menu li a {font-size: 17px; color: #4b4b4d; text-decoration: none; border-bottom: 2px solid transparent;}
.menu li a:hover {color: #d13100; border-bottom: 2px solid #d13100;}
.mob-menu-btn {display: none;}

.slider-wrap {display: flex; margin-top: 15px; background: #FAF6F5 url('../img/slider-bg.png'); height: 430px; box-shadow: 15px 15px 35px 15px #e7e7e7;}
.slider-wrap .left {width: 50%; position: relative;}
.slider-wrap .right {width: 50%; padding: 60px 60px 60px 60px;}
.slider-wrap h1 {font-size: 45px; font-weight: 900; margin-bottom: 20px;}
.slider-wrap p {font-size: 20px; line-height: 1.5em;}
.slider-wrap .orange-btn {margin-top: 15px;}

.slick-slider .slide {width: 100%; height: 430px; object-fit: cover;}
.slick-slider .slick-prev {
    position: absolute; left: -10px; bottom: 50%; margin-bottom: -20px; z-index: 10; width: 40px; height: 40px;
    background: #cecece url('../img/slider-prev.png') center center no-repeat; background-size: 40%;
    cursor: pointer; transition: all .25s ease; border: 0; text-indent: -200px; overflow: hidden;
}
.slick-slider .slick-prev:hover {background-color: #B9B9B9;}
.slick-slider .slick-next {
    position: absolute; right: -10px; bottom: 50%; margin-bottom: -20px; z-index: 10; width: 40px; height: 40px;
    background: #cecece url('../img/slider-next.png') center center no-repeat; background-size: 40%;
    cursor: pointer; transition: all .25s ease; border: 0; text-indent: -200px; overflow: hidden;
}
.slick-slider .slick-next:hover {background-color: #B9B9B9;}

@media (max-width: 1200px){
    .header .slogan {font-size: 27px;}
    .header .right {text-align: right;}
    .header .phone a {font-size: 33px;}
    .header .address {margin-bottom: 7px; font-size: 13px; line-height: 1.3;}
    .header .phone i {font-size: 43px; margin-left: -62px; margin-top: -18px;}

    .slick-slider .slide {height: 400px;}
    .slider-wrap {height: 400px;}
    .slider-wrap .right {padding: 30px 50px 30px 50px;}
    .slider-wrap h1 {font-size: 42px;}
    .slider-wrap p {font-size: 17px;}
}
@media (max-width: 992px){
    #main {padding-bottom: 80px;}
    .header .left {max-width: 320px;}
    .header .slogan {line-height: 1.1;}
    .header .address {line-height: 1.3;}

    .slider-wrap {flex-wrap: wrap; height: auto;}
    .slider-wrap .left {width: 100%;}
    .slider-wrap .right {width: 100%;}
    .slick-slider .slide {height: 300px;}
    .slider-wrap h1 {font-size: 34px; max-width: 500px;}
}

@media (max-width: 768px){
    #main {padding-bottom: 60px;}
    .header {align-items: center;}
    .header .slogan {font-size: 20px; line-height: 1.3;}
    .header .phone a {font-size: 22px;}
    .header .address {font-size: 13px; line-height: 1.3; margin-bottom: 10px; margin-top: 10px;}
    .header .phone i {font-size: 28px; margin-left: -43px;margin-top: -4px;}

    .menu li {padding-right: 15px;}
    .menu li a { font-size: 14px; }
    .slider-wrap {margin-top: 0;}
    .slick-slider .slide {height: 250px;}
    .slider-wrap h1 {font-size: 25px; max-width: 330px;}
    .slider-wrap .right {padding: 30px 30px 30px 30px;}
    .slider-wrap p {font-size: 15px;}
}

@media (max-width: 576px) {
    .header {flex-wrap: wrap;}
    .header .right {width: 100%; margin-top: 5px; position: relative; border-top: 1px solid #dbdbdb; margin-top: 15px; padding-top: 5px;}
    .header .mob-menu-btn {display: block; position: absolute; left: 0; margin-top: 15px;}
    #main .menu-wrap {display: none;}

    .header .phone {margin-top: -2px;}
    .header .phone i {font-size: 24px;margin-left: -38px;margin-top: -2px;}
    .header .mob-menu-btn {margin-top: 22px;}
}

/* CATALOG */

#catalog {}

#catalog h2 {font-weight: 900; font-size: 34px; margin-bottom: 10px;}
#catalog .subtitle {color: rgb(122, 122, 122); max-width: 400px; margin: auto;}
#catalog .show-more {margin-top: 50px; text-align: center;}

.products-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px;}
.product-item {text-align: center;}
.product-item .title {font-size: 24px; font-weight: 500; line-height: 1.2em;}
.product-item .image {background: #F0F0F0; margin-top: 12px; padding-top: 20px; padding-bottom: 20px;}
.product-item .image img {mix-blend-mode: multiply;}
.product-item .price {background: #F0F0F0; display: flex; font-size: 16px; justify-content: center;}
.product-item .price div {background: #B9B9B9; color: #fff; padding: 5px 15px; margin: 0 1px;}
.product-item .price span {display: block; font-size: 22px;}
.product-item .params {color: #333; line-height: 1.3; font-size: 16px; margin-top: 5px;}

@media (max-width: 1200px){
    .products-list {gap: 30px;}
}
@media (max-width: 992px){
    .products-list {grid-template-columns: repeat(2, 1fr); gap: 40px;}
}
@media (max-width: 768px){
    #catalog h2 {font-size: 30px;}
    #catalog .subtitle {font-size: 17px;}
    .products-list {gap: 30px; margin-top: 40px;}
    .product-item .title {font-size: 18px;}
    .product-item .price {font-size: 14px; background: #B9B9B9;}
    .product-item .price div {padding: 1px 10px;}
    .product-item .price span {font-size: 20px;}
    .product-item .params {font-size: 14px;}
}
@media (max-width: 576px) {
    .products-list {grid-template-columns: repeat(1, 1fr); gap: 20px;}
    .product-item .price div:first-child {border-right: 1px solid #f0f0f0;}
}

/* WHY US */

#why-us {color: #fff; background: #202542;}
.advantages-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; margin-top: 50px;}
.advantages-item {display: flex; font-size: 18px; line-height: 1.3; color: #d3dbe3;}
.advantages-item .image {margin-right: 30px; min-width: 60px;}
.advantages-item .title {font-weight: 900; margin-bottom: 10px;}
.advantages-item .text {}

@media (max-width: 1200px){
    .advantages-item .image {min-width: 50px;}
}
@media (max-width: 768px){
    .advantages-grid {grid-template-columns: repeat(1, 1fr); gap: 30px; margin-top: 40px;}
    .advantages-item {font-size: 16px;}
    .advantages-item .image img {width: 80%;}
}
@media (max-width: 576px) {
    #why-us h2 {max-width: 260px; margin: auto;}
    .advantages-item .image {min-width: 40px;}
    .advantages-item .image img {width: 90%;}
}

/* GALLERY */

#gallery {}
#gallery h2 {font-weight: 900; font-size: 34px; margin-bottom: 10px;}
#gallery .subtitle {color: rgb(122, 122, 122);}
#gallery .show-more {margin-top: 50px; text-align: center;}

.gallery-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px;}
.gallery-item .image img {width: 100%; height: 240px; object-fit: cover;}
.gallery-item .image video {width: 100%; height: 240px; object-fit: cover;}
.gallery-item .image {position: relative; display: block;}
.gallery-item .image .hover-wrap {display: none; position: absolute; width: calc(100% - 20px); height: calc(100% - 20px); background: rgba(23, 24, 28, 0.4) url('../img/gallery-plus.svg') center center no-repeat; margin: 10px;}
.gallery-item .image:hover .hover-wrap {display: block;}

@media (max-width: 992px){
    .gallery-list {grid-template-columns: repeat(2, 1fr); gap: 20px;}
}

@media (max-width: 768px){
    #gallery h2 {font-size: 30px;}
    #gallery .subtitle {font-size: 17px;}
    .gallery-list {margin-top: 40px;}
}
@media (max-width: 576px) {
    .gallery-list {grid-template-columns: repeat(1, 1fr); gap: 20px;}
    .gallery-item .image img {height: 210px;}
}

/* COMPANY */

#company {background: #F0F0F0;}
#company .flex {display: flex;}
#company .about-company {width: 450px; padding-right: 40px;}
#company .about-company h3 {font-size: 30px; font-weight: 900; line-height: 1.2; color: #242a33; margin-bottom: 40px;}
#company .about-company p {color: #333; line-height: 1.7; font-size: 17px;}

#company .how-to-buy {padding-left: 60px;}
#company .how-to-buy h3 {font-size: 34px; font-weight: 900; line-height: 1.2; color: #242a33; margin-bottom: 40px;}

.how-to-item {display: flex; margin-bottom: 30px;}
.how-to-item .image {width: 60px; min-width: 60px;}
.how-to-item .image img {width: 40px;}
.how-to-item .title {font-size: 20px; font-weight: 900; line-height: 1.2; margin-bottom: 5px; color: #242a33;}
.how-to-item .text {font-size: 16px; color: #7a7a7a; line-height: 1.3;}
.how-to-list .how-to-item:last-child {margin-bottom: 0;}
.how-to-list .how-to-item:nth-child(2) .image {opacity: 0.8;}
.how-to-list .how-to-item:nth-child(3) .image {opacity: 0.8;}
.how-to-list .how-to-item:nth-child(4) .image {opacity: 0.8;}

@media (max-width: 1200px){
    #company .about-company {width: 40%; padding-right: 30px;}
    #company .how-to-buy {width: 60%; padding-left: 30px;}
}

@media (max-width: 992px){
    #company .flex {flex-wrap: wrap;}
    #company .about-company {width: 100%; padding-right: 0;}
    #company .about-company h3 {margin-bottom: 20px;}
    #company .how-to-buy {width: 100%; padding-left: 0; margin-top: 20px;}
    #company .how-to-buy h3 {font-size: 30px;}
}
@media (max-width: 768px){
    #company .about-company h3 {font-size: 25px;}
    #company .about-company p {font-size: 14px;}
    #company .how-to-buy h3 {font-size: 25px;}
    .how-to-item .title {font-size: 18px;}
    .how-to-item .text {font-size: 14px;}
    .how-to-item .image img {width: 35px;}
}


/* CONTACTS */

#contacts {background: #1a1e30;}
.map {height: 450px; position: relative;}
.map iframe {width: 70%;}
.contacts {position: absolute; width: 309px; background: #202542; right: 0; margin-top: 105px; padding: 50px 30px;}
.contacts-item {display: flex; margin-bottom: 20px;}
.contacts-item .image {width: 45px; min-width: 45px;}
.contacts-item .image img {height: 25px;}
.contacts-item .text {color: #fff; line-height: 1.2; font-size: 15px;}
.contacts-item .bold {font-size: 19px; font-weight: bold;}
.contacts-list .contacts-item:last-child {margin-bottom: 0;}

.copyright {margin-top: 30px; border-top: 1px solid #3A3E4D; padding-top: 30px; color: #fff; font-size: 15px; line-height: 1.3;}
.copyright .flex {display: flex; justify-content: space-between;}
.copyright a {color: #d8d8d8; font-size: 14px;}
.copyright a:hover {text-decoration: none;}

@media (max-width: 768px){
    .contacts {width: 265px;}
}
@media (max-width: 576px) {
    .copyright .flex {flex-wrap: wrap;}
    .privacy-policy {margin-top: 15px;}
    .map iframe {width: 100%;}
}