.main{
   display: flex;
}

 
                        /* For Desktop */
.box {
   position: absolute;
   width: 100%;
   height: 100%;
   justify-items: center;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   display: grid; 
   background-image: url(../images/Homepage/bgImageDesktop.jpg);
   background-size:100% 100%;
   background-position-x: center;
   background-repeat: no-repeat;
}

.gif{  
   width:30%;
   height: 60%;
   position: absolute;
   bottom: -11%;
   z-index: 1;
   justify-content: center;
   }

.fade {
   animation: 3s fadeIn;
   animation-fill-mode: forwards;
   visibility: hidden;
   animation-timing-function: step-end;
   justify-items: center;
}
@keyframes fadeIn {
   0% {
     opacity: 0;
   }
   100% {
     visibility: visible;
     opacity: 1;
   }
 }

.item1,.item2,.item3,.item5,.item6,.item7,.item8,.item9 {
    width: 10%;
    height: 21%;
    position: absolute;
 }

.item1{
   left: 10%;
   top: 68%;
   animation: item1 1.5s 1;
   animation-delay: 3s;
   animation-timing-function: linear;
   }
@keyframes item1 {
        0% {left:45%; top:75%;}
       30% {left:45%; top:40%;}
       70% {left:25%; top:55%;}
       100%{left:10%; top:68%;}
   }

.item2{
   left: 15%;
   top: 45%;
   animation: item2 2.5s 1;
   animation-delay: 3s;
   animation-timing-function: linear;
   }    
@keyframes item2 {
   0% {left:45%; top:75%; }
   30% {left:45%; top:40%;}
   70% {left:30%; top:42%;}
   100%{left:15%; top:45%;}
   }

.item3{
   left:  25%;
   top: 30%;
   animation: item3 2s 1;
   animation-delay: 3s;
   animation-timing-function: linear;  
   }   
@keyframes item3 {
   0%   {left:45%; top:75%;}
   30%  {left:45%; top:40%;}
   70%   {left:35%; top:35%;}
   100% {left: 25%; top:30%;}
   } 

.logo{
   width: 25%;
   height: 33%;
   top: 5%;
   left:37%;
   position: absolute;
   animation: logo 3s 1;
   animation-delay: 3s;
   animation-timing-function: linear;  
   }
   
@keyframes logo {
   0%   {left:37%; top:75%;}
   30%  {left:37%; top:40%;}
   70%  {left:37%; top:20%;}
   100% {left:37%; top:5%;}
} 

.item5{
   right: 25%;
   top: 30%;
   animation: item5 2s 1;
   animation-delay: 3s;
   animation-timing-function: linear;  
   }
   
@keyframes item5 {
   0%   {right:45%; top:75%;}
   30%   {right:45%; top:40%;}
   70%   {right:35%; top:35%;}
   100% {right:25%; top:30%;}
} 
.item6{
   right: 15%;
   top: 45%;
   animation: item6 1.5s 1; 
   animation-delay: 3s;
   animation-timing-function: linear;  
   }
   
@keyframes item6 {
   0%   {right:45%; top:75%;}
   30%   {right:45%; top:40%;}
   70%   {right:30%; top:42%;}
   100% {right:15%; top:45%;}
} 
.item7{
   right: 10%;
   top: 68%;
   animation: item7 1.5s 1;
   animation-delay: 3s;
   animation-timing-function: linear;
   }
@keyframes item7 {
       0%   {right:45%; top:75%;}
       30%   {right:45%; top:40%;}
       70%   {right:25%; top:55%;}
       100% {right:10%; top:68%;}
} 

.item8{
   right: 46%;
   top: 45%;
   animation: item8 2.5s 1;
   animation-delay: 3s;
   animation-timing-function: linear;
   }
@keyframes item8 {
       0%   {right:46%; top:75%;}
       30%   {right:46%; top:70%;}
       70%   {right:46%; top:60%;}
       100% {right:46%; top:45%;}
} 

.item9{
   right: 46%;
   top: 75%;
   }

   .welcome{
      display: flex;
      z-index: 4;
      width: 100%;
      margin-top: 679px;
      border-color: #F8F158;
      margin-bottom: 0;
      margin-left: 0px;
      margin-right: 0px;
      background-color:#F8F158;
      color: blueviolet;

   }




                        /* For Tablet */

