@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;600;700&display=swap');
/* ┌──────────────────────────────────────────────────┐ */
/* │                     GLOBAL                       │ */
/* └──────────────────────────────────────────────────┘ */
* {
    outline: none !important;
    box-shadow: none !important;
}
body {
    font-family: 'Roboto', sans-serif;
    font-size: .9rem;
    background-color: var(--grey-medium);
}
/* ┌──────────────────────────────────────────────────┐ */
/* │                   VARIABLES                      │ */
/* └──────────────────────────────────────────────────┘ */
:root {
    --red-dark: #D51A14;
    --red-medium: #F01A40;
    --red-light: #F5357B;

    --black-dark: #000000;
    --black-medium: #0B0D0E;
    --black-light: #4C4E4E;

    --grey-dark: #BABABA;
    --grey-medium: #D9D9D9;
    --grey-light: #F8F8F8;

    --green-dark: #229209;
    --green-medium: #49A40D;
    --green-light: #A5C04A;

    --purple-dark: #B90FAC;
    --purple-medium: #A51BEF;
    --purple-light: #8153F8;
}

/* .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important; } */

.dancing-script {
    font-family: 'Dancing Script', cursive;
}

.text-red { color: var(--red-medium); }
/* btn-dark */
.btn-dark { background-color: var(--black-medium) !important; }
.btn-dark:hover { background-color: var(--black-dark) !important; }
/* btn-green */
.btn-green { color: #fFF !important; background-color: var(--green-medium) !important; }
.btn-green:hover { color: #fFF !important; background-color: var(--green-dark) !important; }
/* btn-purple */
.btn-purple { color: #fFF !important; background-color: var(--purple-medium) !important; }
.btn-purple:hover { color: #fFF !important; background-color: var(--pueple-dark) !important; }
/* btn-red */
.btn-red { color: #fFF !important; background-color: var(--red-medium) !important; }
.btn-red:hover { color: #fFF !important; background-color: var(--red-dark) !important; }
/* btn-outline-dark */
.btn-outline-dark {
    color: var(--black-medium) !important;
    background-color: transparent !important;
    border: 2px solid var(--black-medium) !important;
}
.btn-outline-dark:hover {
    color: var(--black-dark) !important;
    background-color: transparent !important;
    border: 2px solid var(--black-dark) !important;
}
/* btn-outline-red */
.btn-outline-red {
    color: var(--red-medium) !important;
    background-color: transparent !important;
    border: 2px solid var(--red-medium) !important;
}
.btn-outline-red:hover {
    color: var(--red-dark) !important;
    background-color: transparent !important;
    border: 2px solid var(--red-dark) !important;
}
/* link-red */
.link-red { color: var(--red-medium) !important; }
.link-red:hover { color: var(--red-dark) !important; }

/* ──────────────────── section ──────────────────────── */
.section {
    padding: 5rem 0;    
    background-color: #FFF;
}
.section:not(:last-child) {
    margin-bottom:1rem;
}
.section .section-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}
.section .section-header .section-title span.fw-bold {
    position: relative;
}
.section .section-header .section-title span.fw-bold::after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% + 10px);
    /* height: 35%; */
    height: 8px;
    /* top: calc(100% - 15px); */
    bottom: -8px;
    left: -5px;
    background-color: var(--red-medium);
    z-index: 1;
}
.section .section-footer {
    text-align: center;
    padding: 1rem 0;
}
/* ─────────────────── card-item ────────────────────── */
.card.card-item .card-img {
    overflow: hidden;
}
.card.card-item .card-img {
    position: relative;
}
.card.card-item .card-img .card-img-bg {
    display: block;
}
.card.card-item .card-body .card-title::after {
    content: '';
    display: block;
    position: relative;
    bottom: -2px;
    /* top: 100%; */
    left: calc(50% - 25px);
    width: 50px;
    height: 2px;
    background-color: var(--red-medium);
}
.card.card-item .card-img .card-img-overlay .tag {
    position: relative;
    top: -19px;
    left: -16px;
    padding: .25rem .5rem;
    font-size: 12px;
    color: #FFF;
    /* background-color: var(--black-medium); */
    border-bottom-right-radius: 6px;
    z-index: 1;
}
.card.card-item .card-img .card-img-overlay .icon-fav {
    position: absolute;
    top: 10px;
    right: 12px;
    color: #000;
    transition: all .25s ease-in-out;
    z-index: 1;
}
.card.card-item .card-img .card-img-overlay .icon-fav:hover {
    color: var(--red-medium);
}
.card.card-item .card-footer {
    background-color: #FFF;
    border-top: none;
}
.card.card-item .card-body .item-name {
    color: var(--black-medium);
    text-decoration: none;
    transition: all .25s ease-in-out;
}
.card.card-item .card-body .item-name:hover {
    color: var(--black-dark);
}
.card.card-item .card-img .card-img-overlay .icon-link {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background-color: rgba(0, 0, 0, .75);
    opacity: 0;
    transition: all .25s ease-in-out;
}
.card.card-item .card-img .card-img-overlay:hover .icon-link {
    opacity: 1;
}
.card.card-item .card-img .card-img-overlay .icon-link i {
    position: relative;
    top: 100%;
    transition: all .25s ease-in-out;
}
.card.card-item .card-img .card-img-overlay:hover .icon-link i {
    top: 0;
}
/* ┌──────────────────────────────────────────────────┐ */
/* │                     HEADER                       │ */
/* └──────────────────────────────────────────────────┘ */

/* ───────────────────── navbar ──────────────────────── */
header .navbar {
    padding: 0;
    font-size: 14px;
    background-color: var(--black-medium);
    border-bottom: 4px solid var(--black-light);
}
header .navbar .btn {
    color: rgba(255, 255, 255, .75);
}
header .navbar .btn:hover {
    color: rgba(255, 255, 255, 1);
}
header .navbar .navbar-menu {
    display: flex;
    justify-content: space-between;
    flex: 1 1 auto !important;
}
header .navbar .navbar-menu .nav-item .nav-link {
    color: rgba(255, 255, 255, .75);
}
header .navbar .navbar-menu .nav-item:hover .nav-link {
    color: rgba(255, 255, 255, 1);
}
header .navbar .navbar-menu .navbar-start {
    display: flex;
    flex: 1 1 auto;
}
header .navbar .navbar-menu .navbar-end .nav .nav-item .nav-link .icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 22px !important;
    height: 22px !important;
    background-color: var(--black-light);
    border-radius: 3px;
}
header .navbar .navbar-menu .navbar-end .nav .nav-item:hover .nav-link .icon.facebook {
    color: #FFF !important;
    background-color: #1877F2;
}
header .navbar .navbar-menu .navbar-end .nav .nav-item:hover .nav-link .icon.instagram {
    color: #FFF;
    background-image: linear-gradient(29.61deg, #f38334 0%, #da2e7d 50.39%, #6b54c6 100%);    
}
header .navbar .navbar-menu .navbar-end .nav .nav-item .nav-link .icon i {
    position: relative;
    top: 1px;
}
header .navbar .navbar-menu .navbar-start .offcanvas .offcanvas-header {
    background-color: var(--black-medium);
    color: #FFF;
    padding-top: 3px;
    padding-bottom: 3px;
}
header .navbar .navbar-menu .navbar-start .offcanvas .offcanvas-header h6 {
    vertical-align: middle;
    margin-bottom: 0;
}
header .navbar .navbar-menu .navbar-start .offcanvas .offcanvas-header button {
    color: rgba(255, 255, 255, .75) !important;
    border-radius: 50%;
}
header .navbar .navbar-menu .navbar-start .offcanvas .offcanvas-header button:hover {
    color: #FFF !important;
}
/* ────────────────────── modal ──────────────────────── */
#BranchPhoneNumbers .modal-dialog .modal-content .modal-header,
#BranchHours .modal-dialog .modal-content .modal-header {
    background-color: var(--black-medium);
}
#BranchPhoneNumbers .modal-dialog .modal-content .modal-header .btn i,
#BranchHours .modal-dialog .modal-content .modal-header .btn i {
    color: rgba(255, 255, 255, .75) !important;
    transition: all .25s ease;
}
#BranchPhoneNumbers .modal-dialog .modal-content .modal-header .btn:hover i,
#BranchHours .modal-dialog .modal-content .modal-header .btn:hover i {
    color: rgba(255, 255, 255, 1) !important;
}

