:root {
    --bg: #262626;
    --white: #ffffff;
    --eitess: #02e0ed;
    --eitess-org: #00f7ec;
    --clr-neon: #00f7ec;
    --clr-bg: hsl(323 21% 16%);
    --animate-delay: 0.9s;
    --d: 700ms;
    --e: cubic-bezier(0.19, 1, 0.22, 1);
}

body {
    margin: 0px !important;
    padding: 0px !important;
}

body[data-layout-mode="horizontal"][data-topbar-color="light"] .topnav {
    background-color: #000;
}

.navbar-custom {
    height: 50px;
    padding: 0px;
}

.topnav {
    margin-top: 50px;
    height: 70px;
    background-color: #000;
}

.lines {
    margin-top: 0px;
}
.navbar-custom .topnav-menu .nav-link {
    padding: 0 15px;
    color: rgba(255, 255, 255, 0.6);
    min-width: 32px;
    display: block;
    line-height: 50px;
    text-align: center;
    max-height: 70px;
}

.lowerHeader {
    background-color: #000;
}

.column {
    margin-left: 77px;
}
.nav-menu {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
}

.nav-user {
    padding: 0px !important;
}

.navbar-custom .app-search {
    height: 70px;
    display: table;
    max-width: 315px;
    margin-right: 20px;
}

.notification-list .noti-icon-badge {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 0px;
}

#menuIcon {
    margin-top: 15px;
    margin-left: 15px;
}

#logo {
    margin: 15px 0px 15px 20px;
}

.dropdown-mega {
    float: right;
}

#products {
    font-size: 15px;
    color: #fff;
    margin-top: 10px;
}


#products1 {
    font-size: 15px;
    color: #fff;
}

#search {
    border: 1px solid;
    border-color: #fff;
    border-radius: 100px;
}

#inputSearch {
    background-color: #000;
    color: #fff;
}

#btnSearch {
    background-color: #000;
    color: #fff;
}

.rowSearch {
    background-color: #fff;
    position: relative;
    top: -69.3px;
}

.searchinput {
    border: 0px;
    font-size: 30px;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
}

#bigSearch {
    font-weight: bold;
    color: rgb(68, 67, 67);
    border-radius: 0px;
    border: 0px solid;
    height: 71px;
    text-indent: 60px;
    position: relative;
    font-size: 30px;
}
#bigSearchIcon {
    font-size: 40px;
    margin-top: 5px;
    text-align: end;
}

.search {
    background-color: #fff;
}

.inputCol,
.iconCol {
    margin: 0px 10px 0px 10px;
}

#search-icon {
    position: relative;
    top: -27px;
    left: 160px;
}

#searchMob {
    display: none;
}

.slide1 {
    display: grid;
    justify-content: center;
    align-content: center;
}

/*carousel*/
#fphoto {
    margin: -57px 0px 60px;
    filter: drop-shadow(-17px 10px 7px rgba(40, 40, 40, 0.232));
}

#fphoto1 {
    margin: 63px 0px 45px;
    height: 29rem;
    filter: drop-shadow(-20px 10px 2px rgba(40, 40, 40, 0.432));
}

.rowCarousel {
    margin: 150px 0px 0px 50px;
}

#fbgphoto {
    height: 1000px;
    position: relative;
    left: -400px;
    top: -300px;
    opacity: 0.2;
    z-index: inherit;
}

.prod-carousel {
    /* background-color: #02e0ed; */
    background-color: #46fff9;
    padding: 0px 0px 0px 0px;
}

.prod-carousel1 {
    background-color: transparent;
    padding: 0px 0px 0px 0px;
}

.slogan {
    font-size: 25px;
    color: #fff;
    margin: 0px;
}

.subBrand {
    margin: 0px;
    font-size: 50px;
    color: #fff;
    font-weight: bold;
    line-height: 30px;
}

.brand {
    font-size: 5rem;
    color: #343a40;
    font-weight: 900;
    margin: 0px;
}

.line-divider {
    border: 1px solid;
    color: #000;
    width: 100%;
}

.firstCol {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.firstCol > .fa-music,
.fa-volume-down,
.fa-battery-full,
.fa-bluetooth {
    color: #343a40;
    margin-top: 10px;
    font-size: 3rem;
}

.spec {
    margin-top: 20px;
    font-size: 12px;
    text-align: center;
    color: #000;
    font-weight: 200;
}
/*
.carousel-inner {
  width: 100%;
  height: 100%;
} */

.learn-more {
    background-color: #fff;
    color: #02e0ed;
}

.buy-now {
    background-color: #343a40;
    color: #fff;
}

.learn-more {
    font-size: 20px;
    border-radius: 100px;
    padding: 5px 40px 5px 40px;
    letter-spacing: 2px;
    margin-right: 20px;
}

.buy-now {
    text-align: center;
    font-size: 20px;
    border-radius: 100px;
    padding: 5px 60px 5px 60px;
    letter-spacing: 2px;
}

.buttons {
    margin-top: 20px;
}

.specs {
    margin-top: 135px;
    z-index: 999;
}

.wn-linediv {
    border: 1.5px solid #4de2dd;
    color: #4de2dd;
    width: 200px;
}

.whatsnew {
    color: #000;
    font-weight: bold;
}

.imageBig {
    height: 340px;
    padding: 0px;
    transition: transform 0.2s;
    z-index: 999;
    filter: drop-shadow(-20px 10px 5px rgba(1, 58, 57, 0.2));
}

.imageBig:hover {
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1);
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.imageSm {
    margin-top: 50px;
    height: 150px;
    transition: transform 0.2s;
    filter: drop-shadow(-20px 10px 5px rgba(1, 58, 57, 0.2));
}

.imageSm:hover {
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1);
}

.cardbg {
    /* background-color: #262626; */
    background-color: #fff;
}

.cardBig {
    /* background-color: #262626; */
    /* background-color: #fff; */
    margin-left: 20px;
    height: 645px;
}

.rowImgSm {
    margin-right: 10px;
}

.img1 {
    padding: 50px;
    transition: transform 0.2s;
    margin-top: 50px;
    height: 300px;
    object-fit: contain;
}

.img2 {
    margin-top: 10px;
    padding: 18px;
    transition: transform 0.2s;
    filter: drop-shadow(-20px 10px 5px rgba(1, 58, 57, 0.2));
}

.img3 {
    padding: 35px;
    transition: transform 0.2s;
    height: 200px;
    object-fit: contain;
}

.swiper {
    width: 80%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide .imgCoverflow {
    display: block;
    width: 100%;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 300px;
    height: 300px;
}

.img1:hover {
    -ms-transform: scale(1.1); /* IE 9 */
    -webkit-transform: scale(1.1); /* Safari 3-8 */
    transform: scale(1.1);
}

.seller-card {
    background-color: var(--bg);
    color: #fff;
    /*margin-top: 36px;*/
    /*min-height: 130px;*/
}

.card-text {
    font-weight: bold;
    color: #32b7b4 !important;
}

.footerWeb {
    background-color: var(--eitess-org);
    margin-top: -20px;
}

.footerWeb1 {
    background-color: var(--eitess-org);
    margin-top: 80px;
}

.text-bold {
    font-weight: bold;
}

.footerline {
    color: #aaa;
    opacity: 0.2;
    width: 92.5%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wrapper {
    margin-bottom: 0px;
}

#mobPhoto {
    margin-top: 10px;
    height: 50px;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(-10px 10px 2px #03cbd5);
}

.mobCard {
    background-color: #02e0ed;
    margin: 40px 10px 20px 10px;
    border-radius: 10px;
}

.mobCardBody {
    padding: 20px 20px 0px 20px;
}

.mobline {
    border: 2px solid var(--eitess);
    color: #fff;
    width: 50px;
    margin-left: 20px;
}

.mobwn {
    font-weight: bolder;
    font-size: 17px;
    margin-top: 0.4rem;
}

.mobwn1 {
    font-weight: bolder;
    font-size: 14px;
    margin-top: 0.4rem;
    text-align: center;
    margin-left: 64px;
    margin-top: 14px;
}

.imageBigMob {
    height: 200px;
    padding: 20px;
}

.imageSmMob {
    height: 100px;
    padding: 15px;
    margin-top: 10px;
}

.brandmob {
    font-size: 15px;
    font-weight: bold;
    color: #000;
    margin: 0px;
}

.subbrandmob {
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    margin: 0px;
}

.parasub {
    font-size: 10px;
    margin: 0px;
}

.iconmob {
    color: #343a40;
    margin-top: 10px;
    font-size: 10px;
}
.musicmob {
    color: #343a40;
    margin-top: 15px;
    font-size: 15px;
}
.specmob {
    font-size: 8px;
    margin-top: 10px;
    word-wrap: normal;
}

.inputNewsletter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/**LOGIN CSS**/
.login {
    font-weight: bolder;
    font-size: 40px;
    color: #000;
}

.login1 {
    margin-top: 100px;
    font-weight: bolder;
    font-size: 30px;
    color: #000;
}

.login2 {
    margin-top: -10px;
    font-weight: bolder;
    font-size: 30px;
    color: #000;
}

.loginDiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 510px;
    color: #000;
}
#signup,
#forgot {
    color: #4de2dd;
}

#signup1,
#forgot1 {
    color: #4de2dd;
}

#signup:hover,
#forgot:hover {
    color: var(--eitess-org);
}

#terms {
    color: #00f7ec;
}

#terms:hover {
    color: #4de2dd;
}

/**PRODUCT VIEW*/
.imgView {
    padding: 80px;
}

.title {
    font-size: 30px;
    color: #000;
    font-weight: bold;
    margin: 0px;
}

.price {
    color: #4de2dd;
    font-size: 25px;
    font-weight: bold;
}

.price1 {
    color: #7d7d7d;
    font-size: 15px;
    font-weight: bold;
}

.about {
    font-size: 15px;
    font-weight: bold;
    color: #000;
}

.desc {
    color: #000;
    font-size: 15px;
}

.var {
    font-size: 15px;
    font-weight: bold;
    color: #000;
    margin-top: 10px;
}

.btn-outline {
    border: 1px solid #4de2dd;
}
.btn-outline:hover {
    color: #fff;
    background-color: #4de2dd;
}

.ellipse {
    border: solid thin #dee2e6;
    width: 20px;
    height: 20px;
    margin: 0 auto 9px;
    border-radius: 50px;
    border: solid thin #dee2e6;
    background-color: #bcbcbc;
}

.border-col {
    border: 1px solid #aaa;
}

.btnRad {
    border-radius: 100px;
}

.btnCart {
    border: 1px solid #4de2dd;
    background-color: #e6fffd;
    color: #13c5bd;
    font-weight: bold;
    font-size: 15px;
}

.btnChck {
    background-color: #4de2dd;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
}

.btnChck:hover {
    border: 1px solid #4de2dd;
    background-color: #e6fffd;
    color: #13c5bd;
}

.btnCart:hover {
    background-color: #4de2dd;
    color: #fff;
}

.heart-btn {
    position: absolute;
    transform: translate(-50%, -50%);
}
.content {
    padding: 13px 16px;
    display: flex;
    border-radius: 5px;
    cursor: pointer;
}

.heart {
    position: absolute;
    background: url("../../buyer/images/others/heart.png") no-repeat;
    background-position: left;
    background-size: 2900%;
    height: 90px;
    width: 90px;
    top: 50%;
    left: 21%;
    transform: translate(-50%, -50%);
}

.text {
    font-size: 21px;
    margin-left: 30px;
    color: grey;
    font-family: "Montserrat", sans-serif;
}
.numb:before {
    content: "12";
    font-size: 21px;
    margin-left: 7px;
    font-weight: 600;
    color: #9c9496;
    font-family: sans-serif;
}
.numb.heart-active:before {
    content: "13";
    color: #000;
}
.text.heart-active {
    color: #000;
}
.heart.heart-active {
    animation: animate3 0.8s steps(28) 1;
    background-position: right;
}
@keyframes animate3 {
    0% {
        background-position: left;
    }
    100% {
        background-position: right;
    }
}

.rating {
    display: inline-block;
    font-size: 0;
    position: relative;
    text-transform: capitalize;
    padding: 0 50px 8%;
    color: gray;
}

#inquiries {
    padding: 15px;
}

.btnPost {
    background-color: #4de2dd;
    color: #000;
    font-weight: bold;
}

.contentPage {
    background-color: #fff;
    padding: 0px;
}

.similar {
    background-color: #e6e6e6;
    margin-top: 0px;
    min-height: 0vh;
    padding: 0px;
}

.itemImage {
    margin-top: 86px;
}

#mobItem {
    /* filter: drop-shadow(2.5px 2.5px 5px #626363); */
}

.mobTitle {
    font-size: 13px;
    font-weight: bold;
    margin: 0px;
}

.mobRating {
    font-size: 10px;
}

.mobStocks {
    font-size: 10px;
    font-weight: bold;
    background-color: #00f7ec;
    padding: 3px;
    border-radius: 100px;
    text-align: center;
    margin: 0px;
}

.mobQty {
    margin-top: 5px;
    font-weight: bold;
    font-size: 10px;
}

.mobVar {
    margin: 10px 0px 0px 20px;
    padding: 0px;
    font-size: 10px;
    font-weight: bold;
}

