/* ================= GLOBAL ================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: black;
    --accent-color: #BE5504;
    --primary-font: "Bai Jamjuree";
    --Secondary-font: "Urbanist";
}

.container {
    max-width: 90%;
    margin: auto;
}

img {
    max-width: 100%;
    height: auto;
}

/* ================= HEADER ================= */
.headers {
    padding: 15px 0;
}

.logo img {
    width: 140px;
    height: auto;
}

.menus ul {
    display: flex;
    gap: 50px;
}

.login {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* ================= BANNER ================= */
.Banner-Section {
    height: 700px;
}

.banner-content h1 {
    font-size: 80px;
}

.banner-content h2 {
    font-size: 60px;
}

.banner-content p {
    font-size: 27px;
    max-width: 50%;
}

/* ================= PRODUCT ================= */
.product-heading {
    font-size: 50px;
    max-width: 60%;
}

.heading-p p {
    font-size: 20px;
    max-width: 75%;
}

/* ================= ARRIVAL ================= */

/* ================= DRY FRUIT ================= */
.dryfruit-detail h2 {
    font-size: 78px;
    max-width: 38%;
}

.dryfruit-detail p {
    font-size: 22px;
    max-width: 35%;
}

/* ================= PACKAGE ================= */
.package-product-card {
    grid-template-columns: repeat(4, 1fr);
}

/* ================= BLOG ================= */
.blog-cards img {
    height: 250px;
}

/* ================= ABOUT ================= */
.about-food-txt h3 {
    font-size: 56px;
}

/* ================= CONTACT ================= */
.contact-box {
    padding: 100px 120px;
}

/* ===================================================== */
/* =================== 998px ============================ */
/* ===================================================== */

/* ===================================================== */
/* =================== 1024px ONLY ====================== */
/* ===================================================== */

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

    /* ===== HEADER ===== */
    .menus ul {
        gap: 30px;
    }

    .menus ul li a {
        font-size: 18px;
    }

    .logo img {
        width: 120px;
        height: auto;
    }

    .login p {
        font-size: 20px;
    }

    .login i {
        font-size: 22px;
    }

    /* ===== BANNER ===== */
    .Banner-Section {
        height: 600px;
    }

    .banner-content {
        padding: 100px 0;
    }

    .banner-content h1 {
        font-size: 65px;
    }

    .banner-content h2 {
        font-size: 42px;
    }

    .banner-content p {
        font-size: 20px;
        max-width: 65%;
    }

    .banner-btn,
    .banner-btns {
        font-size: 20px;
        padding: 10px 25px;
    }

    /* ===== PRODUCT ===== */
    .product-heading {
        font-size: 42px;
        max-width: 100%;
    }

    .heading-p p {
        font-size: 18px;
        max-width: 80%;
    }

    .products img {
        max-width: 180px;
    }

    .products h3 {
        font-size: 22px;
    }

    /* ===== ARRIVAL ===== */
    .arival-products {
        padding: 70px 0;
    }

    .arival-card-img {
        height: 200px;
    }

    .arrival-detail h4 {
        font-size: 20px;
    }

    /* ===== DRY FRUIT ===== */
    .dryfruit-detail {
        padding-top: 120px;
    }

    .dryfruit-detail h2 {
        font-size: 55px;
        max-width: 55%;
    }

    .dryfruit-detail p {
        font-size: 18px;
        max-width: 55%;
    }

    .available-img img {
        width: 550px;
        height: auto;
    }

    /* ===== PACKAGE ===== */
    .package-product-card {
        grid-template-columns: repeat(3, 1fr);
    }

    .package-cards img {
        height: 300px;
    }

    /* ===== BLOG ===== */
    .blog-cards img {
        height: 220px;
    }

    .blog-cards p {
        font-size: 20px;
    }

    /* ===== ABOUT ===== */
    .about-food-txt h3 {
        font-size: 42px;
    }

    .about-food-txt p {
        font-size: 18px;
    }

    .img-food img {
        height: 450px;
    }
    .blog-date{
            display: flex !important;
    justify-content: start !important;
    align-items: start !important;
    gap: -1px;
    flex-direction: column-reverse;
    padding: 0 4px;
}
    .blog-date button {
    padding: 8px 25px;
    border: none;
    width: 100%;
    margin-top: 10px;
    /* border-radius: 50px; */
    background-color: var(--accent-color);
    color: white;
    font-family: var(--Secondary-font);
    font-size: 18px;
}

    /* ===== CONTACT ===== */
    .contact-box {
        padding: 70px;
    }
    .arrival-row > div {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
    
    /*========= About-Section ==========*/
    /*========= About-Section ==========*/
        .about-food-txt h3 {
        font-size: 44px;
    }

    .available-txt h3 {
        font-size: 36px;
    }

    .about-food-section {
        padding: 70px 0;
    }

    


}

/* ===================================================== */
/* =================== 768px ============================ */
/* ===================================================== */

@media (max-width: 768px) {

     .toggle-btn {
        display: block;
    }

    .login {
        display: none !important;
    }

    .menus {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #fff;
        padding: 30px;
        transition: 0.4s ease;
        z-index: 999;
        box-shadow: -5px 0 10px rgba(0,0,0,0.1);
    }

    .menus.active {
        right: 0;
    }

    .menus ul {
        flex-direction: column;
        gap: 25px;
        margin-top: 50px;
    }

    .menus ul li a {
        font-size: 18px;
    }

    .close-btn {
        display: block;
        font-size: 26px;
        cursor: pointer;
        background:none;
        padding:0;
        text-align: left;
    }
    /*======= Banner-section =======*/
    .Banner-Section {
        height:auto;
    }
    .banner-content {
        padding: 80px 0;
    }

    .banner-content h1 {
        font-size: 45px;
    }

    .banner-content h2 {
        font-size: 30px;
    }

    .banner-content p {
        font-size: 16px;
        max-width: 100%;
    }

    .banner-button {
        flex-direction: row;
        gap: 15px;
    }

    .product-heading {
        font-size: 32px;
    }

    .products img {
        max-width: 120px;
    }
        .product-heading {
        font-size: 32px;
        text-align:start;
        line-height: 2.4rem;
        max-width: 100%;
    }
    .products a {
        font-size:14px;
    }
    .products h3
    {
        font-size:16px;
    }
    .heading-p p {
    font-size: 18px;
    max-width: 100%;
}
.heading h3
{
    font-size:18px;
}
    /*Arrival-cards*/
    .arival-products
    {
        padding:30px 0;
    }
    .arival-card-img {
        height: 180px;
    }

    .dryfruit-detail {
        padding-top: 100px;
    }

    .dryfruit-detail h2 {
        font-size: 38px;
        max-width: 100%;
    }

    .dryfruit-detail p {
        max-width: 100%;
    }

    .package-product-card {
        grid-template-columns: 1fr 1fr;
    }

    .blog-cards img {
        height: 200px;
    }

    .about-food-txt h3 {
        font-size: 32px;
    }

    .contact-box {
        padding: 40px;
    }
        .logo-section {
        flex-direction: row;
        gap: 20px;
        text-align: center;
    }

    .logo-section img {
        width: 180px;
        height: auto;
    }

    .footer-icons {
        justify-content: center;
    }

    .fa-brands {
        font-size: 28px;
    }

    .footer-menus {
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        text-align: center;
    }

    .footer-explore {
        width: 21%;
    }

    .footer-explore h3 {
        font-size: 26px;
    }

    .footer-explore ul li {
        font-size: 18px;
    }
    /*================ About Section ==================*/
    .about-food-section {
        padding: 60px 0;
    }
    .about-food-txt h3 {
        font-size: 34px;
    }

    .about-food-txt p {
        font-size: 18px;
    }

    /* Quality Box */
    .quality-box-one,
    .quality-box-two {
        flex-direction: column;
        text-align: center;
    }

    /* Available Section */
    .available-txt {
        text-align: center;
    }

    .available-txt h3 {
        font-size: 30px;
    }

    /* Blog Heading */
    .heading {
        text-align: center;
    }

    .heading-p {
        justify-content: center !important;
        margin-top: 10px;
    }
    
    .blog-details h2 {
        font-size: 18px;
    }

    .blog-details p {
        font-size: 14px;
    }
    button.toggle-btn {
    background: none;
    color: var(--accent-color);
    padding: 0;
    font-size: 22px;
    margin-top: 17px;
}
}
/* ===================================================== */
/* =================== 520px ============================ */
/* ===================================================== */

 @media (max-width: 520px) {
     
     .banner-content h1 {
        font-size: 50px !important;
    }
    .pre-quality {
    font-size: 20px;
    font-family: var(--Secondary-font);
    }
    .banner-img
    {
        object-position:left;
    }
    .product-section {
       padding: 40px 0;
    }

    .products img {
        width: 100%;
        max-width: 284px !important;
        height: auto;
        object-fit: contain;
        border-radius: 50%;
        animation: rotateBowl 6s linear infinite;
        margin: 0 auto;
        min-height: 99px;
    }
    
    .arrival-detail h3 {
        font-family: var(--Secondary-font);
        font-size: 19px;
    }
        .dryfruit-detail {
        padding-top: 45px;
    }
        .dryfruit-detail h2 {
        font-size: 39px;
        max-width: 100%;
    }
    .dryfruit-detail p {
    font-size: 18px;
    max-width: 100% !important;
    }
   
    .review-slider {
       padding: 181px 0 50px;
       position: relative;
    }
    .owner-review
    {
        flex-direction:column;
        align-items:start !important;
    }
    .review-rating i {
    color: goldenrod;
    margin-top: 18px;
    font-size: 13px;
    }
    .slider-card p {
    padding-top: 10px;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: var(--Secondary-font);
    }
    .owner-position p
    {
        font-size:20px;
        font-weight:500;
    }
    .accordion {
     padding: 0px; 
    margin-top: 41px;
    }
    .faq-accordians {
    padding: 40px 0;
    background: rgb(233, 233, 233);
    }
    .accordion-button {
    background-color: whitesmoke;
    color: #000;
    font-family: var(--primary-font);
    font-weight: 500;
    font-size: 16px;
    transition: 0.3s;
    border: none;
    padding-top: 13px;
    padding-bottom: 10px;
    }
    .accordion-body {
    background-color: #fff;
    color: #0e0e0e;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--Secondary-font);
    border: none;
    padding: 0 17px 20px;
   }
   .faq-txt h3 {
    font-size: 35px;
    font-family: var(--primary-font);
    font-weight: 600;
    line-height: 43px;
    margin-bottom: 15px;
    }
    .faq-txt-banner {
    position: relative;
    background: url(../images/faq-second-banner.jpeg);
    padding: 40px 0;
    }
    .faq-txt p
    {
        font-size:16px;
    }
    .blog-card-section {
    padding-top: 34px;
    }
    .Blog-section {
    padding: 35px 0;
    background-color: rgb(239, 239, 239);
    }
    .blog-cards h3 {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
   }
   .blog-date time {
    font-weight: 500;
    font-size: 13px;
    }
        .footer-explore {
        width: 100%;
        text-align: left !important;
    }
 }

/* ===================================================== */
/* =================== 480px ============================ */
/* ===================================================== */
@media (max-width: 480px) {

    .banner-content h1 {
        font-size: 26px;
    }

    .banner-content h2 {
        font-size: 18px;
    }

    .banner-content p {
        font-size: 14px;
    }

    .about-food-txt h3 {
        font-size: 28px;
    }

    .about-food-txt p {
        font-size: 16px;
    }

    .available-txt h3 {
        font-size: 26px;
    }

    .available-txt p {
        font-size: 15px;
    }

    .available-btn {
        font-size: 16px;
        padding: 8px 25px;
    }
        .blog-cards img {
        height: 147px;
    }
    
}


/* ===================================================== */
/* =================== 420px ============================ */
/* ===================================================== */

@media (max-width: 426px) {

    .banner-content h1 {
        font-size: 32px;
    }

    .banner-content h2 {
        font-size: 22px;
    }

    .banner-content p {
        font-size: 14px;
    }

    .banner-btn,
    .banner-btns {
        font-size: 16px;
        padding: 10px 20px;
    }
    /*====== Product-Heading ===========*/
    
    .product-heading {
        font-size: 30px;
        line-height: 2.5rem;
        max-width:100%;
        text-align: center;
    }
    .arival-products .row {
            row-gap: 0px;
    }
    .heading-p p
    {
        font-size:16px;
        max-width: 100%;
        text-align:center;
    }
    .mb-4{
        margin:0;
    }

    .products img {
        max-width: 80px;
    }

    .products h3 {
        font-size: 14px;
    }

    .arival-card-img {
        height: 150px;
    }

    .package-product-card {
        grid-template-columns: 1fr;
    }
    /*========= Dryfruit-section =========*/
    .dryfruit-section{
        height:500px;
    }
    .dryfruit-section{
        font-size:19px;
    }
    .dryfruit-detail button {
        font-size:17px;
    }
    .heading-p h3{
        font-size:18px;
    }

    .blog-cards img {
        height: 180px;
    }

    .about-food-txt h3 {
        font-size: 26px;
    }
    .heading-p h3 {
        font-size: 16px;
        text-align: center;
        margin-top: 12px;
    }

    .contact-box {
        padding: 20px;
    }
     footer {
        padding: 40px 0;
    }

    .logo-section img {
        width: 150px;
    }

    .fa-brands {
        font-size: 24px;
    }

    .footer-menus {
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .footer-explore {
        width: 100%;
    }

    .footer-explore h3 {
        font-size: 22px;
    }

    .footer-explore ul li {
        font-size: 16px;
    }
    
    /*============= About-Section ==========*/
    /*============= About-Section ==========*/
     .about-food-txt h3 {
        font-size: 26px;
    }

    .available-txt h3 {
        font-size: 24px;
    }
    .about-food-txt p {
        font-size:15px;
    }

    .quality-box-txt h4 {
        font-size: 17px;
    }

    .quality-box-txt p {
        font-size: 14px;
    }
    .products {
    text-align: center;
     padding:0px; 
}

}

/* ===================================================== */
/* =================== 375px ============================ */
/* ===================================================== */

@media (max-width: 376px) {

    .banner-content h1 {
        font-size: 28px;
    }

    .banner-content h2 {
        font-size: 20px;
    }

    .banner-content p {
        font-size: 15px;
    }

    .product-heading {
        font-size: 22px;
    }

    .products h3 {
        font-size: 14px;
    }
     .banner-btn,
    .banner-btns {
        font-size: 16px;
        padding: 10px 20px;
    }

    .about-food-txt h3 {
        font-size: 22px;
    }
    .logo-section img {
        width: 130px;
    }

    .fa-brands {
        font-size: 22px;
        padding: 4px;
    }

    .footer-explore h3 {
        font-size: 20px;
    }
    .arival-products .row {
    row-gap: 0px;
}
    .product-heading {
        font-size: 32px;
        text-align: center;
        line-height: 2.4rem;
        max-width: 100%;
    }
        .heading-p p {
        font-size: 16px;
        text-align: center;
        max-width: 100%;
    }
        .heading h3 {
        font-size: 15px;
        text-align: center;
    }
    .blog-card-section {
    padding-top: 15px;
}
    .logo-section {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .footer-explore ul li {
        font-size: 14px;
    }
        .footer-explore {
        width: 100%;
    }
    .about-food-txt h3 {
        font-size: 24px;
    }

    .available-txt h3 {
        font-size: 22px;
    }

    .available-btn {
        font-size: 14px;
        padding: 8px 20px;
    }
    .about-food-txt p {
        font-size:15px;
    }
    .available-txt p
    {
        font-size:15px;
    }
        .banner-content {
        padding: 31px 0;
    }
        .arrival-detail h3 {
        font-family: var(--Secondary-font);
        font-size: 15px;
    }
}
/* ===================================================== */
/* =================== 321px ============================ */
/* ===================================================== */

@media (max-width: 321px) {

    .banner-content h1 {
        font-size: 40px !important;
    }
    .product-heading
    {
        font-size:28px;
    }
    .dryfruit-detail h2 {
        font-size: 33px;
        max-width: 100%;
    }
        .dryfruit-detail p {
        font-size: 16px;
        }
        .owner-position p {
        font-size: 15px;
        font-weight: 500;
    }
    .owner-position span
    {
        font-size:12px;
    }
    .slider-card p
    {
        font-size:13px;
    }
    .faq-txt h3
    {
        font-size:30px;
    }
        .faq-txt p
        {
            font-size:13px;
        }
            .heading-p p {
                font-size:13px;
            }
                .accordion-button {
                    font-size:14px;
                }
                    .blog-cards img {
        height: 128px;
        object-fit: scale-down;
    }
}