@media (max-width: 1200px) {

    /* hero-banner */
    .hero-banner .container .content {
        padding: 400px 0 60px;
    }


    .brand-ambassador .ambassador-right p {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 16px;
    }

    .brand-ambassador .ambassador-left .ambassador-img {
        max-width: 350px;
        max-height: 500px;
    }

    .brand-ambassador .ambassador-left .ambassador-img2 {
        right: -62%;
        bottom: 15%;
        max-width: 250px;
        max-height: 235px;
    }

    .brand-ambassador .ambassador-right .tagline-img {
        bottom: 0;
        right: -4%;
        width: 85%;
        max-height: 500px;
        rotate: -0.21deg;
    }

    /* our story */
    .story .container .story-top {
        padding: 60px 20px 0;
    }

    .story .container .story-bottom {
        padding: 0 20px;
    }

    .story .story-bottom-tagline {
        position: absolute;
        top: -80px;
        right: -30px;
        max-width: 400px;
        max-height: 200px;
    }


    .story p {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        color: var(--black);
        padding-top: 110px;
    }

    .story .story-top p {
        padding-top: 90px;
    }

    .story .story-bottom p {
        text-align: right;
        padding-top: 90px;
    }

    .story .row:has(.bottom-image) {
        position: relative;
        margin-top: -180px;
    }

    .story .story-top-tagline {
        position: absolute;
        top: -10%;
        max-width: 540px;
        max-height: 340px;
    }

}

@media (max-width: 1024px) {

    /* header style */
    .desktop-header .site-logo img {
        width: 125px;
        height: 25px;
    }

    /* footer */
    .site-footer .footer-top .footer-logo img {
        max-width: 300px;
        width: 100%;
        height: 65px;
    }

    .healthy-menu-slider .menu-items-slider .menu-items .box {
        max-width: calc((100% - 30px) / 2);
        flex: 0 0 calc((100% - 30px) / 2);
    }

    .healthy-menu-slider .heading-top .nav-bar .arrows {
        width: 40px;
        height: 40px;
    }

    .healthy-menu-slider ul.menu-tabs li button {
        font-size: 16px;
        line-height: 22px;
    }

    /* story table iamge style */
    .table-img-section .tagline img {
        top: -27%;
    }


}

@media (max-width: 768px) {
    .hamburger-icon {
        cursor: pointer;
        display: block;
    }

    .site-header .nav-bar.desktop {
        display: none;
    }

    .desktop-header .site-logo img {
        width: 118px;
        height: 25px;
    }

    /* footer style */
    .site-footer .footer-top {
        display: flex;
        /* flex-direction: column; */
    }

    .site-footer .nav-bar ul {
        align-items: center;
    }

    /* hero-banner */
    .hero-banner .container .content {
        padding: 350px 0 50px;
    }

    /* how its works section */
    .how-its-works .title {
        font-size: 24px;
        line-height: 30px;
    }

    .how-its-works .description {
        font-size: 16px;
        line-height: 22px;
    }

    .healthy-menu-slider .menu-items-slider .menu-items .box {
        max-width: 100%;
        flex: 0 0 100%;
    }

    /* inner hero banner */
    .inner-banner {
        padding: 150px 0;
        position: relative;
        overflow: hidden;
    }

    .inner-banner h2 {
        font-size: 30px;
        line-height: 40px;
    }

    /* ambassador section */
    .brand-ambassador {
        padding-bottom: 240px;
    }

    .brand-ambassador .ambassador-right .title {
        font-size: 20px;
        line-height: 26px;
        text-align: center;
    }

    .brand-ambassador .ambassador-right p {
        text-align: center;
    }

    .brand-ambassador .ambassador-left .ambassador-img {
        max-width: 250px;
        max-height: 176px;
        left: 23%;
        position: relative;
    }

    .brand-ambassador .ambassador-left .ambassador-img2 {
        right: unset;
        left: 5%;
        bottom: 6%;
        max-width: 130px;
        max-height: 128px;
        position: absolute;
        rotate: -6deg;
    }

    .brand-ambassador .ambassador-right .label {
        margin: 0 0 20px 40px;
    }

    .brand-ambassador .ambassador-right .tagline-img {
        bottom: -7%;
        right: -5%;
        width: 95%;
        max-height: 500px;
        rotate: 6deg;
    }


    /* location image preview style */
    .image-preview {
        position: relative;
        padding: 250px 20px 40px;
    }

    .image-preview h3 {
        font-size: 20px;
        line-height: 26px;
    }

    /* our vibes style */
    .our-vibes {
        padding: 20px 0 30px;
    }

    .our-vibes .label {
        margin-bottom: 8px;
    }

    .our-vibes h2 {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 5px;
    }

    .our-vibes p {
        font-size: 16px;
        line-height: 23px;
    }

    /* menu details */
    .menu-details {
        padding: 40px 0 100px;
    }

    .menu-details .left-image img {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }

    /* healthy menu slider */

    .healthy-menu-slider.sandwich::before {
        display: none;
    }

    .healthy-menu-slider .menu-items-slider .menu-items .vibe-box {
        display: none;
    }

    .healthy-menu-slider .menu-items-slider .menu-items {
        flex-wrap: nowrap;
        overflow: auto;
    }

    .healthy-menu-slider .menu-items-slider .menu-items::-webkit-scrollbar {
        display: none;
    }

    .healthy-menu-slider .menu-items-slider .menu-items::-webkit-scrollbar-track {
        display: none;
    }

    .healthy-menu-slider .menu-items-slider .menu-items::-webkit-scrollbar-thumb {
        display: none;
    }

    /* our-story */
    .story .container .story-top {
        padding: 30px 0 0;
    }

    .story .container .story-bottom {
        padding: 0;
    }

    .story .story-top .col-lg-7.col-md-6.col-12 {
        order: 2;
        position: relative;
    }

    .story .story-top .col-lg-5.col-md-6.col-12 {
        order: 1;
    }

    .story img.story-top-right-img,
    .story img.story-bottom-left-img {
        width: 100%;
        height: 100%;
        max-height: 300px;
        object-fit: cover;
    }

    .story .story-top-tagline {
        position: absolute;
        top: -30%;
    }

    .story .story-bottom .col-lg-7.col-md-6.col-12 {
        position: relative;
    }

    .story .row:has(.bottom-image) {
        position: relative;
        margin-top: 0;
    }

    .table-img-section {
        padding: 40px 0;
        position: relative;
    }
}

