* {
    margin: 0;
    padding: 0;
    outline: 0;
    top: 0;
    font-family:'corn', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    word-spacing: .1em;
    line-height: 1.5em;
}

body {
   min-height: 100vh;
   display: flex;
   max-width: 960px;
   flex-direction: column;
   place-items: center;
   gap: 1.2rem;
   
   background: radial-gradient(rgb(244, 238, 232), rgb(194, 168, 146) 100%);
   overflow-x:hidden;
   overflow-y:atuo;
   margin: 0 auto;
   background-origin: border-box;
}

header {
   display: flex;
   background: radial-gradient(rgb(228, 227, 226), rgba(177, 166, 145, 0.9) 100%);
   height: auto;
   width:100%;
   position: fixed;
   z-index: 1000;
   place-content: center;
   /* place-items: center; */
  
}
.heading{
   display:flex;
   width:100%;
   height:5vh;
   position:fixed;
   place-content:center;
   place-items: center;
}

h1{
   color: white;
   text-shadow: 9px 8px 0px rgba(125, 124, 82, 0.9); 
}


.navBar {
   display: flex;
   height: 80%;
   width:960px;
   justify-content: space-around;
   z-index: 2000;
   align-self: flex-end;
}


.logoPic{
  display:inherit;
  width:180px;
  place-content:center;
  height:120px;
  margin:10px
}

.logo {
   height: auto;
   display: inherit;
   border-radius:10%;
   box-shadow:inset 0 4px 8px rgba(175, 158, 158, 0.9);
}

.navBar ul {
   height: auto;
   display: inherit;
   place-content: center;
   place-items: center;
   width:100%;
   float:right;
   justify-content: space-evenly;
}

.navBar ul li {
   display: inherit;
   min-width: 20%;
   text-decoration: none;
   text-align: center;
   justify-content: center;
}

.navBar ul li a {
   text-decoration: none;
   font-size: larger;
   color:rgb(149, 63, 6);
}

.navBar ul li a:hover {
 
  color: white;
  font-size:20px;
}

.navBar ul li a.active {
 
 color:black;
}



/* begining of container */


 .image {
    display:flex;
    height: auto;
    width: 100%;
    height:auto;
    place-items: center;
    flex-direction:column ;
    /*z-index:-1;*/
}

.myimg {
    height:400px;
    width:400px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   }


.buda {
    margin: 1em auto;
    text-align: center;
    max-height: 80%;
    width: 100%;
    box-shadow:hsla(45, 50%, 98%, 0.801);
    }

.af-img {
    width:500px;
    height:500px;
    border-radius:15px;   
   }

.salPhoto{
    display:flex;
    width:100%;
    height:auto;
    justify-content: center;
    margin-bottom:55px;
    border-bottom: 1px solid gray;
    
}

.salPic{
       display:block;
       width:100px;
       height:100px;
       margin:1em 0;
       border-radius:5px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.9);
       
    }
.salPic:hover{  
     border-radius:50%;
     width: 90px;
     height:90px;
    }  
h3{
      text-align: center;
      width:100%;
      height:auto;  
      font-size: x-large;
      color:rgb(149, 63, 6);   
    }
.vogue{
       display:inherit;
       place-content:center;
       flex-wrap: wrap;
       gap:4em;
       box-shadow:inset 0 4px 8px rgba(0, 0, 0, 0.1);
}

.container {
   display: flex;
   height: auto;
   flex-direction: column;
   margin:12vh 0 0;
   width:100%;
   align-self: center;
}


.content {
   display: flex;
   height: auto;
   color: hsla(33, 0%, 0%, 0.801);
   flex-direction: column;
   line-height: 1.2em;
   width:80%;
   margin: 0 auto;
}
.recommandation{
  color:rgb(149, 63, 6);
}
.recommandation h3{
  color:rgb(149, 63, 6);
  text-align: left;
  margin:1.4em  0 .3em 0;
}

.content p {
    
    font-size: 18px;
    margin: 0 auto;
    height:auto;
    padding-bottom:25px;
   }
.content p:hover{
   font-size: 20px;
   font-optical-sizing:auto;
   color:hsl(0, 0%, 1%);
   box-shadow:4px 1px 12px rgba(0, 0, 0, .2);
 }
 
.em {
    font-size: larger;
    text-align: center;
    color:rgb(149, 63, 6);
    margin: 1em auto;
}

h2,
h3 {
    color:rgb(149, 63, 6);
    font-size: x-larg;
    margin: 1em 0 0;
}

.btn {
    width: 100%;
    display: flex;
    place-content: center;
    place-items: center;
    margin: 1em;
    height: auto;
    align-self: center;
    }

