*
{
    padding: 0;
    margin: 0;
    border: border-box;
}

header
{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    width: 100%;
}

.headerlink
{
    display: flex;
    justify-content: space-between;
    width: 300px;
    align-items: center;
    margin-left: -70px;

}
.headerlink button
{
    /* color: hsl(228, 45%, 44%); */
    font-size: 20px;
    border-radius: 15px;
    border: none;
    background: none;

}
.headerlink span
{
    /* color: hsl(228, 45%, 44%); */
    font-size: 20px;
}

.hero
{
    display: flex;
    justify-content: space-between;
}

.first_hero_box
{
    width: 50%;
    /* border: 2px solid; */
    /* height: 400px; */
    /* margin-top: 70px; */
}

.first_hero_box h2
{
    margin-top: 50px;
    /* border: 2px solid; */
    width: 350px;
}

.first_hero_box p
{
    margin-top: 20px;
    /* border: 2px solid; */
    width: 450px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    color: hsl(238, 22%, 44%);
}

.first_hero_box input
{
    margin-top:20px;
    border: 1px solid black;
    width: 360px;
    border-radius: 6px;
    color: hsl(228, 45%, 44%);
    height: 25px;
}

.first_hero_box button
{
    width: 200px;
    color: #ffffff;
    background: hsl(228, 45%, 44%);
    height: 30px;
    font-size: 20px;
    border-radius: 6px;
    border: none;
}

.second_hero_box
{
    width: 50%;
    /* border: 2px solid; */
    height: 400px;
}

.second_hero_box img
{
    height: 300px;
}

main
{
    background: url("images/bg-curve-desktop.svg");
    /* background: url("images/bg-curve-mobile.svg") */
    height: 160vh;
}

.two-box-hero
{
    display: flex;
    justify-content: space-between;
}

.three_hero_box
{
    width: 50%;
}

.three_hero_box h2
{
    /* margin-top: 50px; */
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    font-Weight: 700;
}
.three_hero_box p
{
    width: 440px;
    margin-top: 30px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    color: hsl(238, 22%, 44%);
    font-Weight: 400;
    font-size: 16px;
}
.three_hero_box h6
{
    width: 460px;
    margin-top: 40px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    color: hsl(238, 22%, 44%);
    font-Weight: 400;
    font-size: 16.2px;
}

.three_hero_box span
{
    color: hsl(111, 96%, 32%);
    font-size: 19px;
    margin-top: 50px;
    border-bottom: 1px solid;
}

.kids-container
{
    width: 450px;
    height: 250px;
    margin-top: 60px;
    background: #ffffff;
    box-shadow: 5px, 5px, 5px, 5px hsl(0, 0%, 75%);
}

.kids-container h5
{
    margin-top: 20px;
    font-size: 16px;
    width: 320px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    font-Weight: 400;
}

#lefticons
{
    font-size: 20px;
    margin-top: 20px;
}

.kids-container img
{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-top: 20px;
}

.kids-img
{
    display: flex;
    width: 280px;
    height: 100px;
    align-items: center;
    justify-content: space-between;
}

.four_hero_box
{
    width: 50%;
}

.flyerAcccessContainer
{
    display: flex;
    justify-content: space-between;
    height: 180px;
    background:  hsl(238, 22%, 44%);
    margin-top: 30px;
    color: hsl(240, 75%, 98%);
    /* border: none; */
}

.flyerAccessText
{
    width: 50%;
    /* border: 2px solid; */
}

.flyerAccessText h2
{
    margin-top: 40px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    font-Weight: 700;
}

.flyerAccessText p
{
    width: 420px;
    margin-top: 15px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    font-Weight: 400;
}

.flyeraccessinput
{
    width: 50%;
}

.flyeraccessinput input
{
    margin-top: 40px;
    height: 40px;
    width: 470px;
}
.flyeraccessinput button
{
    margin-top: 20px;
    height: 40px;
    width: 200px;
    background: hsl(224, 93%, 58%);
    color: hsl(240, 75%, 98%);
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    font-Weight: 400;
    border: none;
}

.flyerfooterContainer
{
    display: flex;
    justify-content: space-between;
    height: 250px;
    background: hsl(243, 87%, 12%);
    width: 100%;
    color: hsl(240, 75%, 98%);

}

.footerlogo
{
    width: 300px;
    color: hsl(240, 75%, 98%);
    margin-top: 30px;
}

