/* 
    Dependencies, Site and Overrides
    Created on : 23 junio 2025, 17:21:47
    Author     : lfunes
*/
/* Dependencies */
@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* WEB FONT */
/* nexa-regular - latin */
@font-face {
    font-family: 'Nexa';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('../fonts/nexa/Nexa-Regular.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/nexa/Nexa-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/nexa/Nexa-Regular.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/nexa/Nexa-Regular.woff') format('woff'), /* Modern Browsers */
        url('../fonts/nexa/Nexa-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/nexa/Nexa-Regular.svg#Nexa') format('svg'); /* Legacy iOS */
}
/* nexa-bold - latin */
@font-face {
    font-family: 'Nexa';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url('../fonts/nexa/Nexa-Bold.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/nexa/Nexa-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/nexa/Nexa-Bold.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/nexa/Nexa-Bold.woff') format('woff'), /* Modern Browsers */
        url('../fonts/nexa/Nexa-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/nexa/Nexa-Bold.svg#Nexa') format('svg'); /* Legacy iOS */
}
/* nexa-black - latin */
@font-face {
    font-family: 'Nexa';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/nexa/Nexa-Black.eot'); /* IE9 Compat Modes */
    src: local(''),
        url('../fonts/nexa/Nexa-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/nexa/Nexa-Black.woff2') format('woff2'), /* Super Modern Browsers */
        url('../fonts/nexa/Nexa-Black.woff') format('woff'), /* Modern Browsers */
        url('../fonts/nexa/Nexa-Black.ttf') format('truetype'), /* Safari, Android, iOS */
        url('../fonts/nexa/Nexa-Black.svg#Nexa') format('svg'); /* Legacy iOS */
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Nexa',arial,sans-serif;
    font-weight: normal;
    font-size: 1.0rem;
}

a {
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    color: #444;
    text-decoration: underline;
}


/* helpers */
.box-shadow {
    box-shadow: 0 2px 10px -2px rgba(0,0,0,.3);
}

.box-shadow-none {
    box-shadow: none;
}


.toast-container {
    z-index: 1999;
}

/* MIN WIDTH & MIN HEIGHT */
.min-vw-5 {
    width: 5vw;
}

.min-vw-10 {
    width: 10vw;
}

.min-vw-15 {
    width: 15vw;
}

.min-vw-20 {
    width: 20vw;
}

.min-vw-25 {
    width: 25vw;
}

.min-vw-50 {
    width: 50vw;
}

.min-vw-75 {
    width: 75vw;
}

.min-vh-5 {
    height: 5vh;
}

.min-vh-10 {
    height: 10vh;
}

.min-vh-15 {
    height: 15vh;
}

.min-vh-20 {
    height: 20vh;
}

.min-vh-25 {
    height: 25vh;
}

.min-vh-50 {
    height: 50vh;
}

.min-vh-75 {
    height: 75vh;
}

/* TEXT */
/* font weights */
.fw-n {
    font-weight: normal !important;
}

.fw-l {
    font-weight: 100 !important;
}

.fw-b {
    font-weight: bold !important;
}

.fw-eb {
    font-weight: 900 !important;
}

/* font sizes */
.fs-7{
    font-size: 0.85rem !important;
}

/* font color */
.fc-white {
    color: white !important;
}
.fc-black {
    color: black !important;
}
.fc-gray {
    color: #CCC !important;
}
.fc-blue {
    color: #01affa !important;
}
.fc-green {
    color: #c1dd45 !important;
}
.fc-orange {
    color: #fba740 !important;
}
.fc-pink {
    color: #f7b4cd !important;
}
.fc-red {
    color: #de5e64 !important;
}

/* font color light */
.fc-l-gray {
    color: #EEE !important;
}
.fc-l-blue {
    color: #4cc7fb !important;
}
.fc-l-green {
    color: #ebff9c !important;
}
.fc-l-orange {
    color: #ffcc8e !important;
}
.fc-l-pink {
    color: #ff6da4 !important;
}
.fc-l-red {
    color: #ffb8bc !important;
}