.button {
    width: 140px;
    height: 35px;
    color:rgb(149, 63, 6);
    cursor: pointer;
    border-radius: 10px;
    border: 4px;
    border-style: outset;
    font-weight: bolder;
    font-size: 15px;
    background:radial-gradient(rgb(244, 239, 239), rgba(198, 187, 187, 0.9) 100%);
   }

button:hover {
    background: #e3d2bc;
    color: #390303;
    font-size: 17px;
    transition: 1s;
}

.media {
    display: flex;
    text-decoration: none;
    height: 4vh;
    gap: 6em;
    justify-content: center;
    margin:2em 0 0 0;
  }

.bxl-linkedin,
.bxl-facebook,
.bxl-twitter,
.bxl-instagram {
    width: 1.5em;
    height: 1.3em;
    background: transparent;
    border-radius: 50%;
    display: flex;
    text-align: center;
    padding-top: 6px;
    font-size:24px;
    border:1px solid rgb(251, 253, 251);
    color:rgb(149, 63, 6);
}
.bxl-linkedin:hover,
.bxl-facebook:hover,
.bxl-twitter:hover,
.bxl-instagram:hover {
    
    background: rgb(217, 184, 131);
    color:aliceblue
    
} 
/*     style social media button*/
.fa {
   padding: 20px;
   font-size: 30px;
   width: 50px;
   text-align: center;
   text-decoration: none;
 }
 
 /* Start of contact syle*/
.contact {
    overflow: hidden;
    display: inherit;
    flex-direction: column;
    margin: 1em 0 0;
    max-width: 100%;
    height: 20vh;
    place-content: center;
    place-items: center;
    border-inline-end-color: none;
    border-radius: 5px;
    border:none;
    background: radial-gradient(rgb(255, 254, 253), rgb(211, 198, 182) 100%);
    /*z-index:10;*/
   
}

.contact.slider {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 40px;
}

.contact .slider .ads {
    position: relative;
    text-align: center;
    margin-right:-350px;
    top: 0;
    font-size: larger;
    font-family: cursive;
    right: 150%;
    width: 1420px;
    height: 100%;
    color: hsl(0, 41%, 21%);
    background: transparent;
    animation: slideLift 18s forwards infinite;
  
    animation-timing-function: cubic-bezier(0.9, 0.5, 1.0, 0.3);
   
}

@keyframes slideLift {
    0% {
        right: 0;
      
    }
}

.contact .slider .phone {
    text-align: center;
    color: hsl(0, 41%, 21%);
   
}
.contact .ads{
   text-decoration: none;
   text-decoration-style: none;
}
.comming-soon{
   overflow: hidden;
   display: inherit;
   flex-direction: column;
   width: 100%;
   height:10vh;
   align-items: center;

   border-radius: 5px;
   border:none;
   background: radial-gradient(rgb(255, 254, 253), rgb(211, 198, 182) 100%);
 }
.workshop {
   text-align: center;
   color:rgb(149, 63, 6);
 
  
} 
/*end of contact*/


.field-name {
    border-radius: 5px;
    height: 2rem;
    margin: 0 1em;
    border: none;
}

.field-email {
    border-radius: 5px;
    height: 2rem;
    margin: 0 1em;
    border: none;
}

.wp-block-coblocks-form {
    padding-top: .5vh;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    border-radius: 5px;
    height: 32rem;
    background-color: rgb(251, 246, 233);
}

.blocks-verify {
    height: 2.5em;
    border-radius: 5px;
    margin: 0 15px 10px;
    padding-left: 3px;
    border: none;
    padding-top: 5px;
}

#form-submit {
    margin: 0 15px;
}

.submit {
    width: 95%;
    height: 1.5em;
    border-radius: 5px;
    font-size: 20px;
    margin: 0 15px 25px;
    background: transparent;
    border: none;
}

.submit:hover {
    transition: .5s;
    background-color: bisque;
    font-size: 24px;
    color: #000;
}

.field-textarea {
    margin: 0 15px 15px;
    border: none;
}

.block-label {
    margin: 0 15px;
    padding-bottom: 5px;
} 
/*end of form*/
/*begining of holistic*/

.benifits {
    margin: 20px 0;
}

.meditation {
    display: flex;
    width: 50%;
}



/*end of holistic*/

.chkbox {
    display: none;
    width: 2em;
    height: 2em;
    cursor: pointer;
    margin: 25px -25px 0;
}

.icon {
    display: block;
    width: 26px;
    height: 3px;
    background-color: #000;
    float: right;
    position: relative;
    border-radius: 25px;
    display: none;
   }

