:root{
    --main-color: #FE043C;
    --sec-color: #35cd8c;
    --color-dark: #1D2231;
    --text-grey: #8390A2;
  }

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style-type: none;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    scroll-snap-type: y mandatory;
}

html{
    scroll-behavior: smooth;
}

.Hero {
    background-color: #E63946;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}


.text-holder {
    background-color: turquoise;
}

.Content {
    background-color: #edf2f4;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.Content2 {
    background-color: #edf2f4;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Content3 {
    background-color: #edf2f4;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Content4 {
    background-color: #edf2f4;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Content5 {
    background-color: #edf2f4;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
}


.Hero, .Content, .Content2, .Content3, .Content4, .Content5 {
    scroll-snap-align: start none;
}

.content{
    overflow: hidden;
  }

.buttons {
    background-color: cadetblue;
}

.img {
    float: left;
}

header {
    position: absolute;
    left: 0;
    top: 1.3rem;
    right: 0;
    padding: 2rem 3rem;
    z-index: 20;
}

.nav-banner {
    color: #fff;
    font-size: 2.5rem;
}


.nav-inner,
.nav-menu ul,
.nav-menu-2 {
    display: flex;
    align-items: center;
}

.nav-inner {
    justify-content: space-between;
}

.nav-menu li {
    margin-right: 2rem;
}

.nav-menu:last-child {
    margin-left: 0rem;
}

.nav-menu a {
    color: #fff;
    display: block;
    padding: .6rem 0rem;
    text-transform: uppercase;
    font-weight: 500;
}

.sticky .nav-menu a {
    color: #444;
}

.nav-menu a:hover {
    color: var(--main-color);
    border-bottom: 2px solid var(--main-color);
}

/*.nav-menu a.active {
    color: var(--main-color);
}*/

.btn {
    display: block;
    padding: 1rem 3rem;
    border-radius: 30px;
}


.nav-menu-2 a {
    color: #E63946;
    background: white;
    transition: background-color 400ms;
}

.nav-menu-2 a:hover {
    color: #fff;
    background: #E63946;
}


.nav-icons {
    margin-left: 1.2rem;
    display: flex;
    justify-content: flex-end;
}

.nav-icons span {
    font-size: 2rem;
    display: inline-block;
    margin-left: 1rem;
    color: #fff;
}

.sticky .nav-icons span {
    color: #444;
}

.sticky .nav-menu-2 label {
    color: #E63946;
}


.sticky {
    background: #fff;
    position: fixed;
    top: 0;
    padding: 1rem;
    box-shadow: 10px 10px 10px -10px rgba(0,0,0,0.5);
  }
  
  .sticky h2 {
    color: #E63946;
  }
  
  section{
    overflow-x: hidden;
  }
  
  .nav-menu-2 label {
    font-size: 2rem;
    display: none;
    color: #fff;
    cursor: pointer;
  }
  
  #sm-menu-toggle{
    display: none;
    }
  
    #sm-menu-toggle:checked ~ .sm-menu{
      right: 0;
      }
  
  .sm-menu{
    height: 100%;
    width: 270px;
    background: white;
    position: fixed;
    right: -270px;
    top: 0;
    z-index: 100;
    padding: 1rem;
    transition: right 350ms;
  }
  
  .sm-menu label{
    display: block;
    text-align: right;
    font-size: 1.7rem;
    color: #E63946;
  }
  
  .sm-menu li{
    margin-bottom: .6rem;
  }
  
  .sm-menu a{
    font-size: 1.05rem;
    color: #E63946;
    font-weight: 500;
  }
  
  .sm-menu a:hover{
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #fff;
  }
  
.content {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 4rem;
}
h1{
    font-size: 4rem;
}

.tex {
    font-family: 'Poppins', sans-serrif;
    font-size: 80px;
    color: #EDF5E1;
    align-items: baseline;
    display: block;
    padding-left: 10px;
    animation: spin_words 10s infinite;
}


