@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/*------ VARIABLES ------*/
:root {
    /*---- fonts----*/
    --body-font: 'Manrope', sans-serif;
    --font12: 1.2rem;
    --font14: 1.4rem;
    --font15: 1.5rem;
    --font16: 1.6rem;
    --font21: 2.1rem;
    --font24: 2.4rem;
    --font30: 3rem;
    --font36: 3.6rem;
    --font48: 4.8rem;
    --font72: 7.2rem;
    --font102: 10.2rem;

    /*---- font weights ----*/
    --extralight-weight: 200;
    --light-weight: 300;
    --regular-weight: 400;
    --bold-weight: 700;
    --extrabold-weight: 800;

    /*---- letter spacing ----*/
    /* --lsm7: -7px;
    --lsm2: -2px;
    --lsm1: -1px;
    --ls1: 1px; */

    /*---- colors ----*/
    --dark-color: #000000;
    --light-color: #ffffff;
    --extra-tip-border-color: #f1f1f1;
    --grey: #8f8882;
    --text-grey: #595754;
    --light-grey: #e9e7e6;
    --light-grey-2: #f0eeed;
    --lighter-grey: #dcdcdc;
    --grey-2: #d2cfcd;
    --lighter-grey-2: #f4f4f4;
    --dark-grey: #8f8882;
    --dark-grey2: #7a7a7a;
    --grey-3: #b7b7b7;
    --brands-page-color: #f8f8f8;
    --skeletoi-page-color: #f5f5f5;
    --dropdown-color: #313131;


    /*---- spacings ----*/
    --sleft: 239px;
    --sp-80: 80px;
    --sp-70: 70px;
    /*---- containers ----*/
    --site-container-small: 1560px;
    --site-container: 1680px;
    --site-container-large: 1800px;


    /*---- letter spacings (correct :'( ) ----*/
    --lsm3: -0.03em;
    --lsm25: -0.025em;
    --lsm1: -0.01em;
    --ls1: 0.01em;
    --ls25: 0.025em;
    --ls5: 0.05em;

    /* line heights  */
    --lh30: 30px;
    --lh36: 36px;
    --lh60: 60px;


    /* breakpoints */
    --xl: 1400px;
    --lg: 1200px;
    --md: 992px;
    --sm: 768px;
    --xs: 576px;


    --pd-cont: 6rem;
    --pd-cont-sm: 3rem;
}


/*------ FONTS ------*/
.font12 {
    font-size: 1.2rem;
}

.font14 {
    font-size: 1.4rem;
}

.font15 {
    font-size: 1.5rem;
}

.font16 {
    font-size: 1.6rem;
}

.font21 {
    font-size: 2.1rem;
}

.font24 {
    font-size: 2.4rem;
}

.font30 {
    font-size: 3rem;
}

.font36 {
    font-size: 3.6rem;
}

.font48 {
    font-size: 4.8rem;
}

.font62 {
    font-size: 6.2rem;
}

.font72 {
    font-size: 7.2rem;
}

.font102 {
    font-size: 10.2rem;
}

.line-height-30 {
    line-height: 30px;
}

.line-height-60 {
    line-height: 60px;
}

/*------ FONT WEIGHTS ------*/

.extralight_weight {
    font-weight: 200;
}

.light_weight {
    font-weight: 300;
}

.regular_weight {
    font-weight: 400;
}

.semi_bold_weight {
    font-weight: 600;
}

.bold_weight {
    font-weight: 700;
}

.extrabold_weight {
    font-weight: 800;
}

/*------ LETTER SPACING ------*/
.lsm7 {
    letter-spacing: -7px;
}

.lsm2 {
    letter-spacing: -2px;
}

.lsm1 {
    letter-spacing: -1px;
}

.ls1 {
    letter-spacing: 1px;
}

.lsm25 {
    letter-spacing: -0.025px;
}

/*------ REMIX ICON SIZES ------*/


.remix-icons-30 {
    font-size: 30px;
}


/*------- BASICS ------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
p {
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

}

body {
    font-family: var(--body-font);
    color: var(--dark-color);
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    scroll-behavior: smooth;
}


img {
    display: block;
    object-fit: cover;
}

picture {
    width: auto;
    height: auto;
    display: block;
}

/* OVERWRITE */
.swiper-button-next::after,
.swiper-rtl .swiper-button-prev::after {
    content: '';
}

.swiper-button-prev::after,
.swiper-rtl .swiper-button-next::after {
    content: '';
}

/* ------ CONTAINERS ------*/
/* @media only screen and (max-width: 1800px) {
    .sm-container, .md-container, .xl-container {
        box-sizing: unset;
    }
 } */

.sm-container {
    margin: auto;
    max-width: var(--site-container-small);
    padding: 0 var(--pd-cont);
}

@media only screen and (max-width: 1800px) {
    .sm-container {
        padding-left: var(--pd-cont);
        padding-right: var(--pd-cont);
    }
}


@media only screen and (max-width: 576px) {
    .sm-container {
        padding-left: var(--pd-cont-sm);
        padding-right: var(--pd-cont-sm);
    }
}

.md-container {
    margin: auto;
    max-width: var(--site-container);
}

@media only screen and (max-width: 1800px) {
    .md-container {
        padding-left: var(--pd-cont);
        padding-right: var(--pd-cont);
    }
}

@media only screen and (max-width: 576px) {
    .md-container {
        padding-left: var(--pd-cont-sm);
        padding-right: var(--pd-cont-sm);
    }
}

.xl-container {
    margin: auto;
    max-width: var(--site-container-large);
}

@media only screen and (max-width: 1800px) {
    .xl-container {
        padding-left: var(--pd-cont);
        padding-right: var(--pd-cont);
    }
}

@media only screen and (max-width: 576px) {
    .xl-container {
        padding-left: var(--pd-cont-sm);
        padding-right: var(--pd-cont-sm);
    }
}


.fl-container {
    margin: auto;
    width: 100%;
    max-width: none;
}

.container {
    max-width: 1920px;
    margin: auto;
}

a,
a:hover,
a:visited,
a:active {
    color: inherit;
    text-decoration: none;
}

/*------ HERO SECTION ------*/

.hero-swiper {
    height: 100vh;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
}

.slide-background {
    display: flex;
    position: relative;
    flex-direction: row;
    height: 100%;
    position: fixed;
    width: 100%;
}

.slide-background picture {
    display: flex;
    height: 100%;
    flex: 3;
}

.slide-background picture img {
    width: 100%;
}

.slide-background div {
    flex: 1;
    background-color: var(--grey);
}

.header {
    width: 100%;
    position: fixed;
    z-index: 10;
    color: white;
    transition: 0.3s all ease;
    padding: 35px 60px;
}

.nav-lists-group {
    display: flex;
    gap: 9rem;
    margin-left: auto;
}

.desktop-navigation {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
}

.desktop-navigation a {
    display: flex;
}

.desktop-navigation a picture {
    display: flex;
}

.link-list {
    padding: 0;
    list-style-type: none;
    display: flex;
    gap: 3.5rem;
    align-items: center;
    margin: 0;
}

.socials-list {
    gap: 2rem;
}

/* misery */
.main-image-container {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    justify-content: flex-end;
}

.image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
}

.image-container picture {
    display: flex;
    height: 100%;
}

.image-container img {

    object-fit: contain;
    max-height: 100%;
    display: block;
}

/* misery */
.swiper-content {
    position: relative;
    z-index: 10;
    display: flex;
    color: white;
    width: 100%;
    height: 80%;
    position: relative;
    overflow: hidden;
    margin: unset;
    margin-left: auto;
    margin-right: auto;
}


.swiper-mainslide-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    height: 100vh;
}

.image-background-placeholder {
    position: absolute;
    width: 100%;
    height: 94%;
    background-color: var(--lighter-grey);
    z-index: -10;
    align-self: flex-end;
}

.image-text picture {
    background-color: #000000;
    display: flex;
    width: fit-content;
}

.image-text img {
    width: 100px;
    margin: 0.8rem 1rem;
}

.image-text p {
    letter-spacing: var(--lsm3);
    line-height: var(--lh60);
}

.welcome-text {
    padding: 6rem;
    display: flex;
    align-items: flex-end;
}

.welcome-text p {
    max-width: 24ch;
    letter-spacing: var(--ls5);
    line-height: var(--lh30);
}

.swiper-info-text {
    text-align: end;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    justify-content: flex-start;
    padding: 0 4rem;
}

