*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-base: #fdf6e3;
  --font-base: #3e3e3e;
  --primary-blue: #a3bcd6;
  --primary-purple: #c3aed6;
  --primary-brown: #d8c3a5;
  --primary: #d4a5a5;
  --primary-light: #ceb0b0;
  --primary-grey-blue: #bcccdc;
  --primary-orange: #e07a5f;
  --light-base: #f4f0e6;
  font-size: 16px;
}

.d-flex{
  display: flex;
}

.f-col{
  flex-direction: column;
}

.f-row{
  flex-direction: row;
}

.fw{
  flex-wrap: wrap;
}

.fa-center{
  align-items: center;
}

.fj-center{
  justify-content: center;
}

.fj-space-bw{
  justify-content: space-between;
}

.questrial-regular {
  font-family: "Questrial", sans-serif;
  /* font-weight: 400; */
  font-style: normal;
}

.raleway-regular {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.base-bgcolor{
  background-color: var(--bg-base);
  color: white;
}

.base-color{
  color: #199f4f;
}

.pd-st{
  padding: 1.5rem;
}

.pt-st{
  padding-top: 3em;
}

.pt-st2{
  padding-top: 2em;
}

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

.text-left{
  text-align: left;
}

.d-none{
  display: none !important;
}

body{
  background-color: var(--bg-base);
}

.pre-loader{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-base);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pre-loader div{
  width: 80px;
  height: 80px;
  border: 20px dotted var(--primary);
  border-radius: 50%;
  /* border-top-color: var(--primary-orange); */
  animation: loader 1s linear infinite;
}

@keyframes loader {
  0%{
    transform: rotate(0deg);
  }
  50%{
    /* transform: rotate(360deg); */
  }
  100%{
    transform: rotate(360deg);
  }
}

header.fixed{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

header div{
  max-width: 1400px;
  margin: auto;
}

header #logo{
  font-size: 1.5rem;
  color: var(--primary);
  text-decoration: none;
}

header #logo:hover{
  color: var(--primary-orange);
}

header a{
  color: white;
  text-decoration: none;
}

.header-shadow{
  box-shadow: 1px 1px 4px #d4a5a55c;
}

.menuToggle{
  display: flex;
  left:0%;
  animation: menuSlide 0.05s ease-in;
}

@keyframes menuSlide {
  from{
    left:100%
  }
  to{
    left: 0;
  }
}

.menuToggleOff{
  left:100%;
  animation: menuSlideOff 0.05s ease-in;
}

@keyframes menuSlideOff {
  from{
    left:0%;
    display: flex;
  }
  to{
    left: 100%;
    display: none;
  }
}

nav ul{
  list-style: none;
  background-color: var(--bg-base);
  width: 100%;
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  padding-bottom: 1.5em;
  bottom: 0;
  justify-content: flex-start;
  z-index: 1000;
  text-align: left;
  border-top: 1px solid var(--primary);
  padding-top: 1em;
}

nav ul li{
  padding: 1em;
}

nav ul li a{
  color: var(--primary);
  font-size: 1.2rem;
  text-align: left;
}

nav ul li a:hover{
  cursor: pointer;
  text-decoration: none;
  color: var(--primary-orange);
  /* color: white; */
}

main{
  overflow: hidden;
}

section{
  width: 100%;
}

.blog-container{
  max-width: 1400px;
  margin: auto;
}

section#posts{
  width: 100vw;
}

.w-100{
  width: 100%;
}

#banner{
  /* min-height: 80vh; */
  margin-top: 50px;
  padding: 2em;
  margin-bottom: 2em;
}

#banner img{
  width: 245px;
  height: 300px;
  object-fit: cover;
  border-color: var(--primary-orange);
}

h1{
  font-size: 2rem;
  margin-bottom: 0.5em;
}


button a,
button a:hover,
button a:focus{
  text-decoration: none;
  color: inherit;
}

#banner .wrap{
  flex-wrap: wrap;
  flex-direction: column-reverse;
}

.banner-left{
  width: 100%;
}

.banner-left h1,
.banner-left p {
  text-align: center;
}

.banner-left .btns{
  margin: auto;
  justify-content: center;
}


/* .btns button{
  margin-left: auto;
  margin-right: auto;
} */

.banner-left p{
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: 1em;
}

.banner-left h1{
  color: var(--primary-orange);
}

.banner-right{
  width: 100%;
  min-height: 400px;
}


.btn-orange{
  outline: none;
  box-shadow: none;
  padding: 8px 20px;
  border-radius: 5px;
  background: var(--primary-orange);
  color: white;
  border: 1px solid var(--primary-orange);
  font-size: 1rem;
  margin-right: 1em;
  margin-bottom: 1em;
}

