@font-face {
    font-family: NunitoBlack;
    src: url('../fonts/Nunito-Black.ttf') format('truetype');
}
@font-face {
    font-family: NunitoRegular;
    src: url('../fonts/Nunito-Regular.ttf') format('truetype');
}
@font-face {
    font-family: NunitoMedium;
    src: url('../fonts/Nunito-Medium.ttf') format('truetype');
}
@font-face {
    font-family: GothamBlack;
    src: url('../fonts/Gotham-Black.otf') format('truetype');
}
@font-face {
    font-family: GothamRegular;
    src: url('../fonts/GothamOffice-Regular.otf') format('truetype');
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root {
    --color-primary             : #137cc0;
    --color-secondary           : #010100;
    --color-complementary       : #fa9705;
    --font-family-title         : NunitoBlack;
    --font-size-title           : 25px;
    --font-size-subttile        : 16px;
    --font-family-text          : NunitoRegular;
    --font-family-medium        : NunitoMedium;
    --font-size-text            : 13px;

    --color-background-light    : #fff;
    --color-background-dark     : #1c1c1c;
    --color-text-light          : #9f9f9f;
    --color-text-dark           : #fff;
    --color-title-light         : #000;
    --color-title-dark          : #fff;
    --color-border-light        : #e3e3e3;
    --color-border-dark         : #fff;
    --color-icon-light          : #7A7A7A;
    --color-icon-dark           : #fff;
    --color-box-shadow-light    : 1px 1px 5px 0px rgba(0, 0, 0, .1);
    --color-box-shadow-dark     : 1px 1px 5px 0px rgba(255, 255, 255, .1);
    --color-error               : #e40202;
    --color-pending             : #e4e403;
    --color-success             : #07ca07;

    --spacing-base              : 8px;
    --border-radius             : 25px;

    --padding-section           : 1rem 0;
    --padding-icon              : 12px;
    --gap                       : 2rem;
    --container                 : 1260px;
}
/* Default Theme (Light) */
body.light-theme {
    --color-background          : var(--color-background-light);
    --color-text                : var(--color-text-light);
    --color-title               : var(--color-title-light);
    --color-border              : var(--color-border-light);
    --color-icon                : var(--color-icon-light);
    --box-shadow                : var(--color-box-shadow-light);
}
/* Dark Theme */
body.dark-theme {
    --color-background          : var(--color-background-dark);
    --color-text                : var(--color-text-dark);
    --color-title               : var(--color-title-dark);
    --color-border              : var(--color-border-dark);
    --color-icon                : var(--color-icon-dark);
    --box-shadow                : var(--color-box-shadow-dark);
}
/* General */
body {
    background-color: var(--color-background);
    color: var(--color-text);
}
ul{
    list-style: none;
}
h1,h2,h3,h4,h5{
    font-family: var(--font-family-title);
    font-size: var(--font-size-title);
    color: var(--color-title);
}
p,a,span,label,b{
    font-size: var(--font-size-text);
    font-family: var(--font-family-text);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 400;
    letter-spacing: .01em;
}
b{
    font-weight: bold;
    color: inherit;
}
p{
    line-height: calc(var(--font-size-text) + 5px);
}
hr{
    height: 1px;
    background: var(--color-border);
    border: inherit;
}
#btnFilter{
    display: none;
}
.vh__full{
    min-height: 100vh;
}
.hidden{
    display: none;
}
.fixed__right{
    position: fixed;
    top: 0;
    left: 0;
}
.container{
    padding-left: 10px;
    padding-right: 10px;
    max-width: var(--container);
    margin: auto;
    width: 100%;
}
.logo h2{
    color: #fff;
    text-transform: uppercase;
    font-size: 25px;
}
.logo.logo__footer h2{
    color: var(--color-background-light);
    font-size: 45px;
    line-height: 48px;
}
.logo img{
    max-width: 100%;
}
.section{
    padding: var(--padding-section);
    overflow: hidden;
}
.icon__square{
    position: relative;
    width: 30px;
    height: 30px;
}
.icon__single .counter{
    position: absolute;
    top: -5px;
    right: 0px;
    color: var(--color-background-light);
    background: var(--color-primary);
    width: 17px;
    height: 17px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.subtitle{
    font-size: var(--font-size-subttile);
}
.no_select {
    user-select: none;
}
.no_select:focus {
    outline: none;
}
.required,
.text__error{
    color: var(--color-error);
}
.text__error{
    font-size: calc(var(--font-size-text) - 2px);
}
.font__size_text{
    font-size: var(--font-size-text);
}
.font__size_subtitle{
    font-size: var(--font-size-subttile);
}
.color__primary{
    color: var(--color-primary);
}
.border__primary{
    border: 1px solid var(--color-border);
}
.border__bottom{
    border-bottom: 1px solid var(--color-border);
}
.text__center{
    text-align: center;
}
.text__white,
.text__white > b{
    color: #fff !important;
}
.color__success{
    color: var(--color-success);
}
.color__complementary{
    color: var(--color-complementary);
}
.mt__2{
    margin-top: 20px;
}
.mb__5{
    margin-bottom: 70px;
}
.btn__facebook{
    background: #3f568c !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn__paypal img{
    width: 100%;
    object-fit: cover;
}
.margin__right{
    margin-right: auto;
}
.margin__left{
    margin-left: auto;
}
.btn__facebook > span{
    color: #fff;
}
.btn__facebook > svg{
    width: 15px;
}
.btn.btn__complementary{
    border-radius: 0 !important;
    background: var(--color-complementary);
    color: #fff;
}
.btn.btn__complementary svg path{
    fill: #fff;
    stroke: inherit;
}
.btn.btn__complementary span{
    color: #fff;
}
/* Buttons */
button{
    border: inherit;
    padding: .7rem;
    cursor: pointer;
}
button[disabled] {
    opacity: .5;
}
.btn{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .7rem 1rem;
    background: transparent;
    width: max-content;
    border-radius: var(--border-radius);
    cursor: pointer;
    min-height: 40px;
}
.btn__icon{
    padding: .5rem 1.5rem;
    gap: .5rem;
}
.btn__icon svg{
    width: 25px;
}
.btn__icon svg g{
    stroke: var(--color-background-light);
}
.btn.btn__white{
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .4);
}
.btn.btn__white span{
    color: var(--color-background-light);
}
.btn.btn__white .icon__arrow::after,
.btn.btn__primary.btn__icon .icon__arrow::after {
    background: var(--color-background-light);
}
.btn.btn__white .icon__arrow::before,
.btn.btn__primary.btn__icon .icon__arrow::before{
    border-color: var(--color-background-light);
}
.btn.btn__primary{
    background: var(--color-primary);
    color: var(--color-background-light);
}
.btn.btn__primary.btn__icon span{
    color: var(--color-background-light);
    width: max-content;
}
.btn.btn__primary.btn__border_primary{
    background: transparent;
    color: var(--color-primary);
    border:1px solid var(--color-primary);
}
.btn.btn_100{
    min-width: 100%;
}
.btn.btn__no_border{
    border-radius: 0;
}
/* ul */
ul{
    gap: .7rem;
    display: flex;
}
ul.column{
    flex-direction: column;
}
ul li{
    display: flex;
    align-items: center;
    gap: 7px;
}
ul li.justify__start{
    justify-content: flex-start;
    align-items: flex-start;
}
ul li > svg,
ul li > img{
    width: 22px;
    min-width: 22px;
}
ul li > svg g{
    fill: var(--color-primary);
}
ul li > span{
    line-height: 20px;
}
/* Flex Box */
.d_flex{
    display: flex;
    align-items: center;
    gap: var(--gap);
}
.d_flex.justify__center{
    justify-content: center;
}
.d_flex.justify__left{
    justify-content: left;
}
.d_flex.justify__right{
    justify-content: right;
}
.d_flex.justify__space_beetween{
    justify-content: space-between;
}
.d_flex.justify__space_around{
    justify-content: space-around;
}
.d_flex.align__item_start{
    align-items: flex-start;
}
.gap__0{
    gap: 5px;
}
/* Input + label + form*/
form{
    display: flex;
    flex-direction: column;
    gap: calc(var(--gap) - 10px);
}
label{
    margin-bottom: .4rem;
    display: block;
    color: var(--color-title);
}
input{
    border: none;
    background: transparent;
    height: 35px;
    max-height: 35px;
    padding: 5px 5px 5px 5px;
    width: 100%;
}
input:focus{
    border: none;
    outline: none;
}
.input__group{
    width: 100%;
}
input::placeholder{
    color: var(--color-text);
    font-size: calc(var(--font-size-text) - 1px);
}
.input__group .input__inner{
    display: flex;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    gap: 10px;
    align-items: center;
    padding: 0 10px;
}
.input__group .input__inner textarea{
    border: none;
    min-height: 300px;
    max-height: 300px;
    min-width: 100%;
    max-width: 100%;
    border-radius: var(--border-radius);
    padding: 15px 5px;
}
.input__group .input__inner textarea:focus{
    outline: none;
}
.input__group .input__inner.input__error{
    border-color: var(--color-error);
}
.input__group .input__inner.input__color{
    border-color: var(--color-primary);
}
.input__group .input__inner:focus-within{
    border-color: var(--color-primary);
}
.input__group .input__inner > .icon{
    padding: 10px 0;
    height: 35px;
}
.input__group .input__inner > .icon svg{
    max-height: 25px;
}
.input__group .input__inner > .icon img,
.input__group .input__inner > .icon svg,
.input__group .input__inner > .icon svg path{
    height: 100%;
    fill: var(--color-icon);
}
.input__group .input__button{
    margin-right: -3px;
}
.input__group .input__inner.input__file{
    border: 1px dashed var(--color-primary);
    background: var(--color-border);
}
.input__group .input__inner.input__file .custom-file-trigger{
    width: 100%;
    height: 100%;
    min-height: 40px;
    border: var(--border-radius);
    padding: 5px 10px;
    font-family: var(--font-family-text);
    display: flex;
    align-items: center;
    font-size: var(--font-size-text);
    cursor: pointer;
}
.input__groups{
    display: flex;
    gap: calc(var(--gap) - 15px);
}
/*Image preview*/
.file__preview{
    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}
