body{ 
    background: var(--my-bg);
    color: var(--my-text);
    min-height: 100vh; 
    position: relative; 
    font-family: "Roboto", Arial, Helvetica, sans-serif;    
} 

h1,h2,h3,h4,h5,h6{
    font-family: "Inter", Arial, Helvetica, sans-serif; 
	letter-spacing: -1px; 
    cursor: default;
    margin-bottom: 0;
}

.customBtn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;

    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 1.4rem;
    font-weight: 500;

    text-decoration: none;
    padding: 1rem 1.5rem;
    border-radius: .8rem;

    transition: transform .1s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); 
}
  
.customBtn:active{
    transform: scale(.97);
}

.primaryBtn{
    background-color: var(--my-primary-btn-bg);
    color:  var(--my-primary-btn-text);
}
.primaryBtn:hover{
    background-color: var(--my-primary-btn-hover); 
}
.secondaryBtn{
    background-color: var(--my-secondary-btn-bg);
    color:  var(--my-secondary-btn-text);
    border: 1px solid var(--my-secondary-btn-border); 
} 
.secondaryBtn:hover{
    background-color: var(--my-secondary-btn-hover); 
}

.pageSection{ 
    padding: 12rem 0;    
}
.pageTitle{
    font-size: 4.8rem;
    font-weight: 700; 
}
.pageHeaderDesc{
    font-size: 2rem;
    line-height: 1.3;
    color: var(--my-subtext);  
}



/* Navigation */
header{
    position: fixed;
    width: 100%; 
    background-color: var(--my-bg);
    z-index: 99;
}
nav.navigation{
    border-bottom: 1px solid var(--my-border-color);    
    padding: 1.2rem;
}

nav.navigation .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav.navigation #navLogo{
    position: relative;
    z-index: 999;
    width: 15rem;
} 
nav.navigation ul.navList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    margin: 0;
    font-size: 1.6rem; 
    gap: 4rem;
    list-style: none; 
}   
nav.navigation ul.navList li a {
    text-decoration: none;
    font-weight: 400;
    color: var(--my-subtext);
} 
nav.navigation ul.navList li a.active,
nav.navigation ul.navList li a:hover,
nav.navigation ul.navList li a:focus,
nav.navigation ul.navList li a:active {
    color: var(--my-text);
} 
 
nav.navigation div.btnDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
nav.navigation #themeToggle{
    background: var(--my-card-bg); 
    border: 1px solid var(--my-border-color);  
    color: var(--my-text);
    border-radius: 10rem;
    padding: 1rem 1.5rem 1rem 1rem;
    font-size: 1.4rem; 
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
} 
nav.navigation #themeToggle i{
    padding: .5rem;
    background: var(--my-bg);
    border-radius: 10rem;
} 
nav.navigation #themeToggle i.fa-sun{
    color: #ffa500;
}
nav.navigation #themeToggle i.fa-moon{
    color: #5f66f2;
} 
nav.navigation .navBtn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
	font-family: "Inter",Arial, Helvetica, sans-serif; 
    font-size: 1.6rem;
    font-weight: 500;
    text-decoration: none;    
    padding: 1.5rem;
    border-radius: 1rem;
    border: none;
    background-color: var(--my-primary-btn-bg);
    color: var(--my-primary-btn-text);

    transition: transform .1s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); 
} 
nav.navigation .navBtn:active{
    transform: scale(.97);
} 
nav.navigation .navBtn:hover{
    background-color: var(--my-primary-btn-hover); 
}



/* footer */ 
footer{
    background: var(--my-footer-bg);
} 
footer .upperFooter{
    border-bottom: 1px solid var(--my-border-color);    
    padding: 10rem 0rem;  
    width: 100%;
} 
footer .upperFooter .container{
    display: flex; 
    align-items: center;
    justify-content: space-between;
} 
footer .upperFooter .container .footerContent{ 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
} 
footer .upperFooter #footerLogo{
    width: 20rem;
    margin-bottom: 2rem;
}
footer .upperFooter p{
	font-family: "Inter",Arial, Helvetica, sans-serif; 
    font-size: 1.6rem; 
    color: var(--my-subtext);
    margin-bottom: 3.2rem;
}

footer .upperFooter ul.navList {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    margin: 0;
    font-size: 1.6rem; 
    font-weight: 500;
    gap: 4rem;
    margin-bottom: 3.2rem;
}

footer .upperFooter ul.navList li {
    list-style: none; 
}

footer .upperFooter ul.navList li a {
    text-decoration: none;
    font-weight: 400;
    color: var(--my-text);
}

footer .upperFooter ul.socialMediaList{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 0;
    margin: 0;
    font-size: 1.6rem; 
    font-weight: 500;
    gap: 4rem;
}

footer .upperFooter ul.socialMediaList li {
    list-style: none; 
}

footer .upperFooter ul.socialMediaList li a {
    text-decoration: none;
    font-weight: 400;
    color: var(--my-text);
}

