:root {

            --primary-color: #3A4380;   

            --secondary-color: #F5C45C; 

            --accent-color: #ED3237;   

            --background-light: #f9f9f9;

            --item-margin: 1rem;

        }



        body {

            font-family: 'Inter', sans-serif;

            background-color: var(--background-light);

            margin: 0; 

            padding: 0; 

            box-sizing: border-box;

            display: flex;

            flex-direction: column; 

        }



        .page-title {

            background-color: var(--primary-color);

            color: white;

            padding: 40px 0;

            text-align: center;

        }



        .page-title.bg1 {

            background-size: cover;

            background-position: center;

        }



        .page-title h1 {

            font-size: 3rem;

            font-weight: 700;

            margin-bottom: 10px;

            color: white; 

        }



        .page-title h1 span {

            color: var(--secondary-color);

        }



        .breadcrumbs {

            background-color: rgba(0, 0, 0, 0.1);

            padding: 10px 0;

        }



        .breadcrumbs .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 0 15px;

        }



        .breadcrumbs ol {

            list-style: none;

            padding: 0;

            margin: 0;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 0.9rem;

        }



        .breadcrumbs ol li {

            margin: 0 5px;

        }



        .breadcrumbs ol li a {

            color: rgba(255, 255, 255, 0.7);

            text-decoration: none;

            transition: color 0.3s ease;

        }



        .breadcrumbs ol li a:hover {

            color: white;

        }



        .breadcrumbs ol li.current {

            color: var(--secondary-color);

            font-weight: 600;

        }



        .breadcrumbs ol li:not(:last-child)::after {

            content: "/";

            margin-left: 10px;

            color: rgba(255, 255, 255, 0.5);

        }





        .description {

            position: relative;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center; 

            gap: 30px;

            margin: 0 auto 50px;;

            min-height: 400px; 

            border-radius: 0.75rem;

            overflow: hidden;

            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

            background-image: url('https://eswacos.org.sz/images/bg1.png');

            background-size: cover;

            background-position: center;

            background-attachment: scroll;

            padding: 3rem 2rem; 

        }



        .description::before {

            content: '';

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.5); /* 50% black overlay */

            z-index: 1;

        }



        .description__text {

            position: relative;

            z-index: 2;

            color:#f9f9f9;

            flex-grow: 1;

            width: 100%;

             

        }



   





        .mission-vision { /* Container for Mission & Vision */

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

            gap: 30px;

            margin-bottom: 60px; 

        }



        .mission-vision .card {

            background-color: var(--background-light);

            border-radius: 0.75rem;

            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);

            padding: 30px;

            flex: 1 1 calc(50% - 30px); /* Two columns on large screens */

            text-align: center;

            transition: transform 0.3s ease, box-shadow 0.3s ease;

            display: flex;

            flex-direction: column;

            align-items: center;

            height: 400px;

        }



        .mission-vision .card:hover {

            transform: translateY(-5px);

            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);

            background-color: #c5292e;

            color:#f9f9f9;

            cursor: pointer;

        }



        .mission-vision .card h3 {

            font-size: 1.6rem;

            font-weight: 700;

            color: var(--primary-color);

            margin-bottom: 15px;

            position: relative;

            display: flex;

            align-items: center;

            gap: 10px; /* Space between icon and text */

            justify-content: center; /* Center icon and text */

        }

        .mission-vision .card h3 svg {

            color: var(--secondary-color); /* Icon color */

            min-width: 32px; /* Larger icons for mission/vision */

            min-height: 32px;

        }





        .mission-vision .card h3::after {

            content: '';

            display: block;

            width: 40px;

            height: 3px;

            background-color: var(--secondary-color);

            margin: 8px auto 0;

            border-radius: 1.5px;

        }







        .values-content-area { /* New wrapper for values grid to control margins/padding */

            margin-top: 60px; /* Space from Mission/Vision */

            margin-bottom: 60px; /* Space before What We Do section */

        }



        .values-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive grid for values, slightly larger minmax */

            gap: 25px; /* Slightly more gap */

            margin: 0 auto; /* Center the grid */

            padding: 0 15px; /* Padding for smaller screens */

        }



        .value-card {

            background-color: var(--background-light); /* Changed to light background for individual value cards */

            border-radius: 0.5rem;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

            padding: 20px;

            text-align: center;

            transition: transform 0.3s ease, box-shadow 0.3s ease;

            display: flex;

            flex-direction: column;

            align-items: center;

        }



        .value-card:hover {

            transform: translateY(-3px);

            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);

            background-color: #c5292e;

            color:#f9f9f9;

            cursor: pointer;

        }



        .value-card h4 {

            font-size: 1.1rem;

            font-weight: 600;

            color: var(--primary-color);

            margin-bottom: 10px;

            display: flex;

            align-items: center;

            gap: 8px;

            justify-content: center; /* Center header content */

        }



        .value-card h4 svg {

            color: var(--accent-color); /* Accent color for value icons */

            min-width: 20px;

            min-height: 20px;

        }



      





        .slider-container {

            width: 100%;

            background-color: white;

            border-radius: 1rem; /* Rounded corners */

            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

            padding: 2rem;

            box-sizing: border-box;

            margin: 0 auto; /* Center the slider container within its parent */

        }



        .slider-wrapper {

            position: relative;

            overflow: hidden; /* Hide overflowing items */

            border-radius: 0.75rem; /* Slightly smaller rounded corners for the content area */

            padding: 0 var(--item-margin); /* Padding equal to item margin to correctly frame visible items */

            box-sizing: border-box;

        }



        .what-we-do-content {

            display: flex; /* Makes children flex items */

            transition: transform 0.5s ease-in-out; /* Smooth sliding transition */

            padding: 0;

            margin: 0;

            align-items: stretch; /* Ensure items have equal height within their "page" */

        }



        .service-item {

            box-sizing: border-box;

            padding: 1.5rem;

            line-height: 1.6;

            color: #4a5568; /* Tailwind gray-700 equivalent */

            background-color: white; /* White background for each item */

            border-radius: 0.5rem;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Soft shadow for items */

            margin: var(--item-margin); /* Consistent margin around items */

            flex-shrink: 0; /* Prevent items from shrinking */

            display: flex; /* For header and icon alignment */

            flex-direction: column;



            /* Default state (no rotation animation) */

            opacity: 1;

            transform: scale(1);

            transition: box-shadow 0.3s ease, transform 0.3s ease; /* Transitions for hover effects only */



            /* flex-basis will be set by JS dynamically to ensure responsive columns */

            min-width: 200px; /* Minimum width to prevent items from becoming too squished */

        }



        .service-item h3 {

            font-size: 1.25rem; /* text-xl */

            font-weight: 700; /* font-bold */

            color: var(--primary-color);

            margin-bottom: 0.75rem;

            display: flex;

            align-items: center;

            gap: 0.5rem; 

        }



        .service-item h3 svg {

            color: var(--secondary-color);

            min-width: 24px; 

            min-height: 24px;

        }



        .service-item:hover {

            transform: translateY(-5px) scale(1.02);

            box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);

            cursor: pointer; 

            background-color: #c5292e;

            color:#f9f9f9;

            cursor: pointer;

        }



        .slider-controls {

            display: flex;

            justify-content: center;

            align-items: center;

            margin-top: 2rem;

            gap: 1.5rem; 

        }



        .slider-button {

            background-color: var(--primary-color);

            color: white;

            border: none;

            border-radius: 9999px; /* Fully rounded for pill shape */

            padding: 0.75rem 1.25rem;

            font-size: 1.25rem; /* text-xl */

            cursor: pointer;

            transition: background-color 0.3s ease, transform 0.2s ease;

            display: flex;

            align-items: center;

            justify-content: center;

            min-width: 44px; /* Ensure good touch target size */

            min-height: 44px;

        }



        .slider-button:hover {

            background-color: #2a3360; /* Slightly darker primary on hover */

            transform: translateY(-2px);

        }



        .slider-button:active {

            transform: translateY(0);

        }



        .slider-button:disabled {

            opacity: 0.5;

            cursor: not-allowed;

        }



        .slider-dots {

            display: flex;

            gap: 0.75rem; /* Space between dots */

        }



        .dot {

            width: 12px;

            height: 12px;

            background-color: #d1d5db; /* Light gray for inactive dots */

            border-radius: 50%;

            cursor: pointer;

            transition: background-color 0.3s ease, transform 0.2s ease;

        }



        .dot.active {

            background-color: var(--secondary-color); /* Gold for active dot */

            transform: scale(1.2); /* Slightly larger active dot */

        }



        .dot:hover {

            background-color: #b0b4bb; /* Darker gray on hover */

        }



        /* Responsive adjustments for overall container and header */

        @media (max-width: 768px) {

            .slider-container {

                margin:  auto;

            }

            /* Random bars slider content text */

            .static-slider-text {

                font-size: 2rem;

                bottom: 1rem;

                left: 1rem;

                max-width: 80%; /* Adjust max-width for smaller screens */

            }

            .dot-container { bottom: 0.5rem; }

            .bottom-left-shade { height: 50%; } /* More prominent shade on mobile */



            .mission-vision .card {

                flex: 1 1 calc(100% - 30px); /* 1 column on medium screens for mission/vision */

                max-width: 100%;

            }



            .values-grid {

                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Adjust minmax for smaller screens */

            }



            .description {

                padding: 2rem 1rem; /* Adjust padding for smaller screens */

                min-height: 300px;

            }



            .description__text {

                max-width: 100%; /* Text takes full width on small screens */

            }

        }



        @media (max-width: 480px) {

            .slider-container {

                margin: auto;

                border-radius: 1rem;

            }

            /* Random bars slider content text */

            .static-slider-text {

                font-size: 1.5rem;

                bottom: 0.5rem;

                left: 0.5rem;

                max-width: 90%;

            }

             /* No change needed for mission-vision .card as it's already 100% width above */

             .values-grid {

                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Further adjust for very small screens */

            }

            .description {

                padding: 1.5rem 0.8rem;

                min-height: 250px;

            }

        }



        /* Styles for the new random bars slider */

        .random-bars-slider-wrapper { /* Wrapper to add vertical margin */

         /* Center with more space below */

            /* Add horizontal padding for smaller screens */

        }



        .random-bars-slider {

            position: relative;

            width: 100%;

            aspect-ratio: 16 / 9; /* Maintain aspect ratio for responsiveness, 16:9 example */

            max-height: 400px; /* Minimum height for very small screens */

            overflow: hidden;/* Rounded corners */

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Deep shadow */

            background-color: #2d3748; /* Slightly lighter dark background for slider */

        }



        /* Removed .random-bars-slider-title as static text is now inside */





        .bottom-left-shade {

            position: absolute;

            bottom: 0;

            left: 0;

            width: 100%; /* Spans full width */

            height: 40%; /* Adjust height as needed */

            background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));

            z-index: 5; /* Above slides, below content/breadcrumbs */

            pointer-events: none; /* Allows interaction with elements behind it */

        }



        .slide {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            display: flex; /* Use flex to arrange bars horizontally */

            opacity: 0; /* Hidden by default */

            z-index: 0;

            transition: none; /* No default CSS transition on opacity, JS handles it */

        }



        .slide.active {

            z-index: 1; /* Default for active, but JS will override as needed */

            opacity: 1; /* Default for active, but JS will override as needed */

        }



        .slide-bar {

            width: var(--bar-width); /* Calculated in JS based on numberOfBars */

            height: 100%;

            background-size: cover; /* Ensures image covers the bar, then positioned */

            background-position-y: center; /* Ensures vertical image positioning is centered */

            background-repeat: no-repeat;

            opacity: 0; /* Bars are hidden by default */

            transform: translateY(100%) scaleY(0); /* Start off-screen (bottom), squashed */

        }



        /* Keyframes for individual bar animations */

        @keyframes barIn {

            0% {

                opacity: 0;

                transform: translateY(100%) scaleY(0); /* Start from bottom, squashed */

            }

            50% {

                opacity: 0.8; /* Slightly visible mid-bounce */

                transform: translateY(-5%) scaleY(1.1); /* Overshoot upwards for a snappier bounce */

            }

            100% {

                opacity: 1;

                transform: translateY(0%) scaleY(1); /* Land in final place */

            }

        }



        @keyframes barOut {

            0% {

                opacity: 1;

                transform: translateY(0%) scaleY(1); /* Start in place */

            }

            50% {

                opacity: 0.8; /* Slightly visible mid-bounce */

                transform: translateY(5%) scaleY(1.1); /* Bounce downwards slightly */

            }

            100% {

                opacity: 0;

                transform: translateY(-100%) scaleY(0); /* Disappear upwards, squashed */

            }

        }



        /* Static content overlay for the random bars slider */

        .static-slider-text {

            position: absolute;

            bottom: 2rem; /* Position from the bottom */

            left: 2rem;   /* Position from the left */

            transform: none; /* Remove previous transform that centered it */

            font-size: 2.5rem;

            font-weight: bold;

            color: white; /* White text for contrast */

            text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);

            z-index: 6; /* Above shade, below breadcrumbs */

            pointer-events: none; /* Allow clicks to pass through to underlying elements */

            text-align: left; /* Align text to the left now */

            padding: 0 1rem; /* Add some padding for smaller screens */

            max-width: 60%; /* Limit width to prevent it from spanning too wide */

        }





        /* Breadcrumb styling for both sliders */

        .dot-container {

            position: absolute;

            bottom: 1rem;

            left: 50%;

            transform: translateX(-50%);

            display: flex;

            gap: 0.5rem;

            z-index: 7; /* Above shade and content */

        }



        .dot {

            width: 12px;

            height: 12px;

            background-color: rgba(255, 255, 255, 0.4);

            border-radius: 50%;

            cursor: default; /* Changed to default as they are non-interactive */

            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

        }



        .dot.active {

            background-color: #81e6d9; /* Teal for active dot */

            transform: scale(1.4);

            box-shadow: 0 4px 12px rgba(129, 230, 217, 0.6);

        }



        

