body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f8f8;
    color: #333;
}
.section-padding {
    padding: 4rem 1rem;
}
@media (min-width: 768px) {
    .section-padding {
        padding: 6rem 2rem;
    }
}
/* Custom styles for hero section with image background */
.hero-background {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('Barber.png'); /* Updated gradient and placeholder image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Custom button styles based on new color scheme */
.btn-primary-custom {
    background-color: #085faf; /* Primary blue from logo */
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 9999px; /* Full rounded */
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
}
.btn-primary-custom:hover {
    background-color: #064a8a; /* Darker blue for hover */
    color: white;
}
.btn-secondary-custom {
    background-color: #e5e7eb; /* Light gray */
    color: #085faf; /* Primary blue for text */
    padding: 0.75rem 2rem;
    border-radius: 9999px; /* Full rounded */
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
}
.btn-secondary-custom:hover {
    background-color: #d1d5db; /* Darker gray for hover */
    color: #085faf;
}
.btn-blue-custom { /* Used for "Become a Partner" */
    background-color: #085faf; /* Primary blue from logo */
    color: white;
    padding: 0.5rem 1.25rem; /* Adjusted padding for smaller button */
    border-radius: 9999px; /* Full rounded */
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-size: 0.875rem; /* text-sm equivalent */
    border: none;
}
.btn-blue-custom:hover {
    background-color: #064a8a; /* Darker blue for hover */
    color: white;
}
.app-status-btn-disabled {
    background-color: #fff;
    color: #085faf; /* Primary blue for text */
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0.75;
    cursor: not-allowed;
    border: none;
}
.app-status-btn-disabled:hover {
    background-color: #fff;
    color: #085faf;
}

/* Custom gradient for App Status Section */
.app-status-gradient {
    background-image: linear-gradient(to right, rgba(8, 95, 174, 0.8), rgba(10, 164, 197, 0.8)); /* Blue to Light Blue */
}

/* Custom gradient for Social Media Section */
.social-media-gradient {
    background-image: linear-gradient(to right, rgba(10, 164, 197, 0.8), rgba(8, 95, 174, 0.8)); /* Light Blue to Blue */
}

/* Hover effects for cards and items */
.card, .interactive-item {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card:hover, .interactive-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* New custom text and background colors */
.text-primary-blue ,.text-primary-blue a  {
    color: #085faf;
    text-decoration: none;
}

.bg-light-blue {
    background-color: #e0f2f7; /* Lighter shade of blue for icon backgrounds */
}
.bg-blue {
    --tw-bg-opacity: 1;
    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-green {
    --tw-bg-opacity: 1;
    background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-red {
    --tw-bg-opacity: 1;
    background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-20{
    background-color: rgb(0 0 0 / 6%);
}
/* Animation for app image */
@keyframes float-animation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.app-image-animated {
    animation: float-animation 3s ease-in-out infinite;
}
 /* Footer links styling */
.footer-links-section {
    padding-top: 2rem;
    padding-bottom: 1rem;
    text-align: center;
}
.footer-links-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem; /* Space between links */
}
.footer-links-section ul li a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}
.footer-links-section ul li a:hover {
    color: #d1e7dd; /* Lighter color on hover */
    text-decoration: underline;
}

/* New style for highlighted text in hero banner */
.highlight-text {
    color: #f87f17; /* A bright yellow/orange for highlighting */
    font-weight: 700;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.7); /* Subtle glow */
    display: block; /* Ensures it takes its own line */
    margin-top: 1rem; /* Space above the text */
    font-size: 2.5em; /* Larger font size */
}
@media (min-width: 768px) {
    .highlight-text {
        font-size: 3.5em; /* Even larger on desktop */
    }
}
.partner-hero {

            /* Added gradient back on top of the image */
            background-image: linear-gradient(to right, rgb(3 79 149 / 70%), rgb(1 81 98 / 70%)), url(barber.jpg);
            background-size: cover;
            background-position: center;
            color: white;
            text-align: center;
            min-height: 100vh; /* Full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
        }
        
.partner-hero1 {
    /* Added gradient back on top of the image */
    background-image: linear-gradient(to right,  rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('terms00.png');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 10rem 0;
    text-align: center;
}
.partner-hero2 {
    /* Added gradient back on top of the image */
    background-image: linear-gradient(to right,  rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('privacy00.png');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 10rem 0;
    text-align: center;
}
.call-to-action-gradient {
    background-image: linear-gradient(to right, rgba(8, 95, 174, 0.8), rgba(10, 164, 197, 0.8));
}
/* Removed .image-text-section as it's no longer needed for the full-width layout */
/* New styles for the image card section */
.partner-image-card {
    background-color: #ffffff; /* White background for the card */
    padding: 2rem; /* Reduced padding to fit card style */
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 0.75rem; /* More rounded corners for card */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Stronger shadow for card effect */
    overflow: hidden; /* Ensures image corners are rounded with card */
    display: flex; /* Use flex for image/text layout */
    flex-direction: column; /* Stack on small screens */
    align-items: center;
}
@media (min-width: 768px) {
    .partner-image-card {
        flex-direction: row; /* Side-by-side on larger screens */
        padding: 0; /* Remove padding from parent to let cols handle it */
    }
    .partner-image-card .col-md-6:first-child {
        padding-right: 1rem; /* Add some spacing between image and text */
    }
    .partner-image-card .col-md-6:last-child {
        padding-left: 1rem; /* Add some spacing between image and text */
    }
}
.partner-image-card img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem; /* Rounded corners for image */
    object-fit: cover; /* Ensure image covers space */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.partner-image-card .content-wrapper {
    padding: 2rem; /* Padding inside the content column */
}

/* Styles for the full-width "Join Now" section */
.join-now-full-width {
    padding: 0; /* Remove default padding from the section */
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.join-now-full-width .row {
    margin: 0; /* Remove default row margins */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Added transition */
}
.join-now-full-width .row:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 15px 30px rgba(0,0,0,0.25); /* More pronounced shadow on hover */
}
.join-now-full-width .col-md-6 {
    padding: 0; /* Remove default column padding */
}
.join-now-full-width .content-area {
    padding: 4rem 2rem; /* Add specific padding for content */
    background-color: #ffffff; /* White background for content area */
    border-radius: 0 0.75rem 0.75rem 0; /* Rounded corners for the right side on desktop */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    height: 100%; /* Ensure content area takes full height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
}
.join-now-full-width img {
    border-radius: 0.75rem 0 0 0.75rem; /* Rounded corners for the left side on desktop */
}

@media (max-width: 767.98px) {
    .join-now-full-width .content-area {
        border-radius: 0.75rem; /* Rounded corners for the whole card on mobile */
        margin-top: 1rem; /* Space between image and text on mobile */
    }
    .join-now-full-width img {
        border-radius: 0.75rem; /* Rounded corners for the whole image on mobile */
    }
}

/* Custom style for larger phone numbers */
.large-phone-number, .large-phone-number a {
    font-size: 2.2rem; /* Larger font size */
    font-weight: 700; /* Ensure it's bold */
    color: #ffffff; /* Changed to white */
    margin-bottom: 0.5rem; /* Add some space below each number */
    transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out; /* Added transition */
    text-decoration: none;
}
.large-phone-number:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    text-shadow: 0 0 10px rgba(255,255,255,0.8); /* Subtle glow effect */
}
@media (min-width: 768px) {
    .large-phone-number , .large-phone-number a  {
        font-size: 2.2rem; /* Even larger on desktop */
    }
}

/* Creative section styles */
.creative-section {
    background-color: #f0f8ff; /* Light blue background */
    padding: 4rem 1rem;
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 1rem;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
}
.creative-section h2 {
    color: #085faf;
    font-weight: 700;
    margin-bottom: 2.5rem;
}
.creative-item {
    background-color: #ffffff;
    padding: 2rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.creative-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.creative-item .icon-wrapper {
    background-color: #085faf;
    color: white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.creative-item h3 {
    color: #085faf;
    font-weight: 600;
    margin-bottom: 1rem;
}
.creative-item p {
    color: #555;
    font-size: 0.95rem;
}

/* New App Download Section Styles */
.app-download-section {
    padding: 0; /* Remove default padding */
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-image: linear-gradient(to right, rgba(8, 95, 174, 0.9), rgba(10, 164, 197, 0.9)); /* Gradient background */
    color: white;
    border-radius: 0.75rem; /* Rounded corners for the section */
    overflow: hidden; /* Ensures content respects border-radius */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.app-download-section .row {
    margin: 0; /* Remove default row margins */
}
.app-download-section .col-md-6 {
    padding: 0; /* Remove default column padding */
}
.app-download-section .image-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem; /* Padding around the image */
}
.app-download-section .image-column img {
    max-width: 100%;
    height: auto;
    max-height: 400px; /* Limit image height */
    object-fit: contain;
    animation: float-animation 3s ease-in-out infinite; /* Apply float animation */
}
.app-download-section .content-column {
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.app-download-section h2 {
    font-weight: 700;
    margin-bottom: 1.5rem;
}
.app-download-section .btn-disabled-custom {
    background-color: #fff;
    color: #085faf;
    padding: 0.75rem 2rem;
    border-radius: 9999px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    opacity: 0.75;
    cursor: not-allowed;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-download-section .btn-disabled-custom:hover {
    background-color: #fff;
    color: #085faf;
}

/* Style for the new select menu */
.language-select {
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    height: calc(1.5em + 0.75rem + 2px); /* Match Bootstrap button height */
    background-color: #085faf; /* Match button background */
    color: white;
    cursor: pointer;
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
.language-select:focus {
    border-color: #064a8a;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(8, 95, 174, 0.25);
}
.language-select option {
    background-color: #085faf; /* Option background */
    color: white;
}

/* Terms and Conditions specific styles (reused for Privacy Policy) */
.policy-content { /* Generic class for policy pages */
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    margin-top: 2rem;
    margin-bottom: 2rem;
    text-align: left; /* Align text left for readability */
}
.policy-content h3 {
    color: #085faf;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}
.policy-content p {
    margin-bottom: 1rem;
    line-height: 1.6;
}
.policy-content ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}
.policy-content ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.btn-outline-primary-custom{
    border: #085faf 1px solid;
    background-color:none;
    color:  #085faf;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.btn-outline-primary-custom:hover {
    background-color: #085faf; /* Darker blue for hover */
    color: white;
}