/* font color dark */
.fc-d-gray {
    color: #999 !important;
}
.fc-d-blue {
    color: #00547b !important;
}
.fc-d-green {
    color: #5b5e1d !important;
}
.fc-d-orange {
    color: #ad6e1b !important;
}
.fc-d-pink {
    color: #aa6b83 !important;
}
.fc-d-red {
    color: #912f34 !important;
}
.fc-m-orange{
    color: #fa8b00 !important;
}

/* BACKGROUNDS & BUTTONS */
.button {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-weight: 900;
    border-radius: 0.5rem;
}

.btn {
    font-weight: 700;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

a.btn{
    text-decoration: none;
}

/* backgrounds & buttons normal */
.bg-transparent, .btn-transparent {
    background: transparent;
}
.bg-white, .btn-white {
    background: white;
}
.bg-gray, .btn-gray {
    background: #CCC;
}
.bg-black, .btn-black {
    background: black;
}
.bg-blue, .btn-blue {
    background: #01affa;
}
.bg-green, .btn-green {
    background: #acd112;
}
.bg-orange, .btn-orange {
    background: #fba740;
}
.bg-pink, .btn-pink {
    background: #f6c2b4;
}
.bg-red, .btn-red {
    background: #de5e65;
}
.bg-yellow, .btn-yellow {
    background:#fff600;
}

/* backgrounds & buttons light */
.bg-l-gray, .btn-l-gray {
    background: #EEE;
}
.bg-l-blue, .btn-l-blue {
    background: #4cc7fb;
}
.bg-l-green, .btn-l-green {
    background: #ebff9c;
}
.bg-l-orange, .btn-l-orange {
    background: #ffdeab;
}
.bg-l-pink, .btn-l-pink {
    background: #ff6da4;
}
.bg-l-red, .btn-l-red {
    background: #ffb8bc;
}
.bg-l-yellow, .btn-l-yellow {
    background:#fcf75a;
}
.bg-l-brown, .btn-l-brown {
    background:#c6b6a6;
}

/* backgrounds & buttons dark */
.bg-d-gray, .btn-d-gray {
    background: #999;
}
.bg-d-blue, .btn-d-blue {
    background: #385a88;
}
.bg-d-green, .btn-d-green {
    background: #5b5e1d;
}
.bg-d-orange, .btn-d-orange {
    background: #ad6e1b;
}
.bg-d-pink, .btn-d-pink {
    background: #a96b82;
}
.bg-d-red, .btn-d-red {
    background: #912f34;
}
.bg-d-yellow, .btn-d-yellow {
    background:#FFCD00;
}
.bg-mother{
    background: #b87086;
}

.bg-transparent, .btn-transparent, .bg-white, .btn-white, .bg-gray, .btn-gray, .bg-l-gray, .btn-l-gray, .bg-l-blue, .btn-l-blue, .bg-l-green, .btn-l-green, .bg-l-orange, .btn-l-orange, .bg-l-pink, .btn-l-pink, .bg-l-red, .btn-l-red {
    color: black;
}
.bg-black, .btn-black, .bg-blue, .btn-blue, .bg-green, .btn-green, .bg-orange, .btn-orange, .bg-pink, .btn-pink, .bg-red, .btn-red, .bg-d-gray, .btn-d-gray, .bg-d-blue, .btn-d-blue, .bg-d-green, .btn-d-green, .bg-d-orange, .btn-d-orange, .bg-d-pink, .btn-d-pink, .bg-d-red, .btn-d-red {
    color: white;
}

/* buttons hover */
.btn-white:hover {
    border-color: white !important;
}
.btn-gray:hover {
    border-color: #CCC !important;
}
.btn-black:hover {
    border-color: black !important;
}
.btn-blue:hover {
    border-color: #01affa !important;
}
.btn-green:hover {
    border-color: #acd112 !important;
}
.btn-orange:hover {
    border-color: #fba740 !important;
}
.btn-pink:hover {
    border-color: #f6c2b4 !important;
}
.btn-red:hover {
    border-color: #de5e65 !important;
}
.btn-yellow:hover {
    border-color: #fff600 !important;
}
.btn-l-gray:hover {
    border-color: #EEE !important;
}
.btn-l-blue:hover {
    border-color: #4cc7fb !important;
}
.btn-l-green:hover {
    border-color: #ebff9c !important;
}
.btn-l-orange:hover {
    border-color: #ffdeab !important;
}
.btn-l-pink:hover {
    border-color: #ff6da4 !important;
}
.btn-l-red:hover {
    border-color: #ffb8bc !important;
}
.btn-l-yellow:hover {
    border-color: #fcf75a !important;
}
.btn-d-gray:hover {
    border-color: #999 !important;
}
.btn-d-blue:hover {
    border-color: #385a88 !important;
}
.btn-d-green:hover {
    border-color: #5b5e1d !important;
}
.btn-d-orange:hover {
    border-color: #ad6e1b !important;
}
.btn-d-pink:hover {
    border-color: #a96b82 !important;
}
.btn-d-red:hover {
    border-color: #912f34 !important;
}
.btn-d-yellow:hover {
    border-color: #FFCD00 !important;
}


/* Backgrounds campañas */
.bg-christmas{
    background-color: #154d33;
    background-image: url(../images/backgrounds/demo_20231114.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

/* Buttons */
.btn-transparent.active {
    background: white;
    color: black;
    border-color: white;
}

/* btn-config */
.btn-config, .btn-interface-config {
    background-color: transparent;
    font-weight: 700;
    border-color: #ccc;
    padding: 0.5rem;
}

.btn-config.active, .btn-interface-config.active {
    background: #198754;
    border-color: #198754;
    color: white !important;
}

.btn-config:hover, .btn-interface-config:hover {
    color: #198754 !important;
    border-color: #198754 !important;
}

.btn-config.active:hover, .btn-interface-config.active:hover {
    color: white !important;
}

.btn-config.active:active, .btn-interface-config.active:active  {
    color: #198754 !important;
    border-color: #198754 !important;
}

.btn-config.recommended:after {
    content: '*';
}

.dropdown-toggle::after {
    display: none;
}

.password-toggle {
    float: right;
    position: relative;
    z-index: 5;
    margin-top: -32px;
    margin-right: 35px;
    cursor: pointer;
}

/* Borders */
/* Border colors */
.border-gray {
    border-color: #CCC !important;
}
.border-black {
    border-color: black !important;
}
.border-blue {
    border-color: #01affa !important;
}
.border-green {
    border-color: #acd112 !important;
}
.border-orange {
    border-color: #fba740 !important;
}
.border-pink {
    border-color: #f6c2b4 !important;
}
.border-red {
    border-color: #de5e65 !important;
}
.border-yellow {
    border-color: #fff600 !important;
}

.border-l-gray {
    border-color: #EEE !important;
}
.border-l-blue {
    border-color: #4cc7fb !important;
}
.border-l-green {
    border-color: #ebff9c !important;
}
.border-l-orange {
    border-color: #ffdeab !important;
}
.border-l-pink  {
    border-color: #ff6da4 !important;
}
.border-l-red  {
    border-color: #ffb8bc !important;
}
.border-l-yellow {
    border-color: #fcf75a !important;
}

/* backgrounds & buttons dark */
.border-d-gray {
    border-color: #999 !important;
}
.border-d-blue {
    border-color: #385a88 !important;
}
.border-d-green {
    border-color: #5b5e1d !important;
}
.border-d-orange {
    border-color: #ad6e1b !important;
}
.border-d-pink {
    border-color: #a96b82 !important;
}
.border-d-red {
    border-color: #912f34 !important;
}
.border-d-yellow {
    border-color: #FFCD00 !important;
}


/* Border width */
.border-6 {
    border-width: 15px !important;
}

/* border radius */
.br-1 {
    border-radius: 1rem !important;
}

.br-2 {
    border-radius: 2rem !important;
}

.br-3 {
    border-radius: 3rem !important;
}

.br-4 {
    border-radius: 4rem !important;
}

.br-5 {
    border-radius: 5rem !important;
}

.brt-1 {
    border-radius: 1rem 1rem 0 0;
}

.brt-2 {
    border-radius: 2rem 2rem 0 0;
}

.brt-3 {
    border-radius: 3rem 3rem 0 0;
}

.brt-4 {
    border-radius: 4rem 4rem 0 0;
}

.brt-5 {
    border-radius: 5rem 5rem 0 0;
}

.brb-1 {
    border-radius: 0 0 1rem 1rem;
}

.brb-2 {
    border-radius: 0 0 2rem 2rem;
}

.brb-3 {
    border-radius: 0 0 3rem 3rem;
}

.brb-4 {
    border-radius: 0 0 4rem 4rem;
}

.brb-5 {
    border-radius: 0 0 5rem 5rem;
}

.brl-1 {
    border-radius: 1rem 0 0 1rem;
}

.brl-2 {
    border-radius: 2rem 0 0 2rem;
}

.brl-3 {
    border-radius: 3rem 0 0 3rem;
}

.brl-4 {
    border-radius: 4rem 0 0 4rem;
}

.brl-5 {
    border-radius: 5rem 0 0 5rem;
}

.brr-1 {
    border-radius: 0 1rem 1rem 0;
}

.brr-2 {
    border-radius: 0 2rem 2rem 0;
}

.brr-3 {
    border-radius: 0 3rem 3rem 0;
}

.brr-4 {
    border-radius: 0 4rem 4rem 0;
}

.brr-5 {
    border-radius: 0 5rem 5rem 0;
}

.flex-scroll {
    flex-wrap: nowrap;
    overflow-x: scroll;
}

.flex-scroll-item {
    display: flex;
    flex-flow: column;
}

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

[data-wk-open]{
    cursor: pointer;
}

/* Navbar */
#navbar-desktop{
    transition: all.5s;
    background-color: #000;
}

#navbar-desktop a {
    color: white;
}

#navbar-desktop .btn {
    border: 2px solid;
}

