/* ========================= */
/* LARGE LAPTOPS */
/* ========================= */

@media (max-width: 1400px) {

    .hero-left h1 {

        font-size: 64px;
    }

}



/* ========================= */
/* LAPTOPS */
/* ========================= */

@media (max-width: 1200px) {

    .hero {

        gap: 40px;
    }

    .hero-left h1 {

        font-size: 56px;
    }

    .section-title h2 {

        font-size: 44px;
    }

}



/* ========================= */
/* TABLETS */
/* ========================= */

@media (max-width: 992px) {

    /* NAVBAR */

    .nav-links {

        display: none;
    }



    /* HERO */

    .hero {

        flex-direction: column;

        text-align: center;

        padding-top: 60px;
    }

    .hero-left,
    .hero-right {

        width: 100%;
    }

    .hero-left {

        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .hero-left h1 {

        font-size: 52px;
    }

    .hero-left p {

        max-width: 700px;
    }

    .hero-buttons {

        justify-content: center;
    }



    /* FEATURES */

    .features-grid {

        grid-template-columns: repeat(2, 1fr);
    }

}



/* ========================= */
/* MOBILE DEVICES */
/* ========================= */

@media (max-width: 768px) {

    section {

        padding: 80px 6%;
    }



    /* NAVBAR */

    .navbar {

        padding: 18px 6%;
    }

    .logo img {

        width: 150px;
    }

    .nav-btn {

        display: none;
    }



    /* HERO */

    .hero {

        min-height: auto;
    }

    .hero-left h1 {

        font-size: 42px;

        line-height: 1.15;
    }

    .hero-left p {

        font-size: 17px;
    }

    .hero-buttons {

        flex-direction: column;

        width: 100%;
    }

    .primary-btn,
    .secondary-btn {

        width: 100%;
    }

    .hero-right img {

        max-width: 100%;
    }



    /* SECTION TITLE */

    .section-title h2 {

        font-size: 34px;
    }

    .section-title p {

        font-size: 16px;
    }



    /* FEATURES */

    .features-grid {

        grid-template-columns: 1fr;
    }

    .feature-card {

        padding: 35px;
    }

}



/* ========================= */
/* SMALL MOBILE */
/* ========================= */

@media (max-width: 480px) {

    .hero-left h1 {

        font-size: 36px;
    }

    .hero-left p {

        font-size: 16px;
    }

    .section-title h2 {

        font-size: 30px;
    }

    .feature-card {

        padding: 28px;
    }

}
/* ========================= */
/* DASHBOARD RESPONSIVE */
/* ========================= */

@media (max-width: 992px) {

    .dashboard-container {

        grid-template-columns: 1fr;
    }

    .portfolio-stats {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 768px) {

    .dashboard-card {

        padding: 24px;
    }

    .large-card {

        padding: 28px;
    }

    .market-score {

        font-size: 56px;
    }

    .chart-placeholder {

        height: 200px;

        font-size: 18px;
    }

}
/* ========================= */
/* PRICING RESPONSIVE */
/* ========================= */

@media (max-width: 768px) {

    .pricing-card {

        width: 100%;
    }

    .featured-plan {

        transform: scale(1);
    }

}
/* ========================= */
/* FOOTER RESPONSIVE */
/* ========================= */

@media (max-width: 992px) {

    .footer-container {

        flex-direction: column;
    }

}


@media (max-width: 768px) {

    .footer-links {

        flex-direction: column;

        gap: 40px;
    }

    .footer-bottom {

        flex-direction: column;

        text-align: center;
    }

}

/* ========================= */
/* DASHBOARD RESPONSIVE */
/* ========================= */

@media (max-width: 1200px) {

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);
    }

}



/* ========================= */
/* TABLETS */
/* ========================= */