.swiper-info-text p {
    max-width: 48ch;
    letter-spacing: var(--ls5);
    line-height: var(--lh30);

}

.swiper-info-text picture {
    position: absolute;
    top: 35%;
    right: -240px;
    z-index: -1;
}

.brands-link {
    background-color: black;
    padding: 1.25rem 5rem;
    position: absolute;
    bottom: 45px;
    right: -39%;
    z-index: 10;
    letter-spacing: var(--ls3);
}

.swiper-button-prev,
.swiper-button-next {
    color: black;
    font-size: 4rem;
}

.swiper-buttons-container {
    position: absolute;
    bottom: 7%;
    right: 3%;
    width: 120px;
}


p {
    margin: 0px;
}

/* HEADER */
nav a picture img {
    width: 222px;
    transition: width 0.3s ease;
    /* Animate width changes over 0.3 seconds */
}

.stickyHeader {
    background-color: #0000009e;
    backdrop-filter: blur(21px);
    padding: 15px 60px;
}

.stickyHeader nav a picture img {
    width: 100px !important;
}

.mobile-toggle {
    margin-left: 20px;
    align-items: center;
    justify-content: center;
    display: none;
}

#mobile-menu {
    position: fixed;
    right: 0px;
    z-index: 300;
    background-color: #0000009e;
    backdrop-filter: blur(21px) !important;
    color: white;
    height: 100vh;
    top: 0;
    box-shadow: 0px 7px 5px 4px #00000066;
    transition: all 500ms ease-out;
    transform: translate(100vw, 0);
    width: 342px;
    padding: 35px 40px;
}

#mobile-menu._active {
    transform: translate(0, 0);
}

.mobile-menu-ul {
    list-style-type: none;
    padding: 0;
    padding-left: 4px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mobile-top {
    display: flex;
    align-items: center;
}

.mobile-menu-socials {
    margin-right: auto;
    display: flex;
    gap: 1.5rem;
    padding: 2rem 1rem;
}

.mobile-content {
    padding: 0 1rem;
    padding-top: 3rem;
}

.mobile-close-menu p {
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobile-menu-image {
    width: 100px;
}

.mobile-top a {
    margin-right: auto;
}


/* ------ TEXT PRESETS ------ */
.text1 {
    font-size: var(--font16);
    font-weight: var(--light-weight);
    line-height: var(--lh30);
    letter-spacing: var(--ls5);
}

.text2 {
    font-size: var(--font16);
    font-weight: var(--regular-weight);
    line-height: var(--lh30);
    letter-spacing: var(--ls25);
}

.text3 {
    font-size: var(--font16);
    font-weight: var(--regular-weight);
    line-height: var(--lh30);
    letter-spacing: var(--ls1);
}

.heading1 {
    /* color: var(--dark-color); */
    font-size: var(--font48);
    font-weight: var(--extrabold-weight);
    line-height: var(--lh60);
    letter-spacing: var(--lsm25);
}

.heading2 {
    font-size: var(--font36);
    font-weight: var(--extrabold-weight);
    line-height: var(--lh30);
    letter-spacing: var(--lsm25);
}

.heading3 {
    font-size: var(--font30);
    font-weight: var(--extrabold-weight);
    line-height: var(--lh30);
    letter-spacing: var(--lsm25);
}


.heading4 {
    font-size: var(--font15);
    font-weight: var(--bold-weight);
    letter-spacing: 0px;
    line-height: var(--lh30);
}

.button-text1 {
    font-size: var(--font16);
    font-weight: var(--extrabold-weight);
    text-transform: uppercase;
    letter-spacing: var(--ls5);
    line-height: var(--lh30);
}

.button-text2 {
    font-size: var(--font14);
    font-weight: var(--extrabold-weight);
    text-transform: uppercase;
    letter-spacing: var(--ls5);
    line-height: var(--lh30);
}

/* ----- REUSABLES ----- */

.inner-wrapper {
    width: 100%;
    display: flex;
    height: auto;
}

.home-section {
    padding: var(--sp-80) 0px;
    width: 100%;
    height: auto;
}

.button1 {
    width: 334px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.button2 {
    width: 240px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* ========== HOMEPAGE SECTIONS ========== */
/* ----- ABOUT ----- */
.about {
    padding-bottom: 120px;
}

.about .inner-wrapper {
    flex-direction: row;
}

.about .col {
    width: 50%;
}

.about .left {
    display: flex;
    flex-direction: column;
    gap: 45px;
    margin-top: 140px;
}

.about__store {
    position: relative;
}

.about__store-pic img {
    width: 475px;
    height: 263px;
}

.about__store-bg {
    position: absolute;
    top: 0;
    z-index: -1;
    width: 475px;
    height: 263px;
    rotate: -3.4deg;
    background-color: var(--grey-2);
}

.about__images {
    position: relative;
}

.about__store-circle {
    position: absolute;
    top: -82px;
    left: 390px
}

.about__store-circle img {
    width: 170px;
    height: 170px;
}

.about__directions {
    display: flex;
    align-items: center;
    gap: 13px;
}

.about__directions a i {
    font-size: 2.5rem;
    color: var(--dark-grey);
}

.about__directions a p,
.about__info p {
    color: var(--dark-color);
}

.about .right {
    position: relative;
}

.about__map-pic {
    position: absolute;
    left: -60px;
    top: -15px;
    z-index: -100;
}

.about__map-pic img {
    max-width: 781px;
    width: 100%;
    height: auto;
}


.about__info {
    margin-top: 89px;
    display: flex;
    flex-direction: column;
    gap: 55px;

}

.about__info h2 {
    color: var(--dark-color);
    max-width: 481px;
}


.about__info a {
    margin-top: 10px;
    background-color: var(--dark-color);
}

.about__info a p {
    color: var(--light-color);
}




/* ----- PRODUCTS && SERVICES ACCORDION ----- */
.acc-inner-wrapper {
    max-width: 720px;
    padding-right: 60px;
}

@media only screen and (max-width: 1800px) {
    .acc-inner-wrapper {
        padding-left: var(--pd-cont);
    }
}


@media only screen and (max-width: 576px) {
    .acc-inner-wrapper {
        padding-left: var(--pd-cont-sm);
    }
}

.acc-inner-wrapper2 {
    max-width: 720px;
    padding-left: 60px;
}

@media only screen and (max-width: 1800px) {
    .acc-inner-wrapper2 {
        padding-left: var(--pd-cont);
    }
}

@media only screen and (max-width: 576px) {
    .acc-inner-wrapper2 {
        padding-left: var(--pd-cont-sm);
    }
}

.products .col,
.services .col {
    width: 50%;
}

.products .left,
.services .right {
    display: flex;
    flex-direction: column;
    align-items: end;
    padding-top: 68px;
}

.services .right {
    align-items: start;
}

.products__image,
.services__image {
    height: 100%;
}

.products__image img {
    width: 100%;
    min-height: 611px;
    height: 100%;
}

.services__image img {
    width: 100%;
    min-height: 641px;
    height: 100%;
}


.products__head,
.services__head {
    color: var(--dark-color);
    width: 100%;
    text-align: left;
}

.products__accordion,
.services__accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 45px;
}

.products__acc-head,
.products__acc-info {
    float: right;
}

.products__acc-item,
.services__acc-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    padding: 30px 0px 0px 0px;
    gap: 8px;
    transition: 0.3s ease-in-out;
}

.services__acc-item {
    align-items: start;
}


.products__acc-item.active,
.services__acc-item.active {
    background-color: var(--light-grey-2);
    padding: 30px 0px 50px 0px;

}

.products__acc-head,
.services__acc-head {
    cursor: pointer;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}


.products__acc-head h5,
.services__acc-head h5 {
    color: var(--text-grey);
}

.products__acc-info,
.services__acc-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.products__acc-info .text2,
.services__acc-info .text2 {
    padding-right: 65px;
    color: var(--text-grey);
}

.products__acc-info a,
.services__acc-info a {
    background-color: var(--light-color);
    color: var(--text-grey);
}

.products__icon,
.services__icon {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23595754' d='m5.84 9.59l5.66 5.66l5.66-5.66l-.71-.7l-4.95 4.95l-4.95-4.95z'/%3E%3C/svg%3E");
}


.products__acc-item.active .products__icon,
.services__acc-item.active .services__icon {
    display: inline-block;
    width: 5rem;
    height: 5rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23595754' d='m5.84 15.41l5.66-5.66l5.66 5.66l-.71.7l-4.95-4.95l-4.95 4.95z'/%3E%3C/svg%3E");
}


/* ----- BRANDS ----- */

.brands {
    padding: 30px 0px;
}

.brands__swrapper {
    display: flex;
    height: auto;
    transition-timing-function: linear !important;

}

.brands_swiper .swiper-slide {
    display: flex;
    justify-content: center;
    vertical-align: middle;
    margin: auto;
    height: auto;
}

.brand__swiper-img img {
    width: 100%;
    height: auto;
    opacity: 40%;
}


/* ----- BRANDS BANNER ----- */
.brbanner {
    display: flex;
    justify-content: end;
}


.brbanner__container {
    max-width: var(--site-container);
    width: 100%;
}

@media only screen and (max-width: 1800px) {
    .brbanner__container {
        padding-left: var(--pd-cont)
    }
}

@media only screen and (max-width: 576px) {
    .brbanner__container {
        padding-left: var(--pd-cont-sm)
    }
}

.brbanner__wrapper {
    position: relative;
}

.brbanner__image img {
    width: 100%;
    height: auto;
}

.brbanner__content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 42px;
    text-align: center;
    width: 900px;
}

.brbanner__logo img {
    width: 313px;
    height: 76px;
    object-fit: cover;
}


.brbanner__content p {
    color: var(--light-color);
}

.brbanner__content a {
    background-color: var(--dark-color);
}



/* ------ ADVICE SECTION -----  */

.advice {
    padding-top: 50px;
}


.advice .col {
    width: 50%;
}

.advice .left {
    padding-top: 47px;
}

.advice__content {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 56px;
}


.advice__content h2 {
    width: 100%;
    text-align: left;
    color: var(--dark-color);
}

.advice__text {
    color: var(--dark-color);
}

.advice__links {
    margin-top: 2px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
}

.advice__link {
    width: 100%;
    background-color: var(--lighter-grey-2);
    padding: 10px 10px 10px 28px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.advice__link-text {
    font-size: var(--font16);
    font-weight: var(--extrabold-weight);
    line-height: var(--lh30);
    color: var(--text-grey);
    letter-spacing: var(--ls5);
}

.advice .right {
    padding-left: 100px;
}

.advice__img-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}


.advice__image-bg {
    z-index: -10;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 60px);
    /* height: 100%; */
    background-color: #e0e9f2;
}

