@import url('css2.css'); :root {
    --primary-color: #4e8143;
    --secondary-color: #202020;
    --third-color: #cee7ff;
    --gray: #505050;
    --selected: #4e8143;
    --selected-b: #4e8143;
    --text-a: #ffffff;
    --text-b: #e7e7e7;
}

* {
    box-sizing: border-box
}

*,*:focus,*:hover,*:active,*:before,*:after {
    outline: 0
}

*::-moz-selection {
    background: #29beec6b;
    color: #fff
}

*::selection {
    background: rgb(144 144 144/19%);
    color: #ffffff;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: var(--third-color);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 5px;
}

html {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative
}

body {
    width: 100%;
    position: relative;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #202121;
    font-family: montserrat,sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    border: 0;
    cursor: pointer;
    color: var(--text-a);
}

p,h1,h2,h3,h4 {
    margin: 0
}

.section-main,nav,footer {
    min-width: 100%;
    position: relative;
    display: block
}

.navbar-in,.header-in,.section-in,.footer-in {
    width: 100%;
    padding-left: 40px;
    height: 100%;
    margin-left: auto;
    max-width: 1450px;
    position: relative;
    z-index: 5;
    padding-right: 40px;
    margin-right: auto
}

.top-bar {
    background: rgb(255 255 255 / 15%);
    backdrop-filter: blur(1px);
    height: 50px;
    position: relative;
    z-index: 5;
    width: 70%;
    max-width: 900px;
    margin: 0 auto;
    clip-path: polygon(0 0, 100% 0, 96% 100%, 4% 100%);
}

.top-bar .navbar-in {
    padding: 0 60px;
    justify-content: space-between;
}

.t-l {
    color: #fff;
    display: flex;
    user-select: none;
    cursor: pointer;
    align-items: center;
    font-weight: 600;
    font-size: 15px;
    transition: .2s ease-in-out;
}

.t-l i {
    margin-left: 10px;
    height: 14px;
    font-size: 20px;
    transition: transform .2s ease-in-out
}

.t-l:hover i {
    transform: translateX(5px)
}

.t-r {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: .2s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 1px
}

nav {
    height: 100px;
    position: absolute;
    /* background: #ffffff24; */
    z-index: 5;
    /* backdrop-filter: blur(3px); */
}

body.mini nav {
    position: relative;
    /* background: var(--secondary-color); */
}

.navbar-in {
    display: flex;
    align-items: center;
    position: relative
}

.main-logo-a {
    margin-right: 20px;
}

.main-logo {
    height: 85px;
    transition: 150ms ease 0s;
}

.main-logo:hover {
    transform: scale(1.1);
}

.main-logo:hover {
    animation-name: hvr-wobble-vertical;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1
}

.navbar-l {
    margin-right: auto;
    display: flex;
    align-items: center
}

.navbar-r {
    display: flex;
    align-items: center;
    grid-gap: 40px;
}

.navbar-link {
    font-weight: 500;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    transition: 150ms ease 0s;
    position: relative;
}

.navbar-link:before {
    position: absolute;
    content: "";
    width: 0;
    visibility: visible;
    height: 3px;
    background: #6483a5;
    border-radius: 10px;
    bottom: -8px;
    margin: 0 auto;
    left: 0;
    transition: 150ms ease 0s;
    right: 0;
}

.navbar-link.c:before {
    display: none;
}

.navbar-link.c {
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 15px;
    background: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.navbar-link:hover:before {
    width: 60%;
    visibility: visible;
}

.navbar-link.c:hover {
    transform: translateX(-10px);
    border-radius: 4px;
}

.header-l {
    margin-right: auto;
    width: 55%;
    display: block
}

.header {
    box-sizing: content-box;
    background-size: cover;
    background-position: center;
    position: relative;
    display: block;
    height: 100vh;
    margin-top: -50px;
}

.header:before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: "";
    z-index: 2;
    background-image: url(https://awayproducts.us/OSWB7Gt.png);
    background-color: rgb(10 31 48 / 42%);
}

.header:after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: -195px;
    width: 242px;
    height: 176px;
    /* background: url(../images/dots-primary.svg) */
}

.heaeder-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.video-bg {
    width: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    font-family: 'object-fit: cover; object-position: center center;';
    height: 100%
}

.image-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-in {
    position: relative;
    padding-top: 140px;
    padding-bottom: 112.5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 3;
}

.header-cont {
    width: 55%;
    display: block
}

.header-title {
    color: var(--text-a);
    font-size: 2.5em;
    font-weight: 800;
    text-transform: uppercase;
}

.header-desc {
    margin: 20px 0 30px;
    font-weight: 400;
    color: #f9f9f9;
    line-height: 29px;
    max-width: 650px;
    font-size: 17px;
}

.header-btns {
    display: flex;
    align-items: center;
    grid-gap: 20px;
}

.header-btp {
    display: block;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    background: #9f9f9f40;
    border: #ffffff38 2px solid;
    color: var(--text-a);
    padding: 15px 20px;
    border-radius: 5px;
    letter-spacing: 2px;
    transition: .2s ease 0s;
    user-select: none;
    text-align: center;
}

.header-btp.c {
    background: 0 0;
    color: #fff
}

.header-btp:hover {
    transform: translateY(5px)
}

