﻿@media (max-width: 768px) {
    .hero-overlay {
        padding-top: 40%;
        padding-left: 5%;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text p {
        font-size: 1rem;
    }

    .logo-title {
        font-size: 1rem;
    }

    .logo-subtitle {
        font-size: 0.8rem;
    }
    .section-title {
        font-size: 1rem;
        font-weight: 600;
        width: 100%;
    }
    .about-text .big-text {
        font-size: 3rem;
    }
    .status-img {
        display:none;
    }
    .navbar-main {
        background-color: black !important;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
       
    }
}
/* Default (Desktop > 992px) */
/* Already applied: width: 60% */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
    .finance-status {
        width: 100%;
        right: 50%;
        transform: translateX(50%); /* center align */
        bottom: 30px;
    }

    .status-card h2 {
        font-size: 1.8rem;
    }

    .status-card p {
        font-size: 0.95rem;
    }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
    .finance-status {
        width: 100%;
        right: 50%;
        transform: translateX(50%);
        bottom: 20px;
        padding: 15px;
    }

        .finance-status .col-4 {
            width: 100%; /* stack vertically */
            margin-bottom: 15px;
        }

    .status-card h2 {
        font-size: 1.5rem;
    }

    .star-rating i {
        font-size: 1.2rem;
    }
}

/* Extra Small Devices (< 576px) */
@media (max-width: 575px) {
    .finance-status {
        width: 100%;
       
        transform: translateX(50%);
        bottom: 15px;
       
        border-radius: 12px;
    }
    .status-card {
        padding:0 !important;
    }
    .status-card h2 {
        font-size: 1.3rem;
    }

    .status-card p {
        font-size: 0.85rem;
    }

    .star-rating i {
        font-size: 1rem;
    }
    .status-wrapper {
        position: relative;
        padding-bottom: 300px;
    }
}
@media (max-width: 768px) {
    .contact-page {
        flex-direction: column;
    }

    .contact-left {
        display:none;
    }
}
