body {
            font-family: 'Hind Madurai', sans-serif;
        }

        .navbar {
            background-color: white;
            color: #D03533;
        }
        .nav-link {
            color: black  !important;;
        }
        .app-name {
            font-weight: bold;
            color: #000; /* Black color */
            font-size: 1.5rem; /* Adjust size as needed */
        }
        .hero-section {
            background-image: linear-gradient(to right, #fbe9e7, #fff9c4); /* very light shades of your brand colors */
            padding: 5rem 0;
            text-align: center;
            color: #333; /* Darker text color for better readability on light background */
        }
        
        
        .hero-section h1 {
            color: rgb(168, 32, 29); /* Darker red */
            font-size: 3rem;
            font-weight: bold;
        }
        
        .hero-section p {
            color: rgb(197, 48, 46); /* Lighter red */
            font-size: 1.25rem;
            margin-top: 1rem;
        }
        .hero-text {
            color: rgb(197, 48, 46) !important; /* Lighter red */
            margin-top: 1rem;
            font-weight: bold;
        }
        .rating-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #f0f0f0; /* Light gray background for the badge */
            border-radius: 0.5rem; /* Rounded corners */
            padding: 0.5rem 1rem; /* Padding around the text */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Shadow for better visibility */
            margin-top: 1rem;
            max-width: 200px; /* Adjust width as needed */
            margin: 0 auto; /* Center the badge */
        }
        
        .icon-text {
            display: inline-flex;
            align-items: center;
            margin-bottom: 0.5rem; /* Space between icon-text and stars */
        }
        
        .google-logo {
            width: 30px; /* Adjust size as needed */
            height: 30px; /* Adjust size as needed */
            margin-right: 0.5rem;
        }
        
        .badge-title {
            color: #333333 !important; /* Dark gray for better readability */
            font-weight: bold;
            
        }
        .stars {
            margin-bottom: 0.5rem; /* Space between stars and rating text */
        }
        
        .star {
            color: #ffcc00; /* Gold color for stars */
        }
        
        .empty {
            color: #dcdcdc; /* Light gray color for empty stars */
        }
        
        .rating-text {
            color: #333  !important; /* Darker text color */
            font-weight: bold;
            
        }
        
        
        .google-play-badge {
            margin-top: 2rem;
        }
        
        .google-play-badge-img {
            display: inline-block;
        }
        
        .google-play-badge p {
            color: #ffffff;
            margin-top: 1rem;
            font-weight: bold;
        }
        
        
        .balaji-section {
            color: #D03533;
            text-align: center;
            padding: 65px 0;
            background-color: #ffce00;
        }


        .about-section {
            background: linear-gradient(to bottom,  #D03533,#ffce00);
            color: white; /* Set text color to white for better readability */
            padding: 80px 0;            
        }
        .row.feature-cards {
            margin-bottom: 30px; /* Add more space between Feature Cards and Testimonials */
        }
        
        /* Testimonials */
        .row.testimonials {
            margin-top: 30px; /* Add more space between Feature Cards and Testimonials */
        }

        .testimonial {
            text-align: center;
        }

        .how-it-works {
            padding: 80px 0;
        }

        .temple-section {
            padding: 80px 0;
        }

        .download-app-button {
            background-color: #FFA500; /* Deep Orange */
            color: white;
            border-radius: 30px;
            padding: 20px 40px;
            font-size: 24px;
        }

        .logo {
            width: 40px; /* Adjust the width as needed */
            height: auto; /* Maintain aspect ratio */
            margin-right: 10px; /* Optional: Add some spacing to the right of the logo */
        }
        .google-play-badge-img {
            max-width: 400px; /* Adjust the maximum width as needed */
            max-height: 120px; /* Adjust the maximum height as needed */
            width: auto;
            height: auto;
        }
        .salasar-image-img {
            max-width: 100%; /* Adjust the maximum width as needed */
            max-height: 450px; /* Adjust the maximum height as needed */
            width: auto;
            height: auto;
        }
        .card-img-top {
            max-width: 75px; /* Adjust the maximum width as needed */
            max-height:  100%; /* Adjust the maximum height as needed */
        }
        .card-text{
            color:  #D03533;;
        }
        .testimonial-img {
            max-width: 100%; /* Adjust the maximum width as needed */
            max-height: 250px; /* Adjust the maximum height as needed */
            width: auto;
            height: auto;
        }
        .row.testimonials .testimonial-name-text {
            font-size: 18px; /* Adjust the font size as needed */
            font-weight: bold;
        }

        /* General styling for the rating column */
.rating-column {
    padding: 20px; /* Adjust for desired spacing */
    text-align: center; /* Align content centrally */
}

/* Style the 5-star icon */
.rating-star {
    color: #ffd700; /* Adjust color to match your brand */
    margin-bottom: 10px; /* Space below the icon */
}

/* Style the rating text */
.rating-text {
    font-size: 16px; /* Adjust font size */
    font-weight: bold; /* Make text bold for emphasis */
}

/* Style the call-to-action button */
.rating-button  {
    background-color: #D03533 !important; /* Deep orange primary brand color */
    color: #fff !important; /* White text for optimal contrast */
    border: none !important; /* Remove default border */
    padding: 10px 20px !important; /* Adjust button padding as needed */
    border-radius: 5px !important; /* Maintain rounded corners */
    margin-top: 10px !important; /* Space above button */
}
.step-image img {
    max-width: 100%;
    max-height: 75px;
}
.step-number{
    font-size: x-large;
    font-weight: bold;
}
.how-it-works{
    background: linear-gradient(to bottom, #fedeab, #fffdf2);
}
.loader-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loader-overlay img {
    width: 50px; /* Adjust the width of the loader image as needed */
    height: 50px; /* Adjust the height of the loader image as needed */
}
.contact-email {
    font-size: 18px;
    font-weight: bold;
    color: #D03533;
}
.whatsapp-section {
    display: flex;
    align-items: center;
}

.whatsapp-icon {
    max-width: 50px; /* Adjust the maximum width as needed */
    margin-right: 10px; /* Adjust the margin as needed */
}

.whatsapp-number a {
    color: #000; /* Adjust the color as needed */
    text-decoration: none;
    font-weight: bold;
}

.whatsapp-number a:hover {
    text-decoration: underline;
}
.faq-section {
    padding: 2rem;
    background-color: #f5f5f5; /* Light grey background for FAQ section */
    color: #333; /* Darker text color for readability */
}

.faq-section h1 {
    color: rgb(168, 32, 29); /* Darker red */
    font-size: 3rem;
    font-weight: bold;
}

.faq-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.faq-section p {
    color: #333; /* Dark text for readability */
    margin-bottom: 1rem;
}

.accordion-button {
    font-size: 1.25rem !important; /* Adjusted text size */
    color: rgb(197, 48, 46) !important; /* Color of the question text */
    background-color: transparent !important; /* Transparent background */
    border: none !important; /* Remove border */
    box-shadow: none !important; /* Remove box shadow */
    text-align: right; /* Right-align the question text */
    
    padding-right: 2rem; /* Add padding to the right for spacing */
}

/* Hide the default arrow icon */
.accordion-button::after {
    display: none !important; /* Hide the default arrow icon */
}

/* Custom icon for collapsed (closed) state */
.accordion-button.collapsed::before {
    content: "+" !important; /* Plus sign when collapsed */
    font-size: 1.5rem; /* Size of the plus/minus sign */
    color: rgb(197, 48, 46); /* Color matching the question text */
    margin-left: 1rem; /* Add space between text and icon */
    order: 1; /* Place icon after the text */
}

/* Custom icon for expanded (open) state */
.accordion-button:not(.collapsed)::before {
    content: "-" !important; /* Minus sign when expanded */
    font-size: 1.5rem; /* Size of the plus/minus sign */
    color: rgb(197, 48, 46); /* Color matching the question text */
    margin-left: 1rem; /* Add space between text and icon */
    order: 1; /* Place icon after the text */
}

.accordion-item {
    border: none !important; /* Remove border */
    background-color: transparent !important; /* Transparent background */
}

.accordion-header {
    background-color: transparent !important; /* Transparent background for header */
}

.accordion-body {
    color: #000; /* Black text for answers */
    background-color: transparent !important; /* Transparent background for body */
    padding-left: 1.5rem; /* Slight indent for better readability */
}

/* Footer styles */
footer {
    background-color: #f8f9fa;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #e2e2e2;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    display: inline-flex;
    gap: 15px;
}

.footer-links li {
    display: inline;
}

.footer-links a {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

.footer-links a:hover {
    text-decoration: underline;
}

.footer-container p {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}