.advice__image {
    margin-left: 70px;
}

.advice__image img {
    width: 463px;
    height: 100%;
    object-fit: cover;
}

.advice__icon {
    display: inline-block;
    width: 3.2rem;
    height: 3.5rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m8.59 18.16l5.66-5.66l-5.66-5.66l-.7.71l4.95 4.95l-4.95 4.95z'/%3E%3C/svg%3E");
    background-color: var(--text-grey);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}






/* ------ NEWS -----  */


.news {
    padding-top: 70px;
    width: 100%;
    display: flex;
    align-items: end;
    display: flex;
    flex-direction: column;
}


.news__container .swiper-container {
    padding-left: calc((100vw - 1440px)/2);
    padding-right: calc((100vw - 1440px)/2);
}

@media only screen and (max-width: 1800px) {
    .news {
        padding-left: var(--pd-cont);
    }


    .news__container .swiper-container {
        padding-left: var(--pd-cont);
        padding-right: var(--pd-cont);
    }
}

@media only screen and (max-width: 576px) {
    .news {
        padding-left: var(--pd-cont-sm);
    }


    .news__container .swiper-container {
        padding-left: var(--pd-cont-sm);
        padding-right: var(--pd-cont-sm);
    }
}

.news__swiper-head {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-bottom: 44px;
}

.news__swiper-head h2 {
    color: var(--dark-color);
    width: 100%;
    text-align: left;
}



.news__slide {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 35px;
    width: 100%;
}

.news__swiper .swiper-wrapper {
    display: flex;
    flex-direction: row;

}

.news__slide-image img {
    width: 100%;
    height: auto;
    max-height: 315px;
}

.news__slide-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    height: 170px;
    justify-content: space-between;
}


.news__slide-heading {
    font-size: var(--font21);
    font-weight: var(--extrabold-weight);
    color: var(--dark-color);
    line-height: var(--lh30);
    letter-spacing: var(--lsm25);


    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.news__slide-text p {
    font-size: var(--font16);
    font-weight: var(--regular-weight);
    color: var(--dark-color);
    line-height: var(--lh30);
    letter-spacing: 0px;
    opacity: 70%;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}


.news__swiper-buttons {
    margin-bottom: -5px;
    display: flex;
    width: 130px;
    justify-content: space-between;
    align-items: center;
}

.swiper-button-next-news {
    cursor: pointer;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8l-8 8l-1.425-1.4z'/%3E%3C/svg%3E");
    background-color: var(--dark-color);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.swiper-button-next-news.swiper-button-disabled,
.swiper-button-prev-news.swiper-button-disabled {
    opacity: 20%;
    cursor: default;
}

.swiper-button-prev-news {
    cursor: pointer;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m7.825 13l5.6 5.6L12 20l-8-8l8-8l1.425 1.4l-5.6 5.6H20v2z'/%3E%3C/svg%3E");
    background-color: var(--dark-color);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

}


/* ======= COMMON ========  */
/* ----- NEWSLETTER SECTION ----- */
.newsletter {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 60px;
}


.newsletter__container {
    max-width: var(--site-container);
    width: 100%;
    display: flex;
    flex-direction: row;
    margin-bottom: 50px;
    padding-right: 6px;
}

@media only screen and (max-width: 1800px) {
    .newsletter__container {
        padding-right: var(--pd-cont)
    }
}

@media only screen and (max-width: 576px) {
    .newsletter__container {
        padding-right: var(--pd-cont-sm)
    }
}


.newsletter__img-div {
    flex: 1;
    padding-right: 120px;
}

.newsletter__image img {
    width: 100%;
    height: auto;
}

.newsletter__content {
    max-width: 720px;
    margin-top: 55px;
    display: flex;
    flex-direction: column;
    gap: 37px;
}

.newsletter__text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.newsletter__content h2,
.newsletter__content p {
    color: var(--dark-color);
}


.newsletter__input {
    width: 100%;
    background-color: var(--lighter-grey-2);
    padding: 7px 0px 7px 28px;
    height: 65px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.newsletter__input input,
.newsletter__input input::placeholder {
    font-family: 'Manrope';
    font-size: var(--font16);
    font-weight: var(--light-weight);
    color: var(--dark-color);
    line-height: var(--lh30);
    letter-spacing: var(--ls5);
}

.newsletter__input input {
    background-color: transparent;
    border: none;
    width: 100%;
    margin-right: 50px;
}

.newsletter__input input::placeholder {
    opacity: 60%;
}

.newsletter__input input:focus {
    outline: none;
}

.newsletter__input a {
    background-color: var(--dark-color);
    color: var(--light-color);
    height: 51px;
    width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* ----- INSTAGRAM FEED ----- */

.feed {
    padding-top: 100px;
}

.feed__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 42px;
}



.feed__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 17px;
}

.feed__text a {
    color: var(--dark-grey2);
    font-size: var(--font24);
    font-weight: var(--regular-weight);
    line-height: var(--lh30);
    letter-spacing: var(--ls1);
}

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

.feed__button {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 20px;
    background-color: var(--dark-color);
    padding: 0px 34px;
}

.feed__button p {
    color: var(--light-color);
}

.feed__button i {
    font-size: 27px;
    color: var(--light-color);
}

.feed__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 7px;
}

.feed__item img {
    width: 100%;
    height: 100%;
}




/* ----- FOOTER ----- */

.footer {
    margin-top: 100px;
    position: relative;
    width: 100%;
    background-color: var(--light-color);
}

.footer__inner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

}