.swiper {
    margin-left: 20px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    margin: 10px 0px 10px 18px !important;

    /* 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;
}

.minus {
    background-color: #4de2dd;
    color: #fff;
    padding: 0px 5px 0px 5px;
    margin: 0px;
}

.slideVar {
    font-size: 11px;
    padding: 10px;
    font-weight: bold;
    border-radius: 5px;
    background-color: #00f7ec;
    color: #000;
}
.slideVar1 {
    font-size: 11px;
    padding: 10px;
    font-weight: bold;
    border-radius: 5px;
    background-color: #e0ebea;
    color: #000;
}

.mobEllipse {
    border: solid thin #dee2e6;
    width: 15px;
    height: 15px;
    margin: 15px auto 7px 9px;
    border-radius: 50px;
    border: solid thin #dee2e6;
    background-color: #bcbcbc;
}

.mobSpec {
    font-size: 10px;
    margin: 0px;
}

.mobSpecTitle {
    font-size: 8px;
    font-weight: bold;
    margin: 10px 0px 9px 0px;
}

#qty {
    width: 50px;
}

#qty1 {
    background-color: transparent;
}

/*CART*/
.breadcrumb-titles {
    margin-top: 100px;
}

.headTH {
    background-color: rgba(0, 0, 0, 0.03);
}

.trash {
    margin-top: 45px;
}

.priceCart {
    font-weight: bold;
    font-size: 14px;
    color: #4de2dd;
}

.borderline {
    border-color: #00f7ec;
}

#checkAll:checked,
#check1:checked {
    background-color: #00f7ec;
    border-color: #4de2dd;
}

#checkAll1:checked,
#check11:checked {
    background-color: #00f7ec;
    border-color: #4de2dd;
}

#checkAll2:checked,
#check11:checked {
    background-color: #00f7ec;
    border-color: #4de2dd;
}

.bgCyan {
    background-color: #4de2dd;
}

.bglightCyan {
    background-color: #e6fffd;
}

.cardCheckout {
    border-radius: 20px;
}

.cardPayment {
    border: 1px solid;
    border-color: #e2eaeaf3;
    border-radius: 5px;
}

.textCyan {
    color: #00f7ec !important;
}

.textdarkCyan {
    color: #13c5bd !important;
}

.mobViewCart {
    margin-top: 50px;
    z-index: 999;
}

#qtyMob {
    background-color: transparent;
}

#default {
    color: #00f7ec;
}

#addShipping,
#cancelShipping,
#saveShipping {
    border-radius: 100px;
}

.cardMobShipping {
    background-color: transparent;
}

.textEditDetails {
    color: #32b7b4;
}

.borderCyan {
    border: 1px solid #4de2dd;
}

.borderlightCyan {
    border: 1px solid #4de2dd;
}

.borderlightCyan1 {
    border: 1px solid gainsboro;
}

.chkCyan:checked {
    background-color: #4de2dd;
    border-color: #2fc4bf;
}

.hoverCyan:hover {
    color: #4de2dd;
}

a {
    color: #000;
}

a:hover {
    color: #4de2dd;
}

.list-group-flush > li:hover {
    color: #4de2dd;
}

.btnCancel {
    background-color: #e6fffd;
    color: #4de2dd;
    border: 1px solid #4de2dd;
    font-weight: bold;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #03cbd5;
    border-color: #03cbd5;
}

input[type="text"]:focus {
    border-color: #4de2dd;
}

#viewMore:hover {
    color: #4de2dd;
}

.nav-bordered a.active {
    border-bottom: 2px solid #4de2dd !important;
}

.btnhover:hover {
    background-color: #4de2dd;
    color: #fff;
}

.swal2-modal .swal2-confirm {
    background-color: #4de2dd !important;
    font-size: 0.8125rem !important;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    max-width: 100%;
    width: 350px;
}

.progress-container::before {
    content: ""; /* Mandatory with ::before */
    background-color: var(--line-border-empty);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
}

.progress {
    background-color: var(--line-border-fill);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 0%;
    z-index: -1;
    transition: 0.4s ease;
}

.circle {
    background-color: #fff;
    color: #999;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--line-border-empty);
    transition: 0.4s ease;
}

.circle.active {
    border-color: var(--line-border-fill);
}

.stepper-wrapper {
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}
.stepper-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stepper-item::before {
    position: absolute;
    content: "";
    border-bottom: 2px solid rgb(240, 240, 240);
    background-color: rgb(240, 240, 240);
    border-top: 2px solid rgb(240, 240, 240);
    width: 100%;
    top: 23px;
    left: -50%;
    z-index: 2;
}

.stepper-item::after {
    position: absolute;
    content: "";
    border-bottom: 2px solid rgb(240, 240, 240);
    width: 100%;
    top: 23px;
    left: 50%;
    z-index: 2;
}

.stepper-item .step-counter {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgb(240, 240, 240);
    margin-bottom: 6px;
}

.stepper-item.completed > .step-counter1 {
    background-color: #262626;
}

.stepper-item .step-counter1 {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(240, 240, 240);
    margin-bottom: 6px;
}

.stepper-item.completed > .step-counter {
    background-color: #262626;
}

.stepper-item.completed::before {
    border-bottom: 2px solid #262626;
    background-color: #262626;
    border-top: 2px solid #262626;
    z-index: 3;
}

.stepper-item:first-child::before {
    content: none;
}
.stepper-item:last-child::after {
    content: none;
}

.textGray {
    color: #9c9496;
}

.vl {
    border-left: 1px solid #bcbcbc;
    height: 100%;
    width: 10px;
    margin-left: 60px;
}

.vl1 {
    border-left: 1px solid #bcbcbc;
    height: 60%;
    width: 10px;
    margin-left: 10px;
    margin-top: 5px;
}

.circle {
    border-radius: 50%;
    height: 10px;
    width: 10px;
    background-color: #03cbd5;
}

.gray-bg {
    background-color: #e5e9e9;
}
.white-bg {
    background-color: #fff;
}

.floating-btn {
    width: 60px;
    height: 60px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 20%;
    color: #00f7ec;
    font-size: 40px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
}

.floating-card {
    background: #fff;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000;
    font-size: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
    position: fixed;
    right: 20px;
    bottom: 120px;
    z-index: 999;
}

#support {
    z-index: 999;
}

.floating-btn:active {
    background-color: #00f7ec;
}

input[type="checkbox"]:checked {
    background-color: #00f7ec;
    border-color: #4de2dd;
}

.parcelship:hover {
    border: 1px solid #00f7ec;
}

/**SEARCH PAGE**/
.searchpage {
    background: url("/assets/images/banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 10px;
    min-height: 65vh;
}

#constant {
    font-size: 55px;
    font-weight: bold;
    margin: 90px 0px 0px 50px;
}

.tagline {
    list-style: disc;
    margin-left: 0px;
    margin-top: 10px;
    margin-bottom: 80px;
}

.tagline li {
    float: left;
    margin: 0 15px;
    color: #fff;
    font-size: 15px;
}

.comp {
    display: inline-block;
}

.imgBorder {
    border: 1px solid #dedede;
    padding: 10px;
    border-radius: 5px;
    object-fit: contain;
    height: 100px;
}

.imgBorder1 {
    border: 1px solid #dedede;
    padding: 20px;
    border-radius: 5px;
    height: 120px;
}

.imgBorder2 {
    border-radius: 5px;
    object-fit: contain;
    height: 80px;
}

.imgBorder3 {
    border: 1px solid #dedede;
    padding: 20px;
    border-radius: 5px;
    height: 160px;
}

.imgBorder4 {
    padding: 20px;
    border-radius: 5px;
    object-fit: contain;
    height: 100px;
    width: 100px;
}

.box {
    position: relative;
    max-width: 600px;
    width: 90%;
    height: 400px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

/* common */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
}
.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: "";
    display: block;
    border: 5px solid #4de2dd;
}
.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0;
    background-color: #e7faf9;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    color: #fff;
    font: 900 17px/1 "Poppins", sans-serif;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    text-align: center;
}

/* top left*/
.ribbon-top-left {
    top: -10px;
    left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}
.ribbon-top-left::before {
    top: 0;
    right: 0;
}
.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}
.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}

/* top right*/
.ribbon-top-right {
    top: -10px;
    right: -10px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
    border-top-color: transparent;
    border-right-color: transparent;
}
.ribbon-top-right::before {
    top: 0;
    left: 0;
}
.ribbon-top-right::after {
    bottom: 0;
    right: 0;
}
.ribbon-top-right span {
    left: -25px;
    top: 30px;
    transform: rotate(45deg);
}

/* bottom left*/
.ribbon-bottom-left {
    bottom: -10px;
    left: -10px;
}
.ribbon-bottom-left::before,
.ribbon-bottom-left::after {
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.ribbon-bottom-left::before {
    bottom: 0;
    right: 0;
}
.ribbon-bottom-left::after {
    top: 0;
    left: 0;
}
.ribbon-bottom-left span {
    right: -25px;
    bottom: 30px;
    transform: rotate(225deg);
}

/* bottom right*/
.ribbon-bottom-right {
    bottom: -10px;
    right: -10px;
}
.ribbon-bottom-right::before,
.ribbon-bottom-right::after {
    border-bottom-color: transparent;
    border-right-color: transparent;
}
.ribbon-bottom-right::before {
    bottom: 0;
    left: 0;
}
.ribbon-bottom-right::after {
    top: 0;
    right: 0;
}
.ribbon-bottom-right span {
    left: -7px;
    bottom: 12px;
    transform: rotate(317deg);
}

.mobBg {
    background: url("/assets/images/banner.jpg");
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 10px;
    min-height: 65vh;
}

.constMob {
    position: relative;
    top: -80px;
    margin-left: 25px;
}

.tagline1 {
    list-style: disc;
    position: relative;
    top: -80px;
    left: -15px;
}

.tagline1 li {
    float: left;
    margin: 0 10px;
    color: #fff;
    font-size: 9px;
}

.comp1 {
    display: inline-block;
}

.swiper-slide img {
    display: block;
    width: 100%;
}

/*WHO WE ARE*/
.banner {
    background-image: url("assets/images/banner.jpg");
    background-position: cover;
    color: #262626;
    margin: -50px -20px 0px -16px;
}

.textAbout {
    position: relative;
    top: -250px;
    left: 50px;
}

.textAbout1 {
    position: relative;
    top: -250px;
    left: 250px;
}

.compassion {
    border-top-left-radius: 60px;
}

.improvement {
    border-bottom-right-radius: 60px;
}

.textAboutMob {
    position: relative;
    top: -95px;
    left: 10px;
    font-size: 10px;
}
.textAboutMobP {
    position: relative;
    top: -105px;
    left: 10px;
}

.textAboutMob1 {
    position: relative;
    top: -250px;
    left: 250px;
}

/*PRIVACY POLICY*/
.sbanner {
    background-image: url("assets/images/Support-Banner.jpg");
    background-position: contain;
    color: #262626;
    margin: -5px -20px 0px -16px;
}

#constant1 {
    font-size: 55px;
    font-weight: bold;
    margin: 90px 0px 0px 32px;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #4de2dd;
    background-color: #fff;
}

.nav-pills .nav-link:hover {
    color: #00f7ec;
}

.list-group-item > a {
    color: #000;
}

.constMob1 {
    position: relative;
    top: -100px;
    margin-left: 20px;
    margin-right: 20px;
}

.constMob2 {
    position: relative;
    top: -100px;
    margin-left: 12px;
    margin-right: 20px;
}

.constMobP {
    position: relative;
    top: -100px;
    margin-left: 20px;
}

.constMobBtn {
    position: relative;
    top: -100px;
    margin-left: 10px;
}

.bannerprivacy {
    background-image: url("assets/images/Support-Banner.jpg");
    background-position: contain;
    color: #262626;
    margin: -5px -20px 0px -16px;
    z-index: -1;
}

.contactus {
    position: relative;
    top: 56px;
}

.cardHover:hover {
    border: 1px solid #00f7ec;
}

.cardHover1:hover {
    border: 3px solid #00f7ec;
}

/*coverflow*/
.imgSellers {
    max-height: 300px;
    padding: 80px;
}

.iconHover {
    color: #00f7ec;
}

form#smileys input[type="radio"] {
    -webkit-appearance: none;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    transition: border 0.2s ease;
    filter: grayscale(100%);
    margin: 0 5px;
    transition: all 0.2s ease;
}
form#smileys input[type="radio"]:hover,
form#smileys input[type="radio"]:checked {
    filter: grayscale(0);
}
form#smileys input[type="radio"]:focus {
    outline: 0;
}
form#smileys input[type="radio"].morehappy {
    background: url("/assets/images/self-icons/morehappy.png") center;
    background-size: cover;
    padding: 0px;
}
form#smileys input[type="radio"].happy {
    background: url("/assets/images/self-icons/happy.png") center;
    background-size: cover;
}
form#smileys input[type="radio"].neutral {
    background: url("/assets/images/self-icons/neutral.png") center;
    background-size: cover;
}
form#smileys input[type="radio"].sad {
    background: url("/assets/images/self-icons/sad.png") center;
    background-size: cover;
}

