@font-face {
    font-family: 'Regular';
    src: url('../fonts/Ubuntu-Regular.ttf');
}

@font-face {
    font-family: 'Bold';
    src: url('../fonts/Ubuntu-Bold.ttf');
}

@font-face {
    font-family: 'LightNum';
    src: url('../fonts/beIN-Light.ttf');
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    outline: none;
    font-family: 'Regular';
}

:root {
    font-size: 16px;
    --borderGray: #cecece;
    --border-color: #cecece;
    --main: #069244;
    --dark: #333;
    --black: #161616;
    --white: #fff;
    --hot: #ff9d66;
    --text-light: #60718B;
    --bg-light-gray: #f3f3f3;
}

@media (min-width: 1px) and (max-width: 575.9px) {
    :root {
        font-size: 13px;
    }
}

@media (min-width: 576px) and (max-width: 991.9px) {
    :root {
        font-size: 14px;
    }
}

@media (min-width: 992px) and (max-width: 1199.9px) {
    :root {
        font-size: 15px;
    }
}

a {
    display: inline-flex;
    text-decoration: none;
}

/* === Animation === */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === General === */

.btn {
    background-color: var(--main);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    border: 1px solid var(--main);
    padding: 0.5rem 0.75rem;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 1rem;
    transition: 0.3s;
}

.btn-outline,
.btn:hover {
    background-color: var(--white);
    color: var(--main);
}

.btn-outline:hover {
    color: var(--white);
    background-color: var(--main);
}

/* === Header === */

header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    background-color: rgba(235, 235, 235, 1);
}

header .logo {
    width: auto;
    height: 3.5rem;
    max-width: 10rem;
    object-fit: contain;
}

header .mainLinks {
    padding: 0;
    list-style: none;
}

header .mainLinks>li {
    margin-inline-end: 1.25rem;
    position: relative;
}

header .mainLinks>li:last-child {
    margin-inline-end: 0;
}

header .mainLinks>li>a {
    font-size: 1.05rem;
    color: var(--dark);
    font-weight: 600;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
}

header .mainLinks>li>a svg {
    width: 1.5rem;
    height: 1.5rem;
}

header .mainLinks>li>a svg [stroke] {
    stroke: var(--dark);
    transition: 0.3s;
}

header .mainLinks>li>a.active {
    color: var(--main);
}

header .mainLinks>li>a.active svg [stroke] {
    stroke: var(--main);
}

header .mainLinks>li>ul {
    position: absolute;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    margin-top: 0.75rem;
    right: 50%;
    transform: translateX(50%);
    z-index: 2;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.16);
    border-radius: 6px;
    overflow: hidden;
    display: none;
    max-height: 80vh;
    overflow: auto;
}

header .mainLinks .ul-devices {
    position: fixed;
    top: 91px;
    border-radius: 0;
    background: #fff;
    margin: 0;
    width: 100%;
    padding: 1.75rem 0;
    z-index: 9;
}

header .mainLinks .ul-devices+span {
    content: "";
    position: fixed;
    top: 91px;
    right: 0;
    width: 100%;
    height: calc(100vh - 91px);
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.35);
    display: none;
}

header .mainLinks .ul-devices.show+span {
    display: block;
    animation: fadeIn 0.3s linear;
}

@media (max-width: 1199.9px) {
    header .mainLinks .ul-devices {
        top: 79.5px;
    }
}

@media (max-width: 991.9px) {
    header .mainLinks .ul-devices {
        display: none !important;
    }
}

header .mainLinks .ul-devices .box-product-header {
    text-align: center;
}

header .mainLinks .ul-devices .box-product-header h3 {
    color: var(--main);
    font-size: 1rem;
}

header .mainLinks .ul-devices .box-product-header .img {
    position: relative;
    height: 175px;
    margin: 1rem 0;
    transition: 0.3s;
    width: 100%;
}

header .mainLinks .ul-devices .box-product-header .img:hover {
    transform: scale(1.025);
}

header .mainLinks .ul-devices .box-product-header .img img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: auto;
    max-width: 100%;
    transition: 0.3s;
    object-fit: contain;
}

header .mainLinks .ul-devices .box-product-header .img img.back,
header .mainLinks .ul-devices .box-product-header .img img.front:hover {
    opacity: 0;
}

header .mainLinks .ul-devices .box-product-header .img img.back:hover {
    opacity: 1;
}

header .mainLinks .ul-devices .box-product-header h4 {
    font-size: 0.9rem;
    font-weight: 100;
    color: var(--dark);
    margin-bottom: 0.35rem;
}

header .mainLinks .ul-devices .box-product-header h5 {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 100;
}

header .link-all-products {
    margin-top: 1rem;
    color: var(--dark);
    font-size: 1rem;
    font-weight: 700;
}

header .mainLinks>li>ul.show {
    display: block;
    animation: fadeIn 0.3s linear;
}

header .mainLinks>li>ul>li {
    transition: 0.3s;
}

header .mainLinks>li>ul>li>a {
    font-size: 0.925rem;
    color: #444;
    padding: 0.4rem 0.8rem;
    background-color: #fff;
    transition: 0.3s;
    width: 100%;
}

header .mainLinks>li>ul>li>a svg {
    width: 0.6rem;
    height: auto;
    fill: var(--dark);
    stroke: var(--dark);
}

header .mainLinks>li>ul>li>a+ul {
    padding: 0.5rem;
    padding-inline-start: 1.5rem;
    background-color: var(--bg-light-gray);
    list-style: none;
    display: none;
}

header .mainLinks>li>ul>li>a+ul li {
    margin-bottom: 0.5rem;
}

header .mainLinks>li>ul>li>a+ul li:last-child {
    margin-bottom: 0;
}

header .mainLinks>li>ul>li>a+ul li a {
    font-size: 0.85rem;
    color: var(--dark);
    transition: 0.3s;
}

header .mainLinks>li>ul>li>a+ul li a:hover {
    transform: translateX(4px);
}

header .mainLinks>li>ul>li>a:hover {
    background-color: var(--main);
    color: var(--white);
}

header .mainLinks>li>ul>li:first-of-type {
    border-radius: 6px 6px 0 0;
}

header .mainLinks>li>ul>li:last-of-type {
    border-radius: 0 0 6px 6px;
}

header .flag {
    position: relative;
}

header .flag>span {
    border: 1px solid #f5f2f2;
    background-color: #f5f2f2;
    padding: 0.25rem;
    border-radius: 5px;
    cursor: pointer;
}

header .flag img {
    object-fit: cover;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
}

header .flag svg {
    width: 1rem;
    height: auto;
    margin-inline-start: 0.25rem;
}

header .flag svg [fill] {
    fill: var(--dark);
}

header .flag ul {
    position: absolute;
    right: 0;
    white-space: nowrap;
    padding: 0;
    list-style: none;
    top: 2.5rem;
    display: none;
}

header .flag ul.show {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

header .flag ul li {
    background-color: #f5f2f2;
    transition: 0.3s;
}

header .flag ul li:hover {
    background-color: #ebe7e7;
}

header .flag ul li:first-child {
    border-radius: 5px 5px 0 0;
}

header .flag ul li:last-child {
    border-radius: 0 0 5px 5px;
}

header .flag ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.925rem;
    color: var(--dark);
    padding: 0.3rem 0.6rem;
}

header .flag ul li img {
    margin-inline-end: 0.4rem;
    width: 1.4rem;
    height: 1.4rem;
}

header .flag ul li a b {
    margin-inline-start: 0.4rem;
    font-size: 0.85rem;
}

header .openMenu svg {
    width: 2.25rem;
    height: 2.25rem;
}

header .openMenu svg [fill] {
    fill: var(--main);
}

@media (min-width: 992px) and (max-width: 1199.9px) {
    header .logo {
        height: 3.1rem;
    }

    header .btn {
        font-size: 0.9rem;
    }

    header .mainLinks>li {
        margin-inline-end: 1rem;
    }
}

@media (min-width: 1200px) {
    header .mainLinks>li>a svg {
        display: none;
    }
}

@media (max-width: 1199.9px) {

    header .mainLinks,
    .col-links-doc {
        position: fixed;
        left: -50%;
        top: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start !important;
        background-color: #f5f2f2;
        width: 50%;
        padding: 1.5rem;
        z-index: 999;
        overflow: auto;
        transition: 0.3s;
    }

    .col-links-doc .links-docs {
        border-inline-end: none;
    }

    html[dir="rtl"] header .mainLinks,
    html[dir="rtl"] .col-links-doc {
        left: unset;
        right: -50%;
    }

    header .bgMobile,
    .col-links-doc+.bg {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.66);
        z-index: 9;
        display: none;
    }

    header .mainLinks.show,
    .col-links-doc.show {
        left: 0;
    }

    html[dir="rtl"] header .mainLinks.show,
    html[dir="rtl"] .col-links-doc.show {
        left: unset;
        right: 0;
    }

    header .mainLinks.show+.bgMobile,
    .col-links-doc.show+.bg {
        display: block;
        animation: fadeIn 0.3s linear;
    }

    header .mainLinks>li {
        margin: 0;
        margin-bottom: 1rem;
        width: 100%;
    }

    header .mainLinks>li:last-child {
        margin-bottom: 0;
    }

    header .mainLinks>li>a {
        font-size: 1.125rem;
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    header .mainLinks>li>ul {
        position: static;
        right: unset;
        transform: unset;
        box-shadow: none;
    }

    header .mainLinks>li>ul>li>a {
        background-color: transparent;
        font-size: 0.925rem;
    }
}

@media (max-width: 767.9px) {

    header .mainLinks,
    .col-links-doc {
        width: 75%;
        left: -75%;
    }

    html[dir="rtl"] header .mainLinks,
    html[dir="rtl"] .col-links-doc {
        left: unset;
        right: -75%;
    }

    header .logo {
        height: 3.2rem;
    }
}

@media (max-width: 575.9px) {

    header .mainLinks,
    .col-links-doc {
        width: 90%;
        left: -90%;
    }

    html[dir="rtl"] header .mainLinks,
    html[dir="rtl"] .col-links-doc {
        left: unset;
        right: -90%;
    }

    header .logo {
        height: 2.8rem;
    }
}

/* === Hero === */

.text-center {
    text-align: center;
}

.hero .text h1 {
    color: var(--dark);
    line-height: 1.5;
    font-size: 1.875rem;
}

.hero .text h1::first-line {
    font-size: 3rem;
}

.hero .btns a {
    font-size: 1.125rem;
    padding: 0.75rem 1.25rem;
}

.hero .btns a:hover {
    transform: scale(1.025);
}

.hero .play-video {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main);
    border-radius: 50%;
    transition: 0.3s;
    width: 3rem;
    flex: 0 0 3rem;
    height: 3rem;
}

.hero .play-video svg {
    width: 2rem;
    flex: 0 0 2rem;
    height: 2rem;
}

.hero .play-video svg [fill] {
    fill: var(--main);
    transition: 0.3s;
}

.hero .play-video:hover {
    background-color: var(--main);
    transform: scale(1.1) rotate(360deg);
}

.hero .play-video:hover svg [fill] {
    fill: var(--white);
}

@media (max-width: 444.9px) {
    .hero .btns {
        flex-wrap: wrap;
    }

    .hero .btns .btn:not(.btn-outline) {
        flex: 0 0 100%;
        margin-bottom: 1rem;
        margin-inline-end: 0 !important;
    }

    .hero .btns .btn-outline {
        flex-grow: 1;
    }
}

/* === Pop Up === */

.pop-up-video {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 99;
    display: none;
    align-items: center;
    justify-content: center;
}

.pop-up-video.show {
    display: flex;
    animation: fadeIn 0.3s linear;
}

.pop-up-video>div {
    margin-top: -1rem;
}

.pop-up-video .close {
    margin-bottom: 0.5rem;
    animation: fadeInBottom 0.6s 0.3s ease-in-out both;
    opacity: 0;
    cursor: pointer;
}

.pop-up-video .close svg {
    height: auto;
    width: 2rem;
}

.pop-up-video .close svg[fill] {
    fill: var(--white);
}

.pop-up-video .close svg[stroke] {
    stroke: var(--white);
}

.pop-up-video .body-pop-up {
    display: flex;
    background-color: var(--white);
    min-height: 25vh;
    height: auto;
    max-height: 85vh;
    border-radius: 0.75rem;
    overflow: auto;
    width: 100%;
}

.pop-up-video.show .body-pop-up {
    opacity: 0;
    animation: fadeInBottom 0.6s 0.2s ease-in-out both;
}

.pop-up-video .body-pop-up iframe {
    height: 65vh;
    width: 100%;
}

/* === Grid Images === */

.grid-images {
    display: grid;
    grid-template-rows: repeat(2, 200px);
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 1.5rem;
}

.grid-images>.img {
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.16);
}

.grid-images>.img a {
    width: 100%;
    height: 100%;
}

.grid-images>.img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.3s;
}

.grid-images>.img a:hover img {
    transform: scale(1.05);
}

.grid-images>.img:nth-child(1) {
    grid-area: 1 / 1 / 3 / 2;
}

.grid-images>.img:nth-child(2) {
    grid-area: 1 / 2 / 2 / 4;
}

.grid-images>.img:nth-child(3) {
    grid-area: 2 / 2 / 3 / 4;
}

.grid-images>.img:nth-child(4) {
    grid-area: 1 / 4 / 3 / 5;
}

.grid-images>.img:nth-child(5) {
    grid-area: 1 / 5 / 3 / 6;
}

@media (max-width: 991.9px) {
    .grid-images {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 170px);
    }

    .grid-images>.img:nth-child(1) {
        grid-area: 1 / 1 / 3 / 2;
    }

    .grid-images>.img:nth-child(2) {
        grid-area: 1 / 2 / 2 / 4;
    }

    .grid-images>.img:nth-child(3) {
        grid-area: 2 / 2 / 3 / 4;
    }

    .grid-images>.img:nth-child(4) {
        grid-area: 3 / 1 / 4 / 3;
    }

    .grid-images>.img:nth-child(5) {
        grid-area: 3 / 3 / 4 / 4;
    }
}

