@media (max-width: 1199.98px) {
    .hero-dashboard {
        height: 400px;
    }

    .dashboard-main {
        width: 280px;
        padding: 1.5rem;
    }

    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-item.span-2 {
        grid-column: span 2;
    }


}











@media (max-width: 991.98px) {
    .hero-section {
        padding: 100px 0 60px;
    }

    .hero-dashboard {
        height: 350px;
        margin-top: 3rem;
    }

    .dashboard-main {
        width: 260px;
        padding: 1.25rem;
    }

    .float-card {
        transform: scale(0.85);
    }

    .float-card-1 {
        right: -20px;
    }

    .float-card-2 {
        left: -20px;
    }

    .timeline-line {
        left: 20px;
    }

    .timeline-dot {
        left: 20px;
    }

    .timeline-item .tl-content {
        width: calc(100% - 60px);
        margin-left: auto !important;
        margin-right: 0 !important;
        text-align: left !important;
    }

    .timeline-item.left .tl-icon {
        margin-left: 0;
    }

    .process-line {
        display: none;
    }

    .process-steps {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .step-item {
        text-align: left;
        display: flex;
        align-items: flex-start;
        gap: 1.25rem;
    }

    .step-number {
        margin-bottom: 0;
        min-width: 64px;
        height: 64px;
        font-size: 1.25rem;
    }

    .step-item p {
        margin: 0;
        max-width: 100%;
    }

    .ceo-image-wrapper img {
        height: 380px;
    }

    .ceo-experience-badge {
        width: 100px;
        height: 100px;
        bottom: -15px;
        right: -10px;
    }

    .ceo-experience-badge span:first-child {
        font-size: 1.4rem;
    }
    .form-panel {
        padding: 2rem 1.75rem;
    }

    .form-heading {
        font-size: 1.5rem;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    .section-title {
        font-size: 2.1rem;
    }

    .section-padding {
        padding: 70px 0;
    }

    .section-padding-lg {
        padding: 80px 0;
    }

    .cta-content h2 {
        font-size: 2.1rem;
    }

    .navbar-profqual {
        padding: .8rem 0;
    }

    .navbar-brand img {
        width: 50px;
        height: 50px;
    }


    .navbar-cta {
        display: block;
    }
}











@media (max-width: 767.98px) {
    .hero-title {
        font-size: clamp(2rem, 7vw, 2.75rem);
    }

    .hero-desc {
        font-size: 1rem;
    }

    .hero-dashboard {
        height: 300px;
    }

    .dashboard-main {
        width: 240px;
        padding: 1rem;
    }

    .dash-stat-value {
        font-size: 0.95rem;
    }

    .float-card {
        padding: 0.75rem 1rem;
    }

    .float-card .fc-value {
        font-size: 1rem;
    }

    .float-card .fc-icon {
        width: 30px;
        height: 30px;
        font-size: 0.85rem;
    }

    .metric-number {
        font-size: 2.25rem;
    }

    .metric-number2 {
        font-size: 2.25rem;
    }

    .metric-number3 {
        font-size: 2.25rem;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-item.span-2 {
        grid-column: span 1;
    }

    .section-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }

    .ceo-image-wrapper::before {
        display: none;
    }

    .ceo-image-wrapper img {
        height: 320px;
    }

    .ceo-signature {
        flex-direction: column;
        align-items: flex-start;
    }
    .form-panel {
        padding: 2rem 1.75rem;
    }

    .form-heading {
        font-size: 1.5rem;
    }
    .search-card {
        padding: 8px;
        border-radius: 20px;
    }

    .search-input-container {
        padding: 0 10px 0 16px;
    }

    .search-input {
        padding: 18px 10px;
        font-size: 1rem;
    }

    .floating-label {
        left: 46px;
        font-size: 1rem;
    }

    .search-btn {
        padding: 0 24px;
        border-radius: 0 16px 16px 0;
    }

    .search-btn .btn-text {
        display: none;
    }

    .search-btn .btn-icon {
        font-size: 1.25rem;
    }

    .hero-section {
        padding: 130px 0 70px;
    }

    .hero-title {
        font-size: 2.1rem;
    }


    .section-title {
        font-size: 1.8rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }

    .section-padding {
        padding: 56px 0;
    }

    .cta-section {
        padding: 70px 0;
    }

    .cta-content h2 {
        font-size: 1.8rem;
    }
}











@media (max-width: 575.98px) {
    .form-panel {
        padding: 1.75rem 1.25rem;
    }

    .form-heading {
        font-size: 1.35rem;
    }

    .form-options {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .login-card {
        border-radius: 20px;
    }

    .input-group-custom .custom-input {
        height: 52px;
    }

    .btn-login {
        height: 50px;
    }
    .search-btn {
        width: 64px;
        min-width: 64px;
        padding: 0;
    }

    .btn-text {
        display: none;
    }

    .search-btn .btn-icon {
        margin: 0;
        font-size: 1.2rem;
    }

     .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn-primary-custom,
    .cta-buttons .btn-outline-custom {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }


    .intro-highlight {
        flex-direction: column;
        gap: 16px;
    }
    
}










@media (max-width: 424.98px) {
    .hero-btns {
        flex-direction: column;
    }

    .hero-btns .btn-accent,
    .hero-btns .btn-outline-light {
        width: 100%;
        text-align: center;
    }

    .metric-card {
        padding: 2rem 1rem;
    }

    .metric-number {
        font-size: 2rem;
    }

    .metric-number2 {
        font-size: 2rem;
    }

    .metric-number3 {
        font-size: 2rem;
    }

    .testimonial-card {
        padding: 1.75rem 1.25rem;
    }

    .cta-btns {
        flex-direction: column;
        align-items: center;
    }

    .cta-btns .btn-accent-lg,
    .cta-btns .btn-outline-light {
        width: 100%;
        max-width: 320px;
        text-align: center;
    }
}