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

    :root {
        --font-large: 18px;
        --font-normal: 16px;
        --font-small: 14px;
        --font-smaller: 12px;
    }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.25rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: .75rem; }

    .container {
        padding: 0 20px;
    }

    .btn {
        height: 45px;
    }

    /*=====================================*/
    /*------------- Scroll Top ------------*/
    /*=====================================*/
    .scroll-top {
        display: none;
    }


    /*=====================================*/
    /*------------- Header ----------------*/
    /*=====================================*/
    .header,
    .header.sticky {
        width: 100%;
        height: auto;
        padding: 10px 0;
    }
    .nav-item {
        height: auto;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
    .nav-item > .nav-icon > i {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    .nav-item > .nav-logo > img {
        max-width: 150px;
    }
    .nav-item > .nav-btn {
        display: none;
     }
    .menu {
        left: -100%;
        width: 100%;
    }
    .menu > .menu-header > .menu-logo > img {
        max-width: 150px;
    }
    .menu > .menu-item,
    .menu > .menu-links,
    .menu > .menu-icons {
        margin-top: 30px;
    }


    /*=====================================*/
    /*------------- Footer ----------------*/
    /*=====================================*/
    .footer {
        padding: 0;
    }
    .footer-content {
        margin-top: 50px;
    }
    .footer-content > .footer-text > img {
        max-width: 180px;
    }
    .footer-content > .footer-links > h4 {
        padding-bottom: 20px;
    }
    .footer-content > .footer-links > ul {
        margin-top: 15px;
    }


    /*=====================================*/
    /*------------- Section ---------------*/
    /*=====================================*/
    .main {
        padding-top: 90px;
    }
    .section {
        padding: 50px 0;
    }
    .section-title {
        gap: 15px;
    }
    .section-title > h1 {
        font-size: 28px;
    }
    .section-title > h3 {
        font-size: 18px;
    }
    .section-title > span {
        font-size: var(--font-smaller);
    }


    /*=====================================*/
    /*----------- Section Banner ----------*/
    /*=====================================*/
    .section-banner {
        padding: 0;
    }
    .banner-text {
        padding: 80px 0;
        text-align: center;
    }
    .banner-text > h1 {
        font-size: 32px;
    }
    .banner-text > .banner-input {
        width: 100%;
        height: 45px;
    }
    .banner-text > .banner-input > button {
        width: 120px;
        height: 45px;
    }
    .banner-carousel .carousel img {
        height: 450px;
    }
    .carousel-img-bg1 {
        width: 250px;
        height: 250px;
    }
    .carousel-img-bg2 {
        width: 350px;
        height: 350px;
    }
    .banner-carousel .carousel .carousel-indicators [data-bs-target] {
        width: 20px;
        height: 20px;
        border: 5px solid var(--col-primary);
    }


    /*=====================================*/
    /*---------- Section Features ---------*/
    /*=====================================*/
    .section-features .column:not(:last-child) {
        margin-bottom: 30px;
    }
    

    /*=====================================*/
    /*--------- Section Process -----------*/
    /*=====================================*/
    .work-item {
        margin-top: 30px;
        grid-template-columns: 1fr;
    }
    .work-item > div:last-child {
        margin-top: 0;
    }
    .work-item > div > div > img {
        width: 100px;
        height: 100px;
    }


    /*=====================================*/
    /*--------- Section Find --------------*/
    /*=====================================*/
    .find-chef-content {
        padding: 30px 25px 25px;
    }
    .find-chef-content .find-chef-img,
    .find-chef-content .find-chef-bg {
        display: none;
    }
    .find-chef-content .find-chef-text {
        gap: 25px;
        flex-direction: column;
        text-align: center;
    }


    /*=====================================*/
    /*--------- Section Testimonial -------*/
    /*=====================================*/
    .testimonial-item {
        padding: 30px;
    }


    /*=====================================*/
    /*--------- Chef-list.html ------------*/
    /*=====================================*/
    .section-filter {
        padding: 35px 0 25px 0;
    }
    .filter-btns > .filter-icon {
        display: unset;
    }
    .filter-btns > .btn {
        display: none;
    }
    .filter-dialog {
        width: 100%;
    }
    .filter-dialog-content {
        padding: 20px 20px 0;
        max-height: 60vh;
    }
    .chef-card > .chef-card-content {
        padding: 20px 10px;
    }
    .chef-card > .chef-card-content > .chef-card-img > img {
        width: 100px;
        height: 100px;
    }
    .chef-card > .chef-card-btn {
        padding: 0 10px 10px;
    }
    .page-nav > ul > li > a {
        width: 40px;
        height: 40px;
    }


    /*=====================================*/
    /*--------- Chef-details.html ---------*/
    /*=====================================*/
    .chef-details-carousel {
        height: 200px;
    }
    .chef-intro,
    .chef-intro video {
        height: 200px;
    }
    .chef-details {
        padding: 20px;
    }
    .chef-profile {
        grid-template-columns: 1fr;
    }
    .chef-profile > .chef-profile-text > h3 {
        font-size: 26px;
    }
    .chef-profile > .chef-profile-text > h3 > span {
        margin-left: 0;
    }
    .chef-menus > .chef-menus-list {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .chef-img-list {
        display: none;
    }
    .review-items {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .chef-intro {
        margin-top: 25px;
    }


    /*=====================================*/
    /*------------- about.html ------------*/
    /*=====================================*/
    .about-content-img {
        display: none;
    }


    /*=====================================*/
    /*------------- login.html ------------*/
    /*=====================================*/
    .auth-page {
        padding: 0;
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .auth-page .auth-img img {
        display: none;
    }
    .form-content {
        width: 100%;
        padding: 20px;
    }
    .form-content .form-title > h3{
        font-size: 28px;
    }
    .form-content .form-btn a {
        font-size: var(--font-small);
    }
    .chef-register-page {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    .adverdise-content .main-video {
        height: 220px;
    }
    .adverdise-content .videos {
        gap: 5px;
    }
    .adverdise-content .videos .video {
        height: 50px;
    }


    /*=====================================*/
    /*--------- find-chef.html ------------*/
    /*=====================================*/
    .event-booking-header {
        height: 10vh;
    }
    .event-booking-header > img {
        width: 120px;
    }
    .event-booking-header > a > i {
        width: 35px;
        height: 35px;
        font-size: 15px;
    }
    .event-booking-footer > button {
        width: 150px;
        font-size: var(--font-small);
    }
    .event-booking-content {
        height: 80vh;
    }
    .event-booking-content .event-booking-steps .step-nav {
        font-size: var(--font-smaller);
    }
    .event-booking-content .event-booking-wizard {
        padding: 0;
    }
    .booking-item {
        margin-top: 20px;
        padding: 20px;
    }
    .booking-item-title {
        margin-bottom: 15px;
    }
    .number-input:not(:last-child) {
        margin-bottom: 20px;
    }
    .chef-list-content .chef-list {
        width: 100%;
    }
    .booking-wizard-result {
        margin-top: 20px;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /*=====================================*/
    /*----------- Pricing.html ------------*/
    /*=====================================*/
    .estimate-dialog,
    .menu-dialog {
        padding: var(--48px) var(20px) var(--20px);
        max-width: 90%;
        width: 90%;
    }
    .estimate-dialog-close,
    .menu-dialog-close {
        right: var(--12px);
        top: var(--12px);
    }
    .pricing-content {
        grid-template-columns: 1fr;
    }
    .pricing-card {
        padding: var(--24px);
    }
    .pricing-field {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .section-pricing .carousel-inner .carousel-item img {
        height: auto;
    }
    .pricing-field > .pricing-field-input.booking-item-select {
        flex-wrap: wrap;
    }
    /*=====================================*/
    /*--------- chef-menus.html -----------*/
    /*=====================================*/
    .section-chef-menu-title,
    .chef-menu-items {
        padding: 0 0 15px 0;
    }
    .chef-menu-cart {
        padding: var(--20px);
    }
    .chef-menu-item .menu-item {
        /*height: var(--60px);*/
        padding: 0 var(--10px);
    }
    .chef-menu-item .menu-item > span {
        font-size: var(--font-small);
    }
    .menu-item-count > button {
        width: var(--28px);
        height: var(--28px);
        font-size: var(--font-normal);
    }
    .menu-item-count > input {
        width: var(--32px);
    }


    .chef-registration-form {
        padding: 20px;
        gap: 0;
    }
    .chef-registration-form .btn {
        width: 100%;
    }

    .booking-summary,
    .booking-order {
        margin-top: 30px;
    }
    .booking-summary > ul,
    .booking-order > ul {
        margin-top: 15px;
    }
}