@media (max-width: 575.9px) {
    .grid-images {
        grid-template-rows: repeat(3, 140px);
    }
}

/* === Title Section === */

.title-section {
    text-align: center;
}

.title-section h2 {
    font-size: 2.25rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.title-section h2+p {
    font-size: 1.125rem;
    color: #afafaf;
}

/* === Features === */

.row-features a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.row-features img {
    margin-bottom: 0.75rem;
    width: 6rem;
    height: 6rem;
}

.row-features img+h3 {
    font-size: 1.05rem;
    color: #5e5d5d;
}

/* @media (max-width: 444.9px) {
    .row-features>* {
        flex: 0 0 100%;
        max-width: 100%;
    }
} */

/* === Box Device === */

.w-100 {
    width: 100%;
}

.row-box-device {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.16);
    border-radius: 0.5rem;
    padding: 1rem;
}

.row-box-device img {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
}

.box-device h4,
.box-bringo h4 {
    font-size: 1.6rem;
    color: var(--dark);
}

.box-device p,
.box-bringo p {
    font-size: 1.1rem;
    color: #6b6969;
    line-height: 1.5;
}

/* === Box Bringo === */

.row-box-bringo img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.16);
}

/* === Features === */

.single-feature {
    border-radius: 0.5rem;
    border: 1px solid var(--borderGray);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.features .img {
    width: 7rem;
    height: 7rem;
    background-color: var(--main);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.features .img img {
    width: 3.5rem;
    height: 3.5rem;
}

.single-feature h5 {
    margin: 1rem 0;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--main);
}

.single-feature p {
    font-size: 1rem;
    line-height: 1.5;
    color: #666;
}

/* === Video Youtube === */

.video-youtube iframe,
.img-full iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* === Statistics === */

.statistics .box {
    padding: 1rem;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
    border-radius: 1rem;
}

.statistics .box span {
    font-size: 0.85rem;
    color: #afafaf;
}

.statistics .box b {
    font-size: 2rem;
    color: var(--dark);
}

.statistics .box .icon {
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #D7EDD8;
    border-radius: 50%;
}

.statistics .box .icon img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
}

/* === Footer === */

footer {
    border-top: 1px solid #FAFAFA;
    background-color: #FAFAFA;
}

footer .first-row img {
    width: 10rem;
    height: auto;
}

footer .first-row h6 {
    font-size: 1.125rem;
    color: var(--main);
    margin-bottom: 0.75rem;
}

footer .first-row span {
    font-size: 0.925rem;
    color: #6b6969;
    margin-inline-end: 0.75rem;
}

.social {
    display: flex;
    flex-wrap: wrap;
}

.social a {
    margin-inline-end: 0.8rem;
    display: inline-flex;
}

.social a:last-child {
    margin-inline-end: 0;
}

.social a svg {
    height: 1.3rem;
    width: 1.3rem;
}

.social a svg [fill] {
    fill: #bebebe;
    transition: 0.3s;
}

.social a.tiktok:hover svg [fill] {
    fill: #000000;
}

.social a.rss:hover svg [fill] {
    fill: #F26522;
}

.social a.twitter:hover svg [fill] {
    fill: #1AA2F8;
}

.social a.facebook:hover svg [fill] {
    fill: #1092F4;
}

.social a.whats:hover svg [fill] {
    fill: #36E55A;
}

.social a.telegram:hover svg [fill] {
    fill: #34AAEA;
}

.social a.youtube:hover svg [fill] {
    fill: #FE0000;
}

.social a.instagram:hover svg [fill] {
    fill: #CF3FBA;
}

footer h5 {
    font-size: 1.125rem;
    color: var(--dark);
    font-weight: 700;
    margin-bottom: 1rem;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    margin-bottom: 0.75rem;
}

footer ul li:last-child {
    margin-bottom: 0;
}

footer ul li a {
    font-size: 1rem;
    color: #444444;
}

.box-contact,
.box-job {
    padding: 0.75rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.16);
    border-radius: 0.5rem;
}

.box-contact h6 {
    font-size: 1rem;
    color: #535252;
}

.box-contact a {
    margin-top: 0.75rem;
    color: var(--main);
    text-decoration: underline;
    font-size: 0.925rem;
    margin-inline-start: 0.5rem;
}

/* === Copy Right === */

.copyRight {
    background-color: #f3f3f3;
}

.copyRight p {
    font-size: 0.85rem;
    color: var(--dark);
    font-weight: 700;
}

.copyRight a {
    color: var(--main);
    margin-inline-start: 0.5rem;
}

