/*
Theme Name: Kitchenheed
Theme URI: localhost/Kitchenheed
Description: Kitchenheed is a food recipe website.
Author: Ayaz Soomro
Author URI: https://www.fiverr.com/s/p44LGy
Version: 1.0
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #f4f4f4;
  width: 100%;
  height: auto;
}

/* Header Post */
.custom-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}
.custom-grid-item.col3 {
  grid-row: span 2;
}
.col3 .card {
  height: 100%;
}

.header-posts {
  width: 100%;
}
.posts {
  width: 80%;
}
.custom-grid-item.card {
  height: 340px;
  background-color: #0000000d;
}
.custom-grid-item .card {
  border-radius: 18px;
}
.card-img {
  opacity: 0.6;
  min-height: 340px;
  height: 100%;
  border-radius: 18px;
}
.card-img-overlay {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: fit-content;
  padding: 20px;
  margin-bottom: 5px;
}
.card-img-overlay a {
  width: fit-content;
  border: 1px solid #ffffff;
}
.card-img-overlay a:hover {
  border: 1px solid #1863dc;
  background-color: #1863dc;
  color: #ffffff;
}

/* Category Search Bar */
.searchBar {
  background-color: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.searchBar button:first-child {
  width: 140px;
  height: 50px;
  border-radius: 24px 0 0 24px;
  background-color: #ffffff;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #cecece;
  font-family: "Poppins", sans-serif;
}
.searchBar a {
  color: #3c3c3c;
}
.searchBar #s {
  width: 520px;
  height: 50px;
  border: 1px solid #cecece;
  outline: none;
}

 .searchBar input{
  width: 520px;
  height: 50px;
  border: 1px solid #cecece;
  outline: none;
}


.searchBar button:last-child {
  width: 86px;
  height: 50px;
  background-color: #ef5c35;
  border: none;
}

#searchsubmit{
  width: 86px;
  height: 50px;
  background-color: #ef5c35;
  border: none;
}

/* Category Section */
.categorySection {
  background-color: #f8f8f9;
}
.categorySection h4 {
  font-size: 24px;
  font-weight: 100;
  color: #1863dc;
  letter-spacing: 3px;
}
.categorySection h2 {
  font-size: 48px;
  font-weight: 600;
}
.categorySection p {
  font-size: 24px;
  font-weight: 400;
  color: #787878;
}

.categorySection .categoryBoxes {
  width: 80%;
}
.categoryBoxes .item {
  width: 300px;
  height: 300px;
  background-color: #ffffff;
}
.categoryBoxes .item:hover {
  box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, 0.1);
}
.item .icon {
  width: 64px;
  height: 64px;
  background-color: #f6f6f6;
}
.item h5 {
  font-size: 24px;
  font-weight: 500;
}
.item p {
  font-size: 14px;
  font-weight: 400;
}
.item a {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
}
/* Category Section End */

/* Recipes Section */
.recipes {
  height: auto;
  background-color: #fcfcfc;
}
.recipes .cards {
  width: 80%;
}
.recipes h4 {
  font-size: 24px;
  font-weight: 100;
  color: #1863dc;
  letter-spacing: 3px;
}
.recipes h2 {
  font-size: 48px;
  font-weight: 600;
  width: 50%;
}

[rel="category tag"] {
  color: #ffffff;
}

/* Recent Posts */
.recent-posts .card-img-top {
  height: 272px;
}
/* Recipes Section End */

.searchBars input {
  width: 500px;
  height: 50px;
  border: 1px solid #cecece;
  outline: none;
  background-color: #f4f4f4;
}
.searchBars button {
  height: 50px;
  background-color: #ef5c35;
  color: #fff;
  /* border: 1px solid #CECECE; */
  border: none;
}

/* Kitchen Section */
.img-fluid {
  height: 100%;
  border-radius: 18px 0 0 18px;
}

/* Testimonials */
.testimonials-section .overlay h2 {
  width: 50%;
  font-size: 48px;
}

.testimonials-section .overlay .carousel-item .card {
  width: 700px;
  height: 200px;
  border-radius: 12px;
}
.testimonials-section .overlay .carousel-item .card img {
  height: 198px;
  border-radius: 12px 0 0 12px;
}


/* Testmonials */

/* Mobile Break-point */
@media screen and (max-width: 768px) {
  .custom-grid-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }
  .col3 .card {
    height: 100%;
  }
  .header-posts {
    width: 100%;
  }
  .posts {
    width: 100%;
  }
  .custom-grid-item .card {
    border-radius: 0;
  }

  /* Category Search Bar */
  .searchBar {
    width: 100%;
    flex-direction: column;
    gap: 10px;
  }
  .searchBar button:first-child {
    width: 90%;
    height: 50px;
    border-radius: 24px;
  }
  .searchBar .search-sec {
    width: 90%;
  }
  .searchBar input {
    width: 100%;
    height: 50px;
    border-radius: 24px 0 0 24px;
  }

  /* Recipes Section */
  .recipes {
    height: auto;
    width: 100%;
  }
  .recipes .cards {
    width: 100%;
  }
  .recipes .cards .card-item-2 .img {
    /* margin-left: -10px; */
    margin-top: 10px;
    padding: 0;
  }
  .recipes h4 {
    font-size: 24px;
  }
  .recipes h2 {
    width: 100%;
    font-size: 34px;
  }
  /* Recent Posts */
  .recent-posts .card-img-top {
    height: 272px;
  }
  /* Recipes Section End */

  /* Kitchen Section */
  .img-fluid {
    /* height: 100%; */
    height: 242px;
    width: 100%;
    border-radius: 18px 18px 0 0;
  }
  /* Kitchen Section End */

  /* Testimonials */
  .testimonials-section .overlay h2 {
    width: 100%;
    font-size: 32px;
  }
  .testimonials-section .overlay .carousel-item .card {
    width: 80%;
    height: auto;
  }
  .testimonials-section .overlay .carousel-item .card img {
    height: auto;
    border-radius: 12px 12px 0 0;
  }
  /* Testmonials */
}