:root {
    --font-family: 'Raleway', sans-serif;
}

*, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
}

body {
    overflow-x: hidden;
    font-family: var(--font-family);
}

/* --- LANDING --- */

/* --- MEDIA QUERIES --- */

/* --- under 1199px --- */
@media (max-width: 1199.98px) {
    h1 {
        font-size: 3.3rem;
    }
    .fa-stack.fa-2x {
        font-size: 2.3rem;
    }
    
}
/* --- under 992px --- */
@media (max-width: 991.98px) {
    h4 {
        font-size: 1.8rem;
    }
    h1 {
        font-size: 2.5rem;
    }
    .fa-stack.fa-2x {
        font-size: 1.8rem;
    }
          
}
/* --- under 768px --- */
@media (max-width: 767.98px) {
    h4 {
        font-size: 1.5rem;
    }
    h1 {
        font-size: 2rem;
    }
    .globe-container {
        padding: 1.5rem;
    }    
}
/* --- BOOTSTRAP BREAK POINT REFERENCE--- */
/*  https://getbootstrap.com/docs/5.3/layout/breakpoints/  */
/* ==== 
(xs) < 576px - no media query. Is default.
(sm) > 576px - @media (min-width: 576px) {...}
(md) > 768px - @media (min-width: 768px) {...}
(lg) > 992px - @media (min-width: 992px) {...}
(xl) > 1200px - @media (min-width: 1200px) {...}
(xxl) > 1400px - @media (min-width: 1400px) {...}
====*/

/* --- LANDING HERO/HEADER --- */
.hero-landing{
    background-image: linear-gradient(135deg, #1da1f2, #981ceb);
    height: 100vh;
}

.content {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 100%;
}

h4 {
    font-size: 2rem;
    font-weight: 200;
    letter-spacing: .1rem;
    text-shadow: .1rem .1rem .1rem rgba(0, 0, 0, .2);
}

h1 {
    font-size: 3.6rem;
    font-weight: 200;
    letter-spacing: .2rem;
    text-shadow: .1rem .1rem .1rem rgba(0, 0, 0, .2);
    padding: 1.8rem 0;    
}

/* .fa-stack.fa-2x {
    font-size: 2.8rem;
} */

.fa-stack-2x {
    opacity: .15;
}

.fa-stack-1x {
    opacity: .6;
}

.fa-globe-americas {
    opacity: 1;
    transform: scale(1.25);
}


/* --- MAIN CONTENT --- */
.main-content {
    height: 100vh;
}

/* --- FOOTER --- */
.footer-contact {
    height: 100vh;
}