/*!
Theme Name: Blog Grow
Theme URI: ##
Author: Dhrumil Kumbhani
Author URI: https://in.linkedin.com/in/dhrumil-kumbhani-707b7b179?original_referer=https%3A%2F%2Fwww.google.com%2F
Description: Blog Grow is a versatile and modern WordPress blog theme that is designed to help bloggers showcase their content in a beautiful and engaging way. The theme is perfect for a wide range of blog niches, including personal blogs, lifestyle blogs, food blogs, travel blogs, and many more.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.1
Requires PHP: 5.6
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: blog-grow
Tags: blog-site, custom-blog, grow-blog, featured-blog

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Blog Grow is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/*Custome CSS for the Blog Grow*/

:root {
   --color-white-100: #fafafa;
   --color-white-200: #e4e6e7;
   --color-white-300: #c9cccf;
   --color-white-400: #a1a6aa;
   --color-white-500: #798086;
   --color-white-600: #555a5e;
   --color-black-100: #12161c;
   --color-black-200: #101419;
   --color-black-300: #0c0f13;
   --color-black-400: #0c0f13;
   --color-black-500: #080a0c;
   --color-black-600: #060709;
   --color-black-700: #040506;
   --color-black-800: #020303;
   --color-blue-100: #dcebfe;
   --color-blue-200: #bedbfe;
   --color-blue-300: #91c3fd;
   --color-blue-400: #61a6fa;
   --color-blue-500: #3c83f6;
   --color-blue-600: #2463eb;
   --color-blue-700: #1d4fd7;
   --color-blue-800: #1e3fae;
   --color-blue-900: #1e3b8a;
   --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
 *, *::before, *::after {
   box-sizing: border-box;
   list-style: none;
   list-style-type: none;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}
 html {
   font-size: 100%;
   box-sizing: inherit;
   scroll-behavior: smooth;
   height: -webkit-fill-available;
}
 body {
   font-family: "Rubik", sans-serif;
   font-size: clamp(1rem, 2vw, 1.125rem);
   font-weight: 400;
   line-height: 1.5;
   height: -webkit-fill-available;
   color: var(--color-black-500);
   background-color: var(--color-white-100);
}
 main {
   overflow: hidden;
}
 a, button {
   cursor: pointer;
   border: none;
   outline: none;
   user-select: none;
   background: none;
   box-shadow: none;
   text-decoration: none;
}
 img, video {
   display: block;
   max-width: 100%;
   height: auto;
   object-fit: cover;
}
 .section {
   margin: 0 auto;
   padding: 6rem 0 1rem;
}
 .container {
   max-width: 75rem;
   height: auto;
   margin: 0 auto;
   padding: 0 1.25rem;
}
 .centered {
   text-align: center;
   vertical-align: middle;
   margin-bottom: 1rem;
}
 .heading-xl {
   font-family: inherit;
   font-size: clamp(2.648rem, 6vw, 4.241rem);
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -1px;
}
 .heading-lg {
   font-family: inherit;
   font-size: clamp(2.179rem, 5vw, 3.176rem);
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -1px;
}
 .heading-md {
   font-family: inherit;
   font-size: clamp(1.794rem, 4vw, 2.379rem);
   font-weight: 700;
   line-height: 1.25;
   letter-spacing: -1px;
}
 .heading-sm {
   font-family: inherit;
   font-size: clamp(1.476rem, 3vw, 1.782rem);
   font-weight: 600;
   line-height: 1.5;
}
 .heading-xs {
   font-family: inherit;
   font-size: clamp(1.215rem, 2vw, 1.335rem);
   font-weight: 500;
   line-height: 1.5;
}
 .paragraph {
   font-family: inherit;
   font-size: clamp(1rem, 2vw, 1.125rem);
   line-height: inherit;
   max-width: 95%;
   height: auto;
   text-transform: unset;
   color: var(--color-white-200);
}
 .btn {
   display: inline-block;
   font-family: inherit;
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.5;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   user-select: none;
   outline: none;
   border: none;
   border-radius: 0.25rem;
   text-transform: unset;
   transition: all 0.3s ease-in-out;
}
 .btn-inline {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   column-gap: 0.5rem;
}
 .btn-darken {
   padding: 0.75rem 2rem;
   color: var(--color-white-100);
   background-color: var(--color-black-200);
   box-shadow: var(--shadow-medium);
}
 .btn-neutral {
   padding: 0.75rem 2rem;
   color: var(--color-black-500);
   background-color: var(--color-white-100);
   box-shadow: var(--shadow-medium);
}
 .header {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 100;
   width: 100%;
   height: auto;
   margin: 0 auto;
   transition: all 0.35s ease;
   background: black;
}
  .admin-bar .header{
    padding-top: 32px;
}
 .header.on-scroll {
   background: var(--color-black-300);
   box-shadow: var(--shadow-medium);
}
 .navbar {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   column-gap: 1.25rem;
   width: 100%;
   height: 4.25rem;
   margin: 0 auto;
}
 .navbar a img.logo{
  max-width: 200px;
 }
 .brand {
   font-family: inherit;
   font-size: 1.5rem;
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: -1px;
   color: var(--color-white-100);
   text-transform: uppercase;
}
 .menu {
   position: fixed;
   top: -100%;
   left: 0;
   width: 100%;
   height: auto;
   padding: 4rem 0 3rem;
   overflow: hidden;
   background-color: var(--color-black-300);
   box-shadow: var(--shadow-medium);
   transition: all 0.4s ease-in-out;
}
 .menu.is-active {
   top: 0;
   width: 100%;
   height: auto;
}
 .menu-inner {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   row-gap: 1.25rem;
}
 .menu-link {
   font-family: inherit;
   font-size: 1rem;
   font-weight: 500;
   line-height: 1.5;
   color: var(--color-white-100);
   text-transform: uppercase;
   transition: all 0.3s ease;
}
 .menu-block {
   display: inline-block;
   font-family: inherit;
   font-size: 0.875rem;
   font-weight: 500;
   line-height: 1.25;
   user-select: none;
   white-space: nowrap;
   text-align: center;
   margin-left: auto;
   padding: 0.65rem 1.5rem;
   border-radius: 3rem;
   text-transform: capitalize;
   color: white !important;
   background-color: var(--color-blue-600);
   box-shadow: var(--shadow-medium);
   transition: all 0.3s ease-in-out;
}
 @media only screen and (min-width: 48rem) {
   .menu {
     position: relative;
     top: 0;
     width: auto;
     height: auto;
     padding: 0rem;
     margin-left: auto;
     background: none;
     box-shadow: none;
  }
   .menu-inner {
     display: flex;
     flex-direction: row;
     column-gap: 2rem;
     margin: 0 auto;
  }
   .menu-link {
     text-transform: capitalize;
  }
   .menu-block {
     margin-left: 2rem;
  }
}
 .burger {
   position: relative;
   display: block;
   cursor: pointer;
   user-select: none;
   order: -1;
   z-index: 10;
   width: 1.65rem;
   height: 1.15rem;
   border: none;
   outline: none;
   background: none;
   visibility: visible;
   transform: rotate(0deg);
   transition: 0.35s ease;
}
 @media only screen and (min-width: 48rem) {
   .burger {
     display: none;
     visibility: hidden;
  }
}
 .burger-line {
   position: absolute;
   display: block;
   left: 0;
   width: 100%;
   height: 1.75px;
   border: none;
   outline: none;
   opacity: 1;
   transform: rotate(0deg);
   background-color: var(--color-white-100);
   transition: 0.25s ease-in-out;
}
 .burger-line:nth-child(1) {
   top: 0px;
}
 .burger-line:nth-child(2) {
   top: 0.5rem;
   width: 70%;
}
 .burger-line:nth-child(3) {
   top: 1rem;
}
 .burger.is-active .burger-line:nth-child(1) {
   top: 0.5rem;
   transform: rotate(135deg);
}
 .burger.is-active .burger-line:nth-child(2) {
   opacity: 0;
   visibility: hidden;
}
 .burger.is-active .burger-line:nth-child(3) {
   top: 0.5rem;
   transform: rotate(-135deg);
}
 .banner-column {
   position: relative;
   display: grid;
   align-items: center;
   row-gap: 3rem;
}
 @media only screen and (min-width: 48rem) {
   .banner-column {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     justify-content: center;
  }
}
 @media only screen and (min-width: 64rem) {
   .banner-column {
     grid-template-columns: 1fr max-content;
     column-gap: 4rem;
     margin-top: 3rem;
  }
}
 .banner-image {
   display: block;
   max-width: 18rem;
   height: auto;
   margin-top: 2rem;
   object-fit: cover;
   justify-self: center;
}
 @media only screen and (min-width: 48rem) {
   .banner-image {
     order: 1;
     max-width: 20rem;
     height: auto;
  }
}
 @media only screen and (min-width: 64rem) {
   .banner-image {
     max-width: 25rem;
     height: auto;
     margin-right: 5rem;
  }
}
 .banner-inner {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   row-gap: 1.75rem;
}
 .banner-links {
   position: absolute;
   top: 30%;
   right: 1.5rem;
   display: grid;
   justify-items: center;
   row-gap: 0.5rem;
   opacity: 0;
   visibility: hidden;
}
 @media only screen and (min-width: 64rem) {
   .banner-links {
     opacity: 1;
     visibility: visible;
  }
}
 .banner-links > * {
   font-size: 1.25rem;
   line-height: 1.25;
   color: var(--color-white-100);
}
 .banner-links::before {
   position: absolute;
   content: "";
   top: -3rem;
   width: 4rem;
   height: 1.5px;
   transform: rotate(90deg);
   background: var(--color-white-100);
}
 .banner-links::after {
   position: absolute;
   content: "";
   bottom: -3rem;
   width: 4rem;
   height: 2px;
   transform: rotate(90deg);
   background: var(--color-white-100);
}
 


/* Footer CSS */
.footer {
  position: relative;
  background: #e1e1e1;
  min-height: 100px;
  padding: 20px 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top:10%;
}


.footer .social-icon,
.footer .menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
  background-color: #e1e1e1;
}

