@import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-straight/css/uicons-regular-straight.css');
html,body{
    box-sizing: border-box;
    margin: 0;
    padding: 0;

    background: linear-gradient(to bottom, #424242, rgb(255, 255, 255)
    );
    font-family: 'Playfair Display', serif;
    text-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;

    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

h1{
    color: white;
    font-size: 35px;
}
h2{
    /* FOR ALL DESCRIPTION HEADERS */
    font-size: 22px;
    color: black;
    text-align: center;
}
h3{
    color: black;
    font-size: 35px;
}
h6{
    /* for course headers only */
    font-size: 25px;
}
h7{
    font-size: 20px;
    text-align: center;
    color: black;
}
h8{
    font-size: 30px;
    color: black;
}
h9{
    font-size: 25px;
    color: black;
}
#home-button{
    text-decoration: none;
}
#main-section{
    width: 100%;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;
}
    #hero-bar{
        width: 100%;
        height: 15%;
        display: flex;
        align-items: center;
        justify-content: center;

        flex-direction: row;
    }
        .nav-bar-sides{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            flex-direction: row;
        }
        /* LEFT SIDE */
            .nav-buffer-box{
                width: 20%;
                height: 100%;
            }
            #logo-box{
                width: 15%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
                #nav-bar-logo{
                    width: 80%;
                    height: auto;
                }
            #nav-title-box{
                width: 65%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
                #nav-header{
                    color: white;
                }
        /* RIGHT SIDE */
            #nav-button-bar{
                width: 60%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                gap: 2%;
                flex-direction: row;
            }
                .nav-buttons{
                    width: 150px;
                    height: 75px;
                    display: flex;
                    align-items: center;
                    justify-content: center;


                    text-decoration: underline;
                    cursor: pointer;
                    color: white;
                    font-size: 20px;
                }
    #main-section-container{
        width: 100%;
        height: 85%;
        display: flex;
        align-items: center;
        justify-content: center;

        background-image: url(Logo1.JPEG);
        background-position: center;
        background-size: cover;
        background-color: black;
        background-repeat: no-repeat;
    }
        .main-container-sides{
            width: 40%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

        }
            /* LEFT SIDE */
            #main-container-box-one{
                width: 100%;
                height: 80%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
                #main-container-box-two{
                    width: 80%;
                    height: 80%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    background-image: url(haircut-photo.jpg);
                    background-size: cover;
                    background-position: center;
                }








/* COURSE SECTION */
#course-section{
    width: 100%;
    height: 800px;
    display: flex;
    align-items: start;
    justify-content: center;
}
    #course-container{
        width: 80%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;

        flex-direction: column;

        background: white;
        box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
    }
        .course-boxes{
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2%;

            flex-direction: row;
        }
            .cozmo-course-boxes{
                width: 33.3%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-direction: column;
            }
                .icon-container{
                    width: 100%;
                    height: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                    #course-icons{
                        font-size: 75px;
                        text-shadow: none;
                    }
                .course-header-boxes{
                    width: 100%;
                    height: 10%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .course-description-boxes{
                    width: 100%;
                    height: 40%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }







/* MAIN INFO SECTION */
#main-info-section{
    width: 100%;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    #main-info-container{
        width: 80%;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;

        flex-direction: row;

        gap: 1%;
    }
        .main-info-sides{
            width: 49%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
            #main-info-right{
                display: flex;
                align-items: center;
                justify-content: end;
            }
                #academy-bio-box{
                    width: 80%;
                    height: 80%;
                    display: flex;
                    align-items: center;
                    justify-content: start;
                }
                    #academy-bio{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        text-align: center;

                        font-weight: none;
                    }
            #main-info-left{
                display: flex;
                align-items: center;
                justify-content: start;
            }
                #image-box-one{
                    width: 80%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    background-image: url(jays-photos/image-one.jpg);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;

                    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
                }
                    #img-one{
                        width: 80%;
                        height: 100%;
                    }






