*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Exo', sans-serif;
    text-decoration: none;
}

body{
  overflow-x: hidden;
}

/* header page started */

.to-top{
  position: fixed;
  right: 1%;
  bottom: 5%;
  background-color: #559593;
  width: 40px;
  height: 35px;
  border-radius: 4px;
  display: none;
  pointer-events: none;
  transition: all 0.1 ease-in-out;
}

@media only screen and (max-width:1200px){
  .to-top{
    width: 35px;
    height: 30px;
  }

  
}

.to-top.active20{
  pointer-events: auto;
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
}

.to-top i{
  font-size: 20px;
  color: #ffffff;
}

@media only screen and (max-width:1200px){
  .to-top i{
    font-size: 15px;
   
  }
}


header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #55959300;
  z-index: 100;
  padding: 20px 20px;
  transition: all 1s ease-in;

}

@media only screen and (max-width:1200px){
  header{
    padding: 16px 16px;
  }
}

header.active2{
  background-color: #559593;
  scroll-behavior: smooth;
}

.navbar{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo{
  width: 15%;
  display: flex;
  justify-content: center;
}

@media only screen and (max-width:1200px){
  .logo{
    width: 33%;
  }
}

.logo a{
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
 
}

@media only screen and (max-width:1200px){
  .logo a{
    font-size: 20px;
  }
}

.nav-menu{
  list-style: none;
  width: 60%;
  display: flex;
  justify-content: space-around;

}

@media only screen and (max-width: 1200px){
  .nav-menu{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80%;
    height: 100vh;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 100;
    background-color: #559593;
    transition: all 0.2s ease-in-out;
  }

  .nav-menu li{
    margin-top: 30px;
    padding: 10px;
  }
}

@media only screen and (max-width: 1200px){
  .nav-menu.active3{
    position: fixed;
    right: 0;
  }
  
}

@media only screen and (max-width: 1200px){
  .nav-menu.active4{
    position: fixed;
    right: -100%;
  }
}



nav ul li a{
  display: inline-block;
  color: #FFFFFF;
 
  font-weight: bold;
  font-size: 15px;
  
}

.nav-menu li{
  position: relative;
  top: 0;
  left: 0;
  list-style: none;

}

.nav-menu li i{
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  margin-left: 5px;
}


.about-list{
  display: none;
}

.about-list li{
  padding-top:30px ;
}

@media only screen and (max-width: 1200px){
  .about-list li{
    padding-top:0px ;
  }
}


.nav-menu li:hover .about-list{
  width: 200px;
  height: 180px;
  position: absolute;
  top: 100%;
  left: -55%;
  text-align: center;
  background-color: #559593;
  display: block;
  border: 0.5px solid white;
  z-index: 100;
}


@media only screen and (max-width: 1200px){
  .nav-menu li:hover .about-list{
    left: -35%;
    height: 170px;
  }
}




@media only screen and (max-width: 1200px){
  .nav-menu li:hover .about-list{
    right: 1%;
  }
}

/* nav ul li a:hover{
  text-decoration: underline;
 text-underline-offset: 5px;
 
} */


#btn{
  color: #FFFFFF;
  font-size: 25px;
  display: none;
  position: fixed;
  cursor: pointer;
}

@media only screen and (max-width: 1200px){
  #btn{
    display: block;
    position: relative;
    right: 0;
  }
}

#cros{
  color: #FFFFFF;
  font-size: 25px;
  display: none;
  cursor: pointer;
}

@media  only screen and  (max-width: 1200px){
  #cros{
    display: block;
    position: absolute;
    right: 5%;
    top: 3%;
  }
}

section{
  padding-top: 80px;
}

@media only screen and (max-width:1200px){
  section{
    padding-top: 80px;
  }
}

/* header page end */


/* home page started */

