@media(max-width: 1920px){
    .responsive-flipbook{ max-width: 900px;}
    .recipe-breadcrumb-img{ aspect-ratio: 16/7;}
}
@media(max-width: 1400px){
    .hero-card-1 img{ right: -14rem;}
    .hero-card-2 img{ bottom: 0;}
    .hero-card-3 img{ bottom: -2rem;}
    .footer-upper-img img{ right: -5rem;}
    .footer{ overflow-x: clip;}
    .footer-left{ min-width: 230px;}
    .cards-1 img{ right: -6rem;}
    .cards-2 img{ max-width: 520px; bottom: 0; right: -9rem;}
    .news-card-content span:last-child figure{ padding: 6px 0;}
    .banner-content-wrp{ width: 45%;}
    .banner-content-img img{ right: -25rem;}
    .points-banner-content h4{ width: 100%;}
    .points-banner-img img{ left: -14rem;}
    .shop-finds-title span:last-child{ flex-direction: column; align-items: start;}
    .newhero-card-wrp{
        width: 80%;
    }
}
@media(min-width: 1200px) and (max-width: 1400px){
    #heroCard4{ width: 35%;} 
    #heroCard5{ flex: 1 0 auto;} 
}
@media(max-width: 1200px){
    /* mobile menu */
    body.menu-open { 
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    body.menu-open #backToTopBtn{ display: none;}
    .lower-header{ display: none;}
    .hamburger-toggler{ display:block;}
    .hamburger-toggler {
        cursor: pointer;
        width: 30px;
        height: 30px;
        position: relative;
        z-index: 100;
    }
    .hamburger-toggler span {
        display: block;
        height: 3px;
        width: 100%;
        background-color: var(--black);
        margin: 6px auto;
        transition: all 0.3s ease-in-out;
    }
    .hamburger-toggler.active span:nth-child(1) { transform: translateY(9px) rotate(45deg);}
    .hamburger-toggler.active span:nth-child(2) { opacity: 0;}
    .hamburger-toggler.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg);}
    .mobile-menu{
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100dvh;
        background-color: var(--white);
        transform: translateX(100%);
        z-index: 99;
        display: flex;
        flex-direction: column;
        transition: all .3s ease-in-out;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .mobile-menu.open{ transform: translateX(0);}
    .mobile-menu .container{ 
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 6rem 0 0;
    }
    .mobile-menu-scrollable {
        overflow-y: auto;
        flex: 1 1 auto;
        padding: 0 1rem;
        -webkit-overflow-scrolling: touch;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: space-between;
    }
    .mobile-menu-content{ display: flex; flex-direction: column; gap: 1rem;}
    .mobile-menu-dropdown,
    .mobile-menu-item{ 
        padding: .75rem; 
        color: var(--white); 
        background: var(--primary-color); 
        border-radius: 24px;
        text-align: center;
        font-size: 1.25rem;
    }
    .mobile-menu-dropdown span{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }
    .mobile-menu-dropdown span svg{
        transition: transform 0.3s ease;
    }
    .mobile-menu-dropdown.open span svg {transform: rotate(-180deg);}
    .mobile-menu-dropdown{
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    .mobile-menu-dropdown-content{
        display: none;
        flex-direction: column;
        gap: 0.75rem;
        font-size: .875rem;
    }
    .mobile-menu-content-bottom{ 
        display: flex; 
        align-items: center; 
        justify-content: space-between; 
        padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
        border-top: 1px solid #E0E0E0;
    }
    .navbar-logo{ position: relative; z-index: 100;}
    .mobile-menu-dropdown.open .mobile-menu-dropdown-content { display: flex;}
    /* END mobile menu */
    
    .hero-card-1 img, .hero-card-2 img, .hero-card-3 img, .hero-card-4 img{ z-index: 1;}
    .hero-card-1 img, .hero-card-2 img, .hero-card-3 img{ opacity: 0.25;}
    .hero-card-1 .hero-card-content, .hero-card-2 .hero-card-content,
    .hero-card-3 .hero-card-content, .hero-card-4 .hero-card-content,
    .hero-card-5 .hero-card-content{ width: 100%; z-index: 2; }
    .hero-card-1 img{ right: -8rem; bottom: -4rem;}
    .hero-card-2 img{ right: -6rem;}
    .hero-card-3 img{ bottom: 0rem; right: -6rem;}
    .hero-card-1, .hero-card-2 { min-height: 350px;}
    .hero-card-3, .hero-card-4, .hero-card-5{ min-height: 230px;}
    .hero-card-1, .hero-card-2{ min-height: 300px;}
    .hero-card-1 img{ max-height: 450px; right: -5rem; bottom: -4rem;}
    .hero-card-3 img{ max-width: 450px; bottom: -2rem; right: -9rem;}
    .hero-card-2 img{ max-width: 450px;}
    .hero-card-4 img{ max-width: 400px;}
    .footer-upper-img img{ right: -6rem; }
    .footer-upper-content{ width: 100%; flex-direction: column; gap: 3rem;}
    .footer-upper-content > span{ gap: 5rem;}
    .footer-right{ text-align: center; align-items: center;}
    .cards-1 .hero-card-content, .cards-2 .hero-card-content{ position: relative; z-index: 2; width: 100%;} 
    .cards-1 img, .cards-2 img{ z-index: 1; opacity: 0.25;}
    .faq-img{ aspect-ratio: 2/3;}
    .banner-content-wrp{ width: 100%; position: relative ; z-index: 2;}
    .banner-content-img img{ right: -20rem; opacity: 0.25; z-index: 1; }
    .footer-upper-content{ gap: 2.5rem;}
    .good-offer-card-content h4{ width: 100%;}
    .newsletter-text{ width: 100%;}
    .newsletter-form .btn{ justify-self: end;}
    .points-banner,
    .newsletter-container{ padding: 40px 28px;}
    .good-offer-right{width: 100%;}
    .leaflet-card-content{ flex: 1 0;}
    .cards-3 img{ right: -6rem; z-index: 1; opacity: 0.25;}
    .cards-3 .hero-card-content{width: 70%; position: relative; z-index: 2;}
    #advantagesSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw);overflow: visible;}
    #blogGallerySlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw);overflow: visible;}
    .blog-detail, .advantages{ overflow-x: clip;}
    .detail-shop-info-wrp,
    .detail-shop-info{ flex-direction: row;}
    .detail-shop-info-wrp{ align-items: center; text-align: center; gap: 1rem;}
    .footer-left-wrp > span{ display: flex; flex-direction: column;}
    .our-story-img{ aspect-ratio: 3/4;}
    .our-story-content-wrp{ gap: 10px;}
    .job-card h3{ width: 75%;}
    .new-cards-3 .hero-card-content{
        width: 60%;
    }
    .new-cards-3 img{
        position: absolute;
        right: -8rem;
        bottom: -18rem;
        max-height: 750px;
    }
    .newhero-card-wrp{
        width: 100%;
    }
    .newhero-card-4::before{
        opacity: 0.25;
        width: 700px;
        right: -12rem;
    }
}
@media(max-width: 992px){
    .upper-header-wrp{ display: none; }
    h1{
        font-size: 2.8125rem;
        font-style: normal;
        font-weight: 800;
        line-height: 46px;
    }
    h2{
        font-size: 2.1875rem;
        font-style: normal;
        font-weight: 800;
        line-height: 37px;
    }
    h3{
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 32px;
        letter-spacing: 0.16px;
    }
    h4{
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }
    p{
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .btn-transparent-green, .btn-transparent-white, .btn-transparent-yellow, 
    .btn-green{padding: 8px 18px;}
    .mobile-menu-content > span{display: flex; justify-content: space-between;}
    .footer-upper-content > span{ gap: 0; justify-content: space-between; text-align: center;}
    .footer-upper-img{ display: none;}
    .flag-content-img{ max-height: 330px;}
    .flag-content{ display: flex; flex-direction: column; gap: 1.5rem;}
    .flag-content span{ display: flex; justify-content: center; gap: 1.5rem;}
    .flag-card{ position: relative; display: flex; flex-direction: column;}
    .flag-card-wrp{ display: flex; flex-direction: column; flex: 1 0 auto; justify-content: end;}
    .flag-card-2,
    .flag-card-1{ bottom: unset; left: unset; top: unset; right: unset; }
    .cards-1 img{max-width: 400px; height: unset; bottom: -11rem;}
    .cards-2 img{ right: -10rem;}
    .cards-1, .cards-2{ height: 300px; }
    .cards-2 img{ bottom: -4rem;}
    #goodOfferSlider .splide__track, #goodOfferSlider2 .splide__track, #shopGallerySlider .splide__track, #aboutCardSlider .splide__track, #jobSlider .splide__track, #rentSlider .splide__track,
    #newsSlider .splide__track{ clip-path: inset(-100vw -100vw -100vw -100vw);overflow: visible;}
    .good-offer, .shop-gallery, .our-mission, .jobs, .rent,
    .news{ overflow-x: clip;}
    .news-card{box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.08), 0px 5px 10px rgba(0, 0, 0, 0.05);}        
    .flag-card{box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.08), 0px 5px 10px rgba(0, 0, 0, 0.05);}
    .faq-img{ aspect-ratio: 16/8; border-radius: 24px 24px 0 0;}
    .faq-img img{border-radius: 24px 24px 0 0;}
    .faq-content{ padding: 30px;}
    .banner-content-img img{ right: -15rem;}
    .footer-left{ gap: 20px;}
    .faq-content, .banner-content-wrp, .newsletter-container, .points-banner, .our-story-content, .offer-banner-container,
    .hero-card{ padding: 1.5rem;}
    .footer-upper-content{ gap: 2rem;}
    .flag-card{ animation: none;}
    .cards-3 .hero-card-content{width: 100%;}
    .cards-3{ justify-content: center; text-align: center; height: 350px;}
    .cards-3 .card-btn-wrp{ justify-content: center;}
    .cards-3 img{ bottom: -20rem; max-width: 550px; right: -10rem; z-index: 1; opacity: 0.25;}
    .points-banner-img img{bottom: -8rem; left: -11rem;}
    .rules-content ul li{ margin-bottom: 1.25rem;}
    .detail-shop-info-wrp{ flex-direction: column;}
    .detail-shop-info{ flex-direction: column; align-items: center; gap: 1rem;}
    .shop-finds-title, .shop-finds-info{ align-items: center;}
    .shop-finds-title{text-align: center;}
    .shop-gallery-img{ aspect-ratio: 4/3;}
    .shop-finds-title span:last-child{ align-items: center;}
    #map{ height: 400px;}
    .our-story-img{ aspect-ratio: 16/9; border-radius: 24px;}
    .our-story-content-wrp{ gap: 20px;}
    .job-card h3{ width: 80%;}
    .shop-detail-img{ aspect-ratio: 16/9; max-height: 350px;}
    .recipe-breadcrumb-content{ width: 90%;}
    .rent-card-wrp{ flex-direction: column; gap: 10px; align-items: flex-start;}
    .shop-card-content{ padding: 1.5rem;}
    .new-cards-3 .hero-card-content{
        width: 80%;
    }
    .new-cards-3 img{
        position: absolute;
        right: -7rem;
        bottom: -12rem;
        max-height: 650px;
        opacity: .3;
    }
    .newhero-card,
    .cards-1,
    .hero-card{
        height: 350px !important; 
        min-height: unset;
    }
    .hero-card-content{
        justify-content: center;
        height: 100%;
    }
}
@media(max-width: 768px){
    h1{
        font-size: 2.25rem;
        font-style: normal;
        font-weight: 800;
        line-height: 2.3rem;
    }
    h2{
        font-size: 1.875rem;
        font-style: normal;
        font-weight: 800;
        line-height: 2rem;
    }
    h3{
        font-size: 1.5rem;
        font-weight: 800;
        line-height: normal;
        letter-spacing: 0.16px;
    }
    h4{
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
    }
    p{
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    .mobile-menu-dropdown, .mobile-menu-item{ padding: .5rem; font-size: 1rem;}
    .mobile-menu-content > span{ flex-direction: column; gap: 0.5rem; align-items: center;}
    .mobile-menu-content > span > *{ width: 100%;}
    .hero-card-1, .hero-card-2, .hero-card-3, .hero-card-4, .hero-card-5,
    .cards-1, .cards-2{ height: 100%;}
    .cards-1 img{ bottom: -10rem; max-width: 400px; right: -5rem;}
    .cards-2 img{ bottom: -4rem; max-width: 450px; right: -8rem;}
    .banner-content-img img{ right: -10rem;  bottom: -3rem; max-width: 800px}
    .faq-content, .banner-content-wrp, .newsletter-container, .points-banner, .shop-card-content, .offer-banner-container,
    .hero-card{ padding: 1.25rem;}
    .footer-upper-content{ gap: 1.75rem;}
    .good-offer-title, .good-offer-right, .good-offer-left{text-align: center;}
    .newsletter-text{ text-align: center;}
    .points-banner-img img{opacity: 0.25; left: unset; right: -10rem; bottom: -5rem; max-width: 500px;}
    .points-banner-content{width: 100%;}
    .rules-content ul li{ margin-bottom: 1rem;}
    .detail-shop-title-right{ justify-self: start;}
    .job-card h3{ width: 75%;}
    .contact-map{ height: 300px;}
    .recipe-breadcrumb-content{ bottom: 1rem; left: 1rem; width: 100%; padding-right: 2rem;}
    .recipe-materials .container,
    .recipe-steps .container{ gap: 20px;}
    .recipe-materials-content{ gap: 10px;}
    .recipe-materials-content ul li,
    .recipe-steps-content ol li{ margin-bottom: 10px;}
    .leaflet, .detail-shop, .partners-gallery, .recipes, .card-banner, .shops,
    .our-story{ padding: 30px 0;}
    .new-cards-3 .hero-card-content{
        width: 100%;
        text-align: center;
        align-items: center;
    }
    .new-cards-3 img{
        position: absolute;
        right: -7rem;
        bottom: -12rem;
        max-height: 500px;
        opacity: .3;
    }
    .new-cards-3 .hero-card-content .card-btn-wrp{
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: .5rem;
    }
    .new-cards-3{
        min-height: 350px;
    }
    .cards-1 .hero-card-content,
    .newhero-card-wrp{
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .news{
        padding-top: 5rem;
    }
}
@media(max-width: 576px){
    .footer-upper-content > span{flex-direction: column; gap: 1.5rem;}
    .hero-card-4 img{ max-width: 280px;}
    .cards-2 img{ bottom: -7rem;}
    .hero-card-3 img{ bottom: -4rem; right: -7rem;}
    .hero-card-1 img{ right: -7rem;}
    .footer-upper-content{ gap: 1.5rem;}
    .newsletter-form .btn{ justify-self: center;}
    .leaflet-card{ flex-direction: column;}
    .leaflet-card-img{ flex-shrink: unset; max-width: unset; max-height: unset  ;}
    #map{ height: 350px;}
    .footer-left-wrp{ gap: 10px;}
    .footer-lower{ flex-direction: column; gap: .5rem;}
    .our-story-content-wrp{ gap: 10px;}
    .our-story-content-wrp span{ padding: .5rem;}
    .job-card .btn{ position: relative; top: unset; right: unset;}
    .job-card h3{ width: 100%;}
    .contact-banner,
    .contact-content{ text-align: center;}
    .contact-banner-link{ justify-content: center;}
    .recipe-breadcrumb-img{ aspect-ratio: 4/5;}
    .recipe-breadcrumb-content h1{ font-size: 2rem;}
    .recipe-breadcrumb-content h3{ font-size: 1.25rem;}
    .recipe-breadcrumb-img::before{ background: #ffffff; background: linear-gradient(180deg,rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 1) 95%);}
    .offer-banner-content{ width: 100%;}
}
@media(max-width: 500px){
    .flag-content > span{ flex-direction: column; align-items: center;}
    .flag-card{ max-width: unset; width: 100%;}
    .faq-content-bottom{ flex-direction: column; gap: 1rem;}
    .rent-card-wrp{ flex-direction: column; gap: 10px; align-items: flex-start;}
}