.footer__top {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.footer__line {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    background-color: var(--dark-color);
    z-index: 0;
}



.logo-fcontainer {
    width: 100%;
    display: flex;
    justify-content: end;
}

.footer__container {
    justify-content: space-between;
    display: flex;
    position: relative;
    overflow: hidden;
    padding-bottom: 38px;
    max-width: var(--site-container);
    width: 100%;
}

@media only screen and (max-width: 1800px) {
    .footer__container {
        padding-left: var(--pd-cont);
        padding-right: var(--pd-cont);
    }
}

@media only screen and (max-width: 576px) {
    .footer__container {
        padding-left: var(--pd-cont-sm);
        padding-right: var(--pd-cont-sm);
    }
}

.footer__logo-wrapper {
    position: relative;
    max-width: 1716px;
    width: 100%;
    z-index: 9;
    display: flex;
    justify-content: start;
    align-items: center;
}

@media only screen and (max-width: 1800px) {
    .footer__logo-wrapper {
        padding-left: calc(1vw + 0rem);
    }
}

.footer__logo {
    padding: 0px 36px;
    width: 222px;
    background-color: var(--light-color);
    box-sizing: content-box;
    height: auto;
}

.footer__content {
    max-width: 900px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    width: auto;
}

.footer__text {
    max-width: 720px;
    line-height: 30px;
    color: var(--dark-color);
    opacity: 75%;

    font-size: var(--font14);
    font-weight: var(--light-weight);
    line-height: var(--lh30);
    letter-spacing: var(--ls5);
}

.footer__nav {
    margin: 50px 0px 35px 0px;
}

.footer__nav ul {
    list-style: none;
    margin: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 43px;
}

.footer__nav ul li a {
    color: var(--dark-color);
}

.footer__contact {
    padding: 30px 0px;
}

.footer__contact-list {
    list-style: none;
    margin: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 14px;
}

.footer__contact-item {
    min-width: 186px;
    display: flex;
    flex-direction: row;
    gap: 18px;
    background-color: var(--lighter-grey-2);
    padding: 0px 33px 0px 15px;
    height: 76px;
    justify-content: center;
    align-items: center;
}



.footer__contact-icon-email {
    height: 24px;
    width: 29px;
    object-fit: cover;
}

.footer__contact-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
}

.footer__contact-text .text-top {
    color: var(--dark-color);
    font-size: var(--font14);
    font-weight: var(--extrabold-weight);
    letter-spacing: 0px;
    line-height: var(--lh30);
}

@media only screen and (max-width: 1550px) {

    /* FOOTER  */
    .footer__contact-list {
        flex-direction: column;
        width: 450px;
    }

    .footer__contact-item {
        justify-content: flex-start;
        padding-left: 50px;
    }



}

.footer__contact-text .text-bottom {
    margin-top: -10px;
    color: var(--dark-color);
    font-size: var(--font14);
    font-weight: var(--light-weight);
    letter-spacing: var(--ls5);
    line-height: var(--lh30);
}

