/* Set the Roboto font for the whole body and head */
body {
    font-family: "Outfit", sans-serif;
    padding-top: var(--nav-height); 
}

main {
    font-size: 1rem;
}

/* headings with heavier weight */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    text-align: center;
    margin: 0 auto;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

:root {
    --nav-height: 98px;
}

.beige-bg {
    background-color: #F0E0C1;
    color: black;
}

.green-bg {
    background-color: #769A95;
    color: white;
}

.pink-bg {
    background-color: #E5B8C9;
    color: white;
}

.custom-button {
    border: 2px solid black;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    text-decoration: none;
}

/* img-rounded class for rounded corner images */
.img-rounded {
    border-radius: 20%;
    border: 2px solid gray;
    max-width: 85vw;
}

.img-circular {
    border-radius: 50%;
    max-width: 35vw;
}

.logo-text {
    font-weight: 500;  
}

.small-img-rounded {
    border-radius: 20%;
}

.headline {
    font-style: normal;
}

.panel {
    display: flex;
    align-items: center;
    align-content: space-between;
    flex-direction: row;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: calc(100vh - var(--nav-height));
    overflow: hidden;
    position: relative;
    text-align: center;
    z-index: 0;
}

.privacy > h1,
.privacy > h2 {
    text-align: left;
}

.img-row {
    display: flex;
    flex-direction: row;
    margin-bottom: 4rem;
}

.spacing {
    height: 1.5rem;
    width: 1.5rem;
}

/* splittext and splittext-wrapper classes for GSAP SplitText */
.splittext {
  display: inline-block;   /* or block */
}

/* media queries */

@media (min-aspect-ratio: 6/5) {
    .img-rounded {
        max-width: 38vw;
    }

    .spacing {
        height: 1rem;
        width: 1rem;
    }

    .small-img-rounded {
        max-width: 20vw;
    }

}

@media (max-aspect-ratio: 6/5) {
    .img-rounded {
        max-width: 90vw;
    }

    .img-circular {
        max-width: 65vw;
    }

    .logo-text {
        font-size: 1rem;
    }

    .panel {
        flex-direction: column;
    }

    .small-img-rounded {
        max-width: 32vw;
    }
}

@media (max-width: 1280px) {
    .text-padding {
        padding: 2.5rem;
    }
}

@media (min-width: 912px) {
    main {
        font-size: 2rem;
    }
}

@media (max-width: 1024px) and (max-height: 820px) {
    .text-padding {
        padding: 1.75rem;
    }
}

@media (max-width: 576px) {
    .navbar-brand img {
        height: 50px;
    }

    .text-padding {
        padding: 1.75rem;
    }

    .img-row {
        padding-bottom: 0.25rem;
    }

    .logo-text {
        font-size: .7rem;
    }
}

@media (max-height: 600px) {

    main {
        font-size: 0.75rem;
    }

    .spacing {
        height: 1rem;
        width: 1rem;
    }

    .img-circular {
        max-width: 45vw;
    }
}

/* Custom font classes */
@font-face {
    font-family: 'Outfit';
    src: url('/static/fonts/Outfit-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#scheduling {
    scroll-margin-top: 25px;
}

#services {
    scroll-margin-top: 50px;
}

/* CSS stylings below this line are for testing purposes only */