@font-face {
    font-family: AbiFont;
    src: url("../../assets/fonts/gotham-rounded-book.otf") format("opentype");
}

*{
    font-family: AbiFont;
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.items1 a {
    color: #e30b17;
    text-decoration: none;
    margin-right: 20px;
}

.items2 a {
    color: #e30b17;
    text-decoration: none;
    margin-left: 20px;
}

.uzmoon {
    background-color: #FFEECC;
    position: relative;
    overflow: hidden;
}

.uzmoon .svg-icon--wave {
    position: absolute;
    bottom: -1vw;
    right: 0;
    width: 115%;
    height: 17vw;
    display: block;
    pointer-events: none;
}

.uzmoon .svg-icon--wave .positioner {
    display: block;
}

.uzmoon .svg-icon--wave svg {
    display: block;
}

.uzmoon .svg-icon--wave svg path {
    fill: white;
}

.uzmoon .backdrop {
    color: white;
    text-align: center;
    position: absolute;
    font-size: 12vw;
    height: 12vw;
    left: 0;
    width: 100%;
    top: 20%;
    bottom: 0;
    margin: auto;
    pointer-events: none;
    z-index: 1;
}

.uzmoon .uzmoon__intro {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 6rem;
    position: relative;
    z-index: 3;
}

.uzmoon .uzmoon__intro h1 {
    font-size: 10vw;
    text-align: center;
    transition-duration: .25s;
    text-transform: uppercase;
    color:#e30b17;
    padding-top: 4rem;
}

.uzmoon .uzmoon__intro h1 span.break {
    display: block;
    font-weight: normal;
    font-size: .5em;
    letter-spacing: .15em;
}

.uzmoon .uzmoon__intro h1 .icon-font {
    position: relative;
    top: -.1em;
    color: #2e642c;
}

.uzmoon .uzmoon__intro a.btn {
    margin-top: 0;
}

img {
    max-width: 100%;
    vertical-align: middle;
    height: auto;
}
.uzmoon .lid {
    position: relative;
    margin-bottom: -16%;
    left: 0%;
    z-index: 6;
}

.uzmoon .uzmoon__parallax {
    position: relative;
    z-index: 2;
}

.uzmoon .uzmoon__ingredients {
    margin: 0 auto;
    max-width: 550px;
    width: 60%;
    position: relative;
}

.uzmoon .uzmoon__ingredients .main-prod {
    position: relative;
    z-index: 5;
}
.uzmoon .uzmoon__ingredients .parallax-ingredients {
    position: absolute;
    width: 80%;
    top: 32%;
    left: 10%;
    height: 0;
    pointer-events: none;
    padding-bottom: 100%;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater {
    position: absolute;
    width: 25%;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--1 {
    top: 0;
    left: 37.5%;
    z-index: 4;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--2 {
    top: 20%;
    left: 10%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--3 {
    top: 26%;
    left: 68%;
    z-index: 4;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--4 {
    top: 90%;
    left: 23.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--5 {
    width: 65%;
    top: -32%;
    left: 17.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--6 {
    width: 50%;
    top: 45%;
    left: 17.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--7 {
    width: 47%;
    top: 0%;
    left: 40.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--8 {
    width: 47%;
    top: 99%;
    left: 14.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--9 {
    width: 32%;
    top: -33%;
    left: 55.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--10 {
    width: 32%;
    top: 64%;
    left: 55.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--11 {
    width: 32%;
    top: 14%;
    left: 14.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--12 {
    width: 32%;
    top: 91%;
    left: -2.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--13 {
    width: 8%;
    top: -26%;
    left: 85%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--14 {
    width: 8%;
    top: 34%;
    left: 57.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--15 {
    width: 8%;
    top: 50%;
    left: 26.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--16 {
    width: 8%;
    top: 61%;
    left: 11.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--17 {
    width: 8%;
    top: -13%;
    left: 74.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--18 {
    width: 8%;
    top: 61%;
    left: 25.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--19 {
    width: 25%;
    top: -15%;
    left: 10.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--21 {
    width: 65%;
    bottom: 15%;
    left: 25%;
    z-index: 2;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--22 {
    width: 25%;
    top: 19%;
    left: 38.5%;
    z-index: 3;
}

.uzmoon .uzmoon__ingredients .parallax-ingredients .floater.floater--23 {
    width: 25%;
    top: 40%;
    left: 4.5%;
    z-index: 3;
}


/*Footer*/

.p-uz-bg{
    background-color: #e30b17;
}

.border-l-r{
    border-left:1px solid rgba(255,255,255,.25);
    border-right:1px solid rgba(255,255,255,.25);
    padding-left:3rem;
}
.border-l-r a{
    color:#fff;
    text-decoration:none;
    margin-top:2px;
}
.socials{
    margin-top:5rem;
    display: flex;
}
.socials a{
    color:#fff;
    text-decoration: none;
    margin: 10px;
    border-radius: 50px;
    border: 1px solid;
    height: 3rem;
    width: 3rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
.con-info a {
    color: #fff;
    text-decoration: none;
    margin-bottom: 39px;
}
/*CONTACT*/
.image-bg img{
    z-index: -1;
    width: 100%;
}

.contact-form{
    padding:3rem;
}
.uz-input {
    border-radius: 0;
}

.uz-input:focus {
    border-color: #000000;
    box-shadow: none;
}

input.uz-input{
    height: 50px;
}
.contact-title{
    font-size:3rem;
}

.contact-info{
    position: absolute;
    top: 10%;
    left: 30%;
    color:#fff;
}
.image-bg{
    position: relative;
}

.contact-info div {
    width: 100%;
    background: orange;
    padding: 20px;
}
.uz-contact-info .svg-icon.svg-icon--wave {
    position: absolute;
    left: -10%;
    bottom: -3.5%;
    width: 110%;
    height: 18vw;
    z-index: 3;
    pointer-events: none;
}

.uz-contact-info .positioner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.uz-contact-info .svg-icon.svg-icon--wave svg {
    display: block;
    width: 100%;
    height: 100%;
}
.p-relative{
    position: relative;
}
.z-index{
    z-index:1000;
}
.btn-progres{
    width: 100%;
    color:#fff;
    background-color:#e30b17;
    border-radius:0;
    border:1px solid #fff;
    transition: width 2s;
    padding: 0.75em 1em;
}
.btn-progres:hover{
    width: 100%;
    color:#e30b17;
    background-color:#fff;
    border:1px solid #e30b17;
}
.swiper {
    width: 100%;
    height: 100%;
}
.mySwiper {
    height: 48vh !important;
    width: 64%!important;
}
.bg-uzmoon-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url('../../assets/img/banners/about.png'),no-repeat;
    background-size: auto, auto, auto;
    background-size: cover;
    color: #fff;
    height: 60vh;
    flex-direction: column;
}
nav.color-main{
    background: #e20015;
}
.uz-drop{
    background: #e20015;
}
nav.color-main a{
    color:#fff!important;
}
.slider{
    position: relative;
    padding:2rem;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    content:'' !important;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    content:'' !important;
}
.swiper-button-prev {
    color: #000!important;
    font-size: 50px;
    margin-left: 100px;
}
.swiper-button-next {
    color: #000!important;
    font-size: 50px;
    margin-right: 100px;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.item-for-progress.bg-1{
    background: rgb(209,150,107);
    background: radial-gradient(circle, rgba(209,150,107,1) 0%, rgba(194,112,100,1) 50%);
}
.item-for-progress.bg-2{

}

.hr{
    height: 2px;
    width: 90%;
    background: red;
    margin: 5px 0;
}
.dropdown-item:focus, .dropdown-item:hover{
    color: #d00000 !important;
}
.dropdown-item.active, .dropdown-item:active{
    color: #d00000 !important;
    background-color: #fff !important;
}
.item-for-progress .title {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    font-size:1.3rem;
    font-weight: bold;
    margin-bottom:2rem;
}
.limit-text{
    font-size:1.3rem;
    font-weight: bold;
    color:#fff;
}
.item-for-progress .image-limit {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.item-for-progress {
    min-height: 40rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.border-1 {
    height: 2px;
    width: 4rem;
}
.row-no-padding [class*="col-"]{
    padding-left: 0 !important;
    padding-right: 0 !important;

}
.banner-product{
    position: relative;
}
.banner-product .banner-text{
    position:absolute;
    top: 20%;
    font-size: 7rem;
    color: #FFF;
    font-weight: bold;
    z-index: 9999;
    display:flex;
    justify-content: center;
    width: 100%;
}
.banner-product img{
    height: 20rem;
    width: 100%;
    margin-bottom: 5rem;
    object-fit: cover;
    filter: brightness(70%);

}
.mx-auto.my-2.order-0.order-md-1.position-relative.mx-5{
    width: 26rem;
}
.about-bg{
    color:#000;
}
.uz-logo{
    position: absolute;
    z-index: 99999999999;
    left: 0;
    right: 0;
    content: "sdfasdfasdf";
    width: 12rem;
    top: -20px;
}
.uz-logo img{
    filter: drop-shadow(0 2px 0 white);
}

.langs{
    position: absolute;
    right: 2rem;
    cursor: pointer;
    top: 1rem;

}
.langs img{
    width: 50px !important;
}
/*media*/

@media only screen and (min-width: 960px) {
    .uzmoon {
        padding-top: 9vh !important;
    }
    .uzmoon .backdrop {
        display: block;
    }
    .uzmoon .uzmoon__intro h1 {
        font-size: 6.5vw;
    }
    .uzmoon .uzmoon__intro {
        margin-bottom: 9vh !important;
    }
    img {
        max-width: 100%;
        vertical-align: middle;
        height: auto;
    }
}

@media only screen and (min-width: 1600px) {
    .uzmoon {
        padding-top: 8vh !important;
    }
    .uzmoon .uzmoon__intro {
        margin-bottom: 8vh !important;
    }
}
@media only screen and (max-width: 720px) {
    .mobile-uz {
        width: 100% !important;
        display: flex !important;
        justify-content: space-between!important;
    }
    .mobile-uz img{
        width: 150px;
        margin-left: 15%;
    }
    .mobile-uz .position-relative{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .collapse:not(.show){
        display: none !important;
    }
    .d-sm-block {
        display: block !important;
    }
    .swiper-button-next{
        margin-right:auto;
    }
    .swiper-button-prev{
        margin-left:auto;
    }
    .swiper-slide img{
        object-fit: cover;
    }
    .contact-form{
        padding:0;
    }
    .border-l-r{
        padding: 0;
    }
    .banner-product .banner-text{
        top: 30%;
        font-size: 3rem;
        text-align: center;
    }
    .contact-info{
        top: 0;
        left: 0;
        right: 0;
    }
    #toggle{
        margin-left: 2rem;
    }
    .navbar-nav .dropdown-menu{
        text-align: center;
    }
    .socials{
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    .mySwiper{
        height: 100% !important;
        width: 100% !important;
    }
}