html,
body {
   overflow-x: hidden;
}

html,
body {
   scroll-behavior: smooth;
}

.container {
   max-width: 1120px;
   margin: 0 auto;
   padding: 0px 20px;
}

h1 {
   font-family: 'MontserratRegular';
   color: #fff;
   font-size: 40px;
   text-transform: uppercase;
   text-align: center;
   margin-top: 0;
   margin-bottom: 14px;
}

h2 {
   font-family: 'MontserratRegular';
   color: #3F3E3E;
   font-size: 30px;
   text-transform: uppercase;
}

h3 {
   font-family: 'MontserratBold';
   color: #3F3E3E;
   font-size: 14px;
   text-transform: uppercase;
}

h4 {
   font-family: 'MontserratRegular';
   color: #3F3E3E;
   font-size: 14px;
   text-transform: uppercase;
}

h5 {
   font-family: 'MontserratBold';
   color: #3F3E3E;
   font-size: 14px;
}

p {
   color: #3F3E3E;
   font-size: 14px;
   line-height: 20px;
   font-family: 'MontserratLight';
}


.bg-header {
   background: url(../img/bg-header/bg-header.jpg)no-repeat top center;
   background-size: cover;
   height: 120vh;
   width: 100%;

}

header {
   position: relative;
}

.row-header {
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
}

.logo {
   margin-top: 33px;
   margin-bottom: 15px;
}

header p {
   color: #fff;
}

.row-title {
   margin-top: 200px;
   margin-bottom: 17px;
   display: flex;
   justify-content: center;
}

.row-title h2 {
   position: relative;
   display: inline;
}

.row-title h2::before {
   content: '';
   position: absolute;
   width: 140px;
   height: 1px;
   background: #3F3E3E;
   top: 50%;
   left: -150px;
}

.row-title h2::after {
   content: '';
   position: absolute;
   width: 140px;
   height: 1px;
   background: #3F3E3E;
   top: 50%;
   right: -150px;
}


/* ********************************************** about ********************************************** */
.about h2 {
   margin-bottom: 22px;
}

.about .row-content {
   display: flex;
}

.about .row-content .item-none {
   flex: 0 1 16.666%;
}

.about .row-content .item-text {
   flex: 0 1 41.665%;
   display: flex;
   justify-content: flex-end;
}

.about .row-content .item-logo {
   flex: 0 1 41.665%;
   display: flex;
   justify-content: flex-start;

}

.about .row-content .item-logo img {
   margin-left: 33px;
}

/* ********************************************** products ********************************************** */
.products .subtitle {
   text-align: center;
}

.products .row-1 {
   margin-top: 30px;
}

.carousel {
   position: relative;
   max-width: 600px;
   overflow: hidden;
}

.carousel-images {
   display: flex;
   transition: transform 0.5s ease-in-out;
}

.carousel-images img {
   width: 100%;
   height: auto;
   display: block;
}

.carousel-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   cursor: pointer;
   padding: 10px;
   z-index: 100;
   width: 30px;
   height: 30px;
   border-radius: 20px;
   transition: 0.5s;
}

.carousel-arrow:hover {
   background: #F07903;
}

.carousel-arrow img {
   padding-top: 1px;
}

.carousel-arrow.left {
   left: 10px;
}

.carousel-arrow.right {
   right: 10px;
}

.zoom-button {
   position: absolute;
   top: 10px;
   right: 10px;
   background: rgba(0, 0, 0, 0.5);
   color: white;
   border: none;
   cursor: pointer;
   padding: 5px;
   border-radius: 12px;
   width: 20px;
   height: 20px;
   transition: 0.5s;
}

.zoom-button:hover {
   background: #F07903;
}



.modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.8);
   justify-content: center;
   align-items: center;
   z-index: 200;
}

.modal img {
   max-width: 90%;
   max-height: 90%;
}

.modal-arrow {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.5);
   color: black;
   border: none;
   cursor: pointer;
   padding: 10px;
   width: 40px;
   height: 40px;
   border-radius: 30px;
   transition: 0.5s;
}

.modal-arrow:hover {
   background: #F07903;
}

.modal-arrow img {
   padding-top: 4px;
}

.modal-arrow.left {
   left: 20px;
}