.home-page{
    width: 100%;
    height: 100vh;
    background-image: url("Images/wholemills-img1.jpeg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-attachment: fixed;
    align-items: center;
}

.home-page-text{
    margin-top: 130px; 
    width: 80%;
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
   
}

.home-page .home-page-text h1{
    color: #FFFFFF;
    font-size: 50px;
}

@media only screen and (max-width:1200px){
  .home-page .home-page-text h1{
    font-size: 20px;
  }
}

.home-page .home-page-text p{
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
}

@media only screen and (max-width:1200px){
  .home-page .home-page-text p{
    font-size: 15px;
    text-align: center;
  }
}

.home-page .home-page-text button{
    padding: 10px 15px;
    background-color: #559593;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    border: none;
    outline: none;
    list-style: none;
    border-radius: 5px;
    cursor: pointer;
}

@media only screen and (max-width:1200px){
  .home-page .home-page-text button{
    padding: 8px 10px;
  }

  .home-page .home-page-text button a{
    font-size: 12px;
  }
}

.home-page .home-page-text button a{
  list-style: none;
  text-decoration: none;
  color: #FFFFFF;
}

/* home page end */


/* service page start */

.service-text{
  text-align: center;
}

.service-text h1{
  color: #808080;
  margin-bottom: 10px;
  font-weight: 900;
}

@media only screen and (max-width:1200px){
  .service-text h1{
    font-size: 20px;
  }

  .service-text p{
    font-size: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

.service-text p{
  color: #808080;
  font-weight: 700;
}

.cards{
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
  justify-content: space-around;
}

.cards .card{
  width: calc(100% / 3 - 100px);
 
  text-align: center;
  padding: 40px 15px;
  list-style: none;
  height: 230px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  color: #717171;
  margin-bottom: 40px;
 
}

@media(max-width:1200px){
  .cards .card{
    width: calc(80% /2);
    height: 180px;
    margin-bottom: 30px;
    padding: 20px 7px;
  }
}

.cards .card i{
  font-size: 30px;
}

@media(max-width:1200px){
  .cards .card i{
    font-size: 23px;
  }
}

.cards .card h4{
  font-size: 18px;
}


@media(max-width:1200px){
  .cards .card h4{
    font-size: 15px;
  }
  .cards .card p{
    font-size: 13px;
  }
}

.cards .card p{
  line-height: 24px;
}


/* service page end */


/* about page started */
  .about{
    width: 100%;
    background-image: url("Images/wholemills-img2.jpeg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .about-page-text{
    padding-top: 20px;
    text-align: center;
  }

  .about-page-text h1{
    color: #FFFFFF;
    font-weight: 900;
    margin-bottom: 10px;
  }

  @media only screen and (max-width:1200px){
    .about-page-text h1{
      font-size: 20px;
    }

    .about-page-text p{
      font-size: 14px;
      padding-left: 14px;
      padding-right: 14px;
    }
  }

  .about-page-text p{
    color: #FFFFFF;
    font-weight: 700;
  }

  .about-text{
    margin-top: 30px;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .about-text .about-text1{
    height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }

  .about-text .about-text1 h1{
    color: #FFFFFF;
    font-weight: bold;
  }

  @media only screen and (max-width:1200px){
    .about-text .about-text1 h1{
      font-size: 20px;
      text-align: center;
    }
  }

  .about-text .about-text1 p{
    color: #FFFFFF;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
  }

  @media only screen and (max-width:1200px){
    .about-text .about-text1 p{
      font-size: 15px;
    }
  }

  .about-text .about-text1 button{
    padding: 10px 10px;
    border: none;
    outline: none;
    background-color: #559593;
    border-radius: 5px;
  }

  @media only screen and (max-width:1200px){
    .about-text .about-text1 button{
      padding: 7px 7px;
    }

    .about-text .about-text1 button a{
      font-size: 10px;
      font-weight: bold;
    }
  }

  .about-text .about-text1 button a{
    color: #FFFFFF;
    font-weight: bold;
  }

/* about page ended */


/* mission page started */

.mission-page-text{
  text-align: center;
  color: #808080;
}

.mission-page-text h1{
     font-weight: 900;
     color: #808080;
     margin-bottom: 10px;
}
.mission-page-text p{
 font-weight: bold;
 padding-left: 14px;
    padding-right: 14px;
}

@media only screen and (max-width:1200px){
  .mission-page-text h1{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .mission-page-text p{
    font-size: 14px;
    color: #717171;
    font-weight: bold;
  }
}

.mission-cards{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 20px;
  height: 70vh;
}

@media only screen and (max-width:1200px){
  .mission-cards{
    flex-wrap: wrap;
    height: 240vh;
  }
}

.mission-card{
  border-radius: 5px;
  width: 320px;
  height: 380px;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background-color: #559593;
  padding: 20px;
}

@media only screen and (max-width:1200px){
  .mission-card{
    width: calc(70% / 1);
    height: 350px;
    padding: 10px;
  }
}

.mission-card img{
  width: 280px;
  height: 180px;
  object-fit: cover;
  border-radius: 5px;
}

@media only screen and (max-width:1200px){
  .mission-card img{
    width: 250px;
    height: 170px;
  }
}

.mission-card h3{
  color: #FFFFFF;
}

@media only screen and (max-width:1200px){
  .mission-card h3{
    font-size: 20px;
  }
}

.mission-card p{
  color: #FFFFFF;
}

@media only screen and (max-width:1200px){
  .mission-card p{
    font-size: 15px;
    margin: 5px;
    line-height: 20px;
  }
}

/* mission page ended */


/* our products page started */
.our-products{
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
  color: #808080;
}

.our-products h1{
  font-weight: 900;
  margin-bottom: 10px;
}

@media only screen and (max-width:1200px){
  .our-products h1{
    font-size: 20px;
    margin-bottom: 10px;
  }
}

.our-products p{
  font-weight: bold;
  text-align: center;
}

@media only screen and (max-width:1200px){
  .our-products p{
    font-size: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }
}

.gallery{
  width: 95%;
  /* border: 1px solid black;   */
  text-align: start;
  margin-top: 40px;
}

.gallery h1{
  margin-bottom: 20px;
}

@media only screen and (max-width:1200px){
  .gallery h1{
    font-size: 20px;
  }
}

@media only screen and (max-width:1200px){
  .gallery{
    width: 90%;
  }
}

.row {
 width: 95%;
 height: 120vh;
 display: grid;
 grid-template-columns: auto auto auto auto;
 justify-content: space-around;
 align-items: center;
 
}

@media only screen and (max-width:1200px){
  .row{
    width: 90%;
    height: 100vh;
    grid-template-columns: auto auto ;
  }
}

.column {
  width: 280px;
  height: 280px;
  /* border: 1px solid black;  */
  border-radius: 5px;
}

@media only screen and (max-width:1200px){
  .column{
    width: 125px;
    height: 100px;
  }
}

.column img {
  width: 279px;
  height: 279px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 2px 3px hsl(0, 0%, 53%);
}

@media only screen and (max-width:1200px){
  .column img{
    width: 124px;
    height: 99px;
  }
}

/* our products page ended */



 .why{
    width: 100%;
    height: 45vh;
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
 }

 @media only screen and (max-width:1200px){
  .why{
    height: 105vh;
  }
 }

 .why0{
  width: 90%;
  height: 45vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
 }

 @media only screen and (max-width:1200px){
  .why0{
    width: 80%;
    flex-wrap: wrap;
    height: 100vh;
  }
 }

 .why1{
    width: 220px;
    height: 200px;
    border-radius: 1px;
    box-shadow: 2px 3px #adadad;
    background-color: #559593;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
 }

 @media only screen and (max-width:1200px){
  .why1{
    width: 180px;
    height: 150px;
  }
 }

 .why1 i{
    color: #ffffff;
    font-size: 40px;
    overflow: hidden;
 }

 @media only screen and (max-width:1200px){
  .why1 i{
    font-size: 30px;
  }
 }

 .why1 h3{
    color: #FFFFFF;
    font-size: 22px;
 }

 @media only screen and (max-width:1200px){
  .why1 h3{
    font-size: 17px;
  }
}

 .why1 p{
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
 }

 @media only screen and (max-width:1200px){
  .why1 p{
    font-size: 16px;
  }
 }



 /* automatic slide page started */

 .automatic{
    width: 100%;
    height: 55vh;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    /* justify-content: center; */
    overflow: hidden;
    /* border: 1px solid black; */
 }

 .automatic p{
  font-size: 16px;
  font-weight: bold;
}

@media only screen and (max-width:1200px){
  .automatic{
    height: 45vh;
  }
 }

 .automatic h1{
    margin: 10px;
    color: #808080;
    font-weight: 900;
 }

 @media only screen and (max-width:1200px){
  .automatic h1{
    font-size: 20px;
  }

  .automatic p{
    font-size: 14px;
  }
 }

 .automatic p{
    color: #808080;
 }

  .slider{
    height: 40vh;
    /* border: 1px solid black;  */
    display: flex;
    align-items: flex-end;
    justify-content: center;
 }

 @media only screen and (max-width:1200px){
  .slider{
    height: 30vh;
  }
 }

 .slide-track{
    display: flex;
    width: calc(250px * 25);
    animation: scroll 40s linear infinite;
    border: 0.1px solid hsl(0, 20%, 88%);
    height: 30vh;
    align-items: center;
    /* border: 1px solid black;  */
 }

 @media only screen and (max-width:1200px){
  .slide-track{
    height: 25vh;
    border: 3px solid hsl(0, 20%, 88%);
  }
 }

@keyframes scroll {
    0%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(calc(-250px * 9));
    }
}

 .slide{
    width: 270px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
     
    margin: 80px;
    border-radius: 10px;
 }

 .slide img{
  width: 269px;
  height: 199px;
  object-fit: cover;
  border-radius: 10px;
 }

 @media only screen and (max-width:1200px){
  .slide{
    margin: 40px;
    width: 200px;
  }
}

 .slide h2{

    font-size: 40px;
    opacity: 40%;
 }

 @media only screen and (max-width:1200px){
  .slide h2{
    font-size: 20px;
  }
 }

 .slider::before,
 .slider::after {
    /* background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); */
    content: '';
    height: 20vh;
    position: relative;
    width: 15%;
    z-index: 2;
    /* border: 1px solid black; */
 }

 .slider::before{
    left: 0;
    top: 0;
 }

 .slider::after{
    right: 0;
    top: 0;
    transform: rotateZ(100deg);
 }

 /* automatic slide page ended */





 .quality{
    width: 100%;
    height: 83vh;
    background-color: #D9D9D9;
    display: flex;
    justify-content: center;
    margin-top: 34px;
    align-items: center;

    /* margin-bottom: 150px; */
 }

 @media only screen and (max-width:1200px){
  .quality{
    height: 66vh;
   
  }
 }

  .quality1{
    width: 50%;
    height: 83vh;
    /* border: 0.5px solid rgb(147, 144, 144);  */
    display: flex;
    background-color: #D9D9D9;
    align-items: flex-end;
  }

  @media only screen and (max-width:1200px){
    .quality1{
      height: 63vh;
    }
  }

  .quality1 > div{
    width: 100%;
    height: 400px;
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 30px;
  }

  @media only screen and (max-width:1200px){
    .quality1 > div{
      padding: 0;
    }
  }

  .quality1 > div > h1,button{
    margin: 20px;
  }

  .quality1 > div > h1{
    color: #559593;
    font-weight: bold;
  }

  @media only screen and (max-width:1200px){
    .quality1 > div > h1{
      font-size: 16px;
    }

    .quality1 > div > p{
      font-size: 13px;
    }
  }

  .quality1 > div > p{
    color: #808080;
    margin: 20px;
  }

  .quality1 > div > button{
    width: 150px;
    background-color: #559593;
    height: 44px;
    font-weight: bold;
    font-size: 15px;
    color: #FFFFFF;
    border: none;
    outline: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .quality1 > div > button a{
    color: #FFFFFF;
  }

  @media only screen and (max-width:1200px){
    .quality1 > div > button{
      width: 110px;
      height: 35px;
      font-size: 10px;
    }
  }

  .quality2{
    width: 50%;
    height: 83vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @media only screen and (max-width:1200px){
  .quality2{
    height: 66vh;

  }
}

 .slideshow-container {
    max-width:100%;
    position: relative;
    /* margin: auto; */
   /* border: 1px solid black;  */
  }

  .slideshow-container a{
    font-size: 30px;
  }

  .mySlides img{
    height: 83vh;
    display: flex;
    object-fit: cover;
    border: 1px solid #808080;
  }

  @media only screen and (max-width:1200px){
    .mySlides img{
      height: 66vh;
    }
  }

  /* Next & previous buttons */
  .prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }

  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  /* On hover, add a black background color with a little bit see-through */


  /* Caption text */
  .text {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
  }

  /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }

  /* The dots/bullets/indicators */
  .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    /* border: 1px solid black; */
  }

  .active0, .dot:hover {
    background-color: #717171;
  }

  /* Fading animation */
  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
  }

  /* On smaller screens, decrease text size */
  @media only screen and (max-width: 300px) {
    .prev, .next,.text {font-size: 11px}
  }


  .our-team{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

  }

  .our-team-text{
    text-align: center;
  }

  .our-team-text h1{
    color: #808080;
    font-weight: 900;
    margin-bottom: 10px;
  }

  @media(max-width:610px){
    .our-team-text h1{
      font-size: 20px;
    }
  }

  .our-team-text h5{
    color: #808080;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
  }

  @media(max-width:610px){
    .our-team-text h5{
      font-size: 14px;
      padding-left: 14px;
    padding-right: 14px;
    }
  }
 
  .our-team0{
    margin-top: 50px;
    width: 100%;
  
    height: 50vh;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
  }

  @media only screen and (max-width: 1200px){
    .our-team0{
      height: 150vh;
      flex-direction: column;
      align-items: center;
    }
  }

  .our-team1{
    width: 300px;
    height: 330px;
    /* border: 1px solid black;  */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  @media only screen and (max-width: 1200px){
    .our-team1 h3{
      font-size: 16px;
    }

    .our-team1 p{
      font-size: 13px;
    }
  }

  .our-team1 p{
    color: #808080;
  }

  .our-team2{
    width: 200px;
    height: 200px;
    border: 1px solid #808080;
    border-radius: 50%;
    box-shadow: 1px 1px 2px 2px hsl(0, 0%, 53%);
  }

  .our-team2 img{
    width: 199px;
    height: 199px;
    border-radius: 50%;
    object-fit: cover;
  }

  

  .available{
    width: 100%;
    display: flex;
    flex-direction: column;
  
  }


  .available-text{
    text-align: center;
    color: #717171;
  }

  .available-text h1{
    margin-bottom: 10px;
    font-weight: 900;
  }

  .available-text h5{
    font-weight: bold;
    font-size: 16px;
  }
  @media only screen and (max-width: 1200px){
    .available-text h5{
      font-size: 14px;
      padding-left: 14px;
    padding-right: 14px;
    }
  }

  .available-at{
    width: 100%;
    height: 60vh;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    /* border: 4px solid rgb(98, 255, 0);     */
  }

  @media only screen and (max-width:1200px){
    .available-at{
      height: 115vh;
      justify-content: flex-start;
      margin-top: 70px;
    }
  }

  @media only screen and (max-width:1200px){
    .available-at{
      height: 90vh;
      justify-content: flex-start;
      margin-top: 70px;
    }
  }


  .available-at1{
    width: 90%;
    height: 67vh;
    background-color: #559593;
    border-radius: 10px;
    display: grid;
    grid-template-columns: 140px 140px 140px 140px;
    align-items: center;
    justify-content: space-around;
    /* border: 2px solid red; */
  }

  @media only screen and (max-width:1200px){
    .available-at1{
      width: 90%;
      height: 800px;
      /* border: 1px solid black; */
      display: grid;
      column-gap: 10px;
      grid-template-columns: 100px 130px;
    }
  }

  .available-at2{
    width: 140px;
    height: 130px;
    border-radius: 5px;
    position: relative;
    /* border: 2px solid red; */
    box-shadow: 2px 3px #2c2c2c;

  }

  @media only screen and (max-width:1200px){
    .available-at2{
      width: 130px;
      height: 100px;
      box-shadow: 1px 1px hsl(37, 9%, 54%);
    }

  }

  .available-at2 img{
    width: 139px;
    height: 129px;
    object-fit: cover;
    border-radius: 5px;
  }

  @media only screen and (max-width:1200px){
  .available-at2 img{
    width: 129px;
    height: 99px;
  }
}

.available-at3{
  width: 140px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* border: 1px solid black;    */
  position: absolute;
  top: -30%;
  left: 0;
  opacity: 0;
  transition: 0.6s;
}

@media only screen and (max-width:1200px){
  .available-at3{
    width: 129px;
    height: 130px;
  }
}

.available-at3:hover{
  opacity: 1;
}

.available-at3 p{
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
}

@media only screen and (max-width:1200px){
  .available-at3 p{
    font-size: 10px;
  }
}

.available-at4{
  width: 140px;
  height: 30px;
  position: relative;
  border: 2px solid rgb(255, 255, 255);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width:1200px){
  .available-at4{
    width: 120px;
    height: 20px;
  }
}


.available-at4:before{
  content: '';
  width: 10px;
  height: 10px;
  position: absolute;
  top: 85%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  border-bottom: 2px solid white;
  border-right: 2px solid white;
}

/* @media(max-width:768px){
  .available-at4:before{
    top: 70%;
  }
} */


  .get-in-touch{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
 }

  .get-in-touch h1{
    font-weight: 900;
     color: #808080;
     margin-bottom: 10px;
  }

  @media only screen and (max-width:1200px){
    .get-in-touch h1{
      font-size: 20px;
    }

  }

  .get-in-touch h5{
    font-size: 16px;
    font-weight: bold;
    color: #808080;
 }

 @media only screen and (max-width:1200px){
  .get-in-touch h5{
    font-size: 14px;
    padding-left: 14px;
    padding-right: 14px;
  }
 }

  .get-in-touch-text{
    text-align: center;
  }

.get-in-touch0{
  display: flex;
  margin-top: 50px;
  width: 90%;
  height: 47vh;
  justify-content: space-around;
  
}

@media(max-width:610px){
  .get-in-touch0{
    height: 100vh;
    flex-direction: column;
    align-items: center;
  }
}

  .get-in-touch1{
    width: 40%;
    height: 45vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  
  }

  @media only screen and (max-width:1200px){
  .get-in-touch1{
    width: 100%;
    height:50vh ;
    align-items: center;
  }
}

  .get-in-touch2{
    width: 40%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #717171;
  }

  .get-in-touch2 h4{
    padding-top: 10px;
  }

  @media only screen and (max-width:1200px){
    .get-in-touch2{
      width: 100%;
      justify-content: center;
      /* border: 1px solid black;   */
      height: 50vh;
    }
  }

  .form input{
    width: 450px;
    height: 40px;
    /* border: 1px solid red; */
    margin-left: 13px;
    padding: 0 8px;
    outline: 0;
    margin-bottom: 10px;
  }

  @media only screen and (max-width:1200px){
    .form input{
      width: 300px;
    }
  }

  .form input::placeholder{
    padding: 10px;
  }

  .form button{
    width: 450px;
    height: 40px;
    background-color: #559593;
    color: #FFFFFF;
    outline: none;
    border: none;
    font-weight: bold;
    border-radius: 2px;
    margin: 14px;
    cursor: pointer;
  }

  @media only screen and (max-width:1200px){
    .form button{
      width: 300px;
    }
  }

  .form textarea{
    width: 450px;
    height: 90px;
    margin-left: 13px;
    padding: 10px 10px;
    outline: 0;
  }

  @media only screen and (max-width:1200px){
    .form textarea{
      width: 300px;
    }
  }

  .form textarea::placeholder{
    padding: 0 10px;

  }

  .get-in-touch2 h4{
    /* margin-left: 20px; */
    margin-bottom: 6px;
  }

  .get-in-touch2 p{
    margin-left: 25px;
    margin-bottom: 6px;
  }

 

  .footer{
    width: 100%;
    height: 140px; 
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer h3{
    margin: 20px;
    color: #808080;
  }

  .footer p{
    color: #808080;
    padding-left: 14px;
    padding-right: 14px;

  }

  @media only screen and (max-width:1200px){
    .footer p{
      text-align: center;
    }
  }

  .footer1{
    width: 100%;
    height: 40px;
    margin: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .footer1 i{
    margin: 8px;
    color: #808080;
  }


  .recipes-home{
    width: 100%;
    height: 100vh;
    background-image: url("Images/recipe-bg1.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    opacity: 0.9;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  @media only screen and (max-width:1200px){
    .recipes-home{
      flex-direction: column;
      height: 130vh;
      justify-content: center;
    }
  }

.recipes-home0{
    width: 58%;
    height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    color: #ffffff;
    padding-left: 30px;
    
    
  }

  @media only screen and (max-width:1200px){
    .recipes-home0{
      width: 100%;
      height: 60vh;
      padding: 10px;
      align-items: center;
      text-align: center;
    
    }
  }

.recipes-home0 h1{
  font-size: 40px;
  font-weight: bold;
  text-shadow: 1px 1px #000000;

}

@media only screen and (max-width:1200px){
  .recipes-home0 h1{
    font-size: 20px;
   
  }
}

.recipes-home0 p{
  font-size: 16px;
  font-weight: bold;
  line-height: 22px;
  text-shadow: 1px 1px #000000;
}

.recipes-home0 a{
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  background-color: #559593;
  border-radius: 4px;
  
}

.recipes-home0 a i{
  padding-left: 20px;
}

.recipes-home1{
  width: 37%;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
 
}

@media only screen and (max-width:1200px){
  .recipes-home1{
    width: 100%;
    height: 60vh;
  }
}

.recipes-home1 img{
  height:90vh;
  
  
}

@media only screen and (max-width:1200px){
  .recipes-home1 img{
    width: 80%;
    height: 60vh;
  }
}

.recipes-category{
  width: 100%;
  height: 85vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  color: #717171;
}

@media only screen and (max-width:1200px){
  .recipes-category{
    height: 110vh;
    
  }
}

.recipes-category h4{
  color: #559593;
  font-family: cursive;
}

.recipes-category h1{
  margin: 10px;
  font-weight: bold;
}


.recipes-category p{
 text-align: center;
 font-size: 14px;

}

@media only screen and (max-width:1200px){
  .recipes-category p{
    font-size: 12px;
  }
}

.recipes-category0{
  width: 90%;
  height: 80vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
 
}

@media only screen and (max-width:1200px){
  .recipes-category0{
    height: 80vh;
    display: grid;
    grid-template-columns: auto auto;
    align-items: flex-end;
    
  }
}

.recipes-category1{
  width: 270px;
  height: 350px;
  position: relative;
  
  border-radius: 10px;
  box-shadow: 2px 2px #bbb1b1;
  opacity: 0.9;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: column;
}

@media only screen and (max-width:1200px){
  .recipes-category1{
    width: 140px;
    height: 200px;
  }
}

.recipes-category1 img{
  width: 269px;
  height: 349px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  
}

@media only screen and (max-width:1200px){
  .recipes-category1 img{
    width: 140px;
    height: 200px;
  }
}

.recipes-category1 img:hover{
  transform: scale(1.1);
}

.recipes-category1 h1{
  position: absolute;
  bottom: 10%;
  color: #ffffff;
  text-shadow: 1px 2px #323030;
  font-size: 30px;
  font-weight: bold;
}

@media only screen and (max-width:1200px){
  .recipes-category1 h1{
    left: 0%;
    font-size: 20px;
  }
}

.recipes-category1 h1 a{
  color: #FFFFFF;
}

.attachment{
  width: 100%;
  height: 70vh;
  background-image: url("Images/bg-attachment.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.attachment0{
  width: 400px;
  height: 400px;
}

.attachment0 img{
  width: 399px;
  height: 399px;
  filter: drop-shadow(1px 1px 20px white);
}

.recipe-section{
  width: 100%;
  color: #717171;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 
}

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

}

.recipe-section h4{
  color: #559593;
  font-family: cursive;
}

.recipe-section h1{
   margin: 10px;
   font-weight: bold;
}


.recipe-section p{
  margin-bottom:50px ;
  font-weight: bold;
  text-align: center;
}

.recipe-section0{
  width: 100%;

  display: grid;
  grid-template-columns: auto auto auto auto;
  justify-content: center;
  align-items: center;
  gap: 50px;

}

@media only screen and (max-width:1200px){
  .recipe-section0{
    grid-template-columns: auto auto;
    justify-content: space-around;
    width: 90%;
    gap: 10px;
  }
}

.recipe-section1{
  width: 290px;
  height: 430px;
  border: 1px solid #e7e3e3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 1px 1px #adadad;

}

@media only screen and (max-width:1200px){
  .recipe-section1{
       width: 155px;
       height: 270px;
    
  }
}


.recipe-section1 img{
  width: 289px;
  height: 259px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

@media only screen and (max-width:1200px){
  .recipe-section1 img{
    width: 154px;
    height: 140px;
  }
}

.recipe-section2{
 
  width: 290px;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
 
}

@media only screen and (max-width:1200px){
  .recipe-section2{
    width: 155px;
    height: 120px;
  }
}

.recipe-section2 h3 a{
  color: #559593;
}

.recipe-section2 h3{
  text-align: center;
}



@media only screen and (max-width:1200px){
  .recipe-section2 h3{
    font-size: 14px;
  }
}

.recipe-section3{
   display: flex;
   margin: 10px;
   list-style: none;
  
}

@media only screen and (max-width:1200px){
  .recipe-section3{
    margin: 3px;
  }
}

.recipe-section3 li i{
  color: #e0a10e;
}

@media only screen and (max-width:1200px){
  .recipe-section3 li i{
    font-size: 14px;
  }
}


.recipe-section4 li{
  margin: 10px;
  list-style: none;
}

@media only screen and (max-width:1200px){
  .recipe-section4 li{
    margin: 5px;
    font-size: 14px;
  }
}


@media only screen and (max-width:1200px){
  .auto-slider{
    padding-top: 20px;
  }
}

.slide2{
  width: 150px;
  height: 198px;
  display: flex;
  justify-content: center;
  align-items: center;

}

@media only screen and (max-width:1200px){
  .slide2{
    width: 100px;
  }
}

.slide2 img{
  max-width: 120px;
  max-height: 100px;
  object-fit: cover;
  filter: drop-shadow(1px 1px 10px black);
}



.slide3{
  width: 150px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}


@media only screen and (max-width:1200px){
  .slide3{
    width: 200px;
  }
}


.slide4{
  width: 50px;
  display: flex;
  flex-direction: row;
}

.slide4 li{
  list-style: none;
}

.slide4 li p{
  color: #ffffff;
}

.slide4 i{
 margin-right: 10px;
 color: #ffffff;
}

.slide3 h4{
   font-size: 12px;
   color: #ffffff;
}

@media only screen and (max-width:1200px){
  .slide3 h4{
    font-size: 13px;
  }
}

.slide3 h5{
  color: #ffffff;
  font-size: 12px;
}

.slide3 a{
  padding: 7px 10px;
  background-color: #ffffff;
  color: #559593;
  font-size: 14px;
  cursor: pointer;

}


.email-section{
  width: 100%;
  background-color: #559593a4;
  height: 70vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  color: #ffffff;
}

@media only screen and (max-width:1200px){
  .email-section{
    height: 90vh;
  }
}

.email-section0{

  width: 50%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  margin: 50px;
  
}
@media only screen and (max-width:1200px){
  .email-section0{
    width: 90%;
    height: 350px;
  }
}

.email-section0 h1{
  font-size: 50px;
  margin: 15px;
  text-align: center;
  font-weight: bold;
  font-family: cursive;
}

.email-section0 p{
  font-size: 30px;
  font-weight: bold;
  font-family: cursive;
  text-align: center;
}

.email-section1{
  width: 30.1%;
  
  display: flex;
  justify-content: space-around;
  align-items: center;
}


@media only screen and (max-width:1200px){
  .email-section1{
    width: 90%;
  }
}

.email-section1 input{
  width: 400px;
  height: 50px;  
  padding: 10px;
  border: none;
  outline: none;
}

@media only screen and (max-width:1200px){
  .email-section1 input{
    height: 49px;
    margin-right: 3px;
  }
}

.email-section1 a{
    padding: 15px 18px;
    background-color: #FFFFFF;
   
}

.email-section1 i{
  color: #559593;
  font-size: 18px;
}

.recipes-footer{
  width: 100%;
  height: 20vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #717171;
}

.recipes-footer1{
  display: flex;
}

.recipes-footer1 li{
  margin-left: 15px;
  list-style: none;
}

@media only screen and (max-width:1200px){
  .recipes-footer1 li{
    margin-left: 5px;
    font-size: 10px;

  }
}

.recipes-footer2{
  display: flex;
}

.recipes-footer2 li{
  margin-left: 15px;
  list-style: none;
}

.recipes-footer2 li a{
  color: #717171;
}

.recipes-footer3{
  display: flex;
}

.recipes-footer3 li{
  margin-left: 5px;
  list-style: none;
}