/*-----------------------------------*\
    #MEDIA QUERIES
  \*-----------------------------------*/

/**
   * responsive for larger than 575px screen
   */

   @media (min-width: 575px) {

    /**
     * REUSED STYLE
     */

    .container {
        max-width: 540px;
        width: 100%;
        margin-inline: auto;
    }

    :is(.header, .hero) .container {
        max-width: unset;
    }

    .has-scrollbar {
        gap: 30px;
    }

    .scrollbar-item {
        min-width: calc(50% - 15px);
    }



    /**
     * HEADER
     */

    .alert {
        padding-block: 8px;
    }

    .header-top .container {
        padding-inline: 30px;
    }



    /**
     * HERO
     */

    .hero-card {
        padding-inline: 70px;
    }

    .hero-text {
        max-width: 30ch;
    }



    /**
     * BANNER
     */

    .banner-card .card-text {
        max-width: 30ch;
    }



    /**
     * OFFER
     */

    .offer .countdown {
        --fs-2: 4.8rem;
    }

    .offer .countdown .time:not(:last-child)::after {
        margin-inline: 20px;
    }

}





/**
   * responsive for larger than 768px screen
   */

@media (min-width: 768px) {

    /**
     * CUSTOM PROPERTY
     */

    :root {

        /**
       * typography
       */

        --fs-1: 5.6rem;

    }



    /**
     * REUSED STYLE
     */

    .container {
        max-width: 730px;
    }

    .flex-item {
        max-width: calc(50% - 15px);
    }



    /**
     * COLLECTION
     */

    .collection-card {
        min-height: 450px;
    }



    /**
     * BANNER
     */

    .banner-list {
        grid-template-columns: 1fr 0.7fr;
    }

    .banner-card {
        padding: 50px;
    }



    /**
     * OFFER
     */

    .offer .section-text {
        max-width: 45ch;
    }



    /**
     * FOOTER
     */

    .footer-top {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-list:last-child {
        grid-column: 1 / 4;
    }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .footer-bottom .wrapper {
        margin-block-end: 0;
    }

}





/**
   * responsive for larger than 992px screen
   */

@media (min-width: 992px) {

    /**
     * CUSTOM PROPERTY
     */

    :root {

        /**
       * spacing
       */

        --section-padding: 50px;

    }



    /**
     * REUSED STYLE
     */

    .container {
        max-width: 960px;
    }

    .scrollbar-item {
        min-width: calc(33.33% - 20px);
    }

    .flex-item {
        max-width: calc(33.33% - 20px);
    }



    /**
     * COLLECTION
     */

    .collection-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }



    /**
     * BANNER
     */

    .banner-list {
        grid-template-columns: 1fr 0.5fr;
    }



    /**
     * OFFER
     */

    .offer .container {
        display: grid;
        grid-template-columns: 1fr 0.7fr;
        align-items: center;
        gap: 30px;
    }

    .offer-banner {
        margin-block-end: 0;
    }



    /**
     * FOOTER
     */

    .footer .logo {
        display: block;
    }

    .footer {
        padding-block: 100px 80px;
    }

    .footer-top {
        grid-template-columns: 0.4fr 0.4fr 0.4fr 1fr;
        margin-block-end: 120px;
    }

    .footer-list:last-child {
        grid-column: auto;
    }

    .footer .logo img {
        width: 190px;
    }

}





/**
   * responsive for larger than 1200px screen
   */

@media (min-width: 1200px) {

    /**
     * REUSED STYLE
     */

    .container {
        max-width: 1300px;
    }

    .scrollbar-item {
        min-width: calc(20% - 24px);
    }



    /**
     * HEADER
     */

    .header .input-wrapper,
    .header-action-btn:not(:first-child),
    .navbar {
        display: block;
    }

    .nav-open-btn {
        display: none;
    }

    .header {
        padding-block-end: 60px;
        margin-block-end: 10px;
    }

    .header-top {
        position: unset;
        padding-block: 24px 0;
    }

    .header-top:is(.active, .header-hide) {
        all: unset;
    }

    .header-top .container {
        flex-wrap: wrap;
    }

    .search-field {
        width: 270;
        font-size: var(--fs-7);
        border: 2px solid var(--hoockers-green_20);
        border-radius: var(--radius-3);
        padding: 10px 20px;
        padding-inline-end: 40px;
        outline: none;
        transition: var(--transition-1);
    }

    .search-field::placeholder {
        color: var(--spanish-gray);
    }

    .search-field:focus {
        border-color: var(--black);
    }

    .header .input-wrapper {
        position: relative;
    }

    .header .search-submit {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        font-size: 22px;
    }

    .header .search-submit ion-icon {
        --ionicon-stroke-width: 40px;
    }

    .header .logo {
        margin-inline-end: 60px;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 40px;
    }

    .header-action-btn {
        position: relative;
    }

    .header-action-btn .btn-badge {
        position: absolute;
        top: 0;
        right: -10px;
        background-color: var(--black);
        color: var(--white);
        font-size: var(--fs-9);
        min-width: 18px;
        height: 18px;
        line-height: 1.4;
        border-radius: 20px;
    }

    .header-action-btn:last-child {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .header-action-btn .btn-text {
        font-size: var(--fs-7);
        font-weight: var(--fw-700);
        margin-block-start: 3px;
    }

    .navbar {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--white);
        padding-block: 18px;
        z-index: 4;
    }

    .navbar .navbar-list {
        display: flex;
        justify-content: center;
        gap: 45px;
    }

    .navbar .navbar-link {
        color: var(--black);
        font-size: var(--fs-7);
        font-weight: var(--fw-600);
    }

    .navbar .navbar-link::after {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--black);
        transition: var(--transition-1);
        transform: scaleX(0);
        transform-origin: left;
    }

    .navbar .navbar-link:is(:hover, :focus)::after {
        transform: scaleX(1);
    }

    .header-top.active .navbar {
        position: fixed;
        top: -80px;
        bottom: auto;
        padding-block: 28px;
        box-shadow: var(--shadow-1);
        transform: translateY(100%);
        transition: var(--transition-2);
    }

    .header-top.header-hide .navbar {
        box-shadow: none;
        transform: translateY(0);
    }



    /**
     * HERO
     */

    .hero-card {
        padding: 120px 100px;
    }

    .hero-text {
        max-width: 40ch;
    }



    /**
     * BANNER
     */

    .banner-card-1 .card-title {
        max-width: 15ch;
    }



    /**
     * FEATURE
     */

    .feature .section-title {
        margin-block-end: 60px;
    }

    .feature .flex-list {
        gap: 100px;
        padding-inline: 50px;
    }

    .feature .flex-item {
        max-width: calc(33.33% - 66.66px);
    }



    /**
     * OFFER
     */

    .offer .container {
        gap: 120px;
    }

}