.mtt {
    position: fixed;
    bottom: 10px;
    right: 20px;
    color: #999;
    text-decoration: none;
}
.mtt span {
    color: #e74c3c;
}
.mtt:hover {
    color: #666;
}
.mtt:hover span {
    color: #c0392b;
}
/*SEARCH PAGE*/
.content1 {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: auto;
    overflow: hidden;
}

.content1 .content-overlay {
    background: #00f7ec;
    position: absolute;
    height: 20%;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
}

.content1:hover .content-overlay {
    opacity: 0.8;
}

.content-image {
    width: 100%;
}

.content-details {
    position: absolute;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.content1:hover .content-details {
    top: 10%;
    left: 50%;
    opacity: 1;
}

.content-details h3 {
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

.content-details p {
    color: #fff;
    font-size: 0.8em;
}

.fadeIn-bottom {
    top: 80%;
}

.fadeIn-top {
    top: 20%;
}

.fadeIn-left {
    left: 20%;
}

.fadeIn-right {
    left: 80%;
}

/*ticket*/

.ticket__header,
.ticket__body,
.ticket__footer {
    padding: 1.25rem;
    background-color: white;
    border: 1px solid #abb5ba;
    box-shadow: 0 2px 4px rgba(41, 54, 61, 0.25);
}
.ticket__header {
    font-size: 1.5rem;
    border-top: 0.25rem solid #00f7ec;
    background-color: #000;
    border-bottom: none;
    box-shadow: none;
    padding-bottom: 0px;
}
.ticket__header p {
    font-size: 10px;
}
.ticket__wrapper {
    box-shadow: 0 2px 4px rgba(41, 54, 61, 0.25);
    border-radius: 0.375em 0.375em 0 0;
    overflow: hidden;
}
.ticket__divider {
    position: relative;
    height: 1rem;
    background-color: rgb(0, 0, 0);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.ticket__divider1 {
    position: relative;
    height: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}
.ticket__divider1::after {
    content: "";
    position: absolute;
    height: 50%;
    width: 100%;
    top: 0;
    border-bottom: 2px dashed rgb(227, 227, 227);
}
.ticket__divider::after {
    content: "";
    position: absolute;
    height: 50%;
    width: 100%;
    top: 0;
    border-bottom: 2px dashed #00f7ec;
}
.ticket__notch {
    position: absolute;
    left: -0.5rem;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
}
.ticket__notch::after {
    content: "";
    position: relative;
    display: block;
    width: 2rem;
    height: 2rem;
    right: 100%;
    top: -50%;
    border: 0.5rem solid rgb(0, 0, 0);
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(41, 54, 61, 0.25);
}
.ticket__notch--right {
    left: auto;
    right: -0.5rem;
}
.ticket__notch--right::after {
    right: 0;
}
.ticket__body {
    border-bottom: none;
    border-top: none;
}
.ticket__section > * + * {
    margin-top: 0.25rem;
}
.ticket__section > h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}
.ticket__header {
    font-weight: bold;
    display: flex;
    font-size: 12px;
}
.ticket__footer {
    border-top: 2px dashed #e9ebed;
    border-radius: 0 0 0.325rem 0.325rem;
    font-weight: bold;
}

.center-items {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bglightCyan1 {
    background-color: #f4fffe;
    border: 1px solid #e4fffd;
}

::-webkit-scrollbar {
    width: 12px; /* width of the entire scrollbar */
}

::-webkit-scrollbar-track {
    background: #f5f5f5; /* color of the tracking area */
}

::-webkit-scrollbar-thumb {
    background-color: #d7d7d7; /*#ff9800; color of the scroll thumb */
    border-radius: 10px; /* roundness of the scroll thumb */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #7d7d7d;
}

#full-stars-example {
}
#full-stars-example .rating-group {
    display: inline-flex;
}
#full-stars-example .rating__icon {
    pointer-events: none;
}
#full-stars-example .rating__input {
    position: absolute !important;
    left: -9999px !important;
}
#full-stars-example .rating__label {
    cursor: pointer;
    padding: 0px 0.1em 0px 0.1em;
    font-size: 2rem;
}
#full-stars-example .rating__icon--star {
    color: orange;
}
#full-stars-example .rating__icon--none {
    color: #eee;
}
#full-stars-example
    .rating__input--none:checked
    + .rating__label
    .rating__icon--none {
    color: red;
}
#full-stars-example
    .rating__input:checked
    ~ .rating__label
    .rating__icon--star {
    color: #ddd;
}
#full-stars-example .rating-group:hover .rating__label .rating__icon--star {
    color: orange;
}
#full-stars-example .rating__input:hover ~ .rating__label .rating__icon--star {
    color: #ddd;
}
#full-stars-example
    .rating-group:hover
    .rating__input--none:not(:hover)
    + .rating__label
    .rating__icon--none {
    color: #eee;
}
#full-stars-example
    .rating__input--none:hover
    + .rating__label
    .rating__icon--none {
    color: red;
}

#half-stars-example {
}
#half-stars-example .rating-group {
    display: inline-flex;
}
#half-stars-example .rating__icon {
    pointer-events: none;
}
#half-stars-example .rating__input {
    position: absolute !important;
    left: -9999px !important;
}
#half-stars-example .rating__label {
    cursor: pointer;
    /* if you change the left/right padding, update the margin-right property of .rating__label--half as well. */
    padding: 0 0.1em;
    font-size: 2rem;
}
#half-stars-example .rating__label--half {
    padding-right: 0;
    margin-right: -0.6em;
    z-index: 2;
}
#half-stars-example .rating__icon--star {
    color: orange;
}
#half-stars-example .rating__icon--none {
    color: #eee;
}
#half-stars-example
    .rating__input--none:checked
    + .rating__label
    .rating__icon--none {
    color: red;
}
#half-stars-example
    .rating__input:checked
    ~ .rating__label
    .rating__icon--star {
    color: #ddd;
}
#half-stars-example .rating-group:hover .rating__label .rating__icon--star,
#half-stars-example
    .rating-group:hover
    .rating__label--half
    .rating__icon--star {
    color: orange;
}
#half-stars-example .rating__input:hover ~ .rating__label .rating__icon--star,
#half-stars-example
    .rating__input:hover
    ~ .rating__label--half
    .rating__icon--star {
    color: #ddd;
}
#half-stars-example
    .rating-group:hover
    .rating__input--none:not(:hover)
    + .rating__label
    .rating__icon--none {
    color: #eee;
}
#half-stars-example
    .rating__input--none:hover
    + .rating__label
    .rating__icon--none {
    color: red;
}

#full-stars-example-two .rating-group {
    display: inline-flex;
}
#full-stars-example-two .rating__icon {
    pointer-events: none;
}
#full-stars-example-two .rating__input {
    position: absolute !important;
    left: -9999px !important;
}
#full-stars-example-two .rating__input--none {
    display: none;
}
#full-stars-example-two .rating__label {
    cursor: pointer;
    padding: 0 0.1em;
    font-size: 2rem;
}
#full-stars-example-two .rating__icon--star {
    color: orange;
}
#full-stars-example-two
    .rating__input:checked
    ~ .rating__label
    .rating__icon--star {
    color: #ddd;
}
#full-stars-example-two .rating-group:hover .rating__label .rating__icon--star {
    color: orange;
}
#full-stars-example-two
    .rating__input:hover
    ~ .rating__label
    .rating__icon--star {
    color: #ddd;
}

.voucherContent {
    position: relative;
    top: -5px;
    left: 10px;
}

.selectize-input {
    min-height: calc(1.5em + 0.9rem + 2px);
    padding: 1.2rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6c757d;
    background-color: #fff !important;
    border: 1px solid #ced4da;
    box-shadow: none;
}

.prodcarousel {
    background-color: #02e0ed;
    height: 100px;
}

.content-page {
    margin-left: 245px;
    overflow: hidden;
    padding: 0 15px 65px 15px;
    min-height: 70vh;
    margin-top: 70px;
}

.green {
    font-size: 55px;
    font-weight: bold;
    margin: 90px 0px 0px 50px;
}

.innov {
    font-size: 80px;
    font-weight: bold;
    margin: -30px 0px 0px 50px;
}

.titleBanner {
    margin-top: 42px;
    font-size: 40px;
    font-weight: bold;
}

.titlePara {
    margin-left: 50px;
    margin-top: 100px;
    font-size: 20px;
    font-weight: bold;
    margin: -30px 0px 0px 50px;
}

.section-background {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
    color: #ffffff;
    /* display: flex;
  justify-content: center;
  align-items: center;  */
}

.section-background1 {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 100%;
    color: #ffffff;
    display: flex;
    /* justify-content: center; */
    align-items: baseline;
}

