/* Page resets starts here */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}



button{
    cursor: pointer;
}

a{
    cursor: pointer;
}

@font-face {
    font-family: "custom-lato";
    src: url(./font/Lato-Bold.ttf)format("truetype"),url(./font/lato-regular-webfont.woff
    )format("woff"),url(./font/lato-regular-webfont.woff2)format("woff2");
}

html{
    scroll-behavior: smooth;
}

body {
    cursor: default;
    font-family: "custom-lato", sans-serif;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden !important;
    overflow-y: hidden;
}





.buddy{
    overflow-y: hidden !important;
}

.io{
    font-size: 17px;
}

/* Page resets ends here*/

.btn {
    padding: 15px 20px;
    transition: all 1s ease;
}

.btn-white {
    background: transparent;
    border: 2px solid rgba(0, 0, 0, 0.46);
}

.btn-white:hover {
    color: var(--main-color);
    border: 2px solid var(--main-color);
}

.btn-red {
    background: var(--main-color);
    color: var(--white-color);
    border: 2px solid var(--main-color);
}

.btn-red:hover{
    
    border: 2px solid var(--main-color);
    color: var(--main-color);
    background: transparent;
}

/* backdrop css code is here */

.backdrop {
    /* z-index: -1; */
    width :100%;
    height: 120vh;
    background: transparent;
    position: fixed;
    left: 0;
    top: 0;
    /* display: none; */
    visibility: hidden;
    transition: all 0.7s ease;
    /* backdrop-filter: blur(0px); */
    overflow: hidden;
    /* filter: blur(5px); */
}
/* 
.backdrop:hover {
} */

.show-backdrop {
    visibility: visible;
    z-index: 10;
    /* backdrop-filter: blur(5px); */
    background: rgba(108, 5, 37, 0.463);
    transition: all 1s;
    /* display: block; */
    /* overflow-y: hidden; */
}

/* backdrop css codes ends here */

/* Header section starts here */

.nav-mobile {
    /* border: 3px solid black; */
    display: none;

    justify-content: space-between;
    padding: 10px 3vw;
    align-items: center;

    background: var(--main-color);
    /* position: fixed; */
    width: 100vw;
    position: fixed;
    top: 0;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.35);

    /* margin-bottom: 100px; */
    z-index: 10;
}



.nav-mobile a{
    text-decoration: none;
}

.mobile-logo {
    /* width: 200px;
    height: 50px; */
    /* border: 3px solid tomato; */
    display: flex;
    color: var(--white-color);
    align-items: center;
    margin-left: 10px;
    cursor: pointer;
}

.pizza {
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* border-radius: 150px; */
    /* font-size: 35px; */
    /* padding: 5px; */
    /* margin-top: 5px;
    margin-bottom: 5px; */
    /* margin: 5px; */
    background: url(./img/pizza-gif.gif);
    background-size: contain;
    transition: all 4s ease;
    width: 60px;
    height: 60px;
    border-radius: 150px;
    cursor: pointer;

}

/* .xbox:hover {
    rotate: 360deg;
} */


.mobile-logo span {
    font-size: 25px;
    font-weight: bolder;
    margin-left: 10px;
    cursor: pointer;
}


.hamburger {
    /* border: 3px solid tomato; */
    cursor: pointer;
    width: 28px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* position: absolute; */
    /*  position: fixed; */
    right: 0;
    margin-right: 10px;
}

/* .hamburger:hover {
    transform: rotate(360deg);
} */


.menu {
    height: 4px;
    width: 100%;
    /* width: 100%; */
    transition: all 1.5s ease;
    transition-delay: 1s;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    border-radius: 7px;
    background: transparent;
    /* transform: scaleX(0); */
}

.hamburger::before{
    content: "";
    position: absolute;
    width: 28px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 7px;
    transition: all 1.5s ease;
    transition-delay: 0.5s;
}

/* .menu:hover {
    background: black;
}
.menu::before:hover {
    background: black;
}
.menu:after:hover {
    background: black;
} */

.menu::before {
    content: "";
    width: 28px;
    height: 4px;
    /* transition-delay: 1s; */
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 1s ease;
    position: absolute;
    transform: translateY(-10px);
}

/* . {
    content: "";
    width: 28px;
    height: 4px;
    transition-delay: 1s;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 1s ease;
    position: absolute;
    transform: translateY(0);
} */

.menu::after {
    content: "";
    width: 28px;
    height: 4px;
    background: rgba(255, 255, 255, 0.8);
    transition: all 1s ease;
    position: absolute;
    /* transition-delay: 1s; */
    border-radius: 7px;
    transform: translateY(10px);
}