/* SCHOOL DESCRIPTION SECTION */
#school-description-section{
    width: 100%;
    height: 1000px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    #school-description-container{
        width: 80%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;

        flex-direction: column;
    }
        .school-description-sides{
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            flex-direction: row;
        }
            .description-content-boxes{
                width: 40%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-direction: column;
            }
                .description-header-box{
                    width: 80%;
                    height: 20%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                }
                .description-content-box{
                    width: 80%;
                    height: 60%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    text-align: center;

                }
            .description-img-boxes{
                width: 60%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
                #dsc-box-one{
                    background-image: url(jays-photos/image-three.jpg);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    box-shadow: 24px 24px 0px 0px whitesmoke;
                }
                #dsc-box-two{
                    background-image: url(jays-photos/image-four.jpg);
                    background-position: center;
                    background-size: cover;
                    background-repeat: no-repeat;
                    box-shadow: -24px -24px 0px 0px rgb(71, 71, 71);
                }







/* TOURING SECTION */
#touring-section{
    width: 100%;
    height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    #touring-container{
        width: 80%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;

        flex-direction: column;

    }
        #touring-container-top{
            width: 100%;
            height: 40%;
            display: flex;
            align-items: center;
            justify-content: center;

            flex-direction: column;
        }
            #touring-top-box-one{
                width: 80%;
                height: 60%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
                #touring-header{
                    font-size: 40px;
                    color: black;
                }
            #touring-top-box-two{
                width: 80%;
                height: 40%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        #touring-container-bottom{
            width: 100%;
            height: 60%;
            display: flex;
            align-items: center;
            justify-content: center;

            flex-direction: row;

            gap: 3%;
        }
            .touring-contact-boxes{
                height: 90%;
                width: 25%;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-direction: column;

                background-color: white;

                box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
                border-radius: 5px;
            }
                .touring-box-icon{
                    width: 90%;
                    height: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                    #touring-icons{
                        font-size: 75px;
                        color: black;
                    }
                .touring-header-boxes{
                    width: 90%;
                    height: 15%;
                    display: flex;
                    align-items: center;
                    justify-content: start;
                }
                    .touring-headers{
                        font-size: 25px;
                        color: black;
                    }
                .touring-content-boxes{
                    width: 90%;
                    height: 15%;
                    display: flex;
                    align-items: center;
                    justify-content: start;
                }
                    .touring-paragraphs{
                        font-size: 20px;
                        color: rgb(59, 59, 59);
                    }
                .touring-link-boxes{
                    width: 90%;
                    height: 20%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                }
                    .touring-links{
                        font-size: 20px;
                        font-weight: bolder;
                        width: 100px;
                        height: 50px;
                        display: flex;
                        align-items: center;
                        justify-content: center;


                    }




/*BOTTOM SECTION */
#bottom-section{
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;

    box-shadow: 5px 6px 22px 16px rgba(0,0,0,0.75);
    background-color: rgb(29, 29, 29);
}
    #bottom-main-container{
        width: 80%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;

        flex-direction: row;
    }
        .bottom-container-sides{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            flex-direction: column;
        }
            /* LEFT SIDE */
            #left-box-one{
                width: 100%;
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: start;
            }
                #bottom-header-main{
                    font-size: 45px;
                }
            #left-box-two{
                width: 80%;
                height: 30%;
                display: flex;
                align-items: center;
                justify-content: start;
                align-self: start;

            }
                #bottom-bio-main{
                    font-size: 20px;
                }
            #left-box-three{
                width: 100%;
                height: 20%;
                display: flex;
                align-items: center;
                justify-content: start;
                flex-direction: row;

                gap: 2%;
            }
    #bottom-trademark-container{
        width: 80%;
        height: 10%;
        display: flex;
        align-items: center;
        justify-content: end;
    }
        #trademark{
            font-size: 20px;
        }
    /* RIGHT SIDE */
    .bottom-contact-boxes{
        width: 100%;
        height: 30%;
        display: flex;
        align-items: center;
        justify-content: end;

        flex-direction: column;
    }
        .bottom-header-boxes{
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: end;

        }
            #bottom-agent-header, #bottom-contact-info{
                font-size: 20px;
                color: #d3b176;
            }
        .bottom-content-boxes{
            width: 100%;
            height: 40%;
            display: flex;
            align-items: center;
            justify-content: end;

            flex-direction: row;
        }
            .bottom-emails{
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: end;
            }
            .bottom-numbers{
                width: 50%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: end;
            }
                .bottom-examples{
                    font-size: 20px;
                    color: white;
                    cursor: pointer;
                }
    #write-me-container{
        width: 100%;
        height: 50%;
        display: flex;
        align-items: center;
        justify-content: end;
    }
        #write-us-button{
            width: 125px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #d3b176;
            color: white;
            font-size: 15px;

            cursor: pointer;
            border: 1px solid black;
        }