.btn-white{
  outline: none;
  box-shadow: none;
  padding: 8px 20px;
  border-radius: 5px;
  background: var(--bg-base);
  color: var(--primary-orange);
  border: 1px solid var(--primary-orange);
  font-size: 1rem;
  margin-right: 1em;
  margin-bottom: 1em;
}

.btn-white:hover,
.btn-orange:hover{
  transform: scale(1.1);
  cursor: pointer;
  animation: scaleBtn 0.1s ease;
}

.relative{
  position: relative;
}

.banner-right span{
  font-family: "Damion", cursive;
  position: absolute;
  bottom: 0;
  color: var(--primary);
  font-size: 1.2rem;
  /* letter-spacing: 2px; */
  transform: rotate(-6deg) scale(1.4);
  z-index: 5;
  font-weight: 100;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 1px 1px 1px var(--font-base);
}

.banner-right img:nth-child(1){
  /* position: absolute; */
  right: 0;
  /* transform: rotate(15deg) translate(54px, 8px); */
  z-index: 1;
  border-radius: 5px;
  border: 5px solid white;
  box-shadow: 2px 2px 10px grey;
}

.banner-right img:nth-child(2){    
  position: absolute;
  right: 0;
  transform: rotate(19deg) translateX(-101px) translateY(58px);
  border-radius: 5px;
  border: 5px solid white;
  box-shadow: 2px 2px  10px grey;
}

#subscribe{
  background: var(--primary);
  padding: 2em;
  padding-bottom: 3em;
}

#subscribe button{
  font-size: 0.9rem;
  border: none;
  outline: none;
  padding: 8px 20px;
  border-radius: 5px;
  color: currentColor;
  background: var(--primary-orange);
  color: white;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 1px solid var(--primary-orange);
  border-left: none;
}

#subscribe button:hover{
  transform: scale(1.1);
  cursor: pointer;
  animation: scaleBtn 0.1s ease;
}

#subscribe form{    
  /* border: 1px solid lightgreen; */
  padding: 0;
  width: 100%;
  max-width: 600px;
}

#subscribe header{
  margin-bottom: 1em;
  color: var(--bg-base);
}

#subscribe p{
  color: var(--light-base);
  margin: 0;
}

#subscribe input{
  border: 1px solid var(--primary-orange);
  padding: 0.5em 1em;
  width: 100%;
  outline: none;
  font-size: 0.9rem;
  border-radius: 5px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
  background-color: var(--bg-base);
}


#subscribe{
  min-height: 150px;
}

#blogPost{
  max-width: 900;
  line-height: 25px;
  letter-spacing: 1px;
  text-align: justify;
  margin-top: 100px;
  color: var(--font-base);
  padding: 0 2em;
}

#blogPost time{
  color: var(--primary);
}

#blogPost h2{
  font-size: 1.5rem;
  line-height: 2rem;
  text-align: center;
  margin: 20px 0px;
  /* font-weight: normal; */
  color: var(--primary-orange);
}


h2{
  font-size: 1.5rem;
  margin-top: 0;
  font-weight: bold;
}

#main-posts-section{
  padding: 3em 2em 2em 2em;
}

#main-posts-section .description{
  position: absolute;
  bottom: 0;
  top: 0;
  background-color: #0000002b;
  display: flex;
  align-items: end;
  flex-direction: column;
  justify-content: end;
  color: var(--bg-base);
  padding: 2em 1em;
}

#main-posts-section > div{
  width: 100%;
}

#main-posts-section > div article h4 a{
  color: var(--bg-base);
  text-decoration: none;
  font-weight: bold;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;        /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.2rem;
}

#main-posts-section > div article img{
  min-height: 300px;
}

#main-posts-section p{
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;        /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9rem;
}

#main-posts-section time{    
  position: absolute;
  top: 0;
  left: 0;
  color: var(--light-base);
  padding: 1em;
  font-size: 0.8rem;
  }

#main-posts-section time span{
  width: 10px;
  height: 10px;
  display: inline-block;
  background: var(--primary-orange);
  border-radius: 50%;
  border: 1px solid var(--primary);
  margin-right: 0.5em;
}

#main-posts-section > div article h4 a:hover{
  cursor: pointer;
  text-decoration: underline;
}

aside{
  padding: 3em 0em 0em 0em;
}

aside h2{
  color: var(--primary-orange);
}

aside h4{
  margin-bottom: 0.2em;
  font-size: 1.3rem;
}

