:root{
    --main-font: 'Poppins', sans-serif;
    --decorative-font: 'PlayfairDisplay', serif;
    --black: #000000;
    --bg-section: #000000;
    --light-gray: #f3f3f3;
    --white: #ffffff;
    --section-padding: 180px;
    --btn-size: 60px;
    --items-box-shadow: 0 0 20px 0 rgba(17, 17, 17, 0.35)
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal
}
@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins/Poppins-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat/Montserrat-ExtraLight.woff2") format("woff2");
    font-weight: 300;
    font-style: normal
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat/Montserrat-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal
}
@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat/Montserrat-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal
}
@font-face {
    font-family: "PlayfairDisplay";
    src: url("../fonts/PlayfairDisplay/PlayfairDisplay-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal
}




/* common styles */
/*#wpadminbar{*/
/*    display: none*/
/*}*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box
}
html{
    font-size: 10px
}
body{
    font-size: 1.6rem;
    font-family: var(--main-font);
    font-weight: 400;
    line-height: 1.4;
    color: var(--black)
}

address{
    font-style: normal
}
.container{
    width: 100%;
    max-width: 1240px;
    padding: 0 20px;
    margin: 0 auto
}


h1{
    font-family: var(--main-font);
    font-size: 5rem;
    font-weight: 500;
    line-height: 1.2
}
.subtitle + h1{
    margin-top: 10px
}
h2{
    font-size: 4rem;
    font-weight: 600
}
.subtitle + h2{
    margin-top: 10px
}
h3{
    font-family: var(--main-font);
    font-size: 3rem;
    font-weight: 600
}
h4{
    font-family: var(--main-font);
    font-size: 2.4rem;
    font-weight: 600
}
h2 + *{
    margin-top: 15px
}
p{
    line-height: 1.6
}
ul li{
    list-style: none;
    margin-bottom: 0
}
ul li:not(nav ul li){
    padding-left: 20px;
    position: relative;
    line-height: 1.7
}
ul li:not(nav ul li):before{
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
    background-color: var(--black)
}
ul li:not(nav ul li):not(:first-child), ol li:not(:first-child){
    margin-top: 8px
}
.text ul:not(:first-child), .text ol:not(:first-child){
    margin: 10px 0
}
ol{
    counter-reset: item
}
ol li{
    list-style: none;
    padding-left: 27px;
    position: relative;
    counter-increment: item
}
ol li:before{
    content: counter(item)'.';
    color: var(--black);
    position: absolute;
    left: 0;
    font-weight: 600
}

/* end of common styles */



/* common class styles */
.p-r{
    position: relative
}
.pb-owl{
    padding-bottom: 89.8px
}
.hover{
    opacity: 0;
    position: absolute
}
.hover-wrap:hover .before-hover{
    opacity: 0;
    transition: 0.3s
}
.hover-wrap:hover .hover{
    opacity: 1;
    transition: 0.3s
}
.section-black{
    background-color: var(--black);
    color: var(--white)
}
.section-black .subtitle div, .section-black .next span, .section-black .prev span{
    background-color: var(--white)
}
.slider-nav-wrap{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center
}
.slider-nav{
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: fit-content;
    margin: 30px auto 0
}
.next, .prev{
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    cursor: pointer;
    transition: 0.3s
}
.next{
    justify-content: flex-end;
    margin-left: auto
}
.subtitle{
    display: flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 6px;
    gap: 15px;
    font-size: 1.8rem
}
.subtitle div, .next span, .prev span{
    width: 72px;
    height: 1px;
    background-color: var(--black)
}
.next:hover span, .prev:hover span{
    width: 30px;
    transition: 0.3s
}
.owl-carousel button{
    background: none;
    border: none;
    outline: none;
    color: var(--white)
}
button{
    background: none;
    border: none;
    outline: none;
    cursor: pointer
}
.img-container .overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #11111185;
    top: 0;
    left: 0;
    transition: 0.3s;
    pointer-events: none
}

.img-container .overlay:hover{
    background-color: transparent;
    transition: 0.3s
}
.about .img-container .overlay{
    background-color: #11111135
}

/* buttons */
.btn{
    padding: 20px 35px;
    font-family: var(--main-font);
    font-weight: 500;
    font-size: 1.8rem;
    text-align: center;
    height: var(--btn-size);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    text-decoration: none;
    border-radius: 10px
}
.white-btn, .empty-white-btn:hover{
    color: var(--black);
    background-color: var(--white);
    border: 1px solid var(--white);
    transition: 0.3s
}
.white-btn:hover, .empty-white-btn{
    background-color: transparent;
    color: var(--white);
    border: 1px solid var(--white);
    transition: 0.3s
}
.black-btn, .empty-black-btn:hover{
    color: var(--white);
    background-color: var(--black);
    border: 1px solid var(--black);
    transition: 0.3s
}
.black-btn:hover, .empty-black-btn{
    background-color: transparent;
    color: var(--black);
    border: 1px solid var(--black);
    transition: 0.3s
}

.btn .icon{
    position: relative
}
.btn:hover img:nth-of-type(2){
    position: absolute
}



/* end of buttons */
.grid-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px
}
.grid-2-flex{
    display: flex;
    gap: 30px
}
.grid-2-flex >div{
    width: calc(50% - 15px)
}
.grid-2-1{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px
}

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

.none{
    display: none!important
}


.img-container{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}
.img-container img, .img-container video{
    object-fit: cover;
    width: 100%;
    height: 100%
}
.main-block .img-container video{
    border-radius: 0;
    overflow: auto
}
/* end of common class styles */



/* header */

