:root {
    /* Color Styles */
    --primary-color: #3F2E3E;
    --dark-bg-color: #2A1F29;
    --secondary-color: #EFE1D1;
    --main-bg-color: #F4ECE2;
    --main-bg-color-24: hsla(33, 45%, 92%, 0.24);
    --light-text-color: #F7F0E8;
    --dark-text-color: #0D090C;

    /* Text Styles */
    --h1-text-size: 4rem;
    --h2-text-size: 2rem;
    --h3-text-size: 1.5rem;
    --h4-text-size: 1.25rem;
    --body-text-size: 1.125rem;
    --body-sm-text-size: 1rem;
    --fw-bold: 700;
    --fw-semi-bold: 600;
    --fw-medium: 500;
    --fw-regular: 400;

    /* Box Shadow */
    --main-shadow: 0px 4px 4px 0px rgba(80, 75, 70, 0.3);
}

@media (max-width: 1300px) {
    .dashboard-navigation {
        grid-column: 1/3;
    }

    .dashboard-center {
        grid-column: 3/6;
    }

    .cc-center {
        grid-column: 3/7;
    }

    .dashboard-right {
        grid-column: 6/7;
    }
}



@media (max-width: 1136px) {
    /* HERO SECTION - SMALL BUSINESSES */
    .login-signin {
        flex-direction: column;
    }

    .login-signin button {
        width: 100%;
    }



    /* MAIN DASHBOARD */

    /* Left Dashboard Section */

    .dashboard-main-logo {
        margin-left: 1.5rem;
    }

    .dashboard-navigation {
        grid-column: 1/7;
        grid-row: 1;
        padding: 1rem;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .dashboard-nav-links {
        margin-top: 0rem;
        flex-direction: row;
    }

    .dark-link {
        justify-content: center;
        padding-left: 0.5rem;
    }

    .light-link {
        justify-content: center;
        padding-left: 0.5rem;
    }

    /* Dashboard Center */

    .dashboard-center {
        grid-column: 1/6;
        height: 100%;
    }

    .cc-center {
        grid-column: 1/7; 
    }


    /* CREDIT CARD PAGE */
    #dashboard {
        height: 100%;
    }
}