.showburger{
    /* position: fixed !important; */
    align-items: center;
    justify-content: center;
    z-index: 7;
    /* rotate: 360deg; */
    /* transition: all 3s ease; */
}

.showburger::before{
    transform: scaleX(0);
    transition: all 0.2s ease;
    opacity: 0;
}

.showburger .menu {
    /* width: 0px; */
    /* transform-origin: center; */
    background: transparent;
    transition: all 0.15s ease;
}

.showburger .menu::before {
    transition: all 1s ease;
    transform: rotate(45deg);
    /* background: var(--main-color); */
}
.showburger .menu::after {
    transition: all 1s ease;
    transform: rotate(-45deg);
    /* background: var(--main-color); */
}


.mobile-link-holder {
    transform: translateY(-200%);
    position: fixed; 
    right: 0;
    top: 0;
    height: 70vh;
    max-height: 500px;
    width: 100%;
    background: var(--main-color);
    transition: all 0.7s ease;
    margin-top: 80px;
    opacity: 0;
    z-index: -1;
    
    /* border-left:10px solid var(--black-gradient) ; */
    /* padding: 25px 0 25px 20px; */
}

.show-mobile-link-holder {
    z-index: 6;
    transform: translateX(0);
    opacity: 1;
    transition: all 1s ease;
    /* position: fixed !important;  */

    /* border-radius: 50px; */
}

.mobile-link-holder ul {
    list-style: none;
}

.mobile-link-holder a {
    color: var(--white-color);
    text-decoration: none;
    display: block;
    padding: 25px 0 25px 25px;
    transition: all 0.35s ease;
}

.mobile-link-holder a:hover{
    /* color: var(--main-color); */
    opacity: 0.5;
    /* background: #fff; */
    transition: all 0.35s ease;
}

/* .mobile-link-holder ul a:first-child{
    background: var(--white-color);
    color: var(--main-color) !important;
} */


.mobile-active-link {
    background: var(--white-color);
    color: var(--main-color) !important;
}

.mobile-active-link:hover{
    opacity: 1 !important;
}

.mobile-link-holder button {
    border: 2px solid var(--white-color);
    color: var(--white-color);
    background: var(--main-color);
    font-size: 75%;
    border-radius: 7px;
    /* margin-bottom: 30px; */
}

/* .mobile-link-holder .call{
} */

