.custom-carousel-bg {
    background-color: #e0f2f7;
    padding-top: 5rem;
    padding-bottom: 1rem;
    position: relative;
    /* Responsive padding handled by media queries below */
    padding-left: 2.5rem; /* Base padding */
    padding-right: 2.5rem; /* Base padding */
}
.carousel-item {
    min-height: 300px;
}

/* Text Styling */
.text-intro { /* Replaces text-lg font-semibold text-gray-700 */
    font-size: 1.125rem;
    font-weight: 600;
    color: #495057; /* Bootstrap gray-700 */
}
.discount-text {
    font-size: 4rem;
    font-weight: 900;
    color: #1e97ff;
    line-height: 1;
    margin-top: 0.25rem; /* Replaces my-1 */
    margin-bottom: 0.25rem; /* Replaces my-1 */
}
.offer-title { /* Replaces text-xl font-bold text-gray-800 */
    font-size: 1.25rem;
    font-weight: 700;
    color: #212529; /* Bootstrap gray-900 */
    margin-bottom: 0.5rem; /* Replaces mb-2 */
}
.offer-subtitle { /* Replaces text-xs text-gray-500 */
    font-size: 0.75rem;
    color: #6c757d; /* Bootstrap gray-600 */
    margin-bottom: 1.5rem; /* Replaces mb-4 */
}

/* Button Styling */
.btn-custom-green {
    background-color: #1e97ff;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 700;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Ensure link looks like a button */
}
.btn-custom-green:hover {
    background-color: #1e97ff;
    color: white;
}

/* Feature List Styling */
.feature-list {
    /* Replaces list-none p-0 text-sm text-gray-600 */
    padding: 0;
    list-style: none;
    font-size: 0.875rem;
    color: #6c757d; /* Bootstrap gray-600 */

    /* Replaces grid grid-cols-1 sm:grid-cols-2 gap-x-4 */
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 column */
    gap: 0 1rem; /* Horizontal gap only */
}
.feature-list li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}
.feature-list svg {
    margin-right: 0.5rem;
    color: #1e97ff;
    flex-shrink: 0; /* Prevent icon shrinking */
}

/* Image Styling */
.img-placeholder { /* Styles for placeholder if needed */
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     min-height: 250px;
     background-color: #cbd5e1;
     border-radius: 0.5rem;
     color: #475569;
     font-size: 1.25rem;
     font-weight: 700;
}


/* Carousel Controls */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    padding: 10px;
    width: 2.5rem;
    height: 2.5rem;
    background-size: 60% 60%;
}
.carousel-control-prev {
    left: -10rem;
}
.carousel-control-next {
    right: -10rem;
}

/* Responsive Adjustments */
@media (min-width: 576px) { /* Bootstrap 'sm' breakpoint */
     .feature-list {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on sm and up */
    }
}

@media (min-width: 768px) { /* Bootstrap 'md' breakpoint */
    .custom-carousel-bg {
         padding-left: 5rem !important; /* Simulate md:px-20 */
         padding-right: 5rem !important; /* Simulate md:px-20 */
    }
}

 @media (min-width: 992px) { /* Bootstrap 'lg' breakpoint */
    .custom-carousel-bg {
         padding-left: 8rem !important; /* Simulate lg:px-32 */
         padding-right: 8rem !important; /* Simulate lg:px-32 */
    }
}

@media (max-width: 768px) {
    .carousel-control-prev {
        left: -1rem;
    }
    .carousel-control-next {
        right: -1rem;
    }
    /* Keep existing custom padding for smaller screens */
     .custom-carousel-bg {
         padding-left: 2.5rem !important;
         padding-right: 2.5rem !important;
    }
}
 @media (max-width: 576px) {
    .carousel-control-prev {
        left: 0rem;
    }
    .carousel-control-next {
        right: 0rem;
    }
     .custom-carousel-bg {
         padding-left: 1.5rem !important;
         padding-right: 1.5rem !important;
    }
     .discount-text {
        font-size: 3rem;
    }
    /* Adjust column padding on small screens */
    .col-md-6.p-custom-responsive {
         padding: 1.5rem !important;
    }
 }

.carousel img {
    height: 550px; /* Adjust to desired height */
    width: 100%;
    object-fit: contain;
}

@media (max-width: 768px) {
    .carousel img {
        height: auto;
        max-height: 400px;
        object-fit: cover;
    }
}