@media (max-width: 992px) {

    .container {
        width: 90%;
    }

    /* Header section */
    .nav {
        display: none;
    }

    .ham-menu {
        display: block;
    }

    .nav-container.lower {
        display: none;
    }

    /* Mobile Navigation */
    .mobile-navigation-menu {
        position: absolute;
        background-color: var(--dark-bg-color);
        top: 80px;
        left: -100%;
        bottom: 0;
        right: 0;
        padding-top: 3rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        text-align: center;
        padding-bottom: 4rem;
        overflow-y: scroll;   /* Makes the content of the mobile header scroll */
        transition: all 0.3s ease;
    }

    .appear {
        left: 0;
        transition: all 0.3s ease-in-out;
    }

    /* Feature Cards */
    .feat-cards {
        flex-direction: column;
        width: 80%;
        justify-content: center;
    }

    /* Mobile app callout */
    .container.mobile-app {
        flex-direction: column;
    }

    .mobile-app-img {
        order: -1;
        display: flex;
        justify-content: center;
    }

    .mobile-app-text {
        width: 100%;
        display: flex;
        align-items: center;
        text-align: center;
    }

    /* Loan rates */
    .container.loan-rates {
        flex-direction: column;
        text-align: center;
        gap: 4rem;
    }

    .loan-rates-header {
        width: 100%;
    }

    .rate-card-list {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .rate-card {
        max-width: max-content;
    }

    /*INSIGHT SECTION */
    .insight-card-list {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        row-gap: 2rem;
    }

    /* Footer Section */
    .footer-logo-icons-links {
        flex-direction: column;
        gap: 3rem;
    }

    .footer-navlinks-columns {
        width: 100%;
        gap: 5rem;
    }

    .footer-logo-icons {
        gap: 2rem;
    }

    .footer-logo {
        width: 250px;
    }

    .footer-navlinks li {
        padding-left: 0;
    }







    /* ABOUT PAGE */

    /* Welcome to the human side of banking */


    .about-sec3-text {	
        grid-column: 1/7;	
        grid-row: 2;
    }	
    .about-sec3-img {	
        grid-column: 1/7;	
        grid-row: 1;	
    }

    /* Core Values */

    .core-values-img {
        position: relative;
        grid-column: 1/7;
        grid-row: 1;
    }

    .core-values-text {
        grid-column: 1/7;
        grid-row: 2;
    }

    .darken-image {	
        height: 600px;	
    }	
    	
    .text-overlay {	
        height: 600px;	
    }

    /* Products and Srvices */

    .pdts-and-srvs {
        grid-column: 1/7;
        grid-row: 2;
    }
    
    .pdts-and-srvs-img {
        grid-column: 1/7;
        grid-row: 1;
    }


    /* Investment Page */

    /* Investment and Wealth*/

    .invst-hero-div {
        grid-column: 1/7;
        grid-row: 1;
        gap: 2rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
        text-align: center;
        display: flex;
        align-items: center;

    }

    .invst-hero-img {
        display: none;
    }

    /*Plan For Success*/

    .small-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .plan-img {
        width: 70%;
        border-radius: 1rem 1rem 0rem 0rem;
    }

    .plan-txt {
        width: 70%;
        gap: 1.5rem;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-right: 24px;
        border-radius: 0rem 0rem 1rem 1rem;

    }








    /*HERO SECTION - SMALL BUSINESSES PAGE */
    .hero-small-business-img {
        display: none;
    }

    .hero-header-text {
        width: 100%;
    }

    #hero-small-business {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }

    .online-banking {
        max-width: 100%;
    }

    .login-signin {
        flex-direction: row;
    }

    /* Explore finance options - Small businesses */
    #finance-options .container.grid-6 {
        flex-direction: column;
    }

    #finance-options .about-sec3-text {
        width: 100%;
    }
    
    #finance-options .about-sec3-img {
        width: 100%;
        order: -1;
    }


    /* SIGN UP PAGE */
    .container.signup {
        flex-direction: column;
    }

    .vector-div {
        width: 100%;
        display: none;
    }

    .signup-form {
        width: 100%;
    }

    .button-div button {
        width: 50%;
    }

    /* MAIN DASHBOARD */

    /* Left Dashboard Section */

    .dashboard-nav-links {
        display: none;
    }

    /* Dashboard Center */

    .dashboard-center {
        grid-column: 1/7;
        grid-row: 2;
    }

    /* Dashboard Right */

    .dashboard-right {
        grid-column: 1/7;
        grid-row: 3;
    }




    /* DEPOSIT PAGE */
    .dashboard-right.deposit-page {
        min-width: 100%;
        margin-right: 0;
        margin-left: 0;
        height: 200px;
        padding-top: 1rem;
    }

    .dash-right-img {
        background-position: center center;
    }


    /* Mortgage */

    /* Mortgage-Help Section */

    .mortgage-help-header {
        width: 100%;
    }
}










@media (max-width: 768px) {
    /* HERO SECTION - SMALL BUSINESSES */
    #hero-small-business {
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        border: none;
    }

    .hero-header-text {
        align-items: center;
        text-align: center;
    }

    .online-banking {
        align-items: center;
    }

    .login-signin {
        width: 80%;
    }

    .login-signin button {
        width: 100%;
    }


    /* Loan Hero Section */


    #loan-hero {
        display: flex;
        flex-wrap: wrap;
    }

    .loan-hero-left {
        width: 100%;
    }


    .loan-hero-right-text {
        width: 100%;
    }

}






