/*
Theme Name: Zefir
Author: the Forinter team
Author URI: https://forinter.net/
Description: For all questions, please contact the developers by email <a href="mailto:forinter.ukraine@gmail.com">forinter.ukraine@gmail.com</a> or go to the website <a href="https://forinter.net" target="_blank">https://forinter.net</a>
Requires PHP: 7.3
Version: 1.0
Text Domain: 
Tags: custom theme for zefir forinter.net

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

*{
    --value-2: calc(var(--coef) * 0.11vw);
    --value-3: calc(var(--coef) * 0.16vw);
    --value-4: calc(var(--coef) * 0.21vw);
    --value-5: calc(var(--coef) * 0.26vw);
    --value-6: calc(var(--coef) * 0.31vw);
    --value-7: calc(var(--coef) * 0.37vw);
    --value-8: calc(var(--coef) * 0.42vw);
    --value-9: calc(var(--coef) * 0.47vw);
    --value-10: calc(var(--coef) * 0.52vw);
    --value-16: calc(var(--coef) * 0.83vw);
    --value-20: calc(var(--coef) * 1.04vw);
    --value-30: calc(var(--coef) * 1.56vw);
    --value-40: calc(var(--coef) * 2.09vw);
    --value-50: calc(var(--coef) * 2.61vw);
    --value-60: calc(var(--coef) * 3.13vw);
    --value-70: calc(var(--coef) * 3.65vw);
    --value-80: calc(var(--coef) * 4.17vw);
    --value-90: calc(var(--coef) * 4.69vw);
    --value-100: calc(var(--coef) * 5.21vw);  

    --color-base: #F1D1D1;
    --color-primary: #331E2A;
    --color-secondary: #FCE4E4;
    --color-white: #FFFFFF;

    --primary-font-family: "Montserrat Alternates", sans-serif;
    --secondary-font-family: "Oranienbaum", serif;
    --default-font-size: calc(1.8 * var(--value-10));
    --default-line-height: 1.2;
    --container-width: calc(16 * var(--value-100));
    --container-width-full: calc(18.4 * var(--value-100));
    --coef: 1;
    font-optical-sizing: auto;
}

:root {
    scroll-behavior: initial;
}

body{
    margin:0;
    -webkit-tap-highlight-color:  transparent;  
    background-color: var(--color-base);
    font-size: var(--default-font-size);
    font-family: var(--primary-font-family);
    line-height: var(--default-line-height);
    font-weight: 400;
    color: var(--color-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    overflow-anchor: none;
}

body.active{
    overflow: hidden;
}

p{
    margin: 0 0 var(--value-20);
}

p:last-child{
    margin-bottom: 0;
}

body.active{
    overflow: hidden;
}

.grecaptcha-badge {
    visibility: hidden;
}

img{
    max-width:100%;
    height:auto;
}

.d-grid{
    display: grid;
    grid-gap: var(--value-20);
    grid-auto-rows: min-content;
}

.flex-column{
    flex-direction: column;
}

.d-flex{
    display: flex;
    gap: var(--value-20);
}

.flex-column{
    flex-direction: column;
}

.text-center{
    text-align: center;
}

.align-end{
    align-items: flex-end;
}

.align-start{
    align-items: flex-start;
}

.align-center{
    align-items: center;
}

.justify-end{
    justify-content: flex-end;
}

.justify-start{
    justify-content: flex-start;
}

.justify-center{
    justify-content: center;
}

.justify-around{
    justify-content: space-around;
}

.justify-between{
    justify-content: space-between;
}

.container{
    padding:0 var(--value-40);
    max-width: var(--container-width);
    margin: 0 auto;
    width: 100%;
}

.container.full{
    max-width: var(--container-width-full);
}

section{
    padding: var(--value-80) 0;
}

section:first-child{
    padding-top: calc(4.4 * var(--value-10));
}

.rows{
    gap:var(--value-50);
    display: flex;
    flex-direction: column;
}

.title-box{
    display: flex;
    flex-direction: column;
    gap: var(--value-10);       
}

.title-box.sect-title{
    gap: var(--value-40); 
}

.title-box .title,
h1, h2, h3, h4, h5, h6{
    font-weight: 400;
    font-style: normal;
    font-family: var(--secondary-font-family);
}

.title-box .title{
    font-size: calc(2.6 * var(--value-10)); 
    margin:0;
    line-height: 1;
}

.title-box.sect-title .title{
    font-size: calc(10.4 * var(--value-10)); 
    text-transform: uppercase;
    line-height: 0.87;
}

.title-box .descr{
    max-width: calc(6 * var(--value-100));
}

.title-box.text-center .descr{
    margin: 0 auto;
}

.btn{
    line-height: 1;
    padding: 0;
    border-radius: 0;
    border: none;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--secondary-font-family);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--value-10);
    background-color: var(--color-white);
    color: var(--color-primary);
    transition: .2s ease background-color, .2s ease color;
    -o-transition: .2s ease background-color, .2s ease color;
    -moz-transition: .2s ease background-color, .2s ease color;
    -webkit-transition: .2s ease background-color, .2s ease color;
}

.btn svg{
    width: calc(2.7 * var(--value-10));
    height: auto;
}

.btn svg path{
    fill: var(--color-primary);
    transition: .2s ease fill, .2s ease stroke;
    -o-transition: .2s ease fill, .2s ease stroke;
    -moz-transition: .2s ease fill, .2s ease stroke;
    -webkit-transition: .2s ease fill, .2s ease stroke;
}

.btn:hover{
    color: var(--color-white);
    background-color: var(--color-primary);
}

.btn:hover svg path{
    fill: var(--color-white);
    stroke: var(--color-white);
}

.btn.primary{
    text-transform: uppercase;
    font-size: var(--value-30);
    padding: calc(2.5 * var(--value-10));
    border-radius: calc(1.5 * var(--value-10));
    min-width: calc(2.66 * var(--value-100));
}

.btn.secondary{
    font-size: calc(3.2 * var(--value-10));
    padding: calc(1.4 * var(--value-10)) calc(2.4 * var(--value-10));
    border-radius: var(--value-20);
}

.btn.tertiary{
    font-size: var(--value-20);
    padding: calc(1.4 * var(--value-10)) calc(2.1 * var(--value-10));
    border-radius: var(--value-10);
    border: var(--value-2) solid var(--color-primary);
    background-color: transparent;
}

.btn.tertiary:hover{
    background-color: var(--color-white);
    color: var(--color-primary);
}

.btn.remove{
    padding: var(--value-16);
    border-radius: calc(1.7 * var(--value-10));
}

.btn.remove svg{
    width: var(--value-30);
}

.btn.dark{
    background-color: var(--color-primary);
    color: var(--color-white);
    border: var(--value-2) solid var(--color-primary);
}
.btn.dark:hover {
    background-color: transparent;
    color: var(--color-primary);
}

.btn.dark svg path{
    fill: var(--color-white);
    stroke: initial;
}

.btn.dark:hover svg path{
    fill: var(--color-primary);
}

header{
    padding: calc(3.6 * var(--value-10)) 0;
    position: sticky;
    top: 0;
    z-index: 9999;
}


header::before{
    content: '';
    width:100%;
    height: calc(1.76 * var(--value-100));
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #F1D1D1 65%, rgba(241, 209, 209, 0) 100%);
    z-index: -1;
}

.logo-box img{
    max-width: calc(2.25 * var(--value-100));
    height: auto;
}

header .columns{
    align-items: center;
    width: 100%;
    gap: calc(2.5 * var(--value-10));
}

header .mobile-menu{
    flex: 1;
}

header .mobile-menu .menu-wrap{
    display: flex;
    gap: var(--value-6);
    align-items: center;
}

header .menu-box{
    display: flex;
    flex: 1;
    justify-content: center;
}

header .mobile-menu .dop-menu,
header .mobile-menu .copyright,
header .mobile-menu .menu-logo-box{
    display: none;
}

footer .columns{
    gap: var(--value-6);
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: calc(9.6 * var(--value-10)) var(--value-6);
}

footer .menu-box{
    flex: 1;
    display: flex;
    justify-content: center;
}

header .menu-box ul,
footer .menu-box ul{
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: var(--value-2);
    font-size: calc(2.5 * var(--value-10));
    font-family: var(--secondary-font-family);
}

header .menu-box ul li a,
footer .menu-box ul li a{
    display: flex;
    border-radius: calc(1.4 * var(--value-10));
    padding: var(--value-7) calc(2.2 * var(--value-10));
    text-decoration: none;
    transition: .2s ease color, .2s ease background-color, .2s ease border-color;
    -o-transition: .2s ease color, .2s ease background-color, .2s ease border-color;
    -moz-transition: .2s ease color, .2s ease background-color, .2s ease border-color;
    -webkit-transition: .2s ease color, .2s ease background-color, .2s ease border-color;
}

header .menu-box ul li a:hover,
footer .menu-box ul li a:hover{
    background-color: var(--color-white);
}

header .bt-box .btn{
    font-size: calc(2.5 * var(--value-10));
}

footer .bt-box .btn{
    font-size: calc(2.2 * var(--value-10));
}

header .bt-box .btn svg,
footer .bt-box .btn svg{
    width: calc(2.1 * var(--value-10));
}

header .info-box,
footer .info-box{
    gap: var(--value-6);
}

.social{
    display: flex;
    align-items: center;
    gap: var(--value-6);
}

.social .item a,
.cart-btn,
header .menu-bt{
    width: calc(5.3 * var(--value-10));
    height: calc(5.3 * var(--value-10));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--value-20);
    transition: .2s ease border, .2s ease background-color;
    -o-transition: .2s ease border, .2s ease background-color;
    -webkit-transition: .2s ease border, .2s ease background-color;
    -moz-transition: .2s ease border, .2s ease background-color;
}

header .menu-bt{
    display: none;
    text-transform: uppercase;
    font-size: calc(1.4 * var(--value-10));
    font-family: var(--secondary-font-family);
}

header .menu-bt.active{
    background-color: var(--color-primary);
}

header .menu-bt svg{
    width:22px;
}

header .menu-bt span{
    display: block;
}

header .menu-bt .close-ico{
    display: none;
}

header .menu-bt.active span{
    display: none;
}

header .menu-bt.active .close-ico{
    display: block;
}


header .menu-bt svg path{
    stroke: var(--color-white);
    fill: var(--color-white);
}

.social .item a{
    border: 1px solid var(--color-primary);
}

.social .item a svg{
    width: auto;
    height: calc(1.8 * var(--value-10));
}

.social .item a svg path{
    fill: var(--color-primary);
    transition: .2s ease fill;
    -o-transition: .2s ease fill;
    -moz-transition: .2s ease fill;
    -webkit-transition: .2s ease fill;
}

.social .item a:hover{
    border-color: var(--color-white);
    background-color: var(--color-white);
}

.cart-btn,
header .menu-bt{
    background-color: var(--color-white);
    position: relative;
}

.cart-btn svg{
    width: var(--value-20);
}

.cart-btn svg path{
    fill: var(--color-primary);
    transition: .2s ease fill;
    -o-transition: .2s ease fill;
    -moz-transition: .2s ease fill;
    -webkit-transition: .2s ease fill;
}

.cart-btn:hover{
    background-color: var(--color-primary);
}

.cart-btn:hover svg path{
    fill: var(--color-white);
}

.cart-btn .count{
    position: absolute;
    top: 0;
    right: 0;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: var(--value-10);
    font-size: calc(1.8 * var(--value-10));
    width: var(--value-30);
    height: var(--value-30);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(50%, -50%);
    transition: .2s ease color, .2s ease background-color;
    -o-transition: .2s ease color, .2s ease background-color;
    -moz-transition: .2s ease color, .2s ease background-color;
    -webkit-transition: .2s ease color, .2s ease background-color;
}

.cart-btn:hover .count{
    background-color: var(--color-white);
    color: var(--color-primary);
}

section.main-head-sect{
    padding-top: 0;
    padding-bottom: calc(2 * var(--value-100));
}

.main-head-sect .columns,
.main-head-sect .info-block{
    gap: 0;
    align-items: flex-end;
}

.main-head-sect .info-block{
    flex: 1;
}

.main-head-sect .image-box{
    width: 100%;
    max-width: calc(7.02 * var(--value-100));
    margin-left: calc(-7.02 * var(--value-100));
    margin-right: calc(-2.5 * var(--value-10));
    margin-bottom: calc(-2 * var(--value-100));
    border: var(--value-2) solid rgb(51 30 42 / 7%);
    border-radius: calc(4.2 * var(--value-100));
    padding: var(--value-40);
    padding-bottom: var(--value-100);
    padding-right: var(--value-90);
    overflow: hidden;
}

.main-head-sect .mobile-logo-box{
    display: none;
}

.main-head-sect .image-box img{
    max-width: calc(5.78 * var(--value-100));
    position: relative;
    z-index: 1;
}

.main-head-sect .info-box{
    gap: var(--value-40);
    padding-right: var(--value-40);
    z-index: 2;
}

.main-head-sect .main-title-box{
    max-width: calc(4 * var(--value-100));
}

.main-head-sect .main-title-box .title{
    font-size: calc(5.5 * var(--value-10));
    text-transform: uppercase;
    line-height: 0.98;
}

.main-head-sect .action-title-box{
    gap: var(--value-40);
}

.main-head-sect .action-title-box .title{
    font-size: calc(1.17 * var(--value-100));
    line-height: 0.87;
}

.main-head-sect .course-rate{
    width: calc(4.29 * var(--value-100));
}

.course-rate{
    background-color: var(--color-primary);
    border-radius: var(--value-60);
    padding: var(--value-30) var(--value-20) calc(4.8 * var(--value-10));
    color: var(--color-white);
    text-align: center;
    width: calc(5.02 * var(--value-100));
    gap: calc(3.6 * var(--value-10));
}

.course-rate .btn{
    border: var(--value-2) solid var(--color-white);
}

.course-rate .btn:hover{
    background-color: transparent;
}

.course-rate .title-box .title{
    font-size: calc(6 * var(--value-10));
    text-transform: uppercase;
}

.main-head-sect .course-rate .title-box .title{
    font-size: calc(5.3 * var(--value-10));
}

.course-rate .in-course{
    flex: 1;
    gap: calc(2.6 * var(--value-10));
    text-align: left;
    max-width: calc(2.91 * var(--value-100));
    margin: 0 auto;
    justify-content: center;
}

.course-rate .in-course .item{
    gap: var(--value-10);
}

.course-rate .in-course .item .ico-box{
    width: calc(3.2 * var(--value-10));
}

.course-rate .in-course .item .ico-cont{
    flex: 1;
    padding-top: var(--value-6);
}

.course-rate .price{
    font-size: calc(5.1 * var(--value-10));
    font-weight: 400;
    font-style: normal;
    font-family: var(--secondary-font-family);
}

.course-rate .title-box .title span{
    display: block;
}

.course-rate .head-box{
    gap: calc(2.5 * var(--value-10));
}

.course-rate .course-rate-info{
    gap: calc(1.5 * var(--value-10));
    align-items: center;
}

.type-bage{
    font-size: calc(1.4 * var(--value-10));
    padding: var(--value-10) var(--value-20);
    border: 1px solid;
    border-color: var(--color-primary);
    border-radius: calc(3.6 * var(--value-10));
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.course-rate .type-bage{
    font-size: calc(1.7 * var(--value-10));
    padding: var(--value-8) calc(1.2 * var(--value-10));
    border-color: var(--color-white);
    border-radius: var(--value-8);
}

.course-rate .course-info .name{
    font-size: calc(2.1 * var(--value-10));
}

.course-rate.white{
    background-color: var(--color-white);
    color: var(--color-primary);
}

.course-rate.white .btn{
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.course-rate.white .btn svg path{
    fill: var(--color-white);
}

.course-rate.white .btn:hover{
    background-color: transparent;
    color: var(--color-primary);
}
.course-rate.white .btn:hover svg path{
    fill: var(--color-primary);
}

.course-rate.white .type-bage{
    border-color: var(--color-primary);
}

.triggers-list{
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--value-30);
    counter-reset: item;
}

.triggers-list .item{
    text-align: center;
    counter-increment: item;
    border: var(--value-2) solid rgb(51 30 42 / 28%);
    border-radius: calc(4.2 * var(--value-100));
    padding: var(--value-90) var(--value-30);
    font-size:calc(1.4 * var(--value-10));
}

.triggers-list .item::before {
    content: counter(item, decimal-leading-zero) ".";
    line-height: 1;
    font-family: var(--secondary-font-family);
    font-size:calc(1.78 * var(--value-100));
}

.triggers-list .item .title-box .title{
    font-size: calc(4.8 * var(--value-10));
    text-transform: uppercase;
}

.courses-list{
    gap: calc(1.12 * var(--value-100));
    max-width: calc(13.68 * var(--value-100));
    margin: 0 auto;
}

.course-item{
    border-radius: calc(8.51 * var(--value-100));
    border: var(--value-2) solid rgb(51 30 42 / 28%);
    padding: calc(1.88 * var(--value-100)) calc(1.36 * var(--value-100)) calc(1.15 * var(--value-100));
    align-items: center;
    gap: var(--value-70);
}

.course-item .course-head{
    align-items: center;
    gap: var(--value-30);
    text-align: center;
}

.course-item .course-head .title-box .title,
.course-item .course-faq .title-box .title{
    font-size: calc(9.3 * var(--value-10));
    text-transform: uppercase;
}

.course-item .course-head .type-bage{
    font-size: calc(4.2 * var(--value-10));
    padding: calc(1.3 * var(--value-10)) calc(2.6 * var(--value-10));
    border-radius: var(--value-16);
}

.course-item .course-head .descr{
    font-size: calc(2.2 * var(--value-10));
    max-width: calc(9 * var(--value-100));
}

.course-item .faq-list{
    width: calc(8.71 * var(--value-100));
}

.course-item .course-logo-box{
    justify-content: center;
}

.course-item .course-logo-box img{
    max-width: calc(2 * var(--value-100));
}

.course-item .course-description{
    max-width: calc(8.4 * var(--value-100));
}

.faq-list{
    gap: var(--value-5);
}

.faq-list .item{
    border-radius: var(--value-20);
    border: var(--value-2) solid rgb(51 30 42 / 4%);
    gap: 0;
}

.faq-list .item .ask{
    font-family: var(--secondary-font-family);
    line-height: 1;
    font-size: var(--value-30);
    font-weight: 400;
    gap: var(--value-40);
    padding: var(--value-20);
}

.faq-list .item .ask .ask-content{
    flex: 1;
}

.course-item .faq-list{
    counter-reset: item;
}

.course-item .faq-list .item{
    counter-increment: item;
}

.course-item .faq-list .item .ask::before{
    content: counter(item, decimal-leading-zero) ".";
    position: relative;
    top: var(--value-2);
    min-width: calc(3.6 * var(--value-10));
}

.course-item .course-info{
    max-width: calc(7.93 * var(--value-100));
    gap: var(--value-30);
    font-size: var(--value-20);
}

.course-item .course-info .info-item .ico-box{
    background-color: var(--color-primary);
    border-radius: var(--value-20);
    width: calc(5.3 * var(--value-10));
    height: calc(5.3 * var(--value-10));
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.course-item .course-info .info-item .ico-box img{
    width: calc(2.8 * var(--value-10));
}

.course-item .course-info .info-item .info-content{
    flex: 1;
    padding-top: var(--value-4);
}

.faq-list .item .answer{
    margin-top: calc(-0.4 * var(--value-10));
    padding: var(--value-20);
    padding-top: 0;
    padding-right: var(--value-30);
    display: none;
    font-size: var(--value-16);
}

.faq-list .item .toggle-indicator{
    width: calc(1.5 * var(--value-10));
}

.faq-list .item .toggle-indicator img{
    width: 100%;
    transition: .2s ease transform;
    -o-transition: .2s ease transform;
    -moz-transition: .2s ease transform;
    -webkit-transition: .2s ease transform;
}

.faq-list .item.active .toggle-indicator img{
    transform: rotate(180deg);
}

.toggle-activator{
    cursor: pointer;
}

.faq-sect .title-box.sect-title .descr{
    max-width: calc(7.8 * var(--value-100));
}

.faq-sect .faq-list .item .ask {
    font-size: var(--value-40);
    padding: calc(3.8 * var(--value-10)) var(--value-50);
}

.faq-sect .faq-list .item .toggle-indicator {
    width: calc(2.5 * var(--value-10));
}

.faq-sect .faq-list {
    gap: var(--value-9);
}

.faq-sect .faq-list .item {
    border-radius: calc(3.5 * var(--value-10));
    border: var(--value-2) solid rgb(51 30 42 / 8%);
}

.faq-sect .faq-list .item .answer {
    margin-top: calc(-2 * var(--value-10));
    padding: calc(3.8 * var(--value-10)) var(--value-50);
    padding-top: 0;
    max-width: calc(11.28 * var(--value-100));
    font-size: calc(1.4 * var(--value-10));
}

footer{
    padding-bottom: calc(6.4 * var(--value-10));
    margin-top: var(--value-90);
}

footer .logo-box img{
    max-width: calc(2 * var(--value-100));
}

footer .rows{
    align-items: center;
    gap: calc(7.5 * var(--value-10));
    width: 100%;
}

footer .copyright{
    max-width: calc(1.82 * var(--value-100));
    font-size: calc(1.4 * var(--value-10));
}

footer .dev-logo img{
    max-width: calc(7.6 * var(--value-10));
}

footer .dev-logo a{
    margin-top: calc(-1 * var(--value-20));
}

footer .dev-logo{
    display: flex;
    justify-content: center;
}

footer .dop-menu,
header .mobile-menu .dop-menu{
    width:100%;
}

footer .dop-menu ul,
header .mobile-menu .dop-menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--value-20);
    font-size: calc(1.6 * var(--value-10));
}

footer .dop-menu a,
header .mobile-menu .dop-menu a{
    text-decoration: none;
}

.banner-box{
    gap: var(--value-30);
    padding-top: calc(3.5 * var(--value-100));
}

.banner-box.type-2{
    padding-top: var(--value-16);
}

.banner-box.type-2 .banner-triggers{
    order: -1;
}

.banner-item{
    background-color: var(--color-secondary);
    padding: var(--value-90) var(--value-100);
    border-radius: var(--value-60);
    position: relative;
    gap: var(--value-100);
    justify-content: space-between;
    align-items: flex-end;
}

.banner-item .image-box{
    position: absolute;
    bottom: 0;
    right: calc(2 * var(--value-100));
    max-width: calc(5.62 * var(--value-100));
}

.banner-item .banner-content,
.banner-item .banner-bt{
    position: relative;
    z-index: 1;
}

.banner-item .image-box img{
    width: 100%;
}

.banner-item .title-box .title{
    font-size: calc(8.3 * var(--value-10));
    text-transform: uppercase;
}

.banner-item .cont-box{
    font-size: calc(3.5 * var(--value-10));
    font-family: var(--secondary-font-family);
}

.banner-item .banner-content{
    max-width: calc(6.9 * var(--value-100));
    gap: calc(4.5 * var(--value-10));
}

.banner-item .btn{
    font-size: calc(4.6 * var(--value-10));
    padding: calc(2.6 * var(--value-10)) var(--value-50);
    gap: var(--value-16);
}

.banner-item .btn svg{
    width: var(--value-40);
}

.banner-triggers{
    gap: calc(2.6 * var(--value-10));
    flex-wrap: wrap;
}

.banner-triggers .item{
    padding: var(--value-20) var(--value-40);
    border-radius: var(--value-40);
    border: var(--value-2) solid rgb(51 30 42 / 28%);
    font-size: var(--value-16);
}

.banner-triggers .item .value{
    font-size: calc(6.8 * var(--value-10));
    font-family: var(--secondary-font-family);
    text-transform: uppercase;
}

.banner-box.simple{
    padding-top: var(--value-80);
}

.banner-box.simple .banner-item{
    padding: var(--value-100) var(--value-90);
}

.banner-box.simple .banner-item .banner-content{
    max-width: calc(9.9 * var(--value-100));
}

.banner-box.simple .banner-item .image-box{
    right: 0;
    max-width: calc(5.2 * var(--value-100));
	width: 100%;
}

.banner-box.simple .banner-item .title-box .title {
    font-size: calc(7.2 * var(--value-10));
    line-height: 1.1;
}

section:first-child:has(.banner-box){
    padding-top: 0;
}

.sertificate-sect .gift-sertificate .image-box{
    justify-content: center;
    margin-bottom: calc(-4 * var(--value-100));
}

.sertificate-sect .gift-sertificate .image-box img{
    max-width: calc(10.47 * var(--value-100));
    width: 100%;
}

.sertificate-sect .sertificates-list{
    gap: var(--value-40);
}

.sertificates-list .course-rate .title-box .title {
    font-size: calc(5.7 * var(--value-10));
    text-transform: uppercase;
}

.gift-sertificates-list .title-box .title{
    font-size: var(--value-80);
    text-transform: uppercase;
}

.author-box{
    gap: var(--value-80);
}

.author-box .author-name .title{
    font-size: calc(9.8 * var(--value-10));
}

.author-box .about-author{
    padding-top: var(--value-30);
}

.author-gallery{
    grid-template-columns: calc(4.2 * var(--value-100)) 1fr calc(4.2 * var(--value-100));
    gap: calc(6.6 * var(--value-10));
    align-items: center;
}

.author-gallery .gallery-item{
    height: calc(6.2 * var(--value-100));
    border-radius: calc(3.8 * var(--value-100));
    overflow: hidden;
}

.author-gallery .gallery-item:nth-child(2){
    height: calc(8.9 * var(--value-100));
}

.author-gallery .gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-slider-box{
    position: relative;
    max-width: calc(13.68 * var(--value-100));
    margin: 0 auto;
}

.gallery-slider-box.course-gallery{
    max-width: initial;
    width: calc(100% + 2.72 * var(--value-100));
    margin: 0 calc(-1.36 * var(--value-100));
    position: relative;
}

.gallery-slider .swiper-slide{
    width: calc(8 * var(--value-100));
}

.gallery-slider .swiper-slide img{
    width: 100%;
}

.gallery-slider .swiper-slide .item{
    width:100%;
    border-radius: calc(1.83 * var(--value-100));
    overflow: hidden;
    opacity: 0;
    filter: grayscale(0.5) brightness(0.9);
    transition: .2s ease opacity, .2s ease filter;
}

.gallery-slider .swiper-slide.swiper-slide-visible .item,
.gallery-slider .swiper-slide.swiper-slide-next .item,
.gallery-slider .swiper-slide.swiper-slide-prev .item{
    opacity: 1;
}

.gallery-slider .swiper-slide.swiper-slide-fully-visible .item{
    filter: grayscale(0) brightness(1);
}

body .swiper-nav-bt::after{
    display: none;
}

body .swiper-nav-bt{
    border-radius: calc(6.3 * var(--value-10));
    background-color: var(--color-primary);
    width: calc(1.52 * var(--value-100));
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(3.6 * var(--value-10)) 0;
    margin-top: 0;
    top: 50%;
    transition: .2s ease background-color, .2s ease color;
    -o-transition: .2s ease background-color, .2s ease color;
    -moz-transition: .2s ease background-color, .2s ease color;
    -webkit-transition: .2s ease background-color, .2s ease color;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

body .swiper-nav-bt svg{
    width: calc(2.1 * var(--value-10));
    transition: .2s ease stroke;
    -o-transition: .2s ease stroke;
    -moz-transition: .2s ease stroke;
    -webkit-transition: .2s ease stroke;
}

body .swiper-nav-bt svg path{
    stroke: var(--color-white);
}

body .swiper-nav-bt:hover{
    background-color: var(--color-white);
}

body .swiper-nav-bt:hover svg path{
    stroke: var(--color-primary);
}

body .swiper-button-prev{
    left: 0;
    transform: scale(-1, 1) translate(0, -50%);
}

body .swiper-button-next{
    right: 0;
    transform: translate(0, -50%);
}

body .swiper-container{
    position: relative;
    overflow: hidden;
}

body .swiper-container.swiper-initialized{
    overflow: initial;
}

.gallery-slider-box .swiper-button-prev{
    transform: scale(-1, 1) translate(50%, -50%);
}

.gallery-slider-box .swiper-button-next{
    transform: translate(50%, -50%);
}

.reviews-slider .review-item{
    width: calc(12.85 * var(--value-100));
    margin: 0 auto;
    gap: var(--value-40);
}

.reviews-slider .swiper-nav-bt{
    top: calc(2.47 * var(--value-100));
    z-index: 22;
}

.review-item .images-box{
    justify-content: center;
    gap: calc(2.3 * var(--value-10));
}

.review-item .images-box .img-item{
    overflow: hidden;
    width: calc(3.33 * var(--value-100));
    height: calc(4.94 * var(--value-100));
    border-radius: calc(1.8 * var(--value-100));
}

.review-item .images-box .img-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.review-item .name{
    font-size: calc(5.8 * var(--value-10));
}

.review-item .name br{
    display: none;
}

.review-item .info-box{
    align-items: center;
    text-align: center;
}

.reviews-slider::after,
.reviews-slider::before{
    content: '';
    width: calc(3.44 * var(--value-100));
    height: 100%;
    position: absolute;
    top:0;
    z-index: 11;
}

.reviews-slider::before{
    left: calc(-2 * var(--value-100));
    background: linear-gradient(90deg, #F1D1D1 57.82%, rgba(241, 209, 209, 0) 100%);
}

.reviews-slider::after{
    right: calc(-2 * var(--value-100));
    background: linear-gradient(270deg, #F1D1D1 57.82%, rgba(241, 209, 209, 0) 100%);
}

.blockquote{
    position: relative;
    display: flex;
    gap: var(--value-20);    
    justify-content: space-between;
    width: 100%;
    font-size:calc(1.9 * var(--value-10));
}

.blockquote .quote-content{
    max-width: calc(10 * var(--value-100));
}

.blockquote::before,
.blockquote::after{
    font-size: calc(1.04 * var(--value-100));
    font-family: var(--secondary-font-family);
    position: relative;
    top: calc(-1 * var(--value-20));
}

.blockquote::before{
    content: '“';
}

.blockquote::after{
    content: '”';
}

.review-item .content{
    width: 100%;
    font-size: calc(1.9 * var(--value-10));
}

.review-item .blockquote{
    margin: 0;
}

.filter-box ul{
    padding: 0;
    margin: 0;
    list-style: none;
    justify-content: center;
    gap: calc(1.5 * var(--value-10));
    font-family: var(--secondary-font-family);
    flex-wrap: wrap;
}

.filter-box ul li a{
    display: inline-flex;
    padding: calc(1.2 * var(--value-10)) calc(2.8 * var(--value-10));
    text-decoration: none;
    transition: .2s ease color, .2s ease background-color;
    -o-transition: .2s ease color, .2s ease background-color;
    -moz-transition: .2s ease color, .2s ease background-color;
    -webkit-transition: .2s ease color, .2s ease background-color;
    color: var(--color-primary);
    font-size: calc(2.5 * var(--value-10));
    background-color: var(--color-white);
    border-radius: var(--value-20);
}

.filter-box ul li.current a{
    background-color: var(--color-primary);
    color: var(--color-white);
}

.list-box{
    grid-template-columns: repeat(4, 1fr);
    gap: var(--value-20);
}

.composition-item{
    border-radius: calc(4.5 * var(--value-10));
    overflow: hidden;
    padding-bottom: calc(9.6 * var(--value-10));
    box-shadow: 0px calc(3.7 * var(--value-10)) calc(1.8 * var(--value-10)) calc(-1.6 * var(--value-10)) rgba(0, 0, 0, 0.06);
    background-color: var(--color-secondary);
    position: relative;
}

.composition-item .img-box{
    position: relative;
}

.composition-item .img-box::after{
    content: '';
    height: calc(2 * var(--value-100));
    width:100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(360deg, #FCE4E4 13.53%, rgba(252, 228, 228, 0) 100%);
}

.composition-item .img-box img{
    width:100%;
    height: 100%;
    object-fit: cover;
}

.composition-item .info-box{
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 calc(2.2 * var(--value-10)) var(--value-40);
    text-align: center;
    z-index: 1;
    width: 100%;
}

.composition-item .name{
    font-size: calc(3.5 * var(--value-10));
    text-transform: uppercase;
}

.composition-item .descr{
    font-size: calc(1.4 * var(--value-10));
    max-width: calc(2.3 * var(--value-100));
    margin: 0 auto;
}

.composition-item .more-info-box{
    border-radius: calc(4.5 * var(--value-10));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: calc(4.5 * var(--value-10)) calc(4.8 * var(--value-10)) calc(5 * var(--value-10));
    height: 100%;
    width: 100%;
    gap: var(--value-10);
    justify-content: space-between;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: .2s ease opacity, .2s ease visibility;
    -o-transition: .2s ease opacity, .2s ease visibility;
    -moz-transition: .2s ease opacity, .2s ease visibility;
    -webkit-transition: .2s ease opacity, .2s ease visibility;
}

.composition-item:hover .more-info-box{
    opacity: 1;
    visibility: visible;
}

.composition-item .more-info-box:has(.btn-box .dop-info){
    padding-bottom: calc(2.2 * var(--value-10));
}

.composition-item .more-info-box .name{
    font-size: var(--value-40);
}

.composition-item .more-info-box .btn-box{
    gap: calc(1.2 * var(--value-10));
}

.composition-item .more-info-box .btn-box .dop-info{
    font-size: calc(1.4 * var(--value-10));
}

.composition-item .more-info-box .btn{
    border: var(--value-2) solid var(--color-white);
}

.prices-list{
    gap: var(--value-10);
    align-items: center;
}

.prices-list .size{
    padding: var(--value-6) var(--value-8);
    border-color: var(--color-white);
    border-radius: calc(1.1 * var(--value-10));
}

.prices-list .item{
    gap: calc(1.5 * var(--value-10));
}

.prices-list .item .price{
    font-size: var(--value-30);
    font-family: var(--secondary-font-family);
}

.title-box.main-title .title{
    font-size: calc(7.5 * var(--value-10));
    text-transform: uppercase;
}

.title-box.main-title{
    max-width: calc(8 * var(--value-100));
    margin: 0 auto;
}

.product-parameters{
    gap: calc(9.4 * var(--value-10));
}

.product-attributes{
    gap: var(--value-80);
    width: 100%;
    max-width: calc(8.32 * var(--value-100));
    margin: 0 auto;
}

.attr-item{
    gap: var(--value-30);
}

.attr-item .title-box .title{
    font-size: calc(7.5 * var(--value-10));
}

.attr-item .attr-check-list{
    flex-wrap: wrap;
    gap: calc(1.3 * var(--value-10));
    justify-content: center;
}

.radio-item{
    display: inline-flex;
}

.radio-item input{
    display: none;
}

.radio-item:has(input:checked) label{
    background-color: var(--color-white);
}

.radio-item label{
    display: inline-flex;
    line-height: 1;
    gap: var(--value-20);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: var(--value-20);
    background-color: var(--color-secondary);
    border-radius: calc(3.6 * var(--value-10));
}

.radio-item label span{
    font-size: calc(3.8 * var(--value-10));
    font-family: var(--secondary-font-family);
}

.radio-item .type-bage{
    padding: var(--value-8) var(--value-10);
    font-size: calc(1.8 * var(--value-10));
    border-radius: calc(1.4 * var(--value-10));
}

.product-parameters textarea{
    padding: var(--value-30);
    background-color: var(--color-secondary);
    border-radius: calc(3.6 * var(--value-10));
    font-size: var(--value-20);
    padding-bottom: var(--value-80);
}

body .select2-container .select2-selection--single{
    height: initial;
    border: none;
    padding: 0;
    background-color: transparent;
}

input,
textarea,
body .select2-container--default .select2-selection--single .select2-selection__rendered,
body .select2-search--dropdown .select2-search__field{
    background-color: var(--color-white);
    padding: calc(2.5 * var(--value-10)) var(--value-20);
    border-radius: calc(2.2 * var(--value-10));
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    font-size: calc(1.8 * var(--value-10));
    line-height: 1.2;
}

body .select2-container--default .select2-search--dropdown .select2-search__field{
    border: none;
}

input::placeholder,
textarea::placeholder,
body .select2-container--default .select2-selection--single .select2-selection__placeholder{
    color: var(--color-primary);
}

input:-webkit-autofill,
textarea:-webkit-autofill,
.search-box input:-webkit-autofill{
    -webkit-box-shadow: inset 0 0 0 var(--value-50) var(--color-white);
    -webkit-text-fill-color: var(--color-primary);
}

input.error,
textarea.error,
.select2-container--default.error .select2-selection--single .select2-selection__rendered{
    outline: var(--value-2) solid rgba(255, 72, 0, 0.46)!important;
}

.cloud-box:has(.hasDatepicker.error){
    outline: var(--value-2) solid rgba(255, 72, 0, 0.46) !important;
}

input.hasDatepicker.error{
    outline: none!important;
}

.count-price-panel{
    width: 100%;
    max-width: calc(10.91 * var(--value-100));
    margin: 0 auto;
    border-radius: var(--value-50);
    background-color: var(--color-white);
    gap: calc(5.4 * var(--value-10));
    padding: calc(1.8 * var(--value-10));
    padding-left: calc(4.8 * var(--value-10));
    align-items: center;
    justify-content: space-between;
    gap: var(--value-30);
    font-family: var(--secondary-font-family);
}

.count-price-panel .btn.primary {
    font-size: calc(3.6 * var(--value-10));
    padding: calc(2.7 * var(--value-10)) calc(2.9 * var(--value-10));
    border-radius: var(--value-30);
}

.count-price-panel .total-price{
    font-size: calc(7.3 * var(--value-10));
}

.count-check{
    align-items: center;
    gap: calc(1.5 * var(--value-10));
}

.count-check span{
    font-size: var(--value-40);
}

.counter {
    display: inline-flex;
    align-items: center;
    border: var(--value-2) solid var(--color-primary);
    border-radius: var(--value-20);
    overflow: hidden;
    font-family: sans-serif;
    user-select: none;
    font-family: var(--secondary-font-family);
    padding: 0 var(--value-10);
    align-items: center;
    line-height: 1;
    background-color: var(--color-white);
}

.counter-btn {
    width: var(--value-40);
    height: var(--value-40);
    font-size: var(--value-40);
    border: none;
    background: transparent;
    outline: none;
    cursor: pointer;
    padding: 0 var(--value-10);
    color: var(--color-primary);
}

.counter-value {
    width: var(--value-60);
    height: calc(7.7 * var(--value-10));
    text-align: center;
    font-size: var(--value-40);
    padding: 0;
    border: none;
    outline: none;
    background: white;
    font-family: var(--secondary-font-family);
}

.file-upload {
    display: flex;
    align-items: center;
    gap: var(--value-7);
}

.file-upload .upload-btn {
    font-family: var(--primary-font-family);
    font-size: calc(1.4 * var(--value-10));
    padding: calc(1.5 * var(--value-10)) var(--value-20);
    border-radius: calc(1.4 * var(--value-10));
    white-space: nowrap;
}

.file-upload .file-name {
    padding: calc(1.5 * var(--value-10));
    border-radius: calc(1.4 * var(--value-10));
    background-color: var(--color-white);
    font-size: calc(1.4 * var(--value-10));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-upload .file-name:empty{
    display: none;
}

.textarea-with-file{
    position: relative;
}

.textarea-with-file .file-upload{
    position: absolute;
    bottom: var(--value-20);
    right: var(--value-20);
}

.content ol {
    counter-reset: item;
    list-style: none;
    padding-left: 1.5em;
    padding: 0;
    margin: 0;
    gap: calc(4.5 * var(--value-10));
}

.content ol ol{
    gap: var(--value-20);
    margin-top: calc(2.6 * var(--value-10));
}

.content ol,
.content ul{
    display: flex;
    flex-direction: column;
}

.content li {
    display: block;
    position: relative;
}

.content li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
}

.content ol.primary-list li{
    font-size: var(--value-30);
    font-family: var(--secondary-font-family);
}

.content ol.primary-list li ol li{
    font-size: var(--default-font-size);
    font-family: var(--primary-font-family);
}

.main-wrap.page section:has(.content) .rows{
    gap: calc(1.2 * var(--value-100));
}

.cart-page .order-columns{
    grid-template-columns: repeat(2, 1fr);
    gap: calc(2.4 * var(--value-10)) var(--value-90);
    align-items: flex-start;
    grid-template-rows: auto 1fr;
}

.cart-page .order-info{
    grid-row-start: span 2;
}

.cart-page .order-info,
.cart-page .cart-info{
    gap: calc(4.5 * var(--value-10));
}

.cart-page .order-columns .title-box.col-title .title{
    font-size: var(--value-50);
    text-transform: uppercase;
}

.cart-page .cloud-box{
    border-radius: var(--value-40);
    background-color: var(--color-secondary);
    padding: var(--value-30);
    gap: var(--value-20);
}

.cart-page .cloud-box.white{
    background-color: var(--color-white);
}

.cart-page .order-info-list,
.cart-page .products,
.cart-page .products-list{
    gap: var(--value-20);
}

.cart-page .rows:has(.main-title){
    gap: var(--value-70);
}

.fields-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(1.5 * var(--value-10));
}

.fields-list .col-2{
    grid-column-start: span 2;
}

.fields-group,
.np-wrapper{
    gap: var(--value-30);
}

.np-wrapper .radiobox-list{
    padding: calc(1.5 * var(--value-10));
    border: var(--value-2) solid rgba(255, 255, 255, 0.49);
    border-radius: calc(3.4 * var(--value-10));
}

.fields-group .title-box .title{
    font-size: calc(3.9 * var(--value-10));
}

.fields-group .title-box .descr{
    font-size: calc(1.2 * var(--value-10));
}

.checkbox input,
.radiobox input{
    display: none;
}

.checkbox label,
.radiobox label{
    display: flex;
    gap: var(--value-16);
    align-items: center;
    cursor: pointer;
}

.radiobox label{
    font-size: var(--value-20);
}

.checkbox label::before,
.radiobox label::before{
    content: '';
    width: calc(4.5 * var(--value-10));
    height: calc(4.5 * var(--value-10));
    border-radius: calc(1.2 * var(--value-10));
    background-color: var(--color-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: calc(2.3 * var(--value-10));
}

.radiobox label::before{
    background-color: var(--color-base);
}

.checkbox:has(input:checked) label::before,
.radiobox:has(input:checked) label::before{
    background-color: var(--color-primary);
    background-image: url(assets/img/icons/check-white.svg);
}

.checkbox label div{
    flex: 1;
}

.checkbox label span{
    font-size: calc(1.4 * var(--value-10));
}

.radiobox label{
    border-radius: calc(2.2 * var(--value-10));
    background-color: var(--color-white);
    padding: calc(1.2 * var(--value-10));
    padding-right: var(--value-20);
}

.radiobox:has(input:checked) label{
    background-color: var(--color-primary);
    color: var(--color-white);
}

.radiobox:has(input:checked) label::before{
    background-color: var(--color-white);
    background-image: url(assets/img/icons/check-dark.svg);
}

.cart-page .radiobox-list{
    flex-wrap: wrap;
    gap: var(--value-16) var(--value-10);
}

.pay-method-img{
    width: var(--value-80);
}

.pay-method-img img{
    width: 100%;
    height: auto;
}

.calendar-box{
    position: relative;
}

.calendar-box input{
    background-color: transparent;
    padding: 0;
    border:0;
    outline: none;
    font-size: var(--value-20);
    border-radius: 0;
    color: var(--color-white);
    cursor: pointer;
    padding: calc(1.2 * var(--value-10));
    padding-right: var(--value-20);
    padding-left: calc(6.9 * var(--value-10));
    border-radius: calc(2.2 * var(--value-10));
    background-color: var(--color-primary);
    height: calc(6.9 * var(--value-10));
    width: calc(2.5 * var(--value-100));
}

.calendar-box input::placeholder{
    color: var(--color-white);
}

.calendar-box::before {
    content: '';
    width: calc(4.5 * var(--value-10));
    height: calc(4.5 * var(--value-10));
    border-radius: calc(1.2 * var(--value-10));
    background-color: var(--color-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: calc(2.3 * var(--value-10));
    background-image: url(assets/img/icons/calendar-ico.svg);
    position: absolute;
    left: calc(1.2 * var(--value-10));
    top: calc(1.2 * var(--value-10));
}

.cart-page .total-price{
    font-size: var(--value-50);
    font-family: var(--secondary-font-family);
    white-space: nowrap;
}

.cart-product-item {
    gap: calc(1.8 * var(--value-10));
    flex-wrap: wrap;
    
}

.cart-product-item .img-box{
    overflow: hidden;
    border-radius: var(--value-16);
    width: calc(1.62 * var(--value-100));
    height: calc(1.62 * var(--value-100));
}

.cart-product-item .img-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-product-item .title-box .title{
    font-size: var(--value-30);
    max-width: calc(4 * var(--value-100));
}

.cart-product-item .size{
    font-family: var(--value-16);
}

.cart-product-item .item-attribute span{
    font-weight: 500;
}

.cart-product-item .counter{
    border-radius: calc(1.1 * var(--value-10));
    padding: 0;
}

.cart-product-item .counter-value{
    width: var(--value-20);
    height: calc(4.2 * var(--value-10));
}

.cart-product-item .counter-btn,
.cart-product-item .counter-value{
    font-size: calc(2.2 * var(--value-10));
}

.cart-product-item .panel{
    background-color: var(--color-white);
    border-radius: var(--value-20);
    padding: calc(1.1 * var(--value-10));
    gap: calc(2.2 * var(--value-10));
}

.cart-product-item .price{
    font-size: var(--value-40);
    font-family: var(--secondary-font-family);
}

.cart-product-item .bottom-bar{
    gap: var(--value-10);
    display: flex;
    flex-direction: column;
}

.cart-product-item .bottom-bar .item-attribute:last-child{
    margin-bottom: var(--value-10);
}

.cart-product-item .info-box{
    flex: 1;
}

.show-up {
    will-change: transform, opacity;
    visibility: hidden;
    opacity: 0;
    transform: translateY(var(--value-50));
    transition: transform 0.6s ease, opacity 0.6s ease;
    -o-transition: transform 0.6s ease, opacity 0.6s ease;
    -moz-transition: transform 0.6s ease, opacity 0.6s ease;
    -webkit-transition: transform 0.6s ease, opacity 0.6s ease;
}

.show-up.animated {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

section:has(.swiper-container){
    overflow:hidden
}


body .reviews-slider.swiper-container.swiper-initialized{
    overflow: hidden;
}

.pagination{
    display: flex;
    align-items: center;
    gap: var(--value-20);
    justify-content: center;
}

.pagination a,
.pagination span{
    display: inline-flex;
    width: var(--value-40);
    height: var(--value-40);
    text-decoration: none;
    color: var(--color-primary);
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

.pagination .current{
    background-color: var(--color-primary);
    color: var(--color-white);
}

.pagination .prev,
.pagination .next{
    background-color: var(--color-primary);
    font-size: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--value-10);
    background-image: url(assets/img/icons/arro-right.svg);
    width: var(--value-60);
    height: var(--value-60);
    transition: .2s ease;
    -o-transition: .2s ease;
    -moz-transition: .2s ease;
    -webkit-transition: .2s ease;
}

.pagination .prev{
    transform: scale(-1, 1);
}

.pagination .prev:hover,
.pagination .next:hover{
    background-color: var(--color-white);
    background-image: url(assets/img/icons/arro-right-dark.svg);
}

.no-posts{
    font-size:calc(2.2 * var(--value-10));
    margin-top: var(--value-40);
    text-align: center;
}

.no-posts.cart_empty{
    margin-top: 0;
}

.list-box:has(.no-posts){
    grid-template-columns: 1fr;
}

.show_attributes-btn{
    background-color: transparent;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--value-10);
    padding: var(--value-5) var(--value-10);
    border: 1px solid var(--color-primary);
    border-radius: var(--value-10);
    color: var(--color-primary);
}

.show_attributes-btn::after{
    content: '';
    width: calc(1.6 * var(--value-10));
    height: calc(1.6 * var(--value-10));
    background-image: url(assets/img/icons/arrow-down.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}

.show_attributes-btn.active::after{
    transform: rotate(-180deg);
}

.ui-datepicker-calendar .ui-datepicker-unselectable a,
.ui-datepicker-calendar .ui-datepicker-unselectable span{
    background: rgba(251, 251, 251, 0.42)!important;
}

.ui-datepicker-calendar .full-day a,
.ui-datepicker-calendar .full-day span {
    background: rgba(246, 159, 200, 1) !important;
    color: black !important;
}

.ui-datepicker-calendar .holiday-day a,
.ui-datepicker-calendar .holiday-day span {
    background: rgba(228, 246, 255, 1) !important;
    color: black !important;
}

.ui-datepicker-calendar .busy-day a,
.ui-datepicker-calendar .busy-day span{
    background: rgba(51, 30, 42, 1) !important;
    color: #fff !important;
}

.ui-datepicker-calendar .free-day:not(.ui-state-disabled) a,
.ui-datepicker-calendar .free-day:not(.ui-state-disabled) span{
    background: rgba(140, 222, 206, 1) !important;
    color: black !important;
}

.ui-datepicker-calendar .full-day,
.ui-datepicker-calendar .holiday-day{
    opacity: 1!important;
}

.ui-datepicker .legend-notice{
    font-size: var(--value-10);
    width: 100%;
    max-width: calc(3.33 * var(--value-100));
    margin: 0 auto;
    margin-bottom: calc(3.5 * var(--value-10));
    text-align: center;
}

.ui-datepicker .calendar-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(1.5 * var(--value-10)) var(--value-30);
    padding: var(--value-20) calc(2.8 * var(--value-10));
    background-color: var(--color-base);
    font-size: calc(1.4 * var(--value-10));
    width: calc(100% + 5.6 * var(--value-10));
}

.ui-datepicker .legend-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-gap: var(--value-10);
}

.ui-datepicker .legend-color {
    width: var(--value-60);
    height: var(--value-30);
    border-radius: var(--value-8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui-datepicker .legend-color::before{
    content: '-';
}

/* Кольори як у календарі */
.legend-color.full-day { background: rgba(246, 159, 200, 1); }
.legend-color.busy-day { background: rgba(51, 30, 42, 1); }
.legend-color.free-day { background: rgba(140, 222, 206, 1); }
.legend-color.holiday-day { background: rgba(228, 246, 255, 1); }


