*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{

  font-family:
  'Poppins',
  sans-serif;

  background:
  linear-gradient(
    to bottom,
    #FFE5EC,
    #FFC2D1,
    #FFB3C6
  );

  overflow-x:hidden;

  color:#5a2a38;

}

img{
  width:100%;
  display:block;
}

/* NAVBAR */

.navbar{

  width:100%;

  padding:20px 8%;

  display:flex;

  justify-content:space-between;

  align-items:center;

  background:#FFE5EC;

  position:sticky;

  top:0;

  z-index:1000;

  box-shadow:
  0 5px 20px rgba(0,0,0,0.05);

}

.logo-img{
  width:170px;
}

nav{

  display:flex;

  gap:30px;

}

nav a{

  text-decoration:none;

  color:#5a2a38;

  font-weight:600;

}

.search-box input{

  padding:12px 18px;

  border:none;

  border-radius:50px;

  background:white;

  outline:none;

}

/* CART */

.cart-icon{

  background:
  linear-gradient(
    135deg,
    #FF8FAB,
    #FB6F92
  );

  color:white;

  padding:12px 18px;

  border-radius:50px;

  cursor:pointer;

  font-weight:700;

}

.cart-panel{

  position:fixed;

  top:100px;

  right:-400px;

  width:320px;

  background:#FFE5EC;

  border-radius:25px;

  padding:25px;

  box-shadow:
  0 20px 50px rgba(0,0,0,0.1);

  transition:0.4s;

}

.cart-panel.active{
  right:20px;
}

.cart-panel ul{
  list-style:none;
  margin:20px 0;
}

.cart-panel li{
  margin-bottom:10px;
}

.cart-total{
  font-size:1.2rem;
  font-weight:700;
  margin-bottom:20px;
}

/* BUTTONS */

.primary-btn,
.product-card button,
.contact-form button{

  padding:14px 28px;

  border:none;

  border-radius:50px;

  background:
  linear-gradient(
    135deg,
    #FF8FAB,
    #FB6F92
  );

  color:white;

  cursor:pointer;

  font-weight:600;

  transition:0.3s;

}

.primary-btn:hover,
.product-card button:hover,
.contact-form button:hover{

  transform:translateY(-3px);

}

/* HERO */

.hero{

  min-height:100vh;

  padding:80px 8%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:50px;

}

.hero-content{
  flex:1;
}

.hero-content h1{

  font-size:4rem;

  color:#FB6F92;

  margin-bottom:20px;

}

.hero-content p{

  font-size:1.2rem;

  line-height:1.8;

  margin-bottom:30px;

}

.hero-image{
  flex:1;
}

.hero-image img{

  border-radius:30px;

  animation:
  float 4s ease-in-out infinite;

}

@keyframes float{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-15px);
  }

  100%{
    transform:translateY(0px);
  }

}

/* TITLES */

.section-title{

  text-align:center;

  font-size:3rem;

  color:#FB6F92;

  margin-bottom:60px;

}

/* PRODUCTS */

.products{
  padding:100px 8%;
}

.product-grid{

  display:grid;

  grid-template-columns:
  repeat(
    auto-fit,
    minmax(300px,1fr)
  );

  gap:30px;

}

.product-card{

  background:#FFE5EC;

  padding:30px;

  border-radius:30px;

  text-align:center;

  box-shadow:
  0 10px 30px rgba(251,111,146,0.15);

  transition:0.4s;

}

.product-card:hover{

  transform:translateY(-10px);

}

.product-card img{

  border-radius:20px;

  margin-bottom:20px;

}

.product-card h3{

  font-size:2rem;

  margin-bottom:15px;

}

.product-card p{

  margin-bottom:20px;

}

/* ABOUT */

.about{

  padding:100px 8%;

  display:flex;

  align-items:center;

  gap:60px;

  background:#FFC2D1;

}

.about-image,
.about-content{
  flex:1;
}

.about-image img{
  border-radius:30px;
}

.about-content h2{

  font-size:3rem;

  color:#FB6F92;

  margin-bottom:20px;

}

/* GALLERY */

.gallery{
  padding:100px 8%;
}

.gallery-grid{

  display:grid;

  grid-template-columns:
  repeat(
    auto-fit,
    minmax(250px,1fr)
  );

  gap:25px;

}

.gallery-grid img{

  border-radius:25px;

  transition:0.4s;

}

.gallery-grid img:hover{

  transform:scale(1.05);

}

/* CONTACT */

.contact{

  padding:100px 8%;

  background:#FFE5EC;

}

.contact-form{

  max-width:700px;

  margin:auto;

  display:flex;

  flex-direction:column;

  gap:20px;

}

.contact-form input,
.contact-form textarea{

  padding:18px;

  border-radius:15px;

  border:none;

}

/* FOOTER */

footer{

  background:#FB6F92;

  color:white;

  text-align:center;

  padding:40px 20px;

}

.footer-logo{

  width:180px;

  margin:0 auto 20px;

}

/* RESPONSIVE */

@media(max-width:991px){

  .hero,
  .about{

    flex-direction:column;

  }

  nav{
    display:none;
  }

}

@media(max-width:600px){

  .hero-content h1{

    font-size:2.5rem;

  }

  .section-title{

    font-size:2rem;

  }

}