/*==================================================
    TOP BAR — TABLET
==================================================*/

@media (max-width: 768px){

    .topbar{

        height:auto;

        padding:10px 0;

    }

    .topbar__container{

        height:auto;

        flex-wrap:wrap;

        gap:8px 20px;

    }

    .topbar__left,
    .topbar__right{

        flex-wrap:wrap;

    }

    .topbar__right{

        gap:15px 24px;

    }

}


/*==================================================
    TOP BAR — MOBILE
==================================================*/

@media (max-width: 576px){

    .topbar__container{

        justify-content:center;

        text-align:center;

    }

    .topbar__left,
    .topbar__right{

        width:100%;

        justify-content:center;

    }

    .topbar__right{

        gap:8px 18px;

    }

    .topbar__link{

        font-size:13px !important;

    }

}

/*==================================================
    MAIN NAVIGATION — LARGE TABLET
==================================================*/

@media (max-width: 1200px){

    .homepage__top{

        grid-template-columns:240px minmax(0,1fr);

    }

    .homepage__category-nav{

        padding:0 18px;

        font-size:16px;

    }

    .homepage__menu{

        gap:22px;

        padding:0 20px;

    }

    .homepage__menu a{

        font-size:14px;

    }

}


/*==================================================
    MAIN NAVIGATION — TABLET
==================================================*/

@media (max-width: 992px){

    .homepage__top{

        grid-template-columns:210px minmax(0,1fr);

    }

    .homepage__category-nav{

        padding:0 14px;

        font-size:14px;

    }

    .homepage__category-nav i{

        margin-right:9px;

        font-size:16px;

    }

    .homepage__menu{

        gap:16px;

        padding:0 15px;

    }

    .homepage__menu a{

        font-size:13px;

    }

}


/*==================================================
    MAIN NAVIGATION — SMALL TABLET
==================================================*/

@media (max-width: 768px){

    .homepage__top{

        display:block;

        height:auto;

        overflow:visible;

    }

    .homepage__category-nav{

        height:52px;

        width:100%;

        justify-content:center;

    }

    .homepage__nav{

        width:100%;

        overflow-x:auto;

        overflow-y:hidden;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;

    }

    .homepage__nav::-webkit-scrollbar{

        display:none;

    }

    .homepage__menu{

        width:max-content;

        min-width:100%;

        height:52px;

        gap:0;

        padding:0;

        justify-content:flex-start;

    }

    .homepage__menu li{

        flex:0 0 auto;

    }

    .homepage__menu a{

        height:52px;

        padding:0 18px;

        font-size:13px;

        white-space:nowrap;

    }

}


/*==================================================
    MAIN NAVIGATION — MOBILE
==================================================*/

@media (max-width: 576px){

    .homepage__category-nav{

        height:50px;

        font-size:15px;

    }

    .homepage__category-nav i{

        font-size:16px;

        margin-right:9px;

    }

    .homepage__menu{

        height:50px;

    }

    .homepage__menu a{

        height:50px;

        padding:0 16px;

        font-size:12px;

    }

}


/*==================================================
    MAIN NAVIGATION — SMALL MOBILE
==================================================*/

@media (max-width: 400px){

    .homepage__category-nav{

        height:48px;

        font-size:14px;

    }

    .homepage__menu a{

        padding:0 14px;

        font-size:11px;

    }

}

/*==================================================
    HEADER — LARGE TABLETS / SMALL DESKTOP
==================================================*/

@media (max-width: 1200px){

    .header__container{

        height:auto;

        flex-wrap:wrap;

        gap:18px;

        padding:18px 0;

    }

    .header__logo{

        flex:0 0 220px;

    }

    .header__logo img{

        width:200px;

    }

    .header__search{

        order:3;

        flex:1 1 100%;

        width:100%;

        min-width:0;

        margin:0;

    }

}


/*==================================================
    HEADER — TABLET
==================================================*/

@media (max-width: 992px){

    .header__container{

        justify-content:center;

    }

    .header__logo{

        flex:0 0 auto;

    }

    .header__actions{

        margin-left:auto;

    }

    .header__search{

        order:3;

        flex:0 0 100%;

        width:100%;

        margin:0;

        min-width:0;

    }

}