/* MAP SECTION */
#map-section{
    width: 100%;
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid black;
}
    #map-container{
        width: 80%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;

        box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);
    }
        #map{
            width: 100%;
            height: 100%;
        }

/* REQUIREMENTS SECTION */
#requirements-section{
    width: 100%;
    height: 900px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    #requirements-container{
        width: 80%;
        height: 90%;
        display: flex;
        align-items: center;
        justify-content: center;

        background-color: white;
        box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25);

        flex-direction: column;
    }
        #requirements-section-top{
            width: 90%;
            height: 10%;
            display: flex;
            align-items: center;
            justify-content: start;
        }
        #requirements-section-bottom{
            width: 100%;
            height: 80%;
            display: flex;
            align-items: center;
            justify-content: center;

            flex-direction: row;

            gap: 2%;
        }
            .requirement-detail-containers{
                width: 33.3%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-direction: column;
            }
                .requirement-header-boxes{
                    width: 90%;
                    height: 15%;
                    display: flex;
                    align-items: center;
                    justify-content: start;
                }
                    .requirement-headers{
                        font-size: 25px;
                        text-decoration: underline;
                    }
                .requirement-content-boxes{
                    width: 90%;
                    height: 85%;
                    display: flex;
                    align-items: center;
                    justify-content: start;

                    flex-direction: column;
                }
                    .enrollment-boxes{
                        width: 100%;
                        height: 33.3%;
                        display: flex;
                        align-items: center;
                        justify-content: start;

                    }
                        .enrollment-headers{
                            font-size: 18px;
                            color: black;
                        }
                    #financial-top-half{
                        width: 100%;
                        height: 40%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        flex-direction: column;
                    }
                        .cost-boxes-top{
                            width: 100%;
                            height: 25%;
                            display: flex;
                            align-items: center;
                            justify-content: start;
                        }
                            .top-costs{
                                font-size: 18px;
                                color: black;
                            }
                    #financial-bottom-half{
                        width: 100%;
                        height: 60%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        flex-direction: column;

                    }
                        #cost-box-one{
                            width: 100%;
                            height: 20%;
                            display: flex;
                            align-items: center;
                            justify-content: start;
                        }
                        #cost-box-two{
                            width: 100%;
                            height: 40%;
                            display: flex;
                            align-items: center;
                            justify-content: start;
                        }
                        #cost-box-three{
                            width: 100%;
                            height: 40%;
                            display: flex;
                            align-items: center;
                            justify-content: start;
                        }
                            .total-cost-headers{
                                font-size: 18px;
                                color: black;
                                text-align: start;
                            }
                    .program-detail-boxes{
                        width: 100%;
                        height: 25%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        flex-direction: column;
                    }
                        .program-header-box{
                            width: 100%;
                            height: 30%;
                            display: flex;
                            align-items: center;
                            justify-content: start;
                        }
                            .program-headers{
                                font-size: 22px;
                                font-weight: none;
                            }
                            .program-paragraphs{
                                font-size: 18px;
                                text-align: start;
                            }
                        .program-detail-box{
                            width: 100%;
                            height: 70%;
                            display: flex;
                            align-items: center;
                            justify-content: start;
                        }
        #requirement-schedule-container{
            width: 90%;
            height: 10%;
            display: flex;
            align-items: center;
            justify-content: center;
        }




/* FORM DATA PAGE BELOW */
#form-section{
    width: 100%;
    padding: 60px 0;
    display: flex;
    justify-content: center;
}

#form-container{
    width: 80%;
    max-width: 600px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    background: white;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.25);
    border-radius: 5px;
}

#form-header{
    font-size: 30px;
    color: black;
    text-align: center;
}

#contact-form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#contact-form label{
    font-size: 16px;
    color: black;
}

#contact-form input,
#contact-form textarea{
    width: 100%;
    padding: 8px;
    border: 1px solid black;
    font-family: inherit;
}

#message{
    min-height: 150px;
}

#form-button{
    margin-top: 10px;
    width: 120px;
    height: 40px;
    align-self: center;

    background-color: #d3b176;
    color: white;
    font-size: 15px;
    cursor: pointer;
    border: none;
}