@media screen and (max-width: 1080px) {
.box {
   position: absolute;
   width: 100%;
   justify-items: center;
   top:0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
   display: grid; 
   background-image: url(../images/Homepage/bgImageDesktop.jpg);
   background-size:cover;
   background-position-x: center;
   background-repeat: no-repeat;
}


.gif{
   width: 60%;
   height: 50%;
   position: absolute;
   bottom: -10%;
   z-index: 1;
   justify-content: center;
   }

.fade {
   animation: 3s fadeIn;
   animation-fill-mode: forwards;
   visibility: hidden;
   animation-timing-function: step-end;
   justify-items: center;
}
@keyframes fadeIn {
   0% {
     opacity: 0;
   }
   100% {
     visibility: visible;
     opacity: 1;
   }
 }

.item1,.item2,.item3,.item5,.item6,.item7,.item8,.item9 {
    width: 16%;
    height: 14%;
    position: absolute;
 }

.item1{
   left: 5%;
   top: 35%;
   animation: item1 1.5s 1  ;
   animation-delay: 3s;
   animation-timing-function: linear;
   }
@keyframes item1 {
       0% {left:45%; top:75%;}
       30% {left:45%; top:60%;}
       70% {left:30%; top:50%;}
       100%{left:5%; top:35%;}
   }

.item2{
   left:  20%;
   top: 30%;
   animation: item2 2.5s 1;
   animation-delay: 3s;
   animation-timing-function: linear; 
   }    
@keyframes item2 {
   0% {left:45%; top:75%; }
   30% {left:45%; top:60%;}
   70% {left:30%; top:45%;}
   100%{left:20%; top:30%;}
   }

.item3{
   left:  35%;
   top: 28%;
   animation: item3 2s 1;
   animation-delay: 3s;
   animation-timing-function: linear;   
   }   
@keyframes item3 {
   0%   {left:45%; top:75%;}
   30%  {left:45%; top:60%;}
   70%   {left:40%; top:40%;}
   100% {left: 35%; top:28%;}
   } 

.logo{
   width: 35%;
   height: 20%;
   top: 4%;
   left:32%;
   position: absolute;
   animation: logo 3s 1;
   animation-delay: 3s;
   animation-timing-function: linear;  
   }
   
@keyframes logo {
   0%   {left:32%; top:75%;}
   30%  {left:32%; top:50%;}
   70%  {left:32%; top:25%;}
   100% {left:32%; top:4%;}
} 

.item5{
   right: 35%;
   top: 28%;
   animation: item5 2.5s 1;
   animation-delay: 3s;
   animation-timing-function: linear;   
   }
   
@keyframes item5 {
   0%   {right:45%; top:75%;}
   30%   {right:45%; top:60%;}
   70%   {right:40%; top:40%;}
   100% {right:35%; top:28%;}
} 
.item6{
   right: 18%;
   top: 30%;
   animation: item6 1.5s 1;
   animation-delay: 3s;
   animation-timing-function: linear;   
   }
   
@keyframes item6 {
   0%   {right:45%; top:75%;}
   30%   {right:45%; top:60%;}
   70%   {right:30%; top:40%;}
   100% {right:18%; top:30%;}
} 
.item7{
   right: 5%;
   top: 35%;
   animation: item7 1.5s 1  ;
   animation-delay: 3s;
   animation-timing-function: linear;
   
   }
@keyframes item7 {
       0%   {right:45%; top:75%;}
       30%   {right:45%; top:60%;}
       70%   {right:25%; top:50%;}
       100% {right:5%; top:35%;}
} 
.item8{
   right: 42%;
   top: 50%;
   animation: item8 2.5s 1  ;
   animation-delay: 3s;
   animation-timing-function: linear;
   
   }
@keyframes item8 {
       0%   {right:42%; top:75%;}
       30%  {right:42%; top:65%;}
       70%  {right:42%; top:55%;}
       100% {right:42%; top:50%;}
}

.item9{
   right: 42%;
   top: 75%;
   }

}

                        /* For Mobile */