section aside header{
  margin: 0;
  padding: 0;
}

aside article{
  margin-bottom: 1em;
}

aside article a{
  color: var(--primary-orange);
  text-decoration: none;
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 2;        /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

aside article a:hover{
  color: var(--primary-orange);
  text-decoration: underline;
}

aside article p{
  font-size: 0.9rem;
}

#blogPost time{
  color: rgb(116, 115, 115);
}

#blogPost p{
  margin-top: 15px;
  letter-spacing: 0.05rem;
  color: #0b0b0b;
  font-size: 0.8rem;
}

#blog-posts{
  padding:3em  2em;
}

#blog-posts article{
  margin-bottom: 3em;
  border-radius: 15px;
  box-shadow: 5px 5px 30px #a39a9a;
  max-width: 350px;
}

#blog-posts .about{
  padding: 1.5em;
}

#blog-posts img{
  width: 100%;
  height: 200px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

#blog-posts a{
  text-decoration: none;
}

#blog-posts span{
  /* letter-spacing: 0.1rem; */
  font-size: 1rem;
  /* text-align: justify; */
  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;        /* Number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: grey;
}

#blog-posts footer{
  padding: 0;
  margin: 0;
  color: var(--primary);
  margin-top: 1em;
  font-size: 0.8rem;
}

#blog-posts footer span{
  color: var(--primary);
  font-size: 0.8rem;
}

#blog-posts h3{    
  margin: 0;
  margin-bottom: 0;
}

#blog-posts h2{    
  font-weight: bold;
  font-size: 1.7rem;
  color: var(--primary-orange);
}

#blog-posts header p{
  color: grey;
}

#blog-posts h3 a{
  color: var(--primary-orange);
  font-size: 1rem;
}
#blog-posts article:hover a{
  text-decoration: underline;
}

#blog-posts article:hover,
#blog-posts article:hover img{
  transform: scale(1.01);
  cursor: pointer;
  animation: scaleBig 0.1s ease-in-out;
  overflow: hidden;
}


@keyframes scaleBig {
  from{
    transform: scale(1);
  }
  to{
    transform: scale(1.01);
  }
}


/* POSTS */
#posts article {
  max-width: 25em;
  position: relative;
  border-radius: 10px;
  margin: 1rem;
  width: 15em;
  height: 8em;
}

img{
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#posts article .about{
    position: absolute;
    display: none;
    bottom: 0;
    top: 0;
    padding: 0.7em;
    width: 100%;
    height: 100%;
    color: white;
    background-color: #17171782;
    font-size: 1rem;
    border-radius: 10px;
}

#posts article  .about:hover{
  text-decoration: underline;
  cursor: pointer;
}

#posts article:hover .about{
  text-decoration: underline;
  cursor: pointer;
  display: flex;
}

#posts article:hover{
  box-shadow: 10px 10px 10px #00000030;
}

header p{
  font-size: 1rem;
  color: var(--light-base);
  /* display: block; */
  /* margin: auto; */
}

section header{    
  max-width: 100%;
  padding: 1em;
  margin: auto;
  margin-bottom: 2em;
  text-align: center;
}


section#contact{
  width: 100%;
  background-color: var(--primary);
  padding: 3em 2em;
}

#contact h2{
  font-weight: bold;
  font-size: 1.7rem;
  color: var(--bg-base);
}

#contact form{
  background: var(--bg-base);
  border-radius: 20px;
  /* box-shadow: 3px 3px 15px #d6cfcf; */
  padding: 3em 2em;
}

#contact input{
  width: 100%;
  font-size: 0.9rem;
  margin-bottom: 1.5em;
  border: 1px solid var(--primary);
  border-radius: 15px;
  padding: 7px 15px;
  outline: none;
  box-shadow: none;
  background-color: var(--bg-base);
}

form .d-flex{
  flex-wrap: wrap;
}

#contact input:nth-child(1){
  margin-right: 0em;
}

#contact textarea{
  width: 100%;
  background-color: var(--bg-base);
  height: 8em;
  font-size: 0.9rem;
  margin-bottom: 1.5em;
  border: 1px solid var(--primary);
  border-radius: 15px;
  padding: 7px 15px;
  outline: none;
  box-shadow: none;
}

#contact input:focus,
#contact textarea:focus{
  border-color: var(--primary-orange);
}

#contact #submit{
  background-color: var(--primary-orange);
  border: none;
  border-radius: 10px;
  max-width: 10em;
  font-size: 1rem;
  text-transform: capitalize;
  color: white;
  border-radius: 30px;
  box-shadow: 5px 2px 15px #d2d2d2;
  padding: 0.5em 1em;
  margin-bottom: 0;
}

