@import url('https://fonts.cdnfonts.com/css/moirai-one');
@import url('https://fonts.cdnfonts.com/css/mi-nuevo-display-st');
@import url('https://fonts.cdnfonts.com/css/adlam-display');
@import url('https://fonts.cdnfonts.com/css/ysabeau-office');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100%;
}



body{
    background-color: #FFF0F3;
    max-width: 100%;
}



/**************Header part********************
**************************************************/
header{
    height: 35px;
    line-height: 35px;
    background-color: rgba(142, 120, 135, 0.895);
}

li{
    list-style-type: none;
}


a{
    text-decoration: none;
    color: inherit; /* Ensuring links inherit the color of their parent */
}

 /*Hour div inside header part*/
#hour{
    margin-left: 30px;
}

#hour i{
    margin-right: 10px;
}

#hour li{
    float: left;
    margin-left: 20px;
}


/*Contact div inside header part*/
#contact{
    display: flex;
    justify-content: flex-end;
    margin-right: 55px;
    align-items: center;
}

#contact ul {
    display: flex;
    gap: 30px; /* Adjust the gap between menu items as needed */
    list-style-type: none;
}


/* Clear floats for header */
header::after {
    content: "";
    display: table;
    clear: both;
}


/**************Navigation part********************
**************************************************/
#primary{
    height: 100px;
    background-color: #fdd5df;
    text-align: center;
}
/*Logo*/
#logo{
    margin-right: 30px;
    float: right;
    margin-top: 5px;
}

/*Menu Section (primary) part*/
#menu-section{
    line-height: 100px;
}
#menu-section a{
    text-decoration: none;
    display: block;
    color:#8d857d ;
}

#menu-section a:hover{
    background: #f4ccd2;
    color: white;
    font-weight: bold;
}

#menu-section li{
    list-style-type: none;
    float: left;
    width: 10%;
    text-align: center;
}

.home #primary li:nth-child(1) a,
.classes #primary li:nth-child(2) a,
.blogs #primary li:nth-child(3) a,
.service #primary li:nth-child(4) a,
.contact #primary li:nth-child(5) a{
    color: white;
    background: #f4bac3;
}

/*Secondary Part*/
#secondary{
    margin-top: 18px;
    margin-bottom: 18px;
}



#secondary li{
    height: 40px;
    line-height: 40px;
    background-color: #fae3e3;
    list-style-type: none;
    margin-top: 15px;
}

#secondary a{
    display: block;
    padding-left: 20px;
    text-decoration: none;
    color: #ba7979
}

#secondary a:hover{
    background: #cba4a4;
    color: white;
    font-weight: bold;
}

.level #secondary li:nth-child(1) a,
.bmi #secondary li:nth-child(2) a,
.price #secondary li:nth-child(3) a{
    color: white;
    background: #f4bac3;

}
    



/****************Banner part**********************
**************************************************/
#banner{
    position: relative;
}

#banner video{
    width: 100%;
    height: auto;
}
/* Shared banner styles for Contact, Classes, Service, and Blogs pages */
.contact #banner,
.classes #banner,
.service #banner,
.thx #banner,
.level #banner,
.bmi #banner,
.price #banner {
    display: flex;
    justify-content: center;
    height: 220px;
    background-image: linear-gradient(#f4e0e2, #efbfe184, #ffbfbf, #f3c2c2);
}

.contact #banner img,
.classes #banner img,
.service #banner img,
.blogs #banner img,
.thx #banner img,
.level #banner img
.bmi #banner img,
.price #banner img {
    height: 100%;
}


/***************Wrapper part**********************
**************************************************/
#wrapper{
    width: 940px;
    margin: 20px auto 20px auto;
    overflow: hidden;
    font-family: 'Ysabeau Office', sans-serif;
    font-size: 1.25em;
}

#wrapper p{
    line-height: 1.5;
    color:#8d857d;
    padding-left: 15px;
    margin-bottom: 20px;    
}

#wrapper h1,h2,h3{
    color:#8f2a51;
    
}
.content{
    overflow: hidden;
}
/*Main part*/
main{
    margin-top: 40px;
}

main img{
    width: 100%;
}



main h1{
    
    font-weight: lighter;
    text-align: center;
}

.thx main h1{
    font-size: 4em;
    margin-top: 202px;    
}
main h1+p{
    margin-top: 12px;
}

main.right{
    float: right;
    width: 580px;
    margin-right: 7px;
    margin-top: 7px;
    
}

main.left{
    float: left;
    width: 580px;
    height:auto;
    margin-left: 7px;
    margin-top: 7px;
}

/*Aside part*/

aside.left{
    float: left;
    width: 340px;
    margin-left: 7px;

}

aside video{
    width: 100%;
    height: auto;
    margin-top: 7px;
}

aside h3{
    margin-top: 20px;
    text-align: center;
    
}
aside h3+p{
    margin-top: 12px;
}

h2{
    text-align: center;
    margin-top: 20px;
    
    
}


aside.right img{
    width: 100%;
}

.classes aside.right img{
    width: 80%;
    margin-left: 30px;
}