.legend-color.full-day::before,
.legend-color.busy-day::before{
    color: var(--color-white);
}


body .ui-state-default, 
body .ui-widget-content .ui-state-default, 
body .ui-widget-header .ui-state-default, 
body .ui-button, html .ui-button.ui-state-disabled:hover, 
body .ui-button.ui-state-disabled:active{
    border: none;
}

body .ui-datepicker td{
    padding: var(--value-5);
}

body .ui-datepicker td span, 
body .ui-datepicker td a{
    min-width: 100%;
    padding: var(--value-5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: var(--value-8);
}

body .ui-datepicker{
    width: 100%;
    max-width: calc(6 * var(--value-100));
    padding: var(--value-20) calc(2.8 * var(--value-10));
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--default-font-size);
    border-radius: calc(3.6 * var(--value-10));
    overflow: hidden;
    background-color: rgba(251, 221, 221, 1);
    margin-top: var(--value-10);
}

body .ui-widget.ui-widget-content{
    border: 1px solid #fff;
}

body .ui-datepicker table{
    font-size: var(--default-font-size);
    margin-bottom: calc(3.5 * var(--value-10));
}

body .ui-datepicker .ui-datepicker-header{
    padding: var(--value-20);
    border-radius: 0;
    color: var(--color-primary);
    border: none;
    background-color: transparent;

}

