@media (max-width: 480px) {
    .sec1-head {
        font-size: 22px;
    }

    .sec1para {
        font-size: 14px;
    }

    .post-button {
        font-size: 14px;
    }

    .btn-save-primary {
        font-size: 13px;
        padding: 12px 20px;
    }

    .input-wrapper-flex {
        gap: 10px;
    }

    .send-icon {
        width: 30px;
    }

    .chat-field-input {
        font-size: 12px;
    }

    .settings-layout-row {
        gap: 10px;
    }

    .btn-outline-light {
        padding: 10px 15px;
        font-size: 11px;
    }

    .btn-primary-orange {
        padding: 10px 15px;
        font-size: 11px;

    }

    .settings-main-content {
        gap: 0px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .hero-wrapper {
        height: 220px;
    }

    .custom-card {
        padding: 15px;
    }

    .card-title {
        font-size: 20px;
    }

    .step-container {
        flex-direction: row;
        justify-content: center;
        margin-bottom: 20px;
        gap: 10px;
    }

    .step-line {
        width: 20px;
        height: 2px;
        margin: 15px 0 0 0;
    }

    .step-text-box {
        display: none;
    }

    .action-footer {
        flex-direction: column;
        gap: 15px;
    }

    .next-btn {
        width: 100%;
    }

    .detail-main-title {
        font-size: 20px;
    }

    .project-title-text {
        font-size: 18px;
    }

    .contract-value-text {
        font-size: 22px;
    }

    .section-heading {
        font-size: 16px;
    }

    .header-sub-text,
    .company-text {
        font-size: 12px;
    }

    .payment-main-text {
        font-size: 13px;
    }

    .due-value-text {
        font-size: 14px;
    }

    .pay-btn-padding {
        padding: 10px;
        font-size: 13px;
    }

    .custom-modal-content {
        padding: 25px 20px;
    }

    .modal-title-custom {
        font-size: 16px;
    }

    .modal-desc {
        font-size: 12px;
        margin-bottom: 20px;
    }

    .summary-box {
        padding: 15px;
    }

    .stat-value {
        font-size: 12px;
    }

    .warning-text {
        font-size: 11px;
    }

    .btn-custom {
        font-size: 12px;
        padding: 8px 12px;
    }

    /* Small Icons */
    .icon-circle-bg {
        width: 48px;
        height: 48px;
        margin-bottom: 15px;
    }

    .icon-circle-bg i {
        font-size: 20px;
    }

    .rating-title {
        font-size: 22px;
    }

    .rating-subtitle {
        font-size: 12px;
    }

    .rating-label {
        font-size: 12px;
    }

    .stars-row {
        font-size: 14px;
    }

    .upload-dropzone {
        padding: 20px;
    }

    .upload-icon {
        font-size: 22px;
    }

    .form-title {
        font-size: 26px;
    }

    .form-subtitle {
        font-size: 13px;
    }

    .btn-outline-social {
        font-size: 12px;
    }

    .branding-side {
        display: none;
    }

    .form-side {
        width: 100%;
    }

    .proj-title {
        font-size: 16px;
    }

    .project-detail-hero {
        height: 250px;
    }




}

@media (min-width: 481px) and (max-width: 991px) {
    .sec1-head {
        font-size: 25px;
    }

    .sec1para {
        font-size: 14px;
    }

    .post-button {
        font-size: 14px;
    }

    .settings-layout-row {
        gap: 20px;
    }

    .nav-text {
        font-size: 13px;
        text-wrap: nowrap;
    }

    .hero-title {
        font-size: 32px;
    }

    .hero-wrapper {
        height: 240px;
    }

    .custom-card {
        padding: 20px;
    }

    .step-container {

        margin-bottom: 30px;
        align-items: flex-start;
        gap: 15px;
    }

    .step-line {
        width: 30px;
        height: 2px;
        margin: 15px 0 0 0;
    }

    .proj-title {
        font-size: 15px;
    }

    .branding-side {
        display: none;
    }

    .form-side {
        width: 100%;
        padding: 20px;
    }
}


@media (max-width: 768px) {
    .main-dashboard-container {
        flex-direction: column;
    }

    .profile-flex {
        flex-direction: column;
    }

    .project-item-row {
        flex-direction: column;
    }

    .project-thumb {
        width: 100%;
    }

    .layout-row-flex {
        flex-direction: column;
    }

    .side-column-content {
        flex: 100%;
    }

    .input-field-half {
        flex: 100%;
    }



    .time-stamp-text {
        margin-top: 5px;
    }

    .msg-truncate {
        max-width: 250px;
    }

    .balance-orange-text {
        font-size: 28px;
    }

    .withdraw-amount-input {
        font-size: 22px;
    }

    .currency-symbol {
        font-size: 18px;
    }

    .bank-card-ui {
        padding: 12px;
    }

    .settings-layout-row {
        flex-direction: column;
    }


    .amount-selection-grid {
        grid-template-columns: 1fr;
    }

    .amount-card-inner {
        padding: 15px;
    }

    .amount-value-text {
        font-size: 20px;
    }

    .project-hero-sm {
        height: 220px !important;
    }

    .sec1-head {
        font-size: 22px !important;
    }

    .section-heading {
        font-size: 18px !important;
    }

    /* Reducing section gaps */
    .mb-md-4,
    .mb-md-5 {
        margin-bottom: 1.5rem !important;
    }

    .mt-5 {
        margin-top: 2rem !important;
    }




}

@media (max-width: 576px) {
    .message-card-parrent {

        align-items: start;
        display: block;
    }
}