/*
Theme Name: My Theme
Version: 1.0
Author:Johnlery
*/

body {
  margin: 0;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100vw;
}

/* header */
.nav-wrapper {
  width: 100%;
  height: 130px;
  position: fixed;
  background: white;
  z-index: 10;
}

.nav-wrapper > nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.nav-menu {
  display: flex;
  gap: 20px;
  list-style: none;
  font-size: 20px;
}

.nav-menu-item > a {
  text-decoration: none;
  color: #000;
}

.logo-wrapper {
  padding: 10px;
}

.logo-wrapper > img {
  width: 100px;
  border-radius: 50%;
}

/* footer */
footer {
  max-height: 800px;
  width: 1200px;
  margin: 0;
  background-image: url(./assets/img/footer.png);
  margin-top: 100px;
  padding: 30px 10px;
  color: #fafafa;
}

.footer-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.footer-header > img {
  height: 80px;
  border-radius: 50%;
}
.footer-brands {
  display: flex;
  align-items: center;
  gap: 20px;
}
.fa-brands {
  font-size: 30px;
}

.footer-content {
  display: flex;
  justify-content: space-around;
}

.footer-menu {
  list-style: none;
  padding: 0;
}

.footer-menu-item {
  margin-bottom: 16px;
}

.footer-menu-item > a {
  text-decoration: none;
  color: #fafafa;
}

.footer-recent_blogs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.footer-recent_blogs > div > p {
  margin: 0;
}
.footer-recent_blogs > div > .blog-date {
  font-size: 12px;
}

/* main-container */

.main-wrapper {
  padding-top: 180px;
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(12, 100px);
  grid-template-rows: auto;
  row-gap: 10px;
  grid-auto-flow: row;
}

.item1 {
  grid-column: 1/12;
}

/* Front Page */
/* hero image */
.hero {
  width: 1200px;
}

.item2 {
  grid-area: 2/5/3/9;
  text-align: center;
}
.item2 > h2 {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 50px;
}

.category-buttons > ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  cursor: pointer;
}
.category-buttons > ul > li {
  font-weight: 600;
}

.selected-menu {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 4px;
  text-decoration-color: brown;
}

.item3 {
  grid-area: 3/2/4/12;
}

.item3 > .menu-categ {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  gap: 20px;
}

.menu-image {
  width: 100%;
  height: 277px;
}

.front-blogs-header_wrap {
  grid-area: 5/2/6/12;
  text-align: center;
}

.front-blogs-header_wrap > p {
  font-size: 20px;
  font-weight: 700;
  color: #00a149;
  margin-bottom: 0;
}

.front-blogs-header_wrap > h2 {
  font-size: 40px;
  font-weight: 900;
  margin-top: 0;
}

.front-blogs_wrap {
  grid-area: 6/2/7/12;
  display: grid;
  grid-template-columns: repeat(3, 320px);
  grid-template-rows: auto;
  column-gap: 20px;
}

/* single */
.blog-header {
  grid-area: 1/1/2/13;
  display: grid;
  grid-template-columns: repeat(12, 100px);
}

.blog-header > .header-thumbnail {
  grid-area: 1/1/13/13;
  background: #000;
  height: 700px;
}
.blog-header > .blog-title {
  grid-area: 12/2/13/7;
  background-color: #f4af00;
  border-radius: 20px 20px 0 0;
  text-align: center;
  display: none;
}

.blog-bottom-header {
  grid-area: 14/1/15/13;
  background: rgb(31, 31, 100);
  color: #fafafa;
  font-size: 20px;
  display: flex;
  gap: 10px;
  justify-content: space-around;
}

.blog-bottom-header > p {
  display: flex;
  align-items: center;
  gap: 10px;
}

.single1 {
  grid-area: 2/1/2/9;
}

.single1 > div > p {
  line-height: 2;
}

.single2 {
  grid-area: 3/1/4/9;
}

.single2 > h2 {
  text-align: center;
}

.single2 > article {
  display: grid;
  grid-template-columns: repeat(3, 250px);
  gap: 25px;
}

/* blogs */
.blogs-header-wrap_latest {
  grid-area: 1/1/2/13;
  text-align: center;
}
.blogs-header-wrap_latest > h2 {
  font-weight: 700;
  font-size: 40px;
}
.blogs-wrapper_latest {
  grid-area: 2/1/3/13;
  display: grid;
  grid-template-columns: repeat(12, 100px);
  grid-template-rows: auto;
  row-gap: 30px;
}
/* for all wrap */
.card-meta {
  display: flex;
  gap: 30px;
}

