*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    font-size: 10px;
    color: rgb(10, 10, 10);
    font-family: 'Lato', sans-serif;
    background-color: rgb(255, 255, 255);
    scroll-behavior: smooth;
}
ul{
    list-style-type: none;
}

a{
    text-decoration: none;
}

.btn{
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgb(66, 98, 56);
    padding: 1.3rem 2rem;
    transition: .3s;
}

.btn:hover{
    color: rgba(255, 255, 255, 1);
}

.btn:hover i{
    transform: translateX(.5rem);
}


.btn i{
    vertical-align: middle;
    margin-left: .5rem;
    transition: .3s;
}

.theme{
    color: rgb(66, 98, 56);
}

.title{
    font-size: 3rem;
    font-weight: 700;
    line-height: 40px;
    position: relative;
    margin-bottom: 3rem;
}

.title::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 100%;
    left: -15px;
    bottom: 0;
    background-color: rgb(229,193,41);
}


/* NAVBAR */


.logo{

    position: absolute;
    z-index: 10000;
    top: 3rem;
    right: 85%;
}

.logo a img{
    width: 5rem;
}


/* HOME */

#home .home-container{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 100vh;
    padding: 7rem 0;
    justify-content: space-evenly;
}

#home .home-container .home-left{
    background-image: url("../assets/images/logoBackground.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    padding-bottom: 11rem;
    margin-top: 8rem;
}

#home .home-container .home-left h1{
    font-size: 6rem;
    line-height: 7rem;
    font-weight: 200;
    margin-bottom: 2rem;
    font-family: 'Lobster', cursive;
    text-shadow: 0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250);
}


#home .home-container .home-left h2{
    font-size: 2rem;
    font-weight: 500;
    line-height: 2.5rem;
    color: rgb(155, 155, 155);
    margin-bottom: 8rem;
    text-shadow: 0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250),0px 0px 2px rgb(250, 250, 250);
}

#home .home-container .home-left a:first-of-type{
    margin-right: 5rem;
}
 

#home .home-container .home-right{
    position: relative;
    width: 60rem;
    height: 45rem;
}

#home .home-container .home-right .home-img{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url("../assets/images/index.jpg") center no-repeat;
    background-size: cover;
}


/* ABOUT */
#about{
    background-color: rgb(240,240,240);
}
#about .about-container{
    width: 100%;
    padding-top: 120px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 15rem;
}

#about .about-container .about-img{
    background: url("../assets/images/pieds.jpg") no-repeat center;
    background-size: cover;
    width: 615px;
    height: 337px;
}

#about .about-container .about-content{
    width: 45%;
}


#about .about-container .about-content p{
    font-size: 1.8rem;
    line-height: 3rem;
    width: 80%;
    font-weight: 400;
    text-align: justify;
}

#about .about-container .about-content p:first-of-type{
    margin-bottom: 2rem;
}


/* INFO */

#about .info-container{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding-bottom: 150px;
}

#about .info-container .info-left{
    margin-top: 2rem;
}

#about .info-container .info-left p{
    font-size: 1.8rem;
    line-height: 3rem;
    width: 450px;
    font-weight: 400;
    text-align: justify;
}

#about .info-container .info-left p:first-of-type{
    margin-bottom: 2rem;
}

#about .info-container .info-right{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#about .info-container .info-right .info-photo{
    width: 400px;
    height: 200px;
    background: url(../assets/images/certif.jpg) no-repeat center;
    background-size: contain;
    margin-bottom: 1rem;
}

#about .info-container .info-right h2{
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 3rem;
    margin-bottom: 2rem;
}

#about .info-container .info-right ul{
    margin-bottom: 2rem;
}

#about .info-container .info-right ul li{
    text-align: center;
    color: rgb(229,193,41);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 3rem;
}

#about .info-container .info-right ul li span{
    color: rgb(10, 10, 10);
    font-weight: 400;
}

#about .info-container .info-right ul li span a{
    color: rgb(10, 10, 10);
    font-weight: 400;
}


/* TARIFS */

#tarif .tarif-container{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 120px 0 50px 0;
}

#tarif .tarif-container h1{

    font-size: 3rem;
    font-weight: 700;
    line-height: 40px;
    position: relative;
    margin-bottom: 5rem;
}

#tarif .tarif-container h1::after{
    content: '';
    position: absolute;
    width: 20%;
    height: 5px;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: -10px;
    background-color: rgb(229,193,41);
}

#tarif .tarif-container h2{
    color: rgb(155, 155, 155);
    font-size: 1.8rem;
    line-height: 2.5rem;
    text-align: center;
    font-weight: 400;
    margin-bottom: 5rem;
}

#tarif .tarif-container .tarif-content{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-bottom: 6.5rem;
}

#tarif .tarif-container .tarif-content .tarif-item{
    width: 430px;
    height: 310px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: .5rem .5rem;
    position: relative;
}

#tarif .tarif-container .tarif-content .tarif-item:nth-child(1){
    background-image: url("../assets/images/bebe.jpg");
    background-position-y: -70px;
}

#tarif .tarif-container .tarif-content .tarif-item:nth-child(2){
    background-image: url("../assets/images/ado.jpg");
}

#tarif .tarif-container .tarif-content .tarif-item:nth-child(3){
    background-image: url("../assets/images/adulte.jpg");
}

#tarif .tarif-container .tarif-content .tarif-item .tarif-info{
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 3rem;
    color: white;
    padding: 1rem 2rem;
    background-color: rgba(66, 98, 56, 0.9);
    position: absolute;
    left: 10px;
}