.file__preview > div{
    position: relative;
    border-radius: 5px;
    border: 1px solid var(--color-secondary);
    background: var(--color-border);
    padding: .8rem;
    max-width: 230px;
    min-height: 205px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.file__preview > div img{
    width: 100%;
}
.file__preview > div span{
    background: var(--color-secondary);
    color: var(--color-background-light);
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 10px;
}
.file__preview > div .delete__button{
    position: absolute;
    top: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-secondary);
    border: 1px solid var(--color-secondary);
    cursor: pointer;
    padding: 2px;
}
.file__preview > div .delete__button:hover{
    background: var(--color-primary);
}
.file__preview > div .delete__button::after{
    content: '';
    position: absolute;
    left: 3px;
    width: calc(100% - 5px);
    height: 1px;
    background: var(--color-background-light);
    transform: rotate(45deg);
}
.file__preview > div .delete__button::before{
    content: '';
    position: absolute;
    right: 2px;
    width: calc(100% - 5px);
    height: 1px;
    background: var(--color-background-light);
    transform: rotate(-45deg);
}
/* Icon */
.icon__single{
    padding: calc(var(--padding-icon) - 7px);
    height: 40px;
    cursor: pointer;
    position: relative;
}
.icon__single:hover{
    border-color: var(--color-primary);
}
.icon__single.dropdown:hover::after{
    border-color: var(--color-primary);
}
.icon__single img,
.icon__single svg,
.icon__single svg path{
    height: 100%;
    /* stroke: var(--color-icon); */
    fill: var(--color-secondary);
}
.icon__single:hover svg path{
fill: var(--color-primary) !important;
}
.icon__single.circle{
    border-radius: 50%;
}
/* Dropdown */
.dropdown{
    position: relative;
}
.dropdown > span{
    position: relative;
}
.dropdown > span::after{
    content: '';
    position: absolute;
    top: calc(50% - 5px);
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    cursor: pointer;
    background: var(--color-primary);
}
.dropdown > span::before{
    content: '';
    position: absolute;
    top: calc(50% - 13px);
    width: 11px;
    height: 11px;
    cursor: pointer;
    background: #fff;
    z-index: 2;
}
.dropdown.no__icon{
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.dropdown.no__icon::after,
.dropdown.no__icon::before{
    display: none;
}
.dropdown .dropdown__inner{
    position: absolute;
    top: calc(100% + 10px);
    background: var(--color-background-light);
    border-radius: 5px;
    padding: 10px 20px;
    box-shadow: var(--box-shadow);
    display: none;
    transition: opacity 0.3s ease;
    z-index: 9999;
    width: max-content;
}
.dropdown.dropdown__right.no__icon .dropdown__inner{
    right: 0 !important;
}
.dropdown .dropdown__inner.show {
    display: block;
    opacity: 1;
}
.dropdown .dropdown__inner ul{
    display: flex;
    flex-direction: column;
}
.dropdown .dropdown__inner ul li{
    padding: .3rem 0;
    color: var(--color-secondary);
    font-family: var(--font-family-text);
    font-size: var(--font-size-text);
}
.dropdown .dropdown__inner ul li a{
    color: var(--color-secondary);
}
.dropdown .dropdown__inner ul li a:hover,
.dropdown .dropdown__inner ul li:hover{
    color: var(--color-primary);
}
.dropdown.dropdown__right{
    margin-right: 15px;
}
.dropdown.dropdown__left{
    margin-left: 15px;
}
.dropdown.dropdown__right > span::after,
.dropdown.dropdown__right > span::before,
.dropdown.dropdown__right .dropdown__inner{
    right: -15px;
}
.dropdown.dropdown__right::before{
    right: -17px;
}
.dropdown.dropdown__left::after,
.dropdown.dropdown__left .dropdown__inner{
    left: 0;
}
.dropdown.dropdown__top_left::after,
.dropdown.dropdown__top_left .dropdown__inner{
    left: 0;
    bottom: calc(100% + 10px);
    top: inherit;
}
.dropdown.dropdown__top_right::after,
.dropdown.dropdown__top_right .dropdown__inner{
    right: 0;
    bottom: calc(100% + 10px);
    top: inherit;
}
.dropdown.dropdown__megamenu{
    position: inherit;
}
.dropdown.dropdown__megamenu  .dropdown__inner{
    width:  100%;
    top: 135px;
    left: 0;
    max-height: 445px;
    min-height: 445px;
}
.dropdown.dropdown__megamenu .container{
    padding: 0;
    padding: 20px 0;
}
.dropdown.dropdown__megamenu  .dropdown__inner ul{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}
/* Images */
.image__desktop {
    height: 100%;
    width: 100%;
}
.image__desktop img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Announcement */
.announcement{
    background: var(--color-secondary);
    padding: .8rem 0;
    text-align: center;
    color: var(--color-text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.announcement .announcement__content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.announcement .announcement__content p,
.announcement .announcement__content p > b{
    color: inherit;
    font-size: calc(var(--font-size-text) + 2px);
}
.announcement .announcement__content .search{
    width:  25%;
    background: #fff;
    border-radius: var(--border-radius);
}
.announcement .announcement__content .search .input__inner{
    height: 35px;
}
.announcement .announcement__content .social__media {
    width:  25%;
    gap: 0;
}
.announcement .announcement__content .social__media a,
.announcement .announcement__content .social__media .dropdown{
    background: inherit;
}
.announcement .announcement__content .social__media a svg path,
.announcement .announcement__content .social__media .dropdown svg path{
    fill: #444544;
}
.announcement .announcement__content .social__media a:hover svg path,
.announcement .announcement__content .social__media .dropdown:hover svg path{
    fill: var(--color-primary);
}
/* Short text */
.short__text{
    padding: .4rem 0;
}
.short__text,
.short__text span{
    display: flex;
    align-items: center;
    font-size: calc(var(--font-size-text) - 3px);
    align-items: center;
    gap: 2px;
}
.short__text span{
    min-width: max-content;
}
.short__text > svg{
    width: 12px;
}
.short__text > svg g{
    stroke: var(--color-icon);
}
/* Navbar */
.navbar{
    padding: var(--padding-section);
    border-bottom: 1px solid var(--color-border);
}
.navbar__overlayed{
    display: none;
}
.navbar .navbar__inner .logo,
.navbar .navbar__inner .navbar__options{
    width: 20%;
}
.navbar .navbar__inner #navbar{
    width: 80%;
}
.navbar .navbar__inner .navbar__item a,
.navbar .navbar__inner .navbar__item span{
    color: var(--color-secondary);
    font-weight: bold;
    font-size: calc(var(--font-size-text) + 1px);
}
.navbar .navbar__inner .navbar__item:hover > a,
.navbar .navbar__inner .navbar__item:hover > span{
    color: var(--color-primary);
}
.navbar .navbar__inner .navbar__item.active > a,
.navbar .navbar__inner .navbar__item.active > span{
    position: relative;
    color: var(--color-primary);
    font-weight: bold;
}
.navbar .navbar__inner .navbar__options{
    gap: calc(var(--gap) - 20px);
}
.navbar .navbar__inner ul .input__group{
    display: none;
}
.navbar .navbar__inner ul .logo{
    display: none;
}
/*Caorusel*/
.carousel {
    position: relative;
}
.carousel .container{
    position: relative;
    overflow: hidden;
}
.carousel .carousel__inner{
    /* height: 78vh; */
    width: 100%;
    overflow: hidden;
}
.carousel .carousel__content{
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.carousel .carousel__content h2{
    text-transform: uppercase;
    font-size: clamp(13px, 2vw, 23px);
    color: var(--color-background-light);
}
.carousel .carousel__content h1{
    font-size: clamp(15px, 6vw, 75px);
    color: transparent;
    -webkit-text-stroke: 1px var(--color-background-light);
    text-transform: uppercase;
    text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px var(--color-primary),
    0 0 20px var(--color-primary),
    0 0 25px var(--color-primary),
    0 0 30px var(--color-primary),
    0 0 35px var(--color-primary),
    0 0 40px var(--color-primary);
    position: relative;
}
.carousel .carousel__content h1::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    z-index: -1;
    filter: blur(10px);
}
.carousel .carousel__content span{

    color: rgb(8, 200, 210);
    font-size: clamp(15px, 5vw, 30px);
}
/*Swiper*/
.swiper-slide{
    position: relative;
}
.carousel .swiper-button-next{
    right: 30px;
}
.carousel .swiper-button-prev{
    left: 30px;
}
.carousel .swiper-button-next:after,
.carousel .swiper-button-prev:after{
    content: '';
}
/* .swiper-pagination{
    bottom: -20px !important;
} */
.swiper-pagination .swiper-pagination-bullet{
    width: 17px;
    height: 5px;
    border-radius: 2px;
}
.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: var(--color-primary);
}
/*Icon arrow*/
.circle__content{
    min-height: 45px;
    background: var(--color-background-light);
    min-width: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow);
}
.circle__content svg{
    width: 25px;
}
.circle__content svg g{
    stroke: var(--color-secondary);
}
.circle__content:hover svg g{
    stroke: var(--color-primary);
}
/* .circle__content:hover .icon__arrow::after,
.circle__content:hover .icon__arrow.right::after{
    background: var(--color-primary);
}
.circle__content:hover .icon__arrow.right:before,
.circle__content:hover .icon__arrow.left:before{
    border-color: var(--color-primary);

}
.icon__arrow{
    position: relative;
    box-shadow: var(--box-shadow);
    width: 45px;
}
.icon__arrow::after{
    content: '';
    position: absolute;
    width: calc(100% - 25px);
    height: 0.05rem;
    left: 13px;
    background: var(--color-icon-light);
}
.icon__arrow.right::before{
    content: '';
    position: absolute;
    width: 10px;
    top: -5px;
    height: 10px;
    right: 12px;
    transform: rotate(45deg);
    border-top: 0.12rem solid var(--color-icon-light);
    border-right: 0.12rem solid var(--color-icon-light);
}
.icon__arrow.left::before{
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    top: -5px;
    left: 14px;
    transform: rotate(45deg);
    border-bottom: 0.12rem solid var(--color-icon-light);
    border-left: 0.12rem solid var(--color-icon-light);
} */
/*Icon arrow, Icon chevron*/
.icon__chevron{
    width: 7px;
    height: 7px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon__chevron div{
    width: 100%;
    height: 100%;
    border-top: 1px solid var(--color-secondary);
    border-right: 1px solid var(--color-secondary);
    transition: all .5s ease;
}
.icon__chevron.right{
    transform: rotate(45deg);
    margin-left: -2px;
}
.icon__chevron.left{
    transform: rotate(-130deg);
    margin-right: -3px;
}
.icon__chevron.down{
    transform: rotate(130deg);
    margin-top: -2px;
}
/* Carousel categories*/
.carousel__categories{
    padding: var(--padding-section);
    margin: auto;
    position: relative;

}
.carousel__categories .container{
    overflow: hidden;
    position: relative;
    padding:  0 45px;
}
.carousel__categories .carousel__categories_inner {
    position: relative;
    overflow: hidden;
}
.carousel__categories .carousel__categories_inner .swiper-slide span{
    font-size: calc( var(--font-size-text) - 2px);
}
.carousel__categories .carousel__categories_button_next{
    right: -10px;
}
.carousel__categories .carousel__categories_button_prev{
    left: -10px;
}
.carousel__categories  .carousel__categories_button_prev,
.carousel__categories  .carousel__categories_button_next{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 30px;
    height: 30px;
    background: var(--color-border);
    z-index: 999;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.carousel__categories  .carousel__categories_button_prev{
    left: 10px;
}
.carousel__categories  .carousel__categories_button_next{
    right: 10px;
}
.carousel__categories  .carousel__categories_button_prev:hover .icon__chevron div,
.carousel__categories  .carousel__categories_button_next:hover .icon__chevron div{
    border-color: var(--color-primary);
}
.category__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 5px;
    border-radius: 10px;
    cursor: pointer;
    min-height: 75px;
    min-width: 105px;
}
.category__item.active{
    background: var(--color-border);
}
.category__item.active svg g{
    stroke: var(--color-primary);
    fill: var(--color-primary);
}
.category__item.active span{
    color: var(--color-primary);
}
.category__item svg{
    width: 30px;
}
.category__item svg g{
    fill: var(--color-icon);
}
/* Section title */
.section__title{
    padding: 10px 0;
}
.section__title h2{
    font-size: calc( var(--font-size-title) +  10px);
    font-family: var(--font-family-title);
}
.section__title h2 > b{
    color: var(--color-primary);
    font-size: inherit;
    font-weight: bold;
    font-family: var(--font-family-title);
}
.section__title .section__title__options{
    display: flex;
    gap: .9rem;
}
/* Row Content */
.row__content {
    display: grid;
    gap: calc(var(--gap) - 5px);
    flex-wrap: wrap;
}
.row__content[data-rows="5"] {
    grid-template-columns: repeat(5, 1fr);
}
.row__content[data-rows="4"] {
    grid-template-columns: repeat(4, 1fr);
}
.row__content[data-rows="3"] {
    grid-template-columns: repeat(3, 1fr);
}
.row__content[data-rows="2"] {
    grid-template-columns: repeat(2, 1fr);
}
/* Card */
.card{
    position: relative;
    padding-bottom: 35px;
    min-height: 335px;
}
.card .card__head .card__image{
    border: 1px solid #dadbdb;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 15px;
}
.card .card__head .card__image img{
    cursor: pointer;
    width: calc(100% - 15px);
    max-width: 400px;
    object-fit: cover;
}
.card .card__body h2,
.card .card__body a{
    font-size: var(--font-size-subttile);
    font-family: var(--font-family-text);
    font-weight: 400;
    color: #000;
}
.card .card__body h2 > b{
    font-weight: bold;
    font-family: var(--font-family-title);
    font-size: var(--font-size-subttile);
}
.card .card__body{
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.card .card__body .price{
    display: block;
    font-family: var(--font-family-title);
    color: #000;
    font-size: var(--font-size-subttile);
}
.card .card__body .price.active{
    color: var(--color-primary);
}
.card .card__body .scale_prices{
    padding: 0 10px;
}
.alert__success_card{
    background: #69e069;
    border: 1px solid green;
    text-align: center;
    color: #fff;
    padding: 7px;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100% - 20px);
    font-family: var(--font-family-text);
    font-size: 11px;
    color: #000;
    transition: all .1s ease;
}
.alert__error_card{
    background: rgb(222, 101, 101);
    border: 1px solid red;
    text-align: center;
    color: #fff;
    padding: 7px;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    margin: auto;
    width: calc(100% - 20px);
    font-family: var(--font-family-text);
    font-size: 11px;
    color: #000;
}
.scale_prices{
    display: flex;
    justify-content: center;
    gap: 5px;
}
.scale_prices .scale_prices__inner{
    width: calc(85% - 5px);
}
.scale_prices .scale_prices__inner .scale_prices__inner_head{
    background: var(--color-secondary);
    text-align: center;
    padding: 5px;
}
.scale_prices .scale_prices__inner .scale_prices__inner_head span{
    color: #fff;
}
.scale_prices .scale_prices__inner .scale_prices__inner_content{
    display: flex;
    gap: 5px;
    background: #e2e3e3;
    padding: 10px 0;
}
.scale_prices .scale_prices__inner .scale_prices__inner_content .quantities,
.scale_prices .scale_prices__inner .scale_prices__inner_content .prices{
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 5px;
}
.scale_prices .scale_prices__inner .scale_prices__inner_content .quantities{
    width: 60%;
}
.scale_prices .scale_prices__inner .scale_prices__inner_content .quantities .active,
.scale_prices .scale_prices__inner .scale_prices__inner_content .prices .active{
    background: var(--color-primary);
    position: relative;
    color: #fff;
}
.scale_prices .scale_prices__inner .scale_prices__inner_content .prices .active::after{
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    top: 0;
    left: -20px;
    background: var(--color-primary);
}
.scale_prices .scale_prices__inner .scale_prices__inner_content .prices{
    width: 40%;
    text-align: left;
}
.scale_prices .scale_prices__inner .scale_prices__inner_content .quantities h5,
.scale_prices .scale_prices__inner .scale_prices__inner_content .prices h5{
    color: #5a5b5a;
    font-size: var(--font-size-text);
}
.scale_prices .scale_prices__inner .scale_prices__inner_content .prices h5{
    text-align: left;
}
.scale_prices .scale_prices__inner .scale_prices__inner_content .quantities span,
.scale_prices .scale_prices__inner .scale_prices__inner_content .prices span{
    color: #9e9e9e;
    font-family: var(--font-family-medium);
}
.scale_prices .scale_prices__inner_action{
    width: calc(15% - 5px);
    max-width: 34px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.scale_prices .scale_prices__inner_action .action__cart{
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    cursor: pointer;
    height: 35px;
}
.scale_prices .scale_prices__inner_action .action__cart:hover{
    opacity: .9;
}
.scale_prices .scale_prices__inner_action .action__quantity{
    background: #000;
}
.scale_prices .scale_prices__inner_action .action__quantity .plus,
.scale_prices .scale_prices__inner_action .action__quantity .minus{
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.scale_prices .scale_prices__inner_action .action__quantity .plus:hover,
.scale_prices .scale_prices__inner_action .action__quantity .minus:hover{
    opacity: .6;
}
.scale_prices .scale_prices__inner_action .action__quantity .plus div:first-child,
.scale_prices .scale_prices__inner_action .action__quantity .minus div:first-child{
    height: 10px;
    width: 2px;
    background: var(--color-primary);
    transform: rotate(90deg);
    position: absolute;
}
.scale_prices .scale_prices__inner_action .action__quantity .plus div:last-child{
    height: 10px;
    width: 2px;
    background: var(--color-primary);
}
.scale_prices .scale_prices__inner_action .action__quantity input{
    background: #fff;
    width: calc(100% - 4px);
    margin-left: 2px;
    height: 30px;
    text-align: center;
}
/* Badge */
.badge{
    color: var(--color-background-light);
    width: max-content;
    padding: .2rem .5rem;
    border-radius: 3px;
    position: absolute;
    top: 7px;
    right: 7px;
}
.badge.hot_sale{
    background: #e40202;
}
.badge.new_sale{
    background: rgb(1, 178, 1);
}
.badge span{
    color: var(--color-background-light);
    font-size: calc(var(--font-size-text) - 2px);
}
.badge.badge__logo{
    top: 15px;
    left: 15px;
}
.badge.badge__logo img{
    width: 15%;
    min-width: 100px;
    object-fit: cover;
}
/* CTA */
.cta .cta__inner{
    background-image: url('../multimedia/background_cta.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: var(--border-radius);
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    position: relative;
    margin-top: 2rem;
    z-index: 2;
}
.cta .cta__inner .cta__content{
    max-width: 458px;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.cta .cta__inner .cta__content h1{
    font-size: calc(var(--font-size-title) + 12px);
    color: var(--color-background-light);
    font-weight: 400;
    font-family: var(--font-family-title);
}
.cta .cta__inner .cta__content p{
    font-size: calc(var(--font-size-text) + 2px);
    color: var(--color-background-light);
    line-height: calc(var(--font-size-text) + 15px);
    opacity: .8;
}
.cta .cta__inner .cta__image{
    max-width: 270px;
    position: absolute;
    right: 100px;
    bottom: 0;
}
.cta .cta__inner .cta__image img{
    width: 100%;
    margin-left: auto;
}
/* Overlayed */
.overlayed{
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    position: absolute;
    left: 0;
}
.overlayed .overlayed__bordered{
    border-radius: var(--border-radius);
    opacity: .85;
    z-index: -1;
}
/* Footer */
.footer{
    background: var(--color-secondary);
    padding: 3rem 0;
}
.footer .footer__inner{
    display: flex;
    gap: calc(var(--gap) + 10px);
    justify-content: space-between;
}
.footer .footer__inner li{
    gap: 15px;
}
.footer .footer__inner li:nth-child(2) svg path,
.footer .footer__inner li:nth-child(3) svg path{
    fill: #fff;
}
.footer .footer__inner .footer__row{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}
.footer .footer__inner .footer__row .title{
    font-size: calc(var(--font-size-title) + 5px);
    font-family: var(--font-family-text);
}
.footer .footer__inner .footer__row ul{
    margin-top: -2px;
}
.footer .footer__inner .footer__row ul li a:hover{
    color: var(--color-primary);
}
.footer .footer__inner .footer__row .logo h2{
    font-size: calc(var(--font-size-title) + 10px);
}
.footer .footer__inner .footer__row h2{
    color: var(--color-background-light);
    line-height: 45px;
    font-size: calc(var(--font-size-title) - 5px);
    position: relative;
    width: max-content;
}
.footer .footer__inner .footer__row:nth-child(1){
    width: 30%;
}
.footer .footer__inner .footer__row:nth-child(2){
    width: 12.5%;
}
.footer .footer__inner .footer__row:nth-child(3){
    width: 12.5%;
}
.footer .footer__inner .footer__row:nth-child(4){
    width: 15%;
}
.footer .footer__inner .footer__row:nth-child(5){
    width: 25%;
}
.footer .footer__social_width_logo{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.footer .footer__social_width_logo .social__media > a,
.footer .footer__social_width_logo .social__media > .dropdown {
    background: inherit;
    width: 40px;
    height: 40px;
}
.footer .footer__social_width_logo .social__media > .dropdown svg{
    fill: var(--color-primary);
}
/* title underline */
.title__underline::after{
    content: '';
    position: absolute;
    bottom: 2px;
    height: 2px;
    width: 35%;
    background: #0c7ccc;
    left: 0;
}
.title__underline::before{
    content: '';
    position: absolute;
    bottom: 2px;
    height: 2px;
    width: 35%;
    background: var(--color-primary);
    left: 35%;
}
/* Social media */
.social__media{
    display: flex;
    gap: 15px;
}
.social__media > a,
.social__media > .dropdown{
    width: 30px;
    height: 30px;
    padding: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #262627;
    border-radius: 50%;
    cursor: pointer;
}
.social__media a:hover svg g{
    fill: var(--color-primary);
}
.social__media a svg g{
    fill: var(--color-background-light);
}
.social__media.social__media_white a{
    background: var(--color-background-light);
}
.social__media.social__media_white a svg g{
    fill: var(--color-background-dark);
}
.social__media.social__media_border_secondary a{
    background: transparent;
    border: 1px solid var(--color-secondary);
}
.social__media.social__media_border_secondary a svg g{
    fill: var(--color-secondary);
}
/* Copyright*/
.copyright{
    background: var(--color-primary);
    padding: .5rem 0;
    text-align: center;
}
.copyright p{
    color: var(--color-background-light);
}
.copyright p > b{
    font-size: var(--font-family-text);
    color: var(--color-background-light);
    text-transform: uppercase;
}
/* Breadcrumb */
.breadcrumb .breadcrumb__inner{
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 2rem 0 1rem 0;
}
.breadcrumb .breadcrumb__inner a:hover{
    cursor: pointer;
    color: var(--color-primary);
}
.breadcrumb .breadcrumb__inner b{
    font-size: var(--font-size-text);
}
.breadcrumb .breadcrumb__inner a{
    min-width: max-content;
}
/* Options */
.option{
    display: flex;
    border: 1px solid var(--color-border);
    padding: .6rem 1rem;
    border-radius: var(--border-radius);
    gap: .3rem;
    cursor: pointer;
    width: max-content;
}
.option:hover{
    border-color: var(--color-primary);
}
.option span {
    font-family: var(--font-family-medium);
    color: #000;
    cursor: pointer;
}
.option span:hover{
    color: var(--color-primary);
}
.option span > b{
    font-size: var(--font-size-text);
}
.option svg{
    width: 15px;
}
.option svg g{
    fill: var(--color-title);
}
/* Filters */
.filters{
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--border-radius) - 15px);
    min-width: 300px;
}
.filters .filters__inner{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.filters .filters__inner .filters__head{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.filters .filters__inner .filters__head h3{
    font-size: calc(var(--font-size-subttile) + 3px);
}
/* Link */
.link{
    color: var(--color-primary);
    text-decoration: underline;
    font-size: var(--font-size-text);
    font-family: var(--font-family-medium);
}
/* Accordeon */
.accordion .accordion__head{
    padding: .5rem 0;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
}
.accordion.show.accordion__background_primary .accordion__head,
.accordion.accordion__background_primary .accordion__head{
    background: var(--color-primary);
    padding: 1rem 1rem;
    border-radius: 10px;
}
.accordion.accordion__background_primary .accordion__head{
    background: var(--color-border);
}
.accordion.show.accordion__background_primary .accordion__head h3{
    color: var(--color-background-light);
    font-weight: 400;
}
.accordion.show.accordion__background_primary .accordion__head .icon__plus_minus div{
    background: var(--color-background-light) !important;
}
.accordion .accordion__head .icon__plus_minus{
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.accordion.show .accordion__head .icon__plus_minus div:nth-child(1){
    /* Minus */
    width: 100%;
    height: 2px;
    background: var(--color-secondary);
}
.accordion.show .accordion__head .icon__plus_minus div:nth-child(2){
    /* Minus */
    width: 100%;
    height: 2px;
    background: var(--color-secondary);
    transform: rotate(0deg);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transition: all .5s ease;
}
.accordion .accordion__head .icon__plus_minus div:nth-child(1){
    /* Minus */
    width: 100%;
    height: 2px;
    background: var(--color-secondary);
}
.accordion .accordion__head .icon__plus_minus div:nth-child(2){
    /* Plus */
    width: calc(100%);
    height: 2px;
    background: var(--color-secondary);
    transform: rotate(90deg);
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    transition: all .5s ease;
}
.accordion .accordion__head h3{
    font-size: calc(var(--font-size-subttile) - 2px);
    font-family: var(--font-family-medium);
    font-weight: 400;
}
.accordion .accordion__inner{
    padding: .5rem 0;
}
.accordion .accordion__inner ul{
    display: flex;
    flex-direction: column;
}
.accordion .accordion__inner ul {
    gap: 0;
}
.accordion .accordion__inner ul li{
    padding: .4rem 1.5rem;
    font-family: var(--font-family-medium);
    font-size: var(--font-size-text);
    color: var(--color-secondary);
    cursor: pointer;
}
.accordion .accordion__inner ul li:hover{
    color: var(--color-primary);
}
.accordion .accordion__inner > .accordion .accordion__head{
    padding: .7rem .3rem;
}
.accordion .accordion__inner > .accordion .accordion__head h3{
    font-size: var(--font-size-text);
    color: var(--color-title);
    font-family: var(--font-family-medium);
    font-weight: 400;
}
.accordion .accordion__inner > .accordion.show .accordion__head .icon__chevron div{
    transform: rotate(90deg);
    transition: all .5s ease;
}
/* Range price */
.price__range {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: .3rem;
}
.price__range span{
    font-size: calc(var(--font-size-text) - 2px);
    margin-top: -6px;
}
.price__range label{
    font-family: var(--font-family-medium);
    margin-bottom: -5px;
}
/* Input range */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    background: var(--color-border);
    border-radius: 5px;
    outline: none;
    opacity: 0.9;
    transition: opacity .2s;
    padding: 0;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--color-primary);
    cursor: pointer;
    border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
}
input[type="range"]::-ms-thumb {
    width: 24px;
    height: 24px;
    background: #4CAF50;
    cursor: pointer;
    border-radius: 50%;
}
input[type="range"]:focus {
    opacity: 1;
}
#price-value {
    font-size: 16px;
}
/* Banner */
.banner{
    width: 100%;
}
.banner img{
    width: 100%;
    object-fit: cover;
}
/* .banner .banner__inner .banner__desktop{
    height: 700px;
} */
/* Auth */
.auth{
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    background-image: url("../multimedia/auth-banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.auth .auth__overlayed {
    padding: 1rem;
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    display: flex;
    box-shadow: 0px 0px 3px rgba(255, 255, 255, .1);
}
.auth .auth__inner{
    display: flex;
    align-items: center;
    height: 100%;
    background-image: url("../multimedia/auth-banner.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--border-radius);
}
.auth .auth__inner .auth__overlayed{
    border-radius: var(--border-radius);
}
.auth .auth__inner .auth__aside,
.auth .auth__inner .auth__form{
    width: 50%;
    height: calc(100%);
    display: flex;
    align-items: center;
}
.auth .auth__inner .auth__form{
    background: var(--color-background-light);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 1rem 2rem;
}
.auth .auth__inner .auth__aside{
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 1rem;
}
.auth .auth__inner .auth__aside{
    position: relative;
}
.auth .auth__inner .auth__aside h1{
    font-size: calc(var(--font-size-title) + 15px);
    line-height: calc(var(--font-size-title) + 15px);
    color: var(--color-background-light);
}
.auth .auth__inner .auth__aside p{
    color: var(--color-background-light);
    opacity: .8;
}
.auth .auth__inner .auth__aside .site__name{
    color: var(--color-background-light);
    font-size: var(--font-size-subttile);
    position: absolute;
    bottom: 0;
}
/* Form */
.form{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.form .form__inner{
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.form .form__inner.row{
    flex-direction: row;
}
/* Table */
table{
    border-collapse: collapse;
    user-select: none;
    width: 100%;
    min-width: 675px;
}
table thead{
    border-bottom: 1px solid var(--color-border);
}
table thead th{
    font-size: var(--font-size-text);
    font-family: var(--font-family-text);
    font-weight: 400;
    text-align: left;
    padding: 1rem 1rem;
}
table thead th:nth-child(1){
    padding-left: 0;
}
table tbody tr{
    border-bottom: 1px solid var(--color-border);
}
table tbody tr th{
    padding: .7rem .8rem;
    text-align: left;
    max-width: 180px;
}
table tbody tr th:first-child{
    padding-left: 0 !important;
}
table tbody tr th:last-child{
    padding-right: 0 !important;
}
.table__inner{
    overflow: auto;
}
.table__background_primary table thead{
    border-color: var(--color-background-light);
}
.table__background_primary table thead th{
    color: var(--color-background-light);
    padding: .5rem .3rem;
    background: var(--color-primary);
}
.table__background_primary table thead th:first-child{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.table__background_primary table thead th:last-child{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.table__background_primary table tbody tr th{
    padding: .6rem .3rem;
}
.table__background_primary table tbody tr th:first-child{
    padding-left: .3rem !important;
}
/* Product short */
.product__short{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}
.product__short .product__short_inner{
    display: flex;
    align-items: center;
    max-width: 335px;
    gap: 10px;
}
.product__short .text__icon{
    min-width: 72px;
}
.product__short .product__image{
    max-height: 140px;
    min-width: 140px;
    max-width: 140px;
}
.product__short .product__image img{
    height: 100%;
    width: 100%;
    border-radius: 10px;
}
.product__short .product__image.image__little{
    max-height: 150px;
    min-width: 150px;
    max-width: 150px;
}
.product__short .product__short_content{
    text-align: left;
}
.product__short .product__short_content h5{
    font-size: var(--font-size-subttile);
}
/* Select */
.custom__select {
    position: relative;
    min-width: max-content;
    width: 100%;
}
.select__selected {
    background-color: transparent;
    border: 1px solid var(--color-border);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: var(--border-radius);
    display: flex;
    gap: .5rem;
    padding: .7rem 1rem;
    font-size: var(--font-size-text);
    font-family: var(--font-family-text);
    font-weight: 400;
    color: var(--color-secondary);
    min-width: 160px;
    min-height: 40px;
}
.select__selected .select__text{
    color: var(--color-secondary);
}
.select__items {
    position: absolute;
    background-color: var(--color-background-light);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    margin-top: 5px;
    width: 100%;
    z-index: 99;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: var(--box-shadow);
    min-width: max-content;
}
.select__hide {
    display: none;
}
.select__item {
    padding: .7rem 1rem;
    gap: .5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.select__item .select__text{
    color: var(--color-secondary);
}
.select__item .select__icon{
    width: 20px;
    height: 20px;
}
.select__item:hover {
    background-color: var(--color-border);
}
.select__selected__active {
    background-color: var(--color-border) !important;
    border-color: var(--color-primary) !important;
}
.custom__select.custom__select_border_secondary .select__selected{
    border-color: var(--color-secondary);
}
/* Quantity */
.quantity{
    display: flex;
    align-items: center;
    gap: .3rem;
}
.quantity.quantity__border_secondary .icon__minus,
.quantity.quantity__border_secondary .icon__plus,
.quantity.quantity__border_secondary .count{
    border-color: var(--color-secondary);
}
/* Icon Minus + plus */
.icon__minus,
.icon__plus,
.icon__count {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: .7rem;
    border: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-sizing: border-box; /* Incluye padding y borde en el cálculo del ancho y alto */
}
.icon__minus:hover,
.icon__plus:hover,
.count:hover {
    border-color: var(--color-primary) !important;
}
.icon__minus div,
.icon__plus div {
    height: 1px;
    width: 100%;
    background: var(--color-secondary);
}
.icon__plus div:nth-child(2) {
    position: absolute;
    left: 0;
    right: 0;
    width: calc(40px - 23px);
    margin: auto;
    height: 1px;
    background: var(--color-secondary);
    transform: rotate(90deg);
}
.count span{
    color: var(--color-secondary);
}
/* Cart */
.cart .cart__inner{
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}
.cart .table{
    width: 70%;
    overflow: auto;
    height: max-content;
}
.cart .table .table__inner{
    min-width: 845px;
}
.cart .table tbody tr th{
    padding: 1.5rem .8rem;
    max-width: inherit;
}
.cart .table .table__inner .custom__select{
    min-width: inherit;
    width: inherit;
}
.cart .table .table__inner .custom__select .quantity{
    min-width: inherit;
    max-width: 100px;
}
.cart .form__inner{
    max-width: 375px;
}
.cart .cart__sidebar{
    border-radius: 0;
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
}
.cart .cart__sidebar > img{
    max-width: 200px;
    margin: auto;
}
/* Summary */
.summary{
    background: var(--color-secondary);
}
.summary .title{
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: calc(var(--font-size-title) + 10px);
}
.summary,
.cart__confidence{
    width: 100%;
    padding: 3rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.summary .summary__item{
    padding: .8rem 0;
    color: #fff;
    border-color: var(--color-primary);
    border-width: 2px;
}
.summary .products{
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 1rem;
}
.summary .products .item{
    display: flex;
    flex-direction: column;
}
.summary .products .item p{
    font-size: var(--font-size-subttile);
    max-width: 60%;
    line-height: 25px;
}
.summary .products .item span{
    color: #fff;
    font-size: var(--font-size-subttile);
    font-family: var(--font-family-title);
}
.summary .btn{
    font-size: var(--font-size-subttile);
    font-family: var(--font-family-title);
}
.summary .btn.btn__white{
    color: var(--color-primary);
}
.summary .shipping__select{
    background: #fefeff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
}
.summary .shipping__select img{
    max-width: 100px;
}
/* Text + icon */
.text__icon{
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: var(--border-radius);
    max-height: 40px;
    gap: 10px;
}
.text__icon:hover{
    border-color: var(--color-primary);
}
.text__icon:hover span{
    color: var(--color-primary);
}
.text__icon:hover svg{
    fill: var(--color-primary);
}
.text__icon svg{
    width: 20px;
}
.text__icon svg g{
    stroke: var(--color-secondary);
}
.text__icon span{
    color: var(--color-secondary);
}
.text__icon.color__primary{
    gap: 5px;
}
.text__icon.color__primary span{
    color: var(--color-primary);
}
.text__icon.color__primary svg {
    width: 14px;
}
.text__icon.color__primary svg g{
    fill: var(--color-primary);
    stroke: var(--color-primary);
}
/* Checkout */
.checkout .checkout__inner{
    display: flex;
    gap: 1.5rem;
}
.checkout .checkout__inner .form{
    width: 60%;
}
.checkout .checkout__inner .checkout__sidebar{
    width: 40%;
}
/* Product */
.product{

}
.product .product__inner{
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.product .product__inner .product__content{
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.product .product__inner .product__content .badge.badge__logo img{
    width: 20%;
}
.product .product__inner .product__content .card .card__head .card__image{
    border: inherit;
}
.product .product__inner .product__content .carousel .carousel__inner{
}
.product .product__inner .product__content .carousel .carousel__inner .swiper-slide{
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.product .product__inner .product__description{
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.product .product__inner .product__description{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.product .product__inner .product__description ul{
    gap: 1rem;
    max-width: 50%;
}
.product .product__inner .product__description ul li svg g{
    fill: inherit;
    stroke: var(--color-secondary);
}
.product .product__inner .product__aside{
    width: 30%;
    height: max-content;
    min-width: 320px;
    background: #eeefef;
    padding: 80px 20px;
}
.product .product__inner .product__aside .product__aside_inner{
    padding: .8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}
.product .product__inner .product__aside .card .card__title{
    padding: 30px 20px;
}
.product .product__inner .product__aside .card .card__title > h2{
    max-width: 250px;
    /* word-break: normal !important; */
}
.product .product__inner .product__aside .card .card__title > h2,
.product .product__inner .product__aside .card .card__title > h2 > b,
.product .product__inner .product__aside .card .card__title > span{
    font-size: 30px;
    text-align: left;
}
.product .product__inner .product__aside .card .card__title .card__sutitle{
    margin-top: 20px;
}
.product .product__inner .product__aside .card .card__title .card__sutitle h3,
.product .product__inner .product__aside .card .card__title .card__sutitle h3 > b{
    font-size: 18px;
}
.product .product__inner .product__aside .card .card__title .card__sutitle h3 > b{
    font-family: var(--font-family-title);
    color: var(--color-secondary);
}
.product .product__inner .product__aside .card .card__title .card__sutitle h3{
    color: var(--color-primary);
    font-weight: 400;
    font-family: var(--font-family-text);
}
.product .product__inner .product__aside .card__body > span,
.product .product__inner .product__aside .card__body > a{
    display: none;
}
/* Product description */
.product__description{
    background: var(--color-secondary);
    padding: 50px 0;
}
.product__description .product__description_inner{
    display: flex;
}
.product__description .product__description_aside{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.product__description .product__description_aside h5{
    font-size: 15px;
    color: #fff;
}
.product__description .product__description_aside p{
    color: #adadad;
    line-height: 18px;
    font-size: 14px;
    text-align: justify;
}
.product__description .product__description_options{
    width: 50%;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.product__description .product__description_options .product__description_options_inner{
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.product__description .product__description_options span{
    color: #fff;
    font-family: var(--font-family-medium);
}
.product__description .product__description_options .social__media{
    gap: 0;
}
.product__description .product__description_options .social__media > a,
.product__description .product__description_options .social__media > .dropdown{
    background: inherit;
    height: 35px;
    width: 35px;
}
.product__description .product__description_options .social__media > .dropdown svg{
    fill: var(--color-primary);
}
.product__description .product__description_options .text__icon{
    margin-bottom: 10px;
}
.product__description .product__description_options .text__icon:hover,
.product__description .product__description_options .add__favorites:hover{
    color: var(--color-primary);
}
.stars{
    display: flex;
}
.stars svg{
    fill: var(--color-primary);
    max-width: 25px;
}
/* Product price */
.product__price{
    display: flex;
    align-items: center;
    gap: 5px;
}
.product__price .before__price{
    display: flex;
    gap:5px;
}
.product__price .after__price{
    font-size: calc(var(--font-size-title) + 2px);
}
.product__price .before__price span{
    font-size: calc(var(--font-size-text) - 1px);
    text-decoration: line-through;
}
.product__price .before__price b{
    font-size: calc(var(--font-size-text) - 1px);
}
/* Video */
.video__container {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.video__element {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.video__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url('../multimedia/product_10.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 1;
    transition: opacity 0.3s ease;
    gap: 10px;
}
.video__overlay::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
    z-index: 1;
}
.video__overlay p{
    color: var(--color-background-light);
    z-index: 2;
}
.play__button {
    background-color: var(--color-background-light);
    border: none;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    outline: none;
    transition: background-color 0.3s ease;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.play__button span{
    font-size: 45px;
    color: var(--color-secondary);
    margin-left: 7px;
}
.play__button:hover span{
    color: var(--color-primary);
}
/* Tags */
.tags{
    display: flex;
    gap: .7rem;
    flex-wrap: wrap;
}
.tags .tag{
    cursor: pointer;
    font-size: var(--font-size-text);
    border: 1px solid var(--color-border);
    padding: .3rem .7rem;
    border-radius: var(--border-radius);
    color: var(--color-text);
    font-family: var(--font-family-text);
}
.tags .tag:hover{
    border-color: var(--color-primary);
    color: var(--color-primary);
}
/* Dashboard User */
.dashboard__icon{
    border: 1px solid var(--color-secondary);
    width: 30px;
    height: 30px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    padding: .2rem;
    background: var(--color-primary);
    cursor: pointer;
    display: none;
}
.dashboard__icon svg g{
    stroke: var(--color-secondary);
    width: 25px;
}
.dashboard__icon:hover svg g{
    stroke: var(--color-background-light);
}
.dashboard__user{
    position: relative;
    padding: 40px 0;
}
.dashboard__user .dashboard__user_inner{
    display: flex;
    gap: 1rem;
}
.dashboard__user .dashboard__user_inner .navbar__aside{
    width: 25%;
}
.dashboard__user .dashboard__user_inner .form{
    width: calc(75% - 1rem);
    padding: 2rem 0;
    padding-right: 1rem;
    gap: 1rem;
    margin-left: auto;
}
/* Navbar Aside */
.navbar__aside{
    background: var(--color-primary);
    border-radius: 5px;
    width: 100%;
}
.navbar__aside ul{
    gap: .1rem;
    padding: 1.5rem 0;
}
.navbar__aside ul li{
    width: 100%;
    padding: .4rem 1rem;
    position: relative;
}
.navbar__aside ul li button{
    background: inherit;
}
.navbar__aside ul li a,
.navbar__aside ul li button{
    display: flex;
    gap: 5px;
    align-items: center;
    color: var(--color-background-light);
    padding: .5rem 1rem;
}
.navbar__aside ul li a svg,
.navbar__aside ul li button svg{
    width: 18px;
}
.navbar__aside ul li a svg g,
.navbar__aside ul li button svg g{
    fill: var(--color-background-light);
}
.navbar__aside ul li.link__active a {
    background: var(--color-background-light);
    border-radius: 5px;
    width: 100%;
}
.navbar__aside ul li.link__active a,
.navbar__aside ul li:hover a,
.navbar__aside ul li:hover button{
    color: var(--color-secondary);
}
.navbar__aside ul li.link__active a svg g,
.navbar__aside ul li:hover a svg g,
.navbar__aside ul li:hover button svg g{
    fill: var(--color-secondary);
}
.navbar__aside ul li.link__active::after{
    content: '';
    height: calc(100% - .8rem);
    width: 5px;
    background: var(--color-secondary);
    position: absolute;
    top: .4rem;
    right: -5px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
/* Status */
.status{
    display: flex;
    gap: .5rem;
    align-items: center;
}
.status .status__circle{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}
.status .status__circle::after{
    content: '';
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    position: absolute;
    top: -4px;
    left: -4px;
    opacity: .6;
    border-radius: 50%;
}
.status .status__circle.success{
    background: var(--color-success);
}
.status .status__circle.success::after{
    background: rgb(76, 175, 80, .5);
}
.status .status__circle.error{
    background: var(--color-error);
}
.status .status__circle.error::after{
    background: rgb(228, 2, 2, .5);
}
.status .status__circle.pending{
    background: var(--color-pending);
}
.status .status__circle.pending::after{
    background: rgb(192, 192, 3, .5);
}
/* Icon hamburger */
.icon__hamburger{
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    padding: calc(var(--padding-icon) - 2px);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    display: none;
}
.icon__hamburger:hover{
    border-color: var(--color-primary);
}
.icon__hamburger:hover div{
    background: var(--color-primary);
}
.icon__hamburger div{
    width: 100%;
    height: 1px;
    background: var(--color-secondary);
}
.icon__hamburger div:nth-child(2){
    width: 70%;
    margin-left: auto;
}
/* Shop bar */
.shop__bar{
    width: 100%;
    background-image: url('../multimedia/shop__bar_background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin: 30px 0;
}
.shop__bar .shop__bar_overlayed{
    width: 100%;
    height: 100%;
    background: rgba(0 , 0 , 0 , .8);
}
.shop__bar .shop__bar_inner{
    padding-top: 20px;
    padding-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.shop__bar .shop__bar_inner .shop__bar_content{
    display: flex;
    flex-wrap: wrap;
}
.shop__bar .section__title h2{
    font-weight: 400;
    font-family: var(--font-family-text);
}
.shop__bar .shop__bar_inner .shop__bar_item{
    width: calc(100% / 5);
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    justify-content: center;
    padding: 15px;
}
.shop__bar .shop__bar_inner .shop__bar_item svg,
.shop__bar .shop__bar_inner .shop__bar_item img{
    max-width: 60px;
    margin: auto;
}
.shop__bar .shop__bar_inner .shop__bar_item span,
.shop__bar .shop__bar_inner .shop__bar_item span > b{
    color: #fff;
    font-size: 15px;
}
.shop__bar.shop__bar_cart{
    background-image: none;
    background: #eeefee;
    padding: 0rem 0;
}
.shop__bar.shop__bar_cart.m
.shop__bar.shop__bar_cart .shop__bar_inner{
    padding-bottom: 20px;
}
.shop__bar.shop__bar_cart .shop__bar_overlayed{
    background: inherit;
}
.shop__bar.shop__bar_cart .shop__bar_inner .shop__bar_item {
    width: calc(100% / 4);
}
.shop__bar.shop__bar_cart .shop__bar_inner .shop__bar_item svg{
    max-width: 50px;
}
.shop__bar.shop__bar_cart .shop__bar_inner .shop__bar_item b{
    font-size: var(--font-size-subttile);
}
.shop__bar.shop__bar_cart .shop__bar_inner .shop__bar_item p{
    font-size: 13px;
}
.shop__bar.shop__bar_cart .shop__bar_inner .shop__bar_item p{
    max-width: 200px;
    margin: auto;
}
.shop__bar.shop__bar_cart .shop__bar_inner .shop__bar_content{
    align-items: flex-start;
}
.cart+.shop__bar.shop__bar_cart{
    width: 100%;
    margin-bottom: 0;
}

/*== Moon shop ==*/
.moon__shop{
    padding: 30px 0;
    position: relative;
}
.moon__shop .moon__shop{
    display: flex;
    justify-content: center;
    align-items: center;
}
.moon__shop .moon__shop .moon__shop_title{
    padding: 10px 20px;
    border: 1px solid #000;
    min-width: 280px;
    position: absolute;
    top: 100px;
    left: 32%;
    transform: translate(-50% , 0);
    border-right: 0;
    border-radius: 5px;
}
.moon__shop .moon__shop .moon__shop_title h2{
    font-weight: 300;
}
.moon__shop .moon__shop .moon__shop_title h2,
.moon__shop .moon__shop .moon__shop_title h2 > b{
    font-size: 35px;
    font-family: var(--font-family-text);
}
.moon__shop .moon__shop img{
    z-index: 2;
}
.moon__shop .moon__shop .moon__shop_cta{
    background: #000;
    padding: 10px 30px;
    padding-left: 40px;
    margin-left: -25px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.moon__shop .moon__shop .moon__shop_cta:hover{
    opacity: .8;
}
.moon__shop .moon__shop .moon__shop_cta a{
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    position: relative;
    display: block;
}
.moon__shop .moon__shop .moon__shop_cta a::before{
    content: '';
    position: absolute;
    right: -20px;
    width: 7px;
    height: 7px;
    top: 6px;
    border-top: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
    transform: rotate(45deg);
}
/*== newsletter ==*/
.newsletter{
    background: var(--color-primary);
    padding: 50px 0;
}
.newsletter .newsletter__inner{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}
.newsletter .section__title{
    max-width: 500px;
}
.newsletter .section__title h2{
    font-family: var(--font-family-text);
    font-weight: 300;
    font-size: 25px;
}
.newsletter form{
    max-width: 500px;
    width: 100%;
}
.newsletter .input__group .input__inner{
    border-radius: 0;
    border-width: 2px;
    height: 55px;
}
.newsletter .input__group .input__inner input::placeholder{
    color: #fff;
}
.newsletter .input__group .input__inner:focus-within{
    border-color: var(--color-secondary);
}
/* .newsletter .input__group .input__inner:focus-within .icon{
    background: var(--color-secondary);
} */
.newsletter .input__group .input__inner:focus-within input::placeholder{
    color: var(--color-secondary);
}
.newsletter .input__group .input__inner .icon{
    background: #fff;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 7px;
    cursor: pointer;
}
.newsletter .input__group .input__inner .icon:hover svg path{
    fill: var(--color-secondary);
}
.newsletter .input__group .input__inner .icon svg path{
    fill: var(--color-primary);
}
/*== Whatssap fixed ==*/
.whatsapp{
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 50%;
    background: rgb(88,193,232);
    background: linear-gradient(90deg, rgba(88,193,232,1) 0%, rgba(88,193,232,1) 19%, rgba(63,148,209,1) 61%);
    z-index: 99;
}
/* .whatsapp:hover{
    opacity: .8;
} */
.whatsapp svg path{
    fill: #fff;
}
/* Help */
.help {
    background: var(--color-secondary);
    padding: 12px 0;
}
.help .help__inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.help .help__inner h3,
.help .help__inner h3 > b{
    color: #fff;
    font-size: var(--font-size-subttile);
    font-family: var(--font-family-text);
    font-weight: 400;
}
.help .help__inner h3 > b{
    font-weight: bold;
}
.help .help__inner a img{
    max-width: 50px;
}
.help .help__inner .input__group{
    max-width: 105px;
}
.help .help__inner .input__group input{
    color: #fff;
}
.help .help__inner  .input__group .input__inner{
    padding: 0 20px;
    border-width: 1px;
}
.help .help__inner  .input__group .input__inner input::placeholder{
    font-family: var(--font-family-title);
}
/* Shipping */
.shipping{
    background: #fff;
}
.shipping .head__shipping{
    background: var(--color-primary);
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 10px;
}
.shipping .head__shipping h3{
    color: #fff;
    letter-spacing: .04em;
}
.shipping .head__shipping svg{
    width: 25px;
}
.shipping .shipping__options{
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}
.shipping .shipping__options .item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    margin: 2px 0;
    background: #eeefef;
}
.shipping .shipping__options .item:hover,
.shipping .shipping__options .item.active{
    background: var(--color-primary);
    cursor: pointer;
}
.shipping .shipping__options .item:hover .icon span,
.shipping .shipping__options .item.active .icon span{
    color: #fff;
}
.shipping .shipping__options .item:hover b,
.shipping .shipping__options .item.active b{
    color: #fff;
}
.shipping .shipping__options .item .icon{
    display: flex;
    flex-direction: column;
    max-width: 135px;
}
.shipping .shipping__options .item .icon span{
    font-size: 11px;
}
.shipping .shipping__options .item .icon img{
    max-width: 105px;
}
/* Tab menu */
.tab__menu .tab__menu_inner{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width:  100%;
    padding: 60px 0;
    gap: 30px;
}
.tab__menu .tab__menu_inner a{
    display: flex;
    gap: 10px;
    width: max-content;
    align-items: center;
    font-size: 20px;
}
.tab__menu .tab__menu_inner a.active{
    color: var(--color-primary);
}
.tab__menu .tab__menu_inner a.active > svg path{
    fill: var(--color-primary);
}
.tab__menu .tab__menu_inner a > svg{
    width: 25px;
}
.tab__menu .tab__menu_inner a > svg path,
.tab__menu .tab__menu_inner a > svg g{
    fill: var(--color-text);
}
.tab__menu .tab__menu_inner .icon__chevron{
    width: 12px;
    height: 12px;
}
.tab__menu .tab__menu_inner  .icon__chevron div {
    border-width: 3px;
    border-color: var(--color-text);
}
.tab__menu .tab__menu_inner .icon__chevron.active div{
    border-color: var(--color-primary);
}
/* Cart */
.cart table thead{
    background: var(--color-primary);
}
.cart table thead th{
    color: #fff;
    text-transform: uppercase;
}
.cart table thead th:nth-child(1){
    padding-left: 1rem;
    text-align: left;
}
.cart table thead th{
    text-align: center;
}
.cart table tbody tr th{
    text-align: center;
}
.cart .product__short .product__image{
    box-shadow: var(--box-shadow);
    margin-left: 5px;
    max-height: 80px;
    min-width: 80px;
    max-width: 80px;
    border: 1px solid var(--color-border);
}
.cart table th.icon svg{
    width: 30px;
    margin: auto;
    display: block;
}
.cart .quantity{
    justify-content: center;
    gap: 0;
}
.cart .quantity .icon__minus{
    border-right: 0;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.cart .quantity .icon__plus{
    border-left: 0;
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
}
.cart .quantity .icon__minus div,
.cart .quantity .icon__plus div{
    background: #fff;
}
.cart .quantity .count{
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    border-left: 0;
    border-right: 0;
    padding: 0;
    min-height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart .quantity .icon__minus,
.cart .quantity .icon__plus,
.cart .quantity .count{
    border-radius: inherit;
}
.cart .text__icon svg{
    width: 30px;
}
.cart .text__icon svg path{
    stroke: var(--color-text);
}
.cart .text__icon:hover svg{
    fill: transparent;
}
.cart .text__icon:hover svg path{
    stroke: var(--color-primary);
    fill: inherit;
}
.cart .table tbody tr th{
    padding: 1rem .8rem;
}
.quantity__with_subtotal{
    display: flex;
    justify-content: space-around;
}
.quantity__with_subtotal .item{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
/* Pages statics */
.pages{
    padding: 2rem 0;
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
/* Register login */
.register__login{
    width: 85%;
    margin: auto;
}
.register__login .register__login_inner{
    display: flex;
    gap: 30px;
}
.register__login .register__login_inner .register,
.register__login .register__login_inner .login{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 50%;
    padding: 20px;
}
.register__login .register__login_inner .register{
    border-right: 2px solid var(--color-border);
    padding-left: 0;
    padding-right: 50px;
}
.register__login .register__login_inner .input__inner{
    border-radius: 0;
    border-width: 2px;
}
.register__login .register__login_inner p > a{
    font-family: var(--font-family-medium);
    text-decoration: underline;
}
.register__login .register__login_inner h2{
    color: var(--color-text);
}
.register__login .register__login_inner .forgot-password,
.register__login .register__login_inner .recovery-password{
    width: 60%;
    margin: auto;
}
/* Header logo */
.header__logo{
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header__logo img{
    max-width: 500px;
}
/* congrants */
.congrants{
    background: #73c4e9;
    padding: 50px 0;
}
.congrants .congrants__inner{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 300px;
}
.congrants h2{
    font-size: 40px;
}
.congrants h3{
    font-size: 35px;
}
.congrants .order{
    background: #fff;
    padding: 20px;
    width: 100%;
    max-width: 450px;
}
.congrants .order span{
    color: var(--color-primary);
    font-size: 40px;
}
.congrants p{
    font-size: 30px;
    width: 100%;
    max-width: 400px;
    line-height: 35px;
    font-family: var(--font-family-text);
}
/* Moon shop page */
.announcement.announcement__moon_shop{
    background: #6ebab1;
    border-bottom: 2px solid var(--color-border);
}
.announcement.announcement__moon_shop .announcement__content .social__media a svg path,
.announcement.announcement__moon_shop .announcement__content .social__media .dropdown svg path{
    fill: #1e2538;
}
.announcement.announcement__moon_shop .announcement__content p a{
    color: #1e2538;
}
.navbar.navbar__moon_shop .navbar__options svg path{
    fill: #1e2538;
}
.articles{
    overflow: hidden;
}
.articles .articles__inner{
    display: flex;
    padding: 30px 0;
}
.articles .articles__inner .article__product{
    position: relative;
}
.articles .articles__inner .article__product{
    width: 50%;
}
.articles .articles__inner .title__1{
    color: #6ebab1;
    font-family: GothamRegular;
    font-weight: 300;
    font-size: 55px;
}
.articles .articles__inner .title__2{
    color: #1c243c;
    font-family: GothamBlack;
    font-size: 55px;
}
.articles .articles__inner p{
    color: #6ebab1;
    font-size: 18px;
    line-height: 25px;
    font-family: GothamRegular;
}
.articles .articles__inner .line__1{
    padding: 20px 0;
    position: relative;
}
.articles .articles__inner .line__1 div:nth-child(1){
    height: 1px;
    width: 500%;
    background: #1c243c;
    position: absolute;
    left: -400%;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1;
}
.articles .articles__inner .line__1 div:nth-child(3){
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #1c243c;
    background: #fff;
    right: 0;
    z-index: 3;
}
.articles .articles__inner .line__1 span{
    color: #1c243c;
    font-size: 15px;
    background: #fff;
    display: block;
    padding: 10px;
    width: max-content;
    z-index: 9;
    position: relative;
    font-family: GothamRegular;
}
.articles .articles__inner .line__2{
    position: absolute;
    width: 250px;
    background: red;
    right: 20px;
    top: 50px;
}
.articles .articles__inner .line__2 div:nth-child(1){
    height: 1px;
    width: 100%;
    background: #1c243c;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 1;
}
.articles .articles__inner .line__2 div:nth-child(2){
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #1c243c;
    background: #fff;
    right: 0;
    z-index: 3;
}
.articles .articles__inner .line__2 div:nth-child(3){
    position: absolute;
    top: calc(50% + 20px);
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #1c243c;
    background: #1c243c;
    right: 0;
    z-index: 3;
}
.articles .articles__inner .line__2 div:nth-child(4){
    position: absolute;
    top: calc(50% + 40px);
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #1c243c;
    background: #1c243c;
    right: 0;
    z-index: 3;
}
.articles .articles__inner .line__2 div:nth-child(5){
    position: absolute;
    top: calc(50% + 60px);
    transform: translate(0, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #1c243c;
    background: #1c243c;
    right: 0;
    z-index: 3;
}
.articles .articles__inner .cta__1{
    color: #6ebab1;
    font-family: GothamRegular;
    font-size: 15px;
}
.articles .articles__inner .cta__2{
    background: #1c243c;
    padding: 10px;
    margin-top: 10px;
    display: block;
    width: max-content;
    color: #fff;
    font-family: GothamRegular;
}
.articles .articles__inner .cta__2:hover{
    background: #6ebab1;
}
.articles .articles__inner .cta__1:hover{
    color: #1c243c;
}
.articles .article__image{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    position: relative;
}
.articles .article__image img{
    z-index: 9;
}
.articles .article__image .image__description{
    position: absolute;
    bottom: 0;
    right: 0;
}
.articles .article__image .image__description div{
    width: 100%;
    height: 2px;
    background: #1c243c;
    margin-top: 5px;
    position: relative;
}
.articles .article__image .image__description div::after{
    content: '';
    position: absolute;
    top: -3px;
    right: -1px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #1c243c;
    border-right: 2px solid #1c243c;
    transform: rotate(45deg);
}
.footer.footer__moon_shop{
    background: #1c243c;
}
.footer.footer__moon_shop .footer__inner li:nth-child(2) svg path{
    fill: #6ebab1;
}
.footer.footer__moon_shop .footer__inner .footer__row:nth-child(2){
    width: 40%;
}
.footer.footer__moon_shop .footer__subscribe h2{
    font-size: 35px;
    max-width: 400px;
    font-family: GothamRegular;
    font-weight: 600;
    letter-spacing: .08em;
}
.footer.footer__moon_shop .footer__subscribe .form__subscribe{
    display: flex;
    padding: 15px 0;
    gap: 10px;
}
.footer.footer__moon_shop .footer__subscribe .form__subscribe input{
    padding: 10px;
    border-bottom: 2px solid #fff;
    color: #fff;
}
.footer.footer__moon_shop .footer__subscribe .form__subscribe.input__error input{
    border-color: var(--color-error);
}
.footer.footer__moon_shop .footer__subscribe .form__subscribe input::placeholder{
    color: #fff;
}
.footer.footer__moon_shop .footer__subscribe .form__subscribe button{
    background: #6ebab1;
    color: #fff;
}
.footer.footer__moon_shop .footer__subscribe .form__subscribe button:hover{
    opacity: .7;
}
.footer.footer__moon_shop .footer__row:nth-child(1){
    position: relative;
}
.footer.footer__moon_shop .footer__row:nth-child(1)::before{
    content: '';
    position: absolute;
    top: -10px;
    right: -80px;
    width: 70px;
    height: 70px;
    background-image: url('../multimedia/moon_shop_footer.png');
    background-size: cover;
    background-repeat: no-repeat;
}

/* Confirmation */
.overlayed__confirmation{
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100vh;
    width: 100%;
    background: rgba(0, 0, 0, .6);
    z-index: 9999;
    cursor: pointer;
}
.confirmation{
    width: 100%;
    max-width: 375px;
    margin: 0 1rem;
    border-radius: var(--border-radius);
    padding: 2rem 1.5rem;
    background: var(--color-background-light);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    text-align: center;
}
.confirmation .confirmation__options{
    display: flex;
    width: 100%;
    gap: 1rem;
}
.confirmation .confirmation__options .btn{
    width: 50%;
}
.confirmation svg{
    max-width: 115px;
}
.confirmation svg path{
    fill: var(--color-primary);
}
/* Notification */
.notification{
    padding: 1rem 0;
    padding-left: 1rem;
    padding-right: 1rem;
}
.notification span{
    color: var(--color-secondary);
}
.notification.success{
    border-left: 5px solid var(--color-success);
    background: rgba(7, 202, 7, .1);
}
/*utils*/
.cart__empty{
    max-width: 435px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: auto;
    text-align: center;
}
.cart__empty a{
    margin: auto;
    min-width: 195px;
}
/* Search results */
.search{
    position: relative;
}
.search__results{
    position: absolute;
    top: calc(100% + 10px);
    background: #fff;
    left: 0;
    z-index: 999;
    border-radius: 5px;
    box-shadow: var(--box-shadow);
    width: 100%;
    max-height: 420px;
    overflow: auto;
}
.search__results .item{
    display: flex;
    padding: 10px;
    gap: 10px;
}
.search__results .item img{
    max-width: 50px;
    border-radius: 5px;
}
.search__results .item h2{
    font-size: var(--font-size-text);
}
.search__results .search__product_result{
    text-align: left;
}
.search__results .search__product_result p{
    color: var(--color-text);
    font-size: var(--font-size-text);
}
.search__results .search__product_result p > b{
    font-size: var(--font-family-text);
}
.search__results .item:hover{
    background: var(--color-primary);
}
.search__results .item:hover p,
.search__results .item:hover h2{
    color: #fff;
}
.search__results .search__title{
    text-align: left;
    font-size: var(--font-size-subttile);
    padding: 15px 10px;
}
/*== MEDIA QUERYS ==*/
/* Tablet */
@media (min-width: 768px) and (max-width: 1239px) {
    /*Footer*/
    .footer .footer__inner{
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .footer .footer__inner .footer__row:nth-child(1){
        width: 100%;
    }
    .footer .footer__inner .footer__row:nth-child(2),
    .footer .footer__inner .footer__row:nth-child(3),
    .footer .footer__inner .footer__row:nth-child(4){
        width: 15%;
    }
    .footer .footer__inner .footer__row:nth-child(5){
        width: 35%;
    }
    /*CTA section*/
    .cta .cta__inner .cta__content {
        max-width: 400px;
    }
    .cta .cta__inner .cta__image {
        max-width: 270px;
        right: 20px;
    }
     /*Navbar*/
     .icon__hamburger{
        display: flex;
    }
    .navbar .navbar__inner ul{
        flex-direction: column;
        position: fixed;
        left: -100%;
        top: 0;
        gap: 20px;
        min-height: 100vh;
        background: var(--color-background-light);
        z-index: 9999;
        width: calc(100% - 10px);
        max-width: 300px;
        box-shadow: var(--box-shadow);
        padding: 2rem .5rem;
        align-items: flex-start;
        transition: all .5s ease;
    }
    .navbar .navbar__inner ul.active{
        left: 0;
        transition: all .5s ease;
    }
    .navbar .navbar__inner > .logo{
        display: none;
    }
    .navbar .navbar__inner .navbar__options .input__group{
        display: none;
    }
    .navbar .navbar__inner ul .input__group{
        display: block;
    }
    .navbar .navbar__inner ul .logo{
        display: block;
        margin-bottom: -7px;
    }
    .navbar .navbar__inner ul li a{
        font-size: calc(var(--font-size-subttile) - 1px);
    }
    .navbar .navbar__overlayed{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 9999;
        cursor: pointer;
        display: none;
    }
    .navbar .navbar__overlayed.active{
        display: block;
    }
    /*checkout*/
    .checkout .checkout__inner{
        flex-direction: column;
    }
    .checkout .checkout__inner .form{
        width: 100%;
        order: 2;
    }
    .checkout .checkout__inner .checkout__sidebar {
        width: 100%;
    }
    /*Product*/
    .product .product__inner .product__content .carousel .carousel__inner {
        height: 45vh;
    }
}
/* Novile */
@media (max-width: 768px) {
    /*Footer*/
    .footer .footer__inner{
        flex-wrap: wrap;
        gap: calc(10px);
    }
    .footer .footer__inner .footer__row:nth-child(1){
        width: 100%;
    }
    .footer .footer__inner .footer__row:nth-child(2),
    .footer .footer__inner .footer__row:nth-child(3),
    .footer .footer__inner .footer__row:nth-child(4){
        width: calc(33% - 10px);
    }
    .footer .footer__inner .footer__row:nth-child(5){
        width: 100%;
    }
    /*CTA section*/
    .cta .cta__inner{
        padding: 1rem 1rem;
        display: flex;
        justify-content: space-around;
        margin-top: 0;
    }
    .cta .cta__inner .cta__content {
        max-width: 250px;
    }
    .cta .cta__inner .cta__content h1 {
        font-size: calc(var(--font-size-title));
    }
    .cta .cta__inner .cta__content p {
        font-size: var(--font-size-text);
        line-height: calc(var(--font-size-text) + 5px);
    }
    .cta .cta__inner .cta__image {
        max-width: 150px;
        position: relative;
        right: 0;
    }
    /*Slider categories*/
    .category__item {
        padding: 5px 5px;
        gap: 5px;
        min-height: 60px;
        min-width: 75px;
    }
    /*Carousel*/
    .carousel .carousel__inner{
        height: 50vh;
    }
    .circle__content {
        min-height: 35px;
        min-width: 35px;
    }
    .circle__content svg{
        width: 17px;
    }
     /*Navbar*/
     .icon__hamburger{
        display: flex;
    }
    .navbar .navbar__inner > ul{
        flex-direction: column;
        position: fixed;
        left: -100%;
        top: 0;
        gap: 20px;
        min-height: 100vh;
        background: var(--color-background-light);
        z-index: 9999;
        width: calc(100% - 10px);
        max-width: 300px;
        box-shadow: var(--box-shadow);
        padding: 2rem .5rem;
        align-items: flex-start;
        transition: all .5s ease;
        justify-content: flex-start;
    }
    .navbar .navbar__inner > ul.active{
        left: 0;
        transition: all .5s ease;
    }
    .navbar .navbar__inner > .logo{
        display: none;
    }
    .navbar .navbar__inner .navbar__options .input__group{
        display: none;
    }
    .navbar .navbar__inner > ul .input__group{
        display: block;
    }
    .navbar .navbar__inner > ul .logo{
        display: block;
        margin-bottom: -7px;
    }
    .navbar .navbar__inner > ul li a{
        font-size: calc(var(--font-size-subttile) - 1px);
    }
    .navbar__overlayed{
        position: fixed;
        top: 0;
        left: 0;
        min-height: 100vh;
        width: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 9999;
        cursor: pointer;
        display: none;
    }
    .navbar__overlayed.active{
        display: block !important;
    }
    /*Cart*/
    .cart .cart__inner{
        flex-direction: column;
    }
    .cart .cart__sidebar{
        width: 100%;
    }
    .cart .table{
        width: 100%;
    }
    /*checkout*/
    .checkout .checkout__inner{
        flex-direction: column;
    }
    .checkout .checkout__inner .form{
        width: 100%;
        order: 2;
    }
    .checkout .checkout__inner .checkout__sidebar {
        width: 100%;
    }
    /*Auth*/
    .auth .auth__inner .auth__form,
    .auth .auth__inner .auth__overlayed,
    .auth .auth__inner{
        width: 100%;
    }
    .auth .auth__inner .auth__overlayed{
        padding: 0;
    }
    .auth .auth__inner .auth__aside{
        display: none;
    }
    /*Product*/
    .product .product__inner {
        flex-direction: column;
    }
    .product .product__inner .product__aside,
    .product .product__inner .product__content{
        width: 100%;
    }
    .product .product__inner .product__content .carousel .carousel__inner {
        height: 45vh;
    }
    .product .product__inner .product__description .d_flex{
        gap: .5rem;
        flex-direction: column;
    }
    .product .product__inner .product__description ul{
        width: 100%;
        max-width: inherit;
    }
    /*Section title*/
    .section__title_inner{
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    /*Products*/
    #btnFilter{
        display: flex;
    }
    .filters{
        position: fixed;
        top: 0;
        left: -300px;
        background: var(--color-background-light);
        z-index: 9999;
        height: 100vh;
        border-radius: 0;
        overflow: auto;
        transition: all .5s ease;
    }
    .filters.active{
        left: 0;
    }
    /*Dashboard user*/
    .dashboard__icon{
        display: block;
    }
    .dashboard__user .dashboard__user_inner .form{
        width: 100%;
        padding: 0;
    }
    .dashboard__user .dashboard__user_inner .navbar__aside{
        position: fixed;
        top: 0;
        left: -270px;
        z-index: 9999;
        height: 100vh;
        border-radius: 0;
        transition: all .5s ease;
        width: 250px;
    }
    .dashboard__user .dashboard__user_inner .navbar__aside.active{
        left: 0;
    }
    .tab__menu .tab__menu_inner{
        flex-wrap: wrap;
        padding: 30px 0;
        padding-bottom: 20px;
    }
    .tab__menu .tab__menu_inner a{
        font-size: 15px;
    }
    .help .help__inner a img{
        max-width: 30px;
    }
    .help .help__inner h3, .help .help__inner h3 > b{
        font-size: var(--font-size-text);
    }
    .footer .footer__social_width_logo{
        align-items: flex-start;
    }
    .shop__bar.shop__bar_cart .shop__bar_inner .shop__bar_item{
        width: 50%;
    }
    .congrants h2,
    .congrants .order span{
        font-size: 25px;
    }
    .congrants p{
        max-width: 240px;
    }
    .congrants h3,
    .congrants p{
        font-size: 20px;
        line-height: 25px;
    }
    .congrants .order {
        background: #fff;
        padding: 10px;
        width: 100%;
        max-width: 200px;
    }
    .logo .logo__inner{
        min-width: 200px;
    }
    .navbar .dropdown{
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar .dropdown .dropdown__inner{
        display: block;
        position: relative;
        box-shadow: inherit;
        padding: 0;
        right: inherit;
    }
    .navbar .dropdown .dropdown__inner a{
        padding: 0 0;
    }
    .navbar .dropdown.dropdown__right::before,
    .navbar .dropdown.dropdown__right::after{
        display: none;
    }
    .shop__bar .shop__bar_inner .shop__bar_item{
        width: calc(100% / 2);
    }
    .moon__shop{
        padding: 10px 0;
    }
    .moon__shop .moon__shop .moon__shop_title{
        padding: 10px 20px;
        border: 1px solid #000;
        min-width: inherit;
        position: relative;
        top: inherit;
        left: inherit;
        border-right: 1px solid #000;
        margin: auto;
        transform: inherit;
    }
    .moon__shop .moon__shop{
        flex-direction: column;
    }
    .moon__shop .moon__shop .moon__shop_cta{
        padding: 20px 40px;
        border-radius: 10px;
        padding-left: 25px;
    }
    .announcement .announcement__content > p,
    .announcement .announcement__content .social__media{
        display: none;
    }
    .announcement .announcement__content .search{
        width: 100%;
    }
    .navbar.navbar__moon_shop .icon__hamburger,
    .navbar.navbar__moon_shop .logo{
        display: none;
    }
    .navbar.navbar__moon_shop .navbar__inner > .logo:nth-child(4){
        display: block;
    }
    .articles .articles__inner{
        flex-direction: column;
        overflow: hidden;
    }
    .articles .articles__inner .article__product,
    .articles .article__image{
        width: 100%;
    }
    .articles .articles__inner:last-child .article__image{
        order: 2;
    }
    .footer.footer__moon_shop .footer__inner .footer__row:nth-child(2){
        width: 100%;
        margin-top: 15px;
    }
    .footer.footer__moon_shop .footer__row:nth-child(1)::before{
        right: 0;
    }
    .product{
        overflow: hidden;
    }
    .product .product__inner .product__aside{
        padding: 40px 0;
    }
    .product .product__inner .product__aside .card .card__title{
        padding-top: 0;
    }
    .product__description .product__description_inner{
        flex-direction: column;
        gap: 20px;
    }
    .product__description .product__description_aside{
        width: 100%;
    }
    .product__description .product__description_options {
        width: 100%;
        justify-content: flex-start;
    }
    .register__login{
        width: 100%;
    }
    .register__login .register__login_inner{
        flex-direction: column;
    }
    .register__login .register__login_inner .register,
    .register__login .register__login_inner .login{
        width: 100%;
        padding: 10px;
    }
    .register__login .register__login_inner .register{
        border-right: 0;
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 30px;
    }
    .register__login  .section__title h2{
        font-size: 15px;
    }
    .dropdown.dropdown__megamenu{
        position: relative;
    }
    .dropdown.dropdown__megamenu  .dropdown__inner{
        width:  100%;
        top: 0;
        left: 0;
        max-height: inherit;
        min-height: inherit;
    }
    .dropdown.dropdown__megamenu .container{
        padding: 0;
        padding: 20px 0;
    }
    .dropdown.dropdown__megamenu  .dropdown__inner ul{
        display: flex;
        grid-template-columns: inherit;
        gap: 20px;
    }
    .dashboard__user .dashboard__user_inner{
        padding: 0 10px;
    }
}