button {
    display: block;
    width: 30%;
    margin: 20px auto; /* Adjusted to center and provide spacing */
    height: 35px;
    border-radius: 5px;
    background-color: #fae3e3;
    color: #784d53;
    font-weight: bold;
    font-family: monospace;
    cursor: pointer;
}

aside.right{
    float: right;
    width: 340px;
    margin-right: 7px;
    margin-top: 7px;
}



p.hours{
    text-align: center;
}
.service h1{
    font-size: 1.8em;
}



.contact aside.right,
.thx aside.right{
    background-color: #fae3e3;
    margin-top: 55px;
    margin-bottom: 70px;
    margin-left: 6px;
    border-radius: 5px;
}

.contact aside.right img,
.thx aside.right img{
    width: 89%;
    margin-left: 10px;
    margin-bottom: 42px;
}
.contact aside.right p,
.thx aside.right p {
    font-family: monospace;
    font-size: 12px !important; 
    margin-bottom: 20px;
}

/*Form Part*/
form {
    max-width: 580px;
    margin: 30px auto 30px auto;
    
}

fieldset {
    padding: 18px;
    border-radius: 5px;
    border: 1px dotted #800;
    background-image: linear-gradient(#fae3e3,#f3dede,#fbcece,#f9b4b4);
}

form label {
    display: block;
    font-size: 1em;
    color:#784d53;
    margin-bottom: 10px;
}

form input[type="text"],
form input[type="email"],
form input[type="number"]{
    height: 40px;
    width: 100%;
    margin-bottom: 10px;
    font-family: monospace;
    font-size: 1em;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

form input[type="submit"], 
form input[type="button"]{
    display: block;
    width: 20%;
    height: 30px;
    font-size: 1em;
    border: 1px solid #ccc;
    margin: 0 auto 0 auto;
    border-radius: 5px;
    background-color: #fae3e3;
    color: #784d53;
    font-family: monospace;
    font-weight: bold;

}

form h3{
    text-align: center;
    background-color: #f4bac3;
    margin-bottom: 10px;
    margin-top: 10px;
    line-height: 50px;

}

input[type="radio"], input[type="checkbox"]{
    height: auto;
    width: auto;
    margin-right: 5px;
    margin-bottom: 8px;
}

form li{
    display: block;
    list-style: none;
    color: #816e70;
    margin-left: 20px;
}

form ul{
    margin-left: 15px;
}

form textarea{
    height: 110px;
    width: 100%;
    margin-bottom: 10px;
    font-family: monospace;
    font-size: 1em;
    padding: 8px;
    border: 1px solid #ccc;
}

legend {
    font-size: 1.5em;
    font-family: 'Mi Nuevo Display St', sans-serif;
    color:#8f2a51;
    text-align: center;
}

.level form,
.bmi form,
.price form{
    margin-top: 5px;
}

#result{
    display: none;
    margin-top: 20px;
}




/*Row Part*/
.row{
    clear: both;
    background-color: #fadde4a3;
    height: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 20px;
}

.row h2{
    margin-bottom: 45px;
}
.slogan{
    width: 480px;
    margin: 5px auto 0 auto;
}

.slogan img{
    width:  90%;
    margin-left: 6%;
}

/*third Part*/
.third{
    background-color: #FFF0F3;
    width: 300px;
    height: 450px;
    float: left;
    margin-left: 10px;
    margin-bottom: 10px;
    border: 1px #dfa0c5 dashed;
    border-radius: 20px;
}

.third:last-of-type{
    margin-bottom: 20px;
}

.third video{
    width: 60%;
    margin: 10px auto 10px auto;
    display: block;

}

.third img{
    width: 60%;
    margin: 10px auto 10px auto;
    display: block;

}



.third video+h3{
    margin-top: 20px;
    text-align: center;
}

.third img+h3{
    margin-top: 20px;
    text-align: center;
}

.third h3+p{
    margin-top: 10px;
}

.price .third{
    margin-top: 20px;
    width: 178px;
    height: auto;
    margin-left: 12px;
    padding: 5px;
    margin-bottom: 20px;
}


.fix-price{
    text-align: center;
    font-size: 1em;
    color:#c69299 !important;
}


/****************Footer part**********************
**************************************************/
footer{
    clear:both;
    height: 90px;
    background-color: #fdd5df;
    line-height: 90px;
}

footer li{
    display: block;
    float: left;
    margin-left: 30px;
    color:#8d857d 
}


/*Sample invoice*/
#invoice {
    border: 1px dashed #d28f8f;
    width: 300px;
    margin: 20px auto 20px auto;
    background-color: #f9f9f9;
    overflow: hidden; /* Clearfix */
}

#invoice .logo-invoice {
    float: right;
    margin-left: 15px;
    margin-top: 15px;
    width: 20%;
}

#invoice-details {
    margin-left: 12px;
}

#invoice-content {
    font-family: 'Times New Roman', Times, serif;
}

#invoice-content h3 {
    font-size: 14px;
    color: #794343;
    margin-top: 60px;
    margin-bottom: 20px;
    margin-right: 11px;
    line-height: 30px;
    text-align: center;
}

#invoice-content p {
    font-size: 12px;
    line-height: 1.6;
}

p.sample{
    font-size: 12px;
    text-align: center;
    color:#bd9999 !important;
}