@media (max-width: 524px) {

    .hero-banner img.herobanner-bg-img {
        display: none;
    }

    .hero-banner img.mob-herobanner-bg-img {
        display: block;
    }

    /* footer style */
    .site-footer .footer-top {
        display: flex;
        flex-direction: column;
    }

    .site-footer .nav-bar ul {
        flex-direction: column;
    }

    .site-footer .footer-tagline {
        order: -1;
        margin-bottom: 42px;
    }

    .site-footer .footer-tagline img {
        height: 30px;
        width: 100%;
    }

    .site-footer .footer-top {
        gap: 40px;
    }

    .site-footer .footer-bottom {
        flex-direction: column-reverse;
        gap: 39px;
    }

    /* how its works section */
    .how-its-works .content {
        margin-bottom: 0;
    }

    .how-its-works .image {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
    }

    /* healthy menu slider */
    .healthy-menu-slider .heading-top .nav-bar {
        display: none;
    }

    .healthy-menu-slider .owl-carousel .owl-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        margin-top: 20px;
    }

    /* our vibes style */

    .our-vibes .vibe-images {
        margin: 12px 0;
        padding: 0 12px;
    }

    .our-vibes .vibe-images img {
        max-width: calc((100% - 4px)/2);
        flex: 0 0 calc((100% - 4px)/2);
        object-fit: cover;
    }

    .our-vibes .social-buttons {
        display: flex;
        gap: 4px;
    }

    .our-vibes .social-buttons .dark-btn {
        max-width: calc((100% - 4px)/2);
        flex: 0 0 calc((100% - 4px)/2);
    }

    .our-vibes .social-buttons .dark-btn span {
        display: none;
    }

    /* location page style */

    .location-info h2 {
        font-size: 26px;
        line-height: 35px;
        margin: 0 auto 30px;
    }

    .location-info p {
        font-size: 16px;
        line-height: 23px;
        margin: 0 auto 30px;
    }

    /* our story */
    .story .container {
        padding-top: 30px;
        padding: auto;
        margin: 0 auto;
        width: calc(100% - 60px);
    }

    .story .story-top-tagline {
        position: absolute;
        top: -24%;
    }

    /* story table iamge style */
    .table-img-section .tagline img {
        top: -50%;
    }
}