@media screen and (max-width: 600px) {
   .box {
       position: absolute;
       width: 100%;
       justify-items: center;
       top:0;
       bottom: 0;
       left: 0;
       right: 0;
       margin: auto;
       display: grid; 
       background-image: url(../images/Homepage/bgImageMobile.jpg);
       background-size:cover;
       background-position-x: center;
       background-repeat: no-repeat;  
   }

   .gif{
       width: 70%;
       height: 40%;
       position: absolute;
       bottom: -8%;
       z-index: 1;
       justify-content: center;
       }
   
   .fade {
       animation: 3s fadeIn;
       animation-fill-mode: forwards;
       visibility: hidden;
       animation-timing-function: step-end;
   }
   @keyframes fadeIn {
       0% {
         opacity: 0;
       }
       100% {
         visibility: visible;
         opacity: 1;
       }
     }
   
.item1,.item2,.item3,.item5,.item6,.item7,.item8,.item9 {
    width: 20%;
    height: 12%;
    position: absolute;
 }
   .item1{
       left: 10%;
       top: 25%;
       animation: item1 2.5s 1  ;
       animation-delay: 3s;
       animation-timing-function: linear;
       }
   @keyframes item1 {
           0% {left:40%; top:80%; }
           30% {left:40%; top:65%;}
           70% {left:40%; top:35%;}
           100%{left: 10%; top:25%;}
         }
   
    .item2{
       left: 10%;
       top: 38%;
       animation: item2 1.5s 1;
       animation-delay: 3s;
       animation-timing-function: ease-in; 
       }  
   @keyframes item2 {
       0% {left:40%; top:80%; }
       50% {left:40%; top:65%;}
       100%{left: 10%; top:38%;}
   }

   .item3{
       left: 10%;
       top: 51%;
       animation: item3 2s 1;
       animation-delay: 3s;
       animation-timing-function: ease-in; 
       }  
   @keyframes item3 {
       0% {left: 40%; top:80%; }
       50% {left: 40%; top:65%;}
       100% {left: 10%; top:51%;} 
   }
     
   .logo{
       width: 50%;
       height: 20%;
       left: 26%;
       top: 3%;
       position: absolute;
       animation: logo 1.5s 1;
       animation-delay: 3s;
       animation-timing-function: linear;   
       }  
   @keyframes logo {
       0% {left:26%; top:80%; }
       50% {left:26%; top:30%;}
       100% {left:26%; top:3%;}   
   } 
   
   .item5{
       right: 10%;
       top: 25%;
       animation: item5 2s 1;
       animation-delay: 3s;
       animation-timing-function: ease-in;   
       }
   @keyframes item5 {
       0% {right:40%; top:80%; }
       50% {right:40%; top:65%;}
       100% {right:10%; top:25%;}
   } 

   .item6{
       right: 9%;
       top: 38%;
       animation: item6 2.5s 1;
       animation-delay: 3s;
       animation-timing-function: ease-in;   
       }   
   @keyframes item6 {
       0% {right:40%; top:80%; }
       50% {right:40%; top:65%;}
       100% {right:9%; top:38%;}  
   } 

   .item7{
       right: 10%;
       top: 51%;
       animation: item7 2s 1;
       animation-delay: 3s;
       animation-timing-function: ease-in;   
       }
   @keyframes item7 {
       0% {right: 40%; top:80%; }
       50% {right: 40%; top:65%;}
       100% {right: 10%; top:51%;}
   } 

   .item8{
      display: none;
   }
  
   .item9{
      right: 40%;
      top: 38%;
      animation: item9 2.5s 1;
      animation-delay: 3s;
      animation-timing-function: ease-in;   
   }
   @keyframes item9 {
      0% {right: 40%; top:80%; }
      50% {right: 40%; top:60%;}
      100% {right: 40%; top:38%;}
   } 



}



/*=======================Rest Website===================*/


/* ================= For Mobile  ================== */



/* --------------- Welcome section ------------------- */

.wrapper{
   margin-top: 92vh;
   width: 100%;
}

.welcome{
   display: block;
   background-color:#F8F158;
   padding-top:5%;
   padding-bottom: 1%;
   margin: auto;
   text-align: center;
   font-family: nunito;  
   line-height: 1.6rem;
   max-width: 100vw;
   color: black;
}
 