.language{
    margin-top: 2vh;
    width: 50%;
    min-width: 150px;
    max-width: 200px;
    height: 70px;
    background-color: var(--main-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    /* border: 2px solid black; */
}
.current{
    cursor: pointer;
    width: 50px;
    display: flex;
    align-items: center;
    padding: 3px;
    margin-left: 20px;
    background: rgba(245, 245, 245, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.8);
    height: 50px;
    border-radius: 50%;
}

.current img{
    width: 100%;
    cursor: pointer;
}


.others {
    margin-left: 20px;
    border: 2px solid transparent;
    position: relative;
    color: var(--white-color);
    animation: none;
    cursor: pointer;
    animation-timing-function: ease;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: 4;
    animation-delay: 5s;
    animation-direction: alternate;
    transition: all 0.5s ease;

}

@keyframes boing {
    0%{transform: translateY(0);}
    100%{transform: translateY(10px);}
}

.current-rotate .others{
    animation: none;
    transition: all 0.5s ease;
    transform: rotate(180deg);
}



.langs{
    opacity: 0;
    width: 100vw;
    background-color: var(--main-color);
    position: relative;
    cursor: pointer;
    /* top: -20px; */
    /* bottom: -20px; */
    /* height: 100%; */
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* display: none; */
    padding: 10px 5vw 10px 5vw;
    visibility: hidden;
    z-index: -1;
    /* border: 2px solid black; */
    transform: translateY(-35px);
    /* background: #fff; */
}

.langs-show{
    /* z-index: 1; */
    /* display: flex; */
    visibility: visible;
    opacity: 1;
    transition: all 0.7s ease;
    /* top: 0; */
    transform: translateY(0);
}

.langs a{
    width: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.langs a img{
    width: 30px;
    border: 2px solid rgba(255, 255, 255, 0.651);
    border-radius: 50%;
    cursor: pointer;
}

.chn img, .rus img, .ukr img{
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
     */
     opacity: 0.2;
     filter: blur(5px);
}

@media screen and (max-width: 800px) {
    .chn img, .rus img, .ukr img{
        /* background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
         */
         opacity: 0.2;
         filter: blur(0);
    }
}



.langs span{
    color: var(--white-color);
    /* text-align: left; */
    margin-right: 5vw;
}


.nav-desktop {
    /* border: 3px solid tomato; */
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    max-width: 1500px;
    top: 0;
    width: 100%;
    justify-content: flex-end;
    background: rgba(255, 255, 255, 0.627);
    backdrop-filter: blur(3px);
    /* border-bottom: 10px solid var(--gray-gradient); */
    /* margin-bottom: 130px; */
    margin: 0 auto;
    z-index: 10;
}

.pizza-desktop {
    position: absolute;
    left: 60px;
    top: 0;
    background: url(./img/pizza-gif.gif);
    background-size: contain;
    width: 100px;
    height: 100px;
    /* background: var(--main-color); */
    /* display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    color: var(--white-color); */
    border:5px solid rgba(250, 249, 249, 0.05);
    border-radius: 150px;
    transition: all 4s ease;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6);
}

/* .pizza-desktop:hover {
    rotate: 360deg;
    scale: 120%;
} */

.desktop-link-holder {
    list-style: none;
    display: flex;
    align-items: stretch;
}

.desktop-link-holder ul{
    /* border: 3px solid tomato; */
    list-style: none;
    display: flex;
}    
.desktop-link-holder ul a{
    text-decoration: none;
    color: var(--main-color);
    padding: 13px 20px;
    display: block;
    border: 2px solid transparent;
}

.langdxtop{
    display: flex;
    height: 50px;
    width: 100px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* z-index: 1; */
    /* border: 2px solid black; */
}
.langdxtop span, .langdxtop i{
    transition: all 1s ease;
    color: var(--main-color);
}

.langdxtop span{
    margin-right: 10px;
}

.langdxtop:hover .otherlangsdxtop{
    /* display: flex; */
    /* transition-delay: opacity 5s ease; */
    transition: all 1s ease;
    opacity: 1;
    height: 300px;
    /* transform: translateY(150px); */
}

.langdxtop:hover i{
    transition: all 1s ease;
    transform: rotate(180deg);
}

.otherlangsdxtop{
    position: absolute;
    transition: all 1.5s ease;
    /* transition-delay: opacity 5s ease; */
    /* transform: translateY(-300px); */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    align-items: center;
    padding: 10px;
    /* background: var(--main-color); */
    height: 0px;
    overflow: hidden;
    opacity: 0;
    top: 40px;
}

.otherlangsdxtop a{
    /* display: none; */
    /* position: absolute; */
    /* top: 20px; */
    display: flex;
    /* height: 40px; */
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    /* z-index: -1; */
    /* margin-top: 0px; */
}



.otherlangsdxtop a img{
    /* border: 5px solid rgba(0, 0, 0, 0.26); */
    border-radius: 50%;
    width: 40px;
    transition: all 0.7s ease;
    /* width: 100%; */
}

.otherlangsdxtop a img:hover{
    scale: 1.15;
    transition: all 0.7s ease;
}

.desktop-link-holder ul a:hover{
    border: 2px solid var(--main-color)
}

.header-banner-section {

    /* border: 3px solid black; */
    min-height: 450px;
    /* background: url(./img/banner.jpg), blur(5px); */
    background-image:url(./img/banner-blur2.jpg);
    /* background: blur(5px); */
    background-size: cover;
    margin-top: 100px;
    padding-top: 130px;
    /* position: relative; */
    padding-bottom: 30px;

}

/* .header-banner-section img{ */
    /* border: 3px solid black; */
/* } */

.banner-content {
    /* border: 3px solid red; */
    /* position: absolute; */
    width: 90%;
    height: 100%;
    margin: 0 auto;
    /* backdrop-filter: blur(2px); */
}

.header-text-container {
    /* border: 3px solid purple; */
    width: 50%;
}

.header-icons {
    margin-left: 10px;
}

.header-text-container h1 {
    color: var(--main-color-dark);
    font-size: 45px;
}

.header-text-container p {
    color: rgb(58, 58, 58);
    margin: 20px 0;
    line-height: 1.5;
}

.header-text-container button {
    margin-right: 10px;
    /* border: 2px solid ; */
}
/* Header section ends here */

/* Header counter section starts here */

.header-counter-section {
    justify-content: space-evenly;
    padding: 20px 0;
    background: var(--main-color);
    color: var(--white-color);
    display: flex;
    overflow: hidden;
} 

.counter {
    /* border: 3px solid white; */
    text-align: center;
    width: 180px;

}

.counter h2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}

.counter p {
    text-transform: uppercase;
    margin-top: 5px;
}

.dumb-videos {
    /* margin: 5px auto; */
    padding: 5px;
    /* border: 7px solid black; */
    border-radius: 20px;
    background: black;
    color: white;
    width:50%;
    height: 120%;
    align-items: center;
    justify-content: center;
}



.about-section{
    /* border: 3px solid tomato; */
    width: 90%;
    /* height: 450px; */
    margin: 0 auto;


}

