body {
    background-color: #eeeef0;
}

@media (max-width: 767px) {
    .header-img {
        width: 90px !important;
        height: 25px !important;
        margin-left: 20px !important;
    }
    .navbar {
        justify-content: flex-start !important; 
    }
    .navbar-toggler {
        border: none !important;
        margin-right: 20px !important;
    }
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        min-width: 150px !important;
        right: 20px !important;
        width: auto;
        z-index: 1000;
        border: 1px solid rgb(211, 209, 209) !important;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1) !important;
        background-color: white !important;
        border-radius: 8px !important;
    }
    .navbar-nav {
        padding: 10px 0 !important;
        width: auto !important;
    }
    .nav-item {
        width: auto;
        margin-left: 20px !important;
    }
    .nav-item .btn {
        width: 80% !important;
        margin-left: 2px !important;
        margin-right: auto !important;
    }
    .nav-link, .btn {
        display: block !important;
        padding: 8px 16px !important;
        white-space: nowrap !important; 
    }
    /* Hero Section */
    
    .hero-text {
        text-align: center !important;
    }
    .app-download {
        display: flex !important;
        flex-direction: row !important;
    }
    .app-download img {
        width: 50% !important;
        height: auto !important;
    }

    /* Search Bar Div */
    .search-bar {
        width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px !important;
        gap: 10px !important;
    }
    .search-bar p {
        text-align: center !important;
        margin-bottom: 0 !important;
    }
    .search-bar input {
        width: 100% !important;
        
        margin-left: 0 !important;
    }
    .form-control {
        text-align: center !important;
    }
    .search-bar button {
        width: 100% !important;
    }

    /* How Tere Works Heading */
    .how-heading {
        width: 100% !important;
    }
    .how-heading h2 {
        width: auto !important;
    }
    .how-heading p {
        width: auto !important;
    }

    /* How Tere Works Section */
    .how-works-row {
        flex-direction: column !important;
        align-items: center !important;
    }
    .left-col, .right-col {
        display: contents !important;
    }
    .center-col {
        order: 1 !important;
        width: 100% !important;

    }
    .number-margin1 {
        margin-bottom: 100px !important;
        margin-top: 100px !important;
    }
    .post{
        margin-top: -70px !important;
    }
    .number-margin2{
        margin-bottom: 40px !important;
        margin-top: 40px !important;
    }
    .post2{
        margin-top: -15px !important;
    }
    .number-margin3{
        margin-bottom: 30px !important;
        margin-top: 30px !important;
    }
    .post4{
        margin-top: 30px !important;
    }
    .step1 {
        order: 2 !important;
    }
    .step2 {
        order: 3 !important;
    }
    .step3 {
        order: 4 !important;
    }
    .step4 {
        order: 5 !important;
    }
    .step {
        text-align: center !important;
        margin: 20px 0 !important;
        width: 100% !important;
    }
    .step .position-relative {
        margin: 0 auto !important;
        display: block !important;
    }
    .step h5 {
        text-align: center !important;
    }
    .step p {
        text-align: center !important;
        width: auto !important;
        margin: 0 auto !important;
    }
    .circle-img {
        width: 300px !important;
        height: auto !important;
    }
    .phone-mobile {
        width: 180px !important;
        height: auto !important;
    }

    /* Dots */
    .dots {
        justify-content: center !important;
    }

    /* Tere Benefits Heading */
    .benefits-heading {
        width: 100% !important;
    }
    .benefits-heading h2 {
        width: auto !important;
    }

    /* Tere Benefits Sections */
    .benefit-box {
        width: 100% !important;
        height: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px !important;
    }
    .benefit-box p {
        margin: 10px 0 !important;
        width: auto !important;
    }
    .benefit-box h2 {
        margin: 10px 0 !important;
    }
    .benefit-box img.benefit-img {
        margin: 20px 0 !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
    .second-benefit .benefit-img {
        order: 4 !important;
    }
    .third-benefit p {
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
    .third-benefit p:first-of-type {
        margin-top: 10px !important;
    }
    .phone-container {
        display: none !important;
    }

    /* Footer */
    .footer {
        flex-direction: column !important;
        align-items: center !important;
        height: auto !important;
        margin-top: 50px !important;
    }
    .footer-logo img {
        margin-left: 0 !important;
        margin-bottom: 20px !important;
    }
    .footer-inner {
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 20px !important;
    }
    .app-buttons {
        order: -1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
    }
    .app-buttons img {
        margin-right: 0 !important;
        margin-bottom: 10px !important;
        width: 150px !important;
    }
    .be-friend {
        width: auto !important;
        text-align: center !important;
        margin: 10px 0 !important;
    }
}