.welcome h4 {
   font-size: 1.4rem; 
   text-align: center; 
   
}

.welcome h6 {
   font-weight: 400;
   font-size: 1rem;
   color: #5D5D5D;
   margin-top: -10px;
} 


/* --------------- Services section  ------------------- */

.services {
   display: block;
   padding: 10px 20px;
   padding-bottom: 10%;
   margin: 10px -10px;
  }
  
  .services-left{
      font-family: nunito;
      padding-top: 10px;
      align-content: center;
      line-height: 1.6rem;
  }
  
  #service-q{
      font-weight: 500;
      font-size: 2rem;
      height: 50px;
      text-align: center;
  }
  
  #service-a{
      font-weight: 600;
      font-size: 2rem;
      text-align: center;
      margin-top:-35px;
  }
  
  .services-left p{
      font-weight: 300;
      font-size: 1.2rem;
      color: #5D5D5D;
      padding-left: 10px;
      padding-right: 10px ;
      line-height: 35px;
      text-align: center;
      margin-top: -15px;
  }
  
  .services-right{
      display: block;
      width: 100%;
      padding-bottom: 20px;
      margin-top: 20px;
      margin-bottom: 20px;
  }
  
  .services-right div {
      background-color: rgba(114, 114, 114, 0.356);
      border-radius: 10px;
      box-shadow: 0px 0px 10px #afaeae9a;
      margin-top: 20px;
      margin-bottom: 20px;
      padding: 100px;
      text-align: center;
  } 

.btn{
   margin: auto;
   padding-left: 25%;
   padding-right: 25%;
}
  .btn-service{
   width: 100%;
   padding: 10px 20px;
   background-color: red;
   color:white;
   border: 2px solid black;
   border-radius: 10px;
   font-size: 1rem;
   box-shadow: 1px 1px 10px #555454b9;
}
   
/* --------------- About section  ------------------- */

.about {
   background-image: url(../images/Homepage/about-tab.jpg);
   background-size: 100% 100%;
   padding: 10% 10%;
   margin: 10px -10px;
   text-align: center;
   font-family: nunito;
   line-height: 1.5rem;
   height: 100vh;
  
}

#more {display: none;}

.about button{
   padding: 10px;
   padding-left: 20px;
   padding-right: 20px;
   background-color: red;
   margin-top: 10px;
   color:white;
   border: 2px solid black;
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 300;
   box-shadow: 1px 1px 10px #555454b9;
}

.about h1{
   font-weight:700;
   font-size: 2.2rem;
}

.about p{
   text-align: left;
   font-size: 1rem;
}

/* --------------- Social section  ------------------- */

.social-media{
   font-family: nunito;
   text-align: center;
   background-color:#E2E2E2;
   padding: 20px;
   margin: -10px;
}

.social-media h1 {
   font-weight:bold;
   font-size: 2rem;
   margin-top: 0px;
}

.social-media h4{
   font-weight: 300;
   font-size: 1.1rem;
   color: #5D5D5D;
   margin-top: -10px;
}

.social-media img {
   height: 50px;
   width: 50px;
   padding: 5px;
} 

/* --------------- Diet section  ------------------- */

.diet{
   display: block;
   font-family: nunito;
   text-align: center;
   margin: auto;
   margin-top: 50px;
   line-height: 30px;
   padding-left: 10px;
   padding-right: 10px;

}

.slider{
   height: 300px;
   width: 100%;
   border-radius: 10px;
   background-color: rgba(65, 64, 64, 0.78);
   box-shadow: 0px 0px 10px #afaeae9a;
   margin: auto;
  
}

.diet h1{
   font-size: 2rem;
   margin-top: 40px;
}

.diet p{

   margin-top: -10px;
   padding: 20px;
   font-weight: 300;
   font-size: 1rem;
   text-align: center;

} 

/* --------------- Testimonials section ------------------- */

.testimonials{
   font-family: nunito;
   margin-left: -10px;
   margin-right: -10px;
   padding: 50px 50px;
   padding-bottom: 100px;
   background-image: url(../images/Homepage/testi-tab.jpg);
   background-size: 100% 100%;
   background-color:#f8f058d5;
   line-height: 1.2rem;
}