.icon::before {
    display: block;
    width: 26px;
    height: 3px;
    content: "";
    top: -5px;
    background-color: #000;
    position: absolute;
}

.icon::after {
    display: block;
    width: 26px;
    height: 3px;
    content: "";
    bottom: -5px;
    background-color: #000;
    position: absolute;
}

.patty {
    display: none;
    width: 80px;
    height: 2em;
    justify-content:center; 
    order:2;
}

.music{
   opacity:.4;
}

.more {
   max-height:500px; 
   overflow: hidden;
}

.more.expand {
   max-height: none;
}

.read-more {
   display: block;
   color: hsl(26, 46%, 14%);
   text-decoration: underline;
   cursor: pointer;
}
.meet {
    max-height:0; 
    overflow: hidden;
 }
 
 .meet.expand {
    max-height:none;
 }
 
 .meet-salma {
    display: block;
    color:  hsl(27, 63%, 41%);
   
    cursor: pointer;

 }
 .content h4{
    text-align: center;
    width:100%;
    font-size: large;
    color:rgb(149, 63, 6);
}
@media screen and (max-width: 767.98px) {
    header {
        height:auto;
        margin:0 auto;
        gap:20px;
      
   }
    
    .heading{
       width:60%;
     }
    
    .container{
       margin-top:10em;
    }

    .content{
        font-size: small;
    }

    .em {
        font-size: medium;
    }
     
    .patty {
      display: flex;
      margin:10px;
     }
    
    .navBar {
        margin-top:4vh;
        flex-direction:row;
        width:100%;
        height:auto;
        order:1;
        place-items:center;
       
       }

    .navBar ul {
        flex-direction:column;
        display: none;
        font-size:10px;
        gap:15px;
        height:auto;
        width:100%;
     }
     .navBar ul li a{
        font-size:medium;
        font-weight:600;
     }
 
    .navBar ul li a:hover{
       font-size:medium;
    }

    .contact {
        height: auto;
    }

    .contact .slider .ads {
         font-size: small;
         margin-top:10px;
         width: 1000px;
         height: 100%;
         color: hsl(0, 41%, 21%);
         background: transparent;
         animation: slideLift 18s forwards infinite;
         animation-timing-function: cubic-bezier(0.9, 0.5, 1.0, 0.3);
    }

  
    .contact .slider .phone {
        font-size: small;
    }
    .container {
        width: 100%;
        top: 0;
    }
    .comming-soon{
     height:8vh;
    }
   
    .workshop {
       font-size: small;
      
   }
   
    .myimg {
        width: 250px;
        height: 250px;
        margin: 0 auto;
    }

    .logoPic{
      height:auto;
      width:auto;
      
   }

   .logo{
       width:65px;
       height:65px;
    }

    h1{
       font-size: 15px;
       text-align: center;
    }

    .projectImg .picI{
       height:auto;
    }
    
    footer {
        font-size: 12px;
      
    }
    .media {
        gap: 3.5em;
        font-size: 12px;
        height: auto;
   }

       .bxl-linkedin,
       .bxl-facebook,
       .bxl-twitter,
       .bxl-instagram {
       width: 1.2em;
       height: 1em;
   }
   .af-img {
        width: 285px;
        height: 265px;
    }

   .projectImg{
       height:auto;
       width:100%;
       flex-wrap:wrap;
       place-self: center;
       padding-top:2em;
       gap:1em;
    }
    .pic{
       margin:0 auto;
       width:250;
       height:250px;
       text-align: center;
    }
    .pic p{
       margin:10px;
       word-spacing: 0;
    }
    .button {
       width: 120px;
       height: 30px;
      
      }
}

#more {
   display: none;}
#myBtn{
   border:none;
   background:transparent;
   width:100px;
} 
/* Onclick the hamburger bars Menubar appears or disappears*/

 .chkbox:checked~.patty .icon {
    background: transparent;
}

.chkbox:checked~.patty .icon::before {
    transform: rotate(-45deg);
    top: 0;
}

.chkbox:checked~.patty .icon::after {
    transform: rotate(45deg);
    top: 0;
}

.icon {
    display: block;
    cursor: pointer;
}

.content .dr {
    
    font-size: large;
    margin: .5em 0;
}

.chkbox:checked~.navBar ul{
    flex-direction: column;
    gap: .8em;
    display: flex;
   
}

footer {
    display: flex;
    margin: 20px auto 0;
    width: 100%;
    height: 2em;
    background: transparent;
    color: hsl(0, 100%, 2%);
    place-content: center;
    
}