body .ui-widget{
    font-family: inherit;
}

body .ui-datepicker .ui-datepicker-header,
body .ui-datepicker .calendar-legend{
    margin: 0 calc(-2.8 * var(--value-10));
}

body .ui-datepicker .ui-datepicker-prev {
    left: var(--value-20);
}

body .ui-datepicker .ui-datepicker-next {
    right: var(--value-20);
}

body .ui-datepicker .ui-datepicker-prev, 
body .ui-datepicker .ui-datepicker-next{
    top: 50%;
    transform: translateY(-50%);
    width: calc(5.4 * var(--value-10));
    height: var(--value-40);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--color-white);
    border-radius: calc(2.3 * var(--value-10));
}

body .ui-datepicker .ui-datepicker-prev:not(.ui-state-disabled), 
body .ui-datepicker .ui-datepicker-next:not(.ui-state-disabled){
    cursor: pointer;
}

body .ui-datepicker .ui-datepicker-prev span, 
body .ui-datepicker .ui-datepicker-next span{
    position: relative;
    top: initial;
    left: initial;
    padding: 0;
    margin: 0;
    background-image: url(assets/img/icons/arro-right-dark.svg);
    background-size: var(--value-8);
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
}

body .ui-datepicker .ui-datepicker-prev{
    transform: translateY(-50%) scale(-1, 1);
}