#logooo
{
    color: hsl(240, 75%, 98%);
    /* text-color: hsl(240, 75%, 98%); */
}

.footerabout
{
    line-height: 24px;
    color: hsl(240, 75%, 98%);
    margin-top: 80px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    font-Weight: 400;
}

.footercontact
{
    line-height: 24px;
    color: hsl(240, 75%, 98%);
    margin-top: 80px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    font-Weight: 400;
}

.footericon i
{
    line-height: 24px;
    color: hsl(240, 75%, 98%);
    margin-top: 80px;
    margin-left: -80px;
    font-family: url=("https://fonts.google.com/specimen/Raleway");
    font-Weight: 400;
    gap: 40px;
    
   
}

#iconsfti
{
    /* background: hsl(240, 75%, 98%); */
    width: 50px;
    height: 50px;
    border-radius: 50% solid hsl(240, 75%, 98%);
    gap: 20px;
}

@media screen and (max-width:600px) {

    main
    {
        height: fit-content;
    }
     .hero
    {
        flex-direction:column-reverse;
        align-items: center;

    }

    .sectionheader
    {
        width: 100%;
        text-align: center;
        margin-bottom: 100px;
        margin-top: 30px;
        font-family: url=("https://fonts.google.com/specimen/Raleway");
        font-Weight: 700;
      
        
    }

    .headerlink
    {
        width: 250px;
        
    }

    .logoContainer img
    {
        width: 100px;
        height: 50px;
        margin-top: 20px;
        padding-left: 30px;
    }

    .first_hero_box
    {
        width: 300px;
        text-align: center;

    }

    .first_hero_box h2
    {
        margin-left: 20px;
        width: 280px;
        
    }

    .first_hero_box p
    {

        
        width: 300px;
    }

    .first_hero_box input
    {
        width: 300px;
        
    }

    .first_hero_box button
    {
        width: 300px;
        margin-top: 10px;
    }

    .two-box-hero
    {
        flex-direction:column-reverse;
        align-items: center;
    }


    .second_hero_box
    {
        width: 475px;
    

    }

    .four_hero_box
    {
        width: 475px;
    
        margin-top: 100px;
    }

    .three_hero_box
    {
        /* height: auto; */
        align-items: center;
        text-align: center;
        width: 475px;
    
    }

     

    .three_hero_box h2
    {

        width: 400px;
    
        font-size: 20px;
        margin-left: 50px;
        margin-top: 90px;
    }
    
    
    .three_hero_box p
    {
        padding-left: 50px;
        margin-left: 30px;
        width: 330px;
        /* border: 2px  solid; */

    }

    .three_hero_box h6
    {

        width: 330px;
        padding-left: 50px;
        margin-left: 30px;
        /* border: 2px  solid; */
        margin-bottom: 70px;
    }

    
    .three_hero_box span
    {
        text-align: center;
        padding-left: 20px;
        
        border-bottom: 1px solid;
        
    }

    .kids-container
    {
        width: 380px;
        margin-left: 70px;
        margin-top: 20px;
      
    }

    #lefticons
    {
      
        margin-left: -300px;
    }

    .kids-container h5
    {
      
        text-align: left;
        margin-left: 20px;
        width: 330px;
    }

    .flyerAcccessContainer
    {
        display: inline-block;
        margin-top: 100px;
        align-items: center;
        height: 390px;
        width: 500;
       
    }


    .flyerAccessText h2
    {
        width: 250px;
        margin-left: 130px;
    
    }

    .flyerAccessText p
    {
        width: 280px;
        text-align: center;
        margin-left: 110px;
       
    }

    .flyeraccessinput input
    {
        width: 300px;
        margin-left: 110px;
    }

    .flyeraccessinput button
    {
        margin-left: 110px;
        width: 300px;
    }

    

    .flyerfooterContainer
    {
        display: inline-block;
        height: 90vh;
       
    } 

    .footerlogo 
    {
        padding-left: 50px;
        gap: 10px
    }

    .footerabout
    {
        padding-left: 50px;
        gap: 10px;
    }

    .footercontact{
        padding-left: 50px;
        gap: 10px;
    }

    .footericon
    {
        display: flex;
        margin-left: 370px;
        align-items: center;
        /* width: 200px; */

        margin-top: -50px;
    }


}
