.image-section {
   position: relative;
   margin: 80px auto;
 }

 .main-image {
   width: 100%;
   border-radius: 0;
   position: relative;
   z-index: 2;
 }

 .bg-shape {
   position: absolute;
   z-index: 1;
 }

 .bg-shape.pink {
   background-color: #F4DBE9;
   /* Light pink */
   width: 75%;
   height: 60px;
   top: -40px;
   left: 0;
 }

 .bg-shape.purple {
   background-color: #8561A9;
   /* Purple */
   width: 100px;
   height: 60px;
   bottom: -40px;
   right: 7px;
 }

 /* Decorative Dots */
 .dot {
   border-radius: 50%;
   position: absolute;
 }

 .purple-dot {
   top: -90px;
   left: 50%;
   transform: translateX(-50%);
 }

 .pink-dot {
   top: 80%;
   right: -40px;
 }

 .orange-dot {
   bottom: -40px;
   left: 60px;
 }

 .cat21 {
   position: absolute;
   left: -70px;
   height: 150px;
   bottom: -22%;
 }

 .about-content {
   position: relative;
 }

 .endorsement-section {
   background: url('../img/about/about2.svg') no-repeat center center/cover;
   /* replace with your image */
   position: relative;
   height: 300px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .endorsement-section::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(133, 97, 169, 0.77);
   /* purple overlay */
 }

 .overlay {
   position: relative;
   z-index: 2;
   text-align: center;
   color: white;
   padding: 20px;
 }

 .endorsement-content h2 {
   font-size: 40px;
   margin-bottom: 10px;
   color: #fff;
   font-family: "Itim", cursive;
   letter-spacing: 1px;
   text-transform: uppercase;
 }

 .endorsement-content h2::after {
   content: "";
   display: block;
   width: 80px;
   height: 2px;
   margin: 8px auto;
   background: white;
   opacity: 0.7;
 }

 .product-categories li::before {
   content: "";
   width: 7px;
   height: 7px;
   background-color: #8561A9;
   /* 77% opacity purple */
   border-radius: 50%;
   position: absolute;
   left: 0;
   top: 8px;
   transition: all 0.3s ease;
 }

 .rose h1 {
   font-size: 22px;
   color: #000;
   font-family: "Roboto", sans-serif;
 }

 .rose h2 {
   font-size: 16px;
   color: #000;
   font-family: "Roboto", sans-serif;
 }

 .endorsement-content p {
   font-size: 20px;
   color: #fff;
   font-family: "Roboto", sans-serif;
   margin: 30px auto 0;
 }

 .product-categories {
   list-style: none;
   padding-left: 0;
   margin-top: 10px;
 }

 .product-categories li {
   position: relative;
   padding-left: 20px;
   font-family: "Roboto", sans-serif;
   color: #000;
   margin-bottom: 8px;
   font-size: 15px;
   line-height: 1.4;
 }

 .endorsement-content strong {
   font-weight: 600;
 }
 @media screen and (min-width: 992px) and (max-width: 1199px) {  .rose p {
        font-size: 24px !important;
        color: #000;
        font-family: "Roboto", sans-serif;
        line-height: 34px !important;
    }
.about-content p {
    color: #000;
    font-size: 24px !important;
    font-family: "Roboto", sans-serif;
    line-height: 34px !important;
}
.about-content h1 {
    font-family: "Itim", cursive;
    font-size: 32px !important;
    line-height: 32px !important;
    color: #8561A9;
    text-transform: uppercase;
}

.rose h1 {
    font-size: 25px !important;
    color: #000;
    line-height: 35px !important;
    font-family: "Roboto", sans-serif;
}
.rose h2 {
    font-size: 25px !important;
    color: #000;line-height: 35px !important;
    font-family: "Roboto", sans-serif;
}
.product-categories li {
    position: relative;
    padding-left: 20px;
    font-family: "Roboto", sans-serif;
    color: #000;
    margin-bottom: 8px;
    font-size: 22px !important;
    line-height:32px !important;
}}
@media screen and (max-width: 480px) {
  .cat{position: absolute;right: 0px !important;}
  .rose img{text-align: center !important;}
  .pink-dot{display: none !important;}
 }
@media screen and (min-width: 481px) and (max-width: 767px) {
  .cat{position: absolute;right: 0px !important;}
  .pink-dot{display: none !important;}
   .rose img{text-align: center !important;}
 }
@media screen and (min-width: 768px) and (max-width: 991px) {  .rose p {
        font-size: 20px !important;
        color: #000;
        font-family: "Roboto", sans-serif;
        line-height: 30px !important;
    }
.about-content p {
    color: #000;
    font-size: 20px !important;
    font-family: "Roboto", sans-serif;
    line-height: 30px !important;
}
.about-content h1 {
    font-family: "Itim", cursive;
    font-size: 28px !important;
    line-height: 38px !important;
    color: #8561A9;
    text-transform: uppercase;
}

.rose h1 {
    font-size: 21px !important;
    color: #000;
    line-height: 31px !important;
    font-family: "Roboto", sans-serif;
}
.rose h2 {
    font-size: 21px !important;
    color: #000;line-height: 31px !important;
    font-family: "Roboto", sans-serif;
}
.product-categories li {
    position: relative;
    padding-left: 20px;
    font-family: "Roboto", sans-serif;
    color: #000;
    margin-bottom: 8px;
    font-size: 18px !important;
    line-height:28px !important;
} }
 @media screen and (min-width: 1440px) and (max-width: 1919px) {
     .rose p {
        font-size: 26px !important;
        color: #000;
        font-family: "Roboto", sans-serif;
        line-height: 36px !important;
    }
.about-content p {
    color: #000;
    font-size: 26px !important;
    font-family: "Roboto", sans-serif;
    line-height: 36px !important;
}
.about-content h1 {
    font-family: "Itim", cursive;
    font-size: 34px !important;
    line-height: 34px !important;
    color: #8561A9;
    text-transform: uppercase;
}

.rose h1 {
    font-size: 27px !important;
    color: #000;
    line-height: 37px !important;
    font-family: "Roboto", sans-serif;
}
.rose h2 {
    font-size: 27px !important;
    color: #000;line-height: 37px !important;
    font-family: "Roboto", sans-serif;
}
.product-categories li {
    position: relative;
    padding-left: 20px;
    font-family: "Roboto", sans-serif;
    color: #000;
    margin-bottom: 8px;
    font-size: 24px !important;
    line-height:34px !important;
}
 }
 @media screen and (min-width: 1920px) { 
    .rose p {
        font-size: 26px !important;
        color: #000;line-height: 36px !important;
        font-family: "Roboto", sans-serif;
    }
.about-content p {
    color: #000;
    font-size: 26px !important;
    font-family: "Roboto", sans-serif;
    line-height: 36px !important;
}
.about-content h1 {
    font-family: "Itim", cursive;
    font-size: 36px !important;
    color: #8561A9;
    text-transform: uppercase;
     line-height: 46px !important;
}

.rose h1 {
    font-size: 32px !important;
    color: #000;
     line-height: 42px !important;
    font-family: "Roboto", sans-serif;
}
.rose h2 {
    font-size: 32px !important;
    color: #000;
     line-height: 42px !important;
    font-family: "Roboto", sans-serif;
}
.product-categories li {
    position: relative;
    padding-left: 20px;
    font-family: "Roboto", sans-serif;
    color: #000;
    margin-bottom: 8px;
    font-size: 26px !important;
    line-height:36px !important;
} }