@-webkit-keyframes zoom-in {
    from {
        opacity: 0;
        -webkit-transform: translateZ(100px);
        transform: translateZ(100px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes zoom-in {
    from {
        opacity: 0;
        -webkit-transform: translateZ(100px);
        transform: translateZ(100px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@-webkit-keyframes zoom-out {
    from {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    to {
        opacity: 0;
        -webkit-transform: translateZ(-100px);
        transform: translateZ(-100px);
    }
}

@keyframes zoom-out {
    from {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    to {
        opacity: 0;
        -webkit-transform: translateZ(-100px);
        transform: translateZ(-100px);
    }
}

.hero-headline {
    font-weight: 900;
    font-size: 34px;
    color: var(--txt1-col);
    line-height: 60px;
    position: relative;
    z-index: 1;
    padding-right: 60px
}

.hero-headline::before {
    content: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 34\ 35\'\ fill=\'none\'%3E%3Ccircle\ cx=\'8.82059\'\ cy=\'25.8987\'\ r=\'8.72635\'\ fill=\'%238DDECF\'/%3E%3Ccircle\ cx=\'26.2732\'\ cy=\'14.6792\'\ r=\'7.06418\'\ fill=\'%23C0F1EA\'/%3E%3Ccircle\ cx=\'8.82059\'\ cy=\'3.87527\'\ r=\'3.73978\'\ fill=\'%23C0F1EA\'/%3E%3C/svg%3E);
    position: absolute;
    height: 50px;
    width: 50px;
    right: 0;
    z-index: -1
}

.hero-words-wrapper {
    position: relative;
    display: inline-block;
    perspective: 300px;
    -webkit-perspective: 300px;
    right: 50%;
    transform: translateX(50%)
}

.hero-words-wrapper::before {
    content: url(../img/brush-stroke.svg);
    position: absolute;
    width: 80%;
    height: auto;
    left: 50%;
    transform: translate(-50%,-5px)
}

.hero-words-wrapper b {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    white-space: nowrap;
    opacity: 0;
    color: #228a65;
    width: 350px;
    font-weight: 900;
    text-align: center
}

b.is-visible {
    position: relative;
    opacity: 1;
    -webkit-animation: zoom-in .8s;
    animation: zoom-in .8s
}

b.is-hidden {
    -webkit-animation: zoom-out .8s;
    animation: zoom-out .8s
}

.col2-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 25px
}

.myvideo {
    width: 100%;
    box-shadow: 0 0 14px 0 rgb(0 0 0 / 3%);
    border-radius: 8px;
    overflow: hidden
}

.myvideo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

video[poster] {
    object-fit: cover
}

.hero-div {
    display: flex;
    flex-direction: column;
    gap: 50px
}

.hero-div>.txt {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.hero-div>.txt>.descrip {
    text-align: justify;
    color: #686f82;
    font-weight: 600
}

.h-icon-div {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 25px
}

.h-icon {
    display: flex;
    align-items: center;
    gap: 10px
}

.h-icon>svg {
    width: 35px;
    height: auto;
    position: relative
}

.h-icon>p {
    color: #4d4d4d;
    font-weight: 700;
    font-size: 17px
}

.heartbeat {
    -webkit-animation: heartbeat 4s ease-in-out infinite both;
    animation: heartbeat 4s ease-in-out infinite both
}

@-webkit-keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    5% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    8.5% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    16.5% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    22.5% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    5% {
        -webkit-transform: scale(0.91);
        transform: scale(0.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    8.5% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    16.5% {
        -webkit-transform: scale(0.87);
        transform: scale(0.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    22.5% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
}

.carousel-max-size {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    background-color: transparent;
    overflow: hidden;
    padding: 50px 100px;
    display: flex;
    gap: 25px;
    flex-direction: column
}

.et-small-carousel {
    padding: 100px
}

.owl-carousel {
    direction: ltr;
    width: 100%;
    max-width: 100%
}

.owl-stage-outer {
    padding-top: 20px
}

.owl-nav,.owl-dots {
    display: none
}

.owl-dots {
    width: 100%;
    height: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 25px
}

button.owl-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #37c2cc!important;
    transition: all .1s;
    opacity: .2
}

.owl-dot.active {
    width: 12px;
    height: 12px;
    opacity: 1
}

.owlc-4 .owl-dots {
    display: none!important
}

.item-img {
    width: 100%;
    height: fit-content;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 14px 0 rgb(0 0 0 / 3%);
    position: relative;
    direction: rtl;
    padding: 0 15px 10px 15px;
    display: grid;
    gap: 10px
}

.item-img-cv-a {
    display: grid;
    gap: 10px
}

.item-img-cover {
    position: relative;
    transform: translateY(-10px);
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 6/4
}

.item-img-cover img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.discount {
    padding: 5px 15px;
    border-radius: 25px;
    background-color: #ef5353;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    position: absolute;
    left: 10px;
    top: -10px
}

.et-img-discount {
    padding: 5px 15px;
    border-radius: 25px;
    background-color: #ef5353;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    position: absolute;
    right: 10px;
    top: 20px
}

hr {
    height: 0;
    border-width: 0;
    width: 100%
}

hr.blc {
    border-top: 1px solid #eee
}

hr.wht {
    background-color: #fff;
    opacity: .5
}

.item-img h3 {
    color: var(--txt3-h1);
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-top: -10px
}

.item-img p {
    color: #79899e;
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.item-star {
    position: relative;
    color: #50565f;
    font-weight: 600;
    font-size: 13px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.item-star::before {
    position: relative;
    right: 0;
    top: 6px;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    content: url(data:image/svg+xml,%3Csvg\ width=\'17\'\ height=\'18\'\ viewBox=\'0\ 0\ 17\ 18\'\ fill=\'none\'\ xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath\ d=\'M16.4999\ 11.0525C16.4999\ 14.4318\ 13.7605\ 17.1712\ 10.3812\ 17.1712C7.00189\ 17.1712\ 4.26245\ 14.4318\ 4.26245\ 11.0525C4.26245\ 7.67322\ 7.00189\ 4.93377\ 10.3812\ 4.93377C13.7605\ 4.93377\ 16.4999\ 7.67322\ 16.4999\ 11.0525Z\'\ fill=\'%23FFF1DC\'/%3E%3Cpath\ d=\'M6.73529\ 1.44967C7.16533\ 0.569491\ 8.41973\ 0.56949\ 8.84977\ 1.44967L10.062\ 3.93086C10.2335\ 4.28182\ 10.5679\ 4.52481\ 10.9547\ 4.57943L13.6891\ 4.96562C14.6591\ 5.10262\ 15.0467\ 6.29563\ 14.3425\ 6.97661L12.3573\ 8.89626C12.0765\ 9.16779\ 11.9488\ 9.56096\ 12.0164\ 9.94567L12.494\ 12.6655C12.6635\ 13.6304\ 11.6486\ 14.3677\ 10.7834\ 13.9084L8.34424\ 12.6136C7.99923\ 12.4305\ 7.58583\ 12.4305\ 7.24082\ 12.6136L4.80168\ 13.9084C3.93642\ 14.3677\ 2.92158\ 13.6304\ 3.09103\ 12.6655L3.56871\ 9.94567C3.63627\ 9.56096\ 3.50852\ 9.16779\ 3.22773\ 8.89626L1.24259\ 6.97661C0.538375\ 6.29563\ 0.926007\ 5.10262\ 1.896\ 4.96562L4.63036\ 4.57943C5.01712\ 4.52481\ 5.35157\ 4.28182\ 5.52304\ 3.93086L6.73529\ 1.44967Z\'\ fill=\'%23FEA529\'/%3E%3C/svg%3E%0A)
}

.item-details {
    background-color: #eee;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1px;
    justify-content: center
}

.item-details>div {
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px
}

.item-details>div>span {
    font-size: 14px;
    font-weight: 600;
    color: #50565f
}

.item-details > div > span:nth-child(2) {
    font-weight: 800
}

.item-details>div>svg {
    width: 20px;
    height: 20px;
    transform: translateY(-1px)
}

.item-price-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse
}

.item-discount {
    height: 25px;
    border-radius: 5px;
    background-color: #83CC7733;
    color: #73b568;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    position: relative;
    overflow: hidden;
    align-self: flex-end
}

.item-del-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    min-height: 40px
}

.item-del-price>del {
    font-size: 13px;
    font-weight: 800;
    color: #FF000055
}

.item-price {
    display: flex;
    align-items: center;
    gap: 5px
}

.item-price>span:first-child {
    font-size: 18px;
    color: var(--txt1-col);
    font-weight: 800;
    line-height: 5px
}

.item-price>span:last-child {
    font-size: 12px;
    color: var(--txt2-col);
    font-weight: 400
}

.item-a {
    width: 100%;
    height: 40px;
    font-size: 14px;
    font-weight: 800;
    color: #d83861;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
    background-color: #fff;
    cursor: pointer
}

.item-a:hover {
    background-color: #D8386122
}

.bg-black {
    background-color: #eceef0;
    width: 100%;
    min-height: 500px;
    border-radius: 25px;
    padding: 50px;
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 50px;
    position: relative
}

.et-small-carousel>.bg-black {
    min-height: 400px;
    gap: 25px
}

.owl-carousel.off {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 25px;
    row-gap: 35px;
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
    width: fit-content
}

.owl-carousel.off .item-img:nth-child(even) {
    transform: translateY(-9px)
}

.owl-carousel.off .item-img:nth-child(odd) {
    transform: translateY(9px)
}

.mobile-carousel {
    direction: ltr;
    width: 100%;
    max-width: 100%
}

.owlc-2 {
    width: 100%;
    overflow: visible
}

.owlc-2txt {
    flex-direction: column;
    width: 100%;
    align-items: flex-start
}

.owlc-2txt>.txt>.descrip {
    color: #686f82;
    font-weight: 600;
    text-align: justify
}

.item-owlc-2 {
    padding: 0 15px 15px 15px;
    width: fit-content
}

.item-owlc-2 .item-img-cover {
    width: 100%;
    height: auto;
    max-height: 250px;
    max-width: 260px;
    aspect-ratio: 6/4
}

.id-owlc-2 {
    grid-template-columns: repeat(4,1fr);
    height: 20px;
    overflow: hidden;
    margin-top: -10px
}

.id-owlc-2>div {
    height: 20px;
    overflow: hidden
}

.id-owlc-2>div>span {
    font-size: 12px
}

.owlc-2-item-a {
    width: 100%;
    height: 40px;
    font-size: 13px;
    font-weight: 800;
    background-color: var(--first-22);
    color: var(--first);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
    cursor: pointer
}

.cdown-ends {
    background-color: #fff
}

.a-cdown-ends {
    background-color: #f4f4f4;
    color: #838383;
    cursor: default
}

.img-cdown-ends>img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transform: translateY(10px);
    border-radius: 8px
}

.et-birthday-timer {
    display: flex;
    gap: 5px!important
}

.et-birthday-timer>div {
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--txt1-col);
    justify-content: center;
    background-color: #eceef0;
    border-radius: 7px;
    flex-direction: column;
    height: 70px;
    width: 50px
}

.et-birthday-timer>div>span:first-child {
    font-weight: 900;
    font-size: 18px
}

.et-birthday-timer>div>span:last-child {
    font-weight: 600;
    font-size: 13px
}

@media screen and (max-width: 768px) {
    .et-birthday-timer {
        width:100%;
        justify-content: center
    }
}

.item-owlc-3 {
    width: 100%;
    height: fit-content;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 14px 0 rgb(0 0 0 / 3%);
    display: grid;
    gap: 10px;
    direction: rtl;
    padding: 15px 15px 10px 15px;
    overflow: hidden
}

.item-owlc-3-img-cover {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.item-owlc-3-img-cover img {
    width: auto!important;
    height: 40px;
    border-radius: 5px
}

.time-of-course {
    height: 35px;
    border-radius: 5px;
    border: 1px solid #d2d3d5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    color: #474677;
    font-weight: 800;
    font-size: 12px;
    overflow: hidden
}

.time-of-course::before {
    content: url(data:image/svg+xml,%3Csvg\ width=\'21\'\ height=\'21\'\ viewBox=\'0\ 0\ 21\ 21\'\ fill=\'none\'\ xmlns=\'http://www.w3.org/2000/svg\'%3E%3Crect\ x=\'7\'\ y=\'7\'\ width=\'13.7834\'\ height=\'13.7834\'\ rx=\'6.8917\'\ fill=\'%233A76E9\'\ fill-opacity=\'0.3\'/%3E%3Cpath\ fill-rule=\'evenodd\'\ clip-rule=\'evenodd\'\ d=\'M7.31032\ 5.61182C7.57914\ 5.49427\ 7.70177\ 5.18105\ 7.58422\ 4.91222C7.46666\ 4.6434\ 7.15344\ 4.52077\ 6.88462\ 4.63833C5.28609\ 5.33735\ 3.92972\ 6.48523\ 2.97417\ 7.92239C2.81172\ 8.16672\ 2.8781\ 8.49647\ 3.12242\ 8.65892C3.36675\ 8.82137\ 3.6965\ 8.75499\ 3.85895\ 8.51067C4.70275\ 7.24159\ 5.90049\ 6.22833\ 7.31032\ 5.61182ZM14.1152\ 4.63833C13.8463\ 4.52077\ 13.5331\ 4.6434\ 13.4156\ 4.91222C13.298\ 5.18105\ 13.4206\ 5.49427\ 13.6895\ 5.61182C15.0993\ 6.22833\ 16.297\ 7.24159\ 17.1408\ 8.51067C17.3033\ 8.75499\ 17.633\ 8.82137\ 17.8774\ 8.65892C18.1217\ 8.49647\ 18.1881\ 8.16672\ 18.0256\ 7.92239C17.0701\ 6.48523\ 15.7137\ 5.33735\ 14.1152\ 4.63833ZM15.4522\ 16.2231C16.3418\ 15.1271\ 16.8749\ 13.7301\ 16.8749\ 12.2085C16.8749\ 8.68765\ 14.0207\ 5.83346\ 10.4999\ 5.83346C6.97909\ 5.83346\ 4.12491\ 8.68765\ 4.12491\ 12.2085C4.12491\ 13.73\ 4.65797\ 15.1271\ 5.54753\ 16.2231L4.36986\ 18.3235C4.22637\ 18.5794\ 4.31752\ 18.9032\ 4.57344\ 19.0467C4.82936\ 19.1902\ 5.15314\ 19.0991\ 5.29663\ 18.8431L6.31846\ 17.0207C7.43779\ 17.9941\ 8.90002\ 18.5835\ 10.4999\ 18.5835C12.0998\ 18.5835\ 13.562\ 17.9941\ 14.6813\ 17.0207L15.7032\ 18.8432C15.8467\ 19.0991\ 16.1705\ 19.1902\ 16.4264\ 19.0467C16.6823\ 18.9032\ 16.7735\ 18.5794\ 16.63\ 18.3235L15.4522\ 16.2231ZM10.4999\ 8.13535C10.7933\ 8.13535\ 11.0312\ 8.3732\ 11.0312\ 8.6666V11.924L12.9196\ 13.1829C13.1637\ 13.3457\ 13.2297\ 13.6755\ 13.0669\ 13.9196C12.9042\ 14.1637\ 12.5743\ 14.2297\ 12.3302\ 14.067L10.2052\ 12.6503C10.0574\ 12.5518\ 9.96865\ 12.3859\ 9.96865\ 12.2083V8.6666C9.96865\ 8.3732\ 10.2065\ 8.13535\ 10.4999\ 8.13535Z\'\ fill=\'%236197FF\'/%3E%3C/svg%3E%0A);
    position: relative;
    margin-left: 5px
}

.item-owlc-3 h3 {
    color: var(--txt3-h1);
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-top: 25px
}

.item-owlc-3 p {
    color: #79899e;
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.item-owlc-3 button {
    color: #6fa9df;
    background-color: transparent
}

.item-owlc-3 button:hover {
    background-color: #6FA9DF22
}

.item-owlc-4 {
    width: 100%;
    height: fit-content;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 14px 0 rgb(0 0 0 / 3%);
    position: relative;
    padding: 0 15px 10px 15px;
    display: grid;
    gap: 10px;
    direction: rtl
}

.item-owlc-4-img-cover {
    position: relative;
    transform: translateY(-10px);
    border-radius: 15px;
    overflow: hidden;
    width: 100%;
    height: auto;
    aspect-ratio: 6/4
}

.item-owlc-4-img-cover img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.item-owlc-4 h3 {
    color: var(--txt3-h1);
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-top: -10px
}

.item-owlc-4 p {
    color: #79899e;
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    height: 85px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical
}

.item-owlc-4 button {
    color: #6fa9df;
    background-color: transparent
}

.item-owlc-4 button:hover {
    background-color: #6FA9DF22
}

.social-banners {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 25px
}

.social-banner {
    width: 100%;
    height: 130px;
    border-radius: 25px;
    position: relative
}

.social-banner.instagram {
    background: #f3642d;
    background: -moz-linear-gradient(left,#f3642d 0%,#e81ddd 100%);
    background: -webkit-linear-gradient(left,#f3642d 0%,#e81ddd 100%);
    background: linear-gradient(to right,#f3642d 0%,#e81ddd 100%)
}

.social-banner.telegram {
    background: #0081f1;
    background: -moz-linear-gradient(left,#0081f1 0%,#005ec5 100%);
    background: -webkit-linear-gradient(left,#0081f1 0%,#005ec5 100%);
    background: linear-gradient(to right,#0081f1 0%,#005ec5 100%)
}

.social-banner>img {
    width: 230px;
    position: absolute;
    bottom: 0;
    right: 0
}

.social-banner>.txt {
    width: 100%;
    height: 100%;
    padding: 15px 230px 15px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px
}

.social-banner>.txt>p {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    text-align: center
}

.social-banner>.txt>a {
    color: #f3642d;
    background-color: #fff;
    height: 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
    padding: 10px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s
}

.social-banner>.txt>a:hover {
    background-color: #ffffffee
}

.social-banner.instagram>.txt>a {
    color: #f3642d
}

.social-banner.telegram>.txt>a {
    color: #0081f1
}

.ai-banners {
    width: 100%;
    height: 200px;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    transition: all .3s
}

.ai-banners:hover {
    opacity: .9
}

.ai-banners>img {
    width: 100%;
    object-fit: cover;
    object-position: center right
}

.ai-banners-bot {
    width: 100%;
    height: 240px;
    border-radius: 25px;
    overflow: hidden;
    display: flex;
    transition: all .3s
}

.ai-banners-bot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right
}

.news-shop {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px
}

.news-container {
    width: 100%;
    height: fit-content;
    border-radius: 8px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 14px 0 rgb(0 0 0 / 3%);
    display: grid;
    gap: 10px;
    direction: rtl;
    padding: 25px;
    overflow: hidden
}

.news-divs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.item-news {
    width: 100%;
    border-radius: 8px;
    padding: 10px;
    overflow: hidden;
    border: 1px solid transparent;
    display: flex;
    gap: 10px;
    transition: all .3s;
    cursor: pointer
}

.item-news:hover {
    border: 1px solid #f0f0f0;
    box-shadow: 0 0 14px 0 rgb(0 0 0 / 3%)
}

.item-news-img-cover {
    width: 150px;
    height: 85px;
    display: block
}

.item-news-img-cover>img {
    width: 150px;
    height: 85px;
    border-radius: 8px;
    object-fit: cover;
    object-position: center
}

.item-news>.txt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-evenly;
    height: 85px;
    overflow: hidden
}

.item-news>.txt>h3 {
    color: var(--txt3-h1);
    font-weight: 800;
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.item-news>.txt>p {
    color: #79899e;
    font-weight: 400;
    font-size: 14px;
    text-align: justify;
    height: 40px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical
}

.shop-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    direction: rtl;
    padding: 0 25px;
    overflow: hidden;
    justify-content: space-between
}

.news-a-btn {
    width: 100%;
    margin-top: 10px
}

@media screen and (max-width: 1300px) {
    .carousel-max-size {
        padding:35px 50px
    }

    .et-small-carousel {
        padding: 100px 50px
    }
}

@media screen and (max-width: 1200px) {
    .mobile-carousel {
        overflow-x:hidden;
        overflow-y: visible
    }

    .bg-black {
        grid-template-columns: 1fr;
        min-height: 200px;
        height: fit-content
    }

    .owlc-2txt {
        display: grid;
        grid-template-columns: 1fr 160px;
        align-items: flex-start;
        gap: 25px
    }

    .owlc-2txt>a {
        width: 160px
    }

    .item-owlc-2 {
        width: 100%
    }

    .social-banner {
        height: 150px
    }

    .social-banner>.txt>p {
        font-size: 18px
    }

    .item-owlc-2 .item-img-cover {
        max-width: 100%
    }
}

@media screen and (max-width: 1024px) {
    .hero-headline {
        padding-right:0;
        text-align: center
    }

    .hero-headline::before {
        right: -60px
    }

    .col2-grid {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .hero-div {
        gap: 25px;
        order: 2
    }

    .hero-div>.txt {
        justify-content: center;
        width: 100%;
        align-items: center
    }

    .carousel-max-size,.et-small-carousel {
        padding: 25px
    }

    .owl-dots {
        display: flex
    }

    .owlc-4 .owl-dots {
        display: flex!important
    }

    .bg-black {
        padding: 25px;
        gap: 25px
    }

    .owl-carousel.off {
        left: 25px
    }

    .social-banners {
        grid-template-columns: 1fr
    }

    .social-banner {
        height: 200px
    }

    .social-banner>.txt>p {
        font-size: 20px
    }

    .ai-banners {
        height: fit-content;
        border-radius: 15px
    }

    .news-shop {
        grid-template-columns: 1fr
    }

    .news-divs {
        grid-template-columns: 1fr;
        margin: 25px 0
    }

    .shop-container {
        padding: 0
    }
}

@media screen and (max-width: 768px) {
    .owlc-2txt {
        grid-template-columns:1fr
    }

    .headline>a {
        display: none
    }

    .res-btn {
        display: flex;
        width: 100%
    }
}

@media screen and (max-width: 600px) {
    .h-icon-div {
        grid-template-columns:1fr;
        gap: 20px
    }

    .h-icon>p {
        font-size: 15px
    }

    .social-banner {
        height: fit-content
    }

    .social-banner>img {
        width: auto;
        height: 150px;
        position: relative;
        top: -15px!important;
        right: 50%;
        transform: translateX(50%);
        max-width: 100%
    }

    .social-banner>.txt {
        padding: 15px
    }

    .social-banner>.txt>p {
        font-size: 20px
    }

    .social-banner>.txt>a {
        width: 100%
    }

    .ai-banners-bot {
        width: 100%;
        height: auto
    }

    .ai-banners-bot img {
        object-position: center;
        aspect-ratio: 1
    }
}

@media screen and (max-width: 480px) {
    .hero-headline {
        font-size:26px;
        width: fit-content;
        max-width: 100%
    }

    .hero-headline::before {
        height: 25px;
        width: 25px;
        right: -30px;
        top: 5px
    }

    .hero-words-wrapper {
        right: 0;
        transform: none;
        width: 100%;
        max-width: 100%
    }

    .hero-words-wrapper::before {
        transform: translate(-50%,0)
    }

    .hero-words-wrapper b {
        width: 100%;
        max-width: 100%;
        white-space: pre-wrap
    }

    .hero-div {
        gap: 20px;
        margin-bottom: 20px
    }

    .myvideo {
        border-radius: 3px
    }

    .carousel-max-size,.et-small-carousel {
        padding: 15px
    }

    .item-news {
        flex-direction: column;
        align-items: center
    }

    .item-news-img-cover {
        width: 100%;
        height: auto
    }

    .item-news-img-cover>img {
        width: 100%;
        height: auto
    }

    .item-news>.txt>h3 {
        text-align: center
    }

    .item-owlc-4>p {
        height: 40px;
        -webkit-line-clamp: 2;
        line-clamp: 2
    }
}

.footer-contact-us {
    background-color: white;
    padding: 15px 30px;
    width: calc(100% - 30px);
    margin: 0 auto;
    transform: translateY(-50px);
    border-radius: 10px;
    min-height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--txt1-col);
    font-weight: 800;
}

.footer-contact-us a {
    text-decoration: none;
    color: var(--txt1-col);
}
.footer-contact-us .logo img{
    min-height: 40px;
    max-height: 40px;
}

.footer-contact-us .contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.footer-contact-us .contact__title {
    font-weight: 800;
    font-size: 1.2em;
}

.footer-contact-us .contact__numbers {
    display: flex;
    gap: 10px;
}

.footer-contact-us .contact__numbers__number {
    font-size: 1.1em;
    display: flex;
    gap: 5px;
}

@media only screen and (max-width: 768px) {
    .footer-contact-us {
        flex-direction: column;
        gap: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .footer-contact-us .contact__numbers {
        flex-direction: column;
        gap: 5px;
        align-items: center;
    }
    .footer-contact-us .contact {
        gap: 10px;
    }
}