/* Mobile devices responsiveness */

/* For very small mobile devices */

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

    .nav-links ul {
        width: 95vw;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
    }
}



@media only screen and (max-width: 370px) {
    .utility-bar {
        padding: 10px 0px;
    }

    .utility-contacts {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    #logo-text {
        font-size: 25px;
    }
}

@media only screen and (min-width: 371px) and (max-width:580px) {
    .utility-bar {
        padding: 10px 12px;
    }
}

@media only screen and (min-width: 371px) and (max-width:580px) {
    .utility-bar {
        padding: 10px 12px;
    }

    #logo-text {
        font-size: 35px;
    }
}

@media only screen and (max-width:580px) {
    :root {
        font-size: 14px;
    }

    .common-btn {
        width: 150px;
        height: 55px;
        padding: 20px 15px;
    }

    .utility-bar {
        height: auto;
        flex-direction: column;
    }

    .utility-contacts {
        margin-bottom: 15px;
    }

    .common-navbar {
        flex-direction: column;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0px 0px 20px 0px;
    }

    .nav-links a {
        padding: 4px;
        margin: 0px 5px;
    }

    .logo {
        margin: 10px 0px;
        justify-content: center;
    }


    .logo-link {
        column-gap: 6px;
    }

    .nav-btn {
        margin-top: 25px;
    }


    /*-------------------- hero-section styling ----------------------*/

    .hero-main-img {
        top: -225px;
    }

    .hero-main-img::before {
        opacity: 0;
    }

    .hero-content {
        max-width: 95vw;
        margin: 235px auto 0px auto;
    }

    .hero-heading>h1 {
        font-size: 4.5rem;
        max-width: 100%;
    }

    .hero-para p {
        font-size: 1.2rem;
        max-width: 85%;
        margin: 4px auto 12px auto;
    }

    .hero-btn-group {
        column-gap: 10px;
    }


    /*-------------------- menu-section styling ----------------------*/

    #menu-section {
        max-width: 95vw;
        margin: 60px auto;
    }

    .menu-item-list {
        column-gap: 25px;
    }


    /*-------------------- feature-section styling ----------------------*/

    .feature-content-img {
        width: 100%;
        position: relative;
        top: 0px;
        left: 0px;
    }

    .feature-content {
        flex-direction: column;
        margin: 5px auto;
        max-width: 95vw;
    }

    .contact-card {
        width: auto;
        padding: 0px 30px;
        position: relative;
        right: 0;
        bottom: 0;
    }

    .feature-content-right {
        padding: 35px 20px;
    }


    /*--------------------- service-section styling ----------------------*/

    #service-section {
        max-width: 95vw;
        margin: 25px auto;
        padding: 30px 4px;
    }

    .service-heading {
        width: 100%;
        text-align: left;
        margin: 30px 0px 50px 0px;
        text-align: center;

    }

    .service-list {
        gap: 30px;
    }

    .service-img>img {
        margin: auto;
        width: 95%;
    }

    /*-------------------- delivery-section styling ----------------------*/

    .delivery-content {
        max-width: 95vw;
        margin: 10px auto;
        padding: 30px 4px;
        column-gap: 15px;
        flex-direction: column;
    }

    .delivery-img-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        justify-items: center;
    }

    .delivery-box {
        padding: 20px 20px;
    }

    .delievery-img {
        width: 95%;
    }


    /*-------------------- customer-section styling ----------------------*/

    #customer-section {
        max-width: 95vw;
        padding: 15px 0px;
        background-color: white;
    }

    .customer-review-list {
        flex-direction: column;
        row-gap: 25px;
        padding: 0px 15px;
    }

    .customer-review-box {
        width: auto;
        height: 380px;
        padding: 25px 20px;
        flex-direction: column;
    }


    /*-------------------- blog-section styling ----------------------*/

    #blog-section {
        padding: 55px 0px;
    }

    .blog-content {
        width: 95vw;
        margin: 30px auto;
    }


    .blog-header {
        height: auto;
        align-items: center;
        flex-direction: column;
        text-align: center;
        row-gap: 20px;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        grid-gap: 25px;
        padding: 4px 20px;
    }


    /*-------------------- footer-section styling ----------------------*/

    /* .common-footer{
        text-align: center;
    } */

    .footer-content {
        max-width: 95vw;
        margin: 0px auto 100px auto;
        flex-direction: column;
        align-items: center;
        row-gap: 30px;
    }

    .footer-company {
        width: 95%;
        height: auto;
    }

    .footer-links {
        flex-direction: column;
        margin: 0px auto;
        padding: 12px 20px;
        width: 95%;
        text-align: center;
    }

    .footer-links-1 {
        margin-bottom: 25px;
    }

    .f-common-heading {
        margin-bottom: 20px;
    }

    .f-company-text {
        text-align: center;
    }

    .f-company-text {
        margin: 12px 20px;
    }

    .f-icons-list {
        justify-content: center;
    }

    .f-icons-list {
        margin: 20px auto;
    }

    .f-social-icons {
        font-size: 25px !important;
        width: 35px;
        height: 35px;
        padding: 6px;
    }

    .footer-img-gallery {
        padding: 12px 20px;
        text-align: center;
    }

    .f-img-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        justify-items: center;
    }
}


