@keyframes animateGrain{
  0% { transform:translate(0, 0) }
  10%{
    transform:translate(-5%,-10%)
  }
  20%{
    transform:translate(-15%,-20%)
  }
  30%{
    transform:translate(-5%,-10%)
  }
  40%{
    transform:translate(-15%,-20%)
  }
  
  50%{
    transform:translate(-5%,-10%)
  }
  60%{
    transform:translate(-15%,-20%)
  }
  70%{
    transform:translate(-5%,-10%)
  }
  80%{
    transform:translate(-15%,-20%)
  }
  90%{
    transform:translate(-5%,-10%)
  }
  100%{
    transform:translate(-15%,-20%)
  }
 
}

* {
  box-sizing: border-box;
}

body {
  /* background: url('images/link-bg.jpg') center center/cover no-repeat #101010; */
  background:#fff9f0;
  color: #573d48;
  font-family: "Open Sans", sans-serif; 
  font-size: 14px;

  ::selection {
      background: #D9C27F;
      color: #000;
      text-shadow: none;
  }

  ::-moz-selection {
      background: #D9C27F;
      color: #000;
      text-shadow: none;
  }
}

.noise-wrap {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  /* background: rgba(0,0,0,.3); */
  
  /* &::after {
      content:"";
    background-image:url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Dissolve_Noise_Texture.png");
    height: 300%;
    width: 300%;
    top: 0;
    left: 0;
    position: fixed;
    opacity:0.05;
    animation: animateGrain 8s steps(10) infinite;
    } */
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  font-family: "Gayathri", sans-serif;
}

h1 {
  font-size: 70px;
}
h2 {
   font-size: 32px;
}

h3 {
  font-size: 20px;
}

p {
  color: #573d48;
}


.btn {
  transition: all .13s ease-in-out;
  display: inline-block;
  padding: 15px 55px;
  backdrop-filter: blur(10px);
  border-radius: 30px;
  border: 1px solid #4d868c;
  color: #F5F5F5;
  background: #4d868c;
  text-decoration: none;
  font-weight: 700;

  text-align: center;
  &:hover {
    background: #101010;
    color: #F5F5F5;
  }

  @media(max-width:768px) {
    width: 100%;
  }
}

.content-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
 
  

  .content {
    width: 55%;
     flex-direction: column;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
      padding: 60px 0 60px 60px;

      @media(max-width: 1300px) {
        /* width: 60%; */
        padding: 40px;
      }

       @media(max-width: 1000px) {
        width: 100%;
       }

         @media(max-width: 768px) {
        padding: 40px 20px;
       }
  
  }
}

/* HEADER */
#header {
  padding-bottom: 60px;

   @media(max-width: 1300px) {
    padding-bottom: 30px;
   }

    @media(max-width: 768px) {
    padding-bottom: 0;
   }

   nav {
    @media(max-width:768px) 
    {
      margin-bottom: 30px;
    }
   }

  h1 {
    max-width: 900px;
    margin-bottom: 15px;
    line-height: 42px;

    @media(max-width: 1300px) {
    font-size:48px;
  }

    span {
      display: block;
      font-size: 28px;
      text-transform: uppercase;
      font-weight: 400;
      letter-spacing: 1px;
     
    }
  }

  p {
    font-size: 20px;
    font-weight: 500;
    max-width: 450px;
    line-height: 28px;
  }
}

.main-nav {
  ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      margin-right: 30px;

      @media(max-width: 768px) {
        margin-right: 15px;
      }

      &.current-menu-item {
        a {
          text-decoration: underline;
        }
      }

      a {
        text-decoration: none;
        font-weight: 500;
        color: #573d48;
         transition: all .13s ease-in-out;

         &:hover {
           color: #D9C27F;
         }
      }
    }
  }
}

#main {
  /* padding-bottom: 60px;

  @media(max-width: 1300px) {
    padding-bottom: 30px;
  } */

   .about-wrap {
      max-width: 930px;
      padding-bottom: 60px;
      /* padding-top: 60px; */

      @media(max-width: 1300px) {
    padding-bottom: 30px;
  }

       @media(max-width: 1000px) {
        display: flex;
        align-items: center;
        flex-wrap:wrap;
        justify-content: space-between;
        padding-bottom: 60px;
    .copy {
      width: calc( 100% - 300px);
    }
  }

  @media(max-width:768px) {
     padding-bottom: 30px;

    .copy {
      width: 100%;order: 2;
    }
  }

      h2 {
        margin-bottom: 15px;
        /* color: #D9C27F; */

        @media(max-width: 1300px) {
    font-size: 28px;
  }
      }

      p {
        line-height: 26px;
        font-size: 16px;
      }
    }

    .col-wrap {
      display: flex;
      flex-wrap: wrap;
      line-height: 20px;
      margin: 0 -20px;
      max-width: 950px;

      .col {
        width: calc( 100% / 3);
        padding: 0 20px;

        @media(max-width: 1300px) {
          width: 100%;

          &:not(:last-child) {
            margin-bottom: 30px;
          }
        }

         @media(max-width: 1000px) {
 width: calc( 100% / 3);
         }

         @media(max-width: 768px) {
 width: 100%;
         }

        h3 {
          margin-bottom: 15px;
        }
      }
    }
     

    p {
      + p {
        margin-top: 20px;
      }
    }
}

.mobile-image {
  display: none;

  @media(max-width: 1000px) {
    display: block;
    width: 250px;
    height: 250px;
    overflow: hidden;
    border-radius: 50%;

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

  @media(max-width: 768px) {
    order: 1;
    margin: 0 auto 30px auto;
  }
}

.bottom-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
}

.face {
  width: 43%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-blend-mode: color-burn;
  overflow: hidden;

   /* @media(max-width: 1300px) {
    width: 38%;
   } */
  
  /* transform: rotate(10deg); */
  @media (max-width: 1300px) {
    position: sticky;
    top: 0;
  }

   @media(max-width: 1000px) {
       display: none;
       }

  img {
    width: 100%;
    border-radius: 50% 0 0 50%;
    height: 100%;
    object-fit: cover    ;
  }

  .inner {
    /* max-width: 655px; */
    width: 100%;
    margin: 0 auto;
    position: relative;
    
    @media(max-width: 1300px) {
      height: 120%;
    }

    .flowers {
      display: none;
      opacitY: .5;
      position: absolute;
      transform: rotate(25deg) scaleX(-1);
      /* mix-blend-mode: overlay; */
      bottom: -0;
      right: -70px;
      width: 300px;
      z-index: 99;

      svg {
        display: block;
        width: 100%;
        height: 100%;
        path {
          fill: #fff9f0;
        }
      }
    }

    /* &::after {
      content: '';
      display: block;
      height: 100%;
      width: 30%;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(to right, rgba(244,232,215,1) 0%,rgba(244,232,215,0.99) 1%,rgba(244,232,215,0) 100%);
    } */

    svg {
      path {
        fill: #2F2F2F;
      }
    }
  }
}