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

:root {
--primary: #1F4189;
--secondary: #1F4189;
--text:#363636;

}

body{
  font-family: 'Roboto', sans-serif;
  font-size:1rem;
  color:var(--text);
  overflow-x:hidden;
  background: url(../img/mainbg.jpg) repeat;
}

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

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

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

p{
  font-size:0.93rem;
  
}


header{
background: var(--secondary) url('../img/hero-img.jpg') top center no-repeat;
background-size:cover;
font-family: 'Roboto', sans-serif;
text-align:center;
padding:50px;
border-radius:0 0 150px 0;
}


header h1{
  font-weight:300;
  color:#fff;
}

header h1 strong, .highlight{
  color:#23304A;
  font-weight:900;
}

header span{
  background: #9C9C9E;
  padding:8px 16px;
  font-weight: 500;
  color:#fff;
  font-size:2.81rem;
  max-width:600px;
  width:100%;
  display:block;
  margin:0 auto;
}

.causes-bg{
  margin:50px 0;
  background:url(../img/img1.png) no-repeat right center;
  background-attachment: fixed;
}

.bg-light{
  background: #E7F2FF;
  border-radius:5px;
  padding:1rem;
  margin:20px 0;
}

.ingredients-bg{
  background: url(../img/ingredientsbg.jpg) top left no-repeat;
  background-size:cover;
  padding:80px 0;
  background-attachment: fixed;
}

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



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

table{
  background: rgba( 255, 255, 255, 0.65 );
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(198,228,240);
background: linear-gradient(0deg, rgba(198,228,240,1) 34%, rgba(109,213,250,1) 100%);

    padding:30px 0px;
    transform: none;
    margin-top:0;
  }

  h1{
    font-size:2.5rem;
  }

  header span{
    font-size:1.8rem;
  }

  .skew-fix{
    transform: none;
  }

  header img{
  position:relative;
  width:60%;
  }

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

  .causes-bg h2, .causes-bg p.mb-3{
    color:#fff;
    text-shadow:2px 1px 1px rgba(0,0,0,.8);
  }
}