.about-container {
    /* border: 3px solid black; */
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin: 10px auto;
    flex-wrap: wrap;
}

.about-image-holder{
    /* border: 3px solid purple; */
    width: 48%;
    min-height: 350px;
    border-radius:25px;
    overflow: hidden;

    min-width: 350px;
    margin-bottom: 20px;
}

.about-image-holder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-text-holder {
    /* border: 3px solid blue; */
    width: 48%;
    min-height: 350px;
    min-width: 350px;
}

.about-text-holder h2{
    background: var(--light-text-color);
    border-left: 5px solid var(--main-color);
    border-right: 5px solid var(--main-color);
    color: var(--main-color);
    padding: 20px;
}

.about-text-holder p{
    margin: 20px 0;
}

.about-text-holder ul {
    /* text-decoration: none; */
    list-style: none;
    margin: 0 0 20px 0;
}

.about-us-icons {
    color: var(--main-color);
    margin: 0 10px 0 0;
}

.about-banner-section {
    /* border: 3px solid tomato; */
    height: 250px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    background: var(--gray-gradient), url(./img/about3-blur.jpg);
    background-size: cover;
    background-position: bottom right;
}

.about-banner-section p{
    margin: 20px 0;
}

.about-banner-section button{
    height: 60px;
    width: 60px;
    min-width: 60px;
    min-height: 60px;
    border-radius: 50%;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white-color);
    background: var(--main-color);
    border: 2px solid var(--white-color);
    animation: ripple 2s infinite;
    /* margin: 0 auto; */
}


.mid {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 20px auto;
    margin-top: 50px;
    height: 50vh ;
}

.dumb-videos h3 {
    color: white;
    padding-bottom: 10px;
    font-weight: bolder;
    font-family: cursive;
}


.explorefoods {
    /* border: 3px solid black; */
    /* height: 550px; */
    width: 90%;
    margin: 0 auto;
}

.explorefoods-container {
    /* border: 3px solid tomato; */
    /* height: 350px; */
    padding: 15px 0;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.explorefoods h2{
    text-align: center;
}

.explorefoods p{
    padding: 0 20px;
    margin: 15px;
}

.explorefoods-card{
    width: 30%;
    min-width: 250px;
    /* border: 3px solid purple; */
    /* margin-bottom: 10px; */
}

.explorefoods-card-imageholder{
    /* border: 3px solid black; */
    height: 200px;
    
    overflow: hidden;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
}

.explorefoods-card-imageholder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}




.foodcard-title {
    /* font-weight: bolder !important; */
    display: block;
    /* font-family: cursive; */
    font-weight: bolder;
    font-size: 20px;
}
.foodcard-time{
    display: block;
    margin: 8px 0;
}


.foodcard-price{
    margin: 5px 0;
    border-bottom: 0.5px solid var(--light-text-color);
    padding-bottom: 5px;
}


.foodcard-price span{
    color: var(--text-color);
    text-decoration: line-through;
    /* text-align: left; */
}

.faq{
    width: 100%;
    /* margin: 0 auto; */
    padding: 30px;
}

.faq h2 {
    text-align: center;
    margin-bottom: 15px;
}

.faq-items-title {
    margin: 10px 0;
    text-align: justify;
    display: block;
    font-weight: bolder;
    font-size: 20px;
}

.faq-items-title i{
    color: var(--main-color);
    margin-right: 6px;
}

.faq-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.faq-items {
    width: 49%;
}

.faq-items p{
    text-align: justify;
}

.cta-section{
    /* border: 3px solid tomato; */
    width: 90%;
    margin: 0 auto;
}