.modal-arrow.right {
   right: 20px;
}

.next {
   background: url(../img/icons/next.svg)no-repeat center;
   background-size: cover;
   width: 12px;
   height: 10px;
   display: block;
   margin-left: -1px;
}

.prev {
   background: url(../img/icons/prev.svg)no-repeat center;
   background-size: cover;
   width: 12px;
   height: 10px;
   display: block;
   margin-left: -1px;
}

.zoom {
   background: url(../img/icons/zoom.svg)no-repeat center;
   background-size: cover;
   width: 10px;
   height: 10px;
   display: block;
}


.modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   background: rgba(255, 255, 255, 0.5);
   color: black;
   border: none;
   cursor: pointer;
   padding: 5px;
   width: 30px;
   height: 30px;
   border-radius: 30px;
   font-size: 25px;
   font-family: 'MontserratRegular';
   color: #fff;
   transition: 0.5s;
}

.modal-close:hover {
   background: #F07903;
}

.modal-close span {
   background: url(../img/icons/close.svg)no-repeat center;
   background-size: cover;
   width: 14px;
   height: 14px;
   display: block;
   margin-left: 3px;
}



/* ********************************* slick ***************************************** */

.slick-track {
   display: flex;
   align-items: flex-start;
}

.slider .slider-item {
   cursor: pointer;
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
   margin-right: 5px;
}

.slider .slick-dots {
   display: flex;
   justify-content: center;
   align-items: center;
}

.slider .slick-dots li {
   list-style: none;
   margin: 0px 5px;
}

.slider .slick-dots button {
   font-size: 0px;
   height: 7px;
   width: 7px;
   border-radius: 50%;
   background: gray;
}

.slider .slick-dots .slick-active button {
   background: transparent;
   border: 1px solid gray;
}


.slider-item .row-card {
   display: flex;
   flex-direction: column;
   align-items: center;

}

.slider-item .row-card li {
   display: flex;
}

.slider-item .row-card .price {
   font-family: 'MontserratBold';
   color: #3F3E3E;
   font-size: 20px;
   text-transform: uppercase;
}

.slider-item .row-card .active-btn {
   width: 200px;
   height: 37px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #FFA244;
   color: #fff;
   font-size: 14px;
   font-family: 'MontserratLight';
   transition: 0.8s;
   margin-bottom: 40px;
}

.slider-item .row-card .active-btn:hover {
   background: #F07903;
}

.row-card h3 {
   margin-top: 25px;
   margin-bottom: 4px;
}

.row-card h4 {
   margin-bottom: 25px;
}

.row-card ul {
   margin-bottom: 25px;
}

.row-card li {
   margin-bottom: 6px;
}

.row-card li span {
   color: #3F3E3E;
   font-size: 14px;
   line-height: 20px;
   font-family: 'MontserratLight';

}

.row-card h6 {
   margin-bottom: 25px;
}

/* ********************************************** qualities ********************************************** */
.qualities h2 {
   margin-bottom: 30px;
}

.qualities .row {
   display: flex;
   padding: 0px -10px;
}

.qualities .card {
   flex: 0 1 25%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   margin: 0px 10px;
   padding: 0px 17px;
   height: 260px;
   box-shadow: 0px 0px 6px rgba(0, 0, 20, 0.2);
   gap: 10px;
   text-align: center;
}


.qualities .card .line {
   width: 45px;
   height: 1px;
   background: #FFA244;
}

/* ********************************************** video ********************************************** */