@media (max-width: 575.9px) {
    .titleContact {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* === Swiper Hero === */

.swiperHero,
.swiperHero .swiper-hero .swiper-slide {
    height: 750px;
    position: relative;
}

@media (max-width: 991.9px) {

    .swiperHero,
    .swiperHero .swiper-hero .swiper-slide {
        min-height: 850px !important;
        height: auto !important;
    }

    .col-btn-video {
        height: 300px !important;
    }

    .col-btn-video img {
        max-height: 300px !important;
    }
}

.swiperHero .swiper-hero .swiper-slide>.bg-color {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    background-color: #7BADE2;
}

.swiperHero .swiper-hero .swiper-slide>.bg-color {
    transform: skewY(-3deg);
    top: -10%;
}

html[dir="rtl"] .swiperHero .swiper-hero .swiper-slide>.bg-color {
    transform: skewY(3deg);
}

.swiperHero .text {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: 5;
    transform: translateX(-50%);
}

.swiperHero .text .row {
    width: 100%;
    margin: auto;
}

.swiperHero .text h1 {
    color: var(--white);
    line-height: 1.5;
    font-size: 1.75rem;
    font-weight: 300;
}

.swiperHero .text h2 {
    color: #f5f5f5;
    line-height: 1.5;
    font-size: 3rem;
}

.swiperHero .text h3 {
    color: #f3f3f3;
    line-height: 1.5;
    font-size: 1rem;
    font-weight: 400;
}

.swiperHero .btns a {
    font-size: 1.125rem;
    padding: 0.75rem 1.25rem;
}

.swiperHero .btns a:hover {
    transform: scale(1.025);
}

/* === partners === */

.partners h3 {
    margin-bottom: 2rem;
    font-size: 2.75rem;
    color: var(--dark);
}

.pics .swiper-slide {
    width: auto !important;
}

.pics a {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-light-gray);
    border-radius: 0.4rem;
    padding: 0.75rem;
}

.pics a img {
    height: 5rem;
    width: auto;
    max-width: 5rem;
    object-fit: contain;
}

.col-btn-video {
    height: 750px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.col-btn-video img {
    width: 100%;
    height: auto;
    max-height: 750px;
    object-fit: contain;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.swiperHero .play-video {
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--main);
    border-radius: 50%;
    transition: 0.3s;
    position: relative;
    z-index: 9;
}

.swiperHero .play-video svg {
    width: 3rem;
    flex: 0 0 auto;
    height: auto;
}

.swiperHero .play-video svg [fill] {
    /* fill: var(--white); */
    transition: 0.3s;
}

.swiperHero .play-video {
    background-color: var(--main);
    transform: scale(1.1) rotate(360deg);
}

.swiperHero .play-video svg [fill] {
    fill: var(--white);
}

@media (max-width: 575.9px) {
    .swiperHero .text {
        text-align: center;
    }

    .swiperHero .text .btns {
        justify-content: center;
        flex-wrap: wrap;
    }

    .swiperHero .text .btns a {
        margin: 0.5rem 0 !important;
        flex-grow: 1;
        width: 100%;
    }
}

@media (min-width: 576px) {
    html[dir="rtl"] .swiperHero .col-sm {
        flex: 1 0 0% !important;
    }
}

/* === Hero Background === */

.hero-bg {
    position: relative;
}

.hero-bg .container {
    display: flex;
    align-items: flex-end;
    padding-top: 12rem;
    padding-bottom: 2rem;
}

.hero-bg::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to top, #2b2b2b, transparent);
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.hero-bg h1 {
    position: relative;
    z-index: 3;
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 1rem;
}

.hero-bg h1+p {
    position: relative;
    z-index: 3;
    font-size: 1.05rem;
    color: #f1f1f1;
    line-height: 1.5;
}

/* Style FAQ Page */

.slide-question {
    background-color: #F4F4F4;
    cursor: pointer;
}

.slide-question h3 {
    color: var(--main);
    font-weight: 100;
    font-size: 1rem;
}

.slide-question h3 svg {
    transition: 0.33s;
}

.slide-question h3.active svg {
    transform: rotate(180deg);
}

.slide-question p {
    border-top: 1px solid #DBDBDB;
    color: #222222;
    font-size: 0.9375rem;
    line-height: 1.7;
}

.box-text-terms {
    background-color: #F4F4F4;
}

.box-text-terms h3 {
    color: var(--main);
    font-size: 1.375rem;
}

.box-text-terms p {
    color: #626262;
    font-size: 0.875rem;
    line-height: 1.7;
}

@media (max-width: 767.9px) {
    .px-3-mobile {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* === Text Page === */

.textPage *:is(h1, h2, h3, h4, h5, h6) {
    color: var(--main);
    margin-bottom: 0.75rem;
    margin-top: 0.75rem;
}

.textPage p {
    font-size: 0.95rem;
    color: #222;
    line-height: 1.4;
}

/* === Pricing === */

.toggle span {
    font-size: 0.8rem;
    color: var(--dark);
}

.toggle .btn-as-toggle {
    width: 88px;
    height: 30px;
    background-color: var(--main);
    border-radius: 15px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.toggle .btn-as-toggle::before {
    content: "";
    position: absolute;
    right: 5px;
    top: 5px;
    height: 20px;
    width: 40px;
    background-color: var(--white);
    border-radius: 15px;
    transition: 0.3s;
}

html[dir="ltr"] .toggle .btn-as-toggle::before {
    right: 43px;
}

.toggle .btn-as-toggle.active::before {
    right: 43px;
}

html[dir="ltr"] .toggle .btn-as-toggle.active::before {
    right: 5px;
}

.table-packages .title-package b {
    font-size: 1.75rem;
    color: #fff;
}

.table-packages .title-package+p {
    margin-top: 0.75rem;
    font-size: 0.925rem;
    line-height: 1.5;
    color: #f0eded;
}

.table-packages.monthly .price .yearly,
.table-price.monthly .price .yearly {
    display: none;
}

.table-packages.yearly .price .monthly,
.table-price.yearly .price .monthly {
    display: none;
}

.table-packages .price {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.table-packages .price span {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    display: inline-flex;
}

.table-packages .price p {
    font-size: 0.8rem;
    color: #fff;
    line-height: 1.3;
}

.row-features-packages>div>.row {
    background-color: #F8F8F8;
    width: 100%;
    margin: auto;
    color: #808080;
    /* align-items: center; */
}

.row-features-packages>div>.row:nth-child(even) {
    background-color: var(--white);
}

.row-features-packages>div>.row span {
    font-size: 1rem;
    padding: 0.75rem 1rem;
    display: inline-flex;
}

.row-features-packages>div>.row>div:not(.feature) {
    text-align: center;
}

.row-features-packages>div>.row>div:not(.feature) span {
    font-size: 0.925rem;
    color: #222;
}

.row-features-packages span img {
    width: 1.75rem;
    height: 1.75rem;
}

.row-features-packages span img[alt="false"] {
    width: 2.25rem;
    height: 2.25rem;
}

.row-single-feature,
.row-title-package {
    width: 100%;
    margin: auto;
}

.row-title-package>*:nth-child(2) {
    background-color: #9DD100;
}

.row-title-package>*:nth-child(3) {
    background-color: #00A2D3;
}

.row-title-package>*:nth-child(4) {
    background-color: #007499;
}

.row-title-package>*:nth-child(5) {
    background-color: #D00000;
}

@media (max-width: 991.9px) {
    .row-features-packages {
        position: fixed;
        width: 75%;
        max-height: 85%;
        z-index: 999;
        overflow: auto;
        left: calc(12.5% - -.5 * var(--bs-gutter-x));
        top: 50%;
        display: none;
        transform: translateY(-50%);
    }

    .row-features-packages.show {
        display: flex;
        animation: fadeIn 0.3s 0.15s linear both;
    }

    .row-features-packages+.bg {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
        background-color: rgba(0, 0, 0, 0.66);
        display: none;
    }

    .row-features-packages.show+.bg {
        display: block;
        animation: fadeIn 0.3s linear both;
    }

    .row-features-packages>div>.row {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .row-features-packages>div>.row>* {
        flex: 1 0 0%;
        width: auto;
    }

    .row-features-packages>div>.row>*:not(.feature) {
        display: none;
    }

    .row-features-packages[num-feature="1"]>div>.row>*:nth-child(2) {
        display: block;
        text-align: center;
    }

    .row-features-packages[num-feature="2"]>div>.row>*:nth-child(3) {
        display: block;
        text-align: center;
    }

    .row-features-packages[num-feature="3"]>div>.row>*:nth-child(4) {
        display: block;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .row-features-packages .row-single-feature>*:nth-child(2) {
        background-color: rgba(157, 209, 0, 0.3);
    }

    .row-features-packages .row-single-feature>*:nth-child(3) {
        background-color: rgba(0, 162, 211, 0.3);
    }

    .row-features-packages .row-single-feature>*:nth-child(4) {
        background-color: rgba(0, 115, 153, 0.3);
    }

    .row-features-packages .row-single-feature>*:nth-child(5) {
        background-color: rgba(208, 0, 0, 0.3);
    }

    .row-single-feature>*,
    .row-title-package>* {
        flex: 0 0 18% !important;
        width: 18% !important;
    }
}

@media (max-width: 444px) {
    .row-features-packages {
        width: 85%;
        left: calc(7.5% - -.5 * var(--bs-gutter-x));
    }
}

.title-our-plans {
    height: 100%;
    text-align: end;
}

.title-our-plans h2 {
    font-size: 5rem;
    color: var(--dark);
}

/* === Academy === */

.hero-academy {
    position: relative;
    background-size: cover;
    clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.hero-academy::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
    z-index: 1;
}

.hero-academy .row-content {
    position: relative;
    z-index: 5;
    min-height: 400px;
    /* height: 50vh; */
    height: 500px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-academy .row-content h1 {
    font-size: 2.75rem;
    color: #fff;
}

.hero-academy .row-content p {
    font-size: 1.125rem;
    color: #f5f1f1;
    line-height: 1.5;
}

.hero-academy .row-content .btn {
    font-size: 1.125rem;
    padding: 0.65rem 1.3rem;
}

.row-header-section h2 {
    font-size: 1.75rem;
    color: var(--main);
    position: relative;
}

.box-course {
    width: 100%;
    height: 300px;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    position: relative;
}

.box-course::before,
.box-course .info {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

.box-course::before {
    content: "";
    background: linear-gradient(to top, var(--main) 10%, transparent, transparent);
}

.box-course>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-course .info {
    z-index: 6;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.box-course h3 {
    color: var(--white);
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.box-course .info>div {
    display: flex;
    flex-wrap: wrap;
}

.box-course .info>div span {
    font-size: 0.75rem;
    display: inline-flex;
    background-color: var(--white);
    color: #333;
    padding: 0.25rem 0.5rem;
    border-radius: 2rem;
    margin-inline-end: 0.25rem;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.box-course .info>div span:last-child {
    margin-inline-end: 0;
}

.box-course .info .line {
    height: 1px;
    width: 100%;
    background-color: var(--borderGray);
    margin: 0.5rem 0;
}

.box-course .info .btn {
    background-color: var(--white);
    color: var(--main);
}

.box-course .info .btn:hover {
    transform: scale(1.025);
}

.box-course .price {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 9;
    background-color: var(--main);
    padding: 0.25rem 0.5rem;
    font-style: normal;
    font-size: 0.85rem;
    color: var(--white);
    border-radius: 1rem;
}

html[dir="rtl"] .box-course .price {
    right: unset;
    left: 1rem;
}

.relative {
    position: relative;
}

.swiper-courses~.swiper-button-next::after,
.swiper-courses~.swiper-button-prev::after,
.swiper-testimonials~.swiper-button-next::after,
.swiper-testimonials~.swiper-button-prev::after,
.swiper-accounts~.swiper-button-next::after,
.swiper-accounts~.swiper-button-prev::after {
    content: unset;
}

.swiper-courses~.swiper-button-next,
.swiper-courses~.swiper-button-prev,
.swiper-testimonials~.swiper-button-next,
.swiper-testimonials~.swiper-button-prev,
.swiper-accounts~.swiper-button-next,
.swiper-accounts~.swiper-button-prev {
    background-color: var(--main);
    position: absolute;
    top: 50%;
    right: -1rem;
    z-index: 9;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.swiper-courses~.swiper-button-prev,
.swiper-testimonials~.swiper-button-prev,
.swiper-accounts~.swiper-button-prev {
    right: unset;
    left: -1rem;
}

.swiper-courses~.swiper-button-next svg,
.swiper-courses~.swiper-button-prev svg,
.swiper-testimonials~.swiper-button-next svg,
.swiper-testimonials~.swiper-button-prev svg,
.swiper-accounts~.swiper-button-next svg,
.swiper-accounts~.swiper-button-prev svg {
    width: 1.6rem;
    fill: var(--white);
    stroke: var(--white);
}

.bg-gray {
    background-color: #F3F3F3;
}

.box-testimonials {
    background-color: var(--white);
    padding: 3rem 1.5rem 1.5rem;
    text-align: center;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    position: relative;
}

.box-testimonials::before,
.box-testimonials::after {
    content: "";
    position: absolute;
    width: 0.45rem;
    height: 4rem;
    top: 4rem;
    right: 0;
    background-color: var(--main);
    border-radius: 0.5rem 0 0 0.5rem;
}

.box-testimonials::after {
    left: 0;
    right: unset;
    bottom: 4rem;
    top: unset;
    border-radius: 0 0.5rem 0.5rem 0;
}

html[dir="rtl"] .box-testimonials::before {
    top: unset;
    bottom: 4rem;
}

html[dir="rtl"] .box-testimonials::after {
    bottom: unset;
    top: 4rem;
}

.box-testimonials .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--main);
    border-radius: 6px 6px 2rem 6px;
    padding: 0.6rem 0.2rem;
}

html[dir="rtl"] .box-testimonials .icon {
    right: 0;
    left: unset;
    border-radius: 6px 6px 6px 2rem;
    padding-inline-start: 0.1rem;
    padding-inline-end: 0.3rem;
}

.box-testimonials .icon svg {
    width: 1rem;
    height: 1rem;
}

.box-testimonials .icon svg [fill] {
    fill: var(--white);
}

.box-testimonials p {
    line-height: 1.5;
    font-size: 0.9rem;
    color: var(--dark);
}

.box-testimonials .person {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.25rem;
}

.box-testimonials .person b {
    margin: 0.5rem 0;
    color: var(--main);
    font-size: 1rem;
}

.box-testimonials .person span {
    font-size: 0.8rem;
    color: #7a7a7a;
}

.box-testimonials .person img {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--main);
}

.box-subscribe {
    background: linear-gradient(45deg, var(--main), #0ed166);
    border-radius: 1rem;
    padding: 1.5rem;
}

.box-subscribe h4 {
    font-size: 1.75rem;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.box-subscribe p {
    font-size: 0.95rem;
    color: #f5f2f2;
}

.box-subscribe .input {
    width: 100%;
    position: relative;
}

.box-subscribe input {
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--white);
    height: 2.6rem;
}

.box-subscribe button {
    position: absolute;
    right: 0.4rem;
    top: 0.4rem;
    height: 1.8rem;
    width: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main);
    border: 1px solid var(--main);
    border-radius: 0.3rem;
}

html[dir="rtl"] .box-subscribe button {
    right: unset;
    left: 0.4rem;
    transform: rotate(180deg);
}

.box-subscribe button svg {
    width: 1.5rem;
    height: 1.5rem;
}

.box-subscribe button svg [fill] {
    fill: var(--white);
}

/* === Course Page === */

.stars[rate="1"] svg:nth-child(1) [fill],
.stars[rate="2"] svg:nth-child(1) [fill],
.stars[rate="2"] svg:nth-child(2) [fill],
.stars[rate="3"] svg:nth-child(1) [fill],
.stars[rate="3"] svg:nth-child(2) [fill],
.stars[rate="3"] svg:nth-child(3) [fill],
.stars[rate="4"] svg:nth-child(1) [fill],
.stars[rate="4"] svg:nth-child(2) [fill],
.stars[rate="4"] svg:nth-child(3) [fill],
.stars[rate="4"] svg:nth-child(4) [fill],
.stars[rate="5"] svg [fill] {
    fill: var(--hot);
}

.stars-half[rate="0.5"] svg:nth-child(1) [fill][data-name="star"],
.stars-half[rate="1.5"] svg:nth-child(1) [fill],
.stars-half[rate="1.5"] svg:nth-child(2) [fill][data-name="star"],
.stars-half[rate="2.5"] svg:nth-child(1) [fill],
.stars-half[rate="2.5"] svg:nth-child(2) [fill],
.stars-half[rate="2.5"] svg:nth-child(3) [fill][data-name="star"],
.stars-half[rate="3.5"] svg:nth-child(1) [fill],
.stars-half[rate="3.5"] svg:nth-child(2) [fill],
.stars-half[rate="3.5"] svg:nth-child(3) [fill],
.stars-half[rate="3.5"] svg:nth-child(4) [fill][data-name="star"],
.stars-half[rate="4.5"] svg:nth-child(1) [fill],
.stars-half[rate="4.5"] svg:nth-child(2) [fill],
.stars-half[rate="4.5"] svg:nth-child(3) [fill],
.stars-half[rate="4.5"] svg:nth-child(4) [fill],
.stars-half[rate="4.5"] svg:nth-child(5) [fill][data-name="star"] {
    fill: var(--hot);
}

.intro-course {
    background-color: var(--main);
    position: relative;
}

.intro-course h1 {
    color: var(--white);
    font-family: 'Bold';
    font-size: 2.25rem;
}

.intro-course p {
    font-size: 1.125rem;
    color: #f0eded;
    line-height: 1.8;
}

.sections-course {
    background-color: var(--dark);
    position: sticky;
    top: 91px;
    z-index: 9;
}

.sections-course-scroll>a {
    margin-inline-end: 0.625rem;
    padding: 0.875rem 1.125rem;
    font-size: 1.125rem;
    color: var(--white);
    border-radius: 4px;
    font-family: 'Bold';
    transition: 0.3s;
    white-space: nowrap;
}

.sections-course-scroll>a.active {
    background-color: var(--main);
}

.sections-course-scroll>a:last-child {
    margin-inline-end: 0;
}

.single-section-course h2,
.title-hot {
    color: var(--dark);
    font-size: 1.5rem;
    border-left: 3px solid var(--main);
}

html[dir="rtl"] .single-section-course h2,
html[dir="rtl"] .title-hot {
    border-left: unset;
    border-right: 3px solid var(--main);
}

.single-section-course p {
    color: #555;
    font-size: 1rem;
    line-height: 1.8;
}

.title-unit {
    background-color: #f3f3f3;
    border-radius: 4px;
    padding: 0.7rem 1.25rem;
    cursor: pointer;
}

.title-unit i {
    transition: 0.3s;
    margin-inline-start: 0.5rem;
}

.title-unit.active i {
    transform: rotate(180deg);
}

.title-unit b {
    font-size: 2rem;
    color: var(--main);
    font-family: 'Bold';
}

.title-unit h3 {
    font-size: 1rem;
    color: var(--dark);
    font-weight: 600;
    font-family: 'Regular';
}

.list-lesson>a {
    padding: 0.7rem 1.25rem;
    background-color: #393D48;
    color: var(--border-color);
}

.list-lesson>a:nth-child(even) {
    background-color: #434751;
}

.list-lesson>a:first-child {
    border-radius: 4px 4px 0 0;
}

.list-lesson>a:last-child {
    border-radius: 0 0 4px 4px;
}

.list-lesson>a:not(.lock) i.lock {
    display: none !important;
}

.total-stars {
    text-align: center;
}

.total-stars h4 {
    font-size: 4.5rem;
    font-weight: 300;
    font-family: 'LightNum';
    color: var(--dark);
}

.total-stars .stars {
    justify-content: center;
    margin: 0.5rem 0;
}

.total-stars .stars svg {
    transform: rotateY(180deg);
}

.total-stars span {
    font-size: 1.125rem;
    color: var(--text-light);
}

.total-stars b {
    font-size: 1.25rem;
    font-family: 'LightNum';
}

.progress-star i,
.progress-star i span {
    height: 10px;
    border-radius: 15px;
}

.progress-star i {
    width: 50%;
    background-color: var(--bg-light-gray);
    position: relative;
}

.progress-star i span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--hot);
}

html[dir="rtl"] .progress-star i span {
    left: unset;
    right: 0;
}

.progress-star span {
    font-size: 1.125rem;
    color: var(--text-light);
    font-family: 'LightNum';
}

.box-trainer-course {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.box-trainer-course img {
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 50%;
}

.box-trainer-course h5 {
    font-size: 1.125rem;
    color: var(--dark);
}

.box-trainer-course h6 {
    font-size: 0.875rem;
    color: var(--text-light);
    font-family: 'LightNum';
}

.box-trainer-course p {
    font-size: 1rem;
    color: var(--dark);
}

.box-single-course {
    position: relative;
    margin-top: -240px;
    z-index: 11;
}

.box-single-course>div {
    position: sticky;
    top: 110px;
    background-color: var(--white);
    border: 1px solid var(--border-color);
    padding: 0.625rem;
    border-radius: 20px;
}

.video {
    border-radius: 10px;
    overflow: hidden;
    display: flex;
}

.video video {
    width: 100%;
    height: 222px;
    object-fit: contain;
    background-color: var(--black);
    border-radius: 10px;
}

.videoLesson video {
    height: 500px;
}

.video img,
.video::before,
.video button {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.video img {
    object-fit: cover;
}

.video.playing img {
    display: none;
}

.video:not(.playing)::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.video button {
    width: auto;
    height: auto;
    z-index: 9;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    display: flex;
    background: none;
    border: none;
}

.video button svg {
    width: 2.5rem;
    height: 2.5rem;
}

.video button svg#pause {
    display: none;
}

.video.playing button svg#play {
    display: none;
}

.video.playing:not(.pausing):hover button svg#pause,
.video.pausing button svg#play {
    display: inline-block;
    animation: fadeIn 0.3s linear;
}

.box-single-course .others {
    padding: 1.5rem 0.625rem 0.625rem;
    margin-top: -0.5rem;
    background-color: var(--bg-light-gray);
    border-radius: 0 0 10px 10px;
}

.box-single-course .others del {
    font-size: 1rem;
}

.box-single-course .others b {
    font-size: 1.875rem;
    color: var(--main);
}

.box-single-course .details-point {
    border-bottom: 1px solid var(--border-color);
}

.box-single-course .details-point p svg {
    margin-inline-end: 0.75rem;
    width: 1.6rem;
    height: auto;
}

.box-single-course .details-point p {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.box-single-course .details-point p:last-child {
    margin-bottom: 0;
}

.box-single-course .details-point span {
    margin-inline-end: 0.25rem;
    font-size: 1.125rem;
    color: var(--text-light);
}

.box-single-course .details-point b {
    font-size: 1rem;
    color: var(--dark);
}

.box-single-course .btn {
    width: 100%;
    text-align: center;
    border-radius: 6px;
    font-family: 'Bold';
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}

@media (max-width: 1199.9px) {
    .sections-course {
        top: 80px;
    }
}

@media (max-width: 991.9px) {
    .box-single-course video {
        height: 250px;
    }

    .box-single-course {
        margin-top: 3rem;
        z-index: 1;
    }

    .box-single-course>div {
        position: static;
    }
}

@media (max-width: 767.9px) {
    .sections-course {
        top: 76px;
    }
}

@media (max-width: 575.9px) {
    .sections-course {
        top: 64px;
    }

    .total-stars {
        text-align: start;
        margin-bottom: 1rem;
    }

    .total-stars .stars {
        justify-content: start;
    }

    .sections-course-scroll>a {
        padding: 0.675rem 0.825rem;
    }
}

/* === Lesson === */

.hero-lesson,
.box-question {
    background-color: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
    padding: 1.5rem;
    border-radius: 1rem;
}

.hero-lesson .row>*:nth-child(2) {
    text-align: center;
}

.hero-lesson b {
    font-size: 0.925rem;
    color: var(--dark);
}

.hero-lesson i {
    font-style: normal;
    color: var(--main);
    font-weight: 700;
    font-size: 0.85rem;
}

.hero-lesson .bar {
    height: 10px;
    margin-top: 0.75rem;
    background-color: #f1f1f1;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
}

.hero-lesson .bar span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 1rem;
    background: linear-gradient(to left, var(--main), #0ed166);
}

html[dir="rtl"] .hero-lesson .bar span {
    left: unset;
    right: 0;
    background: linear-gradient(to right, var(--main), #0ed166);
}

.hero-lesson .row>*:nth-child(3) {
    text-align: end;
}

.hero-lesson h1,
.hero-quiz h1 {
    color: var(--main);
    font-size: 1.25rem;
}

.hero-lesson h2 {
    color: var(--dark);
    font-size: 0.925rem;
    margin-top: 0.5rem;
}

.hero-lesson .btn {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}

.contentLesson h3 {
    color: var(--dark);
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.contentLesson p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
}

@media (max-width: 991.9px) {
    .list-content-course {
        position: fixed;
        top: 0;
        left: calc((6 / 12) * -100%);
        height: 100vh;
        overflow: auto;
        z-index: 999;
        background-color: var(--white);
        padding: 1.5rem !important;
        transition: 0.4s;
    }

    .list-content-course.show {
        left: 0;
    }

    .bg-list-content-course {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background-color: rgba(0, 0, 0, 0.66);
        display: none;
    }

    .list-content-course.show+.bg-list-content-course {
        display: block;
        animation: fadeIn 0.1s ease-in;
    }
}

@media (max-width: 767.9px) {
    .list-content-course {
        left: calc((8 / 12) * -100%);
    }
}

@media (max-width: 575.9px) {
    .list-content-course {
        left: calc((10 / 12) * -100%);
    }
}

@media (min-width: 992px) {
    .bg-list-content-course {
        display: none;
    }
}

/* === Pop Up === */

body.no-scroll {
    overflow: hidden;
    padding-inline-start: 17px;
}

.pop-up {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
}

.pop-up.show {
    display: flex;
    animation: fadeIn 0.3s linear;
}

.pop-up>div {
    min-height: 5%;
    min-width: 25%;
    max-width: 90%;
    max-height: 90%;
    border-radius: 0.625rem;
    background-color: var(--white);
    animation: fadeInBottom 0.5s linear both;
}

.pop-up .os-content {
    padding: 0 !important;
}

.pop-up .content {
    border-radius: 0.625rem;
    overflow: hidden;
    position: relative;
}

.title-pop-up {
    padding: 1rem;
    background-color: var(--main);
    border-radius: 0.625rem 0.625rem 0 0;
    color: var(--white);
    font-size: 1.125rem;
    font-family: 'Regular';
}

.close-pop-up:not(.btn) {
    position: absolute;
    right: 0.625rem;
    top: 0.625rem;
    z-index: 12;
    display: inline-flex;
}

html[dir="rtl"] .close-pop-up:not(.btn) {
    right: unset;
    left: 0.625rem;
}

.title-pop-up+.close-pop-up svg [fill] {
    fill: var(--white);
}


.title-pop-up+.close-pop-up svg [stroke] {
    stroke: var(--white);
}

.body-pop-up {
    max-height: calc(90vh - 4.3125rem);
    overflow: auto;
}

.pop-up h3,
.pop-up h4 {
    font-size: 1.125rem;
    color: var(--dark);
    font-family: 'Regular';
    text-align: center;
}

.input-stars .stars svg {
    width: 1.7rem;
    height: auto;
}

.pop-up .btn {
    font-size: 1rem;
}

.pop-up textarea {
    height: 150px;
    resize: none;
}

.pop-up textarea {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
    padding: 1rem;
    padding-right: 1rem !important;
    color: #393D48;
    font-family: 'Regular';
    transition: 0.3s;
}

*::placeholder {
    font-weight: 100;
    font-family: 'Regular';
    font-size: 0.85rem;
}

/* === Hero Quiz === */

/* .hero-quiz p {
    margin-top: 0.75rem;
    color: var(--text-light);
    font-size: 0.85rem;
    line-height: 1.5;
}

.hero-quiz b {
    font-size: 0.85rem;
    color: var(--dark);
    font-weight: 100;
    margin-bottom: 0.75rem;
    background-color: var(--bg-light-gray);
    padding: 0.5rem 0.8rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-quiz b:last-child {
    margin-bottom: 0;
}

.hero-quiz b span {
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--white);
    background-color: var(--main);
    margin-inline-start: 0.25rem;
    flex: 0 0 1.5rem;
    text-align: center;
    padding: 0.3rem;
    border-radius: 0.25rem;
} */

.title-exam {
    font-family: 'Bold';
}

.info-exam span,
.title-question span {
    font-size: 1rem;
    color: var(--text-light);
    margin-inline-end: 0.5rem;
}

.info-exam b,
.title-question b {
    position: relative;
    color: var(--dark);
    font-size: 1.125rem;
    padding-right: 0.5rem;
}

.info-exam b::before,
.title-question b::before {
    content: "";
    position: absolute;
    right: 0;
    height: calc(100% - 4px);
    top: 2px;
    width: 1.5px;
    background-color: var(--main);
}

html[dir="ltr"] .info-exam b::before,
html[dir="ltr"] .title-question b::before {
    right: unset;
    left: 0;
}

.about-exam {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-light);
}

.box-question {
    margin-bottom: 1.5rem;
}

.title-question {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--dark);
    margin-bottom: 0.75rem;
}

.box-question span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.85rem;
    width: 1.85rem;
    height: 1.85rem;
    margin-inline-end: 0.75rem;
}

.title-question,
.box-question label {
    display: flex;
    align-items: center;
}

.title-question span {
    font-size: 700;
    background-color: var(--main);
    color: var(--white);
    border-radius: 50%;
    font-size: 0.85rem;
}

.box-question input+label {
    color: var(--text-light);
    background-color: #F4F7FB;
    transition: 0.3s;
    padding: 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

.box-question input:checked+label {
    color: var(--white);
    background-color: #00C48C;
}

.box-question input+label span {
    display: flex;
}

.box-question input+label svg {
    height: 1.125rem;
    width: auto;
    max-width: 1.125rem;
}

.box-question input+label svg.checked {
    display: none;
}

.box-question input:checked+label svg.not-checked {
    display: none;
}

.box-question input:checked+label svg.checked {
    display: inline-block;
    animation: fadeIn 0.3s linear;
}

.box-question+div button {
    font-size: 1rem;
}

/* === Profile === */


.form-setting .input-img label,
.user-img {
    width: 9rem;
    height: 9rem;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--white);
    cursor: pointer;
    position: relative;
}

.form-setting .input-img label img,
.user-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-setting .input-img label .over,
.form-setting .input-img label .over::before {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 9;
    top: 0;
    right: 0;
}

.form-setting .input-img label .over {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    transition: 0.3s;
}

.form-setting .input-img label:hover .over {
    opacity: 1;
}

.form-setting .input-img label .over::before {
    content: "";
    background-color: var(--dark);
    opacity: 0.16;
    z-index: 99;
}

.form-setting .input-img label .over span {
    padding: 0.5rem;
    background-color: var(--dark);
    display: block;
    width: 100%;
    text-align: center;
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

.form-setting .input-img,
.user-img {
    margin-top: -4.5rem;
    position: relative;
}

.tabs {
    background-color: var(--bg-light-gray);
    padding: 0.333rem;
    border-radius: 30px;
    white-space: nowrap;
    overflow: auto;
    max-width: 100%;
}

.tabs a {
    font-size: 1.125rem;
    color: var(--text-light);
    font-family: 'Bold';
    border-radius: 25px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.tabs a.active {
    background-color: var(--main);
    color: var(--white);
}

.tabs a:last-child {
    margin-inline-end: 0 !important;
}

.container-call form>div,
.form-inputs>div {
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 10px;
}

.container-call button,
.form-inputs button {
    width: 100%;
}

.box-input2 {
    position: relative;
}

.box-input2 label {
    background-color: var(--white);
    position: absolute;
    top: 1.5rem;
    left: 0.7rem;
    transform: translateY(-50%);
    padding: 0.1rem 0.4rem;
    color: #767B82;
    font-size: 0.8rem;
    transition: 0.3s;
    top: 0;
    transform: translateY(-50%);
}

html[dir="rtl"] .box-input2 label {
    left: unset;
    right: 0.7rem;
}

.box-input2:is(.hasValue, .focus) label {
    top: 0;
    transform: translateY(-50%);
}

.box-input2 input,
.box-input2 textarea {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
    padding: 1rem;
    padding-right: 1rem !important;
    color: #393D48;
    font-family: 'Bold';
    transition: 0.3s;
}

.box-input2 input:disabled {
    background-color: #F0F0F0;
    color: #808080;
}

.box-input2 .icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

html[dir="rtl"] .box-input2 .icon {
    left: 1rem;
    right: unset;
}

.box-input2.show-password #eye {
    display: none;
}

.box-input2:not(.show-password) #eye-slash {
    display: none;
}

.content-tabs {
    display: none;
}

.content-tabs.show {
    display: block;
    animation: fadeIn 0.3s linear;
}

.titlePage {
    font-size: 1.75rem;
    color: var(--dark);
}

.titlePage+a {
    font-size: 0.85rem;
    color: var(--text-light);
    transition: 0.3s;
}

.titlePage+a:hover {
    transform: translateX(4px);
}

.titlePage+a svg {
    height: 1.125rem;
    width: auto;
    fill: var(--text-light);
}

.borderTop {
    border-top: 1px solid var(--border-color);
}

.borderBottom {
    border-bottom: 1px solid var(--border-color);
}

.form-shadow {
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.16);
    border-radius: 1rem;
}

.box-input-custom label {
    font-size: 0.925rem;
    color: var(--dark);
    margin-bottom: 0.5rem;
    display: inline-block;
    font-weight: 500;
}

.box-input-custom input,
.box-input-custom textarea,
.box-input-custom select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--white);
    color: var(--dark);
    font-size: 0.925rem;
    border-radius: 0.5rem;
}

.box-input-custom textarea {
    height: 100px;
    resize: none;
}

.box-input-custom small {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--hot);
}

.line-between-inputs {
    height: 1px;
    width: 100%;
    background-color: var(--border-color);
    margin: 1rem 0;
}

.label-file {
    border: 1px solid var(--borderGray);
    background-color: var(--bg-light-gray);
    height: 250px;
    width: 100%;
    border-radius: 0.5rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.label-file img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 9;
    object-fit: cover;
}

.label-file svg {
    width: 3rem;
    height: 3rem;
}

.label-file svg [stroke] {
    stroke: var(--main);
}

/* === About Us Page === */

html {
    scroll-behavior: smooth;
}

.col-list-points ul {
    position: sticky;
    top: 112px;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 0.625rem 1.625rem;
}

@media (min-width: 992px) {
    .col-list-points ul {
        max-height: calc(100vh - 130px);
        overflow: auto;
    }
}

@media(max-width: 991.9px) {
    .col-list-points {
        position: sticky;
        top: 92px;
        z-index: 9999;
    }

    .col-list-points ul {
        white-space: nowrap;
        overflow: auto;
    }
}

.col-list-points ul li a {
    width: 100%;
    background-color: var(--bg-light-gray);
    padding: 0.5rem;
    border-radius: 0.625rem;
    transition: 0.3s;
    font-size: 0.9rem;
    color: var(--dark);
}

.col-points>div {
    padding: 2rem;
    margin-bottom: 2rem;
    background-color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 0.625rem;
}

.col-points>div h2 {
    font-size: 1.625rem;
    color: var(--dark);
    text-transform: capitalize;
    margin-bottom: 1rem;
}

.col-points>div .img {
    display: flex;
    width: 100%;
    height: 15rem;
    overflow: hidden;
    border-radius: 0.625rem;
}

.col-points>div .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.col-points>div p {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--dark);
    line-height: 1.6;
}

/* === Forms === */

.form-bringo label,
.form-bringo p {
    font-size: 1rem;
    color: var(--black);
}

.form-bringo label {
    text-transform: capitalize;
}

.form-bringo input[type="checkbox"],
.steps input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin-inline-end: 0.75rem;
    accent-color: var(--main);
}

.form-bringo [disabled],
.steps [disabled] {
    opacity: 0.65;
}

.form-bringo a,
.steps a {
    color: #1AA2F8;
    text-decoration: underline;
}

.form-bringo .or {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-bringo .or::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0.5px;
    background-color: #d4d4d4;
    z-index: 1;
    transform: translateY(-50%);
}

.form-bringo .or span {
    background-color: #FFFFFF;
    position: relative;
    z-index: 2;
    padding: 0 0.5rem;
}

.form-bringo .login-with a {
    background-color: var(--bg-light-gray);
    border-radius: 12px;
    width: 100%;
    padding: 0.4rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
}

.form-bringo .login-with svg {
    width: 2rem;
    height: 2rem;
    margin-inline-end: 0.5rem;
}

.txt-success-register {
    font-size: 1.75rem;
    text-align: center;
    color: var(--main);
    text-transform: capitalize;
    line-height: 1.5;
}

.title-inputs {
    font-size: 1.4rem;
    color: var(--main);
    text-transform: capitalize;
}

.line {
    display: block;
    height: 0.5px;
    width: 100%;
    background-color: var(--borderGray);
}

.box-shadow {
    padding: 1rem;
    border-radius: 0.625rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.box-shadow b {
    color: var(--dark);
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.box-shadow span {
    color: var(--text-light);
    font-size: 1rem;
}

/* === Product Page === */

.hero-product-page {
    padding-bottom: calc(3rem + 120px) !important;
}

.hero-product-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 530px;
    background-color: #f5f2f2;
    z-index: 1;
}

.hero-product-page>div {
    position: relative;
    z-index: 2;
}

.hero-product-page h1 {
    font-size: 3rem;
    color: var(--main);
    margin-bottom: 1.25rem;
}

.hero-product-page p {
    font-size: 1.125rem;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.hero-product-page .img {
    display: flex;
    justify-content: center;
}

.hero-product-page .img img {
    height: auto;
    width: auto;
    max-width: 100%;
    height: 500px;
    margin-bottom: -120px;
    object-fit: contain;
}

@media (max-width: 991.9px) {
    .hero-product-page::before {
        height: 650px;
    }
}

.about-product-page .img {
    display: flex;
}

.about-product-page .img img {
    height: auto;
    width: 100%;
    object-fit: contain;
    max-height: 450px;
}

.about-product-page .text ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-product-page .text h4 {
    font-size: 2.25rem;
    font-weight: 700;
    font-family: 'Bold';
    color: var(--main);
    margin-bottom: 1.5rem;
}

.about-product-page .text li {
    display: flex;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--dark);
}

.about-product-page .text li svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    margin-inline-end: 0.75rem;
}

.about-product-page .text li svg [fill] {
    fill: rgb(238, 204, 9);
}

.img-full img {
    width: 100%;
    height: auto;
}

.items-will-buy {
    border-radius: 0.625rem;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.16);
}