#contact #submit:hover{
  transform: scale(1.1);
  cursor: pointer;
  animation: scaleBtn 0.1s ease;
}

@keyframes scaleBtn {
  from{
    transform: scale(1);
  }
  to{
    transform: scale(1.1);
  }
}

h4{
  font-size: 1.5rem;
  /* font-weight: normal; */
}

.footer{
  text-align: center;
  padding: 8px 20px;
  color: var(--bg-base);
  background-color: var(--primary);
  font-size: 0.8rem;
  border-top: 1px solid var(--primary-brown);
}

footer p{
  margin: 0;
}

.menu-icon{
  display: block;
  font-size: 1.2rem;
  color: var(--primary);
}

@media screen and (min-width: 350px) {
  #blogPost h2, h2{
    font-size: 1.7rem;
  }
  #blogPost p{
    font-size: 0.9rem;
  }

  #posts article .about{
    font-size: 1rem;
  }

  #subscribe input,
  #subscribe button{
    font-size: 1rem;
  }
}

@media screen and (min-width: 500px) {
  #blogPost h2, h2{
    font-size: 2rem;
    font-weight: bold !important;
  }
  #blogPost p{
    font-size: 1rem;
    letter-spacing: 0.1rem;
  }
  
  #posts article .about{
    font-size: 1.2rem;
  }

  #posts article{
    max-width: 25em;
    position: relative;
    border-radius: 10px;
    margin: 1rem;
    width: 25em;
    height: 15em;
  }
  #blog-posts h3{    
  margin: 0;
  margin-bottom: 0.25em;  
  }
  
  #contact input,
  #contact textarea{
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 20px;
    margin-bottom: 1.5em;
  }

  #contact #submit{
    font-size: 1.2rem;
  }

  #blog-posts h3 a{
    font-size: 1.3rem;
  }
  #subscribe form{    
    padding: 0em 2em;
  }

  
  .banner-left p {
    font-size: 1.2rem;
  }

  h1 {
    font-size: 2.5rem;
  }
  
  .banner-right span{
    font-size: 2rem;
  }

  
  .btns button{
    margin-left: 0;
    margin-right: 1rem;
  }

  /* .btn-orange{
    margin-bottom: 0;
    margin-right: 1em;
  } */

  .banner-left .btns {
      margin: auto;
      justify-content: left;
  }

  #main-posts-section > div {
    min-width: 400px;
  }

  
  #main-posts-section .description{
    padding: 2em;
  }

  #main-posts-section time{
    padding: 1em 2em;
    font-size: 1rem;
  }

  #main-posts-section > div article h4 a{
    font-size: 1.4rem;
  }

  #main-posts-section > div article p{
    font-size: 1rem;
  }

  aside h4{
    font-size: 1.5rem;
  }

  aside{
    padding-left: 2em;
  }

}

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

  nav ul{
    position: relative;
    width: fit-content;
    top: 0;
    flex-direction: row;
    margin-bottom: 0;
    display: flex;
    padding-bottom: 0;
    justify-content: space-between;
    border: none;
    padding-top: 0;
  }

  .menu-icon{
    display: none;
  }

  nav ul li{
    padding: 0 2em;
  }

  nav ul li a {
    font-size: 1.2rem;
  }
  
  header #logo {
    font-size: 2rem;
  }  
  
  form .d-flex{
    flex-wrap: nowrap;
  }

  #contact input:nth-child(1){
    margin-right: 1em;
  }

  #contact form{
    padding: 2em;
    /* box-shadow: 10px 10px 30px #d6cfcf; */
  }

  #blog-posts article{
    margin-right: 2em;
  }

  #main-posts-section{
    flex-wrap: nowrap;
  }

  #main-posts-section aside{
    min-width: 350px;
    max-width: 550px;
  }

  aside{
    padding-top: 0em;
  }

  #main-posts-section img {
    max-height: 500px;
  }
}

@media screen and (min-width: 990px) {
  section#contact form{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  #contact form{
    padding: 6em;
    border: 1px solid var(--primary-orange);
    box-shadow: none;
  }

  #banner .wrap{
    flex-wrap: nowrap;
    flex-direction: row;
  }

  #banner {
    /* min-height: 80vh; */
    margin-top: 100px;
    padding: 2em 6em;
  }

  .banner-left h1,
  .banner-left p {
    text-align: left;
  }

  .banner-left .btns{
    margin: 0;
  }
  
  #main-posts-section aside{
    min-width: 400px;
  }
}