#more-cards {display: none;}

.testimonials h1 {
   font-weight:700;
   font-size: 2.2rem;
   text-align: center; 
}

.testimonials h4 {
   font-weight: 400;
   font-size: 1.1rem;
   color: #5D5D5D;
   text-align: center;
}

.cards{
   display: block;
   padding: 40px 0px;
   margin: auto;
}

#card{
   border: 2px solid black;
   padding-left: 15px;
   padding-right: 15px;
   border-radius: 10px;
   background-color:whitesmoke;

}

#card p{
   font-weight: 200;
   font-size: 1rem;
   line-height: 1.6rem;
   letter-spacing: 0.05rem;
}

#card h6{
   font-weight: 600;
   font-size: 1.1rem;
   text-align: center;
} 


/* --------------- Contact section  ------------------- */

.contact{
   background-image: url(../images/Homepage/contact-tab1.jpg);
   background-size:100% 100%;
   text-align: center;
   padding: 150px 50px;
   font-family: nunito;
   
}

.contact h1{
   font-weight:700;
   font-size: 2rem;
   text-align: center; 
}

.contact h4{
   font-weight: 400;
   font-size: 1.1rem;
   color: #5D5D5D;
   text-align: center;
   margin: -10px;
   padding-bottom: 20px;
}

.contact-input{
   display: grid;
   width: 100%;
   text-align: left;
   padding: 10px;
   row-gap: 10px;
   max-width: 400px;
   margin-top: 30px;
   margin: auto;
}

.input{
   padding: 10px;
   
}

.contact button{
   margin-top: 10px;
   padding: 10px;
   padding-left: 25px;
   padding-right: 25px;
   text-align: center;
   background-color: red;
   color:white;
   border: 2px solid black;
   border-radius: 10px;
   font-size: 1rem;
   box-shadow: 1px 1px 10px #555454b9;
} 



/* ================= For Tab  ================== */

@media screen and (min-width: 768px) {

   /* --------------- Welcome section ------------------- */

.welcome{
   padding: 3%;  
   line-height: 0.8rem;
   height: 15vh;
   max-width: 95vw;
}

.welcome h4 {
   font-weight: 600;
   font-size: 1.8rem; 
   color: black; 
}

.welcome h6 {
   font-weight: 400;
   font-size: 1.2rem;
   color: #5D5D5D;
} 


/* --------------- Services section  ------------------- */

.services {
   display: grid;
   grid-template-columns: 40% 60%;
   padding: 0px 30px;
   max-width: 100vw;
   margin: auto;
   
   }
   
   .services-left{
      margin-top: 100px;
      text-align: center;
      line-height: 5px;
      padding-right: 10px;
      padding-left: 10px;
   }
   
   #service-a{
      font-size: 1.8rem;
      font-weight: 700;
   }
   
   #service-q{
      font-weight: 600;
      font-size: 1.8rem;
   }
   
   .services-right{
      display: grid;
      grid-template-columns: 50% 50%;
      column-gap: 10px;
      text-align: center;
      padding-left: 10px;
      padding-right: 10px;
   }
   
   .services-left p{
      font-weight: 300;
      font-size: 1.1rem;
      color: #5D5D5D;
      padding-left: 10px;
      padding-right: 10px ;
      line-height: 2rem;
      text-align: center;
      margin-top: -10px;
   }
   
   .btn-service{
      padding: 10px 20px;
      background-color: red;
      color:white;
      border: 2px solid black;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 300;
      box-shadow: 1px 1px 10px #555454b9;
   } 
   
   .btn{
      margin: auto;
      margin-top: -200px;
      padding-left: 20%;
      padding-right: 20%;
   }
   

/* --------------- About section  ------------------- */

.about {
   background-image: url(../images/Homepage/about-tab.jpg);
   background-size: 100% 100%;
   margin-left: -10px;
   margin-right: -10px;
   padding-top: 20%;
   padding-bottom: 0%;
   align-items: center;
   line-height: 2.4rem;
   
}

.about button{
   margin-top: 20px;
}

#more {display: block;}