.items-will-buy h5 {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'Bold';
    color: var(--black);
    margin-bottom: 1rem;
}

.items-will-buy .list-items>div {
    padding: 0.5rem 0.75rem;
    background-color: #f8f8f8;
}

.items-will-buy .list-items>div:nth-child(odd) {
    background-color: #f0f0f0;
}

.items-will-buy .list-items>div:last-child {
    background-color: var(--main);
}

.items-will-buy .list-items span {
    font-size: 0.925rem;
    color: var(--dark);
}

.items-will-buy .list-items b {
    font-size: 1.125rem;
    color: var(--main);
    margin-inline-start: 1rem;
}

.items-will-buy .list-items>div:last-child span,
.items-will-buy .list-items>div:last-child b {
    color: var(--white);
}

.hero-choose-your-apps {
    background-color: var(--main);
    text-align: center;
}

.hero-choose-your-apps h1 {
    color: var(--white);
    font-size: 3.5rem;
    font-family: 'Bold';
}

.hero-choose-your-apps p {
    font-size: 1.25rem;
    color: #eeeeee;
}

.apps-to-selected h3 {
    font-size: 1.5rem;
    color: var(--dark);
}

.apps-to-selected label {
    background-color: #fff;
    border-radius: 0.625rem;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.16);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    cursor: pointer;
    border: 1px solid #fff;
    transition: 0.3s;
    opacity: 0.85;
    width: 100%;
}