#navbar-desktop .btn:hover {
    background-color: white;
}

#navbar-desktop .btn:hover, #main-menu-list a.dropdown-item {
    color: #333!important;
}

#main-menu-list{
    font-size: 0.9rem;
}


/* Carousels */
#landing-carousel .carousel-item {
    padding-top: 11vh;
    height: 70vh;
}

.carousel-after {
    top: -25px;
    position: relative;
    z-index: 3;
}

.carousel-after a {
    text-decoration: none;
    background-color: white;
    border-radius: 0.375rem;
    color: #000;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    padding: 0.25rem!important;
    margin-bottom: 1rem!important;
    height: 100%!important;
}

.carousel-indicators button {
    width: 40px !important;
    height: 7px !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 3rem;
}

#carousel-product .carousel-inner {
    min-height: auto;
    border-radius: 0;
}

#carousel-product .carousel-item {
    height: auto;
}

/* Cards carousel */
.carousel-cards-inner {
    min-height: auto;
    border-radius: 0;
}

.carousel-cards-inner .carousel-item {
    min-height: unset;
    height: auto;
}

.carousel-cards-inner .carousel-item.active,
.carousel-cards-inner .carousel-item-start,
.carousel-cards-inner .carousel-item-next,
.carousel-cards-inner .carousel-item-prev {
    display: flex;
}

