@media screen and (max-width: 1280px) {
    .about-side-img {
        width: 250px;
        height: 230px;
    }

    .about-contant-div {
        max-width: 700px;
    }

    .menu-card-img .menu-img {
        max-width: 270px;
        height: 270px;
    }

    .menu-row-div {
        column-gap: 30px;
        row-gap: 40px;
    }

    .coffee-type-img {
        height: 450px;
    }

    .coffee-type-title {
        font-size: 74px;
        line-height: 90px;
    }

    .hero-section {
        height: 70vh;
    }

    .hero-h2 {
        font-size: 45px;
    }

}

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

    .about-side-img {
        width: 220px;
        height: 190px;
        right: 0;
    }

    .small-title {
        font-size: 38px;
        margin-bottom: 20px;
    }

    .about-dec {
        font-size: 16px;
        margin-bottom: 20px;
    }

    .common-hero-pd {
        padding: 90px 0 130px;
    }

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

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

    .menu-row-div {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 30px;
        row-gap: 30px;
    }

    .about-side-img {
        width: 190px;
        height: 170px;
        right: 0;
    }

    .hero-h2 {
        font-size: 40px;
    }

    .hero-h1 {
        font-size: 65px;
        margin: 20px 0 15px 0;
    }

    .hero-para {
        font-size: 18px;
    }

    .small-title {
        font-size: 34px;
        margin-bottom: 20px;
    }

    .menu-card-img .menu-img {
        max-width: 250px;
        height: 250px;
    }

    .coffee-title {
        font-size: 22px;
    }

    .top-wood-img {
        max-width: 140px;
        height: 90px;
    }

    .coffee-type-title {
        font-size: 54px;
        line-height: 68px;
    }

    .coffee-center-text {
        font-size: 23px;
        margin: 15px 0;
        line-height: 35px;
    }

    .coffee-type-img {
        height: 340px;
    }

    .address-div .mail-text {
        word-break: break-word;
    }

    .footer-icon-div {
        max-width: 35px;
        height: 35px;
    }


    .body-overflow {
        overflow: hidden;
    }

    .header-menu-div {
        position: fixed;
        padding: 20px 15px;
        top: 0;
        bottom: 0;
        background: #f8f7f0;
        left: -250px;
        max-width: 230px;
        width: 100%;
        height: 100vh;
        z-index: 999;
        transition: .5s all ease-in-out;
        -webkit-transition: .5s all ease-in-out;
        -moz-transition: .5s all ease-in-out;
        -ms-transition: .5s all ease-in-out;
        -o-transition: .5s all ease-in-out;
    }

    .header-menu-div.open-side-menu {
        left: 0;
    }

    .humble-menu-btn {
        background-color: transparent;
        min-width: unset;
        padding: 6px 8px;
        min-height: unset;
        border: 2px solid var(--white);
        display: block;
    }

    .is-sticky .humble-menu-btn {
        border-color: var(--brown);
    }

    .is-sticky .humble-menu-btn .menu-icon {
        filter: brightness(0) saturate(100%) invert(9%) sepia(14%) saturate(6786%) hue-rotate(336deg) brightness(101%) contrast(95%);
    }

    .humble-menu-btn .menu-icon {
        width: 20px;
        height: 20px;
        object-fit: contain;
    }

    .phone-header-div,
    .humble-menu {
        display: block;
    }

    .phone-header-div .logo-link .header-logo {
        max-width: 70px;
        height: 70px;
    }

    .close-menu-btn {
        position: absolute;
        right: 25px;
        top: 30px;
        border: none;
    }

    .close-menu {
        height: 20px;
        width: 20px;
        object-fit: contain;
    }

    .header-li .header-li-link::after,
    .header-li .header-li-link::before {
        content: "";
        height: 2px;
        width: 0;
        opacity: 0;
        background-color: var(--brown);
        position: absolute;
        transition: all 0.5s;
    }

    .header-li .header-li-link,
    .header-li .header-li-link:hover {

        color: var(--brown);
        font-size: 18px;
        line-height: 22px;
    }


    .header-section:after {
        content: "";
        background: #ffffff26;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        bottom: 0;
        z-index: 78;
        -webkit-backdrop-filter: blur(7px);
        backdrop-filter: blur(7px);
        display: none;
    }

    .body-overflow .header-section:after {
        display: block;
    }

    .header-ul {
        margin-top: 25px;
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;

    }

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

    .menu-contant-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }



}

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

    .menu-row-div {
        column-gap: 20px;
        row-gap: 20px;
    }

    .header-section.is-sticky .logo-title {
        display: none;
    }

    .header-flex-div {
        padding: 12px;
    }

    .hero-h2 {
        font-size: 25px;
    }

    .hero-h1 {
        font-size: 42px;
        margin: 15px 0 12px 0;
    }

    .small-title {
        font-size: 26px;
        margin-bottom: 15px;
    }

    .about-dec,
    .menu-para {
        font-size: 14px;
    }

    .coffee-title {
        font-size: 18px;
    }

    .coffee-type-img {
        height: 300px;
    }

    .coffee-type-title {
        font-size: 45px;
        line-height: 65px;
    }

    .footer-logo-text {
        max-width: 100%;
        margin-top: 18px;
        font-size: 15px;
        line-height: 23px;
    }

    .store-row {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }

    .common-hero-title {
        font-size: 40px;
    }

    .btn.btn-primary {
        padding: 10px 12px;
    }

    .menu-contant-row {
        grid-template-columns: repeat(1, 1fr);
        gap: 15px;
    }

    .common-hero-section {
        background-size: cover;
        background-position: center;
    }

}

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

    .menu-card-img .menu-img {
        max-width: 150px;
        height: 150px;
    }

    .about-contant-div {
        max-width: 100%;
    }

    .about-side-img {
        width: 180px;
        height: 150px;
        bottom: -50px;
    }

    .menu-card-img::before {
        height: 70px;
        width: 70px;
    }

    .common-hero-pd {
        padding: 80px 0 100px;
    }

}