@media (max-width: 992px) {

    .dashboard-layout {

        flex-direction: column;
    }



    /* SIDEBAR */

    .sidebar {

        width: 100%;

        height: auto;

        position: relative;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        padding: 20px 6%;
    }

    .sidebar-logo img {

        margin-bottom: 0;

        width: 160px;
    }

    .sidebar-links {

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

        gap: 10px;
    }

    .sidebar-links li {

        padding: 12px 18px;

        font-size: 14px;
    }

    .sidebar-bottom {

        display: none;
    }



    /* MAIN CONTENT */

    .dashboard-main {

        padding: 30px 6%;
    }



    /* TOPBAR */

    .topbar {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }



    /* GRID */

    .dashboard-grid {

        grid-template-columns: 1fr;
    }

}



/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 768px) {

    /* STATS */

    .stats-grid {

        grid-template-columns: 1fr;
    }



    /* TOPBAR */

    .topbar h1 {

        font-size: 30px;
    }



    /* WIDGET */

    .dashboard-widget {

        padding: 24px;
    }



    /* CHART */

    .fake-chart {

        height: 220px;

        font-size: 18px;

        text-align: center;

        padding: 20px;
    }



    /* TABLE */

    .holdings-table {

        display: block;

        overflow-x: auto;

        white-space: nowrap;
    }



    /* MARKET */

    .market-circle {

        width: 140px;

        height: 140px;

        font-size: 34px;
    }

}



/* ========================= */
/* SMALL MOBILE */
/* ========================= */

@media (max-width: 480px) {

    .sidebar {

        padding: 18px 5%;
    }

    .dashboard-main {

        padding: 24px 5%;
    }

    .sidebar-links {

        gap: 8px;
    }

    .sidebar-links li {

        font-size: 13px;

        padding: 10px 14px;
    }

    .top-btn {

        width: 100%;
    }

}
/* ========================= */
/* ALERTS RESPONSIVE */
/* ========================= */

@media (max-width: 1200px) {

    .alerts-grid {

        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 992px) {

    .alerts-layout {

        flex-direction: column;
    }

    .alerts-sidebar {

        width: 100%;

        height: auto;

        position: relative;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        padding: 20px 6%;
    }

    .alerts-main {

        padding: 30px 6%;
    }

    .alerts-topbar {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }

}


@media (max-width: 768px) {

    .alerts-stats {

        grid-template-columns: 1fr;
    }

    .alerts-grid {

        grid-template-columns: 1fr;
    }

    .recent-alert-item {

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }

}

/* ========================= */
/* PORTFOLIO RESPONSIVE */
/* ========================= */

@media (max-width: 1200px) {

    .portfolio-summary {

        grid-template-columns: repeat(2, 1fr);
    }

    .insights-grid {

        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 992px) {

    .portfolio-layout {

        flex-direction: column;
    }

    .portfolio-sidebar {

        width: 100%;

        height: auto;

        position: relative;

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

        padding: 20px 6%;
    }

    .portfolio-main {

        padding: 30px 6%;
    }

    .portfolio-topbar {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }

}


@media (max-width: 768px) {

    .portfolio-summary {

        grid-template-columns: 1fr;
    }

    .insights-grid {

        grid-template-columns: 1fr;
    }

    .holdings-wrapper {

        padding: 20px;
    }

}

/* ========================= */
/* LOGIN RESPONSIVE */
/* ========================= */

@media (max-width: 1200px) {

    .login-left h1 {

        font-size: 48px;
    }

}


@media (max-width: 992px) {

    .login-container {

        grid-template-columns: 1fr;
    }

    .login-left {

        padding: 60px 8%;
    }

}


@media (max-width: 768px) {

    .login-left {

        padding: 50px 6%;
    }

    .login-left h1 {

        font-size: 40px;
    }

    .login-card {

        padding: 35px;
    }

    .login-card h2 {

        font-size: 32px;
    }

}
/* ========================= */
/* SIGNUP RESPONSIVE */
/* ========================= */

@media (max-width: 1200px) {

    .signup-left h1 {

        font-size: 46px;
    }

}


@media (max-width: 992px) {

    .signup-container {

        grid-template-columns: 1fr;
    }

    .signup-left {

        padding: 60px 8%;
    }

}


@media (max-width: 768px) {

    .signup-left {

        padding: 50px 6%;
    }

    .signup-left h1 {

        font-size: 38px;
    }

    .signup-card {

        padding: 35px;
    }

    .signup-card h2 {

        font-size: 32px;
    }

}