.footer__email-icon {
    margin-top: -7px;
    display: inline-block;
    width: 40px;
    height: 35px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2'/%3E%3C/svg%3E");
    background-color: var(--grey-3);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.footer__phone-icon {
    display: inline-block;
    width: 27px;
    height: 29px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath fill='%23000' d='M22.386 18.026c-1.548-1.324-3.119-2.126-4.648-.804l-.913.799c-.668.58-1.91 3.29-6.712-2.234c-4.801-5.517-1.944-6.376-1.275-6.951l.918-.8c1.521-1.325.947-2.993-.15-4.71l-.662-1.04C7.842.573 6.642-.552 5.117.771l-.824.72c-.674.491-2.558 2.087-3.015 5.119c-.55 3.638 1.185 7.804 5.16 12.375c3.97 4.573 7.857 6.87 11.539 6.83c3.06-.033 4.908-1.675 5.486-2.272l.827-.721c1.521-1.322.576-2.668-.973-3.995z'/%3E%3C/svg%3E");
    background-color: var(--grey-3);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.footer__pin-icon {
    display: inline-block;
    width: 31px;
    height: 32px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 630 850'%3E%3Cpath fill='%23000' d='M531 99q45 46 68 103t23 117t-23 117t-68 103L327 743q-7 7-16 7t-16-7L91 539q-45-45-68-103T0 319t23-117T91.5 99T194 31T311 8t117 23t103 68M383 391q15-15 22-34t7-38t-7-38t-22-34t-34-22t-38-7t-38 7t-34 22t-22 34t-8 38t8 38t22 34t34 22t38 8t38-8t34-22'/%3E%3C/svg%3E");
    background-color: var(--grey-3);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.footer__socials-list {
    list-style: none;
    margin: none;
    margin-top: 10px;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 22px;
}

.footer__socials-list li a i {
    font-size: 3.2rem;
    color: var(--dark-color);
}

.footer__image {
    height: auto;
    width: 100%;
}

.footer__image img {
    height: 100%;
}


.footer__image-wrapper {
    width: min-content;
    padding-right: 30px;
    margin-bottom: -90px;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.footer__bottom {
    box-sizing: border-box;
    background-color: var(--dark-color);
    width: 100%;
    padding: 18px 0px;
    border: 1px solid var(--light-color);

}

.footer__bottom-container {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.footer__bottom-text {
    letter-spacing: 0px;
    color: var(--light-color);
    font-size: var(--font15);
    font-weight: var(--light-weight);
    line-height: var(--lh30);
    opacity: 65%;
}

.footer__bottom-links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 49px;
}

.footer__bottom-creds {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3px;
}

.footer__bottom-creds a {
    font-weight: var(--extrabold-weight);
}







/* ======= NEWS ========  */



/* ------ NEWS MAIN -----  */
/* .news-main__container .news-main-swiper {
    position: relative;
}

.swiper-newsmain-nav {
    z-index: 10000;
    position: absolute;
    bottom: 30px;
    right: 160px;
}

.swiper-button-next-newsmain {
    cursor: pointer;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.175 13H4v-2h12.175l-5.6-5.6L12 4l8 8l-8 8l-1.425-1.4z'/%3E%3C/svg%3E");
    background-color: var(--light-color);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}


.swiper-button-next-newsmain.swiper-button-disabled,
.swiper-button-prev-newsmain.swiper-button-disabled {
    opacity: 20%;
    cursor: default;
}

.swiper-button-prev-newsmain {
    cursor: pointer;
    display: inline-block;
    width: 4rem;
    height: 4rem;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m7.825 13l5.6 5.6L12 20l-8-8l8-8l1.425 1.4l-5.6 5.6H20v2z'/%3E%3C/svg%3E");
    background-color: var(--light-color);
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

}

.news-main__image {
    width: 100%;
    height: auto;
}


.news-main__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.8) 10%, 
        rgba(0, 0, 0, 0.5) 25%, 
        rgba(0, 0, 0, 0.3) 40%, 
        rgba(0, 0, 0, 0.1) 55%,  
        rgba(0, 0, 0, 0) 70%
  );
}

.news-main__image img{
    width: 100%;
    height: 450px;
}

.news-main__info {
    color: var(--light-color);
    position: absolute;
    top: 80%;
    left: 60px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
    padding: 10px 10px;
    gap: 30px;

    
}


.news-main__info a p{
    color: var(--light-color);
}


.news-main__info p{
    max-width: 60%;    
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;

}


.news-main__text {
    display: flex;
    flex-direction: column;
    gap: 10px;
} */


/* ----- NEWS GRID -----  */




.news-grid__grid {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 50px;
}

.news-grid__item {
    display: flex;
    flex-direction: row;
    gap: 30px;
}


/* .news-grid__item .left , .news-grid__item .right{
    width: 50%;
} */


.news-grid__item .left {
    width: 50%;
    padding-right: 70px;
}

.news-grid__item .right {
    width: 50%;
    padding: 30px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.news__grid-image img {
    height: 380px;
    width: 100%;
}

.news-grid__text {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


.news-grid__text .text3 {
    font-size: var(--font16);
    font-weight: var(--regular-weight);
    color: var(--dark-color);
    line-height: var(--lh30);
    letter-spacing: 0px;
    opacity: 70%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}


.news-grid__item-date {
    font-size: var(--font14);
    font-weight: var(--regular-weight);
    letter-spacing: var(--ls5);
    color: var(--text-grey);
}

.news-grid__item-heading {
    font-size: var(--font24);
    font-weight: var(--extrabold-weight);
    color: var(--dark-color);
    line-height: var(--lh30);
    letter-spacing: var(--lsm25);

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}


.news-grid__item .button2 {
    background-color: var(--dark-color);
}

.news-grid__item .button2 p {
    color: var(--light-color);
}




/* ------- ARTICLE PAGE ------- */

.article-hero.hero-section {
    height: 150px;
}

.article-top__content {
    position: relative;
}

.article-top__image img {
    width: 100%;
    height: 450px;
    object-position: center;
}

.article-top__overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.8) 10%,
            rgba(0, 0, 0, 0.5) 25%,
            rgba(0, 0, 0, 0.3) 40%,
            rgba(0, 0, 0, 0.1) 55%,
            rgba(0, 0, 0, 0) 70%);
}

.article-top__title {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 40px;
    margin-left: 40px;
}


.article-top__title h2 {
    color: var(--light-color);
}


.article-body.home-section {
    padding-top: 0px;
}


.article-head {
    font-weight: var(--extrabold-weight) !important;
    font-size: var(--font21);
}

.article-text-wrapper {
    margin: 0px 40px;
}

.article-text-wrapper .col {}

.article-list {
    margin: 0px !important;
}

.article-link,
.article-link:hover {
    color: rgb(70, 129, 218) !important;
    font-weight: var(--bold-weight);
}

.article-link:hover {
    text-decoration: underline;
}


.article-image1 {
    margin-left: 50px;
    float: right;
}

.article-image2 {
    margin-right: 50px;
    float: left
}




/* ------ ADVICE GRID ------ */
.advice-grid .grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.advice-grid .grid a:nth-child(odd) {
    margin-top: 50px;

}

.advice-grid .grid a {
    position: relative;
}


.advice-grid .box {
    cursor: pointer;
    width: 100%;
    height: 450px;
    background-color: var(--skeletoi-page-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, translate 0.3s ease-in-out, box-shadow 0.3s ease, background-color 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px 50px;
}

.advice-grid .box.image-box {
    justify-content: flex-end;
    background: url("../images/advice-homepage.png") no-repeat center top;
    background-size: contain;
    background-color: #e0e9f2;
    padding: unset;
}

.advice-grid .box.image-box h5 {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(21px);
    padding: 5px;
    color: var(--light-color);
}

.advice-grid .box.side-box {
    /* justify-content: center;
    align-items: center; */
    justify-content: center;
    text-align: left;
    color: var(--text-grey);
    gap: 40px;

}

.advice-grid .box .quote-box {
    width: 100%;
    height: 270px;
    border: 4px solid var(--grey-2);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
}

.advice-grid .box .quote-box p {
    text-align: center;
}

.advice-grid .box:hover {
    /* transform: scale(1.02); */
    translate: 0px -10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);

}

.advice-grid .box h5 {
    font-size: var(--font24);
    font-weight: var(--extrabold-weight);

}


.advice-grid__quote-img {
    position: absolute;
    background-color: var(--skeletoi-page-color);
    padding: 10px 10px;
}

.advice-grid__quote-img img {
    width: 70px;
    height: auto;
}


.advice-grid__quote-img.left {
    top: -30px;
    left: -30px;
}

.advice-grid__quote-img.right {
    bottom: -30px;
    right: -30px;
    rotate: -180deg;
}


/* BRANDS PAGE  */
.brands-header {
    display: flex;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.brands-header .heading3 {
    color: var(--text-grey);
}




/* BRANDS PAGE  */
.brands-header {
    display: flex;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 40px;
}

.brands-header .heading3 {
    color: var(--text-grey);
}


/* ------ PRODUCTS GRID ------  */
.products-wrapper-outer-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.products-wrapper-outer-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.products-wrapper-inner {
    width: 100%;
    max-width: var(--site-container);
}

.products-grid .grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 120px;
    overflow-x: hidden;
}

.products-grid .grid-item {
    display: flex;
    flex-direction: row;
}

.products-grid .grid-item .left,
.products-grid .grid-item .right {
    width: 50%;
}

.products-wrapper-outer-left .products-grid__image {
    padding-right: 60px;

}

.products-wrapper-outer-right .products-grid__image {
    padding-left: 60px;

}


.products-grid__image img {
    width: 100%;
    height: 450px;
}

.products-wrapper-outer-left .grid-item .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 30px;
}

@media only screen and (max-width: 1800px) {
    .products-wrapper-outer-left .grid-item .right {
        padding-right: 6rem;
    }
}

.products-wrapper-outer-right .grid-item .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
}

@media only screen and (max-width: 1800px) {
    .products-wrapper-outer-right .grid-item .left {
        padding-left: 6rem;
    }
}

.products-grid__text {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.products-grid__text h3,
.products-grid__text p {
    color: var(--dark-color);
}

.products-grid .button2 {
    background-color: var(--dark-color);
    color: var(--light-color);

}

/* ---- LAB ---- */

.lab-text-top {
    padding: 50px 0px;
}

.lab-text-top__container {
    display: flex;
    flex-direction: column;
}


.lab-list {
    margin: 0px;
}

.lab-text-details {
    padding-top: 0px;
}

.lab-text-details__container {

    display: flex;
    flex-direction: column;
    gap: 60px;
}

.lab-head {
    color: var(--text-grey)
}

.lab-text-details .row {
    display: flex;
    flex-direction: row;
}

.lab-text-details .row picture {
    padding-right: 120px;
    width: 50%;

}

.lab-text-details .row picture img {
    width: 100%;

}

.lab-details-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 6rem 0;
    gap: 15px;
}

.lab-details-text h5,
.lab-details-head2 {
    font-size: var(--font21);
    font-weight: var(--extrabold-weight);
    letter-spacing: var(--lsm1);
    color: var(--dark-color);
}

.lab-details-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.lab-details-list {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.lab-details-list li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tick-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 14.5s1.5 0 3.5 3.5c0 0 5.559-9.167 10.5-11' color='%23000'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.x-icon {
    display: inline-block;
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23000' d='m12 13.414l5.657 5.657a1 1 0 0 0 1.414-1.414L13.414 12l5.657-5.657a1 1 0 0 0-1.414-1.414L12 10.586L6.343 4.929A1 1 0 0 0 4.93 6.343L10.586 12l-5.657 5.657a1 1 0 1 0 1.414 1.414z'/%3E%3C/g%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.lab-text-top__container {
    display: flex;
    flex-direction: row;

    gap: 20px;
}

.lab-text-top__container .col {
    width: 50%;
}

.optometry-image {
    position: sticky;
    position: -webkit-sticky;
    top: 160px;
    /* padding: 60px 20px; */
    max-height: 500px;
    width: 100%;
    height: 100%;
    padding-left: 60px;
    padding-right: 60px;

}

.optometry-image img {
    /* max-height: 450px; */
    max-height: 500px;
    width: 100%;
    height: auto;

}


.lab1-image {
    position: sticky;
    position: -webkit-sticky;
    top: 160px;
    /* padding: 60px 20px; */
    max-height: 500px;
    width: 100%;
    height: 100%;
    padding-left: 120px;

}

.lab1-image img {
    max-height: 500px;
    width: 100%;
    height: auto;

}


.lab2-image {
    position: sticky;
    position: -webkit-sticky;
    top: 160px;
    /* padding: 60px 20px; */
    max-height: 500px;
    width: 100%;
    height: 100%;
    padding-right: 120px;
}

.lab2-image img {
    max-height: 500px;
    width: 100%;
    height: auto;

}


.lab-details-list li {
    align-items: start;
}


/* ======== 404 ==========  */
.nfound-page-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.nfound-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
}


.nfound-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    gap: 40px;
}

.text-404 {
    font-size: 20vw;
    line-height: 1;
    font-style: italic;
    font-weight: 900;
    color: var(--dark-color);
}

.nfound-text {
    text-align: center;
    font-size: 3rem;
}

.nfound-buttons {
    display: flex;
    gap: 20px;
}

.button-404-back {
    background-color: var(--dark-color);

}

.button-404-back p {
    color: var(--light-color);
}

.button-404-contact {
    background-color: var(--light-grey-2);
}

.button-404-contact p {
    color: var(--text-grey);
}



/* LANGUAGE SWITCHER  */
.header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.lang-switcher {
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.lang-item {
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--light-color);
}

.lang-item-active {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--light-color);
}

.mobile-menu-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

/* ======== MEDIA QUERIES ======== */




/* ------ XL ------  */
@media only screen and (max-width: 1400px) {

    /* HOMEPAGE */
    /* ABOUT  */

    .about__info {
        gap: 40px;
    }

    .about .inner-wrapper {
        gap: 80px;
    }

    .about__map-pic {
        top: 0px;
        left: -50px;
    }

    .about__map-pic img {
        max-width: 650px;
    }


    /* NEWSLETTER */
    .newsletter__image {
        height: 100%;
    }

    .newsletter__image img {
        height: 100%;
        object-position: right;
    }

    .newsletter__content {
        max-width: 50%;
    }



    /* FOOTER */
    .footer__image-wrapper {
        padding-right: 0px;
    }

    .footer__nav ul {
        gap: calc(0.4rem + 1vw)
    }


    /* NEWS GRID  */
    .news-grid__item .left {
        padding-right: 40px;
    }

    .news-grid__item .right {
        padding-right: 40px;
    }

    /* ADVICE GRID  */
    .advice-grid .grid {
        gap: 20px;
    }


    .advice-grid__quote-img img {
        width: 35px;
    }

    .advice-grid .box {
        padding: 15px 40px;
        height: 500px;
    }

}



