/* Base Slide Configuration */
 .carousel-slide {
     height: 25rem;
     position: relative;
     overflow: hidden;
 }

 .carousel-bg {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: center;
     z-index: 1;
 }

 /* The Green Diagonal Panel Overlay */
 .carousel-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg,
             #02a837 0%,
             /* Slightly lighter/vibrant top-left */
             #01862b 60%,
             /* Your anchor brand green */
             #01611e 100%
             /* Rich, deeper shadow bottom-right */
         );
         opacity: 0.80;
     z-index: 2;
 }

 /* Text & Button Container Layer */
 .carousel-caption-custom {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-end;
     /* Right align on desktop */
     text-align: right;
     padding: 2rem;
     z-index: 3 !important;
     /* Pushes links in front of the overlay */
 }

 /* Action button design aesthetics */
 .unza-diagonal-btn:hover {
     background-color: #ffffff !important;
     color: #007A33 !important;
     border-color: #ffffff !important;
 }

 /* Desktop View adjustments */
 @media (min-width: 992px) {
     .carousel-slide {
         height: 29rem;
     }

     .carousel-overlay {
         background: linear-gradient(135deg,
                 #02a837 0%,
                 /* Slightly lighter/vibrant top-left */
                 #01862b 60%,
                 /* Your anchor brand green */
                 #01611e 100%
                 /* Rich, deeper shadow bottom-right */
             );
         opacity: 0.80;
         clip-path: polygon(55% 0, 100% 0, 100% 100%, 35% 100%);
     }

     .carousel-caption-custom {
         padding-right: 5rem;
         /* Safe gap away from the narrow right arrow clickzone */
     }
 }

 /* Mobile & Tablet States */
 @media (max-width: 991px) {
     .carousel-slide {
         height: 22rem;
     }

     .carousel-caption-custom {
         align-items: center;
         /* Center-aligning content looks best on mobile */
         text-align: center;
     }
 }

 /* Narrowing the clickable footprints of the native Bootstrap arrow wrappers */
 #unzaDiagonalCarousel .carousel-control-prev,
 #unzaDiagonalCarousel .carousel-control-next {
     width: 6%;
     z-index: 4;
     /* Keeps arrow controls safely clickable above the slide elements */
 }