:root {
    --primary: #046ded;
    --greencolor: #448c6d;
    --secondarycolor: #fed700;
    --blackcolor: #000;
    --whitecolor: #fff;
    --greenlightcolor: #59b210;
    --redcolor: #e31837;
    --purplecolor: #685c88;
    --skybluecolor: #94d7fb;
    --pinkcolor: #fc9cc4;
    --darkgreencolor: #085433;
}

@media only screen and (max-width: 1280px) {
    footer h5 {
        font-size: 13px;
    }

    .contact--box label {
        font-size: 12px;
    }
}

@media only screen and (max-width: 1024px) {
    header .menu a,
    .contact h6 {
        font-size: 12px;
    }

    .hero-bg h1 {
        font-size: 48px;
    }

    .hero--owl .item {
        height: 500px;
    }

    .product--tab--box h3 {
        font-size: 20px;
        padding: 17px 23px 15px;
    }

    .product--items h5 {
        font-size: 14px;
    }

    .product-benefits .Organic--img {
        margin-top: 30px;
    }

    .save--price {
        font-size: 14px;
    }

    footer .logo {
        width: 150px;
        margin: 20px;
    }

    footer h5 {
        font-size: 11px;
    }

    footer ul li a {
        font-size: 13px;
    }

    /* landing page */

    .pannipariba-logo img {
        width: 24% !important;
    }

    .hero--bg--section h1 {
        font-size: 24px;
    }

    .hero--bg--section p {
        font-size: 14px;
        width: 49%;
    }
}

@media only screen and (max-width: 920px) {
    .mobile--header {
        display: block !important;
        width: 100%;
        margin: 0 auto;
    }

    nav,
    header {
        display: none;
    }

    .flex--box .logo {
        width: 200px;
        display: block;
    }

    .flex--box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }

    .flex--box .button {
        background: var(--darkgreencolor);
        width: 33px;
        height: 33px;
        display: block;
        place-items: center;
        display: grid;
        border-radius: 4px;
    }

    .flex--box .button i {
        color: var(--whitecolor);
        font-size: 16px;
    }

    .offcanvas-title .logo {
        width: 200px;
        display: block;
    }

    .right--menu {
        display: flex;
        gap: 30px;
        align-items: center;
    }

    .icons i {
        font-size: 12px;
        width: 25px;
        height: 25px;
        line-height: 28px;
        border-radius: 4px;
    }

    .header ul {
        padding: 0;
    }

    .header ul li {
        border-bottom: 1px solid gainsboro;
        line-height: 39px;
        padding: 0 22px;
    }

    .contact {
        margin: 10px;
    }

    .header ul li a {
        font-size: 13px;
        color: var(--darkgreencolor);
        text-transform: capitalize;
        font-family: "Rubik", sans-serif;
        font-weight: 500;
        margin: 0;
        line-height: 18px;
    }

    .hero-bg h1 {
        font-size: 20px;
    }

    .hero-bg p {
        width: 64%;
    }

    .hero--owl .item {
        height: 303px;
    }

    .search-bar {
        width: 60%;
    }

    .best--seller .owl-nav {
        left: -20%;
    }

    .product--items img {
        width: 58%;
        margin: 0 auto;
    }

    .Grapes {
        padding: 37px;
    }

    .info {
        flex-wrap: wrap;
    }

    .info-container {
        width: 48%;
        margin: 0 auto;
    }

    footer {
        gap: 0;
    }

    .follow--us {
        position: absolute;
        top: 80px;
    }

    .follow--us h5 {
        margin-top: 13px;
    }

    .follow--us br {
        display: none;
    }

    .follow--us i {
        width: 27px;
        height: 27px;
        line-height: 26px;
        font-size: 12px;
    }

    .follow--us img {
        width: 57%;
    }

    .location h5 {
        font-size: 13px;
    }

    /* landing page */

    .hero--bg--section h1 {
        font-size: 20px;
        margin-bottom: 0;
    }

    .hero--bg--section p {
        font-size: 14px;
    }

    .form-wrapper{
        top: -110px !important;
    }
}