.carousel-cards .carousel-control-prev, .carousel-cards .carousel-control-next {
    width: 10%;
    z-index: 2;
    height: 30%;
    top: 33%;
    border-radius: 0.5rem;
}

.carousel-cards-inner .carousel-item > div {
    display: none;
}

.carousel-cards-inner .carousel-item > div:first-child {
    display: block;
}

/* Sections */
.sections {
    background: transparent;
    position: relative;
    width: 100%;
    margin: auto;
    padding: 40px;
    top: -50px;
    border-radius: 0.5rem;
    overflow-x: scroll;
    box-shadow: none;
    z-index: 2;
}

.sections-recogida {
    top: 0;
}

.sections-item {
    background-color: #FFF;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px -2px rgba(0,0,0,.3);
    border-radius: 1rem;
}

.sections-item:hover {
    text-decoration: none;
    cursor: pointer;
}

/* Our Products */
.our_products-menu {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin-top: 50px;
}

.our_products-menu-item {
    color: black;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.5rem;
}

.our_products-menu-item.active {
    color: #f8900f;
}

.our_products-product {
    display: flex;
    flex-flow: row;
    margin-top: 20px;
}

.our_products-product-text {
    margin-right: 100px;
}

.our_products-product-text h3 {
    font-size: 36px;
}

.our_products-product-text p {
    font-size: 0.5rem;
    margin: 20px 0;
}

/* Popular products */
.popular_products-product {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
    border-radius: 0.5rem;
    height: 150px;
}

