Add about carousel and interactive services gallery

css/style.css

@@ -426,6 +426,85 @@ section {
     justify-content: center;
 }
 
+.about-carousel {
+    width: 100%;
+    max-width: 900px;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+}
+
+.about-carousel .carousel-inner {
+    aspect-ratio: 3 / 2;
+}
+
+.about-carousel.carousel-fade .carousel-item {
+    transition: opacity 1.35s ease-in-out;
+}
+
+.about-carousel-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transform: scale(1.02);
+}
+
+.about-carousel .carousel-item.active .about-carousel-img,
+.about-carousel .carousel-item.carousel-item-next .about-carousel-img,
+.about-carousel .carousel-item.carousel-item-prev .about-carousel-img {
+    animation: aboutKenBurns 6.5s ease-out both;
+}
+
+@keyframes aboutKenBurns {
+    from {
+        transform: scale(1.02) translate3d(0, 0, 0);
+    }
+    to {
+        transform: scale(1.08) translate3d(0, -1.2%, 0);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .about-carousel.carousel-fade .carousel-item {
+        transition-duration: 0.01ms;
+    }
+
+    .about-carousel .carousel-item.active .about-carousel-img,
+    .about-carousel .carousel-item.carousel-item-next .about-carousel-img,
+    .about-carousel .carousel-item.carousel-item-prev .about-carousel-img {
+        animation: none;
+    }
+
+    .about-carousel-img {
+        transform: none;
+    }
+}
+
+.about-carousel .carousel-indicators {
+    margin-bottom: 0.8rem;
+}
+
+.about-carousel .carousel-indicators [data-bs-target] {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.8);
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.about-carousel .carousel-control-prev,
+.about-carousel .carousel-control-next {
+    width: 12%;
+}
+
+.about-carousel .carousel-control-prev-icon,
+.about-carousel .carousel-control-next-icon {
+    background-color: rgba(44, 44, 44, 0.45);
+    border-radius: 50%;
+    background-size: 55% 55%;
+}
+
 .about-img {
     width: 100%;
     max-width: 900px;
@@ -615,6 +694,109 @@ section {
     color: var(--accent-color);
 }
 
+.services-gallery-wrap {
+    margin-top: 36px;
+}
+
+.services-gallery-title {
+    font-size: 1.55rem;
+    color: var(--primary-color);
+    margin-bottom: 14px;
+    text-align: center;
+}
+
+.services-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 12px;
+}
+
+.services-gallery-item {
+    margin: 0;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+    background: var(--light-bg);
+    aspect-ratio: 4 / 5;
+}
+
+.services-gallery-button {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background: transparent;
+    padding: 0;
+    cursor: zoom-in;
+}
+
+.services-gallery-button:focus-visible {
+    outline: 2px solid var(--accent-color);
+    outline-offset: -2px;
+}
+
+.services-gallery-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    transition: transform 0.45s ease, filter 0.45s ease;
+}
+
+.services-gallery-item:hover .services-gallery-img {
+    transform: scale(1.05);
+    filter: saturate(1.05) contrast(1.03);
+}
+
+.services-modal-image {
+    max-width: 100%;
+    max-height: 82vh;
+    border-radius: 8px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
+}
+
+.services-modal-stage {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+}
+
+.services-modal-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 44px;
+    height: 44px;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(20, 20, 20, 0.52);
+    color: #fff;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background 0.2s ease, transform 0.2s ease;
+    z-index: 2;
+}
+
+.services-modal-nav:hover {
+    background: rgba(20, 20, 20, 0.72);
+}
+
+.services-modal-nav:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+}
+
+.services-modal-prev {
+    left: 14px;
+}
+
+.services-modal-next {
+    right: 14px;
+}
+
 /* Events Section */
 .section-events {
     background: var(--light-bg);
@@ -1158,6 +1340,10 @@ section {
         gap: 40px;
     }
 
+    .about-carousel {
+        max-width: 100%;
+    }
+
     .image-placeholder {
         width: 250px;
         height: 250px;
@@ -1189,6 +1375,24 @@ section {
         grid-template-columns: 1fr;
     }
 
+    .services-gallery {
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: 10px;
+    }
+
+    .services-modal-nav {
+        width: 40px;
+        height: 40px;
+    }
+
+    .services-modal-prev {
+        left: 8px;
+    }
+
+    .services-modal-next {
+        right: 8px;
+    }
+
     .events-content {
         grid-template-columns: 1fr;
         gap: 40px;
@@ -1225,6 +1429,11 @@ section {
         font-size: 2rem;
     }
 
+    .services-gallery {
+        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+        gap: 8px;
+    }
+
     .supplier-icon {
         font-size: 2rem;
         padding: 30px;