@media only screen and (max-width: 768px) {
    .mobile--header {
        display: block !important;
        width: 100%;
        margin: 0 auto;
    }

    nav,
    header {
        display: none;
    }

    .flex--box .logo {
        width: 200px;
        display: block;
    }

    .flex--box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }

    .flex--box .button {
        background: var(--darkgreencolor);
        width: 33px;
        height: 33px;
        display: block;
        place-items: center;
        display: grid;
        border-radius: 4px;
    }

    .flex--box .button i {
        color: var(--whitecolor);
        font-size: 16px;
    }

    .offcanvas-title .logo {
        width: 200px;
        display: block;
    }

    .right--menu {
        display: flex;
        gap: 30px;
        align-items: center;
    }

    .icons i {
        font-size: 12px;
        width: 25px;
        height: 25px;
        line-height: 28px;
        border-radius: 4px;
    }

    .header ul {
        padding: 0;
    }

    .header ul li {
        border-bottom: 1px solid gainsboro;
        line-height: 39px;
        padding: 0 22px;
    }

    .contact {
        margin: 10px;
    }

    .header ul li a {
        font-size: 13px;
        color: var(--darkgreencolor);
        text-transform: capitalize;
        font-family: "Rubik", sans-serif;
        font-weight: 500;
        margin: 0;
        line-height: 18px;
    }

    .hero-bg h1 {
        font-size: 20px;
    }

    .hero-bg p {
        width: 64%;
    }

    .hero--owl .item {
        height: 303px;
    }

    .search-bar {
        width: 60%;
    }

    .best--seller .owl-nav {
        left: -20%;
    }

    .product--items img {
        width: 58%;
        margin: 0 auto;
    }

    .Grapes {
        padding: 37px;
    }

    .info {
        flex-wrap: wrap;
    }

    .info-container {
        width: 48%;
        margin: 0 auto;
    }

    footer {
        gap: 0;
    }

    .follow--us {
        position: absolute;
        top: 80px;
    }

    .follow--us h5 {
        margin-top: 13px;
    }

    .follow--us br {
        display: none;
    }

    .follow--us i {
        width: 27px;
        height: 27px;
        line-height: 26px;
        font-size: 12px;
    }

    .follow--us img {
        width: 57%;
    }

    .location h5 {
        font-size: 13px;
    }

    /* landing page */
    .hero--bg--section h1 {
        font-size: 20px !important;
        margin-bottom: 0;
    }

    .hero--bg--section p {
        font-size: 14px !important;
    }

    .form-wrapper {
        padding: 22px !important;
        top: -138px !important;
    }
}

@media only screen and (max-width: 600px) {
    .mobile--header {
        display: block !important;
        width: 100%;
        margin: 0 auto;
    }

    nav,
    header {
        display: none;
    }

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

    button {
        width: 54px;
        height: 54px;
        display: block;
        background: #1d95ff;
        text-align: center;
        font-size: 28px;
        line-height: 45px;
        color: #fff;
        border-radius: 9px;
    }

    .search-bar {
        width: 80%;
    }

    .product--tab--box {
        display: block;
    }
    .product--tab--box .tab {
        display: flex;
    }

    .product--tab--box .tab button {
        width: 26%;
    }

    .best--seller .owl-nav {
        left: -54%;
        position: absolute;
        top: 3px;
    }

    .best--seller .owl-prev span {
        font-size: 40px;
        color: var(--whitecolor);
        left: 66px;
        position: absolute;
        top: 13px;
    }

    .shop--now img {
        margin: 10px 0;
    }

    .contact--box {
        width: 100%;
        left: 0;
    }

    .contact--box input {
        width: 42%;
    }

    .contact--box button {
        width: 24%;
    }

    footer {
        display: block;
    }

    .follow--us {
        position: absolute;
        top: 0px;
        right: 0;
    }

    .BestSeller .owl-carousel .owl-dots.disabled,
    .owl-carousel .owl-nav.disabled {
        display: none !important;
    }

    .product--tab--box .tab button.active {
        font-size: 10px;
        padding: 6px 10px 6px 3px;
        height: 29px;
        background: none;
        color: #000;
        border-radius: 0;
    }

    .best--seller .small-saller {
        border-right: 1px solid gainsboro;
        height: 372px;
        width: 90%;
        margin: 0 auto;
        border: 1px solid gainsboro;
        border-radius: 10px;
    }

    .contact {
        display: none;
    }

    /* landing page */

    .pannipariba-logo img {
        width: 50% !important;
    }

    .hero--owl .item {
        height: 352px;
    }

    .hero-bg h1 {
        font-size: 16px !important;
        margin-bottom: 10px;
        width: 58%;
    }

    .hero-bg p {
        width: 84%;
        font-size: 12px;
        line-height: 24px;
        margin-bottom: 13px;
    }

    .form-label{
        margin: 15px 0 6px 0;
    }

    .form-row{
        gap: 0 !important;
    }
}

@media only screen and (max-width: 425px) {
    .flex--box .logo {
        width: 90px;
    }

    .right--menu {
        gap: 6px;
    }

    header .menu a,
    .contact h6 {
        font-size: 10px;
    }

    .hero-bg p {
        font-weight: 500;
    }

    .BestSeller .owl-carousel .owl-dots.disabled,
    .owl-carousel .owl-nav.disabled {
        display: none !important;
    }

    .search-bar {
        width: 93%;
    }

    .product--tab--box .tab button {
        font-size: 10px;
        padding: 6px 10px 6px 3px;
        height: 26px;
    }

    .product--tab--box .tab button.active {
        font-size: 10px;
        padding: 6px 10px 6px 3px;
        height: 29px;
        background: none;
        color: #000;
        border-radius: 0;
    }

    .owl-nav {
        display: none;
    }

    .best--seller {
        border: none;
    }

    .best--seller .small-saller {
        border-right: 1px solid gainsboro;
        height: 372px;
        width: 80%;
        margin: 0 auto;
        border: 1px solid gainsboro;
        border-radius: 10px;
    }

    .info-container {
        width: 95%;
        margin: 0 auto;
    }

    .contact--box {
        width: 90%;
        left: 20px;
    }

    .follow--us {
        position: relative;
        margin-left: 31px;
    }

    .location h5 {
        font-size: 8px;
        text-align: center;
    }

    footer .logo {
        width: 150px;
        margin: 20px;
    }

    .contact {
        display: none;
    }
}