.social-icon__item,
.menu__item {
  list-style: none;
}

.social-icon__link {
  font-size: 2rem;
  color: #000;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
}
.social-icon__link:hover {
  transform: translateY(-10px);
}

.menu__link {
  font-size: 1.2rem;
  color: #000;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  font-weight: 300;
}
.menu__link:hover{
  color: white;
}

.menu__link:hover {
  opacity: 1;
}

.header .menu__link{
  color: white;
}
.footer p {
  color: #000;
  margin: 15px 0 10px 0;
  font-size: 1rem;
  font-weight: 300;
}

.wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: url("media/wave.png");
  background-size: 1000px 100px;
}

.wave#wave1 {
  z-index: 1000;
  opacity: 1;
  bottom: 0;
  animation: animateWaves 4s linear infinite;
}

.wave#wave2 {
  z-index: 999;
  opacity: 0.5;
  bottom: 10px;
  animation: animate 4s linear infinite !important;
}

.wave#wave3 {
  z-index: 1000;
  opacity: 0.2;
  bottom: 15px;
  animation: animateWaves 3s linear infinite;
}

.wave#wave4 {
  z-index: 999;
  opacity: 0.7;
  bottom: 20px;
  animation: animate 3s linear infinite;
}

@keyframes animateWaves {
  0% {
    background-position-x: 1000px;
  }
  100% {
    background-positon-x: 0px;
  }
}