.xnh-feature {
    margin-left: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: -112.5px;
    grid-gap: 28px;
    position: relative;
}

.xnh-fin {
    position: relative;
    background: #80ea9336;
    padding: 40px;
    backdrop-filter: blur(5px);
    border: 2px solid;
}

.xnh-fin:nth-child(1) {
    border-left: 0;
    border-radius: 0 10px 10px 0;
    border-color: #3a5836!important;
}

.xnh-fin:nth-child(2) {
    background: #2c2c2ca6;
    border-color: #363636!important;
    border-radius: 10px;
}

.xnh-fin:nth-child(3) {
    border-right: 0;
    border-radius: 10px 0 0 10px;
    border-color: #3a5836!important;
}

.xnh-fin-t {
    display: flex;
    align-items: center;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--text-a);
}

.xnh-fin-t i {
    color: #FFF;
    background: #ffffff1f;
    border: 2px solid #ffffff17;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 6px;
    margin-right: 15px;
}

.xnh-fin-b {
    margin-top: 20px;
    font-size: 16px;
    line-height: 26px;
    color: var(--text-a);
    font-weight: 500;
}

.xnh-feature:before, .xnh-feature:after {
    background: #80ea9336;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 100%;
    border-top: 2px solid;
    border-bottom: 2px solid;
    border-color: #3a5836;
    box-sizing: border-box;
    backdrop-filter: blur(5px);
}

.xnh-feature:after {
    right: unset;
    left: 100%;
}

.region-card.active .region-card-in {
    border-bottom: 3px solid var(--primary-color);
}

.region-holder {
    display: grid;
    grid-gap: 35px;
    margin-top: 100px;
    grid-template-columns: repeat(4,1fr)
}

.region-card {
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    user-select: none;
    cursor: pointer;
    transition: 150ms ease 0s;
}

.region-card:hover {
    transform: translateY(-5px)
}

.region-card input[type=radio],.packages-card input[type=radio] {
    display: none
}

.region-card-in {
    border-radius: 6px;
    background: #141414;
    border: 1px solid #343434;
    height: 100%;
    padding: 20px 30px;
    color: var(--text-a);
    display: block;
    cursor: pointer;
}

.region-name {
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 30px;
    margin-bottom: 5px
}

.region-sun {
    font-weight: 500;
    letter-spacing: .5px
}

.product-holder {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: 30% calc(70% - 40px);
    margin-top: 60px
}

.product-info {
    display: grid;
    position: relative;
    background: #141414;
    border: 1px solid #343434;
    border-radius: 5px;
    transition: 150ms ease 0s;
    padding: 20px;
    grid-gap: 25px;
}

.product-info.xn-mobile-version {
    display: none;
}

.products-title {
    font-size: 28px;
    color: var(--text-a);
}

.region-holder .products-title {
    display: none;
}

.package-holder {
    display: none;
    grid-gap: 25px;
    margin: 20px 0 25px;
    grid-template-columns: repeat(2,1fr);
}

.package-holder.active {
    display: grid;
}

.error {
    display: flex;
    flex-direction: column;
    width: 100%;
    grid-gap: 10px;
    margin: 15px 0;
}

.error span {
    font-size: 14px;
    background: #fff5f4;
    border: 1px solid #ffeceb;
    color: #000;
    border-radius: 2px;
    padding: 5px 10px;
}

.packages-card {
    border-radius: 4px;
    background: #141414;
    color: var(--text-a);
    border: 1px solid #343434;
    user-select: none;
    cursor: pointer;
    transition: 150ms ease 0s;
    position: relative;
}

.packages-card:hover {
    background: #1c1c1c;
}