/* ------ LG ------  */
@media only screen and (max-width: 1440px) {

    .link-list {
        gap: 25px;
    }

    .home-section {
        padding: 60px 0px !important;
    }

    /* ABOUT */
    .about .inner-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .about .col {
        width: 100%;
        align-items: center;
    }

    .about .left {
        order: 2;
    }

    .about .right {
        order: 1;
    }

    .about__info {
        align-items: center;
    }

    .about__map-pic {
        left: 50%;
        transform: translateX(-50%);
    }

    .about__map-pic img {
        width: 600px;
    }


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

    .about__info .text1 {
        padding-right: calc(1vw + 5rem);
        padding-left: calc(1vw + 5em);
        text-align: center;
    }


    /* PRODUCTS */
    .products .inner-wrapper,
    .services .inner-wrapper {
        flex-direction: column;
    }

    .products .col,
    .services .col {
        width: 100%;
    }


    .products .left {
        order: 2;
        align-items: center;
    }

    .products .right {
        order: 1;
    }

    .services .left {
        order: 2;

    }

    .services .right {
        order: 1;
        align-items: center;
        padding-bottom: 6rem;
    }

    .products__image img,
    .services__image img {
        min-height: unset;
        height: 500px;
        object-position: center;
    }


    .products__acc-item,
    .services__acc-item {
        align-items: center;
    }



    /* BRANDS BANNER  */
    .brbanner__container {
        padding-left: 0px;
    }

    .brbanner__logo img {
        width: 240px;
        height: auto;
    }


    /* ADVICE */
    .advice .inner-wrapper {
        flex-direction: column;
    }

    .advice .col {
        width: 100%;
    }

    .advice .left {
        order: 2;
    }

    .advice .right {
        order: 1;
        padding-left: calc(1vw + 15rem);
        padding-right: calc(1vw + 15rem);
    }

    .advice__image img {
        width: 400px;
    }

    .advice__content {
        text-align: center;
    }

    .advice__content h2 {
        text-align: center;
    }


    .advice__links {
        padding-left: calc(1vw + 15rem);
        padding-right: calc(1vw + 15rem);
    }

    /* NEWSLETTER */
    .newsletter {
        padding: 60px 0px !important;
        margin-bottom: 0px;
    }

    .newsletter__container {
        margin-bottom: 0px;
    }

    /* FEED */
    .feed {
        padding: 60px 0px;
    }

    /* FOOTER  */
    .footer {
        padding-top: 60px;
        margin-top: 0px;
    }

    .footer__logo-wrapper {
        padding-left: 2.5rem;
    }

    .footer__image img {
        width: 470px;
    }

    .footer__nav ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    /* ADVICE GRID  */
    .advice-grid .grid {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .advice-grid .grid .quote-box {
        padding: 30px;
        height: auto;
    }

    .advice-grid .grid a:nth-child(odd) {
        margin-top: 0px;
        width: 500px;
        height: 400px;
        margin-right: auto;
    }

    .advice-grid .grid a:nth-child(2) {
        width: 500px;
        height: 400px;
        margin-left: auto;
    }



}


/* MD  */
@media only screen and (max-width: 992px) {
    /* ABOUT  */

    .about__store-circle {
        top: -77px
    }

    .about__store-circle img {
        width: 150px;
        height: 150px;
    }

    /* PRODUCTS & SERVICES  */

    .products__image img,
    .services__image img {
        height: 450px;
    }


    /* BRANDS BANNER  */
    .brbanner__image img {
        height: 450px;
    }

    .brbanner__content {
        width: 700px;
        padding-left: 6rem;
        padding-right: 6rem;
    }


    /* ADVICE */
    .advice .right {
        padding-left: 6rem;
        padding-right: 6rem;
    }

    .advice__links {
        padding: 0px;
    }


    /* NEWSLETTER */
    .newsletter__container {
        flex-direction: column;
        align-items: center;
    }

    .newsletter__content {
        max-width: unset;
        padding-left: var(--pd-cont);
        padding-right: var(--pd-cont);
    }

    /* NEWS */
    .news {
        padding-left: 0px;
    }

    /* INSTAGRAM FEED  */
    .feed__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .feed__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }


    /* FOOTER  */
    .footer__container {
        flex-direction: column;
        gap: 50px;
        align-items: center;
        justify-content: flex-start;
    }

    .footer__text {
        text-align: center;
    }

    .footer__nav {
        align-items: center;
    }

    .footer__nav ul {
        text-align: center;
    }

    .footer__contact-list {
        flex-direction: row;
        width: 100%;
        gap: 7px;
    }

    .footer__contact-item {
        min-height: 180px;
        height: auto;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        text-align: center;
        padding: 30px 30px 15px 30px;
    }

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

    .footer__contact-text .text-top {
        line-height: 20px;
        margin-bottom: 10px;
    }


    .footer__email-icon,
    .footer__phone-icon,
    .footer__pin-icon {
        height: 35px;
    }

    .footer__socials-list {
        justify-content: center;
    }



    /* NEWS GRID  */

    .news-grid__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        row-gap: 100px;
        column-gap: 70px;
    }

    .news-grid__item {
        flex-direction: column;
    }

    .news-grid__item .left,
    .news-grid__item .right {
        width: 100%;
        padding: 0px;
    }

    .news-grid__item .right {
        justify-content: center;
        gap: 30px;
    }

    .news__grid-image img {
        height: 300px;
    }

    /* --- PRODUCTS GRID ----  */
    .products-grid .grid-item {
        flex-direction: column;
        gap: 30px;
    }

    .products-grid .grid {
        grid-template-rows: repeat(3, auto);

    }

    .products-grid .grid-item .left,
    .products-grid .grid-item .right {
        width: 100%;
    }

    .products-wrapper-outer-left .products-grid__image {
        padding-right: 0px;
    }

    .products-wrapper-outer-right .products-grid__image {
        padding-left: 0px;
    }

    .products-wrapper-outer-left .grid-item .right {
        max-width: 720px;
        padding: 0 6rem;
        margin: auto;
    }

    .products-wrapper-outer-right .grid-item .left {
        order: 2;
        padding: 0 6rem;
        max-width: 720px;
        margin: auto;
    }

    .products-wrapper-outer-right .products-grid__image img {
        max-height: 400px;
    }

    .products-wrapper-outer-left .products-grid__image img {
        max-height: 400px;
    }


    /* HUVITZ  */
    .lab-text-details .row {
        flex-direction: column;
    }

    .lab-text-details .row picture {
        width: 100%;
        padding: 0px;
    }

    .lab-text-details .row picture img {
        max-height: 400px;
    }

    .lab-details-text {
        width: 100%
    }

    .lab-text-top__container .col {
        width: 100%;
    }

    .lab-text-top__container {
        flex-direction: column;
        gap: 60px;
    }

    .optometry-image,
    .lab1-image,
    .lab2-image {
        padding: 0px;
    }

    .lab1-image img,
    .lab2-image img {
        height: auto;
        max-width: unset;
        width: 100%
    }

    .lab-text-top__container .col.text-col {
        order: 2;
    }

    .lab-text-top__container .col.image-col {
        order: 1;
    }


}



