* { padding: 0; margin: 0; box-sizing: border-box; scroll-behavior: smooth; } body { font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 140%; color: #FFF!important; overflow-x: hidden; background-color: #202020!important; } body::-webkit-scrollbar { display: none; } a { color: unset; text-decoration: none !important; } li { list-style-type: none; } img { object-fit: cover; vertical-align: middle; border-style: none; } input[type=checkbox] { visibility: hidden; } .desctop { @media(max-width:480px){ display: none!important; } } .mobile { @media(min-width: 481px){ display: none!important; } } .container { max-width: 1660px; padding: 0 20px; width: 100%; position: relative; margin: 0px auto; @media(max-width:480px){ padding: 0 12px; } } .header { position: relative; z-index: 1000; .header-wrap { @media(max-width:1024px){ display: none; } display: flex; align-items: center; justify-content: space-between; padding: 42px 0; .__address { display: flex; flex-direction: column; gap: 6px; .__item { display: flex; align-items: center; gap: 3px; } } .logo { display: flex; align-items: center; a { width: 100%; max-width: 220px; img { width:100%; } } } .__button { display: flex; align-items: center; a { background: #FFF; padding: 14px 62px; color: #202020; font-size: 12px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; font-weight: 600; } } } @media(max-width:480px){ position: fixed; top: 0; left: 0; right: 0; background: #202020; } } .header-wrap-mobile{ @media(min-width:1025px){ display: none; } display: flex; align-items: center; justify-content: space-between; .logo { max-width:100px; img { width:100%; } } } .burger-block { display: none; @media (max-width:1024px){ display: flex; width: 60px; height: 60px; padding: 16px 6px; } } #nav-icon { display: flex; width: 60px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; // box-shadow: 4px 4px 10px 0px; cursor: pointer; z-index: 1000; span { display: block; position: absolute; height: 2px; width: 100%; background: white; opacity: 1; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } } #nav-icon span:nth-child(1) { top: 2px; } #nav-icon span:nth-child(2),#nav-icon span:nth-child(3) { top: 13px; } #nav-icon span:nth-child(4) { top: 24px; } #nav-icon.open span:nth-child(1) { top: 2px; width: 0%; right: 1%; } #nav-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon.open span:nth-child(4) { top: 14px; width: 0%; right: 1%; } /* burger menu */ .burger__menu__container { position: fixed; top: 0; width: 100%; right: 0; height: 100vh; overflow: hidden; padding: 0 6px 12px; background: #202020; box-shadow: 8px 8px 20px rgb(0 0 0 / 7%); background-size: 200% 200%; transition: all .7s ease; z-index: -1; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-100vh); padding-top: 10vh; } ._open_up { transform: translateY(0); } .section-1 { position: relative; .__bckg { position: absolute; width: 100%; height: 100%; z-index: -1; img { width: 100%; height: 100%; } } .main-wrap { position: relative; display: flex; align-items: center; width: 100%; height: 100vh; max-height: 800px; z-index: 1; .__title { display: flex; flex-direction: column; align-items: center; gap:42px; h1 { color: #4C4C4C; text-align: center; font-family: Montserrat; font-size: 80px; font-style: normal; font-weight: 500; line-height: normal; letter-spacing: 1.6px; text-transform: uppercase; } .__btn { display: flex; align-items: center; a { background: #202020; padding: 14px 62px; font-size: 12px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; font-weight: 600; } } } @media(max-width:480px){ align-items: start; justify-content: center; padding-top: 32px; .__title { gap : 24px; h1 { font-size: 40px; } } } } @media(max-width:480px){ margin-top: 59px; } } .section-2 { position: relative; margin-top: 150px; @media(max-width:480px){ margin-top: 60px; } .__bckg { position: absolute; width: 100%; height: 100%; z-index: -1; img { width: 100%; height: 100%; } } .__section-wrap { display: flex; align-items: center; gap: 24px; padding: 50px 0; .__text-block{ display: flex; flex-direction: column; gap: 24px; h2 { color:#4C4C4C; font-size: 52px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 1.04px; padding-left: 12px; border-left: 8px solid #C8A655; white-space: nowrap; @media(max-width:480px){ font-size: 27px; } } .text-block-items { display: flex; flex-direction: column; gap: 25px; p { color: #4C4C4C; font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; /* 22.4px */ } } } .__image-block { width: 100%; max-width: 960px; display: flex; img { width: 100%; } } @media(max-width:480px){ flex-direction: column-reverse; } } } .section-3 { position: relative; padding: 150px 0; @media(max-width:480px){ padding: 25px 0; } .section-3-wrap { display: flex; justify-content: space-between; .__left { width: 35%; display: flex; flex-direction: column; justify-content: space-between; h3 { font-size: 52px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 1.04px; } .logo { display: flex; align-items: center; width: 100%; max-width: 230px; img { width: 100%; } } } .__right { display: flex; flex-direction: column; gap: 42px; width: 60%; .item { display: flex; align-items: center; gap: 48px; p { font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; /* 22.4px */ text-transform: capitalize; } } } @media(max-width:480px){ flex-direction: column; gap: 24px; .__left { width: 100%; h3 { font-size: 42px; text-align: center; } .logo { display: none; } } .__right { width: 100%; .item { gap: 16px; .pic svg { width: 60px; } } } } } } .section-4 { position: relative; .__bckg { position: absolute; width: 100%; height: 100%; z-index: -1; img { width: 100%; height: 100%; } } .__section-4-wrap { display: flex; align-items: center; gap: 24px; padding: 100px 0; justify-content: space-between; .areas-pictures { width: 50%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px 12px; .item { display: flex; flex-direction: column; gap: 12px; max-width: 170px; flex: 1 0 20%; img { width: 100%; height: 100%; } p { color: #C8A655; text-align: center; font-size: 18px; font-style: normal; font-weight: 600; line-height: 18px; /* 100% */ text-transform: uppercase; } } } .areas-text { width: 45%; display: flex; flex-direction: column; justify-content: space-between; gap: 72px; .text-r { display: flex; flex-direction: column; gap: 24px; h3 { color:#4C4C4C; font-size: 52px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 1.04px; padding-left: 12px; border-left: 8px solid #C8A655; } p { color: #4C4C4C; font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; max-width: 65%; } } .__btn { display: flex; align-items: center; a { background: #202020; padding: 14px 62px; font-size: 12px; text-transform: uppercase; display: flex; align-items: center; justify-content: center; font-weight: 600; } } } @media(max-width:480px){ padding: 25px 0; flex-direction: column; .areas-pictures { width: 100%; .item { flex: 1 0 35%; } } .areas-text { width: 100%; align-items: center; .text-r { h3 { font-size: 32px; } p { max-width: 100%; } } } } } } .section-header { display: flex; align-items: center; justify-content: center; h2 { text-align: center; font-size: 52px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 1.04px; } } .section-5 { position: relative; margin-top: 150px; @media(max-width:480px){ margin-top: 25px; } .section-5-wrap { display: flex; background-color: #FFF; width: 100%; max-width: 1380px; margin: 72px auto; .block-image { width: 100%; height: 100%; display: flex; max-width: 680px; img { width: 100%; height: 100%; } } .block-text { display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 0 auto; gap: 32px; h4 { color: #202020; font-size: 32px; font-style: normal; font-weight: 600; line-height: normal; letter-spacing: 0.64px; span { background-color: #202020; color: #FFF; padding: 8px 28px; } } p { color: #9E9E9E; font-size: 28px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 0.56px; } } @media(max-width:480px){ margin: 32px 0; flex-direction: column; .block-text { padding: 42px 0; h4 { text-align: center; line-height: 1.4; } } } } } .section-6 { position: relative; padding: 75px 0; .section-6-wrap { margin-top: 72px; display: flex; justify-content: center; .feedback-wrap{ display: flex; align-items: center; justify-content: space-between; gap: 12px; .item { position: relative; max-width: 330px; flex: 1 0 23%; height: 268px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 9.452px; border: 1.89px solid #FFF; padding: 52px 23px 23px 23px; .item-img{ position: absolute; left: 50%; top: -12%; transform: translateX(-50%); width: 58px; img{ width: 100%; } } .top{ display: flex; flex-direction: column; align-items: center; gap: 3px; h3 { color: #fff; text-align: center; font-size: 17.014px; font-style: normal; font-weight: 700; line-height: 140%; /* 23.819px */ } p { color: #BBB; text-align: center; font-family: Montserrat; font-size: 13.233px; font-style: normal; font-weight: 500; line-height: 140%; } } .middle{ display: flex; align-items: center; gap:7.5px; } .bottom{ display: flex; overflow-y: scroll; height: 65px; p { color: #FFF; text-align: center; font-size: 15.123px; font-style: normal; font-weight: 500; line-height: 140%; /* 21.173px */ } } } } } @media(max-width:480px){ padding: 32px 0; overflow: hidden; .section-header { h2 { font-size: 32px; } } } } .section-6-slider { min-width: 0; .feedback-slider { overflow: unset; } .item { position: relative; flex: 1 0 23%; height: 268px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-radius: 9.452px; border: 1.89px solid #FFF; padding: 52px 23px 23px 23px; .item-img{ position: absolute; left: 50%; top: -12%; transform: translateX(-50%); width: 58px; img{ width: 100%; } } .top{ display: flex; flex-direction: column; align-items: center; gap: 3px; h3 { color: #fff; text-align: center; font-size: 17.014px; font-style: normal; font-weight: 700; line-height: 140%; /* 23.819px */ } p { color: #BBB; text-align: center; font-family: Montserrat; font-size: 13.233px; font-style: normal; font-weight: 500; line-height: 140%; } } .middle{ display: flex; align-items: center; gap:7.5px; } .bottom{ display: flex; overflow-y: scroll; height: 65px; p { color: #FFF; text-align: center; font-size: 15.123px; font-style: normal; font-weight: 500; line-height: 140%; /* 21.173px */ } } } } .section-7 { position: relative; padding: 75px 0; } .gallery-block { display: flex; align-items: center; margin-top: 32px; } .gallery-slider { min-width: 0; width: 92%; display: flex; justify-content: center; .swiper-slide { .item { display: flex; flex-direction: column; width: fit-content; img { width: 100%; } } } } .swiper-button-next.gallery-button-next { color: white; } .swiper-button-prev.gallery-button-prev { color: white; } .feedback-pagination { bottom: -6%!important; } .pagination-styles { .swiper-pagination-bullet { background: #F6F6F6!important; opacity: 1!important; &.swiper-pagination-bullet-active{ background: #C8A655!important; } } } .small-gallery-pagination { bottom: 0!important; } .gallery-slider-mobile { min-width: 0; width: 100%; padding: 25px 0; .swiper-slide img { width: 100%; } } /* ----------------------------------------------- */ form{ display: flex; flex-direction: column; } .form-map{ margin-bottom: 50px !important; background: url(/wp-content/themes/storefront-child/sources/map-bckg.webp); display: flex; padding: 32px 0; h2 { color: black; font-size: 52px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 1.04px; @media(max-width:480px){ text-align: center; font-size: 36px; } } } .fdb{ display: flex; gap: 150px; } .name{ display: flex; } .form-field{ font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.2em; margin-bottom: 24px; margin-top: 42px; color: #4C4C4C; } .name{ display: flex; gap: 20px; } .required{ color: #C8A655 !important; font-style: italic !important; } .form label { font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0.02em; color: #BBBBBB; } .form input{ font-family: 'Montserrat', sans-serif; padding: 20px; font-size: 20px; background: #D9D9D9; border: none; } .form .box input{ /* width: 250px; */ height: 32px; } .form input:focus{ outline: 2px solid #C8A655; } .box{ display: flex; gap: 20px; } .message{ display: flex; } .message input { width: 100%; } #submit{ margin-top: 72px; text-align: center; align-self: center; padding: 14px 62px; background: black; color: white; font-size: 16px; font-weight: 600; } /* --------------------------------------- */ .map{ color: #4C4C4C; font-size: 16px; font-weight: 400; line-height: 29px; } .map p{font-weight: 600; padding: 24px 0;} .map a{ padding: 8px 0; color:#000000 !important; } iframe{ margin-top: 5px; width: 100%; } /* ---------------------------------------------- */ .references{ // background: #4C4C4C; font-size: 16px; font-weight: 600; line-height: 20px; letter-spacing: 0em; } .references-list{ display: flex; justify-content: space-around; color: #fff; align-items: center; padding: 30px 20px; flex-wrap: wrap; } .references-list div{ margin: 5px; } .references a{ color: #fff; } .footer-contacts{ display: flex; gap: 72px; } .contacts-flex{ display: flex; flex-direction: column; gap: 8px; } .contacts-flex div img{ margin-right: 9px; } .footer-social{ display: flex; gap: 12px; } .r2 a{ display: flex; align-items: center; justify-content: center; color:#fff; } .r2 img{ margin: 24px; } @media (max-width:680px) { .fdb { flex-direction: column; gap: 32px; } .form div{ font-size: 12px !important; } .form .box input { /* width: 145px; */ height: 2px; } .message input { /* width: 350px; */ height: 2px; } .box{ flex-direction:column; } .references-list{ flex-direction: column; } .footer-contacts{ flex-direction: column; gap: 0px; } .r2{ padding: 0% 5% !important; } } @media (max-width:480px) { .box{ flex-direction: column; gap: 0px; } .form .box input { width: 100%; height: 2px; } .message input{ /* width: 250px; */ } .r2{ padding: 0% 5% !important; } } .burger__menu__inner { .shop { width: 240px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: white; color: black; text-transform: uppercase; } .contacts { margin-top: 24px; display:flex; flex-direction: column; gap: 8px; div { display: flex; align-items: center; gap: 5px; } } } .main-wrap-off-btn { position: absolute; bottom: 5%; left: 0; z-index: 2; a { width: 234px; height: 48px; display: flex; align-items: center; justify-content: center; background: #C8A655; text-transform: uppercase; } @media(max-width:480px){ position: fixed; bottom: 0; right:0; a { width: 100%; height: 62px; } } } @media(max-width:480px){ footer { margin-bottom: 52px; } } /* Modal */ .answer-modal { max-width:820px!important; padding:0!important; border-radius: unset!important; } .modal a.close-modal { display:none!important; } .desctop-modal-wrapper { display:flex; width:100%; max-width: 820px; background: white; height:380px; } @media(min-width:481px){ .mobile-modal-wrapper { display:none!important; } } .desctop-modal-wrapper-image { display:flex; max-width: 240px; } .desctop-modal-wrapper-image img { width:100%; height:100% } .desctop-modal-wrapper-text { display:flex; flex-direction: column; justify-content: space-around; padding:42px; flex:1; } .desctop-modal-wrapper-text-top { display:flex; align-items: center; justify-content: space-between; } .desctop-modal-wrapper-text-bot { display: flex; flex-direction: column; gap:12px; padding-left:42px; border-left: 4px solid #C8A655; } .desctop-modal-wrapper-text-bot h3 { color: #B45F06; font-family: Montserrat; font-size: 42px; font-style: normal; font-weight: 300; line-height: normal; letter-spacing: 0.84px; text-transform: uppercase; white-space: nowrap; } .desctop-modal-wrapper-text-bot p { color: #353535; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: 0.36px; } .mobile-modal-wrapper { width:100%; max-width:380px; height: 440px; padding: 42px 24px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .mobile-modal-wrapper-button { width: 100%; height: 54px; display: flex; align-items: center; justify-content: center; color:white; background: black; font-size: 16px; font-style: normal; font-weight: 600; line-height: normal; text-transform: uppercase; } @media(max-width:480px){ .desctop-modal-wrapper{ display:none; } .desctop-modal-wrapper-text-bot { padding-left: 12px; } }