@keyframes animate {
  0% {
    background-position-x: -1000px;
  }
  100% {
    background-positon-x: 0px;
  }
}

/*home page*/


/*body {
  background-color: #f5f5f5;
  font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}*/

.container-home {
  display: grid;
  grid-template-columns: 20% 20% 20% 20%;
  gap: 30px;
  margin-top: 10%;
  margin: 5% auto;
  justify-content: center;
  max-width: 80%;
}

.card-container {
  width: 300px;
  background-color: #fff;
  border-radius: 8px;
  margin: auto;
  box-shadow: 0 2px 20px rgba(0,0,0, 0.1);
  overflow: hidden;
  height: -webkit-fill-available;
}
.blog-title a{
  color: black;
}
.card-image img {
  height: 220px;
  width: 100%;
  border-radius: 8px 8px 0 0;
  background-size: cover;
}

.card-body {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 16px;
  min-height: 200px;
}

.card-badge {
  text-transform: uppercase;
  background-color: #fff;
  color: #fff;
  padding: 2px 8px;
  border-radius: 70px;
  margin: 0;
  font-size: 12px;
  margin-right: 10px;
}

.card-badge-blue {
  background-color: #92d4e4;
}

.card-badge-purple {
  background-color: #3d1d94;
}

.card-badge-pink {
  background-color: #c62bcb;
}

.card-body h1 {
  font-size: 16px;
  margin: 8px 0;
}

.card-body p {
  font-size: 14px;
  margin: 8px 0 16px 0;
}

.card-author {
  display: flex;
  align-items: center;
}

.card-author p {
  margin: 0 16px;
  font-size: 12px;
}

.card-author p:last-child {
  color: #888;
}

.card-author img {
  border-radius: 50%;
  height: 48px;
  width: 48px;
  margin-top: auto;
}

@media screen and (max-width: 1000px) {
  .container {
    grid-template-columns: 1fr;
  }
}

/*Single page css*/
.site-main{
  padding-top: 5%;
}
.post-image{
  width: 100%;
  height: 500px;
  overflow: hidden;
  border-radius: 20px;
}
.post-image .post-thumbnail img{
  height: 500px;
  width: 100%;
}