footer .upperFooter .backToTop {   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    background: var(--my-primary-btn-bg);
    color: var(--my-primary-btn-text);
    border-radius: 10rem;
    padding: .5rem .5rem 1.5rem .5rem;  
    text-decoration: none; 

}

footer .upperFooter .backToTop i{
    background-color: var(--my-primary-btn-text);
    color: var(--my-primary-btn-bg);
    padding: 1rem;
    border-radius: 10rem;
    
}   

footer .upperFooter .backToTop span{ 
	font-family: "Inter",Arial, Helvetica, sans-serif; 
    font-size: 1.4rem;
    font-weight: bold;  
    writing-mode: sideways-lr;
    text-orientation: mixed;
}
 
footer .bottomFooter{
    padding: 2.5rem 0;
}

footer .bottomFooter .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
footer .bottomFooter .copyrights{
	font-family: "Inter",Arial, Helvetica, sans-serif; 
    font-size: 1.4rem; 
    color: var(--my-subtext); 
}


footer .bottomFooter a{ 
    font-size: 1.4rem; 
    text-decoration: none;
    font-weight: 400;
    color: var(--my-subtext);
}

/* CTA Section */ 
section#ctaSection .container > div {
    background: var(--my-card-bg);
    border: 1px solid var(--my-border-color);
    border-radius: 2rem;
    padding: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;    
}

section#ctaSection .container .desc{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem; 
    width: 70%; 
}

section#ctaSection .container .desc h2{
    font-weight: 600;
    font-size: 3.6rem; 
    margin: 0;
}

section#ctaSection .container .desc p{
    font-size: 1.6rem;
    line-height: 1.2; 
    color: var(--my-subtext);

}

/* 404 page */
.section404{
    position: relative;
    text-align: center;  
    padding: 10rem 0;  
}

.section404 .title{ 
    font-weight: bold;
    font-size: 10rem;
    color: var(--my-subtext);
    display: block;
    line-height: 1;
}

.section404 .subtitle{
    font-size: 2rem;
    color: var(--my-text);
    font-weight: 800;
    margin-bottom: 2rem;
}

.section404 .desc{
    color: var(--my-subtext);
    font-size: 1.6rem;
    margin-bottom: 3rem;
}



/* Mobile Navigation */ 
.mobileNavBtn {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    position: relative;
    z-index: 1001;
    border-radius: 100rem;
    display: flex;
    justify-content: center;
    align-items: center; 
}
 
.mobileNavBurger {
    width: 100%;
    height: .2rem;
    background: var(--my-text);
    border-radius: .5rem;
    transition: all .4s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); 
    position: relative;
}

.mobileNavBurger::before,
.mobileNavBurger::after {
    content: "";
    position: absolute;
    width: 100%;
    height: .2rem;
    background: var(--my-text);
    border-radius: .5rem;
    transition: all .4s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0); 
}

.mobileNavBurger::before {
    transform: translateY(-1rem);
}

.mobileNavBurger::after {
    transform: translateY(1rem);
}


/* DROPDOWN MENU */
#mobileNav{
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--my-bg); 
}
#mobileNav #menuList {
    background: var(--my-bg);  
    width: 100%; 
    overflow: hidden;
    overflow-y: auto;
    max-height: 0;   
}

#mobileNav #menuList ul{
    list-style: none;
    padding: 0rem; 
}
#mobileNav #menuList li {
    width: 100%; 
    margin-bottom: 1rem;
} 

#mobileNav #menuList li a { 
    display: inline-block;
    text-decoration: none;
    color: var(--my-text);
    width: 100%; 
	font-family: "Inter",Arial, Helvetica, sans-serif; 
    font-size: 2.6rem;
    font-weight: 500;
}
 
#mobileNav #menuList .contactInfo .subtitle{
    font-size: 1.4rem;
    color: var(--my-subtext);
    display: block;
}

#mobileNav #menuList .contactInfo .contactEmail{
    font-family: "Inter", Arial, Helvetica, sans-serif;
    font-size: 2rem;
    font-weight: 700;
}



/* OPEN STATE */
#mobileNav #menuList.open { 
    min-height: 100dvh;
    padding: 8rem 0rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ANIMATION TO X */
.mobileNavBtn.open .mobileNavBurger {
    background: transparent;
} 
.mobileNavBtn.open .mobileNavBurger::before {
    transform: rotate(45deg);
} 
.mobileNavBtn.open .mobileNavBurger::after {
    transform: rotate(-45deg);
}


/* Domino text */
.dominoText .domino-word {
    margin-right: 0.25em;
    display: inline-block; 
    transform: translateY(1.2em); 
    filter: blur(0);
    opacity: 0;
    animation: dominoReveal 1s forwards;
    will-change: transform, opacity, filter;
} 
@keyframes dominoReveal {
    0% {
        transform: translateY(1.2em);
        opacity: 0;
        filter: blur(1rem);
    }
    80% {
        transform: translateY(-0.05em);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        filter: blur(0rem);
    }
}