#tarif .tarif-container .tarif-content .tarif-item .tarif-info:nth-child(1){
    bottom: 70px;
}

#tarif .tarif-container .tarif-content .tarif-item .tarif-info:nth-child(2){
    bottom: 10px;
}

#tarif .tarif-container h3{
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    color: rgb(229,193,41);
}

/* CONTACT  */

#contact .contact-container{
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    padding: 100px 0 150px 0;
}

#contact .contact-container .contact-left{
    width: 520px;
}

#contact .contact-container .contact-left p{
    color: rgb(155, 155, 155);
    font-size: 1.6rem;
    line-height: 2.3rem;
    font-weight: 400;
    margin-bottom: 3rem;
}

#contact .contact-container .contact-form{
    width: 100%;
}

#contact .contact-container .contact-form .formBox{
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#contact .contact-container .contact-form .formBox .inputBox{
    position: relative;
    margin: 0 0 2.5rem 0;
}


#contact .contact-container .contact-form .formBox .inputBox.w50{
    width: 48%;
}


#contact .contact-container .contact-form .formBox .inputBox.w100{
    width: 100%;
}

#contact .contact-container .contact-form .formBox .inputBox input,
#contact .contact-container .contact-form .formBox .inputBox textarea{
    width: 100% !important;
    padding: 10px 2rem;
    resize: none;
    font-size: 1.8rem;
    line-height: 2.5rem;
    border: none;
    outline: none;
    color: rgb(10, 10, 10);
    height: 50px;
    font-family: 'Lato', sans-serif;
    background-color: rgb(240, 240, 240);
}


#contact .contact-container .contact-form .formBox .inputBox textarea{
    min-height: 200px;
}

#contact .contact-container .contact-form .formBox .inputBox span{
    position: absolute;
    left: 2rem;
    font-size: 1.8rem;
    transition: .3s;
    color: rgba(10, 10, 10,.4);
    pointer-events: none;
    top: 50%;
    transform: translate(0, -50%);
    padding: 5px 0;

}


#contact .contact-container .contact-form .formBox .inputBox .text-zone{
    top: 5px;
    transform: unset;
}

#contact .contact-container .contact-form .formBox .inputBox .label-zone:focus ~ span,
#contact .contact-container .contact-form .formBox .inputBox .label-zone:valid ~ span{
    display: none;
}


#contact .contact-container .contact-form .formBox .inputBox input:focus ~ span,
#contact .contact-container .contact-form .formBox .inputBox textarea:focus ~ span,
#contact .contact-container .contact-form .formBox .inputBox input:valid ~ span,
#contact .contact-container .contact-form .formBox .inputBox textarea:valid ~ span{
    transform: translateY(-47px);
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(66, 98, 56);
}


#contact .contact-container .contact-form .formBox .inputBox input[type="submit"]{

    text-align: center;
    background-color: rgb(66, 98, 56);
    color: rgba(255, 255, 255, 0.8);
    transition: .4s;
    position: relative;
    max-width: 150px;
    font-size: 1.8rem;
    font-weight: 400;
    cursor: pointer;
}


#contact .contact-container .contact-form .formBox .inputBox input[type="submit"]:hover{
    color: rgba(255, 255, 255, 1);
}

.contact-alert{
    background-color: rgb(66, 98, 56);
    color: white !important;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    padding: 5px 0;
}

.buttonSend
{
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


#contact .contact-container .contact-right{
    width: 520px;
    margin-top: 5rem;
}

#contact .contact-container .contact-map{
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
    height: 50vh;
}

#contact .contact-container .contact-right .info-cont{
    display: flex;
    justify-content: center;
}

#contact .contact-container .contact-right .contact-info{
    display: grid;
    grid-template-columns: 2fr 2fr;
    grid-template-rows: 2fr 2fr;
    grid-gap: 2rem 5rem;
}

#contact .contact-container .contact-right .contact-info a{
    color: rgba(10, 10, 10,.7);
    font-size: 1.5rem;
    font-weight: 200;
    line-height: 2.2rem;
    transition: .3s;
}

#contact .contact-container .contact-right .contact-info a:hover span{
    text-decoration: underline;
    color: rgba(10, 10, 10,1);
    transition: .3s;
}

#contact .contact-container .contact-right .contact-info a i{
    margin-right: 1rem;
    text-align: center;
    width: 15px;
    vertical-align: baseline;
    transition: .5s;
}

#contact .contact-container .contact-right .contact-info a span{
    display: inline-block;
}

.fa-map-marker-alt{
    vertical-align: top !important;
}


/* FOOTER */

#footer .footer{
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 5rem 0 10rem 0;
    background-color: rgb(240,240,240);
}

#footer .footer div{
    display: flex;
    flex-direction: column;
    text-align: center;
}

#footer .footer div h1{
    position: relative;
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
    color: rgb(66, 98, 56);
    margin-bottom: 4rem;
}

#footer .footer div h1::after{
    content: '';
    position: absolute;
    width: 5rem;
    height: 4px;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: -10px;
    background-color: rgb(229,193,41);
}

#footer .footer div p{
    font-size: 1.4rem;
    color: rgb(10, 10, 10);
    font-weight: 300;
    line-height: 2.5rem;
}

#footer .footer div h2{
    font-size: 1.5rem;
    color: rgb(229,193,41);
}
#footer .footer div h2:nth-of-type(2){
    margin: 1rem 0;
}

#footer .footer div h2 span{
    font-size: 1.4rem;
    color: rgb(10, 10, 10);
    font-weight: 300;
    margin-left: .5rem;
}


#footer .footer .copyright{
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 1.2rem;
    font-weight: 400;
}