/**************************************************\ 
(XXL) Desktop Monitor
\**************************************************/
@media screen and (min-width: 1400px){ 

}

/**************************************************\ 
(XL) Laptop 
\**************************************************/
@media screen and (min-width:1200px) and (max-width: 1399.98px){ 
}
 
/**************************************************\ 
(LG) Tablet Landscape
\**************************************************/
@media screen and (min-width:992px) and (max-width: 1199.98px){  
    .pageSection{
        padding: 10rem 0;
    }    
}
   
/**************************************************\ 
(MD) Tablet Portrait
\**************************************************/
@media screen and (min-width:768px) and (max-width: 991.98px){  
    .pageSection{
        padding: 10rem 0;
    }   
    .pageTitle{ 
        font-size: 4.4rem;
    }
    .pageHeaderDesc{
        font-size: 1.8rem;
        line-height: 1.3;
    }

    section#ctaSection .container > div{ 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }
    section#ctaSection .container .desc{
        width: 100%;
        gap: 1rem;
    }
    section#ctaSection .container .desc h2{
        font-size: 3rem; 
        line-height: 1.2;
        margin: auto;
    }
}

/**************************************************\ 
(SM) Phone
\**************************************************/
@media screen and (min-width: 576px) and (max-width:767.98px){     
    .pageSection {
        padding: 10rem 0;
    }
    .pageTitle{ 
        font-size: 4rem;
    }
    .pageHeaderDesc{
        font-size: 1.8rem;
        line-height: 1.3;
    }
    
    
    nav.navigation #navLogo{  
        position: relative;
    }
    footer .upperFooter .container{
        flex-direction: column; 
        gap: 4rem;
    }
    footer .upperFooter p{
        text-align: center;
        width: 80%;
    }
    footer .upperFooter .container .footerContent{ 
        align-items: center;
    }
    footer .upperFooter .backToTop{
        flex-direction: row;
        padding: .5rem 1rem .5rem .5rem;
    }
    footer .upperFooter .backToTop span{
        writing-mode: unset;
    }  

    section#ctaSection{
        padding: 5rem 0;
    }
    section#ctaSection .container > div{
        padding: 4rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 4rem;
    }
    section#ctaSection .container .desc{
        width: 100%;
        gap: 2rem;
    }
    section#ctaSection .container .desc h2{
        font-size: 3rem; 
        line-height: 1.2;
    }
}

/**************************************************\ 
(XS) Small Phone
\**************************************************/
@media screen and (min-width: 391px) and (max-width:575.98px){        
    .container{
        --bs-gutter-x: 4rem;
    }
    .pageSection {
        padding: 10rem 0;
    }
    .pageTitle{ 
        font-size: 3.6rem;
    }
    .pageHeaderDesc{
        font-size: 1.6rem;
        line-height: 1.3;
    }

    nav.navigation{
        padding: 1rem 0;
    }
    nav.navigation #navLogo{
        width: 14rem;  
        position: relative;
    }
    nav.navigation .navBtn{ 
        font-size: 1.2rem;
        padding: 1rem 1.5rem;
    }
    nav.navigation #themeToggle{
        padding: .5rem 1rem .5rem .5rem;
    } 

    .mobileNavBurger::after{
        transform: translateY(8px);
    }
    .mobileNavBurger::before {
        transform: translateY(-8px);
    }

    footer .upperFooter{
        padding: 5rem 0rem;
    }
    footer .upperFooter .container{
        flex-direction: column; 
    }
    footer .upperFooter .container .footerContent{
        align-items: center;
        text-align: center;
    }
    footer .upperFooter ul.navList{
        display: none;
    }
    footer .upperFooter ul.socialMediaList{ 
        display: none;
    }

    footer .upperFooter .backToTop{
        flex-direction: row;
        padding: .5rem 1rem .5rem .5rem;
    }
    footer .upperFooter .backToTop span{
        writing-mode: unset;
    }
    footer .bottomFooter .container{
        flex-direction: column;
        gap: 1rem;
    }
    footer .bottomFooter a{
        display: none;
    }

    section#ctaSection{
        padding: 5rem 0;
    }
    section#ctaSection .container > div{
        padding: 2rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 4rem;
    }
    section#ctaSection .container .desc{
        width: 100%;
        gap: 2rem;
    }
    section#ctaSection .container .desc h2{
        font-size: 3rem; 
        line-height: 1.2;
    }
}

/**************************************************\ 
(XXS) Smaller Display
\**************************************************/
@media screen and (max-width:390.98px){   
    .container{
        --bs-gutter-x: 4rem;
    }
    .pageSection {
        padding: 10rem 0;
    }
    .pageTitle{ 
        font-size: 3.2rem;
    }
    .pageHeaderDesc{
        font-size: 1.6rem;
        line-height: 1.3;
    }

    nav.navigation{
        padding: 1rem 0;
    }
    nav.navigation #navLogo{
        width: 12rem;  
        position: relative;
    }
    nav.navigation .navBtn{ 
        font-size: 1.2rem;
        padding: 1rem 1.5rem;
    }
    nav.navigation #themeToggle{
        padding: .5rem 1rem .5rem .5rem;
    } 

    .mobileNavBurger::after{
        transform: translateY(8px);
    }
    .mobileNavBurger::before {
        transform: translateY(-8px);
    }

    footer .upperFooter{
        padding: 5rem 0rem;
    }
    footer .upperFooter .container{
        flex-direction: column; 
    }
    footer .upperFooter .container .footerContent{
        align-items: center;
        text-align: center;
    }
    footer .upperFooter ul.navList{
        display: none;
    }
    footer .upperFooter ul.socialMediaList{ 
        display: none;
    }

    footer .upperFooter .backToTop{
        flex-direction: row;
        padding: .5rem 1rem .5rem .5rem;
    }
    footer .upperFooter .backToTop span{
        writing-mode: unset;
    }
    footer .bottomFooter .container{
        flex-direction: column;
        gap: 1rem;
    }
    footer .bottomFooter a{
        display: none;
    }

    section#ctaSection{
        padding: 5rem 0;
    }
    section#ctaSection .container > div{
        padding: 3rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 4rem;
    }
    section#ctaSection .container .desc{
        width: 100%;
        gap: 2rem;
    }
    section#ctaSection .container .desc h2{
        font-size: 3rem; 
        line-height: 1.2;
    }
}