.apps-to-selected input:checked+label {
    opacity: 1;
    border-color: var(--main);
    transform: scale(1.0125);
}

.apps-to-selected label .icon svg {
    width: 3rem;
    flex: 0 0 3rem;
    height: auto;
}

.apps-to-selected label .icon [fill] {
    fill: var(--main);
}

.apps-to-selected label span {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 100%;
}

.apps-to-selected label>div {
    flex: 0 0 calc(100% - 2rem);
    width: calc(100% - 2rem);
}

.apps-to-selected label .icon-check {
    flex: 0 0 1.5rem;
    display: inline-flex;
}

.apps-to-selected label .icon-check [stroke] {
    stroke: #b1b1b1;
    transition: 0.3s;
}

.apps-to-selected label .icon-check .checkTrue {
    opacity: 0;
    transition: 0.3s;
}

.apps-to-selected input:checked+label .icon-check [stroke] {
    stroke: var(--main);
}

.apps-to-selected input:checked+label .icon-check .checkTrue {
    opacity: 1;
}

.apps-to-selected .details-apps-selected {
    position: sticky;
    top: 7rem;
    padding: 1.5rem;
    border-radius: 0.625rem;
    box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.16);
    background-color: #fff;
}

.details-apps-selected h4 {
    font-size: 1.125rem;
    color: var(--dark);
    margin-bottom: 1.25rem;
}

.details-apps-selected .list-apps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.details-apps-selected .list-apps>div {
    display: flex;
    align-items: center;
}

.details-apps-selected .list-apps svg {
    flex: 0 0 2rem;
    height: auto;
    margin-inline-end: 0.75rem;
}

.details-apps-selected .list-apps [fill] {
    fill: var(--main);
}

.details-apps-selected .list-apps span {
    color: #393D48;
    font-size: 0.85rem;
    line-height: 1.5;
}

.details-apps-selected .note {
    background-color: #dffdec;
    padding: 0.5rem;
    border: 1px solid var(--main);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--dark);
    border-radius: 0.25rem;
    margin-bottom: 1.25rem;
}

.details-apps-selected .note b {
    font-size: 1rem;
    color: var(--main);
}

@media (max-width: 991.9px) {
    .apps-to-selected .details-apps-selected {
        position: fixed;
        left: 0;
        bottom: 0;
        top: unset;
        border-radius: 0;
        z-index: 9;
        width: 100%;
        height: auto;
        max-height: 40vh;
        overflow: auto;
    }
}

.hero-modules {
    background: var(--bg-light-gray);
    background-size: cover;
    padding-bottom: 15rem;
}

.hero-modules h1,
.our-offices h1,
.big-title {
    font-size: 2.5rem;
    color: var(--main);
}

.hero-modules p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--dark);
}

.download-file svg {
    width: 1.6rem;
    height: auto;
    margin-inline-end: 0.6rem;
}

.download-file [fill] {
    transition: 0.3s;
}

.download-file:hover [fill] {
    fill: var(--main);
}

.features-modules ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.features-modules ul li {
    display: flex;
    line-height: 1.5;
    align-items: flex-start;
}

.features-modules ul li:first-child {
    margin-top: 1rem;
}

.features-modules svg {
    width: 1.5rem;
    height: auto;
    margin-inline-end: 0.5rem;
    flex: 0 0 1.5rem;
}

.features-modules svg [fill] {
    fill: gold;
}

.video-modules {
    margin-top: -12rem;
}

.video-modules iframe {
    aspect-ratio: 16 / 9;
    height: 100%;
    width: 100%;
    border-radius: 0.625rem;
}

.our-offices h1 {
    margin-bottom: 2.25rem;
}

.box-job {
    display: block;
    transition: 0.3s;
    height: 100%;
}

.box-job:hover {
    transform: scale(1.025);
}

.box-job h2 {
    font-size: 1.25rem;
    color: var(--main);
    font-family: 'Bold';
    flex-shrink: 1;
}

.box-job .price {
    background-color: var(--main);
    font-size: 0.85rem;
    color: #fff;
    padding: 0.4rem 0.6rem;
    margin-inline-start: 0.5rem;
    flex-shrink: 0;
    font-weight: 600;
    border-radius: 2rem;
}

.box-job .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.box-job .tags span {
    background-color: #ebebeb;
    padding: 0.4rem 0.6rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    color: var(--black);
}

.box-job p {
    line-height: 1.5;
    font-size: 0.85rem;
    color: var(--dark);
}

/* === API Doc === */

.header-api-doc {
    background-color: var(--main)
}

.header-api-doc .versions {
    position: relative;
}

.header-api-doc .versions>span {
    background-color: rgba(255, 255, 255, 1);
    font-size: 0.85rem;
    padding: 0.3rem 0.4rem;
    display: inline-flex;
    border-radius: 0.25rem;
    color: var(--black);
    font-weight: 600;
}

.header-api-doc .versions>span svg {
    flex: 0 0 1rem;
    height: auto;
    width: 1rem;
    margin-inline-start: 0.6rem;
}

.header-api-doc .versions>span svg [fill] {
    fill: var(--black);
}

.header-api-doc .versions>span+div {
    position: absolute;
    white-space: nowrap;
    background-color: var(--white);
    border-radius: 0.25rem;
    box-shadow: 0 0 0.125rem rgba(0, 0, 0, 0.16);
    overflow: hidden;
    display: none;
}

.header-api-doc .versions>span+div.show {
    display: flex;
    animation: fadeIn 0.3s linear;
}

.header-api-doc .versions>span+div a {
    padding: 0.2rem 0.4rem;
    color: var(--dark);
    font-size: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: 0.3s;
}

.header-api-doc .versions>span+div a:hover {
    background-color: var(--bg-light-gray);
}

.header-api-doc .versions>span+div a.selected {
    background-color: #d4d4d4;
}

.header-api-doc .versions>span+div a div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-api-doc .versions>span+div a div span {
    background-color: var(--main);
    color: var(--white);
    padding: 0.25rem;
    border-radius: 0.25rem;
    display: inline-flex;
    font-size: 0.65rem;
}

.header-api-doc h2 {
    font-size: 1.125rem;
    color: var(--white);
    font-weight: 100;
}

.header-api-doc .links {
    gap: 0.5rem;
}

.header-api-doc .links a {
    border: 1px solid rgba(255, 255, 255, 0);
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    color: #fff;
    transition: 0.3s;
}

.header-api-doc .links a.active {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.header-api-doc .links a svg {
    margin-inline-end: 0.35rem;
    width: 1.25rem;
    flex: 0 0 1.25rem;
    height: auto;
}

.header-api-doc .links a [fill] {
    fill: rgba(255, 255, 255, 0.5);
}

.header-api-doc .links a [stroke] {
    stroke: rgba(255, 255, 255, 0.5);
}

.header-api-doc .links a:hover {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.header-api-doc .links a.active:hover {
    background-color: rgba(255, 255, 255, 0.25);
    border-color: #fff;
}

.header-api-doc .link-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f1f1;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
    font-size: 0.85rem;
    color: var(--black);
}

.header-api-doc .link-search b {
    font-size: 0.85rem;
    color: var(--black);
    font-weight: 100;
}

.header-api-doc .link-search svg {
    width: 1.4rem;
    flex: 0 0 1.4rem;
    height: auto;
}

.header-api-doc .link-search [fill] {
    fill: var(--black);
}

.header-api-doc .link-search span {
    font-size: 0.75rem;
    margin-inline-start: 1.25rem;
    color: var(--text-light);
}

.pop-up-search-doc>div {
    width: 50%;
}

.pop-up-search-doc .box-input {
    position: relative;
}

.pop-up-search-doc .box-input input {
    width: 100%;
    padding: 0.8rem 0.8rem;
    font-size: 1rem;
    border: 1px solid var(--borderGray);
    border-radius: 0.25rem;
    padding-inline-start: 2.25rem;
    color: var(--dark);
}

.pop-up-search-doc .box-input .icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
}

.pop-up-search-doc .box-input .icon svg {
    width: 1.25rem;
    height: auto;
    fill: var(--dark);
}

.pop-up-search-doc .container-tabs {
    border: 1px solid var(--borderGray);
    border-radius: 0.25rem;
    margin-top: 0.75rem;
    padding: 1rem;
}

.pop-up-search-doc .tabs,
.pop-up-search-doc .tabs a {
    border-radius: 0;
    padding: 0 !important;
    background-color: transparent;
    font-size: 0.95rem;
    font-family: 'Regular';
}

.pop-up-search-doc .tabs a {
    padding: 0.25rem 0.5rem !important;
    border-bottom: 1px solid transparent;
}

.pop-up-search-doc .tabs a.active {
    background-color: transparent;
    border-bottom: 1px solid var(--main) !important;
    color: var(--main);
}

.pop-up-search-doc [class*="-state"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    grid-area: 1rem;
}

.pop-up-search-doc [class*="-state"] span {
    font-size: 1.25rem;
    color: var(--text-light);
}