/* ┌──────────────────────────────────────────────────┐ */
/* │                      NAV                         │ */
/* └──────────────────────────────────────────────────┘ */

/* ───────────────────── navbar ──────────────────────── */
nav#userMenu {
    background-color: #FFF !important;
    background-image: linear-gradient(to bottom,
                      rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.65)),
                      url('assets/images/11.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
nav#userMenu .navbar-nav {
    flex-direction: row !important;
}
nav#userMenu .navbar-search {
    background-color: #FFF;
    border: 2px solid var(--black-medium);
    border-radius: 3px;
}
nav#userMenu .navbar-search .input-group input[type="search"] {
    margin-right: .25rem;
}
nav#userMenu .navbar-search .input-group button[type="submit"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
nav#userMenu .navbar-search .input-group button[type="button"] {
    margin-right: .5rem;
}
nav#userMenu .navbar-search .input-group input[type="search"]:focus ~ button[type="submit"] {
    color: #FFF;
    background-color: var(--black-medium);
}
nav#userMenu .navbar-search .input-group button[type="button"] {
    position: relative;
    top: 5px;
    width: 25px;
    height: 25px;
    line-height: 20px;
    border-radius: 50%;
}
nav#userMenu .navbar-search .input-group button[type="button"]:hover {
    background-color: rgba(0, 0, 0, .12);
}
nav#userMenu .navbar-nav .nav-link {
    display: flex;
    flex-direction: column;
    color: var(--black-medium) !important;
    text-align: center;
    transition: all .25s ease-in-out;
    padding: .5rem;
}
nav#userMenu .navbar-nav .nav-link:hover {
    color: var(--red-medium) !important;
}
nav#userMenu .navbar-nav .nav-link .icon i .badge {
    font-size: 10px;
    background-color: var(--red-medium);
}
nav#userMenu .navbar-nav .nav-link .icon i .badge small {
    position: relative;
    top: -1px;
}
nav#userMenu .navbar-nav .nav-link > small {
    font-size: 12px;
}
/* ┌──────────────────────────────────────────────────┐ */
/* │                NAVBAR CATALOG                    │ */
/* └──────────────────────────────────────────────────┘ */