body .ui-widget-header .ui-state-hover{
    border: none;
    background-color: var(--color-primary);
}

body .ui-widget-header .ui-state-hover span{
    background-image: url(assets/img/icons/arro-right.svg);
}

body .ui-datepicker td:not(.ui-state-disabled) a.ui-state-active{
    background-color: var(--color-white) !important;
    color: var(--color-primary) !important;
}

body .select2-container--default .select2-selection--single .select2-selection__arrow{
    display: none;
}

body .select2-container--default.select2-container--open.select2-container--below .select2-selection--single .select2-selection__rendered{
    border-radius: calc(2.2 * var(--value-10));
}

body .select2-container--default.select2-container--open.select2-container--above .select2-selection--single .select2-selection__rendered{
    border-radius: calc(2.2 * var(--value-10));
}

body .select2-search--dropdown{
    padding: 0;
}

body .select2-results__option{
    padding: calc(1.5 * var(--value-10)) var(--value-20);
}

.select2-container--default .select2-results>.select2-results__options{
    padding-bottom: calc(1.5 * var(--value-10));
}

body .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-secondary);
    color: var(--color-primary);
}

body .select2-container--default .select2-results__option--selected,
body .select2-container--default .select2-results__option--selected.select2-results__option--highlighted {
    background-color: var(--color-primary);
    color: var(--color-white);
}

