:root {
  --color-primary: #E6A5AA;   /* soft rose  */
  --color-secondary: #EBC4BB; /* light peach  */
  --color-accent: #ED5AAE;    /* vibrant pink  */
  --color-neutral: #EBD5BC;   /* warm beige */
  --color-highlight: #ED8872; /* coral orange  */
  --color-dark: #333333;      /* text color */
}
body {
font-family: 'Inter', sans-serif;
margin: 0;
padding: 0;
background-color: #fff0f5;
color:var(--color-neutral);
}
footer {
  text-align: right;
  font-style: italic;
  padding: 20px;
}
footer a {
  text-decoration: none;
  color: var(--color-dark);
}
footer a:hover {
  text-decoration: underline;
}


header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--color-primary);
border-radius: 20px;
padding: 20px 50px;
color: var(--color-dark);
font-style: italic;
border: solid var(--color-dark);
}

nav a {
  display: inline-block;        
  padding: 10px 20px;           
  margin: 5px;                  
  border: 2px solid var(--color-dark);    
  border-radius: 8px;           /* rounded corners */
  text-decoration: none;        
  color: var(--color-dark);              
  font-weight: 500;             
  


}
nav a:hover {
  background-color:var(--color-highlight) ;
  color: white;
}


.hero {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px;
font-style: italic;
}


.hero-text {
max-width: 50%;
color: var(--color-dark);
background-color: var(--color-primary);
border-radius: 20px;
padding: 20px;
text-align: center;
border: solid var(--color-dark);


}
.hero-text figure {
  mix-blend-mode: multiply;
  text-align: center;
}


.hero-text h1 {
font-size: 48px;
color: var(--color-dark);
font-style: italic;
font-family: 'Inter', sans-serif;
background-color: #ff69b4;
border-radius: 8px;


}


.hero-text h2 {
font-size: 28px;
margin-top: 20px;
color: var(--color-dark);
background-color: var(--color-neutral);
border-radius: 8px;
}


.hero-text p {
margin-top: 15px;
line-height: 1.6;
color: var(--color-dark);
font-size: 18px;
}


.hero-image {
width: 40%;
height: 400px;
background-color:var(--color-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #555;
border: solid var(--color-dark);
padding-left: 20px;
}
.hero-image figure {
  margin: 0; /* remove default margins */
  width: 100%; /* match the container width */
  height: 90%; /* match the container height */
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image figcaption {
  text-align: center;
}

.hero-image figure img {
  max-width: 200%;  
  max-height: 100%;  
  border-radius: 20px; 
  object-fit: cover;  
}