/* Tablet and small laptops devices responsiveness */

@media only screen and (min-width: 581px) and (max-width:1300px) {
    .utility-bar {
        padding: 10px 12px;
    }

    /*-------------------- navbar styling ----------------------*/

    .common-navbar {
        flex-direction: column;
        max-width: 100%;
        height: auto;
        margin: 0;
        padding: 0px 0px 20px 0px;
    }

    .nav-links ul {
        margin-bottom: 30px;
    }


    /*-------------------- hero-section styling ----------------------*/

    #hero-section {
        height: 90vh;
    }

    .hero-content {
        max-width: 90vw;
        margin: 235px auto 0px auto;
    }



    .hero-main-img {
        top: -177px;
        height: 90vh;
    }


    .hero-heading>h1 {
        max-width: 100%;
    }

    /*-------------------- menu-section styling ----------------------*/

    #menu-section {
        max-width: 95vw;
        margin: 60px auto;
    }


    /*-------------------- service-section styling ----------------------*/

    .service-list {
        gap: 30px;
    }

    .service-heading {
        width: 100%;
        margin: 35px 0px 40px 0px;
    }

    /*-------------------- feature-section styling ----------------------*/

    .feature-content-img {
        width: 100%;
    }

    .feature-content {
        flex-direction: column;
        max-width: 95vw;
    }

    .contact-card {
        width: auto;
        position: relative;
        bottom: 0px;
        right: 0px;
    }

    .feature-content-right {
        padding: 60px 90px;
    }

    /*-------------------- delivery-section styling ----------------------*/

    .delivery-content {
        flex-direction: column;
        align-items: start;
    }

    .delivery-box {
        padding: 50px 10px;
    }

    .delivery-img-grid {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 1fr;
        grid-gap: 20px;
        justify-items: center;
        justify-items: start;
    }

    .delivery-img-1 {
        grid-row: 1 / 1;
        width: 95%;
    }

    .delivery-img-2 {
        width: 100%;
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .delivery-img-3 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    /*-------------------- customer-section styling ----------------------*/

    .customer-review-list {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        row-gap: 30px;
    }

    .customer-review-box {
        flex-direction: column;
    }

    /*-------------------- blog-section styling ----------------------*/


    .blog-header {
        height: auto;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .blog-heading {
        margin-bottom: 30px;
    }

    .blog-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        grid-template-rows: repeat(1, 1fr);
        /* grid-gap: 25px; */
    }


    /*-------------------- footer-section styling ----------------------*/

    /* .common-footer{
        text-align: center;
    } */

    .footer-content {
        flex-direction: column;
    }

    .footer-company {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .footer-links {
        flex-direction: row;
        margin: 0px auto;
        padding: 30px 20px;
        width: 95%;
        text-align: center;
    }

    .f-icons-list {
        justify-content: center;
    }

    .f-img-grid {
        justify-items: center;
        width: 70%;
    }

    .footer-img-gallery {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}


/* Big Screen and 4K TV devices responsiveness */


@media only screen and (min-width: 2000px) {

    :root {
        font-size: 18px;
    }

    .hero-heading>h1 {
        font-size: 6.5rem;
    }

    .menu-item {
        width: 350px;
        height: 400px;
    }

    .menu-item-list {
        column-gap: 5px;
    }

    .common-btn {
        width: 190px;
        height: 70px;
    }

    .common-navbar {
        max-width: 70vw;
    }

    #menu-section {
        max-width: 70vw;
    }

    .feature-content {
        max-width: 70vw;
    }

    #service-section {
        max-width: 70vw;
    }

    .delivery-content {
        max-width: 70vw;
    }

    #customer-section {
        max-width: 70vw;
    }

    .blog-content {
        max-width: 70vw;
    }

    .footer-content {
        max-width: 70vw;

    }

}