/*==================================================
    HEADER — MOBILE
==================================================*/

@media (max-width: 576px){

    .header__container{

        flex-direction:column;

        align-items:center;

        gap:16px;

        padding:18px 0;

    }

    .header__logo{

        width:100%;

        text-align:center;

    }

    .header__logo img{

        width:210px;

        max-width:100%;

        margin:0 auto;

    }

    .header__tagline{

        margin-left:0;

        text-align:center;

    }

    .header__search{

        width:100%;

        margin:0;

    }

    .header__search-form{

        height:auto;

        flex-wrap:wrap;

        overflow:visible;

        border:none;

        gap:8px;

    }

    .header__search-input{

        width:100%;

        flex:0 0 100%;

        height:48px;

        border:2px solid #e5e5e5;

        border-radius:6px;

    }

    .header__search-category{

        flex:1;

        width:auto;

        height:48px;

        border:2px solid #e5e5e5;

        border-radius:6px;

    }

    .header__search-button{

        flex:0 0 110px;

        width:110px;

        height:48px;

        border-radius:6px;

    }

    .header__actions{

        width:100%;

        justify-content:center;

        gap:30px;

        margin:0;

    }

}


/*==================================================
    HEADER — SMALL MOBILE
==================================================*/

@media (max-width: 400px){

    .header__logo img{

        width:190px;

    }

    .header__actions{

        gap:18px;

    }

    .header__icon{

        width:36px;

        height:36px;

        font-size:27px;

        margin-right:7px;

    }

    .header__title{

        font-size:13px;

    }

    .header__subtitle{

        font-size:12px;

    }

    .header__search-button{

        flex:1;

        width:auto;

    }

}

/*==================================================
    HERO RESPONSIVE
==================================================*/

/*==================================================
    TABLET
==================================================*/

@media (max-width: 992px){

    .homepage__content{

        grid-template-columns:1fr;

        row-gap:20px;

    }

    .homepage__sidebar{

        order:1;

    }

    .homepage__hero-wrapper{

        order:2;

    }

    .hero{

        min-height:420px;

    }

    .hero-slide.active{

        grid-template-columns:1fr;

        min-height:420px;

    }

    .hero__content{

        padding:40px;

        text-align:center;

    }

    .hero__description{

        margin-left:auto;
        margin-right:auto;

    }

    .hero__buttons{

        justify-content:center;

    }

    .hero__image{

        display:none;

    }

}


/*==================================================
    MOBILE
==================================================*/

@media (max-width: 576px){

    .hero{

        min-height:420px;

        border-radius:8px;

    }

    .hero-slide.active{

        min-height:420px;

    }

    .hero__content{

        padding:35px 25px 50px;

    }

    .hero__badge{

        font-size:14px;

    }

    .hero__title{

        font-size:34px;

        line-height:1.15;

        letter-spacing:-.5px;

    }

    .hero__description{

        font-size:15px;

        line-height:1.6;

        margin-bottom:20px;

    }

    .hero__buttons{

        flex-direction:column;

        align-items:center;

        gap:10px;

    }

    .hero__btn{

        width:100%;

        max-width:260px;

        min-width:0;

        height:50px;

        font-size:15px;

    }

    .hero-arrow{

        width:38px;

        height:38px;

        font-size:18px;

    }

    .hero-arrow--prev{

        left:10px;

    }

    .hero-arrow--next{

        right:10px;

    }

    .hero-dots{

        bottom:15px;

    }

    .hero-dot{

        width:10px;

        height:10px;

    }

}

/*==================================================
    MAIN NAVIGATION — HIDE ON MOBILE
==================================================*/

@media (max-width:768px){

    .homepage__nav{

        display:none;

    }

    .homepage__category-nav{

        width:100%;

        justify-content:center;

    }

}

/*==================================================
    MAIN NAVIGATION — HIDE ON MOBILE
==================================================*/

@media (max-width:768px){

    .homepage__navigation{

        display:none;

    }

}

/*==================================================
    HERO SIDEBAR — HIDE ON MOBILE
==================================================*/

@media (max-width:768px){

    .homepage__sidebar{

        display:none;

    }

}