header{
    position: fixed;
    width: 100vw;
    z-index: 5
}
header.scroll{
    background-color: var(--black)
}
.header{
    padding: 15px 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}
.header.only-desktop >div:first-child{
    display: flex;
    align-items: center;
    gap: 30px
}
.menu-translate{
    transform: translateX(0);
    transition: 0.3s
}


header .menu-btn-open img{
    width: 30px;
    transition: 0.3s
}
header .menu-btn-open, header .menu-btn-close{
    transition: 0.3s
}
header .open:hover, header .close:hover{
    transform: scale(1.1);
    transition: 0.3s
}
.hover-wrap{
    position: relative
}
.hover{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0
}
.hover-wrap:hover .before-hover{
    opacity: 0;
    transition: 0.3s
}
.hover-wrap:hover .hover{
    opacity: 1;
    transition: 0.3s
}
.header .close{
    position: absolute;
    right: -50px;
    top: 20px;
    display: flex;
    cursor: pointer
}
.header .logo{
    display: flex;
    width: fit-content
}
.logo img{
    width: 60px;
    height: 60px
}
.header a{
    color: var(--white);
    font-size: 1.6rem;
    text-decoration: none
}

.header .menu-wrap{
    display: flex;
    align-items: center;
    gap: 30px
}
.social{
    display: flex;
    align-items: center;
    gap: 15px
}
.social a{
    display: flex
}
.social img{
    height: 40px;
    border-radius: 50%
}

.main-menu a{
    transition: 0.3s
}
.main-menu ul li{
    cursor: pointer
}
.main-menu ul li:hover a{
    /*color: var(--black);*/
    /*text-decoration: underline;*/
    /*text-underline-offset: 6px;*/
    /*text-decoration-thickness: from-font;*/
    /*transition: 0.3s*/
}
.main-menu >nav >ul{
    display: flex;
    align-items: center;
    gap: 30px
}

/* end of header */

/* owl carousel */
.owl-carousel .owl-nav button{
    margin: 0!important;
    width: 119.95px
}
.owl-carousel .owl-nav button div span{
    transition: 0.3s
}
.owl-carousel .owl-nav button:hover div span{
    width: 30px;
    transition: 0.3s
}
.owl-carousel .owl-nav button:hover{
    background: none!important
}
.owl-carousel .owl-nav button.owl-next{
    display: flex;
    justify-content: flex-end
}
.owl-carousel .owl-nav{
    display: flex;
    flex-direction: column-reverse;
    width: fit-content;
    margin: 40px auto 0;
    gap: 30px
}
.owl-carousel .owl-nav.disabled + .owl-dots{
    margin-top: 30px;
    text-align: center
}
.testimonials .owl-carousel .owl-nav.disabled + .owl-dots{
    margin-top: 15px
}
.owl-carousel .owl-dots .owl-dot span{
    margin: 0 6px;
    width: 12px;
    height: 12px;
    display: block;
    background: #00000070;
    border-radius: 50%
}
.owl-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span {
    background: var(--black)
}
/* end of owl carousel */

/* footer */

footer{
    border-top: 1px solid var(--black)
}
.footer{
    padding: 15px 0
}
.footer .copyright{
    text-align: center
}


/* end of footer */
@media all and (min-width: 992px){
    .only-mob{
        display: none
    }
}
@media all and (max-width: 991px){
    :root{
        --section-padding: 80px;
        --btn-size: 45px
    }
    .only-desktop{
        display: none
    }
    section{
        overflow: hidden
    }

    /* header mobile styles */
    .header.only-mob{
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 15px
    }
    .header.only-mob .logo{
        margin-right: auto
    }
    .menu-btns.open .menu-btn-open {
        display: flex
    }

    .menu-btns.open .menu-btn-close {
        display: none
    }

    .menu-btns:not(.open) .menu-btn-open {
        display: none
    }

    .menu-btns:not(.open) .menu-btn-close {
        display: block
    }

    .header-mobile-wrap {
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
        top: 0;
        left: 0;
        background-color: var(--black);
        width: calc(100vw - 70px);
        height: 100vh;
        z-index: 2;
        padding: 20px;
        overflow-y: scroll;
        transition: 0.3s
    }

    .header-mobile-wrap .main-menu ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px
    }

    .header-mobile-wrap .main-menu ul li a {
        line-height: 1.4;
        display: flex;
        font-size: 1.6rem;
        text-transform: uppercase
    }

    .header-mobile-wrap .main-menu nav >ul >li:last-child{
        gap: 15px
    }
    .header-mobile-wrap .main-menu nav >ul >li:last-child .sub-menu{
        padding: 0
    }
  
    .header.menu-translate .header-mobile-wrap{
        transform: translateX(-110%);
        transition: 0.3s
    }
    .header:not(.menu-translate) .overlay{
        position: fixed;
        top: 0;
        right: 0;
        background: #20202047;
        backdrop-filter: blur(5px);
        width: 100vw;
        height: 100vh;
        transition: 0.1s
    }
    .header-mobile-wrap .main-menu nav >ul >li{
        flex-direction: column;
        gap: 20px
    }
    .social img{
        height: 35px
    }

    .social{
        gap: 10px
    }
    /*.menu-item-has-children >a:after{*/
    /*    top: 0*/
    /*}*/
    /*.menu-item-has-children.pll-parent-menu-item >a:after{*/
    /*    top: -2px*/
    /*}*/
    /* end of header mobile styles */


}
@media all and (max-width: 400px){
    header .menu-btn-open img {
        width: 25px
    }
    .logo img {
        width: 50px;
        height: 50px
    }
}