/* ********************************************** orders ********************************************** */
.orders .row {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.orders-body {
   display: flex;
   justify-content: center;
   margin-top: 30px;
}

.orders-body .item {
   flex: 0 1 43%;
}

.orders img {
   width: 100%;
   height: auto;
}


/* ********************************************** contacts ********************************************** */
.contacts {
   text-align: center;
}

.contacts .row-messenger .social {
   margin: 0px 10px;
   transition: 0.6s;
}

.contacts .row-social .social {
   margin: 0px 20px;
   transition: 0.6s;
}

.contacts .social:hover {
   opacity: 0.5;
}

.contacts .row-messenger {
   margin-bottom: 33px;
   margin-top: 33px;
}

.contacts .row-line {
   display: flex;
   justify-content: center;
}

.contacts .line {
   height: 1px;
   width: 465px;
   background: #3F3E3E;
   margin-bottom: 33px;
}

.contacts .row-social {
   display: flex;
   justify-content: center;
}

.row-btn {
   display: flex;
   justify-content: center;
}

.call-btn {
   color: #fff;
   background: #F07903;
   font-size: 14px;
   font-family: 'MontserratLight';
   display: flex;
   justify-content: center;
   align-items: center;
   width: 170px;
   height: 35px;
   padding: 0;
   margin-top: 20px;
   transition: 0.6s;
   cursor: pointer;
}

.call-btn:hover {
   opacity: 0.5;
}

/* ********************************************** footer ********************************************** */
footer {
   height: 365px;
   background: #3F3E3E;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 150px;
}

footer p {
   color: #FFA244;

}



/* ********************************************** basket ********************************************** */

.basket-icon {
   position: absolute;
   top: 30px;
   right: 50px;
   background: #fff;
   padding: 15px 15px;
   border-radius: 60px;
   box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
}

.icon-number {
   position: inherit;
   top: 29px;
   right: 31px;
   color: #F07903;
}



.cart-btn {
   border: none;
   border-radius: 8px;
   padding: 6px 12px;
   margin: 4px 3px;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.25s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   outline: none;
}

.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   display: none;
   z-index: 999;
}

#cart-modal {
   display: none;
   position: fixed;
   top: 10%;
   left: 50%;
   transform: translateX(-50%);
   background: white;
   padding: 20px;
   z-index: 999;
   width: 50%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.row-modal {
   display: flex;
   justify-content: center;
   flex-direction: column;
   align-items: center;
   max-height: 550px;
   overflow-y: auto;
}

#cart-items {
   color: #3F3E3E;
   font-size: 14px;
   line-height: 20px;
   font-family: 'MontserratLight';
}

#total-price {
   font-family: 'MontserratBold';
   color: #3F3E3E;
   font-size: 14px;
   margin-bottom: 20px;
}

#cart-modal h2 {
   text-align: center;
   margin-bottom: 20px;
   margin-top: 20px;
}

#cart-items li {
   text-align: center;
   margin-bottom: 20px;
}

.cart-btn {
   width: 32px;
   height: 32px;
   border-radius: 0px;
   box-shadow: none;
   position: relative;
   transition: 0.8s;
}

.plus {
   background: #FFA244;
}

.plus:hover {
   background: #F07903;
}

.minus:hover {
   background: #F07903;
}

.remove:hover {
   background: #6b6b6b;
}

.plus::after {
   content: '';
   position: absolute;
   height: 1px;
   width: 8px;
   background: #fff;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.plus::before {
   content: '';
   position: absolute;
   height: 8px;
   width: 1px;
   background: #fff;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.minus {
   background: #FFA244;
}

.minus::after {
   content: '';
   position: absolute;
   height: 1px;
   width: 8px;
   background: #fff;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.remove {
   background-color: #545454;
}

.remove::after {
   content: '';
   position: absolute;
   height: 1px;
   width: 8px;
   background: #fff;
   top: 50%;
   left: 37%;
   transform: rotate(45deg);
}

.remove::before {
   content: '';
   position: absolute;
   height: 1px;
   width: 8px;
   background: #fff;
   top: 50%;
   left: 37%;
   transform: rotate(-45deg);
}

.row-btn-basket {
   width: 270px;
   margin-bottom: 40px;
}

#cart-modal input {
   width: 100%;
   height: 37px;
   background: #F6F6F6;
   color: #858585;
   font-size: 14px;
   line-height: 20px;
   font-family: 'MontserratLight';
   padding-left: 10px;
   margin-bottom: -20px;
}

.row-btn-send {
   display: flex;
   margin-top: 0px;
}

.row-btn-send .send {
   height: 37px;
   background: #FFA244;
   font-size: 14px;
   line-height: 20px;
   font-family: 'MontserratLight';
   color: #fff;
   flex: 0 1 50%;
   margin-right: 3px;
}

.row-btn-send .close {
   height: 37px;
   background: #545454;
   font-size: 14px;
   line-height: 20px;
   font-family: 'MontserratLight';
   color: #fff;
   flex: 0 1 50%;
   margin-left: 3px;
}