/* SM */
@media only screen and (max-width: 768px) {
    /* ABOUT */

    .about__map-pic {
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .about__map-pic img {
        width: 500px;
    }

    .about__info .text1 {
        padding: 0px;
    }

    .about__store-pic img {
        width: 400px;
        height: 221px;
    }

    .about__store-bg {
        width: 400px;
        height: 221px;
    }

    .about__store-circle {
        top: -70px;
        left: 330px;
    }

    .about__store-circle img {
        width: 130px;
        height: 130px;
    }


    /* BRANDS BANNER  */
    .brbanner__content {
        width: 500px;
        padding-left: 6rem;
        padding-right: 6rem;
    }


    /* ADVICE  */
    .advice .right {
        padding-left: 0px;
        padding-right: 0px;
    }


    /* NEWSLETTER  */
    .newsletter__img-div {
        padding-right: 60px;
    }


    /* FEED */
    .feed__grid {
        gap: 2px;
    }

    /* FOOTER  */
    .footer__content {
        max-width: unset;
        width: 100%;
    }

    .footer__nav ul {
        grid-template-columns: 1fr;
    }

    .footer__contact-list {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .footer__contact-item {
        min-height: unset;
        height: auto;
        flex: 1;
        display: flex;
        gap: 7px;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        text-align: center;
        padding: 30px 30px 15px 30px;
    }

    .footer__bottom-container {
        flex-direction: column;
        align-items: center;
    }

    .footer__bottom-links {
        gap: 15px;
    }


    /* NEWS GRID  */

    .news-grid__grid {
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(1, 1fr);
        row-gap: 80px;
    }

    /* ADVICE GRID  */

    .advice-grid .grid {
        grid-template-rows: repeat(3, auto);
    }

    .advice-grid .grid a:nth-child(odd) {

        width: 100%;
        height: 100%;
        margin-right: 0px;
        padding: 30px;
        min-height: 350px;

    }

    .advice-grid .grid a:nth-child(2) {
        width: 100%;
        height: 100%;
        margin-left: 0px;
        height: 400px;

    }

}


/* XS */
@media only screen and (max-width:576px) {

    .text1,
    .text2,
    .text3 {
        font-size: var(--font14);
        line-height: 27px;
    }

    .heading1 {
        font-size: var(--font30);
        line-height: var(--lh30);
    }

    .heading2 {
        font-size: var(--font24);
    }


    .heading3 {
        font-size: var(--font24);
    }

    .button1,
    .button2 {
        width: 100%
    }

    .button-text1 {
        font-size: var(--font14);
    }

    .button-text2 {
        font-size: 1.3rem;
    }

    /* ABOUT */
    .about {
        overflow-x: hidden;
    }

    .about__map-pic img {
        width: 400px;
    }

    .about__store-pic img {
        width: 240px;
        height: 132px;
    }

    .about__store-bg {
        width: 240px;
        height: 132px;
    }

    .about__store-circle {
        top: -37px;
        left: 200px;
    }

    .about__store-circle img {
        width: 70px;
        height: 70px;
    }

    .about .inner-wrapper {
        gap: 50px;
    }


    /* PRODUCTS & SERVICES  */
    .products__image img,
    .services__image img {
        height: 400px;
    }

    .products__acc-info .text2,
    .services__acc-info .text2 {
        padding-right: 0px;
    }

    .products__acc-item,
    .services__acc-item {
        align-items: flex-start;
    }

    .products__icon,
    .services__icon,
    .products__acc-item.active .products__icon,
    .services__acc-item.active .services__icon {
        width: 3rem;
        height: 3rem;
    }

    .products__acc-head,
    .services__acc-head {
        gap: 1rem;
    }

    .products__acc-head .heading3,
    .services__acc-head .heading3 {
        max-width: 300px;
        width: 100%;
    }

    .acc-inner-wrapper,
    .acc-inner-wrapper2 {
        max-width: unset;
        width: 100%;
        padding-right: 3rem;
    }


    /* BRANDS BANNER */
    .brbanner__content {
        width: 100%;
        padding-left: 3rem;
        padding-right: 3rem;
    }

    .brbanner__image img {
        height: 600px;
        object-position: -470px center;
    }

    .brbanner__content {
        gap: 30px;
    }


    /* ADVICE  */
    .advice__image img {
        width: 200px;
    }

    .advice__image {
        margin-left: 30px;
    }

    .advice__text,
    .advice__content h2 {
        text-align: left;
    }

    .advice__links {
        gap: 7px;
    }

    .advice__link {
        padding: 10px 15px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    .advice__link-text {
        max-width: 70%;
    }




    /* NEWS  */
    .news__swiper-head {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

    .news__slide {
        gap: 25px;
    }

    .news__slide-text {
        height: 160px;
    }

    .news__slide-text p {
        font-size: var(--font14);
    }

    .news__swiper-head h2 {
        text-align: start;
    }

    .swiper-button-prev-news,
    .swiper-button-next-news {
        width: 3rem;
        height: 3rem;
    }

    .news__swiper-buttons {
        width: 90px;

    }

    .news__slide-heading {
        font-size: var(--font16);
    }


    /* NEWSLETTER  */
    .newsletter__img-div {
        padding-right: 0px;
    }

    .newsletter__content {
        padding-left: var(--pd-cont-sm);
        padding-right: var(--pd-cont-sm);
        max-width: unset;
        padding-right: 0px;
        width: 100%;
    }

    .newsletter__input {
        flex-direction: column;
        padding: 0px;
        gap: 7px;
        background-color: transparent;
        height: auto;
        align-items: flex-start;
    }


    .newsletter__input input {
        margin-right: 0px;
        padding: 5px 10px;
        background-color: var(--lighter-grey-2);
    }

    .newsletter__input a {
        width: 150px;
        height: 50px;
    }


    /* FEED */
    .feed__text a {
        font-size: var(--font21);
    }

    .feed__button {
        padding: 0px 10px;
        width: 100%;
        justify-content: center;
        height: 50px;
    }

    .feed__grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .feed__item:nth-child(n+5) {
        display: none;
    }



    /* FOOTER  */

    .footer__logo-wrapper {
        padding-left: 0px;
        justify-content: center;
    }

    .footer__logo {
        padding: 0px 25px;
        width: 150px;

    }

    .footer__contact-item {
        padding: 20px 30px 15px 30px;
    }

    .footer__image img {
        width: 320px;
    }

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


    /* NEWS GRID  */
    .news-grid__item-heading {
        font-size: var(--font21);
    }


    /* ARTICLES */
    .article-top__title {
        height: min-content;
        padding: 0px 10px;
        width: 100%;
        margin: 0px;
        left: 50%;
        top: 70%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .article-text-wrapper {
        margin: 0px;
    }

    .article-image1 {
        margin-left: 0px;
        margin: auto;
        max-width: 300px;
        float: none;
    }


    .article-image1 img {
        max-width: 300px;
        margin-bottom: 30px;
    }

    .article-image2 {
        margin-right: 0px;
        margin: auto;
        max-width: 300px;
        float: none;
    }


    .article-image2 img {
        max-width: 300px;
        margin-bottom: 30px;
    }

    .article-image3 {
        margin-right: 0px;
        margin: auto;
        max-width: 300px;
    }


    .article-image3 img {
        max-width: 300px;
        margin-bottom: 30px;
    }

    .article-caption {
        margin-right: 0px !important;
        margin-bottom: 20px;
    }



    .lab-details-list li p {
        max-width: 75%;
    }

    .lab-details-text h5,
    .lab-details-head2 {
        font-size: var(--font16);
    }

    .nfound-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .button-404-back,
    .button-404-contact {
        width: 200px !important;
    }

    .nfound-text {
        font-size: 2rem;
    }

    .lang-item {
        font-size: 1.4rem;

    }

    .lang-item-active {
        font-size: 1.4rem;
    }
}





/* skeletoi page */

.hero-section {
    position: relative;
    height: 280px;
    overflow: hidden;
}

.skeletoi-hero-background {
    position: absolute;
    /* To ensure it stays within .hero-section */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
}

.skeletoi-hero-background picture {
    width: 100%;
    height: 100%;
    display: block;
}

.skeletoi-hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.header-info {
    color: var(--light-color);
    line-height: var(--lh60);
    letter-spacing: var(--lsm25);
    display: flex;
    height: 100%;
    align-items: flex-end;
    padding-bottom: 3rem;
}

.skeletoi-text {
    max-width: 145ch;
    padding: 3.5rem 0;
    line-height: var(--lh30);
    letter-spacing: var(--ls5);
}


.brands-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Fixed 4 columns at the largest size */
    gap: 20px;
    max-width: 1440px;
    margin: 0 auto;
}

.brand-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 250px;
    /* Minimum width */
    width: 100%;
    /* Fill the grid cell */
    height: 150px;
    /* Fixed height */
    background-color: var(--skeletoi-page-color);
    box-sizing: border-box;
    overflow: hidden;
    /* Prevent content from spilling out */
    transition: all 0.3s ease;
    padding: 20px;
    min-height: 120px;
}


.brand-container picture {
    width: 100%;
    display: flex;
    justify-content: center;
}

.brand-container img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    width: auto;
    height: auto;
}

.brand-container:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

@media (max-width: 1200px) {
    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns */
    }
}

@media (max-width: 900px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns */
    }
}