.popular_products-product-first {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
}

.popular_products-product h3 {
    position: absolute;
    font-weight: 900;
    font-size: 1.2rem;
    z-index: 10;
    bottom: 15px;
    left: 10px;
}

.popular_products-product-single {
    height: 125px;
}

.popular_products-product-double {
    height: 265px;
    align-items: flex-start;
}

.popular_products-product-double img {
    margin-top: 20px;
}

.popular_products-product-double span {
    left: 10px;
}

/* Companies */
.companies {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    background-image: linear-gradient(to left, #63d7fd, #01aefa);
}

.companies-text {
    color: white;
}

/* Overview */
.overview p {
    margin: 25px 0;
}

.overview-card {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    border-radius: 1rem;
    padding: 1rem !important;
    box-shadow: 0 2px 10px -3px rgba(0,0,0,.3);
}

.overview-card .title {
    border-radius: 0.5rem;
}

.overview-card .title,
.overview-card .subtitle {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.overview-card .title img {
    height: auto;
    width: 32px;
    margin: 0 15px;
}

.overview-card .subtitle {
    margin-top: 15px;
    color: #646d71;
    font-size: 0.5rem;
}

/* Faqs */
.accordion-button:not(.collapsed) {
    color: black;
    background-color: white;
}

.accordion-button:focus {
    border-color: white;
    box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
    filter: brightness(0);
}

/* Products list */
.list-products {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.list-product {
    position: relative;
    border-radius: 0.5rem;
    box-shadow: 0 2px 5px -2px rgba(0,0,0,.5);
    margin: 25px 0;
}

.list-product-image {
    text-align: center;
    border-radius: 0.5rem 0.5rem 0 0;
    min-height: 300px;
}

.list-product-image .img-product {
    margin-top: 2.5rem;
}

.list-product-image .badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-weight: 900;
    color: black;
}

.list-product-text {
    padding: 10px;
}

/* Tabs */
.nav-link {
    color: #444;
    white-space: nowrap;
}

.nav-link.active {
    background: transparent!important;
    font-weight: 900;
    position: relative;
    color: #020101 !important;
}

.nav-link:hover {
    text-decoration: none;
    color: #020101;
}

.tab-pane p {
    font-weight: 100;
}

.tab-pane p a {
    color: black;
    text-decoration: none;
    font-weight: 900;
}


/* Breadcrumb */
.breadcrumb {
    margin-top: 6rem;
}

.breadcrumb a,.breadcrumb span {
    font-size: 0.87rem;
    color: #777;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

/* Forms */
.form-label {
    font-size: 0.9rem;
    color: #666;
}

.form-control, .form-select {
    border-radius: 0.5rem;
    border: 1px solid #CCC;
    font-weight: 700;
    font-size: 1.15rem;
}

.form-check {
    padding-left: 2rem;
}

.form-check-input {
    padding: 8px;
    position: relative;
    border: 2px solid #bebebe;
}

.form-check-input[type=radio] {
    border-radius: 0.2rem!important;
}

.form-check-input:checked[type=radio] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-label{
    margin-left: 10px;
    font-size: 0.9rem;
}

/* Copy */
.copy {
    width: 100%;
    background: #FFF url(../images/backgrounds/grey_background.png) top center no-repeat;
    background-size: cover;
    padding: 3rem 0 2rem;
}

/* Footer */
.footer {
    background-color: black;
}

.footer hr {
    color: #979797;
}

.footer-link {
    margin-top: 5px;
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.footer-link:hover {
    color: #4cc7fb;
    text-decoration: none;
}

.footer-bottom-copy {
    color: #969c9e;
}

/* Uploader */
#uploader-container {
    display: none;
    background: rgba(0,0,0,.6);
    color: white;
    width: 100%;
    padding: 1rem;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 1111;
}

.uploader-close-btn {
    font-size: 1.2rem;
    color: black;
    cursor: pointer;
}

/* Cart list */
#cart-list, #cart-list .btn {
    font-size: .85rem;
}
#cart-list .card {
    border-radius: 1rem;
}
#cart-list .card-header:first-child {
    border-radius: 1rem 1rem 0 0;
}
#cart-list .card-footer:last-child {
    border-radius: 0 0 1rem 1rem;
}
#cart-list .card-footer {
    border-top: medium none;
}