.about h1{
   font-weight:600;
   font-size: 1.8rem;
}

.about p{
   font-size: 1.1rem;
   font-weight:300;
   max-width: 800px;
   text-align: justify;
   text-justify: inter-word;
   overflow: hidden;
   margin: auto;
} 

/* --------------- Diet section  ------------------- */

.diet{
   display: block;
   font-family: nunito;
   text-align: center;
   margin: auto;
   margin-top: 50px;
   line-height: 30px;
   padding-left: 10px;
   padding-right: 10px;
   width: 90%;
}

.slider{
   height: 300px;
   width: 70%;
   border-radius: 10px;
   background-color: rgba(65, 64, 64, 0.78);
   box-shadow: 0px 0px 10px #afaeae9a;
   margin: auto;
  
}

.diet h1{
   font-size: 2rem;
   margin-top: 40px;
}

.diet p{

   margin-top: -10px;
   padding: 20px;
   font-weight: 300;
   font-size: 1rem;
   text-align: justify;
   text-justify: inter-word;

} 

/* --------------- Testimonials section ------------------- */

.testimonials{
   padding: 80px 80px;
   padding-bottom: 150px;
   background-image: url(../images/Homepage/testi-tab.jpg);
   background-size: 100% 100%;
   background-color:#f8f058d5;
   line-height: 1.2rem;
}

#more-cards {display: block;}

.testimonials h1 {
   font-weight:600;
   font-size: 1.8rem;
   text-align: center; 
}

.testimonials h4 {
   font-weight: 400;
   font-size: 1.2rem;
   color: #5D5D5D;
   text-align: center;
}

.cards{
   display: grid;
   grid-template-columns: 33% 33% 33%;
   column-gap: 15px;
   padding: 10px 5px;
   justify-content: center;
   margin: auto;
}

#card{
   border: 2px solid black;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 20px;
   border-radius: 10px;
   background-color:whitesmoke;

}

#card p{
   font-weight: 300;
   font-size: 0.9rem;
   text-align: center;
   line-height: 1.8rem;
   letter-spacing: 0.05rem;
}

#card h6{
   font-weight: 400;
   font-size: 1rem;
   margin-top: 0px;
   text-align: center;
} 


}


/* ================= For Desktop  ================== */

@media screen and (min-width: 1030px) {

   .wrapper{
      margin-top: 100vh;
      width: 100%;
   }


/* --------------- Welcome section ------------------- */

.welcome{
   padding: 3%;  
   line-height: 0.8rem;
   height: 15vh;
   max-width: 94.5vw;
}

.welcome h4 {
   font-weight: 600;
   font-size: 1.8rem; 
   color: black; 
}

.welcome h6 {
   font-weight: 400;
   font-size: 1.2rem;
   color: #5D5D5D;
} 

/* --------------- Services section  ------------------- */

.services {
display: grid;
grid-template-columns: 45% 55%;
padding: 0px 100px;
max-width: 1400px;
margin: auto;

}

.services-left{
   margin-top: 100px;
   text-align: center;
   line-height: 5px;
   padding-right: 50px;
}

#service-a{
   font-size: 1.8rem;
   font-weight: 700;
}

#service-q{
   font-weight: 600;
   font-size: 1.8rem;
}

.services-right{
   display: grid;
   grid-template-columns: 50% 50%;
   column-gap: 5%;
   text-align: center;
   padding-left: 10px;
   padding-right: 10px;
}

.services-left p{
   font-weight: 300;
   font-size: 1.1rem;
   color: #5D5D5D;
   padding-left: 10px;
   padding-right: 10px ;
   line-height: 2rem;
   text-align: center;
   margin-top: -10px;
}

.btn-service{
   padding: 10px 20px;
   background-color: red;
   color:white;
   border: 2px solid black;
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 300;
   box-shadow: 1px 1px 10px #555454b9;
} 

.btn{
   margin: auto;
   margin-top: -200px;
   padding-left: 20%;
   padding-right: 30%;
}

/* --------------- About section  ------------------- */

.about {
   background-image: url(../images/Homepage/bg.jpg);
   background-size: 100% 100%;
   margin-left: -10px;
   margin-right: -10px;
   padding: 80px;
   line-height: 2.4rem;
   
}