.section-background2 {
    background-attachment: fixed;
    background-position: center;
    background-size: contain;
    height: 50vh;
    width: 100%;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-background3 {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    height: 106vh;
    width: 100%;
    color: #ffffff;
    /* display: flex;
  justify-content: center;
  align-items: center;  */
}

.parallax {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.parallax1 {
    background-image: url("/assets/images/images-eitess/bgimages/plantronics.jpg");
}

.parallax2 {
    background-image: url("/assets/images/logoCyan.png");
    background-repeat: no-repeat;
    background-size: 250px;
    background-color: #fff;
    background-position: center;
}

.parallax3 {
    background-image: url("https://images.unsplash.com/photo-1543722530-d2c3201371e7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjIzOTExOTg&ixlib=rb-1.2.1&q=80");
}

.parallax4 {
    background-image: url("/assets/images/logoCyan1.png");
    background-repeat: no-repeat;
    background-size: 250px;
    background-color: #fff;
    padding-top: 100px;
}

.parallax5 {
    background-color: #ecfefe;
}

.parallax6 {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    background-color: #fff;
}
.parallax7 {
    background-color: #ecfefe;
    display: grid;
    justify-content: center;
    align-items: center;
}

.parallax8 {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

.taglineBanner {
    position: relative;
    width: 100%;
    margin-top: 12%;
    font-size: 80px;
    color: #0e3742;
    -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
    line-height: 0.8em;
    outline: none;
    animation: animate2 5s linear infinite;
}

.taglineBannerMob {
    position: relative;
    width: 100%;
    margin-top: 12%;
    font-size: 40px;
    color: #0e3742;
    -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
    line-height: 0.8em;
    outline: none;
    animation: animate2 5s linear infinite;
}

@keyframes animate2 {
    0%,
    18%,
    20%,
    50.1%,
    60%,
    65.1%,
    80%,
    90.1%,
    92% {
        color: #fff;
    }
    18.1%,
    20.1%,
    30%,
    50%,
    60.1%,
    65%,
    80.1%,
    90%,
    92.1%,
    100% {
        color: #fff;
        text-shadow: 0 0 10px #00f7ec, 0 0 20px #00f7ec, 0 0 40px #00f7ec,
            0 0 60px #00f7ec;
    }
}

#quoteRight {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    vertical-align: 40%;
}

.lists {
    display: inline;
    margin: 0px 5px 0px 5px;
}

.refurbished {
    font-size: 100px;
    letter-spacing: 10px;
}

.refurbished1 {
    font-size: 50px;
    letter-spacing: 10px;
}

.refurbishedP {
    padding: 10px 100px 0px 110px;
    font-size: 30px;
    letter-spacing: 5px;
}
.refurbishedP2 {
    /* padding: 10px 0px 0px 50px; */
    font-size: 30px;
    letter-spacing: 5px;
    text-align: center;
}

.refurbishedPsmall {
    margin: 0px 10px 0px 50px;
    padding: 10px 30px 50px 0px;
    font-size: 12px;
    /* letter-spacing: 3px; */
    border-radius: 5px;
}

.refurbishedPsmall2 {
    margin: 0px 50px 0px 10px;
    padding: 10px 30px 50px 0px;
    font-size: 12px;
    /* letter-spacing: 3px; */
    border-radius: 5px;
}

.borderGradient {
    max-width: 500px;
    padding: 0rem 1rem 0rem 1rem;
    color: white;
    border-width: 3px;
    border-style: solid;
    border-image: linear-gradient(to bottom, #00f7ec, rgba(0, 0, 0, 0)) 1 100%;
}

.functional {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container2 {
    position: relative;
    height: 100vh;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    background: #eaeded;
    overflow: hidden;
    background: linear-gradient(90deg, #00f7ec 0%, rgba(0, 0, 0, 0) 100%);
}
.seta {
    position: absolute;
    width: 30px;
    height: 30px;
    background: url("https://cdn-icons-png.flaticon.com/512/271/271210.png");
    background-size: contain;
    bottom: 10px;
    animation: 1s anime ease-in-out infinite alternate;
}

@keyframes anime {
    0% {
        bottom: 5px;
    }
    100% {
        bottom: 20px;
    }
}

.texts {
    margin-top: 10%;
    width: 600px;
    letter-spacing: 0.1em;
    padding: 50px;
    font-size: 22px;
}

.texts1 {
    margin-top: 10%;
    width: 100%;
    letter-spacing: 0.1em;
    padding: 20px;
    font-size: 22px;
}
.texts h1 {
    font-size: 52px;
    font-weight: 900;
    animation: animet 3s;
}
.texts1 .prodGuar {
    font-size: 40px;
    font-weight: 900;
    text-transform: uppercase;
    animation: animet 3s;
}
.texts p {
    color: #000;
    font-weight: 400;
    animation: animet 2s;
}

.texts1 .p1 {
    color: #000;
    font-weight: 300;
    animation: animet 2s;
    font-size: 15px;
}

.imgSec {
    max-width: 200px;
    width: 100%;
    animation: controll 1s infinite alternate ease-in-out;
}

.imgSecMob {
    width: 100%;
    animation: controll 1s infinite alternate ease-in-out;
}

@keyframes controll {
    0% {
        transform: translatex(-2%);
    }
    100% {
        transform: translatex(0%);
    }
}

.box {
    background: #17202a;
}

.box a {
    color: #fff;
    letter-spacing: 0.1em;
    font-size: 28px;
}

@keyframes animet {
    0% {
        opacity: 0;
        transform: translatex(-20px);
    }
    100% {
        opacity: 1;
        transform: translatex(0px);
    }
}

@keyframes animeb {
    0% {
        opacity: 0;
        transform: translatey(20px);
    }
    100% {
        opacity: 1;
        transform: translatey(0px);
    }
}

.bgE {
    background-image: url("/assets/images/images-eitess/bgimages/viber_image_2022-09-27_09-49-48-356.png");
    background-size: cover;
}

.bgImg {
    /* background-image: url('/assets/images/eiTESS_logo_icon_cyan.png'); */
    background-repeat: no-repeat;
    background-size: contain;
    height: 100px;
}
.card-background {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.bgImage {
    background-image: linear-gradient(
            rgb(38, 38, 38, 0.8),
            rgb(38, 38, 38, 0.9)
        ),
        url("/assets/images/eiTESS_logo_icon_cyan.png");
    background-repeat: no-repeat;
    background-size: 350px;
    background-position-x: -110%;
    background-position-y: 200%;
    position: relative;
}

.bgImage1 {
    background-image: linear-gradient(
            rgb(38, 38, 38, 0.8),
            rgb(38, 38, 38, 0.9)
        ),
        url("/assets/images/eiTESS_logo_icon_cyan-flip.png");
    background-repeat: no-repeat;
    background-size: 350px;
    background-position-x: -350%;
    background-position-y: -100%;
    position: relative;
}

.bgImgTess {
    background-image: linear-gradient(
            rgb(38, 38, 38, 0.8),
            rgb(38, 38, 38, 0.9)
        ),
        url("/assets/images/tessph-vertical.png");
    background-repeat: no-repeat;
    background-size: 150px;
    background-position-x: center;
    background-position-y: center;
    z-index: 1;
}

.bgImgBig {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
        url("/assets/images/images-eitess/Tess.phProducts/Dell Laptop 12,5 inch - E7270 i5-6300U/Dell-Latitude-E7270.png");
    background-repeat: no-repeat;
    background-size: 450px;
    background-position-x: left;
    background-position-y: bottom;
    position: relative;
    z-index: 1;
}

.bgImgSm {
    background-image: linear-gradient(
            rgb(38, 38, 38, 0.9),
            rgb(38, 38, 38, 0.9)
        ),
        url("/assets/images/images-eitess/Tess.phProducts/Auerswald COMfortel 2600/image (1).png");
    background-repeat: no-repeat;
    background-size: 250px;
    background-position-x: 10px;
    background-position-y: 30px;
    position: relative;
    z-index: 1;
}

.tessph {
    transform: rotate(-90deg);
    z-index: 999;
}

.bgtope1 {
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url("/assets/images/topCard1.png"); */
    background-color: #f2fdfd;
    background-size: cover;
    background-position-x: 20%;
    background-position-y: 100%;
    background-repeat: no-repeat;
}

.bgTransparent {
    justify-self: center;
    /* filter: drop-shadow(10px 10px 1px rgba(88, 88, 88, 0.9)); */
    /* filter: drop-shadow(10px 10px 1px rgba(0, 0, 0, 0.5)); */
}

.new {
    font-size: 40px;
    position: relative;
    top: -30px;
    left: 1%;
    line-height: 0.7em;
}

.cardGlass {
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    width: 120%;
    height: 300px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border-top: 1px solid #00f7ec;
    border-left: 1px solid #00f7ec;
    backdrop-filter: blur(5px);
}

#tessPH {
    position: relative;
    transform: rotate(-28deg) skew(25deg);
    font-size: 100px;
    padding: 20px;
    font-weight: bold;
}

.bubbles {
    position: relative;
    display: flex;
}

.bubbles span {
    position: relative;
    width: 10px;
    height: 10px;
    background: #4fc3dc44;
    margin: 0 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #4fc3dc44, 0 0 10px #00a5a0, 0 0 50px #00a5a0;
    animation: animate1 5s linear infinite;
    animation-duration: calc(155s / var(--i));
}

.bubbles span:nth-child(even) {
    /* background: #00a5a0; */
    box-shadow: 0 0 0 2px #4fc3dc, 0 0 50px #00a5a0, 0 0 50px #00a5a0;
}

@keyframes animate1 {
    0% {
        transform: translateY(100vh) scale(0);
    }
    100% {
        transform: translateY(-10vh) scale(1);
    }
}

.flowNum {
    position: absolute;
    top: -20px;
    right: 10px;
    font-size: 8em;
    font-weight: bold;
    color: rgba(0, 255, 251, 0.05);
}

#canvas {
    margin: 0 auto;
    display: block;
    position: relative;
    top: 10%;
}

#canvas1 {
    margin: 0 auto;
    display: block;
    position: relative;
    top: 10%;
}

#canvas2 {
    margin: 0 auto;
    display: block;
    position: relative;
    top: 10%;
}

.input {
    opacity: 0.3;
    transition: opacity 0.3s linear;
}

.input:hover,
.input:active {
    opacity: 1;
}

#curvesNum {
    width: 100px;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 999;
}

#curvesNum1 {
    width: 100px;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 999;
}

#curvesNum2 {
    width: 100px;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 999;
}

#value {
    width: 100px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    text-align: center;
    color: #000;
    line-height: 20px;
    font-size: 16px;
    font-family: verdana;
    text-shadow: 0 1px 2px #000;
    /* box-shadow: 3px 3px 15px 5px rgba(0,0,0,.5); */
}

#value1 {
    width: 100px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    text-align: center;
    color: #000;
    line-height: 20px;
    font-size: 16px;
    font-family: verdana;
    text-shadow: 0 1px 2px #000;
    /* box-shadow: 3px 3px 15px 5px rgba(0,0,0,.5); */
}

#value2 {
    width: 100px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    text-align: center;
    color: #000;
    line-height: 20px;
    font-size: 16px;
    font-family: verdana;
    text-shadow: 0 1px 2px #000;
    /* box-shadow: 3px 3px 15px 5px rgba(0,0,0,.5); */
}

input[type="range"] {
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 5px;
    background: rgba(50, 50, 50, 0.8);
    border: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-shadow: 0 0 3px #000;
    height: 5px;
    width: 10px;
    background: #000;
    cursor: pointer;
}

input[type="range"]:focus {
    outline: none;
}

.tagline2 {
    position: relative;
    top: -22%;
}

.taglineMob {
    margin: -207px 0px 0px 0px;
    height: 850px;
}

.taglineMob1 {
    margin: -207px 0px 0px 0px;
    height: 850px;
}

.greeninnov {
    position: relative;
    top: 228px;
}

.parallax9 {
    background-color: #ecfefe;
    background-image: url("/buyer/images/logo/icon_logo_cyan_light.png");
    background-repeat: no-repeat;
    background-size: 200px;
    background-position-x: 103%;
}

.parallax10 {
    background-color: #ecfefe;
    background-image: url("/buyer/images/logo/icon_logo_cyan_light.png");
    background-repeat: no-repeat;
    background-size: 150px;
    background-position-x: 103%;
}

.parallax11 {
    background-color: #ecfefe;
    background-image: url("/buyer/images/logo/logo_black1.png");
    background-repeat: no-repeat;
    background-size: 200px;
    background-position-x: 4%;
    background-position-y: 93%;
}

.logo_container {
    perspective: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#playArea {
    position: absolute;
    top: 10%;
    margin-top: 200em;
    overflow: hidden;
    z-index: 1;
}

#playArea1 {
    position: absolute;
    top: 70%;
    margin-top: 206em;
    overflow: hidden;
    z-index: 999;
}

.trans {
    position: relative;
    font-size: 50px;
    /* text-align: center; */
}

.trans2 {
    font-size: 20px;
    text-align: center;
}

.content_trans {
    position: initial;
    top: 100px;
    left: -100px;
    z-index: 999;
}

/*CONNECTING*/

.animation-container {
    width: 100%;
}

.steps {
    display: inline-block;
    padding: 10px;
    vertical-align: middle;
    opacity: 0;
}

.inner-steps {
    padding: 10px;
    opacity: 0;
}

.no-border {
    border: none;
}

.steps-arrow {
    display: inline-block;
    opacity: 0;
}

.step-1 {
    -webkit-animation-name: fade-in-1;
    animation-name: fade-in-1;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 99;
}

.step-2 {
    -webkit-animation-name: fade-in-2;
    animation-name: fade-in-2;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 98;
}

.step-3 {
    -webkit-animation-name: fade-in-3;
    animation-name: fade-in-3;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 97;
}

.step-4 {
    -webkit-animation-name: fade-in-4;
    animation-name: fade-in-4;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 96;
}

.step-5 {
    -webkit-animation-name: fade-in-5;
    animation-name: fade-in-5;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 95;
}

.step-6 {
    -webkit-animation-name: fade-in-6;
    animation-name: fade-in-6;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 94;
}

.step-7 {
    -webkit-animation-name: fade-in-7;
    animation-name: fade-in-7;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    z-index: 93;
}

