* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'iranyekanx', sans-serif;
}

@font-face {
    font-family: 'iranyekanx';
    src: url("https://tasvir.yektanet.com/media/iframes/DCn/19WQ/24Qj/IRANYEKANX-MEDIUM.woff2") format("woff");
}

body,
html {
    width: 100%;
    height: 100%;
    scrollbar-color: transparent transparent;
}

.content {
    opacity: 0;
    position: fixed;
    z-index: -9999999999;
    right: 15px;
    bottom: 0;
    top: 0;
    width: 100px;
    height: 120px;
    overflow-y: hidden;
}

.item {
    opacity: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    /*border: 2px solid blue;*/
    height: 120px;
}

.bg {
    background: radial-gradient(circle at center, #FF0000 0%, #2D0303 100%);
    position: fixed;
    left: 10px;
    bottom: 5px;
    width: calc(100% - 20px);
    height: 112.74px;
    border-radius: 13px;
    z-index: -9999999999;
    border: 1px solid #FF0000;
}


.product {
    position: absolute;
    width: 100%;
    height: 110px;
    object-fit: contain;
    object-position: bottom;
    bottom: 12.5px;
    left: 50%;
    transform: translateX(-50%);
}


@keyframes tapesh {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.15;
    }
    100% {
        scale: 1;
    }
}

.videoContainer {
    left: 50%;
    transform: translateX(-50%);
    bottom: 150px;
    height: 141.31px;
    width: 185.7px;
    position: fixed;
}

.videoBox {
    width: 100%;
    height: 100%;
    z-index: 10;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid #FF0000;
}

.unmuteButton {
    position: fixed;
    /*border: 2px solid green;*/
    width: 20px;
    rotate: -180deg;
    right: 5px;
    top: 5px;
    height: 20px;
    z-index: 999999999999999;
    opacity: 0.5;
}

.productBG {
    position: fixed;
    right: 20px;
    background: rgba(216, 55, 55, 0.52);
    min-width: 67.6px;
    width: calc(50% - 93px - 30px);
    height: 77.2px;
    bottom: 17.5px;
    border: 1px solid #CF5959;
    border-radius: 11px;
}

.overline {
    font-family: 'iranyekanx', sans-serif;
    color: black;
    background: white;
    border: 1px solid #2D0303;
    width: 90%;
    text-align: center;
    position: absolute;
    bottom: -7.5px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: bolder;
    padding-block: 1.5px;
    padding-inline: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999999999999;
}

.leftContainer {
    position: fixed;
    left: 20px;
    height: 140px;
    width: calc(50% - 93px - 30px);
    z-index: 9999;
    bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.logo {
    min-width: 40px;
    max-width: 65px;
    max-height: 60px;
    object-fit: contain;
}

.cta {
    background: #FF0000;
    padding-block: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'iranyekanx', sans-serif;
    font-weight: 900;
    color: white;
    border: 1px solid #2D0303;
    font-size: 0.75rem;
    border-radius: 200px;
    min-width: 16vw;
    animation: tapesh 1s infinite linear;
}

.header {
    font-family: 'iranyekanx', sans-serif;
    color: white;
    width: 90%;
    text-align: center;
    font-size: clamp(1.5vw, 3vw, 4vw);
    font-weight: bolder;
}

.subheader {
    font-family: 'iranyekanx', sans-serif;
    color: white;
    width: 90%;
    text-align: center;
    font-size: clamp(0.75vw, 1.5vw, 2vw);
    font-weight: normal;
}