.card-footer h3 {
    font-size: 1rem;
    font-weight: bold;
}

/* Corporate */
a.card-corporate {
    box-shadow: 0 2px 10px -2px rgba(0,0,0,.3);
    border-radius: 1rem;
    margin-bottom: 1.5rem!important;
    text-decoration: none!important;
}

a.card-corporate:hover {
    color: inherit!important;
}

/* Caja resumen configuradores */
#resume-xs {
    position: fixed;
    bottom: 0;
    width: 96%;
    margin: 2%;
    z-index: 999;
    border-radius: 15px;
}

/* Regalo */
.canvas-container {
    width: 100%;
    height: 0;
    padding-bottom: 50%;  /* Relación de aspecto 1:2 (altura:ancho) */
    padding-top: 15%;
    position: relative;
}

#canvas-fabric {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 576px) {
    #landing-carousel .carousel-item{
        height: 75vh;
    }
}

@media only screen and (min-width: 768px) {
    #landing-carousel .carousel-item{
        height: 80vh;
    }

    /* Cards carousel */
    /* grid 4 */
    .carousel-cards-inner .carousel-item-right.active,
    .carousel-cards-inner .carousel-item-next,
    .carousel-cards-inner .carousel-item-next:not(.carousel-item-start) {
        transform: translateX(25%) !important;
    }

    .carousel-cards-inner .carousel-item-left.active,
    .carousel-cards-inner .carousel-item-prev:not(.carousel-item-end),
    .carousel-cards-inner .active.carousel-item-start,
    .carousel-cards-inner .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-25%) !important;
    }

    .carousel-cards-inner .carousel-item-next.carousel-item-start,.carousel-cards-inner .active.carousel-item-end {
        transform: translateX(0) !important;
    }

    .carousel-cards-inner .carousel-item-prev,
    .carousel-cards-inner .carousel-item-prev:not(.carousel-item-end) {
        transform: translateX(-25%) !important;
    }

    .carousel-cards-inner .carousel-item > div {
        display: block;
    }

    .carousel-cards .carousel-control-prev, .carousel-cards .carousel-control-next {
        width: 5%;
    }
}

@media only screen and (min-width: 992px) {
    #navbar-desktop{
        transition: all.5s;
        background-color: #111;
    }

    #pills-tab, #main-menu-list {
        overflow-x: scroll;
        flex-flow: row;
    }

    #main-menu-list .nav-item .dropdown-menu{
        display: none;
    }
    #main-menu-list .nav-item:hover .dropdown-menu{
        display: block;
    }

    #landing-carousel .carousel-item {
        padding-top: 16vh;
        height: 55vh;
    }

    #landing-carousel .carousel-indicators {
        display: flex;
        bottom: 0;
    }

    .carousel-cards-inner {
        border-radius: 0;
    }

    .sections {
        overflow-x: hidden;
    }

    .popular_products-product {
        height: 250px;
        margin-top: 50px;
        padding-bottom: 25px;
    }

    .brand-products,
    .photo_reveal-products {
        flex-wrap: nowrap;
        overflow-x: unset;
    }

    .brand-products::before {
        width: 75%;
        left: 12.5%;
    }

    .overview-card {
        margin: 0 0 25px;
    }

    .subscribe {
        border-top-right-radius: 250px;
    }

    .subscribe-image {
        width: 40%;
    }

    .subscribe-text p {
        font-size: 24px;
    }

    .breadcrumb {
        margin-top: 10rem;
        margin-bottom: 0;
    }

    .footer-links-title {
        margin-bottom: 5px !important;
    }
}

@media only screen and (min-width: 1200px) {
    #landing-carousel .carousel-item {
        height: 47vh;
    }

    .flex-scroll {
        flex-wrap: nowrap;
        overflow-x: unset;
    }
}

@media only screen and (min-width: 1440px) {
    #pills-tab, #main-menu-list {
        overflow-x: unset;
    }
}

@media only screen and (min-width: 1700px) {
    .menu {
        padding: 0;
    }
    .subscribe-image {
        right: -170px;
    }
}

.video-contanier{
    --bs-aspect-ratio: 69.8%;
}