.cta-showcase{
    /* border: 3px solid black; */
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: var(--gradient), url("./img/cta.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed !important;
    color: var(--white-color);
    position: relative;
}

.cta-notice{
    text-align: center;
    padding: 30px 0;
}

.cta-notice h2{
    color: var(--main-color-dark);
    font-weight: bolder;
    font-size: 35px;
}

.cta-notice p{
    margin: 20px 0;
}

.cta-input-holder{
    display: flex;
    justify-content: center;
    /* border-radius: 50px; */
}

.cta-input-holder input{
    padding: 15px 10px;
    width: 200px;
    min-width: 100px;
    transition: all 0.5s ease;
    outline: none;
    border-top-left-radius: 15px ;
    border-bottom-left-radius: 15px;
    border: 0.4px solid rgba(0, 0, 0, 0.496);
}

.cta-input-holder input:hover {
    width: 250px;
}

.cta-input-holder button{
    background: var(--main-color);
    color: var(--white-color);
    border: 2px solid var(--main-color);
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.cta-input-holder button:hover{
    background: transparent;
    color: var(--main-color);
    /* font-weight: bolder; */
}

/* .faq-container{

} */

/* .faq-t  {

} */

.icon {
    font-size: 30px;
    color: rgba(255, 255, 255, 0.816);
    transition: all 2s ease;
    transform: translateY(5px);
}

.gototop:hover {
    opacity: 0.7;
}

footer {
    background: var(--main-color);
    padding: 40px 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    color: var(--white-color); 
}

/* footer button {
    border: 2px solid rgba(255, 255, 255, 0.692);
    background: transparent;
    color: var(--white-color);
    transition: all 0.5s ease;
    width: 100%;
    justify-content: space-between;
    display: flex;
    border-radius: 18px;
} */

footer a{
    text-decoration: none;
}

footer button:hover {
    background: var(--main-color-dark);
    width: 120%;
    /* justify-content: space-between; */
}

.footer-icon-holder {
    /* border: 3px solid white; */
    /* height: 60px;
    width: 200px; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin: 30px 0 30px 0 !important;
}

.gototop i {
    display: none;
}

.footer-icon-holder a{
    text-decoration: none;
    color: #fff;
}

.icon-container {
    display: block;
    border: 2px solid var(--white-color);
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 5px;
}

.perez {
    text-decoration: none;
    color: #fff;
    /* transition: all 1s ease; */
    padding-left: 5px;
}

/* .perez:hover {
    scale: 120%;
} */

.icon-container:hover {
    background: var(--main-color-dark);
}


.container{
    width: 100%;
    /* height: 40vh; */
    /* border: 2px solid black; */
    /* background: #001660; */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 50px 0;

}

.container form{
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 2vw 4vw;
    width: 90%;
    max-width: 600px;
    border-radius: 20px;
}

.container form h3{
    color: #555;
    font-weight: 800;
    margin-bottom: 20px;
}

.container form input, .container form textarea{
    border: 0;
    margin: 10px 0;
    padding: 20px;
    outline: none;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 16px;

}

.container form button{
    padding: 15px;
    background: #ff5361;
    color: #fff;
    font-size: 18px;
    border: 0;
    outline: none;
    cursor: pointer;
    width: 150px;
    margin: 20px auto 0;
    border-radius: 30px;
}

.fab{
    position: fixed;
    bottom: 25px;
    right: 25px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background: var(--main-color);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0px;
    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.277);
    z-index: 3;
    cursor: pointer;
    opacity: 0.8;
    transition: all 1s ease;
    /* backdrop-filter: blur(5px); */
}

.fab-active{
    opacity: 1 !important;
    transition: all 1s ease;
    scale: 1.05;
    /* box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.8); */
}

.fab-kaisen{
    transform: translateX(200%);
    opacity: 0;
    transition-delay: 0.7s;
}

.fab img{
    width: 45%;
    /* transform: rotate(45deg); */
    transition: 0.4s;
    z-index: 3;
    /* opacity: 0.9; */
    transition: all 0.5s ease;
    /* height: 30px; */
}

.fab img:hover{
    cursor: pointer;
}

.box{
    position: fixed;
    bottom: 44px;
    right: 15px;
    height: 0px;
    /* transition-delay: 0.3s; */
    width: 80px;
    transition: all 0.5s;
    /* transition: 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding: 30px; */
}

.item{
    overflow: hidden;
    border-radius: 50%;
    transition: all 0.5s ease;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    opacity: 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

.item img{
    width: 50%;
    transition: all 0.8s ease;

}

.item1{
    /* transition-delay: 0.2s; */
    /* transition: all 0.5s ease; */
    opacity: 1;
    background: #1565c0;
}


.item2{
    /* transition-delay: 0.2s; */
    background: #ff4336;
    opacity: 1;
}

.item3{
    /* transition-delay: 0.2s; */
    background: #29b6fc;
    opacity: 1;
}

.item4{
    /* transition-delay: 0.2s; */
    background: green;
    margin-bottom: 69px;
    opacity: 1;
}

.item:hover{
    cursor: pointer;
    background: black;
}

.item:hover img{
    /* transform: rotate(360deg); */
    transition: all 0.8s ease;
    width: 60%;
}

.box-active{
    height: 290px;
    transition: all 0.5s;
    /* padding-bottom: 50px; */
}

.fab-active img{
    transform: rotate(135deg);
    width: 40%;
}

.hidde{
    z-index: -3;
}

/* .footer{
    margin: 20px auto;
    width: 100%;
    border: 2px solid black;
    padding: 10px auto;
}

.footer-icon-holder{
    width: 100%;
    justify-content: space-between;
    text-align: center;
} */

/* .stuff {
    background: url(./img/food-eat.gif) rgba(165, 42, 42, 0.411) no-repeat center;
    height:401px;
    width: 50%;
} */


/* Header counter section ends here */

#preloader{
    /* background: #000 url(./img/circle-loader.gif) no-repeat center; */
    /* background-size: 15%; */
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 100;
    background: rgba(124, 0, 74, 0.37);
    background: rgba(235, 223, 237, 0.6);
    backdrop-filter: blur(10px);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 1s ease;
}


.rotary{
    width: 90px;
    height: 90px;
    border: 5px solid var(--main-color);
    border-bottom:5px solid rgba(138, 0, 55, 0.246);
    /* border-bottom:5px solid ; */
    border-radius: 50%;
    animation: turnloader 2s linear infinite forwards;
}

@keyframes turnloader {
    0%{transform: rotate(-700deg);}
    100%{transform: rotate(0deg);}
}

@media screen and (max-width: 500px) {
    .rotary{
        width: 60px;
        height: 60px;
        /* scale: 0.7; */
    }
}


/* .mobile-true{
    display: none;
} */

.landscape-mobile{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 110;
    background: tomato;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    overflow: hidden;
}

.landscape-mobile span{
    position: absolute;
    bottom: 20px;
    color: #333;
    opacity: 0;
}

.device{
    width: 200px;
    border-radius: 15px;
    height: 100px;
    background: #000;
    border: 2px solid #fff;
    color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    animation: mobile-turn 2.5s ease infinite forwards;
    scale: 0.7;
}

@keyframes mobile-turn {
    0%{}
    100%{transform: rotate(90deg);}
}

@media screen and (max-height:300px) {
    .mobile-true header, .mobile-true main{
        display: none;
    }
    
    .landscape-mobile{
        display: flex;
    }
    /* @media (orientation: landscape){
        
    } */
}

.hidden{
    transform: translateY(15vh);
    opacity: 0;
    /* z-index: -200; */
    /* display: none; */
    /* display: default; */
    transition: all 1s ease;
}



.hidden.bannerh1{
    transform: translateX(-20vw);
}

.show.bannerh1{
    transform: translateX(0);
    /* opacity: 0; */
}

.hidden.bannerp{
    transform: translateX(30vw);
    /* opacity: 0; */
}

.show.bannerp{
    transform: translateX(0);
    /* opacity: 0; */
}

.btn.hidden{
    transform: translateY(0);
}

.counter.hidden{
    transform: translateY(0);
}

.banner-content.hidden{
    transform: translateY(0);
}

.about-text-holder.hidden.textshit{
    transform: translateX(30px);
}

.about-text-holder.show.textshit{
    transform: translateX(0);
}

.about-image-holder.hidden{
    transform: translateX(-100px);
}

.about-image-holder.hidden.img3{
    transform: translateX(100px);
}

.about-image-holder.show.img3{
    transform: translateX(0);
}

.about-image-holder.show{
    transform: translateX(0);
}

.cta-showcase.hidden{
    background-attachment: fixed;
    transform: none;
}

.cta-showcase.show{
    background-attachment: fixed !important;
    transform: none;
}

.cta-showcase h2.hidden{
    transform: translateY(30px);
}

.cta-showcase .btn.hidden{
    transform: translateY(30px);
}

.cta-showcase h2.show{
    transform: translateY(0);
}

.cta-showcase .btn.show{
    transform: translateY(0);
}

.show{
    transform: translateY(0);
    opacity: 1;
}

.hidden.gitt, .hidden.tweet, .hidden.linked{
    transform: translateY(0);
    /* transform: translateX(-50px); */
    opacity: 0;
    /* filter: blur(5px); */
    position: relative;
    scale: 0.5;
    transition: all 1s ease;
}

.linked{z-index: 3;}
.gitt{z-index: 2;}
.tweet{z-index: 1;}

.show.linked{
    transition-delay: 0.25s;
}

.show.gitt{
    transition-delay: 0.5s;
}

.show.tweet{
    transition-delay: 0.75s;
}

.show.gitt, .show.tweet, .show.linked{
    opacity: 1;
    scale: 1;
    /* filter: blur(0); */
}

@media screen and (max-width: 800px) {
    .hidden.bannerh1{
        transform: translateY(-70px);
    }
    
    .show.bannerh1{
        transform: translateY(0);
        /* opacity: 0; */
    }
    
    .hidden.bannerp{
        transform: translateY(70px);
        /* opacity: 0; */
    }
    
    .show.bannerp{
        transform: translateY(0);
        /* opacity: 0; */
    }

    .about-text-holder.hidden.textshit{
        transform: translateY(70px);
    }
    
    .about-text-holder.show.textshit{
        transform: translateY(0);
    }
    
    .about-image-holder.hidden{
        transform: translateY(70px);
    }
    
    .about-image-holder.hidden.img3{
        transform: translateY(70px);
    }
    
    .about-image-holder.show.img3{
        transform: translateY(0);
    }
    
    .about-image-holder.show{
        transform: translateY(0);
    }

    
    
}

.counter.hidden.i{
    transition-delay: 0.5s;
}
.counter.hidden.ii{
    transition-delay: 1s;
}
.counter.hidden.iii{
    transition-delay: 1.5s;
}
.counter.hidden.iv{
    transition-delay: 2s;
}

.subscription-backdrop{
    width: 100vw;
    height: 100vh;
    background: rgba(77, 6, 77, 0.3);
    position: fixed;
    background: transparent;
    background: rgba(77, 6, 77, 0.3);
    top: 0;
    left: 0;
    z-index: 20;
    transition: all 0.5s ease;
    backdrop-filter: blur(0);
    /* display: none; */
    animation: bgggx 0.5s ease forwards;
    overflow: hidden;
    display: none;
    opacity: 0;
}



.subscription-backdrop.appear{
    /* display: flex; */
    backdrop-filter: blur(5px);
    animation: bggg 0.5s ease forwards;
    opacity: 1;
}


.subscription{
    position: fixed;
    /* width: 100vw; */
    /* min-width: 200px; */
    /* height: 100vh; */
    /* border: 2px solid green; */
    background: transparent;
    z-index: 21;
    left: 0;
    top: 25vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s ease;
    display: none;
    opacity: 0;
    /* display: none; */
    animation: bgggx 0.5s ease forwards;
    /* top: 40%; */
    /* left: 40%; */
    /* top: -50%; */
    /* left: -50%; */
    /* transform: translate(50%, 50%); */
}

@keyframes bgggx {
    0%{}
    95%{
        /* opacity: 0; */
    }
    100%{
        /* opacity: 0; */
        visibility: hidden;
    }
}

.subscription.appear{
    opacity: 1;
    display: flex;
    animation: bggg 0.25s ease forwards;

}

@keyframes bggg {
    0%{
        /* opacity: 0; */
        visibility: visible;
    }



    100%{
        /* opacity: 1; */
    }
}

.subscription .successful{
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.914);
    border-radius: 20px;
    box-shadow: 0px 0px 10px #0005;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    scale: 0.65;
    position: relative;
    transition: all 0.25s ease;
}

