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

:root {
--primary: #C43E88;
--secondary: #EEF7FF;
--text:#573549;

}

body{
  font-family: 'Raleway', sans-serif;
  font-size:1rem;
  color:var(--text);
  overflow-x:hidden;
}

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 right no-repeat;
background-size:cover;
font-family: 'Roboto', sans-serif;
text-align:center;
padding:50px;
}


header h1{
  font-weight:300;
}

header h1 strong{
  color:#321527;
  font-weight:900;
}

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

.ingredients-bg{
  background: url(../img/woman-img-2.jpg) top left no-repeat;
  background-size:contain;
  padding:30px 0;
}


.main2{
  background:#FEFEFE url(../img/bg-ingredients.jpg) center no-repeat;
  padding:30px 0;
  background-size:cover;
  background-attachment: fixed;
}

.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:1440px){
  section.ingredients-bg {
    background-position: -90%;
}
}

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


@media(max-width:991px){
  header{
    background: rgb(238,247,255);
  background: linear-gradient(0deg, rgba(238,247,255,1) 46%, rgba(204,220,246,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%;
  }
}