body .select2-dropdown{
    border: none;
    border-radius: calc(2.2 * var(--value-10));
    box-shadow: rgba(241, 209, 209, 0.57) 0 var(--value-2) var(--value-9) var(--value-2);
}

body .select2-container--open .select2-dropdown--below{
    border-radius: calc(2.2 * var(--value-10));
    transform: translateY(calc(-7.145 * var(--value-10)));
}

body .select2-container--open .select2-dropdown--above {
    border-radius: calc(2.2 * var(--value-10));
    transform: translateY(100%);
}

body .select2-container--default .select2-results>.select2-results__options{
    max-height: calc(3 * var(--value-100));
}

body .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar{
    width: var(--value-6);
}

body .select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb{
    background-color: #ccc;
}

body .select2-container--default .select2-selection--single .select2-selection__clear{
    position: absolute;
    top: 50%;
    right: var(--value-20);
    margin: 0;
    transform: translateY(-50%);
    font-size: var(--value-30);
    padding: var(--value-5);
    font-weight: 400;
    display: flex;
    align-items: center;
}

body .select2-container--default .select2-selection--single .select2-selection__rendered{
    padding-right: var(--value-60);
}

body .select2-container .select2-selection--single:focus-visible{
    outline: none;
}

.success-content{
    max-width: calc(7 * var(--value-100));
    margin: 0 auto var(--value-60);
    text-align: center;
    font-size: calc(2.2 * var(--value-10));
}