@-webkit-keyframes fade-in-1 {
    0% {
        opacity: 0;
    }
    8.7%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fade-in-1 {
    0% {
        opacity: 0;
    }
    8.7%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade-in-2 {
    0%,
    8.7% {
        opacity: 0;
    }
    17.4%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-in-2 {
    0%,
    8.7% {
        opacity: 0;
    }
    17.4%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade-in-3 {
    0%,
    17.4% {
        opacity: 0;
    }
    26.1%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-in-3 {
    0%,
    17.4% {
        opacity: 0;
    }
    26.1%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade-in-4 {
    0%,
    26.1% {
        opacity: 0;
    }
    34.8%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-in-4 {
    0%,
    26.1% {
        opacity: 0;
    }
    34.8%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade-in-5 {
    0%,
    34.8% {
        opacity: 0;
    }
    43.5%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-in-5 {
    0%,
    34.8% {
        opacity: 0;
    }
    43.5%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade-in-6 {
    0%,
    43.5% {
        opacity: 0;
    }
    52.2%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-in-6 {
    0%,
    43.5% {
        opacity: 0;
    }
    52.2%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fade-in-7 {
    0%,
    51.5% {
        opacity: 0;
    }
    52.2%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fade-in-7 {
    0%,
    51.5% {
        opacity: 0;
    }
    52.2%,
    99% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
[class*="icono-arrow2"][class*="-left"] {
    transform: rotate(45deg);
}

[class*="icono"] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #666;
    box-sizing: border-box;
}

[class*="icono-arrow2"] {
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-bottom-color: transparent;
    border-left-color: transparent;
    margin: 10px;
}

[class*="icono"] {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: #666;
    box-sizing: border-box;
}

[class*="icono"]:after,
[class*="icono"]:before {
    content: "";
    box-sizing: border-box;
}

[class*="icono-arrow2"]:before {
    right: 0;
    top: -7px;
    position: absolute;
    height: 10px;
    box-shadow: inset 0 0 0 32px;
    transform: rotate(-45deg);
    width: 15px;
    transform-origin: right top;
}

.icono-arrow2-down {
    transform: rotate(135deg);
}

.align-base {
    vertical-align: baseline;
}

.gmorphism {
    backdrop-filter: blur(5px);
}

.neon-button {
    font-size: 4rem;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: var(--clr-neon);
    border: var(--clr-neon) 0.125em solid;
    padding: 0.25em 1em;
    border-radius: 0.25em;
    text-shadow: 0 0 0.125em rgba(255, 255, 255, 0.3), 0 0 0.45em currentColor;
    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
    position: relative;
}

.neon-button::before {
    pointer-events: none;
    content: "";
    position: absolute;
    background: var(--clr-neon);
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1em);
    opacity: 0.7;
}

.neon-button::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 2em 0.5em var(--clr-neon);
    opacity: 0;
    background-color: var(--clr-neon);
    z-index: -1;
    transition: opacity 100ms linear;
}

.neon-button:hover,
.neon-button:focus {
    color: var(--clr-bg);
    text-shadow: none;
}

.neon-button:hover::before,
.neon-button:focus::before {
    opacity: 1;
}

.neon-button:hover::after,
.neon-button:focus::after {
    opacity: 1;
}

.neon-button1 {
    font-size: 2rem;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: var(--clr-neon);
    border: var(--clr-neon) 0.125em solid;
    padding: 0.25em 1em;
    border-radius: 0.25em;
    text-shadow: 0 0 0.125em rgba(255, 255, 255, 0.3), 0 0 0.45em currentColor;
    box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
    position: relative;
}

.neon-button1::before {
    pointer-events: none;
    content: "";
    position: absolute;
    background: var(--clr-neon);
    top: 120%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
    filter: blur(1em);
    opacity: 0.7;
}

.neon-button1::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: 0 0 2em 0.5em var(--clr-neon);
    opacity: 0;
    background-color: var(--clr-neon);
    z-index: -1;
    transition: opacity 100ms linear;
}

.neon-button1:hover,
.neon-button1:focus {
    color: var(--clr-bg);
    text-shadow: none;
}

.neon-button1:hover::before,
.neon-button1:focus::before {
    opacity: 1;
}

.neon-button1:hover::after,
.neon-button1.bgImage::after {
    opacity: 1;
}

/* .swiper-wrapper{
  transition-duration: 0ms;
  transform: translate3d(-20px, 0px, 0px);
} */

.warranty {
    font-size: 50px;
    letter-spacing: 5px;
    margin-top: -17px;
    padding: 50px;
}

.typing-container {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0 0.5rem;
    font-size: 4rem;
    margin-top: -17px;
    padding: 257px 136px 136px 136px;
    color: #fff;
}

.typing-text {
    color: #00f7ec;
}

.typing-text::after {
    content: "|";
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.banner1 {
    position: relative;
    top: -50px;
}

.blogBanner {
    background-image: url("/assets/images/blog/pexels-photo-1229861.webp");
}

.carousel-item1 {
    height: 65vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.carousel-caption {
    text-align: start;
    position: relative;
    top: 20%;
    left: 10%;
}

.highlightext {
    color: #fff;
}
h1.deepshadow {
    color: #e0dfdc;
    background-color: #333;
    letter-spacing: 0.1em;
    text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c,
        0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424,
        0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c,
        0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414,
        0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
    /* text-shadow: 10px 10px 5px #aaa; */
}

.bgText {
    position: relative;
    top: -30px;
    left: 100px;
    font-size: 100px;
    z-index: 1;
    opacity: 0.1;
    color: #000;
}

.bgText1 {
    position: relative;
    top: 29px;
    left: 100px;
    font-size: 100px;
    z-index: 1;
    color: #333;
    opacity: 0.1;
}

.bgText2 {
    position: relative;
    top: 29px;
    left: 100px;
    font-size: 100px;
    z-index: 1;
    color: #333;
    opacity: 0.6;
}


.bgTextMob {
    position: relative;
    top: -30px;
    left: 55px;
    font-size: 30px;
    z-index: 1;
    opacity: 0.1;
    color: #000;
}


.bgTextMob2 {
    position: relative;
    top: 10px;
    left: 100px;
    font-size: 30px;
    z-index: 1;
    color: #333;
    opacity: 0.6;
}

.bgTextMob3 {
    position: relative;
    top: 10px;
    left: 100px;
    font-size: 30px;
    z-index: 1;
    opacity: 0.1;
    color: #000;
}

.pageHeight {
    height: 167vh;
}

.highlight-container,
.highlight {
    position: relative;
}

.highlight-container {
    display: inline-block;
}
.highlight-container:before {
    content: "";
    display: block;
    height: 90%;
    width: 100%;
    margin-left: -3px;
    margin-right: -3px;
    position: absolute;
    background: rgba(255, 225, 255, 0.4);
    transform: rotate(2deg);
    top: -1px;
    left: -1px;
    border-radius: 20% 25% 20% 24%;
    padding: 10px 3px 3px 10px;
}

.highlight-container1,
.highlight1 {
    position: relative;
}

.highlight-container1 {
    display: inline-block;
}
.highlight-container1:before {
    content: "";
    display: block;
    height: 90%;
    width: 100%;
    margin-left: -3px;
    margin-right: -3px;
    position: absolute;
    background: rgba(7, 199, 196, 0.4);
    transform: rotate(2deg);
    top: -1px;
    left: -1px;
    border-radius: 20% 25% 20% 24%;
    padding: 10px 3px 3px 10px;
    -webkit-animation: 1.5s highlighttext 1.5s 1 normal forwards;
    animation: 1.5s highlighttext 1.5s 1 normal forwards;
}

@keyframes anim54 {
    0%,
    10%,
    100% {
        width: 0%;
        color: var(--red-1);
    }
    40%,
    90% {
        width: 100%;
        color: var(--red-2);
    }
}

.textlightCyan {
    color: #00e1d9;
}

.btnslide {
    display: block;
    position: relative;
    text-decoration: none;
    color: black;
    background: transparent;
    padding: 10px;
    border: 3px solid #00f7ec;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    width: 160px;
    overflow: hidden;
    z-index: 999;
}

.btnslide .span {
    z-index: 5;
    position: relative;
    transition: color 350ms ease;
}

.btnslide:hover span {
    color: white;
}

.btnslide::after,
.btnslide::before {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    right: 0;
    background: #00f7ec;
    z-index: -1;
}

.btnslide::before {
    transform: translateX(-100%);
    z-index: 1;
}

.btnslide:hover:before {
    transform: translateX(0);
    transition: transform 350ms ease;
}

.btnslide::after {
    z-index: 0;
    transform: translateX(100%);
    transition: none;
    transition: transform 350ms ease;
}

.btnslide:hover:after {
    opacity: 1;
    transform: translateX(0);
    transition: transform 350ms 360ms ease;
}

.photo {
    filter: drop-shadow(0px 10px 1px rgba(0, 0, 0, 0.1));
}

.area {
    background: #fff;
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
    width: 100%;
    height: 100%;
    margin-top: -24px;
}

.circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(0, 225, 217, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
}

.circles li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}

.circles li:nth-child(2) {
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3) {
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4) {
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5) {
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7) {
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10) {
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100% {
        transform: translateY(-1800px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

.home {
    height: 100vh;
    position: relative;
}


.home21 {
    height: 36vh;
    position: relative;
}
.home22 {
    height: 70vh;
    position: relative;
}

.home23 {
    height: 22vh;
    position: relative;
}
video {
    position: absolute;
    width: 100%;
    height: 20%;
    object-fit: cover;
}

.quotesign {
    position: absolute;
    top: 30%;
    left: 15%;
    font-size: 150px;
    color: #004341;
    z-index: 999;
}

.quotesign1 {
    position: absolute;
    top: 55%;
    left: 75%;
    font-size: 150px;
    color: #004341;
    z-index: 999;
}

.gradient {
    width: 100%;
    height: 60vh;
    background-image: radial-gradient(
        at 300px 300px,
        rgba(0, 225, 171, 0.9) 0,
        #00e1d9 70%
    );
    z-index: 999;
    margin-top: -10px;
}

.bgTessPic {
    background-image: url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b73302ddf5fabf9285df2da9c462efbb&auto=format&fit=crop&w=1350&q=80");
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 999;
}

#stars {
    display: block;
    position: relative;
    width: 100%;
    height: 16rem;
    height: 100vh;
    z-index: 1;
}

.marquee {
    width: 100%;
    height: 50px;
    overflow: hidden;
    margin: 12px 0;
    padding: 3px;
    font-weight: 700;
    font-size: 50px;
    line-height: 36px;
    color: #ffffff;
    border-radius: 20px;
}

.marquee span {
    animation: marquee 50s linear infinite;
    -webkit-animation: marquee 50s linear infinite;
    position: relative;
    white-space: nowrap;
    left: 200%;
}

.bgtope {
    /* background-image: url("/../buyer/images/others/bg4.png"); */
    /* background-color: #6afffa; */
    background: linear-gradient(221deg, #c0fffd, #6afffa 73%);
    background-size: cover;
    background-position-x: 70%;
    background-repeat: no-repeat;
}

.wnHome {
    background-image: url("/../buyer/images/others/bg4.png");
    background-position: center;
    background-color: #46fff9;
    background-size: 150%;
    background-repeat: no-repeat;
}

.wnSm {
    background-image: url("/assets/images/homepage/bg1.png");
    background-position: center;
    background-size: 150%;
    background-repeat: no-repeat;
}

@keyframes marquee {
    0% {
        left: 120%;
    }
    100% {
        left: -120%;
    }
}
@-o-keyframes marquee {
    0% {
        left: 120%;
    }
    100% {
        left: -120%;
    }
}
@-moz-keyframes marquee {
    0% {
        left: 120%;
    }
    100% {
        left: -120%;
    }
}
@-webkit-keyframes marquee {
    0% {
        left: 120%;
    }
    100% {
        left: -120%;
    }
}

.separator {
    display: flex;
    align-items: center;
}

.separator .line {
    height: 1px;
    flex: 1;
    background-color: gainsboro;
}

.separator p {
    padding: 0 2rem;
    margin-top: 15px;
}

.upto {
    position: absolute;
    top: 60%;
    left: 35%;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 20px;
    color: #04777d;
    z-index: 999;
}
.percent {
    position: absolute;
    top: 46.4%;
    left: 38.5%;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 38px;
    color: #fff;
    z-index: 9;
    filter: drop-shadow(2px 3px 1px rgba(0, 0, 0, 0.432));
}
.percent1 {
    position: absolute;
    top: 13%;
    left: 25%;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 200px;
    color: #02eaf7;
}

.off {
    position: absolute;
    top: 74%;
    left: 39%;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 50px;
    color: #04777d;
    z-index: 999;
}
.off1 {
    position: absolute;
    top: 45%;
    left: 35%;
    letter-spacing: -1px;
    font-weight: bold;
    font-size: 100px;
    color: #02eaf7;
}

.boximg {
    position: absolute;
    top: 25%;
    left: 29%;
}

.product .gallery {
    width: 50%;
    position: relative;
    z-index: 1;
}
.product .gallery::before {
    content: "";
    position: absolute;
    top: 290px;
    left: 350px;
    width: 250px;
    height: 250px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background: radial-gradient(at top right, rgba(2, 234, 247, 0.2), #55f5fe);
    animation: 12s goop ease-in-out infinite both alternate;
    z-index: 1;
}
@keyframes goop {
    0% {
        border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
        transform: rotate(0deg);
    }
    100% {
        border-radius: 40% 60%;
        transform: rotate(1turn);
    }
}

.threeyears {
    /* background-image: url('buyer/images/background/bg-slim.png'); */
    background-color: #000;
}

.left {
    position: absolute;
    font-size: 100px;
    font-weight: bold;
    top: 7%;
    left: 35%;
    z-index: 100;
}

.left1 {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    color: #005b5a;
    top: 8.38%;
    left: 35.9%;
    filter: drop-shadow(2px 1px 1px rgba(0, 0, 0, 0.332));
    z-index: 100;
}

.imageBadge {
    position: absolute;
    top: 10%;
    left: 36%;
    z-index: 999;
}

.imageBadgeMob {
    position: absolute;
    top: -5%;
    left: 78%;
}

.textBadge {
    position: absolute;
    margin: 125px 0px 0px 480px;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    z-index: 999;
}

.textBadgeMob {
    position: absolute;
    top: 13%;
    left: 87%;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
}

.content-title:hover {
    color: #000;
}

.c-xray {
    color: #000;
    position: relative;
    display: inline-flex;
    font-size: 50px;
    font-weight: bolder;
}
.c-xray:before {
    content: attr(data-value);
    color: #000;
    background-color: #fff;
    text-align: center;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    animation: xRay 2s ease-in-out forwards infinite;
}

@keyframes xRay {
    0% {
        clip-path: polygon(0 0, 0 100%, 0 100%, 0 0);
    }
    50% {
        clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
    }
    100% {
        clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);
    }
}

.animateBadge {
    position: absolute;
    top: 10%;
}

.bottomText {
    position: absolute;
    top: 71%;
    left: 0%;
    font-size: 100px;
    font-weight: bold;
    letter-spacing: 15px;
    color: rgb(232, 232, 232);
}

.modalimage {
    position: relative;
    margin: 20px auto 50px;
    padding-bottom: 40px; /* Needed to make room for the shadow */
    height: 300px;
    text-align: center;
}
/* Floating Shadow Pseudoelement */
.modalimage a:after {
    content: "";
    display: block;
    position: absolute;
    left: 12%;
    bottom: 0px;
    width: 80%;
    max-width: 210px;
    height: 10px;
    background: transparent;
    border-radius: 100px/50px;
    box-shadow: 0 50px 40px rgba(0, 0, 0, 0.5);
}

.modalimage a {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 95%;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.modalimage a:hover,
.modalimage a:focus {
    width: 100%;
}

.imageBad {
    z-index: 999;
}

@-webkit-keyframes blinker {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.blink {
    font-size: 30px;
    text-decoration: blink;
    /* -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.6s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate; */
    word-wrap: break-word;
}

.blinking {
    position: absolute;
    top: 73%;
    left: 71%;
    z-index: 999;
    padding: 15px;
    border: 5px solid #3df2fe;
    width: 200px;
}
.priceHome {
    position: absolute;
    top: 76%;
    left: 51%;
    z-index: 999;
    font-size: 45px;
    color: #fff;
}

.priceHome .strike {
    position: absolute;
    top: 60%;
    left: 19.5%;
    z-index: 999;
    font-size: 20px;
    color: #00868d;
}

.prodTitle {
    font-size: 60px;
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.332));
}

.prodTitle1 {
    font-size: 45px;
    line-height: 1rem;
}

.limited {
    filter: drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.332));
}

.bgTextBot {
    font-size: 100px;
    font-weight: 900;
    color: #0b5f5d;
    opacity: 0.1;
}

.main .iconWrap {
    position: relative;
    margin-bottom: 1.5rem;
    font-size: 15px;
    cursor: pointer;
    background-color: #fff;
}
.iconWrap .tooltip {
    position: absolute;
    left: 6rem;
    top: -2.7rem;
    font-size: 0.875rem;
    width: 200px;
    color: #fff;
    background-color: #000;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 4px;
    transform: translateX(-0.325rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease-in-out 0s, transform 300ms ease-in-out 0s;
}
.iconWrap .tooltip::before {
    content: "";
    position: absolute;
    width: 0.6rem;
    height: 0.6rem;
    background-color: #000;
    left: 0px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 1px;
}
.iconWrap:hover .tooltip {
    transform: translateX(0.325rem);
    opacity: 1;
}

.iconWrap .seedetails:hover {
    color: #00f7ec;
}

.creative {
    position: relative;
    font-size: 8vw;
    color: #000;
    -webkit-text-stroke: 0.2vw #00c6bf;
    text-transform: uppercase;
}

.creative::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #00e1d9;
    -webkit-text-stroke: 0vw #383d52;
    border-right: 2px solid #00e1d9;
    overflow: hidden;
    animation: animate6 8s linear infinite;
}

@keyframes animate6 {
    0%,
    10%,
    100% {
        width: 0%;
    }
    70% {
        width: 100%;
    }
}

@font-face {
    font-family: "Decovar Regular24";
    src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Decovar-VF.ttf");
}
.greengrow {
    margin: 100px 0 0 0;
    font-size: 20vw;
    position: relative;
    font-weight: 400;
    font-family: "Decovar Regular24";
    font-variation-settings: "INLN" 400, "SWRM" 1000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #00e1d9;
    /* background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/209708058_b5a5fb07a6_o.jpg); */
    background-size: 30%;
    background-repeat: repeat;
    text-shadow: 2px 2px 5px rgba(42, 67, 8, 0.4);
    -webkit-animation: grow 3s linear infinite alternate;
    animation: grow 3s linear infinite alternate;
}
.greengrow:before {
    text-shadow: 1px 1px 2px rgba(42, 67, 8, 0.5),
        -1px 1px 2px rgba(42, 67, 8, 0.5), -1px -1px 2px rgba(42, 67, 8, 0.5),
        1px -1px 2px rgba(42, 67, 8, 0.5), 3px 3px 20px rgba(0, 0, 0, 0.5);
}
.greengrow:after {
    color: #421f00;
    font-variation-settings: "INLN" 0;
}

@-webkit-keyframes grow {
    0% {
        font-variation-settings: "INLN" 400, "SWRM" 1000;
    }
    100% {
        font-variation-settings: "INLN" 400, "SWRM" 0;
    }
}

@keyframes grow {
    0% {
        font-variation-settings: "INLN" 400, "SWRM" 1000;
    }
    100% {
        font-variation-settings: "INLN" 400, "SWRM" 0;
    }
}

.greengrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
    letter-spacing: 0.6rem;
}
.greengrow:after,
.greengrow:before {
    content: attr(data-text);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}

.box1 {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
}
.box1 .title {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    height: 170px;
}
.box1 .title .block {
    width: 0%;
    height: inherit;
    background: #00f7ec;
    opacity: 1;
    position: absolute;
    animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    display: flex;
}
.box1 .title h1 {
    color: #00e1d9;
    font-size: 160px;
    -webkit-animation: mainFadeIn 2s forwards;
    -o-animation: mainFadeIn 2s forwards;
    animation: mainFadeIn 2s forwards;
    animation-delay: 1.6s;
    opacity: 0;
    display: flex;
    align-items: baseline;
    position: relative;
}

.box1 .role {
    width: 100%;
    position: relative;
    /* display: flex; */
    align-items: center;
    height: 90px;
    margin-top: 0px;
}
.box1 .role .block {
    width: 0%;
    height: inherit;
    background: #00e1d9;
    position: absolute;
    animation: secBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 1s;
    display: flex;
    margin-top: -15px;
}
.box1 .role p {
    animation: secFadeIn 2s forwards;
    -o-animation: secFadeIn 2s forwards;
    animation: secFadeIn 2s forwards;
    animation-delay: 1.6s;
    opacity: 0;
    font-weight: 900;
    color: #000;
    font-size: 72px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.box1 .role p span {
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation: popIn 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 3.1s;
    margin-left: -10px;
    margin-top: -10px;
    position: absolute;
    /* bottom: 5px; */
    right: -5px;
    /* top:81px; */
}

@keyframes mainBlock {
    0% {
        width: 0%;
        left: 0;
    }
    50% {
        width: 50%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
@keyframes secBlock {
    0% {
        width: 0%;
        left: 0;
    }
    50% {
        width: 80%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
@keyframes mainFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes secFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes popIn {
    0% {
        width: 0px;
        height: 0px;
        background: #00e1d9;
        border: 0px solid #ddd;
        opacity: 0;
    }
    50% {
        width: 10px;
        height: 10px;
        background: #00e1d9;
        opacity: 1;
        bottom: 10px;
    }
    65% {
        width: 7px;
        height: 7px;
        bottom: 0px;
        width: 15px;
    }
    80% {
        width: 10px;
        height: 10px;
        bottom: 20px;
    }
    100% {
        width: 7px;
        height: 7px;
        background: #00e1d9;
        border: 0px solid #000;
        bottom: 19px;
    }
}

.box2 {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
}
.box2 .title {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    height: 170px;
    text-align: center;
}
.box2 .title .block {
    width: 0%;
    height: inherit;
    background: #00f7ec;
    opacity: 1;
    position: absolute;
    animation: mainBlock1 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    display: flex;
}
.box2 .title h1 {
    color: #00e1d9;
    font-size: 100px;
    -webkit-animation: mainFadeIn1 2s forwards;
    -o-animation: mainFadeIn1 2s forwards;
    animation: mainFadeIn1 2s forwards;
    animation-delay: 1.6s;
    opacity: 0;
    display: flex;
    align-items: baseline;
    position: relative;
}

.box2 .role {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    height: 90px;
    margin-top: 0px;
}
.box1 .role .block {
    width: 0%;
    height: inherit;
    background: #00e1d9;
    position: absolute;
    animation: secBlock1 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 1s;
    display: flex;
    margin-top: -15px;
}
.box2 .role p {
    animation: secFadeIn1 2s forwards;
    -o-animation: secFadeIn1 2s forwards;
    animation: secFadeIn1 2s forwards;
    animation-delay: 1.6s;
    opacity: 0;
    font-weight: 900;
    color: #000;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.box2 .role p span {
    width: 0px;
    height: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
    -webkit-animation: load 0.6s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation: popIn1 0.8s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
    animation-delay: 3.1s;
    margin-left: -10px;
    margin-top: -10px;
    position: absolute;
    /* bottom: 5px; */
    right: 13px;
    /* top:81px; */
}

@keyframes mainBlock1 {
    0% {
        width: 0%;
        left: 0;
    }
    50% {
        width: 100%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
@keyframes secBlock1 {
    0% {
        width: 0%;
        left: 0;
    }
    50% {
        width: 80%;
        left: 0;
    }
    100% {
        width: 0;
        left: 100%;
    }
}
@keyframes mainFadeIn1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes secFadeIn1 {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes popIn1 {
    0% {
        width: 0px;
        height: 0px;
        background: #00e1d9;
        border: 0px solid #ddd;
        opacity: 0;
    }
    50% {
        width: 10px;
        height: 10px;
        background: #00e1d9;
        opacity: 1;
        bottom: 10px;
    }
    65% {
        width: 7px;
        height: 7px;
        bottom: 0px;
        width: 15px;
    }
    80% {
        width: 10px;
        height: 10px;
        bottom: 20px;
    }
    100% {
        width: 7px;
        height: 7px;
        background: #00e1d9;
        border: 0px solid #000;
        bottom: 25px;
    }
}

.feedback {
    position: fixed;
    z-index: 10;
    right: 20px;
    bottom: -420px;
    width: 350px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
        0 3px 1px -2px rgba(0, 0, 0, 0.2);
    border-radius: 1rem 1rem 0 0;
    background: #fff;
    transition: all 0.8s cubic-bezier(0.22, 0.67, 0.43, 1.22) 0.2s;
}

.feedback:hover {
    bottom: 0px;
}

.feedback .feedback-icon {
    position: absolute;
    display: block;
    top: -49px;
    right: 12px;
    width: 60px;
    height: 60px;
    padding: 3px;
    margin: 20px auto 15px;
    /* border: 2px solid #fff; */
    border-radius: 100%;
    cursor: pointer;
}

.feedback .feedback-icon1 {
    position: absolute;
    display: block;
    top: -104px;
    right: 12px;
    width: 60px;
    height: 60px;
    padding: 3px;
    margin: 20px auto 15px;
    /* border: 2px solid #00e1d9; */
    border-radius: 100%;
    cursor: pointer;
}

.feedback .feedback-icon i {
    width: 50px;
    height: 50px;
    font-size: 20px;
    border-radius: 100%;
    /* background-color: #fff; */
}

.feedback .feedback-icon i::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.feedback .title {
    padding: 10px 15px !important;
    color: #000 !important;
    font-weight: 500;
    font-size: 16px !important;
    letter-spacing: 1px;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}

.feedback p {
    margin: 0;
    padding: 20px 25px;
    color: #666;
    font-size: 13px;
}

.feedback .form-container {
    padding: 0 25px 20px;
}

.feedback textarea:focus {
    outline: none;
    box-shadow: none;
}

.feedback .anonymous-checker {
    color: #666;
    font-size: 12px;
    vertical-align: text-bottom;
}

@media screen and (max-width: 676px) {
    .feedback .form-container {
        padding-top: 15px;
    }

    .feedback {
        right: 50%;
        bottom: -57%;
        left: 50%;
        transform: translateX(-50%);
    }
}

.imgBg {
    background-color: #fff;
    border-radius: 100px;
    padding: 10px;
}
.imgBg1 {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #00e1d9;
}

.highlightDiff {
    background: #00f7ec;
    border-radius: 5px;
    padding: 15px 15px 2px 15px;
}

.share-btn {
    background: linear-gradient(30deg, #00f7ec, #02eaf7);
    color: #fff;
    border: 0;
    padding: 10px 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    transition: 0.3s;
}

.sm-btns {
    position: absolute;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: space-around;
    bottom: 0;
    transform: translateY(100%);
}

.sm-btns a {
    color: #fff;
    transition: 0.3s;
}

.share-btn:hover {
    border-radius: 0;
}

.text,
.icon {
    display: inline-block;
    transition: 0.3s;
    color: #fff;
    font-size: 15px;
}

.icon {
    transition-delay: 60ms;
}

.sm-btns a:nth-child(2) {
    transition-delay: 60ms;
}

.sm-btns a:nth-child(3) {
    transition-delay: 120ms;
}

.share-btn:hover .text,
.share-btn:hover .icon,
.share-btn:hover .sm-btns a {
    transform: translateY(-35px);
}

.sm-btns a:hover {
    opacity: 0.7;
}

.btn1 {
    min-width: 160px;
    width: fit-content;
    width: -moz-fit-content;
    background-color: white;
    padding: 0 30px;
    height: 50px;
    text-transform: uppercase;
    font-size: 16px;
    color: #00e1d9;
    letter-spacing: 2.8px;
    font-weight: 700;
    line-height: 1.6;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.3);
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 0;
    /* btn text */
}
.btn1 span {
    z-index: 1;
    text-align: center;
}
.btn1::before,
.btn1::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    top: 0;
    transition: all 0.4s ease;
    background-color: #00e1d9;
}
.btn1::before {
    left: 0;
}
.btn1::after {
    right: 0;
}
.btn1:hover {
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.2);
    letter-spacing: 2px;
    color: white;
}
.btn1:hover:before,
.btn1:hover:after {
    width: 51%;
}

.btn2 {
    min-width: 200px;
    width: fit-content;
    width: -moz-fit-content;
    background-color: white;
    padding: 0 53px;
    height: 50px;
    text-transform: uppercase;
    font-size: 14px;
    color: #00e1d9;
    letter-spacing: 2.8px;
    font-weight: 700;
    line-height: 1.6;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.3);
    position: relative;
    transition: all 0.4s ease;
    cursor: pointer;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 0;
    /* btn text */
}
.btn2 span {
    z-index: 1;
    text-align: center;
}
.btn2::before,
.btn2::after {
    content: "";
    position: absolute;
    width: 4px;
    height: 100%;
    top: 0;
    transition: all 0.4s ease;
    background-color: #00e1d9;
}
.btn2::before {
    left: 0;
}
.btn2::after {
    right: 0;
}
.btn2:hover {
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.2);
    letter-spacing: 2px;
    color: white;
}
.btn2:hover:before,
.btn2:hover:after {
    width: 51%;
}

.img01 {
    position: absolute;
    top: 10px;
    z-index: 1;
}

.c01 {
    box-shadow: 0 14px 28px rgba(147, 147, 147, 0.25),
        0 5px 20px rgba(192, 192, 192, 0.1);
    background-image: url("/buyer/images/about/01.png");
    background-repeat: no-repeat;
    background-size: 100px;
    background-position-x: 4%;
    background-position-y: 5%;
    height: 450px;
    padding: 30px;
}

.c02 {
    box-shadow: 0 14px 28px rgba(147, 147, 147, 0.25),
        0 5px 20px rgba(192, 192, 192, 0.1);
    background-image: url("/buyer/images/about/02.png");
    background-repeat: no-repeat;
    background-size: 100px;
    background-position-x: 6%;
    background-position-y: 5%;
    height: 450px;
    padding: 30px;
}

.c03 {
    box-shadow: 0 14px 28px rgba(147, 147, 147, 0.25),
        0 5px 20px rgba(192, 192, 192, 0.1);
    background-image: url("/buyer/images/about/03.png");
    background-repeat: no-repeat;
    background-size: 100px;
    background-position-x: 6%;
    background-position-y: 5%;
    height: 450px;
    padding: 30px;
}

.missionCard {
    box-shadow: 0 14px 28px rgba(147, 147, 147, 0.25),
        0 5px 20px rgba(192, 192, 192, 0.1);
    background-repeat: no-repeat;
    background-size: 300px;
    background-position-x: 20px;
    background-position-y: 20px;
    height: 230px;
    padding: 30px;
}

.visionCard {
    box-shadow: 0 14px 28px rgba(147, 147, 147, 0.25),
        0 5px 20px rgba(192, 192, 192, 0.1);
    background-repeat: no-repeat;
    background-size: 250px;
    background-position-x: 20px;
    background-position-y: 20px;
    height: 230px;
    padding: 30px;
}

.brandCard {
    box-shadow: 0 14px 28px rgba(147, 147, 147, 0.25),
        0 5px 20px rgba(192, 192, 192, 0.1);
    background-repeat: no-repeat;
    background-size: 500px;
    background-position-x: 20px;
    background-position-y: 20px;
    height: 484px;
    padding: 30px;
}

.textCyan1 {
    color: #28c1be;
}

.cardcyan {
    position: absolute;
    top: -100px;
    left: 10px;
}

.squareCard {
    position: absolute;
    top: 10%;
    left: 4.5%;
    height: 35px;
    width: 35px;
    opacity: 0.5;
    border-radius: 0px;
}

#input-search {
    position: relative;
    padding: 8px 40px 8px 20px;
    width: 200px;
    color: #525252;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 2px;
    border: 0.25px solid gainsboro;
    border-radius: 100px;
    background-color: #000;
    transition: width 0.4s ease;
    outline: none;
    margin-top: 13px;
    color: #fff;
}
#input-search:focus {
    width: 500px;
}

.fa-search {
    position: absolute;
    left: -37px;
    color: gainsboro;
}

.social {
    position: absolute;
    right: 35px;
    bottom: 35px;
}
.social img {
    display: block;
    width: 32px;
}

.textCyan2 {
    color: #13c5bd;
}

.mission {
    position: absolute;
    top: -71.51px;
    left: 18.3%;
    z-index: 1;
}

.mission01 {
    position: absolute;
    top: -75.7px;
    left: 14.7%;
}

.vision {
    position: absolute;
    top: -71.51px;
    left: 60.6%;
    z-index: 1;
}

.vision01 {
    position: absolute;
    top: -75.7px;
    left: 56.7%;
}

.bvalues {
    position: absolute;
    top: 186.6px;
    left: 27.8%;
    z-index: 1;
}

.bvalues01 {
    position: absolute;
    top: 181.6px;
    left: 23.9%;
}

.text-bold1 {
    font-weight: 400;
}

.text-bold2 {
    font-weight: 600;
}

.hr_about {
    border: 3px solid #00f7ec;
    color: #00f7ec;
}

.hr_about1 {
    border: 3px solid #00f7ec;
    color: #00f7ec;
}

.cardFree {
    position: absolute;
    border-radius: 0.25px;
    top: 27%;
    left: 98.5%;
    height: 200px;
    width: 20px;
    background-color: #00f7ec;
}

.cardFree1 {
    position: absolute;
    top: 77%;
    left: 11%;
    background-color: #abfbf8;
    z-index: 1;
    height: 350px;
    width: 350px;
    border-radius: 20px;
}

.cardFree2 {
    position: absolute;
    top: 63%;
    left: -3%;
    background-color: #abfbf8;
    z-index: 1;
    height: 132px;
    width: 380px;
    border-radius: 20px;
}

.cardFree3 {
    position: absolute;
    top: 6%;
    left: 97.5%;
    background-color: #00f7ec;
    z-index: 1;
    height: 101px;
    width: 55px;
    border-radius: 0px;
}

.tessphoutline {
    position: absolute;
    top: 20%;
    left: 10%;
}

.parallax12 {
    background-color: #ecfefe;
    overflow: hidden;
}

.business {
    height: 70vh !important;
    background-color: #fff;
}

.parallax13 {
    background-color: #8ff4ef;
}

.badge70 {
    background-image: url("buyer/images/others/badge4.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.offcanvas-start1 {
    top: 0;
    left: 0;
    width: 552px;
    border-right: 0 solid transparent;
    transform: translateX(-100%);
}

.privacy {
    position: absolute;
    top: 4%;
    left: 9%;
    font-size: 220px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}
.policy {
    position: absolute;
    top: 22%;
    left: 29%;
    font-size: 220px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}

.privacy1 {
    position: absolute;
    top: 10%;
    left: 14%;
    font-size: 67px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}
.policy1 {
    position: absolute;
    top: 16%;
    left: 29%;
    font-size: 67px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}

.terms {
    position: absolute;
    top: 6%;
    left: 9%;
    font-size: 200px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}
.condition {
    position: absolute;
    top: 18%;
    left: 20%;
    font-size: 180px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}

.leftCard {
    position: absolute;
    top: 20%;
    left: 0%;
    width: 20px;
    height: 100px;
    border-radius: 0px;
}

.leftCard1 {
    position: absolute;
    top: 32.5%;
    left: 0%;
    width: 20px;
    height: 100px;
    border-radius: 0px;
}

.leftCard2 {
    position: absolute;
    top: 25%;
    left: 0%;
    width: 20px;
    height: 100px;
    border-radius: 0px;
}

.leftCard3 {
    position: absolute;
    top: 13%;
    left: 0%;
    width: 20px;
    height: 100px;
    border-radius: 0px;
}

.leftCard4 {
    position: absolute;
    top: 11.5%;
    left: 0%;
    width: 20px;
    height: 80px;
    border-radius: 0px;
}

.leftCard5 {
    position: absolute;
    top: 9.5%;
    left: 0%;
    width: 20px;
    height: 100px;
    border-radius: 0px;
}

.question {
    position: absolute;
    top: 17%;
    left: 4.5%;
    font-size: 242px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}

.btnTess {
    background-color: #4de2dd;
    color: #fff;
}

.offcanvas-bottom1 {
    right: 0;
    left: 0;
    height: 49vh;
    max-height: 100%;
    border-top: 0 solid transparent;
    transform: translateY(100%);
}

.offcanvas-end1 {
    width: 100vh;
    top: 0px;
    right: 0px;
    border-left: 0px solid transparent;
    transform: translateX(100%);
}

#mobile_dt_filter {
    margin-top: 10px;
}

.banner_tac {
    /* background-image: url("buyer/images/background/support_bg.jpg"); */

    background-repeat: no-repeat;
    color: #262626;
    margin: -5px -20px 0px -16px;
    background-size: cover;
}

.badge1 {
    padding: 0.25em 0.4em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: no;
    border-radius: 5px;
}

.badge-soft-info1 {
    color: #45bbe0;
    background-color: rgba(69, 187, 224, 0.18);
    box-shadow: none;
}

.howcan {
    position: absolute;
    top: 12%;
    left: 9%;
    font-size: 150px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}
.helpyou {
    position: absolute;
    top: 20%;
    left: 22%;
    font-size: 150px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}

.upDesign {
    position: absolute;
    top: 117px;
    left: 0;
}

.downDesign {
    position: absolute;
    top: 307px;
    right: 0;
}

.upDesignMob {
    position: absolute;
    top: 0;
    left: 0;
}

.downDesignMob {
    position: absolute;
    top: 100px;
    right: 0;
}

.hotdeals {
    position: absolute;
    top: 22%;
    left: 4.5%;
    font-size: 242px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}

.categories {
    position: absolute;
    top: 15%;
    left: 33.5%;
    font-size: 242px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: rgb(146, 146, 146, 0.3);
    z-index: 1;
}

.offcanvas-end1 {
    top: 0;
    right: 0;
    width: 60vh;
    border-left: 0 solid transparent;
    transform: translateX(100%);
}

.questionmark {
    position: absolute;
    top: 100px;
    right: 0;
}

.rounded-circle1 {
    border-radius: 20%;
}

.shareBtn {
    position: absolute;
    top: 6%;
    right: 5%;
}

#rate {
    float: left;
}

.rateStar {
    transition: 0.25s ease;
    font-size: 20px;
    color: #ced4da;
}
.selected {
    color: #fca311;
}

.hoverOpacity {
    position: absolute;
}

.dropdown-menu.show {
    top: 100% !important;
    /*left: -112% !important;*/
}

.highlights {
    font-size: 100px;
    font-weight: bold;
    margin-left: 90px;
}

.box-container {
    position: absolute;
    border-radius: 1em;
    width: 750px;
    height: 300px;
    margin-left: -375px;
    margin-top: -316px;
    left: 50%;
    top: 12%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.space {
    padding: 0 0.7em;
}

.box {
    font-size: 70px;
    font-weight: 600;
    position: relative;
    text-align: center;
    height: 1.4em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #000;
    box-shadow: none;
}

.click {
    font-size: 30px;
    font-weight: 600;
    position: absolute;
    width: 150px;
    height: 80px;
    margin-left: -75px;
    left: 50%;
    top: 70%;
    text-align: center;
    background: #ffac54;
    border-radius: 1em;
    transition: 300ms;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hover-click:hover {
    background: #ffb363;
    cursor: pointer;
}

.ani-button {
    animation-name: pulse;
    animation-timing-function: cubic-bezier(0.09, 0.79, 0.74, 0.34);
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes pulse {
    from {
        background: #fff6ed;
    }
    to {
        background: #737373;
    }
}
@media only screen and (max-width: 800px) {
    .box {
        font-size: 40px;
    }

    .box-container {
        width: 300px;
        height: 120px;
        margin-left: -150px;
        margin-top: -70px;
    }
}

.blogPara {
    color: #000;
    font-size: 18px;
    margin-top: 497px;
    letter-spacing: 1px;
}

mark {
    -webkit-animation: 1.5s highlighttext 3.5s 1 normal forwards;
    animation: 1.5s highlighttext 3.5s 1 normal forwards;
    background-color: none;
    background: linear-gradient(90deg, #7efff5 50%, rgba(255, 255, 255, 0) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
}

.mark {
    -webkit-animation: 1.5s highlighttext 3.5s 1 normal forwards;
    animation: 1.5s highlighttext 3.5s 1 normal forwards;
    background-color: none;
    background: linear-gradient(
        90deg,
        rgb(9, 95, 129) 50%,
        rgba(255, 255, 255, 0) 50%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
}

.mark1 {
    -webkit-animation: 1.5s highlighttext 3.5s 1 normal forwards;
    animation: 1.5s highlighttext 3.5s 1 normal forwards;
    background-color: none;
    background: linear-gradient(
        90deg,
        rgb(255, 255, 255, 255) 50%,
        rgba(255, 255, 255, 0) 50%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
}

@-webkit-keyframes highlighttext {
    to {
        background-position: 0 0;
    }
}

@keyframes highlighttext {
    to {
        background-position: 0 0;
    }
}

.product .gallery {
    width: 50%;
    position: relative;
    z-index: 1;
}
.product .gallery::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background: radial-gradient(at top right, rgba(209, 98, 52, 0.33), #d16234);
    animation: 12s goop ease-in-out infinite both alternate;
}
@keyframes goop {
    0% {
        border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
        transform: rotate(0deg);
    }
    100% {
        border-radius: 40% 60%;
        transform: rotate(1turn);
    }
}

.gallery {
    width: 50%;
    position: relative;
    z-index: 0;
}
.product .gallery::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -120px;
    width: 480px;
    height: 480px;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    background: radial-gradient(
        at top right,
        rgba(53, 206, 220, 0.33),
        #00e1d9
    );
    animation: 12s goop ease-in-out infinite both alternate;
    z-index: -1;
}
@keyframes goop {
    0% {
        border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
        transform: rotate(0deg);
    }
    100% {
        border-radius: 40% 60%;
        transform: rotate(1turn);
    }
}

.imgGoop {
    margin-top: 25px;
    margin-left: 200px;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}

.s_event {
    position: initial;
    top: 52%;
    left: 10%;
    padding: 0px 0px 0px 20px;
    margin: 0px;
    box-shadow: none;
    border-radius: 40px;
}

.containerBlog {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 75vw;
    height: 50vmin;
}
.blogImg {
    flex: 1;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
    filter: grayscale(50%) brightness(75%);
    transition: all 0.5s;
}
.blogImg:hover {
    flex: 8;
    filter: grayscale(0%) brightness(115%);
}

.colBlog {
    display: flex;
    flex-direction: column;
    font-size: 0;
    border-right: 1px solid #52525b;
}

.colBlog:nth-child(1) {
    border-left: 1px solid #52525b;
    min-height: 100%;
}

.colBlog:nth-child(2) {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50%;
}

.colBlog > section {
    width: 100%;
    position: relative;
    border-bottom: 1px solid #52525b;
    cursor: pointer;
}
.colBlog > section:first-child {
    border-top: 1px solid #52525b;
}

.colBlog > section img {
    width: 100%;
    object-fit: cover;
    transition: opacity 0.3s;
}

.colBlog > section p {
    position: absolute;
    bottom: 2vmin;
    left: 2vmin;
    font-size: 2.5vmin;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #d4d4d8;
    opacity: 0;
    transition: opacity 0.3s;
}

.colBlog > section:hover img {
    opacity: 0.6;
}

.colBlog > section:hover p {
    opacity: 1;
}

.full {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #18181baa;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4vmin;
    overflow: hidden;

    transition: opacity 0.5s;
    opacity: 0;
    pointer-events: none;
}
.full.show {
    opacity: 1;
    pointer-events: auto;
}
.full > div {
    position: relative;
    background: #18181b;
    width: 100%;
    max-width: 768px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4vmin;
    gap: 4vmin;
    transition: transform 0.5s;
    transform: translateY(20vh);
}
.full.show > div {
    transform: translateY(0px);
}
.full .close {
    position: absolute;
    top: 1vmin;
    right: 1vmin;
    padding: 1vmin;
    cursor: pointer;
}
.full .inner h1 {
    font-size: 6vmin;
    margin-bottom: 1vmin;
}
.full img {
    height: 50%;
    width: auto;
    object-fit: contain;
    flex: 0 1;
}
.full .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.full .inner a {
    display: flex;
    height: 7vmin;
    width: 50%;
    padding: 0 2vmin;
    font-size: 2.5vmin;
    border-radius: 4pt;
    justify-content: center;
    align-items: center;
    gap: 1vmin;
    text-decoration: none;
    margin: 1vmin 0;
}
.full .inner a:nth-of-type(1) {
    background-color: #e4e4e7;
    color: #27272a;
}
.full .inner a:nth-of-type(1) svg {
    width: 5vmin;
    height: 5vmin;
}
.full .inner a:nth-of-type(1):hover {
    background-color: #e4e4e7cc;
}

.full .inner a:nth-of-type(2) {
    border: 2px solid #e4e4e7;
    color: #e4e4e7;
}
.full .inner a:nth-of-type(2):hover {
    border-color: #e4e4e7aa;
    color: #e4e4e7aa;
}

.quote_icon{
    position: absolute;
    top: 60.5%;
    left: 50.3%;
    font-size: 30px;
}


.quote_iconMob{
    position: absolute;
    top: 56.8%;
    left: 4.3%;
    font-size: 30px;
    z-index: 999;
}

.quote_icon2{
    position: absolute;
    top: 64%;
    left: 79.5%;
    font-size: 30px;
}

.quote_icon2Mob{
    position: absolute;
    top: 62.5%;
    left: 80.5%;
    font-size: 30px;
    z-index: 999;
}

.listings-container {
    margin: 60px 0 auto 0;
    padding: 0;
    height:  111vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    overflow: hidden;
}


.listings-container1 {
    margin: 0;
    padding: 0;
    height:  111vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.scene {
    width: 300px;
    height: 600px;
    perspective: 600px;
}

.cardCoupon {
    width: 100%;
    height: 86%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    margin-top: 62px;
    
}

.cardCoupon1 {
    width: 100%;
    height: 86%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    margin-top: 90px;
    
}

.card__face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
}

.card__face--front {
    background: white;
    border-radius: 16px;
}



.mobile-title {
    margin-top: 15px;
    padding: 0;
    margin-bottom: 0;
    color: #000;
    font-size: 12px;
}

.num {
    margin: 0;
    display: flex;
    justify-content: center;
    font-size: 40px;
    margin-top: 10px;
}

.sell {
    display: flex;
    justify-content: space-around;
    margin-top: 218px;
    padding-top: 20px;
    border-top: 2px dotted #ddd;
}

.down {
    padding: 14px 15px;
    background-color: #ecf2f5;
    border-radius: 50%;
    position: absolute;
    bottom: 70px;
    right: 285px;
}

.up {
    padding: 14px 15px;
    background-color: #ecf2f5;
    border-radius: 50%;
    position: absolute;
    top: 417px;
    right: -15px;
}


.down1 {
    padding: 14px 15px;
    background-color: #4de2dd;
    border-radius: 50%;
    position: absolute;
    bottom: 70px;
    right: 285px;
}

.up1 {
    padding: 14px 15px;
    background-color: #4de2dd;
    border-radius: 50%;
    position: absolute;
    top: 417px;
    right: -15px;
}


.coup {
    width: 100%;
    height: 100%;
}


.ref {
    margin: 0;
    padding: 0;
    font-size: 12px;
    display: flex;
    justify-content: center;
    color: #999;
    margin-bottom: 25px;

}

.icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 30px;
}

.day {
    font-size: 12px;
    width: 25%;
}


.meter {
    font-size: 12px;
    font-weight: 900;
}

.buy {
    display: flex;
    justify-content: space-around;
}

.buy-button {
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 28px;
    font-family: 'Poppins', sans-serif;
    border: none;
    background-color: #ddd;
}

.logos{
    margin-top: -27px;
    border-radius: 5px;
    height: 239px;
}

.btnOff{
    box-shadow: 0 4px 203px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*CREATE VOUCHER*/

.tickets-container {
    margin: 100px 0 0 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    /* align-items: center; */
    font-family: 'Poppins', sans-serif;
    ;
}

.tickets-container .item {
    width: 1050px;
    height: 400px;
    background: #fff;
    display: flex;
    border-radius: 16px;
}


.tickets-container .item-right {
    margin-right: 20px;
    width: 30%;
    position: relative;
    height: 100%;
    padding-left: 10px;
}


.day {
    font-size: 12px;
    width: 25%;
}


.meter {
    font-size: 12px;
    font-weight: 900;
}

.buy {
    display: flex;
    justify-content: space-around;
}

.buy-button {
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 28px;
    font-family: 'Poppins', sans-serif;
    border: none;
}

.up-border, .down-border {
    padding: 14px 15px;
    background-color: #ecf2f5;
    border-radius: 50%;
    position: absolute
}

.up-border {
    top: -12px;
    right: -35px;
}

.down-border {
    bottom: -13px;
    right: -35px;
}

.tickets-container .item-right .num {
    margin: 0;
    font-size: 60px;
    text-align: center;
    color: #111;
}


.tickets-container .item-left {
    width: 70%;
    height: 100%;
    /* border-left: 3px dotted #999; */
    background-color: #92f0f1;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
} 

.voucherOff{
    color: #13c5bd;
    font-size: 100px;
    font-weight: bold;
}

.voucher{
    color: #13c5bd;
    font-size: 77px;
    font-weight: bold;
    line-height: 0.75rem;
}

.minimum{
    color: #13c5bd;
    font-size: 32px;
}

.btnCollect{
    background-color: #13c5bd;
    border-radius: 100px;
    font-size: 25px;
    padding: 10px 20px 10px 20px;
    font-weight: bold;
}

@media only screen and (max-width: 43rem) {
    .tickets-container .item {
    width: 100%;
    margin-right: 20px
}
    div.tickets-container {
        margin: 0 20px auto
    }
}

@media screen and (max-width: 600px) {
    li.page-item {
        display: none;
    }

    .page-item:first-child,
    .page-item:nth-child(2),
    .page-item:nth-last-child(2),
    .page-item:last-child,
    .page-item.active,
    .page-item.disabled {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .typing-container {
        font-size: 1.5rem;
    }
}
@media only screen and (max-width: 600px) {
    .bp-card {
        position: relative;
    }
    .bp-card .bp-card_label {
        top: 0;
        left: 0;
        bottom: 0;
        width: calc(100% - 40px);
        margin-left: 20px;
        height: 120px;
        position: relative;
    }
    .bp-card .bp-card_label:after,
    .bp-card .bp-card_label:before {
        transform: rotate(90deg);
        transform-origin: top left;
        width: 126px;
        top: -2px;
    }
    .bp-card .bp-card_label:after {
        left: 80px;
        right: auto;
    }
    .bp-card .bp-card_label:before {
        left: auto;
        right: -146px;
    }
    .bp-card .bp-card_label .bd-border_dotted {
        width: 100%;
        border-top: 4px dashed #f0f0f0;
        border-right: none;
        height: 4px;
        top: 92px;
        left: 0;
    }
    .bp-card .bp-card_label .bd-border_solid {
        width: 80%;
        background: #ffaf96;
        height: 3px;
        top: 45px;
        left: 10%;
    }
    .bp-card .bp-card_content {
        margin-left: 0;
        width: 100%;
        padding: 3% 5% 5% 5%;
    }
    .bp-card .bp-card_content h4 {
        font-size: 32px;
        margin: 0;
    }
    .bp-card .bp-card_content ul {
        list-style: none;
        margin: 20px 0 0 0;
        padding: 0;
    }
    .bp-card .bp-card_content ul span {
        display: block;
        color: #a8a8a8;
    }
    .bp-card .bp-card_content ul li {
        padding: 0;
        display: inline-block;
        width: 100%;
        padding-right: 30px;
        margin-bottom: 5px;
    }
    .bp-card .bp-card_content a.price {
        position: relative;
        width: 100%;
        display: block;
        margin: 0 auto;
        top: auto;
        right: auto;
        margin-top: 20px;
        text-align: center;
    }
    .bp-card .bp-card_content a.price:before {
        content: "";
        background: url("http://imgh.us/i-arrow.svg") center no-repeat;
        background-size: contain;
        position: absolute;
        right: 22px;
        top: 22px;
        width: 20px;
        height: 20px;
    }
}
@media only screen and (max-width: 360px) {
    .topnav {
        height: auto;
    }

    .column {
        margin-left: 0px;
        height: 50px;
    }

    .navbar-toggle {
        padding: 10px;
    }

    #logo1 {
        display: block;
        margin-top: 18px;
    }

    #products {
        display: none;
    }

    .bigSearchRow {
        position: relative;
        top: -59px;
    }

    #search {
        display: none;
    }

    #search-icon {
        display: none;
    }

    #searchMob {
        margin-top: -30px;
        margin-left: 300px;
        display: block;
    }

    .slogan {
        font-size: 15px;
        text-align: center;
        color: #fff;
        margin: 0px;
    }

    .subBrand {
        margin: 0px;
        font-size: 30px;
        text-align: center;
        color: #fff;
        font-weight: bold;
    }

    .brand {
        font-size: 3rem;
        color: #343a40;
        text-align: center;
        font-weight: 900;
        margin: 0px;
        line-height: 70px;
    }

    .specs {
        margin-top: 100px;
    }

    #fphoto {
        margin-top: 100px;
        height: 200px;
        -webkit-filter: drop-shadow(5px 5px 5px #222);
        filter: drop-shadow(-20px 10px 2px #03cbd5);
    }

    .firstCol {
        padding: 0px;
    }

    .firstCol > .fa-music,
    .fa-volume-down,
    .fa-battery-full,
    .fa-bluetooth {
        color: #343a40;
        margin-top: 10px;
        font-size: 1.2rem;
    }

    .firstCol > .spec {
        margin-top: 20px;
        font-size: 10px;
        color: #000;
        font-weight: 200;
    }

    .learn-more {
        border-radius: 0px;
        margin-right: 0px;
        font-size: 15px;
    }

    .buy-now {
        margin-right: 0px;
        border-radius: 0px;
        font-size: 15px;
    }

    .line-divider {
        width: 100px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .prod-carousel {
        background-color: transparent;
    }
}
@media (min-width: 992px) {
    body[data-layout-mode="horizontal"] .content-page {
        padding: 50px 0px 0px 0px;
    }
}

@media only screen and (max-width: 991.98px) {
    body[data-layout-mode="horizontal"] .navbar-toggle .lines {
        width: 25px;
        display: block;
        position: relative;
        height: 16px;
        transition: all 0.5s ease;
        margin-top: calc(37px / 2);
    }
    #logo1 {
        display: block;
        margin-top: 15px;
    }
    .column {
        margin-left: 0px;
    }
}

@media (min-width: 1200px) {
    body[data-layout-mode="horizontal"] .navbar-custom {
        padding: 0px;
    }
    #logo1 {
        display: none;
    }
}

@media screen and (max-width: 1200px) {
    .percent {
        margin-left: 63px;
    }
}

.compare-selected {
    border: solid 3px cyan !important;
}

.compare-unselected {
    border: solid 3px white !important;
}

.one-line-parag {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    margin-left: 15px !important;
    margin-right: 15px !important;
}