@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,900;1,500&display=swap');

:root {
--primary: #9C1F29;
--secondary: #454B4F;
--text:#252525;

}

body{
  font-family: 'Roboto', sans-serif;
  font-size:1rem;
  color:var(--text);
  overflow-x:hidden;
  background: url(../img/leaves.svg), url(../img/mainbg.jpg), url(../img/leaves.svg);
  background-position:left top, left top, right top;
  background-repeat: no-repeat, repeat, no-repeat;
  background-attachment: fixed, scroll, fixed;
}

/*.leavesbg{
  background:url(../img/leaves.svg) no-repeat top left;
  position:absolute;
  display:block;
  width:100%;
  min-height:598px;
  background-attachment: fixed;
  z-index:99;
}*/

h1{
  font-size: 5.8rem;
  text-transform:uppercase;
  color:#7D3150;
}

h2{
  font-size: max(2vw , 2rem);
  font-weight:700;
  color:var(--primary);
}

h3{
  font-size:1.57rem;
  font-weight:600;
  color:var(--primary);
}



header{
background: rgb(203,222,229);
background: linear-gradient(90deg, rgba(203,222,229,1) 40%, rgba(196,216,223,1) 100%);
font-family: 'Roboto', sans-serif;
border-radius:8px;
max-width:1440px;
width:100%;
margin:30px auto;
}

header img{
  width:70%;
}

.hero-img{
  background:url(../img/hero-img.jpg) no-repeat right;
  display:block;
  background-size:cover;
  min-height:600px;
}


header h1{
  font-weight:300;
  color:var(--secondary);
}

header h1 strong, .highlight{
  color:var(--primary);
  font-weight:900;
}

header span{
  background: #FAF332;
  padding:8px 16px;
  font-weight: 600;
  color:var(--secondary);
  font-size:2.5rem;
  max-width:600px;
  width:100%;
  display:block;
  margin:0 auto;
}


.leaf{
  width:25px;
  height:25px;
  float:left;
  margin-right:10px;
}



.box-shadow{
  box-shadow: 0px 6px 8px #D6E5F0;
}

table, .bg-light{
  background: rgba( 255, 255, 255, 0.65 ) !important;
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}

th{
  color:var(--primary);
}

a, a:hover{
  text-decoration:none;
}

.bg-ingredients{
  border-radius:8px 0 8px 0;
background: rgba( 255, 255, 255, 0.4 );
backdrop-filter: blur( 20px );
-webkit-backdrop-filter: blur( 20px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.50 );
}

.btn-primary{
  background: var(--primary);
  border-color:var(--primary);
  transition:0.3s ease-in-out;
}

.btn-primary:hover{
  background:transparent;
   border-color:var(--primary);
   color:var(--primary);
}

@media(max-width:1200px){
  header{
    background-position:30% ;
  }
}


@media(max-width:991px){
  header{
    background: rgb(255,254,240);
    background: linear-gradient(0deg, rgba(255,254,240,1) 40%, rgba(225,242,249,1) 100%);
    padding:30px 0px;
    transform: none;
    margin-top:0;
  }

  h1{
    font-size:2.5rem;
  }

  header span{
    font-size:1.8rem;
  }

  .hero-img{
    background:none;
    min-height:auto;
  }


  .bg-light{
    background:rgba(255,255,255,0.85) !important;
  }

}