.subscription.appear .successful{
    scale: 1;
}





.subscription .successful h2{
    font-size: 45px;
    color: rgb(124, 0, 74);
    transition: all 0.5s ease;
}

.subscription .successful h2{
    transform: translateY(-100px);
    opacity: 0;
}

.subscription.appear .successful h2{
    transform: translateY(0);
    opacity: 1;
}

.subscription .successful .check{
    transform: translateY(100px);
    transition: all 0.5s ease;
    opacity: 0;
}


.subscription.appear .successful .check{
    transform: translateY(0);
    opacity: 1;
}

.subscription .successful .check{
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    /* border: 2px solid green; */
    position: relative;
}

.subscription .successful .check i::after{
    position: absolute;
    content: "";
    /* border: 2px solid red; */
    width: 70px;
    height: 100%;
    z-index: 1;
    background: rgba(91, 0, 46, 1);
    opacity: 1;
    animation: textshit 2s ease infinite forwards;
}

.subscription .successful .check i{
    width: 70px;
    position: relative;
    height: 70px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    align-items: center;
    border-radius: 10px;
    color: #fff;
    background: rgba(91, 0, 46, 1);
    font-size: 30px;
}

@keyframes textshit {
    0%{transform: translateX(0);}
    40%{transform: translateX(20px);}
    /* 80%{transform: translateX(40px);} */
    98%{transform: translateX(100px);}
    99%{transform: translateX(0);
        filter: blur(5px);
    }
    100%{transform: translateX(0);}
    /* 100%{transform: translateX(0);} */
}