.pop-up-search-doc .content-tabs.show {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pop-up-search-doc .content-tabs a {
    display: flex;
    align-items: flex-start;
    background-color: var(--bg-light-gray);
    padding: 0.75rem;
    border-radius: 0.25rem;
    transition: 0.3s;
}

.pop-up-search-doc .content-tabs a:hover {
    background-color: #eeeeee;
    transform: scale(1.0125);
}

.pop-up-search-doc .content-tabs a .icon {
    display: inline-flex;
    margin-inline-end: 1rem;
}

.pop-up-search-doc .content-tabs a .icon svg {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: auto;
}

.pop-up-search-doc .content-tabs a h4 {
    text-align: start;
    font-size: 1rem;
    color: var(--main);
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.pop-up-search-doc .content-tabs a p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.5;
}

.pop-up-search-doc .content-tabs a .icon [fill] {
    fill: var(--main);
}

.pop-up-search-doc .content-tabs a .icon [stroke] {
    stroke: var(--main);
}

.links-docs {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-inline-end: 1px solid var(--border-color);
    padding-inline-end: 0.5rem;
    height: 100%;
}

.links-docs h4 {
    font-size: 1.125rem;
    color: var(--dark);
}

.links-docs h5 {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: #444;
}

.links-docs ul {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.links-docs ul li a {
    font-size: 0.85rem;
    color: #555;
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    width: 100%;
}

.links-docs ul li a.active {
    background-color: #dcffec;
}

.content-doc h1 {
    padding-bottom: 1.125rem;
    margin-bottom: 1.125rem;
    border-bottom: 1px solid var(--borderGray);
    font-size: 2.25rem;
    color: var(--black);
}

.content-doc p {
    line-height: 1.5rem;
    font-size: 1rem;
    color: #666;
}

.content-doc h2 {
    font-size: 2rem;
}

.content-doc h3 {
    font-size: 1.75rem;
}

.content-doc h4 {
    font-size: 1.5rem;
}

.content-doc h5 {
    font-size: 1.25rem;
}

.content-doc h6 {
    font-size: 1rem;
}

.box-doc {
    margin: 1rem 0;
    padding: 1.25rem;
}

.box-doc h1,
.box-doc h2,
.box-doc h3,
.box-doc h4,
.box-doc h5,
.box-doc h6 {
    margin-bottom: 0.75rem;
}

.box-doc ul {
    padding: 0;
    padding-inline-start: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.box-doc ul li,
.box-doc p {
    font-size: 1rem;
    color: var(--dark);
}

.box-doc.info h1,
.box-doc.info h2,
.box-doc.info h3,
.box-doc.info h4,
.box-doc.info h5,
.box-doc.info h6 {
    color: #5BC0DE;
}

.box-doc.info {
    background-color: #E3EDF2;
    border-inline-start: 0.25rem solid #5BC0DE;
}

.box-doc.danger h1,
.box-doc.danger h2,
.box-doc.danger h3,
.box-doc.danger h4,
.box-doc.danger h5,
.box-doc.danger h6 {
    color: #D9534F;
}

.box-doc.danger {
    background-color: #FDF7F7;
    border-inline-start: 0.25rem solid #D9534F;
}

.box-doc.success h1,
.box-doc.success h2,
.box-doc.success h3,
.box-doc.success h4,
.box-doc.success h5,
.box-doc.success h6 {
    color: #50AF51;
}

.box-doc.success {
    background-color: #F3F8F3;
    border-inline-start: 0.25rem solid #50AF51;
}

.box-doc.warning h1,
.box-doc.warning h2,
.box-doc.warning h3,
.box-doc.warning h4,
.box-doc.warning h5,
.box-doc.warning h6 {
    color: #F0AD4E;
}

.box-doc.warning {
    background-color: #FCF8F2;
    border-inline-start: 0.25rem solid #F0AD4E;
}

.content-doc img {
    width: 100%;
    height: auto;
}

.footer-doc {
    padding-top: 1.125rem;
    margin-top: 1.125rem;
    border-top: 1px solid var(--border-color);
}

.footer-doc h5 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #666;
}

.footer-doc a {
    font-size: 0.85rem;
    color: var(--dark);
    display: inline-flex;
}

.footer-doc a span {
    display: inline-flex;
    flex: 1 0 auto;
    color: var(--dark);
}

.footer-doc a svg {
    flex: 0 0 1rem;
    height: auto;
}

@media (max-width: 1199.9px) {
    .pop-up-search-doc>div {
        width: 75%;
    }
}

@media (max-width: 991.9px) {
    .pop-up-search-doc>div {
        width: 90%;
    }
}

@media (max-width: 767.9px) {
    .col-links-doc {
        background-color: #fff;
    }

    .links-docs {
        width: 100%;
        padding: 0;
        border: none;
    }
}

@media (max-width: 399.9px) {
    .header-api-doc .links {
        gap: 0.25rem;
    }

    .header-api-doc .links a {
        padding: 0.25rem;
    }

    .header-api-doc .link-search {
        padding: 0.125rem;
    }
}

.register-restaurant {
    height: 100vh;
    background-image: url('../imgs/bg-nav.png'), url('../imgs/bg-cards.svg');
    background-repeat: no-repeat, repeat-y;
    background-size: auto, calc(100% - 241px);
    background-position: top 0 left 0, top -88px left 241px;
}

.register-restaurant .over {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.66);
    display: flex;
    align-items: center;
    justify-content: center;
}

.register-restaurant .over form {
    max-height: 85vh;
    border-radius: 0.625rem;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.register-restaurant .over .header,
.register-restaurant .over .footer {
    background-color: #f3f3f3;
    padding: 0.625rem;
    position: relative;
}

.register-restaurant .over .header img {
    width: auto;
    height: 2.75rem;
}

.register-restaurant .over .body {
    /* height: calc(100% - 8rem); */
    max-height: calc(85vh - 7.25rem);
    background-color: #fff;
    overflow: auto;
}

.register-restaurant .over .footer {
    height: 3rem;
}

.register-restaurant .over .body .title {
    font-size: 1.5rem;
    color: var(--dark);
}

.register-restaurant .over .footer .line-percent {
    width: 100%;
    background: #fff;
    height: 1rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

.register-restaurant .over .footer .line-percent span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
    background-color: var(--main);
    border-radius: 0.5rem;
    transition: 0.3s;
}

.steps[step="1"] .btns-steps-form .prev,
.steps[step="1"] .btns-steps-form .submit,
.steps:not(.lastStep) .btns-steps-form .submit,
.steps.lastStep .btns-steps-form .next {
    display: none;
}

.steps .form-step>div.body {
    display: none;
}

.steps[step="1"] .form-step>div.body:nth-child(1),
.steps[step="2"] .form-step>div.body:nth-child(2),
.steps[step="3"] .form-step>div.body:nth-child(3),
.steps[step="4"] .form-step>div.body:nth-child(4),
.steps[step="5"] .form-step>div.body:nth-child(5),
.steps[step="6"] .form-step>div.body:nth-child(6),
.steps[step="7"] .form-step>div.body:nth-child(7),
.steps[step="8"] .form-step>div.body:nth-child(8),
.steps[step="9"] .form-step>div.body:nth-child(9),
.steps[step="10"] .form-step>div.body:nth-child(10),
.steps[step="11"] .form-step>div.body:nth-child(11),
.steps[step="12"] .form-step>div.body:nth-child(12) {
    display: block;
    animation: fadeIn 0.3s linear;
}

/* === Our Location === */

.ourLocation {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.ourLocation h2 {
    font-size: 1.75rem;
    color: var(--dark);
    line-height: 1.5;
}

.ourLocation img {
    width: auto;
    height: 4rem;
    background-color: var(--white);
    border-radius: 0.5rem;
    object-fit: cover;
}

.ourLocation .swiper-slide {
    width: auto;
}

.ourLocation .swiper-slide a {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.ourLocation [class*="swiper-button"]::after {
    content: unset;
}

.box-input-custom .tools {
    border: 1px solid var(--border-color);
    background-color: var(--white);
    color: var(--dark);
    border-radius: 0.5rem;
    display: inline-flex;
    overflow: hidden;
}

.box-input-custom .tools span {
    display: inline-flex;
    font-size: 0.85rem;
    padding: 0.25rem 0.75rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.box-input-custom .tools span:not(.num) {
    padding: 0.25rem 0.75rem;
    display: inline-flex;
    width: 1.25rem;
    color: #707070;
    font-weight: 700;
    background-color: #F2F2F2;
    font-size: 0.925rem;
}

.box-input-custom .tools span {
    font-size: 1.125rem;
}

.box-input-custom .tools span:not(.num) {
    color: var(--main);
    font-size: 1.25rem;
}

label.error {
    display: inline-flex;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
    color: #D00000 !important;
    font-size: 0.9rem !important;
}

#lat-error {
    display: none !important;
}

.colJobs>div {
    background-color: var(--bg-light-gray);
    padding: 1rem;
    border-radius: 0.25rem;
    gap: 0.625rem;
}

.colJobs>div .titleJob {
    font-size: 1.125rem;
    font-family: 'Bold';
    color: #222;
}

.colJobs>div .companyName,
.colJobs>div .durationJob {
    font-size: 0.85rem;
    color: #333;
}

[id-pop="add-job"] h2 {
    font-size: 1.25rem;
    color: var(--black);
}

.headerHelpCenter {
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.headerHelpCenter::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
}

.headerHelpCenter img {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.headerHelpCenter .container {
    position: relative;
    z-index: 5;
    text-align: center;
}

.headerHelpCenter h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
}

.headerHelpCenter input {
    width: 100%;
    padding: 0.625rem;
    border-radius: 0.25rem;
    border: 1px solid var(--white);
    background-color: var(--white);
    color: var(--dark);
    font-size: 1rem;
}

.headerHelpCenter input::placeholder {
    font-size: 1rem;
    color: var(--text-light);
}

.linkOfPart {
    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 1.5rem;
    border-radius: 0.625rem;
    gap: 1.25rem;
    transition: 0.5s;
}

.linkOfPart img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    transition: 0.5s;
}

.linkOfPart h3 {
    font-size: 1.25rem;
    color: var(--dark);
}

.linkOfPart p {
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text-light);
    text-align: center;
}

.linkOfPart:hover {
    transform: scale(1.025);
}

.linkOfPart:hover img {
    transform: scale(1.125);
}

.container-fluid-details-help-center {
    background-color: var(--bg-light-gray);
}

.container-details-help-center {
    background-color: #fff;
    padding: 1.125rem;
    border-radius: 0.625rem;
}

.breadcrumb span {
    margin-inline-end: 0.4rem;
    display: inline-flex;
    align-items: center;
}

.breadcrumb span a {
    margin-inline-end: 0.4rem;
    font-size: 0.8rem;
    color: var(--dark);
}

.breadcrumb span:last-child,
.breadcrumb span:last-child a {
    margin-inline-end: 0;
}

.breadcrumb span svg {
    width: 0.625rem;
    height: 0.625rem;
    flex: 0 0 0.625rem;
    fill: var(--text-light);
    stroke: var(--text-light);
}

.breadcrumb span:last-child svg {
    display: none;
}

.col-links-details-help-center .links-docs {
    border-inline-end: none;
}

.col-links-details-help-center .links-docs ul li a {
    font-size: 0.925rem;
    padding: 0.625rem 0.85rem;
    transition: 0.3s;
}

.col-links-details-help-center .links-docs ul li a:hover {
    background-color: var(--bg-light-gray);
}

.col-links-details-help-center .links-docs ul {
    gap: 0.625rem;
}

/* invoice-automation */

.hero-invoice-automation,
.try-invoice-automation {
    text-align: center;
}

.hero-invoice-automation h1 {
    font-size: 2.5rem;
    color: var(--black);
}

.hero-invoice-automation h1+p {
    font-size: 1rem;
    color: var(--text-light);
}

.try-invoice-automation p {
    font-size: 1.125rem;
    color: var(--dark);
}

.try-invoice-automation a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rebeccapurple;
}

.try-invoice-automation a img {
    max-width: 100%;
    width: 100%;
    height: 12rem;
    object-fit: contain;
}

.try-invoice-automation .you-can {
    position: relative;
}

.try-invoice-automation .you-can::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    transform: translateY(50%);
}

.try-invoice-automation .you-can span {
    position: relative;
    z-index: 1;
    padding: 0 0.5rem;
    background-color: #fff;
    display: inline-flex;
}

.upload-bill svg {
    width: 1.75rem;
    height: auto;
}

.upload-bill svg [stroke] {
    stroke: #fff;
    transition: 0.3s;
}

.upload-bill:hover svg [stroke] {
    stroke: var(--main);
}

.try-invoice-automation .box-proccess {
    background-color: var(--bg-light-gray);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.26);
    min-height: 500px;
    border-radius: 0.625rem;
    overflow: hidden;
    padding: 1.5rem;
    position: relative;
}