.excerpt-details {
  line-height: 2;
}

.blog-tag-list {
  display: flex;
  gap: 20px;
  list-style: none;
}

.blog-tag-item {
  padding: 8px 12px;
  border-radius: 14px;
  background-color: #fafaf5;
}

.blog-tag-item > a {
  text-decoration: none;
}

.blog-tag-item:nth-child(1) > a {
  color: #6941c6;
}

.blog-tag-item:nth-child(2) > a {
  color: #3538cd;
}

.blog-tag-item:nth-child(3) > a {
  color: #c11574;
}

.blog-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #000;
}

/* each wrap */
.blog-wrap_top {
  grid-area: 1/1/2/8;
}

.blog-wrap_top > .card > .card-details > a {
  display: block;
  text-align: center;
  background: #000;
  color: white;
  padding: 10px 20px;
}

.blog-wrap_side {
  grid-area: 1/9/3/13;
}

.blog-wrap_side > .card {
  margin-bottom: 20px;
}

.blog-wrap_side > .card > .card-details > a {
  display: block;
  text-align: center;
  background: #000;
  color: white;
  padding: 10px 20px;
}

.blog-wrap_bottom {
  grid-area: 2/1/3/8;
}

.blog-wrap_bottom > .card > .card-details > a {
  display: block;
  text-align: center;
  background: #000;
  color: white;
  padding: 10px 20px;
}

/* blogs header bottom */

.blogs-wrapper_header {
  grid-area: 3/1/4/13;
  text-align: center;
}

.blogs-wrapper_header > h2 {
  font-weight: 700;
  font-size: 40px;
}

/* bottom blogs wrap */
.blogs-wrapper_bottom {
  grid-area: 5/1/6/5;
  display: grid;
  grid-template-columns: repeat(4, 290px);
  grid-template-rows: auto;
  column-gap: 20px;
}

/* About Page */

.about-content_wrapper {
  grid-area: 2/1/3/9;
}

.about-content_wrapper > div {
  line-height: 2;
}

.right-sidebar {
  grid-area: 2/10/10/13;
}

.contact-form-wrapper {
  grid-area: 3/1/3/13;
  justify-items: center;
}

.contact-form-content {
  width: 1000px;
  display: flex;
  justify-content: center;
  height: 600px;
}

.contact-form-content--left {
  width: 50%;
}

.contact-form-content--right {
  width: 50%;
  height: 600px;
  padding: 10px 20px;
}

.contact-form-content--right > h2 {
  font-size: 40px;
  text-align: center;
  font-weight: 900;
}

.contact-detail-wrapper > p {
  position: relative;
}

.contact-detail-wrapper > p > i {
  position: absolute;
  top: 15px;
  left: 11px;
  z-index: 1;
  font-size: 16px;
}

.contact-detail--input {
  height: 40px;
  padding-left: 36px;
  width: 410px;
  font-size: 16px;
}

.contact-detail--textarea {
  padding-left: 15px;
  width: 430px;
  font-size: 16px;
}

.contact--submit-button {
  width: 450px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: rgb(0, 153, 255);
  border: none;
  font-size: 16px;
}

/* PAGE NOT FOUND */
.page-not-found {
  grid-area: 3/1/4/13;
}

.page-not-found__wrapper {
  text-align: center;
}

.page-not-found__title {
  font-size: 40px;
}

.page-not-found__title > span {
  color: orangered;
}

.page-not-found__button {
  padding: 10px 20px;
}

.page-not-found__button > a {
  text-decoration: none;
  color: #000;
}

/* archive page */
.archive__wrapper {
  grid-area: 3/1/5/13;
}

.archive-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.archive-content__wrapper {
  max-width: 390px;
  line-height: 1.5;
}

.archive-content__image {
  width: 100%;
  border-radius: 10px 10px 0 0;
}
.archive-title {
  font-size: 40px;
}
.archive-content__title {
  font-size: 20px;
  font-weight: 400;
}
.archive-content__meta {
  font-size: 14px;
}
.archive-content__meta > a {
  text-decoration: none;
  color: #000;
}

.archive-content__meta > a:hover {
  text-decoration: underline;
}

.archive-content__excerpt {
  font-size: 16px;
}