*{
/*   border:1px dotted red; */
}

body {
  background-color: rgb(255, 245, 251);
}

 header {
    display: flex;
    align-items: center;
    background-color: rgb(246, 172, 219);
    padding:15px; 
   justify-content: space-between;
}

.icon-group{
  display:flex;
  gap:20px;
}



h1.header {
  font-family:"Lily Script One", sans-serif;
  text-align: center;
}

h2.subheader {
  text-align: center;
}

p {
 font-family:"Big Shoulders",sans-serif;
 line-height: 1.4rem;
}

p.card-description {
  text-align: center;
}


card-description-2{
  color: black;
}


main {
  display: grid;
  grid-template-columns: 1fr;
  font-family: sans-serif;
}

.section {
  border-radius: 16px;
  overflow: hidden;
  
}




.flex-container {
  display: flex;
}

.text-content-1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  width: 30%;
}

.section-1 {
/*   background: #ACA6D6; */
  border-radius: 16px;
    background-image: url("https://cdn.shopify.com/s/files/1/0770/2163/files/hkhw2_600x600.jpg?v=1631828050");
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}

.image-container-1 {
  position: relative;
}

.flex-container-1 {
/*   display: flex; */
/*   justify-content: flex-end; */
}

.text-content-1 {
  float: right;
  background: #ACA6D6;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  width: 30%;
  
}

button1 {
  padding: 16px 32px;
  border-radius: 50px;
  color: white;
  background: #817CA4;
  font-family:"Big Shoulders",sans-serif;
}
button2 {
  padding: 16px 32px;
  border-radius: 50px;
  color: black;
  background: #B0D1DA;
  font-family:"Big Shoulders",sans-serif;
}
button3 {
  padding: 16px 32px;
  border-radius: 50px;
  color: white;
  background: #BD5E02;
  font-family:"Big Shoulders",sans-serif;
}
.section-2 {
/*   background: #ACA6D6; */
  border-radius: 16px;
    background-image: url(https://i.pinimg.com/736x/03/b2/07/03b2078fc9057c7c5d434d4958159fec.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.text-content-2 {
  float: right;
  background: #B4DEDE;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  width: 30%;
  color: black;
}

.image-container-2{
  position: relative;
}
  .section-3 {
/*   background: #ACA6D6; */
  border-radius: 16px;
    background-image: url("https://th.bing.com/th/id/R.816bad0a1526e73b7a2683e78223f2bb?rik=DOqckZ7%2fG%2fbNvA&riu=http%3a%2f%2fwww.sanrio.com%2fcdn%2fshop%2ffiles%2fSeason_Friendship_Fall_7581_Brown_EX_1200x1200_19dfa4e1-6b65-44bd-b816-9c665eaf4472_600x.jpg%3fv%3d1729886633&ehk=qw%2fC2MsqJPf6wIOrHDgOD8HuJGUof7IIBFHHY13XXNo%3d&risl=&pid=ImgRaw&r=0");
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.text-content-3{
  float: right;
  background: #623000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  width: 30%;
  color:white;
}
  
.image-container-3{
}
  
@media (min-width:700px)
{
  main{grid-template-columns:1fr 1fr 1fr}
}

.cart-container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.cart-title {
  font-size: 40px;
  margin-bottom: 30px;
  font-family: Arial, Helvetica, sans-serif;
}

.cart-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
  gap: 30px;
}

.product-img {
  width: 250px;
  border-radius: 15px;
}

.item-details {
  text-align: left;
  font-size: 18px;
}

.price {
  font-size: 22px;
  font-weight: bold;
  margin: 10px 0;
}

.quantity {
  padding: 5px;
  border-radius: 5px;
}

.remove-btn {
  margin-top: 10px;
  border: none;
  padding: 10px 15px;
  border-radius: 8px;
  background-color: #ff4d6d;
  color: white;
  cursor: pointer;
}

.cart-summary {
  background: white;
  padding: 25px;
  border-radius: 15px;
  width: 300px;
  margin: 0 auto;
  font-size: 20px;
}

.checkout-btn {
  margin-top: 15px;
  padding: 12px 18px;
  background-color: #ff4d6d;
  border: none;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  font-size: 18px;
}

@media screen and (max-width: 700px) {
  .cart-item {
    flex-direction: column; 
    align-items: center;
    gap: 15px;
  }

  .product-img {
    width: 90%; 
    max-width: 300px;
  }

  .item-details {
    text-align: center;
  }

  .cart-summary {
    width: 90%;
  }
}
 @media screen and (max-width: 700px) {
            .profile-img {
                width: 150px;
                height: 150px;
            }

            .profile-text {
                font-size: 20px;
                margin-bottom: 20px;
            }

            .profile-buttons button {
                width: 120px;
                font-size: 16px;
            }

            .header {
                padding: 10px 15px;
            }
        }