.try-invoice-automation .box-proccess .box-loading {
    background-color: var(--bg-light-gray);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.try-invoice-automation .box-proccess img.loading {
    width: 4rem;
    height: 4rem;
}

.try-invoice-automation .box-proccess img.bill {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 0.625rem;
}

.list-data-bill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.list-data-bill .data {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}

.list-data-bill .data span {
    flex: 0 0 88px;
    font-size: 1rem;
    text-align: start;
}

.list-data-bill .data b {
    flex: 0 0 calc(100% - 88px);
    background-color: var(--dark);
    padding: 0.5rem;
    color: var(--white);
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 100;
    text-align: start;
    line-height: 1.5;
}

.list-data-bill .data b.full {
    margin-top: 0.5rem;
    flex: 0 0 100%;
}

.box-proccess.doing .row {
    display: none;
}

.box-proccess:not(.doing) .box-loading {
    display: none;
}

/* === Forums === */

.headerForums .row {
    border-bottom: 1px solid var(--border-color);
}

.headerForums h1 {
    font-size: 1.5rem;
    color: var(--dark);
}

.headerForums .box-search input {
    flex: 1 0 auto;
    padding: 0.4rem 0.8rem;
    border: 1px solid #ebebeb;
    border-start-start-radius: 2rem;
    border-end-start-radius: 2rem;
    font-size: 0.9rem;
}

.headerForums .box-search button {
    padding: 0.4rem 0.8rem;
    border: 1px solid #ebebeb;
    background: #ebebeb;
    border-start-end-radius: 2rem;
    border-end-end-radius: 2rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.headerForums .btn.post {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    border-radius: 2rem;
}

.headerForums .profile img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: cover;
    border-radius: 50%;
}

.box-post .top {
    border-bottom: 1px solid var(--border-color);
    color: var(--main);
}

.box-post .tools>div {
    align-items: center;
    gap: 0.15rem;
    margin-bottom: 1rem
}

.box-post .tools a {
    background-color: var(--main);
    display: inline-flex;
    padding: 0.25rem;
    transition: 0.3s;
}

.box-post .tools a:hover {
    transform: scale(1.025);
}

.box-post .tools a svg {
    width: 2rem;
    height: 2rem;
    fill: var(--white);
    stroke: var(--white);
}

.box-post .tools a.btn-top {
    border-radius: 2rem 2rem 0 0;
}

.box-post .tools a.btn-bottom {
    border-radius: 0 0 2rem 2rem;
}

.box-post .tools span {
    color: var(--dark);
    font-size: 0.9rem;
}

.box-post .tools span svg {
    width: 1.25rem;
    height: auto;
}

.box-post .tools span svg [fill] {
    fill: var(--dark);
}

.box-post .mid p {
    line-height: 1.7;
    font-size: 1rem;
    color: var(--dark);
}

.box-post .tags {
    gap: 0.75rem;
}

.box-post .tags a {
    font-size: 0.85rem;
    color: var(--white);
    background-color: #a8a8a8;
    padding: 0.3rem 0.6rem;
    border-radius: 0.25rem;
}

.box-post .bottom {
    gap: 1rem;
}

.box-post .bottom .btn {
    font-size: 0.85rem;
}

.box-post .bottom span {
    font-size: 0.8rem;
    color: #333;
}

.box-post .bottom span a {
    color: var(--main);
    text-decoration: underline;
}

.comments {
    border-top: 1px solid var(--border-color);
}

.box-comment .user {
    display: flex;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    width: 2.5rem;
}

.box-comment .user img {
    flex: 0 0 2.5rem;
    height: 2.5rem;
    width: 2.5rem;
    object-fit: cover;
    border-radius: 50%;
}

.box-comment .text {
    background-color: var(--bg-light-gray);
    padding: 0.75rem;
    color: #555;
    font-size: 0.85rem;
    border-radius: 0.4rem;
}

.box-comment .actions {
    display: flex;
    gap: 1rem;
}

.box-comment .actions a {
    display: inline-flex;
    align-items: center;
    background-color: var(--bg-light-gray);
    padding: 0.25rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: var(--dark);
    transition: 0.1s;
}

.box-comment .actions a svg {
    height: 1.35rem;
    width: auto;
    max-width: 1.35rem;
    margin-inline-end: 0.25rem;
}

.box-comment .actions a.like [fill] {
    fill: #999;
    transition: 0.3s;
}

.box-comment .actions a.like:active svg {
    transform: scale(1.025);
}

.box-comment .actions a.like.active [fill] {
    fill: var(--main);
}

.box-comment .actions a.reply [fill] {
    fill: #999;
}

.box-input-reply {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.box-input-reply textarea {
    width: 100%;
    min-height: 6rem;
    resize: none;
    border-radius: 0.25rem;
    padding: 0.5rem;
    padding-inline-end: 1.5rem;
    padding-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    line-height: 1.5;
    color: var(--dark);
    font-size: 0.9rem;
}

.box-input-reply button {
    font-size: 0.8rem;
    padding: 0.4rem;
}

.box-input-reply a.close-box-input-reply {
    margin-inline-start: 0.625rem;
    font-size: 0.8rem;
    text-decoration: underline;
    color: #D9534F;
}

.ck-editor__editable[role="textbox"] {
    min-height: 200px;
}

.ck-content .image {
    max-width: 80%;
    margin: 20px auto;
}

.tagify,
.tagify__tag {
    border-radius: 0.625rem !important;
}

.alert {
    padding: 1rem;
    border: 1px solid #f44336;
    background-color: rgba(244, 67, 54, 0.55);
    color: #ffffff;
    font-weight: bold;
    font-size: 1rem;
    border-radius: 0.625rem;
    min-width: 30vw;
}

.container-user-profile-forums .img img {
    width: 8.5rem;
    height: 8.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--main);
}

.container-user-profile-forums h1 {
    font-size: 1.75rem;
    color: var(--dark);
    font-weight: 100;
    font-family: 'Regular';
}

.container-user-profile-forums h2,
.container-user-profile-forums h3 {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 100;
    font-family: 'Regular';
}

.container-user-profile-forums h3 b {
    font-size: 1rem;
    color: var(--main);
}

.container-user-profile-forums h4 {
    font-size: 1.5rem;
    color: #555;
}

header .avatar {
    background-color: #f3f3f3;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    position: relative;
    transition: 0.3s;
    cursor: pointer;
}

header .avatar.showMenu {
    border-radius: 1rem 1rem 0 0;
}

header .avatar img {
    width: 2.125rem;
    height: 2.125rem;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--main);
}

header .avatar span {
    font-size: 0.9rem;
}

header .avatar span svg {
    width: 1rem;
    height: auto;
    flex: 0 1 auto;
}

header .avatar ul {
    padding: 0;
    position: absolute;
    left: 0;
    top: 2.5rem;
    list-style: none;
    background-color: #f3f3f3;
    width: 100%;
    border-radius: 0 0 1rem 1rem;
    display: none;
    z-index: 1;
    overflow: hidden;
}

header .avatar.showMenu ul {
    display: block;
    animation: fadeIn 0.3s linear;
}

header .avatar ul li a {
    background-color: #f3f3f3;
    width: 100%;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    color: var(--dark);
}

header .avatar ul li.active a {
    color: var(--main);
    font-weight: 700;
}

/* profile */

.profile {
    background-color: #F4F4F4;
}

.profile * {
    font-size: 0.85rem;
}

.profile>.container>div {
    background-color: var(--white);
    border-radius: 10px;
}

label[for="image-user"] {
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: 1px solid #fff;
    position: relative;
}

label[for="image-user"] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

label[for="image-user"] .over {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 0.75rem;
    color: var(--white);
}

label[for="image-user"]:hover .over {
    display: flex;
    animation: fadeIn 0.3s linear
}

.br-10 {
    border-radius: 10px;
}

.ch-input {
    position: relative;
}

.border-b {
    border-bottom: 1px solid #EFEFEF;
}

.ch-input:not(.ch-input-select) input,
.ch-input-select,
.box-gray-radius {
    background-color: #f4f4f4;
    border-radius: 10px;
    padding: 1rem 1.5rem;
    width: 100%;
    border: none;
    color: #454545;
}

.ch-input-select .input {
    display: flex;
}

.ch-input .icon,
.ch-has-text .text,
.ch-input-select label::after,
.ch-has-text .text::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    cursor: pointer;
}

.ch-input2 {
    padding: 0;
    border: 1px solid var(--border-color) !important;
    background-color: var(--white);
}

.ch-input2 select {
    flex-shrink: 1;
    width: auto;
    appearance: auto !important;
}

html[dir="rtl"] .ch-input .icon,
html[dir="rtl"] .ch-has-text .text {
    right: unset;
    left: 1.5rem;
}

.ch-has-text .text {
    left: 1.5rem;
    right: unset;
}

html[dir="rtl"] .ch-has-text .text {
    left: unset;
    right: 1.5rem;
}

.ch-input-select label {
    position: relative;
}

.ch-has-text .text::after,
.ch-input-select label::after {
    content: "";
    right: -1rem;
    height: 18px;
    width: 1px;
    background-color: #999;
}

.ch-input-icon input {
    padding: 1rem 3rem 1rem 1.5rem;
}

.ch-has-text input {
    padding: 1rem 1.5rem 1rem 5.25rem !important;
}

html[dir="rtl"] .ch-has-text input {
    padding: 1rem 5.25rem 1rem 1.5rem !important;
}

html[dir="rtl"] .ch-has-text .text::after,
html[dir="rtl"] .ch-input-select label::after {
    right: unset;
    left: -1rem;
}

.border-bottom {
    border-bottom: 1px solid #f4f4f4;
}

.ch-input-select input {
    padding: 0;
}

.ch-input-select {
    border: 1px solid transparent;
    outline: none;
}

.ch-input-select input,
.ch-input-select select {
    border: none;
    appearance: none;
    background-color: transparent;
}

.input input,
.input select,
.input textarea {
    width: 100%;
    background-color: #f4f4f4;
    border: none;
    border-radius: 12px;
    padding: 1.125rem 1.5rem;
    resize: none;
    transition: 0.3s;
    font-size: 0.875rem;
}

.profile>.container>div {
    background-color: var(--white);
    border-radius: 10px;
}

/* === Landing Page App === */

.hero-landing-page-app .text h1,
.hero-landing-page-app .text h1 span {
    font-size: 2.75rem;
    color: var(--dark);
    font-family: 'Bold';
}

.hero-landing-page-app .text h1 span {
    color: var(--main);
}

.hero-landing-page-app .text p {
    font-size: 0.925rem;
    color: var(--text-light);
    line-height: 1.7;
}

.hero-landing-page-app .img,
.app-features .img,
.app-functionality .img,
.download-app .img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-landing-page-app .img img,
.app-features .img img,
.app-functionality .img img,
.download-app .img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 450px;
}

.app-features .title,
.imgs-from-app .title,
.app-functionality .title {
    text-align: center;
    display: flex;
    justify-content: center;
}

.app-features .title h2,
.imgs-from-app .title h2,
.app-functionality .title h2 {
    font-size: 2rem;
    color: var(--dark);
    font-family: 'Bold';
    position: relative;
    padding-bottom: 1.25rem;
}

.app-features .title h2::before,
.app-functionality .title h2::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -1rem;
    width: calc(100% + 2rem);
    height: 5px;
    border-radius: 0.625rem;
    background: linear-gradient(45deg, var(--main), #0ed166);
}

.box-single-featue .icon,
.box-single-function .icon {
    width: 5rem;
    height: 5rem;
    flex: 0 0 5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.16);
}

