.container {
            margin-left: auto;
            margin-right: auto;
            max-width: 72rem !important;
            padding-left: 1rem;
            padding-right: 1rem;
            width: 100%
        }


        @media(min-width: 640px) {
            .container {
                padding-left: 1rem;
                padding-right: 1rem
            }
        }

        .marquee img {
            width: 100%;
            height: auto;
            aspect-ratio: 3/4;
            -o-object-fit: cover;
            object-fit: cover;
        }

        .marquee::-webkit-scrollbar {
            width: 0;
            height: 0;
        }




        .lazy-fade-in {
            opacity: 0;

        }

        .lazy-fade-in.visible {
            opacity: 1;
        }


    /* Custom styles for the service links */
    /* Using flex and items-center for vertical alignment, text color, line height, and border bottom with Tailwind */
    /* .u-services ul li a { } - Replaced with Tailwind classes */

    /* Hover background and padding - requires custom CSS for padding change effect */
    .u-services ul li:hover {
        background: #7d0328; /* Original hover background color */
        
        transition: all 0.4s ease-in-out; /* Ensure transition applies */
    }

    /* Pointer icon container - using flex, margin, width, height, flex-shrink with Tailwind where possible */
    /* .u-services ul li .pointer { } - Mostly replaced with Tailwind classes */

     /* Icon rotation on hover - requires custom CSS for transform and transition delay */
     .pointer i {
        transition-property: transform; /* Transition for rotation */
        transition-delay: 0.4s; /* Delay for rotation */
    }

    

    /* Custom styles for the image positioning */
    .services-section {
        position: relative; /* Needed for absolute positioning of the image */
        z-index: 1;
    }

    .s-img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 190px; /* Original desktop width */
        z-index: 0; /* Ensure image is behind text */
    }

    .s-img img {
         /* Ensure image fills its absolute container and maintains aspect ratio */
        width: 100%;
        height: auto;
        display: block; /* Remove extra space below image */
    }


    /* Responsive adjustments for image positioning using media queries */
    @media (max-width: 768px) { /* md breakpoint equivalent */
        .s-img {
            width: 230px;
        }
    }

    @media (max-width: 425px) { /* Custom breakpoint for smaller mobile */
        .s-img {
            position: relative; /* Change to relative on mobile */
            width: 100%; /* Full width on mobile */
            margin-top: 20px; /* Add space above image */
            right: auto; /* Remove specific right positioning */
            bottom: auto; /* Remove specific bottom positioning */
            text-align: center; /* Center the image */
         }
         .s-img img {
             max-width: 230px; /* Limit max width on small screens */
             width: 100%; /* Ensure it's responsive within limits */
             height: auto;
             margin: 0 auto; /* Center image if its container is wider */
         }
         /* .u-services ul li a { } - Replaced with Tailwind classes */
    }

    @media (max-width: 375px) { /* Custom breakpoint for very small mobile */
        .s-img {
            width: 143px; /* Original very small mobile width */
             margin: 0 auto; /* Center image */
        }
         /* .u-services ul li a { } - Replaced with Tailwind classes */
    }

     /* Theme Color for the pink title bar pseudo-element */
    .coloroverlay-pink::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 60px; /* Adjust height as needed */
        background-color: #e91e63; /* Pink color for the title bar */
        z-index: 0; /* Ensure it's behind the title text */
    }
    /* Ensure title is above the pink bar */
    .services-section h2 {
         position: relative;
         z-index: 1;
    }

    /* Blink animation - requires custom CSS */
    @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0; }
        100% { opacity: 1; }
    }
    .blink {
        animation: blink 1s infinite;
    }





    /* Ensure the collapse content is hidden by default */
    .collapse:not(.show) {
        display: none;
    }

    /* Style for the expanded state if needed */
    .collapse.show {
        display: block;
    }

     /* Initial icon rotation for collapsed state */
    .faq-list a.collapsed i {
        transform: rotate(0deg);
    }

    /* Icon rotation for expanded state is handled by JS setting inline style */



        body {
            font-family: 'Inter', sans-serif;
        }
        /* Custom styles for the accordion functionality */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out; /* Smoother transition */
            padding-left: 1.5rem; /* Add padding to match question */
            padding-right: 1.5rem; /* Add padding to match question */
        }
        .faq-answer.active {
            max-height: 500px; /* Adjust based on expected content length */
            padding-bottom: 1rem; /* Add padding below answer when active */
        }