/* ──────────────── navbar category ──────────────────── */
.navbar-catalog {
    background-color: #FFF;
}
.navbar-catalog .container {
    display: flex;
    flex-direction: row;
}
#catalogMenu .nav .nav-item {
    transition: all .25s ease-in-out;
}
#catalogMenu .nav .nav-item .nav-link {
    color: var(--black-medium);
}
#catalogMenu .nav .nav-item:hover .nav-link {
    color: #FFFFFF;
    background-color: var(--red-medium);
}
.btn-prom {
    color: rgba(255, 255, 255, 1);
    background-color: var(--red-medium);
    border-radius: 0;
    white-space: nowrap;
    transition: all .25s ease-in-out;
}
.btn-prom:hover {
    color: #FFF;
}
/* ┌──────────────────────────────────────────────────┐ */
/* │               SLICK HERO-CAROUSEL                │ */
/* └──────────────────────────────────────────────────┘ */

/* ─────────────── slick hero-carousel ──────────────── */
.slick.hero-carousel .slick-item img {
    transition: all .25s ease-in-out;
}
.slick.hero-carousel:hover .slick-item img {
    transform: scale(1.1);
}
.slick.hero-carousel .slick-prev {
    left: 10px;
    z-index: 1;
}
.slick.hero-carousel .slick-next {
    right: 19px;
}
.slick.hero-carousel .slick-prev::before,
.slick.hero-carousel .slick-next::before {
    font-size: 1.75rem;
    transition: all .25s ease-in-out;
}
.slick.hero-carousel .slick-item {
    position: relative;
    width: 100%;
    height: calc(75vh - 165px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.slick.hero-carousel .slick-item .slick-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.slick.hero-carousel .slick-item .slick-overlay {
    position: absolute;
    padding: 0 3rem;
}
.slick.hero-carousel .slick-item .slick-overlay > div {
    padding: .75rem;
    background-color: rgba(0, 0, 0, .5);
    border-radius: .25rem;
}
.slick.hero-carousel .slick-dots {
    bottom: -30px !important;
    background-color: #FFF;
    height: 31px;
}
.slick.hero-carousel .slick-dots li.slick-active button::before {
    color: var(--red-medium) !important;
}
.slick.hero-carousel .slick-dots li button::before {
    color: var(--red-medium);
    font-size: .75rem;
}
.slick.hero-carousel .slick-item.slick-active .slick-overlay > div {
    animation: fadeIn;
    animation-duration: 1s;
}
.slick.hero-carousel .slick-item.slick-active .slick-overlay .slick-title {
    animation: backInDown;
    animation-duration: 1s;
}
.slick.hero-carousel .slick-item:nth-child(odd).slick-active .slick-overlay .slick-subtitle {
    animation: backInLeft;
    animation-duration: 1s;
}
.slick.hero-carousel .slick-item:nth-child(even).slick-active .slick-overlay .slick-subtitle {
    animation: backInRight;
    animation-duration: 1s;
}
.slick.hero-carousel .slick-item.slick-active .slick-overlay .slick-link {
    animation: backInUp;
    animation-duration: 1.25s;
}
/* ┌──────────────────────────────────────────────────┐ */
/* │              SLICK SERVICE-POLICY                │ */
/* └──────────────────────────────────────────────────┘ */

/* ────────────── slick service-policy ──────────────── */
.slick.service-policy {
    background-color: #FFF !important;
    padding: 3rem 0;
    margin-bottom: 1rem;
}
/* .slick.service-policy .card-group {
    padding: 3rem 0;
    background: #fff;
} */
.slick.service-policy .slick-prev,
.slick.service-policy .slick-next {
    margin-top: 0;
}
.slick.service-policy .slick-prev {
    left: 10px;
    z-index: 1;
}
.slick.service-policy .slick-next {
    right: 19px;
}
.slick.service-policy .slick-prev::before,
.slick.service-policy .slick-next::before {
    color: var(--black-medium);
    font-size: 1.75rem;
    transition: all .25s ease-in-out;
}
/* ┌──────────────────────────────────────────────────┐ */
/* │                     MAIN                         │ */
/* └──────────────────────────────────────────────────┘ */

/* ═══════════════ featuredProducts ═══════════════════ */
#featuredProducts .card.card-item .card-img .card-img-overlay .tag  {
    background-color: var(--black-medium) !important;
}
/* ═══════════════════ newDesigns ═════════════════════ */
#newDesigns .card.card-item .card-img .card-img-overlay .tag  {
    background-color: var(--green-medium) !important;
}
/* ═════════════════ popularProducts ══════════════════ */
#popularProducts .card.card-item .card-img .card-img-overlay .tag  {
    background-color: var(--purple-medium) !important;
}
/* ══════════════════ specialOffers ═══════════════════ */
#specialOffers .card.card-item .card-img .card-img-overlay .tag  {
    background-color: var(--red-medium) !important;
}
/* ════════════════════ ourCatalog ═══════════════════ */
#ourCatalog .card-group .card {
    overflow: hidden;
}
#ourCatalog .card-group .card img {
    transition: all .25s ease-in-out;
}
#ourCatalog .card-group .card:hover img {
    transform:scale(1.25);
}
#ourCatalog .card-group .card .card-img-overlay .card-title {
    z-index: 999;
}
#ourCatalog .card-group .card .card-img-overlay .card-title::after {
    content: '';
    display: block;
    position: relative;
    width: 50px;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--red-medium);
}
#ourCatalog .card-group .card .card-img-overlay::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 50%;
    bottom: 0;
    left: 0;
    background: linear-gradient(transparent, var(--black-dark));
}
#ourCatalog .slick-prev,
#ourCatalog .slick-next {
    width: 36px;
    height: calc(100% + 1px);
    background-color: rgba(255, 255, 255, 1);
}
#ourCatalog .slick-prev::before,
#ourCatalog .slick-next::before {
    color: var(--black-medium);
    font-size: 1.75rem;
    transition: all .25s ease-in-out;
}
#ourCatalog .slick-prev {
    left: 0;
    z-index: 1;
}
#ourCatalog .slick-next {
    right: 0;
}
#ourCatalog .card {
    margin: 0 .75rem;
}
/* ═════════════════ servicesOffered ════════════════ */
#servicesOffered .card .card-body .card-title::after {
    content: '';
    display: block;
    position: relative;
    width: 50px;
    height: 2px;
    bottom: -2px;
    background-color: var(--red-medium);
    margin-bottom: 1rem;
}
#servicesOffered .card .card-body.text-md-start .card-title::after {
    margin-right: auto;
}
#servicesOffered .card .card-body.text-md-end .card-title::after {
    margin-left: auto;
}
/* ══════════════════ ourLocations ══════════════════ */
.location-name::after {
    content: '';
    display: block;
    position: relative;
    width: 50px;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--red-medium);
    margin-bottom: 1rem;
}
.location-divider {    
    padding: 0 .25rem;
}
.location-divider .divider {
    width: 100%;
    height: 2px;
    padding: 0 .25rem;
    background-color: var(--red-medium);
}
/* ┌──────────────────────────────────────────────────┐ */
/* │                    FOOTER                        │ */
/* └──────────────────────────────────────────────────┘ */
/* ═══════════════════ footer-menu ════════════════════ */
footer .footer-menu {
    /*background-color: var(--black-medium);*/
    background-color: #161b1d;
}
footer .footer-menu .nav {
    padding-top: .5rem;
    padding-bottom: .5rem;
    /*border-bottom: 1px solid rgba(255, 255, 255, .1);*/
}
footer .footer-menu .nav .nav-item:hover .nav-link {
    color: #FFFFFF !important;
}
/* ═══════════════════ footer-cols ════════════════════ */
footer .footer-cols {
    background-color: var(--black-medium);
    padding: 3rem 0;
}
footer .footer-cols .col-title {
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
}
footer .footer-cols .col-title::after {
    content: '';
    display: block;
    position: relative;
    width: 50px;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: var(--red-medium);
    margin-bottom: 1rem;
}
footer .footer-cols .footer-social .list-inline .list-inline-item .icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23px !important;
    height: 23px !important;
    color: #FFFFFF;
    background-color: #565E64;
    border-radius: 3px;
}
footer .footer-cols .footer-social .list-inline .list-inline-item:hover a .icon.facebook {
    color: #FFF !important;
    background-color: #1877F2;
}
footer .footer-cols .footer-social .list-inline .list-inline-item:hover a .icon.instagram {
    color: #FFF;
    background-image: linear-gradient(29.61deg, #f38334 0%, #da2e7d 50.39%, #6b54c6 100%);
}
/* ═══════════════════ footer-cards ═══════════════════ */
footer .footer-cards {
    background-color: var(--black-medium);
    padding: .75rem 0;
}
/* ═══════════════════ footer-legal ═══════════════════ */
footer .footer-legal {
    background-color: var(--black-dark);
    padding: .75rem 0;
}
footer .footer-legal .text-legal {
    color: rgba(255, 255, 255, .75);
}
/* ┌──────────────────────────────────────────────────┐ */
/* │           MEDIA QUERIES - MAX-WIDTH              │ */
/* └──────────────────────────────────────────────────┘ */

/* X-Small - xs - <576px */
/* Medium - md - <768px */
@media screen and (max-width: 768px) {
    /* ═════════════════ servicesOffered ════════════════ */
    #servicesOffered .card .card-body.text-md-start .card-title::after {
        margin: 0 auto;
    }
    #servicesOffered .card .card-body.text-md-end .card-title::after {
        margin: 0 auto;
    }
}
/* Large - lg - <992px */
@media screen and (max-width: 992px) {
    /* ═════════════════════ navbar ═════════════════════ */
    /* underline */
    header .navbar .navbar-menu .navbar-start .navbar-nav {
        position: relative;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .underline {
        background-color: var(--red-medium);
        width: 4px;
        pointer-events: none;
        opacity: 0;
        transition: all 0.5s cubic-bezier(1, 2, 0.2, 0.6);
        position: absolute;
        left: -8px;
        --index: 0;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item {
        color: rgba(255, 255, 255, .75);
        text-decoration: none;
        transition: all .5s;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:hover {
        color: #FFF;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:hover ~ .underline {
        opacity: 1;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(1):hover ~ .underline {
        top: 0;
        height: 37px;
        --index:1;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(2):hover ~ .underline {
        top: 37px;
        height: 37px;
        --index:2;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(3):hover ~ .underline {
        top: 74px;
        height: 37px;
        --index:3;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(4):hover ~ .underline {
        top: 111px;
        height: 37px;
        --index:4;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(5):hover ~ .underline {
        top: 148px;
        height: 37px;        
        --index:5;
    }
    /* header - navbar - nav-link */
    header .navbar .navbar-menu .navbar-start .nav-item .nav-link {
        color: rgba(0, 0, 0, .75);
    }
    header .navbar .navbar-menu .navbar-start .nav-item:hover .nav-link {
        color: rgba(0, 0, 0, 1);
    }
    header .navbar .navbar-menu .navbar-start .nav-item .nav-link .icon {
        display: inline-block;
        text-align: center;
        width: 22px;
    }
    #catalogMenu {
        overflow: scroll;
        margin-right: 1rem;
    }
}
/* Extra extra large - xxl - <1400px */


/* ┌──────────────────────────────────────────────────┐ */
/* │           MEDIA QUERIES - MAX-WIDTH              │ */
/* └──────────────────────────────────────────────────┘ */
/* Small - sm - ≥576px */
/* Medium - md - ≥768px */
/* Large - lg - ≥992px */
@media screen and (min-width: 992px) {
    /* ────────────────── navbar ───────────────────── */
    /* underline */
    header .navbar .navbar-menu .navbar-start .navbar-nav {
        /* display: grid; */
        /* grid-template-columns: repeat(var(--items), 1fr); */
        position: relative;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .underline {
        /* background-color: var(--highlight-color); */
        background-color: var(--red-medium);
        height: 4px;
        pointer-events: none;
        opacity: 0;
        transition: all 0.5s cubic-bezier(1, 2, 0.2, 0.6);
        position: absolute;
        top: calc(100% + 1px);
        /* left: var(--left, calc(100%/var(--items) * (var(--index) - 1))); */
        /* width: var(--width, calc(100% / var(--items))); */
        --index: 0;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item {
        color: rgba(255, 255, 255, .75);
        text-decoration: none;
        transition: all .5s;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:hover {
        color: #FFF;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:hover ~ .underline {
        opacity: 1;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(1):hover ~ .underline {
        left: 0;
        width: 68.85px;
        --index:1;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(2):hover ~ .underline {
        left: 68.85px;
        width: 94.5px;
        --index:2;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(3):hover ~ .underline {
        left: 163.35px;
        width: 86.85px;
        --index:3;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(4):hover ~ .underline {
        left: 250.2px;
        width: 98.3634px;
        --index:4;
    }
    header .navbar .navbar-menu .navbar-start .navbar-nav .nav-item:nth-of-type(5):hover ~ .underline {
        left: 348.5634px;
        width: 95.15px;
        --index:5;
    }    
}
/* Extra large - xl - ≥1200px */
/* Extra extra large - xxl - ≥1400px */