/* contact us ? */





        /* Main Container for the entire contact section */

        .contact-container {

            max-width: 1024px; /* max-w-5xl (approx) */

            width: 100%;

            background-color: white;

            border-radius: 0.75rem; /* rounded-xl */

            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */

            padding: 2rem; /* p-8 */

            display: flex;

            flex-direction: column;

            gap: 2.5rem; /* space-y-10 */

        }



        /* Responsive padding for contact-container */

        @media (min-width: 768px) { /* md breakpoint */

            .contact-container {

                padding: 2.5rem; /* md:p-10 */

            }

        }

        @media (min-width: 1024px) { /* lg breakpoint */

            .contact-container {

                padding: 3rem; /* lg:p-12 */

            }

        }



        /* Section Title and Description */

        .section-header {

            text-align: center;

            margin-bottom: 2.5rem; /* Equivalent to space-y-10 applied implicitly before content area */

        }



        .section-header h1 {

            font-size: 2.25rem; /* text-4xl */

            font-weight: 800; /* font-extrabold */

            color: var(--color-text-dark); /* gray-900 */

            margin-bottom: 1rem;

        }



        @media (min-width: 640px) { /* sm breakpoint */

            .section-header h1 {

                font-size: 3rem; /* sm:text-5xl */

            }

        }



    



        /* Main Content Grid (Form and Details) */

        .main-content-grid {

            display: flex;

            flex-direction: column;

            gap: 2.5rem; /* gap-10 */

        }



        /* Grid for Contact Form and Contact Details */

        .form-details-grid {

            display: grid;

            grid-template-columns: 1fr; /* grid-cols-1 */

            gap: 2.5rem; /* gap-10 */

        }



        @media (min-width: 768px) { /* md breakpoint */

            .form-details-grid {

                grid-template-columns: 1fr 1fr; /* md:grid-cols-2 */

            }

        }



        /* Individual Card Style for Form and Contact Details */

        .contact-card-item {

            padding: 1.5rem; /* p-6 */

            border-radius: 0.5rem; /* rounded-lg */

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */

            background-color: white;

            border: 1px solid var(--color-border-light); /* border border-gray-100 */

        }



        /* Headings within cards */

        .contact-card-item h2 {

            font-size: 1.875rem; /* text-3xl */

            font-weight: 700; /* font-bold */

            color: var(--color-deep-blue); /* text-[#3A4380] */

            margin-bottom: 1.5rem; /* mb-6 */

        }



        /* Form Styling */

        form {

            display: flex;

            flex-direction: column;

            gap: 1.5rem; /* space-y-6 */

        }



        form label {

            display: block;

            font-size: 0.875rem; /* text-sm */

            font-weight: 600; /* font-semibold */

            color: var(--color-deep-blue); /* text-[#3A4380] */

            margin-bottom: 0.25rem; /* mb-1 */

        }



        form input,

        form textarea {

            width: 100%; /* w-full */

            padding: 0.5rem 1rem; /* px-4 py-2 */

            border: 1px solid var(--color-border-light); /* border border-gray-300 */

            border-radius: 0.375rem; /* rounded-md */

            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */

            font-size: 0.875rem; /* sm:text-sm */

            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; /* transition duration-150 ease-in-out */

        }



        form input:focus,

        form textarea:focus {

            outline: none;

            border-color: var(--color-deep-blue); /* focus:border-[#3A4380] */

            box-shadow: 0 0 0 1px var(--color-deep-blue); /* focus:ring-[#3A4380] */

        }



        form button[type="submit"] {

            width: 100%; /* w-full */

            display: flex;

            justify-content: center;

            padding: 0.75rem 1rem; /* py-3 px-4 */

            border: 1px solid transparent; /* border border-transparent */

            border-radius: 0.375rem; /* rounded-md */

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */

            font-size: 1.125rem; /* text-lg */

            font-weight: 600; /* font-semibold */

            color: white;

            background-color: var(--color-vibrant-red); /* bg-[#ED3237] */

            transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* transition duration-200 ease-in-out */

            cursor: pointer;

        }



        form button[type="submit"]:hover {

            background-color: #c5292e; /* hover:bg-red-700 (darker shade of ED3237) */

        }



        form button[type="submit"]:focus {

            outline: none;

            box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-vibrant-red); /* focus:ring-2 focus:ring-offset-2 focus:ring-[#ED3237] */

        }



        /* Contact Details List */

        .contact-details-list {

            display: flex;

            flex-direction: column;

            gap: 1rem; /* space-y-4 */

            color: var(--color-deep-blue); /* text-[#3A4380] */

            font-size: 1.125rem; /* text-lg */

        }



 

        .contact-details-list svg {

            flex-shrink: 0; /* flex-shrink-0 */

            margin-right: 0.75rem; /* mr-3 */

            height: 1.5rem; /* h-6 */

            width: 1.5rem; /* w-6 */

            color: var(--color-warm-yellow); /* text-[#F5C45C] */

        }



        /* Social Media Section */

        .social-media-section {

            margin-top: 2rem; /* mt-8 */

        }



        .social-media-section h3 {

            font-size: 1.5rem; /* text-2xl */

            font-weight: 700; /* font-bold */

            color: var(--color-deep-blue); /* text-[#3A4380] */

            margin-bottom: 1rem; /* mb-4 */

        }



        .social-icons {

            display: flex;

            gap: 1.5rem; /* space-x-6 */

            justify-content: center; /* justify-center */

        }



        @media (min-width: 768px) { /* md breakpoint */

            .social-icons {

                justify-content: flex-start; /* md:justify-start */

            }

        }



        .social-icons a {

            color: var(--color-warm-yellow); /* text-[#F5C45C] */

            transition: color 0.2s ease-in-out; /* transition-colors duration-200 */

        }



        .social-icons a:hover {

            color: var(--color-deep-blue); /* hover:text-[#3A4380] */

        }



        .social-icons svg {

            height: 2rem; /* h-8 */

            width: 2rem; /* w-8 */

        }



        /* Google Map Embed Section */

        .map-section {

            background-color: #F5C45C;

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */

        }



        .map-section h2 {

            font-size: 1.875rem; /* text-3xl */

            font-weight: 700; /* font-bold */

            color: white; /* text-white */

            margin-bottom: 1.5rem; /* mb-6 */

        }



        .map-embed-container {

            position: relative;

            width: 100%; /* w-full */

            padding-bottom: 56.25%; /* For a 16:9 aspect ratio (aspect-w-16 aspect-h-9) */

            height: 0;

            overflow: hidden; /* overflow-hidden */

            border-radius: 0.375rem; /* rounded-md */

            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */

        }



        .map-embed-container iframe {

            position: absolute;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            border: 0; /* style="border:0;" */

        }







        /* Membership Section Styles */

        .membership-section {

            padding: 60px 0;

            background-color: white;

        }



        .membership-section .container {

            margin: 0 auto;

            padding: 0 15px;

        }



        .membership-content {

            margin: 0 auto 50px;

        }



        



        .member-list {

            list-style: none;

            padding: 0;

            margin-bottom: 2rem;

        }



        .member-list li {

            display: flex;

            align-items: flex-start; /* Align icon and text to top */

            margin-bottom: 1rem;

            font-size: 1.05rem;

            line-height: 1.7;

            color:  #f9f9f9;; /* Tailwind gray-700 equivalent */

        }



        .member-list li svg {

            flex-shrink: 0; /* Prevent icon from shrinking */

            color: var(--accent-color); /* Accent color for list icons */

            margin-right: 0.75rem;

            margin-top: 0.2rem; /* Minor adjustment for vertical alignment */

            min-width: 24px;

            min-height: 24px;

        }



        .action-buttons {

            display: flex;

            flex-direction: column; /* Stack on small screens */

            gap: 1.5rem;

            margin-top: 30px;

            align-items: center; /* Center buttons */

        }



        .action-button {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            padding: 1rem 2rem;

            border-radius: 0.5rem;

            font-weight: 600;

            text-decoration: none;

            transition: all 0.3s ease;

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

            min-width: 200px; /* Ensure buttons have a minimum width */

        }



        .action-button.primary {

            background-color: var(--primary-color);

            color: white;

        }



        .action-button.primary:hover {

            background-color: #2a3360; /* Slightly darker primary */

            transform: translateY(-2px);

            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

        }



        .action-button.secondary {

            background-color: var(--secondary-color);

            color: var(--primary-color);

        }



        .action-button.secondary:hover {

            background-color: #e6b24d; /* Slightly darker gold */

            transform: translateY(-2px);

            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

        }





         .forms-section {

            padding: 60px 0;

            background-color: white;

        }



        .forms-section .container {

            max-width: 1300px; /* Increased width */

            margin: 0 auto;

            padding: 0 15px;

        }



        .forms-content {

            margin: 0 auto 50px;

            max-width: 1000px; /* Increased width */

        }



        



        .form-links-list {

            list-style: none;

            padding: 0;

            margin-bottom: 2rem;

            display: flex;

            flex-direction: column;

            gap: 1rem;

        }



        .form-links-list li {

            display: flex;

            align-items: center; /* Align icon and text vertically */

            margin-bottom: 0.5rem;

            font-size: 1.05rem;

            line-height: 1.7;

            color: #4a5568;

            background-color: var(--background-light); /* Light background for each link item */

            padding: 0.75rem 1rem;

            border-radius: 0.5rem;

            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

            transition: transform 0.2s ease, box-shadow 0.2s ease;

        }



        .form-links-list li:hover {

            transform: translateX(5px); /* Slight slide on hover */

            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

        }



        .form-links-list li a {

            display: flex; /* Make the link itself a flex container */

            align-items: center;

            color: var(--primary-color); /* Primary color for links */

            text-decoration: none;

            font-weight: 600;

            transition: color 0.2s ease;

        }



        .form-links-list li a:hover {

            color: var(--accent-color); /* Accent color on hover */

        }



        .form-links-list li svg {

            flex-shrink: 0;

            color: var(--secondary-color); /* Secondary color for icons */

            margin-right: 0.75rem;

            min-width: 24px;

            min-height: 24px;

        }





        /* FAQs Section Styles */

         .faqs-section {

            padding: 60px 0;

            background-color: white;

        }



        .faqs-section .container {

            max-width: 1300px;

            margin: 0 auto;

            padding: 0 15px;

        }



        .faqs-content {

            margin: 0 auto 50px;

        }



        /* Accordion styles */

        .faq-accordion {

            display: flex;

            flex-direction: column;

            gap: 1.5rem; /* space between FAQ items */

        }



        .faq-item {

            background-color: var(--background-light);

            border-radius: 0.75rem; /* rounded-xl */

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* shadow-md */

            overflow: hidden; /* Ensures child elements respect border-radius */

            transition: all 0.3s ease;

        }



        .faq-item:hover {

            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);

            transform: translateY(-2px);

        }



        .faq-item summary {

            display: flex;

            align-items: flex-start;

            justify-content: flex-start; /* Align content to the left */

            padding: 1.5rem 2rem; /* p-6 px-8 */

            cursor: pointer;

            font-size: 1.25rem; /* text-xl */

            font-weight: 700; /* font-bold */

            color: var(--primary-color);

            list-style: none; /* Remove default marker */

            position: relative;

            background-color: white; /* Question background */

            text-align: left; /* Ensure text itself is left-aligned */

        }



        /* Adjust the placement of the +/- icon when summary is not space-between */

        .faq-item summary::after {

            content: '+';

            font-size: 2rem;

            color: var(--secondary-color);

            transition: transform 0.3s ease;

            margin-left: auto; /* Push the plus/minus icon to the far right */

        }





        .faq-item summary::-webkit-details-marker {

            display: none; /* Hide default marker for webkit browsers */

        }



        .faq-item summary::before { /* Icon for question */

            content: '';

            display: inline-block;

            width: 24px; /* Icon size */

            height: 24px;

            background-color: transparent; /* Default */

            margin-right: 1rem; /* Space between icon and text */

            flex-shrink: 0; /* Prevent icon from shrinking */

            mask-size: cover;

            mask-repeat: no-repeat;

            background-color: var(--secondary-color); /* Icon color */

        }



        /* Specific icons for each question based on content */

        .faq-item.membership-fee summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");

        }

        .faq-item.royalties summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10a8 8 0 0 1-16 0V7l-2 3'/%3E%3Cpath d='M2 10a8 8 0 0 1 16 0V7l2 3'/%3E%3Cpath d='M6 10H4c0-2.5 0-5 2-5s2.5 2 2.5 5'/%3E%3Cpath d='M18 10h2c0-2.5 0-5-2-5s-2.5 2-2.5 5'/%3E%3Cpath d='M12 15v5'/%3E%3Cpath d='M14 17H10'/%3E%3C/svg%3E"); /* Icon: Coins */

        }

        .faq-item.register-works summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E"); /* Icon: FileText */

        }

        .faq-item.become-member summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cline x1='19' x2='19' y1='8' y2='14'/%3E%3Cline x1='22' x2='16' y1='11' y2='11'/%3E%3C/svg%3E"); /* Icon: UserPlus */

        }

        .faq-item.membership-requirements-individual summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87L16 14'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); /* Icon: Users */

        }

        .faq-item.membership-requirements-legal summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2' ry='2'/%3E%3Cpath d='M9 22v-4h6v4'/%3E%3Cpath d='M8 6h.01'/%3E%3Cpath d='M16 6h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3C/svg%3E"); /* Icon: Building */

        }

        .faq-item.works-not-eligible summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' x2='19.07' y1='4.93' y2='19.07'/%3E%3C/svg%3E"); /* Icon: CircleX (representing not allowed) */

        }

        .faq-item.license-cost summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); /* Icon: DollarSign */

        }

        .faq-item.music-without-license summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 2-7 20'/%3E%3Cpath d='m13 2-7 20'/%3E%3Cpath d='M10 5L3 17'/%3E%3Cpath d='M14 5L7 17'/%3E%3Cpath d='M16 5L9 17'/%3E%3Cpath d='M18 5L11 17'/%3E%3Cpath d='M20 5L13 17'/%3E%3Cpath d='M22 5L15 17'/%3E%3Cpath d='M13 2-7 20'/%3E%3Cpath d='M3 17h18'/%3E%3Cpath d='M13 2-7 20'/%3E%3Cpath d='M10 5L3 17'/%3E%3Cpath d='M14 5L7 17'/%3E%3Cpath d='M16 5L9 17'/%3E%3Cpath d='M18 5L11 17'/%3E%3Cpath d='M20 5L13 17'/%3E%3Cpath d='M22 5L15 17'/%3E%3C/svg%3E"); /* Icon: Gavel (representing legal issues) */

        }

        .faq-item.license-fees-go summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); /* Icon: Globe */

        }

        .faq-item.streaming-subscription summary::before {

             mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Cpath d='M3 15h18'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E"); /* Icon: CreditCard (representing payment/subscription) */

        }





        .faq-item[open] summary::after {

            content: '−';

            transform: rotate(180deg); /* Rotate for open state */

        }



        .faq-item .answer {

            padding: 1rem 2rem 1.5rem; /* px-8 pb-6 */

            font-size: 1.05rem; /* text-lg */

            line-height: 1.7;

            color: #555;

            border-top: 1px solid #e0e0e0; /* Separator line */

            background-color: var(--background-light); /* Answer background */

            text-align: left; /* Ensure answer text is also left-aligned */

        }



        .faq-item .answer ul {

            list-style: none; /* Remove default disc */

            padding: 0;

            margin-left: 0; /* Reset margin to control with padding */

            margin-top: 0.5rem;

            color: #555;

        }

        .faq-item .answer ul li {

            position: relative;

            padding-left: 2rem; /* Space for the icon */

            margin-bottom: 0.5rem;

            display: flex; /* Use flex for icon alignment */

            align-items: flex-start; /* Align icon and text to the top */

        }







  @media (max-width: 768px) {

            .page-title h1 { font-size: 2.5rem; }

            .section-title { font-size: 2rem; }

            .static-slider-text { font-size: 2rem; bottom: 1rem; left: 1rem; max-width: 80%; }

            .faqs-content { max-width: 100%; } /* Ensure full width on smaller screens */

            .faq-item summary { font-size: 1.1rem; padding: 1.2rem 1.5rem; }

            .faq-item .answer { font-size: 0.95rem; padding: 0.8rem 1.5rem 1.2rem; }

        }



        @media (max-width: 480px) {

            .page-title h1 { font-size: 2rem; }

            .section-title { font-size: 1.75rem; }

            .static-slider-text { font-size: 1.5rem; bottom: 0.5rem; left: 0.5rem; max-width: 90%; }

            .faq-item summary { font-size: 1rem; padding: 1rem 1.2rem; }

            .faq-item .answer { font-size: 0.9rem; padding: 0.6rem 1.2rem 1rem; }

        }





        /* Specific styles for contact info in "Get Licensed" section */

        .contact-info-list {

            list-style: none;

            padding: 0;

            margin-left: 0;

            margin-top: 1rem;

        }

        .contact-info-list li {

            display: flex;

            align-items: center;

            font-size: 1.1rem;

            margin-bottom: 0.75rem;

            color: #3A4380; /* Primary color for contact info */

            font-weight: 600;

        }

        .contact-info-list li svg {

            flex-shrink: 0;

            color: var(--secondary-color); /* Gold color for contact icons */

            width: 24px;

            height: 24px;

            margin-right: 0.75rem;

        }

        .contact-info-list li a {

            color: #3A4380;

            text-decoration: none;

            transition: color 0.2s ease;

        }

        .contact-info-list li a:hover {

            color: var(--accent-color);

            text-decoration: underline;

        }





        .section-title {

            font-size: 2.5rem;

            font-weight: 700;

            color: var(--primary-color);

            text-align: center;

            position: relative;

            margin-top: 50px;

        }



        .section-title::after {

            content: '';

            display: block;

            width: 80px;

            height: 4px;

            background-color: var(--secondary-color);

            margin: 10px auto 0;

            border-radius: 2px;

        }



        /* Licensing Section Styles */

        .licensing-section {

            padding: 60px 0;

            background-color: white;

        }



        .licensing-section .container {

            margin: 0 auto;

            padding: 0 15px;

        }



        .licensing-content {

            margin: 0 auto 50px;

            text-align: left;

        }





        /* Updated styles for licensing list items and icons */

        .licensing-list {

            list-style: none;

            padding: 0;

            margin-left: 0;

            margin-top: 0.5rem;

            color: #555;

        }

        .licensing-list li {

            position: relative;

            padding-left: 3.5rem; /* Increased space for larger icon + margin */

            margin-bottom: 1rem;

            display: flex;

            align-items: flex-start;

            font-size: 1.05rem;

            line-height: 1.7;

        }



        .licensing-list li svg {

            flex-shrink: 0;

            color: var(--secondary-color); /* Match card icon color */

            width: 48px; /* Match card icon size */

            height: 48px; /* Match card icon size */

            position: absolute;

            left: 0;

            top: 0; /* Align to top for better text flow */

        }



        /* Styles for License Types Cards */

        .license-types-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

            gap: 2rem;

            margin-top: 2rem;

        }



        .license-card {

            background-color: var(--background-light);

            border-radius: 0.75rem;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

            padding: 2rem;

            text-align: left;

            transition: all 0.3s ease;

            display: flex;

            flex-direction: column;

            gap: 1rem;

        }



        .license-card:hover {

            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);

            background-color: #c5292e;

            color: white;

            cursor: pointer;

            transform: translateY(-5px);

        }



        .license-card .card-icon {

            color: var(--secondary-color);

            width: 48px;

            height: 48px;

            margin-bottom: 1rem;

        }



        .license-card h3 {

            font-size: 1.5rem;

            font-weight: 700;

            color: var(--primary-color);

            margin-bottom: 0.75rem;

        }





        .get-licensed-cta {

            background-color: var(--primary-color);

            color: white;

            padding: 3rem 2rem;

            border-radius: 1rem;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);

            text-align: center;

            margin: 4rem auto;

        }



        .get-licensed-cta h3 {

            font-size: 2rem;

            font-weight: 700;

            margin-bottom: 1rem;

            color: white;

        }

    .get-licensed-cta p {

   text-align: center;

            color: white;

        }



    

    



        .contact-info-list {

            list-style: none;

            padding: 0;

            margin-left: 0;

            margin-top: 1rem;

            display: flex;

            flex-direction: column;

            align-items: center; 

            gap: 1rem;

        }

        .contact-info-list li {

            display: flex;

            align-items: center;

            font-size: 1.1rem;

            color: white;

            font-weight: 600;

        }

        .contact-info-list li svg {

            flex-shrink: 0;

            color: var(--secondary-color); 

            width: 24px;

            height: 24px;

            margin-right: 0.75rem;

        }

        .contact-info-list li a {

            color: white;

            text-decoration: none;

            transition: color 0.2s ease;

        }

        .contact-info-list li a:hover {

            color: var(--secondary-color);

            text-decoration: underline;

        }



        .tab-container {

            margin: 0 auto 50px auto;

            background-color: white;

            border-radius: 0.75rem;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

            overflow: hidden; /* Ensures rounded corners apply to children */

        }



        .tab-buttons {

            display: flex;

            border-bottom: 2px solid var(--background-light);

        }



        .tab-button {

            flex-grow: 1;

            padding: 1.25rem 1rem;

            background-color: var(--background-light);

            border: none;

            cursor: pointer;

            font-size: 1.2rem;

            font-weight: 600;

            color: #718096; /* Gray text for inactive */

            transition: all 0.3s ease;

            text-align: center;

            position: relative;

            outline: none; /* Remove focus outline */

        }



        .tab-button:hover {

            background-color: #e2e8f0; /* Lighter hover background */

            color: var(--primary-color);

        }



        .tab-button.active {

            background-color: white;

            color: var(--primary-color);

            border-bottom: 3px solid var(--secondary-color); /* Highlight active tab */

            z-index: 1; /* Keep active tab border on top */

        }



        .tab-content {

            padding: 2rem;

            background-color: white;

        }



        .process-steps-grid {

            display: grid;

            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

            gap: 2.5rem;

            margin-top: 2rem;

            margin-left: auto;

            margin-right: auto;

        }



        .process-step {

            background-color: var(--background-light);

            border-radius: 0.75rem;

            padding: 2rem;

            text-align: center;

            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);

            display: flex;

            flex-direction: column;

            align-items: center;

            transition: all 0.3s ease;

            position: relative;

            overflow: hidden; /* For pseudo-element background */

        }



        .process-step:hover {

            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);

            transform: translateY(-5px);

        }



        .process-step .step-number {

            font-size: 3rem;

            font-weight: 900;

            color: rgba(58, 67, 128, 0.1); /* Light primary color */

            position: absolute;

            top: 0.5rem;

            left: 1rem;

            z-index: 0;

            line-height: 1;

        }

        .process-step .step-icon {

            color: var(--secondary-color); 

            width: 48px; 

            height: 48px; 

            margin-bottom: 1rem; 

            position: relative;

            z-index: 1;

        }



        .process-step h4 {

            font-size: 1.3rem;

            font-weight: 700;

            color: var(--primary-color);

            margin-bottom: 0.75rem;

            position: relative;

            z-index: 1;

        }





        @media (max-width: 1024px) {

            .license-types-grid, .process-steps-grid {

                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

            }

            .tab-button {

                font-size: 1.1rem;

                padding: 1rem 0.5rem;

            }

            .licensing-list li { padding-left: 3rem; } /* Adjusted for responsiveness */

            .licensing-list li svg { width: 40px; height: 40px; } /* Adjusted for responsiveness */

            .process-step .step-number { font-size: 2.5rem; }

            .process-step .step-icon { width: 40px; height: 40px; margin-bottom: 0.75rem; }

            .process-step h4 { font-size: 1.2rem; }

        }

        @media (max-width: 768px) {

            .page-title h1 { font-size: 2.5rem; }

            .section-title { font-size: 2rem; }

            .static-slider-text { font-size: 2rem; bottom: 1rem; left: 1rem; max-width: 80%; }

            .licensing-content, .random-bars-slider-wrapper { max-width: 100%; }

            .licensing-list li { padding-left: 2.5rem; } /* Adjusted for responsiveness */

            .licensing-list li svg { width: 32px; height: 32px; top: 0.1em; } /* Adjusted for responsiveness */

            .get-licensed-cta h3 { font-size: 1.75rem; }

            .contact-info-list li { font-size: 1rem; }

            .contact-info-list li svg { width: 20px; height: 20px; }

            .license-card { padding: 1.5rem; }

            .license-card h3 { font-size: 1.3rem; }

            .license-card .card-icon { width: 40px; height: 40px; }

            .tab-button {

                font-size: 1rem;

                padding: 0.8rem 0.4rem;

            }

            .tab-content { padding: 1.5rem; }

            .process-step .step-number { font-size: 2rem; top: 0.25rem; left: 0.5rem; }

            .process-step .step-icon { width: 36px; height: 36px; margin-bottom: 0.75rem; }

            .process-step h4 { font-size: 1.1rem; }

        }



        @media (max-width: 480px) {

            .page-title h1 { font-size: 2rem; }

            .section-title { font-size: 1.75rem; }

            .static-slider-text { font-size: 1.5rem; bottom: 0.5rem; left: 0.5rem; max-width: 90%; }

            .licensing-list li { padding-left: 2rem; } /* Adjusted for responsiveness */

            .licensing-list li svg { width: 28px; height: 28px; top: 0.1em; } /* Adjusted for responsiveness */

            .get-licensed-cta h3 { font-size: 1.5rem; }

            .contact-info-list li { flex-direction: column; align-items: flex-start; gap: 0.25rem; }

            .contact-info-list li svg { margin-right: 0; }

            .process-steps-grid { grid-template-columns: 1fr; }

            .process-step { text-align: left; align-items: flex-start; }

            .process-step .step-number { left: 0.25rem; }

        }





        .divider{

            height: 50px;

        }

        .minus {

            margin-bottom: -20px

        }