@media (max-width: 576px) {
    .container {
        width: 100%;
    }

    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 2rem;
    }

    /* Hero Section */
    .hero-buttons {
        flex-direction: column;
    }


    /* Feature Cards */
    .feat-cards {
        width: 100%;
    }

    /* Mobile app callout */
    .container.mobile-app {
        flex-direction: column;
        gap: 1rem;
    }

    .mobile-app-text {
        width: 100%;
    }

    .mobile-app-img {
        order: -1;
    }

    .apple-playstore {
        width: 100%;
        flex-direction: column;
    }

    /* Loan rates */
    .rate-card-list {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        gap: 1.5rem;
    }

    .rate-card {
        max-width: 100%;
    }

    /*Insight Section */
    .insight-card-list {
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr;
        row-gap: 2rem;
    }

    /* Footer Section */
    .footer-navlinks-columns {
        flex-direction: column;
    }




     /* ABOUT Page */	

     .about-hero-text {	
        grid-column: 1/4;	
        color: var(--light-text-color);	
        display: flex;	
        flex-direction: column;	
        gap: 1.5rem;	
        max-width: auto;	
        margin-top: auto;	
        margin-bottom: auto;	
    }	


    /* Welcome to the human side of banking */
    
    
    .about-sec3-text {	
        grid-column: 1/7;	
        grid-row: 2;	
        padding-top: 10px;	
    }	
    .about-sec3-img {	
        grid-column: 1/7;	
        grid-row: 1;	
        height: 100%;	
    }


    /* Our Core Values */	


    .core-values-img {	
        grid-column: 1/7;	
        grid-row: 1;	
    }	
    .core-values-text {	
        grid-column: 1/7;	
        grid-row: 2;	
    }	
    .darken-image {	
        height: 400px;	
    }	
    	
    .text-overlay {	
        height: 400px;	
    }

    .cv-text-icn {
        height: 70px;
        width: 70px;
    }

    .cv-text-icn > img {
        height: 32px;
        width: 32px;
    }

    
    /* Products and Srvices */

    .pdts-and-srvs {
        grid-column: 1/7;
        grid-row: 2;
    }

    .pdts-and-srvs-img {
        grid-column: 1/7;
        grid-row: 1;
    }


    /* INVESTMENT PAGE */

    /* Investment and Wealth*/

    .invst-hero-div {
        grid-column: 1/7;
        grid-row: 1;
        gap: 2rem;
        padding-top: 4rem;
        padding-bottom: 4rem;
        text-align: center;
        display: flex;
        align-items: center;

    }

    .invst-hero-img {
        display: none;
    }

    .invst-hero-icns {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
    }

    /*Plan For Success*/

    .plan-img {
        width: 90%;
        border-radius: 1rem 1rem 0rem 0rem;
    }

    .plan-txt {
        width: 90%;
        gap: 1.5rem;
        padding-top: 24px;
        padding-bottom: 24px;
        padding-right: 24px;
        border-radius: 0rem 0rem 1rem 1rem;

    }





    /* SMALL BUSINESSES PAGE */
    
    /* Hero Section */
    .hero-header-text, .online-banking {
        padding: 3rem 1rem 0.5rem 1rem;
    }

    .center-dark-card {
        grid-column: 1/7;
        grid-row: 1;
    }
    
    .center-light-card1 {
        grid-column: 1/7;
        grid-row: 2;
    }
    
    .center-light-card2 {
        grid-column: 1/7;
        grid-row: 3;
    }

    /* Dashboard Center*/

    .greetings {
        grid-column: 1/6;
        grid-row: 2;
    }
    
    .profile-img {
        grid-column: 1/7;
        grid-row: 1;

    }
    /* Transaction */
    .trans-dark-card {
        grid-column: 1/7;
        grid-row: 1;
    }
    
    .trans-light-card1 {
        grid-column: 1/7;
        grid-row: 2;
    }
    
    .trans-light-card2 {
        grid-column: 1/7;
        grid-row: 3;
    }
    
    .trans-light-card3 {
        grid-column: 1/7;
        grid-row: 4;
    }


    /* DEPOSIT PAGE */
    .dash-center-second.deposit .grid-6 {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }

    .dash-center-second.deposit .center-dark-card {
        grid-column: 1/2;
    }

    .dash-center-second.deposit .center-light-card1 {
        grid-column: 1/2;
    }

    .dash-center-second.deposit .center-light-card2 {
        grid-column: 1/2;
    }

    .dash-center-second.deposit .center-light-card3 {
        grid-column: 1/2;
    }


    .buyer-resources {
        flex-direction: column;
    }

    .resources-left-div {
        width: 100%;
    }

    .resources-right-div {
        width: 100%;
    }
}










@media (max-width: 432px) {
    /* SMALL BUSINESS PAGE */
    /* Hero Section */
    .login-signin {
        width: 100%;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* SIGN UP PAGE */

    .input-group {
        flex-direction: column;
        gap: 1.5rem;
    }

    .button-div button {
        width: 100%;
    }


    /* DEPOSIT PAGE */
    .withdrawal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}