@keyframes spin_words{
    10%{
      transform: translateY(350%);
    }
    25%{
      transform: translateY(240%);
    }
    35%{
      transform: translateY(150%);
    }
    50%{
      transform: translateY(45%);
    }
    60%{
      transform: translateY(-55%);
    }
    75%{
      transform: translateY(-150%);
    }
    85%{
      transform: translateY(-250%);
    }
    100%{
      transform: translateY(-340%);
    }
}

 


.projects{
    width: auto;
}

.projects-wrapper h2{
    margin-bottom: 4rem;
}

.projects-wrapper > h2 span{
    background: #000;
}

.project{
    margin: 1rem;
}

.project-img{
    height: 360px;
    background-size: 115%;
    background-repeat: no-repeat;
    border-radius: 5px;
    margin-bottom: 1rem;
    transition: background 500ms;
}

.project-img:hover{
    background-size: 125%;
}

.project-desc h4{
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: .5rem;
}

.project-desc h3{
    font-family: 'DM sans',sans-serif;
    border-bottom: 1px solid #000;
    padding-bottom: .3rem;
    display: inline-block;
    font-size: 1.4rem;
}

h2{
    font-size: 2rem;
}

/*.form{
    
  }*/
.field{
    width: 100%;
    box-sizing: border-box;	
}


  .form button{
    display: inline-block;
    margin-top: .5rem;
    background: var(--sec-color);
    color: #fff;
    cursor: pointer;
    font-size: 1.2rem;
    margin-bottom: 2rem;
  }
  
  .form button:hover{
    background: var(--main-color);
  }


td{
    text-align: center;
    padding: 5px;
}

table{
    margin: 20px;
    margin-top: 40px;
}

.lab {
    font-size: 300%;
    text-align: center;
    text-decoration: none;
    display: flex;

  }

  .icon_instagram:hover, .icon_youtube:hover, .icon_behance:hover, .icon_linkedin:hover, .icon_whatsapp:hover {
    opacity: 0.7;
}

.la-youtube {
    color: white;
    display: flex;

  }

  .la-instagram {
    color: white;
  }

  .la-behance {
    color: white;
  }

  .la-linkedin {
    color: white;
  }

  .la-whatsapp{
    color: white;
  }

  .icon_instagram, .icon_youtube, .icon_behance, .icon_linkedin, .icon_whatsapp{
    border-radius: 25px;
    margin: 2rem;
    
  }

  .icon_instagram{
    background: #d62976;
  }

  .icon_youtube{
    background: #E63946;
  }

  .icon_behance{
    background: black;
  }

  .icon_linkedin{
    background: #0077b5;
  }

  .icon_whatsapp{
    background: #25d366;
  }

.social-links{
    display: grid;

    align-items: center;
    overflow: hidden;

}

.form{
    display: grid;

    align-items: center;
    overflow: hidden;
}

.Soctex{
    color: white; 
}

@media only screen and (max-width: 1200px){
    .nav-icons{
      display: none;
    }
  }
  

  @media only screen and (max-width: 960px){
    .nav-menu-2 a, .nav-menu{
      display: none;
    }
    .nav-menu-2 label {
      display: inline-block;
    }
    .recipe, .contact, .info-inner{
      grid-template-columns: 100%;
    }
  
    .recipe-desc{
      padding-right: 5rem;
    }
    .contact banner{
      height: 700px;
    }

    .icon_instagram, .icon_youtube, .icon_behance, .icon_linkedin { 
        width: 70%; 
    } 
  }
  
  
  @media only screen and (max-width: 720px){
    .recipe-desc{
      padding-right: 0;
    }
    h1{
        font-size: 2rem;
    }    

    h2{
        font-size: 1rem;
    }

    .nav-banner {
        color: #fff;
        font-size: 1.25rem;
    }

    .Soctex{
        display: none;
        /*font-size: 1.5rem;*/

    }

    .lab {
        font-size: 500%;
        text-align: center;
        text-decoration: none;
        display: flex;
    
      }

      .icon_instagram, .icon_youtube, .icon_behance, .icon_linkedin, .icon_whatsapp{
        border-radius: 10px;
        margin: 2rem;
        display: inline-block;
      }

      table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
      }
      .giphy-embed{
        width: 200px;
        height: 200px;
      }
      .logo{
        width: 80%;
      }
  }