.box-single-featue.green .icon,
.box-single-function.green .icon {
    background: linear-gradient(0deg, #1DD94F, #7EE24A, #E0ED45);
}

.box-single-featue.blue .icon,
.box-single-function.blue .icon {
    background: linear-gradient(0deg, #229FFB, #43BDE6, #64DCD2);
}

.box-single-featue.red .icon,
.box-single-function.red .icon {
    background: linear-gradient(0deg, #FC6075, #FE8158, #FD9A49);
}

.box-single-featue .icon img,
.box-single-function .icon img {
    width: 55%;
    height: 55%;
    flex: 0 0 55%;
    object-fit: contain;
}

.box-single-featue .text h3,
.box-single-function .text h3 {
    margin-bottom: 0.625rem;
    font-size: 1.3rem;
    color: var(--dark);
    font-family: 'Bold';
}

.box-single-featue .text p,
.box-single-function .text p {
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.7;
}

.swiper-imgs-app img {
    width: 100%;
    height: 30rem;
    object-fit: cover;
}

.swiper-imgs-app .swiper-slide {
    opacity: 0.65;
    transform: scale(0.85);
    transition: 0.3s;
    border-radius: 0.625rem;
    overflow: hidden;
}

.swiper-imgs-app .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.box-single-minimum-work .icon img {
    max-width: 3.25rem;
    width: auto;
    height: 3.25rem;
    object-fit: contain;
}

.box-single-minimum-work .text h5 {
    font-size: 1.125rem;
    color: var(--dark);
    margin-bottom: 0.25rem;
}

.box-single-minimum-work .text p {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--text-light);
}

.download-app {
    background: linear-gradient(45deg, var(--main), #0ed166);
}

.download-app h4 {
    font-size: 2.75rem;
    color: var(--white);
    font-family: 'Bold';
    display: inline-block;
    position: relative;
    padding-bottom: 1rem;
}

.download-app h4::before {
    content: "";
    width: 100%;
    height: 0.5px;
    background-color: var(--white);
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    left: 0;
}

.download-app p {
    font-size: 1.125rem;
    color: var(--bg-light-gray);
    font-weight: 100;
    line-height: 1.7;
}

.download-app .btns a {
    display: inline-flex;
    transition: 0.3s;
}

.download-app .btns a:hover {
    transform: scale(1.025);
}

.download-app .btns a img {
    height: 2.625rem;
}

@media (max-width: 575.9px) {

    .app-features .title h2,
    .app-functionality .title h2 {
        padding-bottom: 0;
    }

    .app-features .title h2::before,
    .app-functionality .title h2::before {
        content: unset;
    }
}

/* Table Price */

.table-price>div {
    padding: 1.5rem;
    border: 1px solid var(--borderGray);
    text-align: center;
}

.table-price>div:not(:first-child) {
    border-top: none;
}

.table-price>div:first-child,
.table-price>div:last-child {
    background-color: #f7f7f7;
}

.table-price .title-table-price {
    font-size: 1.25rem;
    color: #777;
    font-family: 'Bold';
}

.table-price .price h2 {
    color: #555;
    font-size: 2.25rem;
    margin-bottom: 0.125rem;
}

.table-price .price h2+span {
    color: #888;
    font-size: 0.85rem;
}

.table-price .fee,
.table-price .prePaid,
.table-price .details,
.table-price .other-details,
.table-price .more,
.table-price .interface,
.table-price .text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}

/* === Cloud Share Host === */

.hero-bg-cloud-share-host {
    text-align: center;
}

.hero-bg-cloud-share-host h1 {
    font-size: 2.5rem;
    line-height: 1.3;
    color: var(--black);
}

.hero-bg-cloud-share-host p {
    font-size: 1.125rem;
    color: var(--dark);
}

.toggleCloudShareHost svg {
    width: 1.625rem;
    height: 1.625rem;
    flex: 0 0 1.625rem;
    margin-inline-end: 0.5rem;
}

.toggleCloudShareHost span {
    line-height: 1.4;
    font-size: 1rem;
    color: var(--text-light);
    transition: 0.3s;
    transition: 0.3s;
}

.toggleCloudShareHost span b {
    transition: 0.3s;
    font-size: 0.85rem;
}

.toggleCloudShareHost svg [fill] {
    fill: var(--text-light);
    transition: 0.3s;
}

.toggleCloudShareHost svg circle {
    opacity: 0;
    transition: 0.3s;
}

.toggleCloudShareHost .active span {
    color: var(--dark);
}

.toggleCloudShareHost .active span b {
    color: var(--main);
}

.toggleCloudShareHost .active svg [fill] {
    fill: var(--main);
}

.toggleCloudShareHost .active svg circle {
    opacity: 1;
}

.monthlyBtn,
.yearlyBtn {
    cursor: pointer;
}

.boxesPriceCloudShareHost .box-price {
    height: 100%;
    border: 1px solid var(--bg-light-gray);
    box-shadow: 0 0 0.75rem var(--bg-light-gray);
    padding: 1.25rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.boxesPriceCloudShareHost .box-price .title {
    font-size: 2rem;
    font-family: 'Bold';
    margin-bottom: 0.75rem;
    color: var(--main);
}

.boxesPriceCloudShareHost .box-price>div:nth-child(1) {
    padding-bottom: 1rem;
    width: 100%;
}

.boxesPriceCloudShareHost .box-price>div:nth-child(2) {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    width: 100%;
}

.boxesPriceCloudShareHost .box-price .points p {
    font-size: 0.925rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
}

.boxesPriceCloudShareHost .box-price .points ul {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.boxesPriceCloudShareHost .box-price .points ul li {
    display: flex;
    align-items: center;
}

.boxesPriceCloudShareHost .box-price .points ul li svg {
    width: 1.35rem;
    height: auto;
    margin-inline-end: 0.35rem;
}

.boxesPriceCloudShareHost .box-price .points ul li svg [fill] {
    fill: var(--main);
}

.boxesPriceCloudShareHost .box-price>div:nth-child(2)>div {
    display: flex;
    align-items: center;
}

.boxesPriceCloudShareHost .box-price>div:nth-child(2)>div b {
    font-size: 1.75rem;
    font-family: 'Bold';
    margin-inline-end: 0.625rem;
    color: var(--main);
}

.boxesPriceCloudShareHost .box-price>div:nth-child(2)>div>div {
    display: flex;
    flex-direction: column;
}

.boxesPriceCloudShareHost .box-price>div:nth-child(2)>div>div span {
    font-size: 0.85rem;
    color: var(--text-light);
}

.boxesPriceCloudShareHost .box-price .note {
    font-size: 0.85rem;
    color: #777;
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.boxesPriceCloudShareHost .box-price .btn {
    display: block;
    width: 100%;
    border-radius: 2rem;
    text-align: center;
}

.boxesPriceCloudShareHost .box-price.monthly .yearly {
    display: none;
}

.boxesPriceCloudShareHost .box-price.yearly .monthly {
    display: none;
}

.boxesPriceCloudShareHost .box-price1,
.bg-price1 {
    background-color: var(--white);
}

.boxesPriceCloudShareHost .box-price2,
.bg-price2 {
    background-color: #E6F4EC;
}

.boxesPriceCloudShareHost .box-price3,
.bg-price3 {
    background-color: #CDE9DA;
}

.row-boxes-price-cloud-share-host {
    position: sticky;
    top: -170px;
}

[class*="bg-price"] {
    padding: 1rem;
}

.more-details-cloud-share-host h5 {
    font-size: 1.75rem;
    color: var(--dark);
    font-family: 'Bold';
    margin-bottom: 1.5rem;
}

.more-details-cloud-share-host h6 {
    font-size: 1.125rem;
    color: #555;
    font-weight: 100;
}

.more-details-cloud-share-host [class*="bg-price"] svg {
    width: 1.5rem;
    height: auto;
}

.more-details-cloud-share-host [class*="bg-price"] svg [fill] {
    fill: var(--main);
}

.more-details-cloud-share-host .first [class*="bg-price"] {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.more-details-cloud-share-host .last [class*="bg-price"] {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.table-download-file {
    border-collapse: collapse;
}

.table-download-file td {
    border: 1px solid var(--border-color);
    padding: 1rem 2rem;
    color: var(--dark);
    font-size: 1.125rem;
}

.table-download-file td:nth-child(1) {
    font-weight: 700;
    color: var(--black);
}

.any-problem {
    font-size: 0.925rem;
    color: var(--text-light);
}

.any-problem a {
    font-size: 0.925rem;
    color: var(--main);
    text-decoration: underline;
}

/* === Grid News === */

.grid-news {
    position: relative;
    column-gap: 20px;
    row-gap: 20px;
    display: grid;
    min-height: 30vh;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.grid-news>*:nth-child(1) {
    grid-area: 1 / 1 / 5 / 3;
    height: 520px;
}

.grid-news>*:nth-child(2) {
    grid-area: 1 / 3 / 3 / 4;
}

.grid-news>*:nth-child(3) {
    grid-area: 3 / 3 / 5 / 4;
}

.grid-news>*:nth-child(4) {
    grid-area: 1 / 4 / 3 / 5;
}

.grid-news>*:nth-child(5) {
    grid-area: 3 / 4 / 5 / 5;
}

.grid-news>div,
.grid-news>a,
.boxNews {
    height: 250px;
    background-color: #000000;
    position: relative;
    border-radius: 0.625rem;
    overflow: hidden;
}

/* .boxNews {
    height: auto;
} */

.grid-news>a img,
.boxNews img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid-news>a .over,
.boxNews .over {
    position: absolute;
    z-index: 9;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, #404040, rgba(255, 255, 255, 0.1));
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    flex-wrap: wrap;
    color: #FFF;
}

.grid-news>a .over span,
.grid-news>a span:not(.type),
.boxNews .over span,
.boxNews span:not(.type) {
    color: #d6d6d6;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    width: 100%;
}

.grid-news>a:nth-child(1) .over>span {
    font-size: 0.925rem;
}

.grid-news>a .over h2,
.boxNews .over h2 {
    font-size: 1rem;
    font-family: 'Bold';
}

.grid-news>a:nth-child(1) .over>h2 {
    font-size: 1.5rem;
}

.grid-news>a:nth-child(1) .over>p {
    font-size: 1rem;
    height: auto;
    max-width: 90% !important;
}

.grid-news>a .over>p,
.boxNews .over p {
    height: 0;
    overflow: hidden;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    font-size: 0.9rem;
}

.grid-news>a .over>*,
.boxNews .over>* {
    flex: 0 0 100%;
    font-family: 'Regular';
    line-height: 1.7;
}

@media (max-width: 991.9px) {
    .grid-news {
        grid-template-rows: repeat(3, auto);
    }

    .grid-news>*:nth-child(1) {
        height: auto;
        max-height: 425px;
        grid-area: 1 / 1 / 2 / 5;
    }

    .grid-news>*:nth-child(2) {
        grid-area: 2 / 1 / 2 / 3;
    }

    .grid-news>*:nth-child(3) {
        grid-area: 2 / 3 / 2 / 5;
    }

    .grid-news>*:nth-child(4) {
        grid-area: 3 / 1 / 5 / 3;
    }

    .grid-news>*:nth-child(5) {
        grid-area: 3 / 3 / 5 / 5;
    }
}

@media (max-width: 575.9px) {
    .grid-news {
        grid-template-rows: 300px 200px 200px 200px 200px;
    }

    .grid-news>* {
        height: auto !important;
    }

    .grid-news>*:nth-child(2) {
        grid-area: 2 / 1 / 3 / 5;
    }

    .grid-news>*:nth-child(3) {
        grid-area: 3 / 1 / 4 / 5;
    }

    .grid-news>*:nth-child(4) {
        grid-area: 4 / 1 / 5 / 5;
    }

    .grid-news>*:nth-child(5) {
        grid-area: 5 / 1 / 6 / 5;
    }
}

/* === Details News === */

.box-details {
    background-color: var(--bg-light-gray);
    color: var(--black-color);
}

.box-details p {
    word-break: break-word;
}

span.date {
    color: #BCBCBC;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
}

.box-details h1 {
    font-size: 1.5rem;
    font-family: 'Bold';
}

.box-details p {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.5;
}

.box-details img {
    width: 100%;
    height: auto;
    max-height: 450px;
}

.box-details .tags a {
    display: inline-flex;
    padding: 0.5rem 0.75rem;
    background-color: var(--main);
    color: #fff;
    border-radius: 28px;
    -webkit-border-radius: 28px;
    -moz-border-radius: 28px;
    -ms-border-radius: 28px;
    -o-border-radius: 28px;
    font-size: 0.85rem;
    margin-inline-end: 0.75rem;
}

.box-share {
    background-color: var(--dark);
    color: var(--white);
    font-size: 1rem;
}

.box-share svg {
    width: auto !important;
    height: 1rem !important;
}

.another-news .boxNews img {
    height: 180px;
}

@media (max-width: 500px) {
    .box-share {
        flex-wrap: wrap;
    }

    .box-share>div {
        flex: 0 0 100%;
    }

    .box-share>div:nth-child(1) {
        margin-bottom: 5px;
    }
}

/* === Coming Soon === */

.coming-soon {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    overflow: auto;
}

.coming-soon>.container {
    position: relative;
    z-index: 7;
}

.coming-soon h1 {
    font-size: 2.75rem;
    font-family: 'Bold';
    color: #ffffff;
    color: var(--main);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
}

.coming-soon p {
    color: #ebebeb;
    color: var(--dark);
    font-size: 1.25rem;
    line-height: 1.75;
    text-align: center;
}

.coming-soon img.building {
    width: auto;
    height: auto;
    min-height: 18rem;
    max-width: 100%;
}

/* === Investor === */

.col-list-points-investor>ul {
    border: 1px solid var(--dark);
    border-radius: 0.625rem;
    padding: 1.25rem;
    background-color: var(--white);
    z-index: 98;
}

.col-list-points-investor ul li:not(:last-child) {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dark);
}

.col-list-points-investor ul li a {
    background: transparent;
    font-size: 1.125rem;
    color: var(--dark);
    padding: 0;
    text-decoration: underline;
    display: inline-flex;
    align-items: flex-end;
}

.col-list-points-investor ul li a svg {
    height: 1.125rem;
    width: auto;
    margin-inline-start: 0.5rem;
}

.col-list-points-investor ul li a svg [stroke] {
    stroke: var(--dark);
}

.col-list-points-investor ul li a svg [fill] {
    fill: var(--dark);
}

.col-points-investor>div {
    box-shadow: none;
    padding: 0;
    margin-bottom: 5rem;
}

.col-points-investor>div h2 {
    font-size: 2.25rem;
    color: var(--black);
}

.col-points-investor>div p {
    font-size: 1.125rem;
    color: var(--dark);
}

.col-points-investor .box-custom-investor {
    background-color: var(--main);
    padding: 1.75rem;
    border-radius: 0.625rem;
}

.col-points-investor .box-custom-investor h2 {
    color: #fff;
    margin-bottom: 2rem;
}

.col-points-investor .box-custom-investor p,
.col-points-investor .box-custom-investor p a {
    color: #fafafa;
}

.col-points-investor .box-custom-investor p a {
    text-decoration: underline;
}

.col-points-investor .boxNews {
    border-radius: 0.625rem;
    overflow: hidden;
}

.col-points-investor .boxNews h2 {
    margin-bottom: 0;
    color: var(--white);
}

.col-points-investor .financial-reports .img {
    height: 20rem;
}

.col-points-investor .financial-reports h3 {
    font-size: 2.25rem;
    color: var(--dark);
    text-transform: capitalize;
}

.col-points-investor .financial-reports p {
    font-size: 0.925rem;
    color: var(--text-light);
}

.list-reports-yearly b {
    font-size: 1.25rem;
    color: var(--dark);
}

.list-reports-yearly>div {
    border-bottom: 1px solid var(--borderGray);
}

.list-reports-yearly>div:first-child {
    border-top: 1px solid var(--borderGray);
}

.list-reports-yearly .icon svg {
    height: auto;
    width: 2rem;
}

.list-reports-yearly>div>div:first-child {
    cursor: pointer;
}

.list-reports-yearly p {
    font-size: 0.925rem;
    color: var(--dark);
}

.list-reports-yearly .btn {
    margin-top: 0.35rem;
    font-size: 0.925rem;
    padding: 0.4rem 0.6rem;
}

.list-reports-yearly>div .icon svg {
    transition: 0.3s;
}

.list-reports-yearly>div.active .icon svg {
    transform: rotate(180deg);
}

.part-of-team {
    gap: 2.5rem;
    display: flex;
    flex-direction: column;
}

.part-of-team h5 {
    font-size: 1.5rem !important;
    color: var(--black);
}

.part-of-team h6 {
    font-size: 1.25rem !important;
    color: var(--dark);
}

.part-of-team p {
    font-size: 1rem !important;
    color: var(--text-light);
}

.part-of-team .single-box-team {
    margin-top: 2rem;
    display: flex;
    align-items: flex-start;
}

.part-of-team .single-box-team .imgPerson {
    display: flex;
}

.part-of-team .single-box-team .imgPerson img {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    border-radius: 0.625rem;
}

@media (max-width: 991.9px) {
    .col-list-points-investor ul li a {
        text-decoration: none;
    }

    .col-list-points-investor ul li:not(:last-child) {
        border: none;
        padding-bottom: 0rem !important;
    }
}

.table-all-products table {
    width: 100%;
    overflow: auto;
    border-collapse: collapse;
}

.table-all-products table td,
.table-all-products table th {
    border: 1px solid var(--border-color);
    padding: 1rem;
}

.table-all-products table th {
    background-color: var(--bg-light-gray);
    font-size: 1.125rem;
    color: var(--dark);
}

.table-all-products table td *:not(.btn) {
    font-size: 1rem;
    color: var(--text-light);
}

.table-all-products table img {
    width: 6rem;
    height: auto;
}

.table-all-products table .prices-product {
    text-align: center;
}

.table-all-products table .prices-product span {
    font-size: 1rem;
    color: var(--dark);
    font-weight: 700;
}

.register-restaurant form {
    position: relative;
}

.register-restaurant .close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    z-index: 9;
}

.register-restaurant .close svg {
    width: 1.75rem;
    height: 1.75rem;
}

.brandGuide img {
    width: auto;
    max-width: 100%;
    height: 4rem;
}

.brandGuide h3 {
    margin: 1.25rem 0;
    font-size: 1.75rem;
    color: #222;
}

.brandGuide p {
    font-size: 1rem;
    color: #444;
    line-height: 1.6;
}

.brandGuide a {
    text-decoration: underline;
    color: #1188d1;
}