/* MOBILE UPDATES BELOW THIS POINT */
@media (max-width: 768px) {
#main-section{
    width: 100%;
    height: auto;
}
  #hero-bar{
    flex-direction: column;
  }
    .nav-bar-sides{
        width: 100%;
        height: 50%;
    }
        /* left side */
        .nav-buffer-box{
            width: 100%;
            height: 20%;
            display: none;
        }
        #logo-box{
            width: 100%;
            height: 35%;

            background-image: url(Logo2.PNG);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
        }
            #nav-bar-logo{
                width: 80%;
                height: auto;
            }
        #nav-title-box{
            width: 100%;
            height: 65%;
        }
            #nav-header{
                font-size: 25px;
            }
        /* RIGHT SIDE */
        #nav-button-bar{
            width: 100%;
            height: 60%;
            gap: 1%;
        }
            .nav-buttons{
                width: 75px;
                height: 50px;

                font-size: 15px;
            }
    #main-section-container{
        display: none;
    }


/* course section */
#course-section{
    width: 100%;
    margin-bottom: 50px;
}
    #course-container{
        width: 100%;
        height: 100%;
    }
            .course-header-boxes{
                width: 100%;
            }
                #course-icons{
                    font-size: 50px;
                }
                .course-headers{
                    font-size: 18px;
                }
                .course-description-paragraphs{
                    font-size: 14px;
                }



/* main info section */
            #main-info-container{
                width: 100%;

                flex-direction: column;
            }
                .main-info-sides{
                    width: 100%;
                    height: 50%;
                }
                    #main-info-left, #main-info-right{
                        justify-content: center;
                        align-items: center;
                    }
                    #academy-bio{
                        font-size: 20px;
                    }


/* school description section */
#school-description-section{
    height: 1200px;
}
#school-description-container{
    width: 100%;
}
    .school-description-sides{
        flex-direction: column;
    }
        .description-content-boxes{
            width: 100%;
            height: 40%;
        }
        .description-img-boxes{
            width: 100%;
            height: 60%;
        }
        .description-header-box{
            width: 100%;
        }
        .description-content-box{
            width: 100%;
        }
            .description-headers-fix{
                font-size: 16px;
            }
            .description-paragraph-fix{
                font-size: 14px;
            }

    /* touring section */
    #touring-container{
        width: 100%;
    }
        #touring-container-bottom{
            flex-direction: column;
        }
            .touring-contact-boxes{
                width: 100%;
                height: 25%;
            }
                    #touring-icons{
                        font-size: 40px;
                    }
                .touring-header-boxes{
                    justify-content: center;
                }
                    .touring-headers{
                        font-size: 18px;
                    }
                .touring-content-boxes{
                    justify-content: center;
                }
                    .touring-paragraphs{
                        font-size: 14px;
                    }
                    .touring-links{
                        font-size: 15px;
                    }


    /* bottom section */
    #bottom-main-container{
        flex-direction: column;
    }
        .bottom-container-sides{
            width: 100%;
            height: 50%;
        }
            #bottom-header-main{
                font-size: 25px;
            }
            #bottom-bio-main{
                font-size: 15px;
            }

        #bottom-agent-header, #bottom-contact-info{
            font-size: 14px;
        }

        .bottom-examples{
            font-size: 14px;
        }

        #write-me-container{
            display: none;
        }




        /* requirements section */
        #requirements-section{
            height: auto;
        }
        #requirements-container{
            width: 100%;
        }
            #requirements-section-top{
                width: 100%;
            }
            #requirements-section-bottom{
                flex-direction: column;
            }
                .requirement-detail-containers{
                    width: 100%;
                    height: 33.3%
                }
                    #requirements-header-main{
                        font-size: 22px;
                        color: black;
                    }
                    .requirement-headers{
                        font-size: 20px;
                        color: black;
                    }
                    .enrollment-headers{
                        font-size: 14px;
                        color: black;
                    }
                    .top-costs{
                        font-size: 14px;
                    }
                    .total-cost-headers{
                        font-size: 14px;
                    }
                    .program-headers{
                        font-size: 14px;
                        font-weight: none;
                    }
                    .program-paragraphs{
                        font-size: 14px;
                    }


    


    /* FORM SECTION */
    #form-section{
        height: auto;
    }
        #form-container{
            width: 100%;
            height: auto;
        }
            #contact-form{
                width: 80%;
                height: auto;
            }
                #firstName{
                    width: 100%;
                }
                #lastName{
                    width: 100%;
                }
                #email{
                    width: 100%;
                }
}