body .fancybox__backdrop{
    background: rgba(241, 209, 209, .95);
}

.fancybox__container .cart-popup-content{
    width: 100%;
    max-width: calc(3.86 * var(--value-100));
    background-color: var(--color-secondary);
    padding: calc(5.2 * var(--value-10)) calc(2.6 * var(--value-10)) calc(8.6 * var(--value-10));
    border-radius: calc(7.56 * var(--value-100));
    gap: var(--value-30);
    text-align: center;
    color: var(--color-primary);
}

.cart-popup-content .cart-popup-message{
    font-size: calc(4.5 * var(--value-10));
    text-transform: uppercase;
    max-width: calc(3 * var(--value-100));
    margin: 0 auto;
}

.cart-popup-content .logo-box img {
    max-width: calc(1.18 * var(--value-100));
    height: auto;
}

.cart-popup-content .btn.secondary{
    font-size: calc(2.5 * var(--value-10));
    border-radius: var(--value-10);
    padding: calc(1.4 * var(--value-10)) calc(1.8 * var(--value-10));
}

.cart-popup-content .btn.secondary svg{
    width: var(--value-20);
}

body .fancybox__content>.f-button.is-close-btn{
    top: 0;
    right: 0;
    width: calc(2.7 * var(--value-10));
    height: calc(2.7 * var(--value-10));
    background-color: transparent;
}

body .fancybox__content>.f-button.is-close-btn svg{
    stroke: var(--color-primary);
}

.page-404 .title-box .descr{
    max-width: calc(4 * var(--value-100));
}

.cart-page .delivery-info{
    font-size: calc(1.4 * var(--value-10));
}