updated testimonial styling

src/Pages/Testimonial.css

@@ -1,124 +1,169 @@
-*{
-    margin:0;
-    padding: 0;
-    font-family: 'poppins', sans-serif ; 
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Open+Sans:wght@400;500&display=swap');
+
+.testimonial {
+    background-color: #f5e6d3;
+    padding: 80px 0;
+    background-image: 
+        linear-gradient(rgba(245, 230, 211, 0.9), rgba(245, 230, 211, 0.9)),
+        url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23a87d5a' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
 }
 
-.testimonial{
-   background:#f8f8f8;
-   padding: 2rem 0;
+.testimonial .container {
+    max-width: 1200px;
+    margin: 0 auto;
 }
-h1{
+
+.testimonial h1 {
     text-align: center;
-    color: #7c2214;
+    color: #5c3d2e;
+    font-family: 'Playfair Display', serif;
+    font-size: 2.8rem;
+    margin-bottom: 50px;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+    position: relative;
 }
 
-.container{
-    margin-top: 5%;    
+.testimonial h1::after {
+    content: '☕';
+    display: block;
+    font-size: 1.5rem;
+    margin-top: 10px;
+    text-shadow: none;
+}
+
+.single {
+    background: #fff;
+    padding: 30px;
+    border-radius: 15px;
+    box-shadow: 0 8px 16px rgba(92, 61, 46, 0.1);
+    margin: 15px;
+    transition: all 0.3s ease;
+    border: 1px solid #e6d5c3;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.single:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 12px 20px rgba(92, 61, 46, 0.15);
+}
+
+.image {
+    text-align: center;
     margin-bottom: 20px;
 }
 
-.image-text{
-    width:100% ;
-    height: 300px;
-    display: block;
+.image img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 4px solid #b68f40;
+    transition: transform 0.3s ease;
+}
+
+.single:hover .image img {
+    transform: scale(1.05);
+}
+
+.image-text {
     text-align: center;
-    padding: 40% 5%;
-    background: white;
-    color:black ;
-    border-radius: 15px;
-    box-shadow: 0px 2px 6px 3px rgba(0, 0, 0, 0.1);
-    animation: fadeInUp 1s ease-in-out; /* Added animation */
-
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
 }
-.image:hover {
-    transform: none;
-  }
 
-.image-text h2{
-    font-size: 25px;
-    text-transform: uppercase;
-    letter-spacing: 2px;
+.image-text h2 {
+    color: #5c3d2e;
+    font-size: 1.4rem;
+    margin-bottom: 10px;
+    font-family: 'Playfair Display', serif;
+    font-weight: 600;
 }
 
-.image-text p{
-    font-size: 14px;
+.image-text .rating {
+    color: #b68f40;
+    font-size: 1.2rem;
+    margin-bottom: 15px;
 }
 
-.single{
-    position: relative;
-    margin-bottom: 50px;
-
+.image-text .testimonial-text {
+    color: #6b4f3b;
+    font-size: 1rem;
+    line-height: 1.7;
+    font-family: 'Open Sans', sans-serif;
+    margin-bottom: 0;
+    font-style: italic;
+    flex-grow: 1;
 }
 
-.single:hover  {
-    transform: scale(1.05); 
-    box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.2);
-    transition: all 0.3s ease-in-out; 
+.carousel {
+    padding-bottom: 50px;
 }
 
-.image{
-    position: absolute;
-    width:100px;
-    height: 100px;
-    border: 3px solid #7c2214;
-    overflow: hidden;
-    top:15px;
-    left:125px;
-    border-radius: 50%;
-    animation: bounceIn 1s ease-in-out; 
+.carousel-indicators {
+    bottom: -50px;
 }
 
-.image img{
-    width: 100%;
-    object-fit: cover;
+.carousel-indicators button {
+    background-color: #b68f40 !important;
+    width: 10px !important;
+    height: 10px !important;
+    border-radius: 50% !important;
+    margin: 0 5px !important;
+    opacity: 0.5;
+    transition: opacity 0.3s ease;
 }
-.row{
-    margin-bottom: 20px;
+
+.carousel-indicators button.active {
+    opacity: 1;
 }
 
-.carousel-indicators{
-    left: 0;
-    top: auto;
-    bottom: -70px;
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+    background-color: #b68f40;
+    border-radius: 50%;
+    padding: 25px;
+    transition: all 0.3s ease;
 }
 
-@keyframes fadeInUp {
-    0% {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-    }
+.carousel-control-prev,
+.carousel-control-next {
+    opacity: 0.7;
+    width: 5%;
 }
 
-@keyframes bounceIn {
-    0%, 20%, 40%, 60%, 80%, 100% {
-        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-    }
-    0% {
-        opacity: 0;
-        transform: scale3d(.3, .3, .3);
+.carousel-control-prev:hover,
+.carousel-control-next:hover {
+    opacity: 1;
+}
+
+@media (max-width: 768px) {
+    .testimonial {
+        padding: 40px 0;
     }
-    20% {
-        transform: scale3d(1.1, 1.1, 1.1);
+
+    .testimonial h1 {
+        font-size: 2rem;
+        margin-bottom: 30px;
     }
-    40% {
-        transform: scale3d(.9, .9, .9);
+
+    .single {
+        margin: 10px;
+        padding: 20px;
     }
-    60% {
-        opacity: 1;
-        transform: scale3d(1.03, 1.03, 1.03);
+
+    .image img {
+        width: 80px;
+        height: 80px;
     }
-    80% {
-        transform: scale3d(.97, .97, .97);
+
+    .image-text h2 {
+        font-size: 1.2rem;
     }
-    100% {
-        opacity: 1;
-        transform: scale3d(1, 1, 1);
+
+    .image-text .testimonial-text {
+        font-size: 0.9rem;
     }
-}
+}