.chat-with-me{
    position: fixed;
    top: 20vh;
    right: -30px;
    color: #fff;
    height: 60px;
    width: 60px;
    /* padding: 10px; */
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transition: all 1s ease;
    display: none;
    /* overflow: hidden; */
}


@media screen and (max-width:600px) {
    .chat-with-me{
        display: flex;
    }
}

.chat-with-me-semicircle{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: transparent;
    border-radius: 50%;
    overflow: hidden;
    /* left: -200px; */
    box-shadow: 0px 0px 10px #000a;
    gap: 30px;
    height: 200px;
    width: 200px;
    /* flex-wrap: wrap; */
    padding: 20px;
    z-index: -1;
    scale: 0;
    transition: all 0.7s linear;
}

.chat-with-me:hover{
    transform: translate(-50vw, 50px);
}

.chat-with-me:hover .chat-with-me-semicircle{
    scale: 1;
    height: 200px;
    width: 200px;
    transform: rotate(360deg);
}

.chat-with-me-semicircle::after{
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    border: 65px solid rgba(154, 48, 85, 0.576);
    border: 65px solid #a82d4af6;
    /* opacity: 0.8; */
    /* backdrop-filter: blur(5px); */
    box-shadow: 0px 0px 10px #000a inset, 0px 0px 10px #0006;
    /* background: var(--main-color); */
    border-radius: 50%;
    /* scale: 0.5; */
}

