@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*{
    font-family: roboto;
}

:root {
    --extra-small: 8px;
    --small: 12px;
    --medium: 18px;
    --large: 30px;
    --extra-large: 48px;
    --dark-green: #31493C;
    --light-green: #7A9E7E;
    --blue: #6C91C2

}

#about-container {
    display: grid;
    grid-template-areas:
        "img1 about"
        "img2 boxes";
    gap: 10px; /* Adjust the gap between grid items as needed */
}

#img-container {
    display: contents; /* Allows direct children to participate in the grid layout */
}

#img1 {
    padding: var(--small);
    grid-area: img1;
    width: 100%; /* Adjust as needed */
}

#img2 {
    padding: var(--small);
    grid-area: img2;
    width: 100%; /* Adjust as needed */
}

#about {
    padding: var(--small);
    font-size: var(--medium);
    grid-area: about;
}

#boxes {
    padding: var(--small);
    grid-area: boxes;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--large);
}

#levels {
    background-color: var(--blue);
    padding: var(--small);
    margin: var(--small);
}

#price {
    background-color: var(--blue);
    padding: var(--small);
    margin: var(--small);
}

h1{
    text-align: center;
}

h2{
    margin: 0;
    text-align: center;
}

body {
    margin: 0;
    background-color: #f4f4f5;
    line-height: 1.4;
    color: #040408;
  }

header{
    background-color: var(--dark-green);
    font-size: small;
    max-width: 100%;
    color: white;
}



nav{
    display: flex;
    justify-content: space-around;
}

nav a{
    text-decoration: none;
    color: white;
}

h1{
    background-color: var(--light-green);
    margin: 0;
    padding: var(--small);
}

/* #landing{
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    padding: var(--small);
}

#about-container{
    display: flex;
    align-items: center;
}

#levels, #price, #about, #landing-quote{
    background-color: lightgray;
    margin: var(--small);
    padding: var(--small);
}

#levels, #price{
    background-color: var(--blue);
}

#boxes{
    display: flex;
    flex-direction: column-reverse;
}

#levels ul{
    padding: var(--small);
    padding-top: 0;
    margin: 0;
}

#levels li{
    list-style-type: none;
}


#price{
    justify-content: center;
    text-align: center;
    padding: var(--small);
}

#about{
    overflow-wrap: break-word;
    padding: var(--small);
} */

#landing-quote{
    font-style: italic;
    text-align: center;
    padding: var(--small);
    background-color: lightgray;
}

/* --- --- --- --- --- --- TESTIMONIALS --- --- --- --- --- --- */
#test-page{
    display: flex;
    flex-direction: column;
}

.testimonial{
    background-color: lightgray;
    padding: var(--small);
    margin: var(--small);
}

.testimonial-author{
    font-style: italic;
}

/* --- --- --- --- --- --- CONTACT US --- --- --- --- --- --- */

#contact-text{
    padding: 0;
}

#contact-form{
    padding: var(--small);
    width: 80%;
    display: none;
}

#contact-form input, #contact-form textarea{
    width: 80%;
}


#message{
    width: 100%;
    height: 100px;
}   

#contact-text{
    text-align: center;
    font-size: larger;
}

#contact-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--small);
    justify-content:space-around;
}

#facebook{
    width: 30%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: var(--small);
}

#facebook img{
    width: 10rem;
    height: 10rem;
    margin: var(--small);

}

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

@media screen and (min-width: 320px){
    #landing img{
        display: none;
    }
    #about-container{
        display: flex;
        flex-direction: column;
    }
    #boxes{
        flex-direction: column;
    }
   
    
}

@media screen and (min-width: 768px){
    header{
        font-size: medium;
    }
    #boxes{
        flex-direction: row;
    }
    #contact-container{
        flex-direction: row;
    }

}

@media screen and (min-width: 1024px){
    #landing img{
        display: block;
    }
    #about-container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        flex-direction: row;
    }
    #boxes{
        flex-direction: row;
    }
    header{
        font-size: large;
    }
    #boxes{
        justify-content: center;
    }   
    #test-page{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}