@media (max-width: 550px) {
    .brands-grid {
        grid-template-columns: 1fr;
        /* 1 column */
    }

    .brand-container {
        width: 100%;
        /* Full width on mobile */
        margin: 0 auto;
        /* Center the container */
    }
}

/* If grid cells become too small to fit min-width containers */
@media (max-width: 1440px) {
    .brands-grid {
        justify-content: center;
        /* Center the grid items */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* Falls back to auto-fit when there's not enough space for 4 fixed columns */
    }
}



.skeletoi-tips {
    margin-top: 100px;
}

.tips-text {
    position: relative;
    padding: 7rem 0;
}

.tips-text p {
    line-height: var(--lh36);
    letter-spacing: var(--lsm1);
}

.tips-text picture {
    position: absolute;
    top: 5px;
    left: -33px;
}

.tips-container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Start with 3 columns */
    gap: 55px;
    max-width: 1440px;
    margin: 0 auto;
    margin-bottom: 100px;
}

.tips-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: auto;
    /* Allow height to adjust to content */
}

.tips-container-title {
    background-color: var(--dark-color);
    color: var(--light-color);
    line-height: var(--lh30);
    letter-spacing: var(--ls5);
}

.tips-container-title {
    padding: 0.3rem 1rem;
}

.tips-container-line {
    display: flex;
    gap: 3rem;
}

.tips-container-data {
    line-height: var(--lh30);
    letter-spacing: var(--ls1);
    flex: 1;
}

.tips-container-number {
    letter-spacing: var(--ls1);
}

.tips-container-body {
    padding: 2.5rem 0rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


.extra-tip-container {
    display: flex;
    border: 20px solid var(--extra-tip-border-color);
    height: 100%;
    width: 100%;
    padding: 10px;
}

.extra-tip {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    border: 2px solid var(--extra-tip-border-color);
    padding: 1rem;
}

.extra-tip-body {
    text-align: center;
    line-height: var(--lh30);
    letter-spacing: var(--ls25);
}

.extra-tip-body p {
    max-width: 30ch;
}

.extra-tip-head {
    letter-spacing: var(--lsm25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.extra-tip-head picture img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Media queries for responsive behavior */
@media (max-width: 1100px) {
    .tips-container-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns */
    }
}

@media (max-width: 700px) {
    .tips-container-grid {
        grid-template-columns: 1fr;
        /* 1 column */
    }

    .tips-container {
        width: 100%;
        /* Full width on mobile */
        margin: 0 auto;
        /* Center the container */
    }
}

/* For very large screens, maintain max 3 columns with reasonable width */
@media (min-width: 1441px) {
    .tips-container-grid {
        grid-template-columns: repeat(3, minmax(400px, 1fr));
        max-width: 1600px;
    }
}

@media (min-width: 480px) {
    .extra-tip-head {
        text-align: center;
    }
}

#test {
    object-fit: unset;
}

/* Bold weight class */
.bold_weight {
    font-weight: 700;
}

/* header  hover animations */
.navbar-links {
    position: relative;
}

/* .navbar-links > a {
    text-decoration: none;
    padding: 10px 15px;
    display: block;
} */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 43px;
    left: 0;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem;
    list-style: none;
    border-radius: 10px;
    background-color: var(--dropdown-color);
    backdrop-filter: blur(21px);
    transition: background-color 0.3s, backdrop-filter 0.3s;
}

.dropdown-menu li {
    padding: 10px 15px;
}


.dropdown-menu a {
    color: white;
    text-decoration: none;
    display: block;
}

.stickyHeader .dropdown-menu {
    backdrop-filter: blur(21px);
    border-top-left-radius: unset;
    border-top-right-radius: unset;

}

.navbar-links a {
    position: relative;
    letter-spacing: var(--ls3);
}

.underline a::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--light-color);
    transition: width 0.3s ease;
    transform: translateX(-50%);
}

.underline a:hover::after {
    width: 110%;
}



.socials-list a::after {
    all: unset;
}

.socials-list a {
    transition: all 0.2s ease;
}

.socials-list a:hover {
    scale: 0.90;
}


/* --- brands page css ---  */

.brands-text-container {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.brands-info-text picture img {
    width: 100%;
    height: auto;
    max-width: 316px;
    object-fit: contain;
}

.brands-text-paragraph {
    line-height: var(--lh30);
    letter-spacing: var(--ls25);
    max-width: 66ch;

}

.brands-info-text {
    display: flex;
    padding-top: 3.5rem;
    padding-bottom: 7rem;

}

.brands-info-text picture {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 3rem;
    background-color: var(--brands-page-color);
    height: 417px;
    width: 417px;
}

.brand-set-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

}

/* Medium screens - 2 items per row */
@media (max-width: 1200px) {
    .brand-set-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile screens - 1 item per row */
@media (max-width: 640px) {
    .brand-set-container {
        grid-template-columns: 1fr;
    }

    .brand-container {
        min-height: 100px;
    }
}

.more-brands-area {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.mobile-dropdown-container {
    display: flex;
}

.mobile-dropdown-container i {
    margin-left: auto;
    font-size: 25px;
    transition: transform 0.3s ease;
}

.expand-area {
    width: 100%;
    display: flex;
}

.dropdown-mobile-menu {
    list-style: none;
    display: none;
    margin-top: 1rem;
}

.dropdown-mobile-menu li {
    margin-bottom: 1rem;
}

.dropdown-mobile-menu.active {
    display: flex;
    /* Set flex when active */
}

.expand-area i.rotate {
    transform: rotate(180deg);
}

/* --- contact page css --- */
.contact-info {
    display: flex;
    flex-direction: column;
}



.message-container {
    display: flex;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-form input,
textarea {
    background-color: var(--lighter-grey-2);
    border: none;
    padding: 1rem;
    min-height: 50px;
}

.contact-info-containers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style-type: none;
    padding: 5rem 0;
    margin: 0;
}

.contact-item {
    background-color: var(--lighter-grey-2);
    letter-spacing: var(--ls5);
    display: flex;
    flex-direction: column;
    padding: 2rem 3.5rem;
    gap: 1rem;
}


.message-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    padding: 0;
    margin: 0;
}

.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-container iframe {
    width: 100%;
    box-shadow: 0 0 22px 0px rgba(0, 0, 0, 0.25);
}

#message {
    font-family: inherit;
}

#form-submit {
    background-color: #000000;
    color: white;
    width: 150px;
    transition: all 0.2s ease;
    height: 51px;
    padding: 0;
}

#form-submit:hover {
    cursor: pointer;
    transform: scale(0.95);
}

.input-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media screen and (max-width: 1200px) {
    .message-container {
        grid-template-columns: 1fr;
        gap: 5rem;

    }

    .contact-form {
        order: 2;
    }

    .contact-info-containers {
        grid-template-columns: 1fr;
    }
}

/* --- about section ---  */

.about-content-item {
    display: flex;
}

.about-image-container {
    will-change: transform;
    position: relative;
}

.about-image-container picture {
    width: 100%;
    max-width: 500px;
    height: auto;
}

.about-image-container picture img {
    width: 100%;
}

.about-text {
    max-width: 70ch;
    text-align: center;
    flex: 1;
    margin: auto;
    padding: 0 2rem;
    will-change: transform;
    line-height: var(--lh30);
    letter-spacing: var(--ls5);
}

.about-page-content {
    display: flex;
    flex-direction: column;
    gap: 6rem;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.about-image-background {
    position: absolute;
    z-index: -10;
    width: 100%;
    height: 100%;
    background-color: var(--light-grey-2);
}

.about-image-container:hover .about-image-background {
    transform: rotate(-10deg);
}

.slide-in-left,
.slide-in-right {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(0);
    transition: all 0.5s ease-out;
}

/* Slide in from left */
.slide-in-left {
    transform: translateX(-100%);
}

.slide-in-left.appear {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

/* Slide in from right */
.slide-in-right {
    transform: translateX(100%);
}

.slide-in-right.appear {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}

.about-image-background.rotate {
    transform: rotate(10deg);
    transition: transform 0.8s ease-out;
}

.legal-section {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    line-height: var(--lh30);
    letter-spacing: var(--ls5);
}

.cookies-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.legal-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

#homePage {
    overflow: hidden;
}