.about button{
   margin-top: 20px;
}

#more {display: block;}

.about h1{
   font-weight:600;
   font-size: 1.8rem;
}

.about p{
   font-size: 1.1rem;
   font-weight:300;
   max-width: 800px;
   text-align: justify;
   text-justify: inter-word;
   overflow: hidden;
   margin: auto;
} 


/* --------------- Social section  ------------------- */

.social-media{
   font-family: nunito;
   text-align: center;
   background-color:#E2E2E2;
   padding: 30px;
   margin-left: -10px;
   margin-right: -10px;
}

.social-media h1 {
   font-weight:600;
   font-size: 1.8rem;
}

.social-media h4{
   font-weight: 400;
   font-size: 1.2rem;
   color: #5D5D5D;
   padding-left: 20px;
   padding-right: 20px;
}

.social-media img {
   height: 80px;
   width: 80px;
   padding:5px 25px;
} 


/* --------------- Diet section  ------------------- */

.diet{
   display: block;
   padding: 100px 50px;
   font-family: nunito;
   text-align: center;
   max-width: 1400px;
   margin: auto;
   line-height: 2.2rem;

}

.slider{
   height: 300px;
   width: 500px;
   border-radius: 10px;
   background-color: rgba(209, 209, 209, 0.356);
   box-shadow: 0px 0px 10px #afaeae9a;
   margin: auto;
   float: left;
}


.diet-right{
   margin-top: -45px;
}

.diet h1{
   font-weight:600;
   font-size: 1.8rem;
}

.diet p{
   margin: auto;
   margin-top: -15px;
   margin-left: 450px;
   padding-left: 100px;
   padding-right: 0px;
   font-weight: 300;
   font-size: 1.1rem;
   text-align: justify;
   text-justify: inter-word;

} 


/* --------------- Testimonials section ------------------- */

.testimonials{
   padding: 80px 80px;
   padding-bottom: 100px;
   background-image: url(../images/Homepage/testibg.jpg);
   background-size: 100% 100%;
   background-color:#f8f058d5;
   line-height: 1.2rem;
}

#more-cards {display: block;}

.testimonials h1 {
   font-weight:600;
   font-size: 1.8rem;
   text-align: center; 
}

.testimonials h4 {
   font-weight: 400;
   font-size: 1.2rem;
   color: #5D5D5D;
   text-align: center;
}

.cards{
   display: grid;
   grid-template-columns: 33% 33% 33%;
   column-gap: 20px;
   padding: 40px 30px;
   justify-content: center;
   max-width: 1200px;
   margin: auto;
}

#card{
   border: 2px solid black;
   padding-left: 30px;
   padding-right: 30px;
   padding-top: 20px;
   border-radius: 10px;
   background-color:whitesmoke;

}

#card p{
   font-weight: 300;
   font-size: 1rem;
   text-align: center;
   line-height: 2rem;
   letter-spacing: 0.05rem;
}

#card h6{
   font-weight: 400;
   font-size: 1.2rem;
   margin-top: 0px;
   text-align: center;
} 


/* --------------- Contact section  ------------------- */

.contact{
   background-image: url(../images/Homepage/Contact.jpg);
   background-size:100% 100%;
   text-align: center;
   padding: 100px;
   justify-content: center;
   align-content: center;
   padding-left: 450px;
   padding-right: 450px;
   font-family: nunito;
   
}

.contact h1{
   font-weight:600;
   font-size: 1.8rem;
   text-align: center; 
}

.contact h4{
   font-weight: 400;
   font-size: 1.2rem;
   color: #5D5D5D;
   text-align: center;
   margin: -10px;
   padding-bottom: 20px;
}

.contact-input{
   display: grid;
   width: 100%;
   text-align: left;
   padding: 10px;
   row-gap: 10px;
   max-width: 400px;
   margin: auto;
}

.input{
   padding: 10px;
   
}

.contact button{
   margin-top: 10px;
   padding: 10px;
   padding-left: 25px;
   padding-right: 25px;
   text-align: center;
   background-color: red;
   color:white;
   border: 2px solid black;
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 300;
   box-shadow: 1px 1px 10px #555454b9;
} 

}