.chat-with-me-semicircle::before{
    position: absolute;
    z-index: 1;
    content: "";
    width: inherit;
    height: inherit;
    background: transparent;
    border-radius: 50%;
    scale: 0.4;
}

.chat-with-me-semicircle div{
    position: absolute;
    width: 50px;
    /* background: var(--main-color); */
    opacity: 0;
    /* color: #fff; */
    /* background: #fff; */
    /* color: var(--main-color); */
    height: 50px;
    scale: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px double rgba(81, 6, 6, 0.221);
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    transition: all 0.5s ease;
    font-size: 23px;
    font-weight: bolder;
    /* padding: 10px; */
}

.chat-with-me-semicircle a{
    transition: all 0.5s ease;
    color: #fff;
    text-decoration: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.chat-with-me-semicircle a:hover{
    color: var(--main-color) !important;
}

.chat-with-me-semicircle div:hover{
    border: 2px solid transparent !important;
    /* width: 55px ;
    height: 55px; */
    scale: 1.05;
    background: #fff;
    box-shadow: 0px 0px 70px #0008;
}

.chat-with-me-semicircle div:hover a{
    color: var(--main-color) !important;
}

.chat-with-me-semicircle .whatsapp{
    top: 5px;
    transform: translateY(-100px);
}

.chat-with-me-semicircle .twitter{
    transform: translateY(100px);
    bottom: 5px;
}

.chat-with-me-semicircle .discordd{
    transform: translateX(-100px);
    left: 5px;
}

.chat-with-me-semicircle .instagram{
    transform: translateX(100px);
    right: 5px;
}

.chat-with-me:hover .chat-with-me-semicircle div{
    transform: none;
    opacity: 1;
}

.chat-with-me .oval{
    border-radius: 50%;
    background: var(--main-color);
    box-shadow: 0px 0px 10px var(--main-color);
    display: flex;
    width: 55px;
    height: 55px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.5s ease;
    opacity: 0.8;
}

.chat-with-me .oval i{
    position: relative;
    /* left: -11px; */
    transition: all 1s ease;
    font-size: 15px;
    transform: translateX(-11px);
}

.chat-with-me:hover .oval{
    opacity: 0;
}

.chat-with-me:hover .oval i{
    opacity: 0;
    transform: translateX(0);
}



.subscription .close{
    cursor: pointer;
    position: absolute;
    top: -70px;
    right: 0;
    font-size: 30px;
    color: #fff;
}

@media screen and (max-width: 450px) {
    .subscription.appear .successful{
        /* width: 150px; */
        scale: 0.75;
    }
}

@media screen and (max-height: 670px){
    .language, .langs{
        display: none;
    }

    .chat-with-me{
        display: none;
    }

    .scroll-down .nav-mobile{
        position: fixed !important;
        transform: none !important;
    }

    .scroll-up .nav-mobile{
        position: fixed !important;
        transform: none !important;
    }

    .mobile-link-holder{
        /* height: 70vh !important; */
        overflow: scroll;
        border-bottom: 2px solid rgba(45, 0, 0, 0.751);
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.216);
    }

    .mobile-link-holder::-webkit-scrollbar{
        width: 0px;
        height: 0px;
    }
}




body{
    max-width: 1500px;
    /* visibility:; */
    margin: 0 auto;
    /* opacity: 0.2; */
    /* display: none; */
}

body::-webkit-scrollbar{
    width: 8px;
    background: rgba(229, 9, 9, 0);
}


body::-webkit-scrollbar-thumb{
    /* border-radius: 0.5em; */
    -webkit-transition: all 1s ease;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8);
    background: rgba(108, 5, 38, 0.8);
}

html{
    background: #fff;
    user-select: none;
}


body::-webkit-scrollbar-thumb:hover{
    background: rgba(62, 3, 22, 1);
    /* width: 15px; */
}

body::-webkit-scrollbar-track{
    background: rgba(255, 0, 0, 0.15);
}