.packages-card:before, .order-status-b:before, .order-status-m-in:before {
    content: "";
    background: var(--primary-color);
    border-radius: 5px;
    transform: translate(5px,5px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
    transition: 100ms ease 0s;
}

.packages-card .package-in {
    display: block;
    position: relative;
    cursor: pointer;
    padding: 20px;
}

.package-title {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: 2px
}

.package-price {
    font-weight: 400;
    font-size: 14px;
    margin: 5px 0;
    color: var(--text-b);
}

.package-price span {
    font-weight: 600;
    color: var(--text-a);
}

.package-desc {
    font-size: 16px;
    font-weight: 500
}

.package-button, .order-status-button {
    width: 100%;
    height: fit-content;
    background: var(--primary-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 16px;
    color: #fff;
    border: none;
    font-family: montserrat,sans-serif;
    transition: 150ms ease 0s;
    cursor: pointer;
    user-select: none;
}

.package-button:hover, .order-status-button:hover {
    transform: translateY(5px)
}

.package-button i, .order-status-button i {
    margin-left: 6px
}

.packages-card.active:after {
    content: "Selected";
    background: var(--selected);
    color: #fff;
    position: absolute;
    top: 0;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 5px 0 5px;
    padding: 3px 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px
}

.packages-card.active {
    border-color: var(--selected-b)
}

.packages-card.active:before {
    background: var(--selected)
}

.packages-card.out-of-stock:after {
    content: "Contact Owner";
    background: var(--secondary-color);
    color: #fff;
    position: absolute;
    top: 0;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 5px 0 5px;
    padding: 3px 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px
}

.packages-card.out-of-stock {
    user-select: none;
    pointer-events: none;
}

.packages-card.out-of-stock:before {
    background: var(--secondary-color)
}

.xn-about {
    display: flex;
    flex-direction: column;
    grid-gap: 60px;
    padding: 100px 0;
    position: relative;
}

.xn-about:before, .blogs-holder:before, .xn-info:before {
    content: "";
    position: absolute;
    width: 200%;
    height: 100%;
    background: #fff;
    top: 0;
    left: -50%;
    z-index: -1;
    opacity: .05;
}

.xn-about-t {
    display: flex;
    width: 100%;
}

.xn-about-t-l {
    display: block;
    position: relative;
    width: 61%;
}

.xn-about-t-l-title {
    font-size: 2.5em;
    color: #ffffff;
    letter-spacing: 0px;
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 60px;
}

.xn-about-t-l-desc {
    font-weight: 400;
    line-height: 32px;
    color: var(--text-b);
    font-size: 16px;
}

.xn-about-b {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 40px
}

.xn-about-b-card {
    position: relative;
    color: #fff;
    background: var(--primary-color);
    box-shadow: 6px 6px var(--third-color);
    padding: 30px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    transition: 150ms ease 0s;
}

.xxn-about-b-l {
    margin-right: 30px;
    width: 60px;
    min-width: 60px;
    height: 60px;
    min-height: 60px;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center
}

.xxn-about-b-l i {
    color: var(--primary-color);
    font-size: 30px
}

.xn-about-b-r {
    display: block;
    position: relative
}

.xn-about-b-r h2 {
    margin-bottom: 10px;
    text-transform: uppercase
}

.xn-about-b-r p {
    font-size: 16px;
    letter-spacing: .5px;
    font-weight: 400
}

.xn-info {
    display: flex;
    align-items: center;
    grid-gap: 60px;
    padding: 100px 0;
    position: relative;
    margin-top: 100px;
}

.xn-info: before {
    content: "";
    position: absolute;
    width: 200%;
    height: 100%;
    background: #FFF;
    top: 0;
    left: -50%;
    z-index: -2;
    opacity: .1;
}

.xn-info-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.xn-info-bg:before, .xn-info-bg:after {
    content: "";
    background: url(https://awayproducts.us/assets/images/video-section-image.webp) no-repeat;
    background-size: cover;
    background-position: left;
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -20%;
    z-index: -2;
    opacity: 75%;
    clip-path: polygon(75% 0%,100% 50%,75% 100%,0% 100%,0 50%,0% 0%);
}

.xn-info-bg:after {
    background: #00000024;
    backdrop-filter: blur(4px);
    /* opacity: 0; */
}

.feature-l {
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 5px 5px var(--primary-color);
    border-radius: 5px;
    overflow: hidden;
    width: 70%
}

.feature-r {
    display: block
}

.feature-r-st {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 2px;
    background: var(--primary-color);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
}

.feature-r-title {
    margin: 15px 0;
    font-size: 2em;
    font-weight: 700;
    color: var(--text-a);
}

.feature-r-desc {
    font-weight: 500;
    font-size: 16px;
    line-height: 30px;
    color: var(--text-b);
    letter-spacing: 0.5px;
}

.product-info:before {
    content: "";
    background: var(--primary-color);
    border-radius: 5px;
    transform: translate(5px,5px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
}

.steps-card {
    display: flex;
    flex-direction: column
}

.steps-title {
    display: flex;
    align-items: center
}

.steps-title span {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 100px;
    border: 2px dashed var(--primary-color);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.steps-title h1 {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
}

.steps-desc {
    font-size: 16px;
    line-height: 26px;
    color: var(--text-b);
    font-weight: 400;
    margin-top: 10px;
}

.faq-cate:before {
    content: "";
    height: 0px;
    width: 80%;
    background: var(--primary-color);
    position: absolute;
    border-radius: 5px 5px 0 0;
    z-index: -1;
    top: 0;
    transition: 150ms ease 0s;
}

.faq-cate.active {
    transform: translateY(-5px);
}

.faq-cate.active:before {
    height: 5px;
    top: -6px;
}

.faq-container {
    display: none;
    flex-direction: column;
    grid-gap: 10px;
}

.faq-container.active {
    display: flex;
}

.faq-categories {
    display: flex;
    grid-gap: 15px;
}

.faq-cate {
    padding: 20px 25px;
    font-size: 16px;
    background: #2b2b2b;
    border: 1px solid #343434;
    border-radius: 5px;
    color: var(--text-a);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    grid-gap: 20px;
    width: 100%;
    position: relative;
    transition: 150ms ease 0s;
}

.faq-cate:hover {
    background: #2e2e2e;
}

.faq-cate i {
    color: var(--primary-color);
    font-size: 30px;
}

.faq-cate span {
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.faq-holder {
    display: flex;
    flex-direction: column;
    grid-gap: 30px;
    padding: 100px 0;
    position: relative;
}

.faq-box {
    transition: height 250ms ease 0ms;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #343434;
}

.faq-top {
    user-select: none;
    display: flex;
    flex-direction: row;
    color: var(--text-a);
    font-weight: 600;
    font-size: 20px;
    width: 100%;
    transition: 150ms ease 0s;
    background: #141414;
    position: relative;
    cursor: pointer;
}

.faq-top i {
    margin-left: auto;
    padding: 0 30px;
    font-size: 22px;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
}

.faq-box.fopen {
    height: auto;
    border-color: #4c4c4c;
}

.faq-bt-l {
    padding: 25px;
    width: 100%;
    transition: padding .2s ease-in-out;
}

.faq-box.fopen .faq-top {
    color: var(--primary-color)
}

.faq-box.fopen .faq-bottom {
    max-height: 800px
}

.faq-box:hover>.faq-top .faq-bt-l {
    padding-left: 30px
}

.faq-box:last-child {
    margin-bottom: 0
}

.faq-top i:before {
    transition: 250ms ease 0ms;
}

.faq-box.fopen i:before {
    transform: rotate(45deg);
}

.faq-bottom {
    height: auto;
    max-height: 0;
    /* transition: max-height 0.35s; */
    width: 100%;
    font-size: 16px;
    font-weight: 400;
    background: #2b2b2b;
    color: var(--text-b);
    line-height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-bottom span {
    padding: 25px;
    width: 100%;
}

.faq-bottom span p:last-child {
    margin: 0
}

.faq-bottom span p a, .feature-r-desc a {
    color: var(--primary-color)
}

.modal, .contact-modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    top: 0;
    left: 0;
    background: rgb(0 0 0/40%);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden
}

.modal.active, .contact-modal.active {
    visibility: visible
}

.modal.active .modal-in, .contact-modal.active .contact-modal-in {
    transform: translateY(0px);
    opacity: 1
}

.modal-in, .contact-modal-in {
    background: #fff;
    border: 1px solid #efeaff;
    width: 100%;
    max-width: 500px;
    position: relative;
    transform: translateY(-20px);
    opacity: 0;
    transition: 150ms ease 0s;
    box-shadow: 5px 5px var(--primary-color);
    border-radius: 5px;
    display: block;
    padding: 50px;
}

.payment-popup, .product-popup {
    display: none;
    position: relative;
}

.product-popup.active, .payment-popup.active {
    display: block;
}

.modal-close, .contact-modal-close {
    position: absolute;
    top: 30px;
    right: 50px;
    width: 60px;
    height: 60px;
    border: 3px solid #f9f9f9;
    border-radius: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: transform 130ms ease 0ms;
    font-size: 29px;
    cursor: pointer
}

.modal-close:hover, .contact-modal-close:hover {
    transform: scale(1.1)
}

.product-pop-t {
    font-size: 28px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
}

.product-pop-features {
    margin: 30px 0;
    grid-gap: 15px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.product-pop-features p {
    font-size: 17px;
    font-weight: 400;
    display: flex;
    align-items: center;
    color: var(--text-a);
    padding: 5px 10px;
    border-radius: 3px;
    background: #202020;
}

.modal .product-pop-features p:nth-child(odd) {
    background: #f0f3ff;
}

.modal .product-pop-features p {
    color: #000;
    background: #f5f5f5;
}

.modal .product-pop-features p span {
    color: #000;
}

.product-pop-features p i {
    color: var(--primary-color);
    font-size: 16px;
    margin-right: 10px;
}

.product-pop-features p span {
    color: var(--text-a);
    padding-left: 10px;
    font-weight: 500;
    margin-left: auto;
}

.product-pop-quantity {
    display: flex;
    align-items: center;
    width: 100%;
}

.product-pop-quantity h2 {
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 800;
    margin-right: auto;
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
    padding-right: 15px;
}

.product-pop-q-b {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-left: 15px;
    grid-gap: 15px;
}

.product-pop-q-b input[type=radio] {
    display: none;
}

.product-pop-quantity h2:before {
    position: absolute;
    right: -60px;
    height: 4px;
    width: 50px;
    background: var(--gray);
    content: "";
    border-radius: 10px;
}

.product-pop-q-in label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    border-radius: 100px;
    font-weight: 500;
    background: var(--gray);
    border: 2px solid #b7b7b7;
    color: #efff;
    cursor: pointer;
    transition: 150ms ease 0s;
}

.product-pop-features p:nth-child(odd) {
    background: #343434;
}

.product-pop-coupon {
    display: flex;
    align-items: center;
    grid-gap: 15px;
    width: 100%;
    margin-top: 15px;
}

.flp-input {
    background: #efefeefe;
    border: transparent 1px solid;
    padding: 20px 25px;
    font-size: 17px;
    font-family: montserrat, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    color: #000;
    transition: 200ms ease 0ms;
    border-radius: 4px;
    width: 100%;
}

.product-pop-coupon input {
    width: calc(80% - 15px);
    padding: 10px 20px;
}

.flp-input::placeholder {
    color: #454545;
    transition: 200ms ease 0s;
    transform-origin: 0% 50%;
}

.flp-input:focus::placeholder {
    color: #fff;
    transform: scale(0)
}

.flp-input:focus {
    background: #f7f7f7fe;
    border: #c6c6c6fe 1px solid;
}

.product-pop-coupon-btn {
    width: 30%;
    height: fit-content;
    background: var(--secondary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 12px;
    color: #fff;
    border: none;
    font-family: montserrat,sans-serif;
    transition: 150ms ease 0s;
    cursor: pointer;
    user-select: none;
}

.product-pop-btn {
    width: 100%;
    height: fit-content;
    background: var(--secondary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 20px;
    color: #fff;
    border: none;
    font-family: montserrat,sans-serif;
    transition: 150ms ease 0s;
    cursor: pointer;
    user-select: none;
}

.product-pop-btn span {
    margin-left: 10px;
}

.product-pop-q-b input[type=radio]:checked+label {
    border: 2px solid #bda7ff;
    background: var(--primary-color);
}

.product-pop-btn:hover {
    transform: translateY(5px);
}

.product-pop-coupon-btn:hover {
    transform: translateX(5px);
}

.product-pop-q-in label:hover {
    transform: scale(1.1);
}

.payment-popup-modes {
    display: flex;
    flex-direction: column;
    grid-gap: 10px;
}

.payment-mode-card {
    display: block;
    position: relative;
    border-radius: 4px;
    border: 2px solid var(--secondary-color);
    background: #eeee;
    transition: 150ms ease 0s;
}

.payment-mode-in {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
    cursor: pointer;
}

.payment-mode-in img {
    width: 100%;
}

.payment-mode-card.swish img {
    width: 180px;
}

.payment-mode-card input {
    display: none;
}

.delivery-email {
    margin-top: 30px;
}

.payment-popup-footer {
    display: flex;
    grid-gap: 15px;
}

.product-pop-btn.back {
    width: fit-content;
    white-space: nowrap;
}

.product-pop-btn.go {
    background: var(--primary-color);
}

.product-pop-btn.back:hover {
    transform: translateX(-5px);
}

.product-pop-btn.go:hover {
    transform: translateX(5px);
}

.payment-mode-card.swish.disabled:before {
    content: "Coming Soon";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0006;
    color: #fff;
    border-radius: 2px;
    font-size: 29px;
    font-weight: 800;
    letter-spacing: 2px;
    backdrop-filter: blur(1px);
    text-transform: uppercase;
}

.payment-mode-card:hover, .payment-mode-card.active {
    background: var(--third-color);
    border-color: var(--primary-color);
}

.payment-mode-card.disabled:before, .payment-mode-card.disabled .payment-mode-in {
    cursor: not-allowed;
}

.payment-mode-card.disabled {
    border-color: var(--secondary-color);
}

.payment-mode-card :checked+label:after {
    content: "Selected";
    background: var(--primary-color);
    color: #fff;
    position: absolute;
    top: 0;
    right: -1px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 2px 0 5px;
    padding: 3px 20px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}

.error-body {
    padding: 105px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.error-in {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.error-body:before {
    content: "";
    background: #2e323c0a url(../image/bg-dots-particles.png) no-repeat;
    background-repeat-x: repeat;
    width: 200%;
    height: calc(100% + 150px);
    position: absolute;
    top: -150px;
    left: -50%;
}

.error-in h1 {
    font-size: 200px;
    color: var(--primary-color);
    font-weight: 600;
    line-height: 180px;
    position: relative;
    transition: 500ms ease 0s;
}

.error-in h1 span {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(8px, 8px);
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--primary-color);
    color: transparent;
    z-index: -1;
    opacity: 0.2;
}

.error-header {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 50px;
}

.error-header img {
    border-radius: 10px;
    box-shadow: 6px 6px #0271da;
}

.error-in p {
    margin: 50px 0;
    text-align: center;
    font-weight: 500;
    line-height: 30px;
    font-size: 18px;
    color: #fff;
}

.error-in a {
    display: block;
    color: #fff;
    background: var(--primary-color);
    padding: 15px 30px;
    text-align: center;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    transition: 150ms ease 0s;
}

.order-status {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 40px;
    padding: 80px 0;
}

.order-status.complete {
    grid-template-columns: 2fr 1fr;
}

.order-status-l {
    display: flex;
    flex-direction: column;
    position: relative;
    grid-gap: 40px;
}

.order-status-t {
    display: flex;
    align-items: center;
    grid-gap: 40px;
}

.order-status-b, .order-status-m-in, .order-account-listing {
    border-radius: 4px;
    padding: 30px;
    color: var(--text-a);
    background: #141414;
    border: 1px solid #343434;
    transition: 150ms ease 0s;
    position: relative;
}

.order-status-b .product-pop-features {
    margin: 0;
}

.order-staus-m {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
}

.order-status-m-in h1 {
    margin-bottom: 10px;
    font-size: 18px;
}

.order-status-m-in .order-status-button {
    padding: 16px 10px;
}

.order-status-r {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    grid-gap: 20px;
}

.order-status-r > h1 {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--text-a);
    text-align: center;
}

.order-idiot-proof-guard.order-account-list-in {
    padding: 0 20px;
    background: transparent;
    margin-bottom: 10px;
    color: var(--text-b);
    text-transform: uppercase;
}

.order-idiot-proof-guard.order-account-list-in code {
    user-select: none;
    cursor: auto;
    letter-spacing: 1px;
}

.order-account-listing {
    height: 100%;
    max-height: 420px;
    grid-gap: 6px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.order-account-list-in {
    background: #343434;
    border-radius: 5px;
    padding: 10px 20px;
    color: #fff;
    display: flex;
    align-items: center;
}

.order-account-list-in code:nth-child(2) {
    margin-left: auto;
}

.order-account-list-in code {
    cursor: pointer;
    user-select: all;
}

.contact-popup {
    display: block;
    position: relative;
}

.contact-holder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 30px;
}

.contact-modal-in {
    max-width: 1250px;
}

.contact-modal-in {
    max-height: 80%;
    overflow-y: auto;
    width: 90%;
}

.contact-card {
    padding: 40px 40px;
    background: #f7f7f7;
    box-shadow: inset 0px 0px 0px 1px #c9e5ff, 6px 6px 20px #ededed;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition: 150ms ease 0s;
}

.contact-card i {
    color: var(--primary-color);
    font-size: 60px;
}

.contact-card h1 {
    font-size: 21px;
    font-weight: 500;
    color: #000;
    margin: 10px 0;
}

.contact-card p {
    font-size: 13px;
    line-height: 20px;
    color: #919191;
}

.contact-body {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 40px;
    text-align: center;
}

.contact-body h1 {
    font-weight: 600;
    color: var(--secondary-color);
    font-size: 30px;
    margin-bottom: 10px;
}

.contact-body p {
    max-width: 800px;
    font-size: 16px;
    font-weight: 400;
    color: #959595;
    line-height: 28px;
}

.contact-card:hover {
    background: #edf6ff;
    transform: translateY(-10px);
}

.document-box {
    background: #141414;
    padding: 30px 40px;
    border-radius: 5px;
    box-shadow: 6px 8px #323232;
    margin-top: 20px;
    margin-bottom: 60px;
}

.document-title {
    display: block;
}

.document-title h1 {
    font-size: 34px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 1px;
}

.document-title p {
    color: #efefef;
    font-size: 15px;
    font-weight: 300;
}

.document-in {
    display: flex;
    flex-direction: column;
}

.document-in h1 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 26px;
    position: relative;
    margin-bottom: 10px;
    margin-top: 20px;
    margin-left: 20px;
}

.document-in p {
    color: #c9c9c9;
    font-size: 15px;
    line-height: 28px;
    margin-left: 40px;
    margin-bottom: 20px;
}

.document-in h1:before {
    height: 5px;
    width: 18px;
    content: "";
    position: absolute;
    background: var(--primary-color);
    left: -35px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border-radius: 10px;
}

.document-in a {
    color: #4e8143;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.document-branding {
    background: #202121;
    display: flex;
    width: fit-content;
    padding: 10px 20px;
    font-weight: 400;
    border-radius: 3px;
}

footer {
    background: #141414
}

.footer-t {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr auto
}

.footer-logo {
    width: 60px;
    background: #ffffff14;
    padding: 5px;
    border-radius: 5px
}

.footer-r-in {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    transition: 150ms ease 0ms;
    padding: 40px 30px;
    position: relative;
    width: fit-content;
    width: 100%
}

.footer-r-in:first-child {
    padding-left: 0;
    padding-right: 20px
}

.footer-lt {
    display: flex;
    align-items: center;
    grid-gap: 20px
}

.footer-lt h1 {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff
}

.footer-description {
    font-weight: 400;
    color: #e0e0e0;
    line-height: 26px;
    font-size: 15px;
    margin-top: 15px
}

.footer-in.bottom {
    padding: 20px 40px;
    position: relative;
}

.footer-in.bottom:before {
    content: "";
    position: absolute;
    top: 0;
    left: -50%;
    background: #0a0a0a;
    width: 200%;
    height: 100%;
    z-index: -1;
}

.footer-p {
    font-size: 15px;
    font-weight: 500;
    color: #8e8e8e;
    letter-spacing: .6px;
    text-transform: uppercase
}

.footer-p:last-child {
    margin-left: auto
}

.footer-p a {
    color: #fff
}

.footer-r-in:last-child {
    padding-right: 0
}

.footer-social {
    display: flex;
    justify-content: center;
    flex-direction: column;
    grid-gap: 20px;
    padding-top: 30px;
}

.footer-social a {
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 29px;
    transition: .2s ease-in-out;
}

.footer-social a:hover {
    transform: scale(1.1);
}

.footer-r-title {
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700;
    font-size: 25px;
    line-height: 30px;
    margin-bottom: 15px;
    position: relative
}

.footer-link {
    font-size: 17px;
    line-height: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #e0e0e0;
    transition: 150ms ease 0ms;
    margin-bottom: 10px;
    position: relative;
    margin-left: 30px;
}

.footer-link:hover {
    transform: translateX(5px)
}

.footer-r-in:last-child:before {
    width: calc(100% + 30px);
    left: 0
}

.footer-link:before {
    height: 3px;
    width: 15px;
    content: "";
    position: absolute;
    background: var(--primary-color);
    left: -25px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    border-radius: 10px;
}

.footer-btt {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.footer-bbt {
    text-align: left;
}

.footer-bbt .footer-p {
    font-weight: 300;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
}

.privacy-dots {
    color: #c9c9c9;
    font-size: 15px;
    line-height: 28px;
    margin-left: 30px;
    margin-bottom: 20px;
}

.coupon-success-msg {
    background: #f7ffed;
    border: #8bc34a 1px solid;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 36px;
    margin-top: 15px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}

.payment-popup-checkbox {
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    grid-gap: 5px;
}

.payment-popup-checkbox-c {
    display: flex;
    align-items: center;
    grid-gap: 7px;
}

.payment-popup-checkbox-c label {
    font-size: 14px;
    font-weight: 500;
}

.payment-popup-checkbox-c label a {
    color: var(--primary-color);
}

[page="blog"] .header {
    height: 70vh;
}

[page="blog"] .document-box {
    margin-top: -112px;
}

.blogs-holder {
    padding: 80px 0;
    display: flex;
    align-items: center;
    grid-gap: 40px;
    position: relative;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: #141414;
    border: 1px solid #343434;
    border-radius: 6px;
    transition: 150ms ease 0s;
    width: 100%;
    min-width: 226px;
    max-width: 450px;
}

.blog-header {
    width: 100%;
    height: 215px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px 6px 0 0;
    border-bottom: 5px solid var(--primary-color);
}

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

.blog-body {
    padding: 25px;
}

.blog-tags {
    display: flex;
    align-items: center;
    grid-gap: 10px;
}

.blog-tags span {
    background: #202121;
    padding: 2px 20px;
    border-radius: 15px;
    color: var(--text-a);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.blog-body h1 {
    margin: 15px 0 10px 0;
    color: var(--text-a);
    font-weight: 500;
    letter-spacing: 0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 320px;
    width: 100%;
}

.blog-body p {
    color: var(--text-b);
    font-size: 15px;
    font-weight: 300;
    line-height: 26px;
}

.body-link {
    margin-top: 15px;
    width: 100%;
    height: fit-content;
    background: var(--primary-color);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 11px;
    color: #fff;
    border: none;
    transition: 150ms ease 0s;
    cursor: pointer;
    user-select: none;
}

[page="blog"] .blogs-holder:before {
    background: transparent;
}

[page="blog"] .blogs-holder {
    padding-top: 0;
}

.xn-about-t-img {
    position: absolute;
    width: 54%;
    bottom: 0;
    right: -5%;
}

.xn-about-t-l-desc:last-child {
    width: 88%;
    margin-top: 20px;
}

.blog-card:hover {
    transform: scale(1.05) translateY(-10px);
}

.body-link:hover {
    background: #0053a1;
}

[count="2"].blogs-holder {
    margin: 0 auto;
    width: fit-content;
}

.blog-step {
    width: 100%;
    max-width: 1000px;
}

.review {
    padding: 100px 0;
}

.reviews-card {
    background: #141414;
    border: 1px solid #343434;
    padding: 30px 30px 40px 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    transition: 150ms ease 0s;
    height: 240px;
}

.reviews-card:hover {
    background: #1c1c1c;
}

.reviews-card i.fa-quote-right {
    color: #343434;
    margin-left: auto;
    font-size: 50px;
    margin-top: -45px;
}

.review-body {
    margin: 10px 0;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-b);
    font-size: 16px;
}

.review-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.review-author {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
}

.review-stars {
    color: var(--primary-color);
    display: flex;
    align-items: center;
    grid-gap: 6px;
}

.title-set {
    text-align: center;
    margin-bottom: 30px;
}

.title-set h1 {
    font-size: 40px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffff;
    letter-spacing: 5px;
}

.title-set p {
    font-size: 15px;
    font-weight: 400;
    line-height: 32px;
    color: var(--text-b);
    letter-spacing: 0.5px;
}

.review-stars[data="4"] i:nth-child(n+5) {
    color: #323232;
}

.review-stars[data="3"] i:nth-child(n+4) {
    color: #323232;
}

.review-stars[data="2"] i:nth-child(n+3) {
    color: #323232;
}

.review-stars[data="1"] i:nth-child(n+2) {
    color: #323232;
}

/* OWL */
.owl-carousel {
    display: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
    /* position relative and z-index fix webkit rendering fonts issue */
    position: relative;
    z-index: 1;
}

.owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    touch-action: manipulation;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */
}

.owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.owl-carousel .owl-wrapper, .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
}

.owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    margin-top: 20px;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
}

.owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled {
    display: none;
}

.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot {
    background: none;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
}

.owl-carousel.owl-loaded {
    display: block;
}

.owl-carousel.owl-loading {
    opacity: 0;
    display: block;
}

.owl-carousel.owl-hidden {
    opacity: 0;
}

.owl-carousel.owl-refresh .owl-item {
    visibility: hidden;
}

.owl-carousel.owl-drag .owl-item {
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.owl-carousel.owl-grab {
    cursor: move;
    cursor: grab;
}

.owl-carousel.owl-rtl {
    direction: rtl;
}

.owl-carousel.owl-rtl .owl-item {
    float: right;
}

/* OWL */
.owl-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-gap: 20px;
    margin-top: 30px;
}

.owl-nav button {
    border-radius: 5px;
    width: 60px;
    height: 30px;
    background: var(--primary-color)!important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none!important;
    color: #fff!important;
    font-size: 30px!important;
    font-weight: 800!important;
}

.owl-dots {
    display: none;
}

@media screen and (max-width: 1000px) {
    [page="blog"] .header {
        height: 80vh;
    }

    [page="blog"] .header-title {
        font-size: 28px;
    }

    .top-bar, .navbar-link, .product-info {
        display: none;
    }

    .header-cont {
        width: 100%;
    }

    .header-title {
        font-size: 30px;
    }

    .header-desc {
        font-size: 15px;
    }

    .header-btns, .xn-info {
        flex-direction: column;
    }

    .header-btp {
        width: 100%;
        font-size: 13px;
    }

    .xnh-feature:before, .xnh-feature:after {
        display: none;
    }

    .xnh-fin {
        border-radius: 10px!important;
        border: 2px solid!important;
    }

    .xnh-fin:nth-child(1) {
        border-left: 2px solid;
    }

    .package-holder, .product-holder, .region-holder, .contact-holder, .xnh-feature, .order-status, .order-staus-m {
        grid-template-columns: 1fr!important;
    }

    .xn-info-bg:before, .xn-info-bg:after {
        top: -100px;
        left: -40px;
        clip-path: polygon(0 0, 100% 0%, 100% 80%, 50% 100%, 0 80%);
        width: calc(100% + 80px);
        height: 30%;
    }

    .feature-l {
        width: 100%;
    }

    .feature-l iframe {
        height: 188px;
        z-index: 1;
    }

    .feature-r-title {
        font-size: 23px;
        font-weight: 600;
        line-height: 34px;
    }

    .xn-about-t-l {
        width: 100%;
    }

    .xn-about-t-img {
        display: none;
    }

    .faq-categories, .blogs-holder {
        flex-direction: column;
    }

    .blog-tags {
        flex-wrap: wrap;
    }

    .blog-tags span {
        text-align: center;
        flex-grow: 1;
    }

    .footer-t {
        grid-template-columns: 1fr;
        padding: 40px 0;
        grid-gap: 20px;
    }

    .footer-r-in {
        width: 100%;
        padding: 0!important;
    }

    .footer-social {
        flex-direction: row;
        margin: 0 auto;
        width: 100%;
    }

    .footer-lt h1 {
        font-size: 24px;
    }

    .footer-logo {
        width: 46px;
    }

    .footer-btt {
        flex-direction: column;
        text-align: center;
        grid-gap: 10px;
    }

    .footer-in.bottom:before {
        width: 100%;
        left: 0px;
    }

    .xn-about:before, .blogs-holder:before, .xn-info:before {
        left: -40px;
        width: calc(100% + 80px);
    }

    .navbar-link.c {
        display: block;
    }

    .reviews-card {
        height: auto;
    }

    .title-set h1 {
        font-size: 23px;
        letter-spacing: 2px;
        margin-bottom: 10px;
    }

    .xn-about-t-l-title {
        font-size: 1.7em;
        line-height: 40px;
    }

    .xn-about-b-card {
        flex-direction: column;
        grid-gap: 20px;
        align-items: flex-start;
    }

    .product-pop-features p {
        flex-wrap: wrap;
        grid-gap: 6px;
        align-items: center;
    }

    .product-pop-features p span {
        flex-grow: 1;
        padding: 0;
    }

    .product-pop-features p span {
        word-break: break-all;
    }

    .product-pop-quantity h2:before {
        display: none;
    }

    .modal-close, .contact-modal-close {
        top: 20px;
        right: 20px;
        width: 50px;
        height: 50px;
    }

    .modal .product-pop-features p span {
        margin-left: auto;
        text-align: right;
    }

    .product-pop-btn {
        display: block;
        text-align: center;
        font-size: 13px;
    }

    .payment-popup-footer {
        flex-direction: column;
    }

    .product-pop-btn.back {
        width: 100%;
    }

    .payment-popup-checkbox-c {
        display: block;
    }

    .modal-in, .contact-modal-in {
        padding: 25px;
    }

    .products-title {
        font-size: 22px;
        text-align: center;
        display: block!important;
    }

    .faq-cate.active {
        transform: none;
    }

    .document-in p {
        margin-left: 0px;
    }

    .document-in h1 {
        font-size: 19px;
    }

    .document-in h1:before {
        margin-top: 10px;
    }

    .blog-card {
        min-width: 100%;
        max-width: 100%;
        width: 100%;
    }

    .blog-body h1 {
        max-width: 240px;
    }

    .document-title h1 {
        font-size: 22px;
    }

    .error-header {
        flex-direction: column;
        grid-gap: 9px;
    }

    .error-in h1 {
        font-size: 100px;
        line-height: 150px;
    }

    .error-in {
        width: 100%;
    }

    .error-body:before {
        left: -40px;
        width: calc(100% + 40px);
    }

    .error-header img {
        width: 100%;
    }

    .error-in p {
        margin: 10px 0;
    }

    .order-account-listing {
        padding: 20px;
    }
}

@media screen and (max-width: 400px) {
    .footer-logo {
        display: none;
    }

    .order-status-r > h1 {
        font-size: 18px;
    }

    .order-account-list-in {
        grid-gap: 9px;
        justify-content: space-around;
    }

    .order-account-list-in code:nth-child(2) {
        margin-left: 0;
    }

    .order-idiot-proof-guard.order-account-list-in {
        flex-direction: row;
        justify-content: space-between;
    }

    .product-info.xn-mobile-version {
        display: grid;
        margin-top: 60px;
    }

    .region-holder {
        margin-top: 60px;
    }

    .steps-title h1 {
        font-size: 19px;
    }
}