/* City Page Styles */
.city-page-hero {
    position: relative;
    height: 60vh;
    min-height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    margin-bottom: 40px;
}

.city-page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Darker overlay for better text contrast */
}

.city-hero-content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.city-hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.city-hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 32px;
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
    max-width: 700px;
}

.city-content-section {
    padding: 40px 0;
}

.city-section-title {
    font-size: 2.2rem;
    color: #e91e63;
    margin-bottom: 30px;
    text-align: center;
}

.city-text-block {
    margin-bottom: 30px;
    font-size: 1.1rem;
    line-height: 1.8;
}

.city-image-row {
    display: flex;
    gap: 20px;
    margin: 40px 0;
    justify-content: center;
    flex-wrap: wrap;
}

.city-image-row img {
    width: 100%;
    max-width: 350px;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.city-image-row img:hover {
    transform: translateY(-5px);
}

.city-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin: 40px 0;
}

.city-list {
    list-style: none;
    padding: 0;
}

.city-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.city-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #e91e63;
    font-weight: bold;
}

.city-table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

.city-table th, .city-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.city-table th {
    background-color: #f8f9fa;
    color: #e91e63;
    font-weight: 600;
}

.city-table tr:hover {
    background-color: #fdfdfd;
}

/* Mobile Responsiveness Updates */
@media (max-width: 768px) {
    .city-page-hero {
        height: auto;
        min-height: 450px;
        padding: 80px 0; /* Add top/bottom padding to prevent cutoff */
        background-attachment: scroll; /* Better performance on mobile */
    }

    .city-hero-content {
        padding: 20px 15px;
        width: 100%;
    }

    .city-hero-title {
        font-size: 2.2rem; /* Smaller font for mobile */
        margin-bottom: 15px;
    }
    
    .city-hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 25px;
    }

    .city-grid-2 {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .city-image-row img {
        max-width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    
    .city-section-title {
        font-size: 1.8rem;
    }

    /* Ensure table is scrollable on very small screens if needed */
    .city-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Additional City Page Components */
.city-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0;
}

.city-pros, .city-cons {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.city-pros h3 {
    color: #2e7d32;
    margin-bottom: 15px;
    border-bottom: 2px solid #2e7d32;
    padding-bottom: 10px;
    display: inline-block;
}

.city-cons h3 {
    color: #c62828;
    margin-bottom: 15px;
    border-bottom: 2px solid #c62828;
    padding-bottom: 10px;
    display: inline-block;
}

.city-testimonial-card {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    border-left: 5px solid #e91e63;
}

.city-testimonial-text {
    font-style: italic;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 20px;
}

.city-testimonial-author {
    font-weight: bold;
    color: #333;
    text-align: right;
}

@media (max-width: 768px) {
    .city-pros-cons-grid {
        grid-template-columns: 1fr;
    }
}


/* Version: 2.0 - Mobile Navigation Fix */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

ul {
    list-style: none;
}

/* Prevent horizontal scrolling and content overflow */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure all elements respect viewport width */
* {
    max-width: 100%;
}

/* Container */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    overflow-x: hidden;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 16px;
    min-height: 44px;
    line-height: 1.2;
}

.btn-primary {
    background: linear-gradient(135deg, #e91e63, #ad1457);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ad1457, #880e4f);
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: #e9dde1;
    border: 2px solid #e1d2d7;
}

.btn-secondary:hover {
    background: #e91e63;
    color: white;
}

.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

/* Header */
.header {
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.logo-link:hover {
    opacity: 0.8;
}

.logo-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.logo-text {
    font-size: 24px;
    font-weight: 700;
    color: #e91e63;
}

.nav {
    display: none;
    align-items: center;
    gap: 30px;
}

.nav-list {
    display: flex;
    gap: 25px;
}

.nav-link {
    font-weight: 500;
    color: #333;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #e91e63;
}

.mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: #333;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile Navigation */
@media (max-width: 767px) {
    .header {
        overflow: visible;
        position: sticky;
        background: white;
    }
    
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        flex-direction: column;
        padding: 0;
        display: none;
        z-index: 9999;
        width: 100%;
    }
    
    .nav.nav-open {
        display: flex;
    }
    
    .nav-list {
        flex-direction: column;
        gap: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .nav-list li {
        width: 100%;
        border-bottom: 1px solid #e0e0e0;
        list-style: none;
    }
    
    .nav-list li:last-child {
        border-bottom: none;
    }
    
    .nav-link {
        display: block;
        padding: 16px 20px;
        color: #333 !important;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease;
        background: white;
    }
    
    .nav-link:hover,
    .nav-link:active {
        color: #e91e63 !important;
        background: #f8f9fa;
    }
    
    .nav-cta {
        margin: 0;
        width: 100%;
        padding: 20px;
        border-top: 2px solid #e0e0e0;
        background: white;
    }
    
    .nav-cta .btn {
        width: 100%;
        display: block;
        text-align: center;
        padding: 14px 24px;
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    /* Ensure header-content is positioned for nav */
    .header-content {
        position: relative;
        z-index: 10000;
        background: white;
        padding: 15px 0;
    }
    
    .mobile-menu-toggle {
        position: relative;
        z-index: 10001;
    }
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.9), rgba(173, 20, 87, 0.9)), url('images/sugarmomma\ \(1\).jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 80px 0;
    text-align: center;
    overflow: hidden;
    width: 100%;
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.95;
    line-height: 1.5;
}

.hero-ctas {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

/* Explained Section */
.explained {
    padding: 80px 0;
    background: #f8f9fa;
}

.explained h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.explained-text p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.7;
}

.values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 40px;
}

.value-item {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.value-item h3 {
    color: #e91e63;
    margin-bottom: 10px;
    font-size: 1.3rem;
}

/* Users Section */
.users {
    padding: 80px 0;
}

.users h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.users-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.user-type {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease;
}

.user-type:hover {
    transform: translateY(-5px);
}

.user-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 4px solid #e91e63;
}

.user-type h3 {
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.user-type p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Why Us Section */
.why-us {
    padding: 80px 0;
    background: #f8f9fa;
}

.why-us h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.why-us h3 {
    text-align: center;
    margin-bottom: 50px;
    color: #666;
    font-size: 1.3rem;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.feature-item {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.feature-item h4 {
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.feature-item p {
    line-height: 1.6;
    font-size: 1rem;
}

/* Platform Features */
.platform-features {
    padding: 80px 0;
}

.platform-features h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.features-grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.feature-card {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.feature-card h4 {
    color: #e91e63;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.feature-card p {
    font-size: 0.95rem;
    line-height: 1.5;
}

/* How It Works */
.how-it-works {
    padding: 80px 0;
    background: #f8f9fa;
}

.how-it-works h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 50px;
}

.step {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.step-number {
    width: 50px;
    height: 50px;
    background: #e91e63;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 15px;
}

.step h4 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.step p {
    font-size: 1rem;
    line-height: 1.5;
}

.safety-tips {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.safety-tips h3 {
    color: #e91e63;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.safety-tips ul {
    list-style: disc;
    padding-left: 20px;
}

.safety-tips li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Terms Section */
.terms {
    padding: 80px 0;
}

.terms h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.terms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.term-item {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid #e91e63;
}

.term-item h4 {
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.term-item p {
    line-height: 1.6;
    font-size: 1rem;
}

/* Featured Members */
.featured-members {
    padding: 80px 0;
    background: #f8f9fa;
}

.featured-members h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.featured-members h3 {
    font-size: 1.8rem;
    margin: 40px 0 30px;
    color: #e91e63;
    text-align: center;
}

.disclaimer {
    text-align: center;
    font-style: italic;
    color: #666;
    margin-bottom: 40px;
}

.members-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 50px;
}

.member-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.member-card:hover {
    transform: translateY(-5px);
}

.member-photo {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.member-info {
    padding: 20px;
}

.member-info h4 {
    color: #e91e63;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.member-info p {
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Cities Section */
.cities {
    padding: 80px 0;
}

.cities h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.cities-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.city-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.city-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.city-content {
    padding: 25px;
}

.city-content h3 {
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.city-content p {
    line-height: 1.6;
    font-size: 1rem;
}

/* Membership Section */
.membership {
    padding: 80px 0;
    background: #f8f9fa;
}

.membership h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.membership-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.membership-card {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    position: relative;
}

.membership-card.featured {
    border: 3px solid #e91e63;
}

.membership-card.exclusive {
    background: linear-gradient(135deg, #e91e63, #ad1457);
    color: white;
}

.membership-card h3 {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #333;
}

.membership-card.exclusive h3 {
    color: white;
}

.price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e91e63;
    margin-bottom: 10px;
}

.membership-card.exclusive .price {
    color: white;
}

.duration {
    font-size: 1rem;
    color: #666;
    margin-bottom: 20px;
    display: block;
}

.pricing-options {
    margin-bottom: 25px;
}

.price-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.price-option:last-child {
    border-bottom: none;
}

.monthly {
    font-size: 0.9rem;
    color: #666;
}

.features-list {
    list-style: none;
    margin-bottom: 30px;
    text-align: left;
}

.features-list li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 25px;
}

.features-list li:before {
    content: "✓";
    color: #e91e63;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.membership-card.exclusive .features-list li:before {
    color: white;
}

/* Success Stories */
.success-stories {
    padding: 80px 0;
}

.success-stories h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.stories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.story-item {
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.story-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.story-content {
    padding: 25px;
}

.story-content h4 {
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.story-content p {
    line-height: 1.6;
    font-size: 1rem;
}

/* Latest Blogs */
.latest-blogs {
    padding: 80px 0;
    background: #f8f9fa;
}

.latest-blogs h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 15px;
    color: #333;
}

.blog-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 50px;
}

.blogs-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.blog-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content {
    padding: 25px;
}

.blog-date {
    font-size: 0.9rem;
    color: #e91e63;
    margin-bottom: 10px;
    font-weight: 500;
}

.blog-card h4 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.3rem;
    line-height: 1.4;
}

.blog-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 1rem;
}

.blog-link {
    color: #e91e63;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-link:hover {
    color: #ad1457;
}

/* FAQ Section */
.faq {
    padding: 80px 0;
    background: #f8f9fa;
}

.faq h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.faq-item {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.faq-item h4 {
    color: #e91e63;
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.faq-item p {
    line-height: 1.6;
    font-size: 1rem;
}

/* Final CTA */
.final-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #e91e63, #ad1457);
    color: white;
    text-align: center;
}

.cta-content h2 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.95;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.final-cta .btn {
    background: white;
    color: #e91e63;
    font-size: 1.2rem;
    padding: 18px 36px;
}

.final-cta .btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
}

/* Footer */
.footer {
    background: #333;
    color: white;
    padding: 40px 0;
}

.footer-content {
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.footer-links a {
    color: white;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #e91e63;
}

/* Tablet Styles */
@media (min-width: 768px) {
    .terms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .members-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cities-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .membership-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .city-item {
        display: flex;
        align-items: center;
    }
    
    .city-image {
        width: 200px;
        height: 150px;
        flex-shrink: 0;
    }
    
    .story-item {
        display: flex;
        align-items: center;
    }
    
    .story-image {
        width: 200px;
        height: 150px;
        flex-shrink: 0;
    }
    
    /* Index page specific: Image on left of title, not above paragraph */
    .success-stories .story-item {
        display: block;
    }
    
    .success-stories .story-content {
        display: grid;
        grid-template-columns: 200px 1fr;
        grid-template-rows: auto auto;
        gap: 20px;
        align-items: start;
        padding: 25px;
    }
    
    .success-stories .story-image {
        width: 200px;
        height: 200px;
        grid-column: 1;
        grid-row: 1 / 3;
        border-radius: 8px;
        object-fit: cover;
    }
    
    .success-stories .story-content h4 {
        grid-column: 2;
        grid-row: 1;
        margin: 0 0 15px 0;
    }
    
    .success-stories .story-content p {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .members-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .membership-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cities-grid {
        grid-template-columns: 1fr;
    }
    
    .stories-grid {
        grid-template-columns: 1fr;
    }
    
    .city-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    
    .story-item:nth-child(even) {
        flex-direction: row-reverse;
    }
    
    /* Index page specific: Larger image on left of title */
    .success-stories .story-item,
    .success-stories .story-item:nth-child(even) {
        display: block;
    }
    
    .success-stories .story-content {
        display: grid;
        grid-template-columns: 250px 1fr;
        grid-template-rows: auto auto;
        gap: 25px;
    }
    
    .success-stories .story-image {
        width: 250px;
        height: 250px;
        grid-column: 1;
        grid-row: 1 / 3;
    }
    
    .success-stories .story-content h4 {
        grid-column: 2;
        grid-row: 1;
    }
    
    .success-stories .story-content p {
        grid-column: 2;
        grid-row: 2;
    }
}

/* Join Page Styles */
.join-hero {
    padding: 100px 0;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.9), rgba(173, 20, 87, 0.9));
    color: white;
    text-align: center;
}

.join-content h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.join-content > p {
    font-size: 1.3rem;
    margin-bottom: 50px;
    opacity: 0.95;
}

.join-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 800px;
    margin: 0 auto 40px;
}

.join-option {
    background: rgba(255, 255, 255, 0.1);
    padding: 40px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.join-option h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.join-option p {
    font-size: 1.1rem;
    margin-bottom: 25px;
    opacity: 0.9;
}

.join-note {
    font-size: 1rem;
    opacity: 0.8;
    max-width: 500px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .join-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large Desktop Styles */
@media (min-width: 1200px) {
    .terms-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet Styles */
@media (min-width: 768px) {
    .nav {
        display: flex;
    }
    
    .mobile-menu-toggle {
        display: none;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-ctas {
        flex-direction: row;
        justify-content: center;
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .users-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .features-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .blogs-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .hero-title {
        font-size: 3.5rem;
    }
    
    .values-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .features-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Large Desktop Styles */
@media (min-width: 1200px) {
    .features-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .steps-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile Optimization - Prevent Overflow and Shaking */
@media (max-width: 767px) {
    /* Prevent horizontal scroll on all sections */
    section {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Ensure all grid containers don't overflow */
    .users-grid,
    .features-grid,
    .features-grid-4,
    .steps-grid,
    .terms-grid,
    .members-grid,
    .cities-grid,
    .membership-grid,
    .stories-grid,
    .faq-grid,
    .blogs-grid {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Prevent text overflow */
    h1, h2, h3, h4, h5, h6, p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    /* Ensure images don't cause overflow */
    img {
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    /* Prevent button overflow */
    .btn {
        max-width: 100%;
        word-wrap: break-word;
    }
    
    /* Smooth scrolling and prevent bounce */
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: none;
    }
    
    /* Prevent zoom on input focus */
    input, select, textarea {
        font-size: 16px;
    }
}

/* Sugar Momma Page Specific Styles */

/* Sugar Momma Hero */
.sugar-momma-hero {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.9), rgba(173, 20, 87, 0.9)), url('images/sugarmomma\ \(15\).jpg');
    background-size: cover;
    background-position: center;
}

/* Overview Section */
.sugar-momma-overview {
    padding: 80px 0;
    background: #f8f9fa;
}

.sugar-momma-overview h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.overview-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.overview-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.overview-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.stat-item {
    background: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #e91e63;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 1rem;
    color: #666;
}

/* Definition Section */
.sugar-momma-definition {
    padding: 80px 0;
}

.sugar-momma-definition h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.definition-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 50px;
}

.definition-main h3 {
    color: #e91e63;
    font-size: 1.6rem;
    margin-bottom: 20px;
    margin-top: 30px;
}

.definition-main h3:first-child {
    margin-top: 0;
}

.definition-main p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.characteristics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}

.characteristic-item {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
}

.characteristic-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 4px solid #e91e63;
}

.characteristic-item h4 {
    color: #e91e63;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.characteristic-item p {
    font-size: 1rem;
    line-height: 1.6;
}

.definition-features h3 {
    color: #e91e63;
    font-size: 1.6rem;
    margin-bottom: 30px;
}

.offers-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.offer-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #e91e63;
}

.offer-item h4 {
    color: #e91e63;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.offer-item p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Benefits Section */
.sugar-momma-benefits {
    padding: 80px 0;
    background: #f8f9fa;
}

.sugar-momma-benefits h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.benefits-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.benefits-intro p {
    font-size: 1.1rem;
    line-height: 1.7;
}

.sugar-momma-benefits .benefits-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.benefit-card {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.benefit-number {
    width: 50px;
    height: 50px;
    background: #e91e63;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.benefit-card h3 {
    color: #333;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.benefit-card p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.benefit-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

/* Types Section */
.sugar-momma-types {
    padding: 80px 0;
}

.sugar-momma-types h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.types-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.type-card {
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.type-card:hover {
    transform: translateY(-5px);
}

.type-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.type-card h3 {
    color: #e91e63;
    font-size: 1.4rem;
    margin: 20px 20px 15px;
}

.type-card p {
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 20px 20px;
}

/* Locations Section */
.sugar-momma-locations {
    padding: 80px 0;
    background: #f8f9fa;
}

.sugar-momma-locations h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.locations-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.location-category {
    margin-bottom: 60px;
}

.location-category:last-child {
    margin-bottom: 0;
}

.location-category h3 {
    color: #e91e63;
    font-size: 1.8rem;
    margin-bottom: 30px;
    text-align: center;
}

.sugar-momma-locations .city-rankings,
.sugar-momma-locations .income-rankings,
.sugar-momma-locations .wealth-rankings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.city-rank {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.rank-number {
    width: 60px;
    height: 60px;
    background: #e91e63;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.rank-content {
    flex: 1;
}

.rank-content h4 {
    color: #333;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.rank-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.city-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 15px;
}

.income-item,
.wealth-item {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.income-item h4,
.wealth-item h4 {
    color: #e91e63;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.income-item p,
.wealth-item p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Find Sugar Momma Section */
.find-sugar-momma {
    padding: 80px 0;
}

.find-sugar-momma h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.find-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.find-sugar-momma .find-methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.method-card {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.method-card h3 {
    color: #e91e63;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.method-card > p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.method-tips {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.method-tips h4 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.method-tips ul {
    list-style: disc;
    padding-left: 20px;
}

.method-tips li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.method-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

.find-cta {
    background: linear-gradient(135deg, #e91e63, #ad1457);
    color: white;
    padding: 50px;
    border-radius: 8px;
    text-align: center;
    margin-top: 50px;
}

.find-cta h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.find-cta p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

/* Conclusion Section */
.sugar-momma-conclusion {
    padding: 80px 0;
    background: #f8f9fa;
}

.sugar-momma-conclusion h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.conclusion-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.conclusion-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 50px 0;
}

.stat-highlight {
    background: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.stat-highlight .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #e91e63;
    margin-bottom: 10px;
}

.stat-highlight .stat-text {
    font-size: 1rem;
    color: #666;
}

.conclusion-cta {
    background: white;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.conclusion-cta h3 {
    color: #e91e63;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.conclusion-cta p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

/* Tablet Styles */
@media (min-width: 768px) {
    .overview-content {
        grid-template-columns: 2fr 1fr;
    }
    
    .overview-stats {
        grid-template-columns: 1fr;
    }
    
    .characteristics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .offers-list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sugar-momma-benefits .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sugar-momma-locations .city-rankings {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sugar-momma-locations .income-rankings,
    .sugar-momma-locations .wealth-rankings {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .find-sugar-momma .find-methods {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .conclusion-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .characteristics-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .types-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sugar-momma-locations .city-rankings {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sugar-momma-locations .income-rankings,
    .sugar-momma-locations .wealth-rankings {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .find-sugar-momma .find-methods {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* CRITICAL FIX: Mobile Navigation Override - Must be at end of file */
@media (max-width: 767px) {
    /* Ensure all sections are below header */
    section {
        position: relative;
        z-index: 1 !important;
    }
    
    /* Force hero section to be below header */
    .hero,
    .sugar-momma-hero,
    .cougar-dating-hero,
    .blog-hero,
    .blog-hero-guide {
        position: relative;
        z-index: 1 !important;
    }
    
    /* Force header visibility with highest z-index */
    .header {
        overflow: visible !important;
        position: sticky !important;
        background: white !important;
        z-index: 10000 !important;
        top: 0 !important;
    }
    
    /* Make header-content relative for nav positioning */
    .header-content {
        position: relative !important;
        z-index: 10001 !important;
        background: white !important;
    }
    
    /* Ensure container doesn't clip the nav */
    .header .container {
        position: relative !important;
        overflow: visible !important;
    }
    
    /* Force nav menu visibility - positioned relative to header-content */
    .nav {
        position: absolute !important;
        display: none !important;
        top: 100% !important;
        left: -20px !important;
        right: -20px !important;
        background: white !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
        z-index: 10000 !important;
        padding: 0 !important;
        margin: 0 !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .nav.nav-open {
        display: flex !important;
        flex-direction: column !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        overflow: visible !important;
        background: white !important;
        z-index: 10000 !important;
    }
    
    /* Force nav list visibility */
    .nav-list {
        display: flex !important;
        flex-direction: column !important;
        background: white !important;
        z-index: 10000 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    
    .nav-list li {
        width: 100% !important;
        border-bottom: 1px solid #e0e0e0 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .nav-list li:last-child {
        border-bottom: none !important;
    }
    
    /* Force nav link visibility */
    .nav-link {
        display: block !important;
        padding: 16px 20px !important;
        color: #333 !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        background: white !important;
        position: relative !important;
        z-index: 10000 !important;
        width: 100% !important;
    }
    
    .nav-link:hover,
    .nav-link:active,
    .nav-link:focus {
        color: #e91e63 !important;
        background: #f8f9fa !important;
    }
    
    /* Force button visibility */
    .nav-cta {
        display: block !important;
        background: white !important;
        padding: 20px !important;
        z-index: 10000 !important;
        border-top: 2px solid #e0e0e0 !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .nav-cta .btn {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        position: relative !important;
        z-index: 10000 !important;
    }
    
    /* Ensure mobile menu toggle is on top */
    .mobile-menu-toggle {
        position: relative !important;
        z-index: 10002 !important;
        display: flex !important;
    }
}


/* Cougar Dating Page Specific Styles */

/* Cougar Dating Hero */
.cougar-dating-hero {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.9), rgba(173, 20, 87, 0.9)), url('images/sugardating\ \(10\).jpg');
    background-size: cover;
    background-position: center;
}

/* Cougar Overview Section */
.cougar-overview {
    padding: 80px 0;
    background: #f8f9fa;
}

.cougar-overview h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.cougar-overview .overview-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.overview-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.overview-image .feature-img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Cougar Definition Section */
.cougar-definition {
    padding: 80px 0;
}

.cougar-definition h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.definition-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.definition-detailed h3 {
    color: #e91e63;
    font-size: 1.6rem;
    margin: 40px 0 20px;
}

.definition-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 30px;
    align-items: center;
}

.definition-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

.definition-image .content-img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.features-grid-cougar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}

.feature-box {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
}

.feature-icon-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 4px solid #e91e63;
}

.feature-box h4 {
    color: #e91e63;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.feature-box p {
    font-size: 1rem;
    line-height: 1.6;
}

/* Cougar vs Sugar Section */
.cougar-vs-sugar {
    padding: 80px 0;
    background: #f8f9fa;
}

.cougar-vs-sugar h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.comparison-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin-bottom: 40px;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.comparison-table thead {
    background: #e91e63;
    color: white;
}

.comparison-table th,
.comparison-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.comparison-table th {
    font-weight: 600;
    font-size: 1.1rem;
}

.comparison-table tbody tr:hover {
    background: #f8f9fa;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-details h3 {
    color: #e91e63;
    font-size: 1.6rem;
    margin: 40px 0 20px;
}

.difference-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 40px;
}

.difference-item {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.difference-item h4 {
    color: #e91e63;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.difference-item p {
    font-size: 1rem;
    line-height: 1.6;
}

.similarities-list {
    list-style: none;
    padding: 0;
}

.similarities-list li {
    background: white;
    padding: 15px 15px 15px 45px;
    margin-bottom: 10px;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    font-size: 1rem;
    line-height: 1.6;
}

.similarities-list li:before {
    content: "✓";
    position: absolute;
    left: 15px;
    color: #e91e63;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Pros and Cons Section */
.pros-cons-section {
    padding: 80px 0;
}

.pros-cons-section h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.pros-column h3,
.cons-column h3 {
    color: #e91e63;
    font-size: 1.6rem;
    margin-bottom: 30px;
    text-align: center;
}

.pro-item,
.con-item {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.pro-item h4,
.con-item h4 {
    color: #333;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.pro-item p,
.con-item p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.benefit-img,
.challenge-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 15px;
}

/* Common Mistakes Section */
.common-mistakes {
    padding: 80px 0;
    background: #f8f9fa;
}

.common-mistakes h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.section-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.mistakes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Tablet Styles for Common Mistakes */
@media (min-width: 768px) {
    .mistakes-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* Desktop Styles for Common Mistakes - 3 columns */
@media (min-width: 1024px) {
    .mistakes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

.mistake-card {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.mistake-number {
    width: 50px;
    height: 50px;
    background: #e91e63;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.mistake-card h3 {
    color: #333;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.mistake-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.mistake-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.mistake-fix {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #e91e63;
}

.mistake-fix h4 {
    color: #e91e63;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.mistake-fix ul {
    list-style: disc;
    padding-left: 20px;
}

.mistake-fix li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Balance Section */
.balance-section {
    padding: 80px 0;
}

.balance-section h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.balance-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.1rem;
    line-height: 1.7;
}

.balance-tips-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.balance-tip {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
}

.balance-tip h3 {
    color: #e91e63;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.balance-tip p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.balance-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* Success Stories Cougar */
.success-stories-cougar {
    padding: 80px 0;
    background: #f8f9fa;
}

.success-stories-cougar h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.stories-grid-cougar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.story-card-cougar {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.story-img-cougar {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.story-content-cougar {
    padding: 25px;
}

.story-content-cougar h3 {
    color: #e91e63;
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.story-content-cougar p {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.story-content-cougar p strong {
    color: #333;
    font-weight: 600;
}

/* Why SugarMomma Cougar */
.why-sugarmomma-cougar {
    padding: 80px 0;
}

.why-sugarmomma-cougar h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.benefit-section {
    margin-bottom: 50px;
}

.benefit-section h3 {
    color: #e91e63;
    font-size: 1.6rem;
    margin-bottom: 30px;
}

.feature-list-detailed {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.feature-detail {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
}

.feature-detail h4 {
    color: #333;
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.feature-detail p {
    font-size: 1rem;
    line-height: 1.6;
}

.quality-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.quality-item {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    text-align: center;
}

.quality-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 4px solid #e91e63;
}

.quality-item h4 {
    color: #e91e63;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.quality-item p {
    font-size: 1rem;
    line-height: 1.6;
}

.attraction-list {
    list-style: none;
    padding: 0;
}

.attraction-list li {
    background: #f8f9fa;
    padding: 20px;
    margin-bottom: 15px;
    border-radius: 8px;
    border-left: 4px solid #e91e63;
    font-size: 1rem;
    line-height: 1.6;
}

.attraction-list li strong {
    color: #e91e63;
}

.platform-cta {
    background: linear-gradient(135deg, #e91e63, #ad1457);
    color: white;
    padding: 50px;
    border-radius: 8px;
    text-align: center;
    margin-top: 50px;
}

.platform-cta h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.platform-cta p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

/* Cougar Conclusion */
.cougar-conclusion {
    padding: 80px 0;
    background: #f8f9fa;
}

.cougar-conclusion h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.conclusion-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 25px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.final-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 50px 0;
}

.stat-box {
    background: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.stat-box .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #e91e63;
    margin-bottom: 10px;
}

.stat-box .stat-label {
    font-size: 1rem;
    color: #666;
}

.conclusion-cta-box {
    background: white;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.conclusion-cta-box h3 {
    color: #e91e63;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.conclusion-cta-box p {
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.cta-buttons-final {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

/* Tablet Responsive */
@media (min-width: 768px) {
    .cougar-overview .overview-content {
        grid-template-columns: 2fr 1fr;
    }
    
    .definition-content-grid {
        grid-template-columns: 2fr 1fr;
    }
    
    .features-grid-cougar {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .difference-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .pros-cons-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .balance-tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stories-grid-cougar {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quality-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .final-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .cta-buttons-final {
        flex-direction: row;
        justify-content: center;
    }
}

/* Desktop Responsive */
@media (min-width: 1024px) {
    .features-grid-cougar {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .difference-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stories-grid-cougar {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .quality-features {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* ===================================
   About Page Styles
   =================================== */

/* About Hero */
.about-hero {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    padding: 80px 0 60px;
}

.about-hero .hero-title {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-hero .hero-subtitle {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Who We Are Section */
.about-who-we-are {
    padding: 80px 0;
    background: #fff;
}

.about-who-we-are h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 50px;
}

.about-who-we-are h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 20px;
}

.about-who-we-are h4 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 15px;
}

.story-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 60px;
}

.story-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.story-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.about-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.vision-content {
    margin-bottom: 60px;
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px;
}

.vision-item {
    text-align: center;
}

.vision-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 20px;
}

.vision-item h4 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.vision-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

.evolution-content {
    margin-top: 60px;
}

.evolution-content > p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 40px;
}

.timeline {
    position: relative;
    padding-left: 50px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e91e63;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-year {
    position: absolute;
    left: -50px;
    top: 0;
    width: 60px;
    height: 60px;
    background: #e91e63;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
}

.timeline-content {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    margin-left: 30px;
}

.timeline-content h4 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.timeline-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Mission Section */
.about-mission {
    padding: 80px 0;
    background: #f9f9f9;
}

.about-mission h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.mission-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.mission-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.mission-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.pillar {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.pillar-icon {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
}

.pillar-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.pillar h3 {
    font-size: 1.4rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.pillar p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* What Makes Us Different Section */
.about-different {
    padding: 80px 0;
    background: #fff;
}

.about-different h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.different-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.different-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.different-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.different-item {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
}

.different-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.different-item h3 {
    font-size: 1.4rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.different-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* How It Works Section */
.about-how-it-works {
    padding: 80px 0;
    background: #f9f9f9;
}

.about-how-it-works h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.how-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.how-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.journey-section {
    margin-bottom: 60px;
}

.journey-section h3 {
    font-size: 2rem;
    color: #e91e63;
    margin-bottom: 30px;
    text-align: center;
}

.journey-steps {
    max-width: 900px;
    margin: 0 auto;
}

.journey-step {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.journey-step .step-number {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: #e91e63;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.step-content h4 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 10px;
}

.step-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Features Section */
.about-features {
    padding: 80px 0;
    background: #fff;
}

.about-features h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.features-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.features-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.features-showcase {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.feature-showcase-item {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
}

.showcase-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.feature-showcase-item h3 {
    font-size: 1.2rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.feature-showcase-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}

/* Privacy Section */
.about-privacy {
    padding: 80px 0;
    background: #f9f9f9;
}

.about-privacy h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.privacy-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.privacy-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.privacy-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.privacy-item {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.privacy-item h3 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.privacy-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

.safety-commitment {
    max-width: 900px;
    margin: 60px auto 0;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.safety-commitment h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 20px;
    text-align: center;
}

.safety-commitment p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
}

/* Success Stories Section */
.about-success {
    padding: 80px 0;
    background: #fff;
}

.about-success h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.success-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.success-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.success-stories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 50px;
}

.success-story {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 40px;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
}

.success-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.success-content h3 {
    font-size: 1.5rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.success-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}

/* Future Vision Section */
.about-future {
    padding: 80px 0;
    background: #f9f9f9;
}

.about-future h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 50px;
}

.future-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 40px;
    align-items: start;
    margin-bottom: 50px;
}

.future-text h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 20px;
}

.future-text h4 {
    font-size: 1.3rem;
    color: #333;
    margin-top: 30px;
    margin-bottom: 15px;
}

.future-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.future-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    position: sticky;
    top: 100px;
}

.future-img {
    width: 100%;
    height: auto;
    display: block;
}

.future-commitment {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.future-commitment h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 20px;
    text-align: center;
}

.future-commitment p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
}

/* Conclusion Section */
.about-conclusion {
    padding: 80px 0;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: #fff;
    text-align: center;
}

.about-conclusion h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.conclusion-content {
    max-width: 900px;
    margin: 0 auto;
}

.conclusion-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.conclusion-ctas {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 40px 0;
}

.conclusion-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.benefit-point {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.benefit-point h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

.benefit-point p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* PC Styles for About Page - Larger Image */
@media (min-width: 768px) {
    .about-img {
        min-height: ;
    }
}

@media (min-width: 1024px) {
    .about-img {
        min-height: ;
    }
}

/* Responsive Styles for About Page */
@media (max-width: 1024px) {
    .story-content {
        grid-template-columns: 1fr;
    }
    
    .vision-grid {
        grid-template-columns: 1fr;
    }
    
    .mission-pillars {
        grid-template-columns: 1fr;
    }
    
    .different-features {
        grid-template-columns: 1fr;
    }
    
    .features-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .privacy-features {
        grid-template-columns: 1fr;
    }
    
    .success-story {
        grid-template-columns: 1fr;
    }
    
    .success-img {
        height: 250px;
    }
    
    .future-content {
        grid-template-columns: 1fr;
    }
    
    .future-image {
        position: static;
    }
    
    .conclusion-benefits {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-hero .hero-title {
        font-size: 1.8rem;
    }
    
    .about-hero .hero-subtitle {
        font-size: 1rem;
    }
    
    .about-who-we-are h2,
    .about-mission h2,
    .about-different h2,
    .about-how-it-works h2,
    .about-features h2,
    .about-privacy h2,
    .about-success h2,
    .about-future h2,
    .about-conclusion h2 {
        font-size: 1.8rem;
    }
    
    .timeline {
        padding-left: 30px;
    }
    
    .timeline-year {
        left: -40px;
        width: 50px;
        height: 50px;
        font-size: 0.9rem;
    }
    
    .timeline-content {
        margin-left: 20px;
    }
    
    .features-showcase {
        grid-template-columns: 1fr;
    }
    
    .journey-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .conclusion-ctas {
        flex-direction: column;
        align-items: center;
    }
    
    .conclusion-ctas .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .conclusion-benefits {
        grid-template-columns: 1fr;
    }
}


/* ===================================
   Sugar Baby Page Styles
   =================================== */

/* Sugar Baby Hero */
.sugar-baby-hero {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.9), rgba(173, 20, 87, 0.9)), url('images/sugardating\ \(1\).jpg');
    background-size: cover;
    background-position: center;
}

/* Overview Section */
.sugar-baby-overview {
    padding: 80px 0;
    background: #f9f9f9;
}

.sugar-baby-overview h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 40px;
}

.overview-intro p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Meaning Section */
.sugar-baby-meaning {
    padding: 80px 0;
    background: #fff;
}

.sugar-baby-meaning h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.meaning-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.meaning-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.baby-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.baby-type-card {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
}

.baby-type-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.baby-type-card h3 {
    font-size: 1.6rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.baby-type-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px;
}

.baby-type-card ul {
    list-style: disc;
    padding-left: 25px;
    margin-bottom: 15px;
}

.baby-type-card li {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 8px;
}

.baby-features {
    margin-bottom: 60px;
}

.baby-features h3 {
    font-size: 2rem;
    color: #e91e63;
    margin-bottom: 30px;
    text-align: center;
}

.features-list {
    display: grid;
    grid-template-columns: ;
    gap: 30px;
}

.feature-point {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
}

.feature-point h4 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.feature-point p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

.baby-interests h3 {
    font-size: 2rem;
    color: #e91e63;
    margin-bottom: 20px;
    text-align: center;
}

.baby-interests > p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 30px;
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.interests-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.interest-item {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

.interest-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.interest-item h4 {
    font-size: 1.1rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.interest-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

/* Lifestyle Section */
.sugar-baby-lifestyle {
    padding: 80px 0;
    background: #f9f9f9;
}

.sugar-baby-lifestyle h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.lifestyle-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.lifestyle-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.lifestyle-aspects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

/* Sugar Baby Lifestyle Grid - 3 columns on PC */
.sugar-baby-lifestyle-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 1024px) {
    .sugar-baby-lifestyle-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.lifestyle-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.lifestyle-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.lifestyle-card h3 {
    font-size: 1.6rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.lifestyle-card p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

/* Allowance Section */
.sugar-baby-allowance {
    padding: 80px 0;
    background: #fff;
}

.sugar-baby-allowance h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.allowance-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.allowance-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

/* Allowance Table Styles */
.allowance-table-wrapper {
    overflow-x: auto;
    margin-bottom: 60px;
}

.allowance-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    border-radius: 8px;
    overflow: hidden;
}

.allowance-table thead {
    background: linear-gradient(135deg, #e91e63, #c2185b);
    color: #fff;
}

.allowance-table th {
    padding: 18px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 1.05rem;
}

.allowance-table tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.3s ease;
}

.allowance-table tbody tr:last-child {
    border-bottom: none;
}

.allowance-table tbody tr:hover {
    background: #f9f9f9;
}

.allowance-table td {
    padding: 18px 15px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

.allowance-table td:nth-child(1) {
    font-weight: 600;
    color: #e91e63;
}

.allowance-table td:nth-child(2),
.allowance-table td:nth-child(3) {
    white-space: nowrap;
    font-weight: 500;
    color: #333;
}

/* Mobile responsive table */
@media (max-width: 768px) {
    .allowance-table {
        font-size: 0.85rem;
    }
    
    .allowance-table th,
    .allowance-table td {
        padding: 12px 8px;
    }
    
    .allowance-table th {
        font-size: 0.9rem;
    }
}

.allowance-cities {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

.city-allowance {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid #e91e63;
}

.city-allowance h3 {
    font-size: 1.5rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.city-allowance p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
}

.city-allowance strong {
    color: #333;
}

.allowance-factors h3 {
    font-size: 2rem;
    color: #e91e63;
    margin-bottom: 30px;
    text-align: center;
}

.factors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.factor-item {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
}

.factor-item h4 {
    font-size: 1.2rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.factor-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}

/* Scams Section */
.sugar-baby-scams {
    padding: 80px 0;
    background: #f9f9f9;
}

.sugar-baby-scams h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.scams-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.scams-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.scam-types {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.scam-warning h3 {
    font-size: 2rem;
    color: #e91e63;
    margin-bottom: 30px;
}

.scam-item {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid #d32f2f;
    margin-bottom: 20px;
}

.scam-item h4 {
    font-size: 1.3rem;
    color: #d32f2f;
    margin-bottom: 10px;
}

.scam-item p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
}

.scam-item strong {
    color: #d32f2f;
}

.scam-prevention h3 {
    font-size: 2rem;
    color: #e91e63;
    margin-bottom: 30px;
}

.prevention-tips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.tip-card {
    background: #fff;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.tip-card h4 {
    font-size: 1.2rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.tip-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}

/* Success Section */
.sugar-baby-success {
    padding: 80px 0;
    background: #fff;
}

.sugar-baby-success h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.success-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.success-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.success-stories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 60px;
}

.story-card {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 30px;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 12px;
    align-items: start;
}

.story-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 8px;
}

.story-content h3 {
    font-size: 1.5rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.story-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 12px;
}

.story-content strong {
    color: #333;
}

.success-tips {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 12px;
}

.success-tips h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 20px;
    text-align: center;
}

.success-tips ul {
    list-style: disc;
    padding-left: 30px;
    max-width: 900px;
    margin: 0 auto;
}

.success-tips li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 12px;
}

/* Safety Section */
.sugar-baby-safety {
    padding: 80px 0;
    background: #f9f9f9;
}

.sugar-baby-safety h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.safety-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.safety-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.safety-categories {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-bottom: 50px;
}

.safety-category {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.safety-category h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 25px;
}

.safety-tips-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.safety-tip {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #e91e63;
}

.safety-tip h4 {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 10px;
}

.safety-tip p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

.emergency-resources {
    background: #fff3e0;
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid #ff9800;
}

.emergency-resources h3 {
    font-size: 1.6rem;
    color: #e65100;
    margin-bottom: 15px;
}

.emergency-resources p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px;
}

.emergency-resources ul {
    list-style: disc;
    padding-left: 25px;
}

.emergency-resources li {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 10px;
}

/* FAQ Section */
.sugar-baby-faq {
    padding: 80px 0;
    background: #fff;
}

.sugar-baby-faq h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 50px;
}

.sugar-baby-faq .faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* Conclusion Section */
.sugar-baby-conclusion {
    padding: 80px 0;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: #fff;
    text-align: center;
}

.sugar-baby-conclusion h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.conclusion-content {
    max-width: 900px;
    margin: 0 auto;
}

.conclusion-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.conclusion-ctas {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 40px 0;
}

.conclusion-benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 50px;
}

.benefit-highlight {
    background: rgba(255, 255, 255, 0.1);
    padding: 25px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.benefit-highlight h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    color: #fff;
}

.benefit-highlight p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Responsive Styles for Sugar Baby Page */
@media (max-width: 1024px) {
    .baby-types {
        grid-template-columns: 1fr;
    }
    
    .interests-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .factors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .prevention-tips {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .story-card {
        grid-template-columns: 1fr;
    }
    
    .conclusion-benefits {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .sugar-baby-hero .hero-title {
        font-size: 1.8rem;
    }
    
    .sugar-baby-overview h2,
    .sugar-baby-meaning h2,
    .sugar-baby-lifestyle h2,
    .sugar-baby-allowance h2,
    .sugar-baby-scams h2,
    .sugar-baby-success h2,
    .sugar-baby-safety h2,
    .sugar-baby-faq h2,
    .sugar-baby-conclusion h2 {
        font-size: 1.8rem;
    }
    
    .features-list {
        grid-template-columns: 1fr;
    }
    
    .interests-grid {
        grid-template-columns: 1fr;
    }
    
    .factors-grid {
        grid-template-columns: 1fr;
    }
    
    .prevention-tips {
        grid-template-columns: 1fr;
    }
    
    .sugar-baby-faq .faq-grid {
        grid-template-columns: 1fr;
    }
    
    .conclusion-ctas {
        flex-direction: column;
        align-items: center;
    }
    
    .conclusion-ctas .btn {
        width: 100%;
        max-width: 300px;
    }
    
    .conclusion-benefits {
        grid-template-columns: 1fr;
    }
}


/* ===================================
   Safety Page Styles
   =================================== */

/* Safety Hero */
.safety-hero {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.9), rgba(173, 20, 87, 0.9)), url('images/sugarmomma\ \(10\).jpg');
    background-size: cover;
    background-position: center;
}

/* Introduction Section */
.safety-intro-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.safety-intro-section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 40px;
}

.intro-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: center;
}

.intro-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.intro-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.safety-intro-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Online Safety Section */
.safety-online {
    padding: 80px 0;
    background: #fff;
}

.safety-online h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.safety-category-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.safety-category-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.safety-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.safety-tip-card {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.tip-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.safety-tip-card h3 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.safety-tip-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
}

.safety-tip-card strong {
    color: #333;
}

/* Verification Section */
.safety-verification {
    padding: 80px 0;
    background: #f9f9f9;
}

.safety-verification h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.verification-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.verification-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    position: relative;
}

.step-icon {
    width: 60px;
    height: 60px;
    background: #e91e63;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.verification-card h3 {
    font-size: 1.4rem;
    color: #333;
    margin-bottom: 15px;
}

.verification-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

.verification-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
}

/* First Meeting Section */
.safety-first-meeting {
    padding: 80px 0;
    background: #fff;
}

.safety-first-meeting h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.meeting-safety-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.meeting-tip {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 12px;
}

.meeting-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.meeting-tip h3 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.meeting-tip p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
}

.meeting-tip strong {
    color: #333;
}

/* Scams Section */
.safety-scams {
    padding: 80px 0;
    background: #f9f9f9;
}

.safety-scams h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.scam-warnings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}

.scam-alert {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.scam-alert h3 {
    font-size: 2rem;
    color: #d32f2f;
    margin-bottom: 30px;
    text-align: center;
}

.scam-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.scam-type {
    background: #fff3e0;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
}

.scam-type h4 {
    font-size: 1.2rem;
    color: #e65100;
    margin-bottom: 10px;
}

.scam-type p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}

.scam-type strong {
    color: #d32f2f;
}

.red-flags {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.red-flags h3 {
    font-size: 2rem;
    color: #e91e63;
    margin-bottom: 30px;
    text-align: center;
}

.flags-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.flag-item {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #e91e63;
}

.flag-item h4 {
    font-size: 1.1rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.flag-item p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}

/* Ongoing Safety Section */
.safety-ongoing {
    padding: 80px 0;
    background: #fff;
}

.safety-ongoing h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.ongoing-safety-tips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.ongoing-tip {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 12px;
}

.ongoing-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.ongoing-tip h3 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.ongoing-tip p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 12px;
}

.ongoing-tip strong {
    color: #333;
}

/* Platform Safety Section */
.safety-platform {
    padding: 80px 0;
    background: #f9f9f9;
}

.safety-platform h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.platform-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.platform-feature {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.platform-feature h3 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.platform-feature p {
    font-size: 1rem;
    line-height: 1.7;
    color: #555;
}

/* Emergency Section */
.safety-emergency {
    padding: 80px 0;
    background: #fff;
}

.safety-emergency h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.emergency-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.emergency-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.emergency-contacts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 60px;
}

.emergency-card {
    background: #f9f9f9;
    padding: 25px;
    border-radius: 12px;
    border-left: 4px solid #e91e63;
}

.emergency-card.urgent {
    background: #ffebee;
    border-left-color: #d32f2f;
}

.emergency-card h3 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.emergency-card.urgent h3 {
    color: #d32f2f;
}

.emergency-card p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 8px;
}

.emergency-card strong {
    color: #333;
    font-size: 1.1rem;
}

.emergency-actions {
    background: #f9f9f9;
    padding: 40px;
    border-radius: 12px;
}

.emergency-actions h3 {
    font-size: 2rem;
    color: #e91e63;
    margin-bottom: 30px;
    text-align: center;
}

.action-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.action-step {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
}

.action-step h4 {
    font-size: 1.1rem;
    color: #e91e63;
    margin-bottom: 10px;
}

.action-step p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555;
}

/* Checklist Section */
.safety-checklist {
    padding: 80px 0;
    background: #f9f9f9;
}

.safety-checklist h2 {
    text-align: center;
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 30px;
}

.checklist-intro {
    max-width: 900px;
    margin: 0 auto 50px;
    text-align: center;
}

.checklist-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
}

.checklist-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.checklist-category {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.checklist-category h3 {
    font-size: 1.4rem;
    color: #e91e63;
    margin-bottom: 20px;
}

.checklist-list {
    list-style: none;
}

.checklist-list li {
    padding: 10px 0 10px 30px;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
}

.checklist-list li:last-child {
    border-bottom: none;
}

.checklist-list li:before {
    content: "☐";
    position: absolute;
    left: 0;
    color: #e91e63;
    font-size: 1.2rem;
}

/* Conclusion Section */
.safety-conclusion {
    padding: 80px 0;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: #fff;
    text-align: center;
}

.safety-conclusion h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
}

.conclusion-content {
    max-width: 900px;
    margin: 0 auto;
}

.conclusion-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.conclusion-ctas {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 40px 0;
}

.safety-reminder {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    margin-top: 50px;
}

.safety-reminder h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.safety-reminder ul {
    list-style: none;
    text-align: left;
    max-width: 700px;
    margin: 0 auto;
}

.safety-reminder li {
    padding: 10px 0 10px 30px;
    position: relative;
    font-size: 1.05rem;
    line-height: 1.7;
}

.safety-reminder li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Responsive Styles for Safety Page */
@media (max-width: 1024px) {
    .intro-content {
        grid-template-columns: 1fr;
    }
    
    .safety-tips-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .verification-steps {
        grid-template-columns: 1fr;
    }
    
    .meeting-safety-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .scam-list {
        grid-template-columns: 1fr;
    }
    
    .flags-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ongoing-safety-tips {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .platform-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .emergency-contacts {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .action-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .checklist-categories {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .safety-hero .hero-title {
        font-size: 1.8rem;
    }
    
    .safety-intro-section h2,
    .safety-online h2,
    .safety-verification h2,
    .safety-first-meeting h2,
    .safety-scams h2,
    .safety-ongoing h2,
    .safety-platform h2,
    .safety-emergency h2,
    .safety-checklist h2,
    .safety-conclusion h2 {
        font-size: 1.8rem;
    }
    
    .safety-tips-grid {
        grid-template-columns: 1fr;
    }
    
    .meeting-safety-grid {
        grid-template-columns: 1fr;
    }
    
    .flags-grid {
        grid-template-columns: 1fr;
    }
    
    .ongoing-safety-tips {
        grid-template-columns: 1fr;
    }
    
    .platform-features-grid {
        grid-template-columns: 1fr;
    }
    
    .emergency-contacts {
        grid-template-columns: 1fr;
    }
    
    .action-steps {
        grid-template-columns: 1fr;
    }
    
    .checklist-categories {
        grid-template-columns: 1fr;
    }
    
    .conclusion-ctas {
        flex-direction: column;
        align-items: center;
    }
    
    .conclusion-ctas .btn {
        width: 100%;
        max-width: 300px;
    }
}


/* ===================================
   CONTACT PAGE STYLES
   =================================== */

/* Contact Hero */
.contact-hero {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    padding: 100px 0 80px;
}

/* Contact Introduction */
.contact-intro {
    padding: 80px 0 60px;
    background: #f9f9f9;
}

.contact-intro h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

.intro-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.intro-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

/* Contact Methods */
.contact-methods {
    padding: 80px 0;
}

.contact-methods h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.methods-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.method-card {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.method-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 30px rgba(233,30,99,0.2);
}

.method-icon {
    margin-bottom: 20px;
}

.method-card h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 15px;
}

.method-card p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
}

.contact-link {
    display: inline-block;
    color: #e91e63;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    margin: 15px 0;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: #c2185b;
    text-decoration: underline;
}

.response-time {
    font-size: 0.95rem;
    color: #777;
    font-style: italic;
    margin-top: 10px;
}

.office-location {
    font-size: 1.1rem;
    color: #333;
    font-weight: 600;
    margin: 15px 0;
}

/* Common Inquiries */
.contact-inquiries {
    padding: 80px 0;
    background: #f9f9f9;
}

.contact-inquiries h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.inquiries-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.inquiry-item {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.inquiry-item h3 {
    font-size: 1.5rem;
    color: #e91e63;
    margin-bottom: 20px;
}

.inquiry-item ul {
    list-style: none;
    padding: 0;
}

.inquiry-item ul li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}

.inquiry-item ul li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #e91e63;
    font-weight: bold;
}

/* Contact FAQ */
.contact-faq {
    padding: 80px 0;
}

.contact-faq h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.faq-intro {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    margin-bottom: 40px;
}

.faq-intro a {
    color: #e91e63;
    text-decoration: none;
    font-weight: 600;
}

.faq-intro a:hover {
    text-decoration: underline;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

.contact-faq .faq-item {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.contact-faq .faq-item h4 {
    font-size: 1.3rem;
    color: #e91e63;
    margin-bottom: 12px;
}

.contact-faq .faq-item p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #555;
}

/* Feedback Section */
.contact-feedback {
    padding: 80px 0;
    background: #f9f9f9;
}

.contact-feedback h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.feedback-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}

.feedback-text h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 15px;
    margin-top: 30px;
}

.feedback-text h3:first-child {
    margin-top: 0;
}

.feedback-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.feedback-image {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.contact-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Business Hours */
.contact-hours {
    padding: 80px 0;
}

.contact-hours h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 50px;
    color: #333;
}

.hours-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.hours-card {
    background: white;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    text-align: center;
}

.hours-card h3 {
    font-size: 1.6rem;
    color: #e91e63;
    margin-bottom: 20px;
}

.hours-detail {
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 500;
}

.response-note {
    font-size: 0.95rem;
    color: #777;
    font-style: italic;
    margin-top: 15px;
}

/* Contact CTA */
.contact-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
}

.contact-cta .cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.contact-cta h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
}

.contact-cta p {
    font-size: 1.2rem;
    color: white;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Responsive Styles for Contact Page */
@media (min-width: 768px) {
    .methods-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .inquiries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .faq-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feedback-content {
        grid-template-columns: 1fr 1fr;
    }
    
    .hours-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .inquiries-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Find Sugar Mommy Guide Page Styles */

/* Guide Hero */
.blog-hero-guide {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.9), rgba(173, 20, 87, 0.9)), url('images/sugarmomma (20).jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0 80px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.blog-hero-guide h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.blog-hero-subtitle {
    font-size: 1.3rem;
    opacity: 0.95;
    max-width: 800px;
    margin: 0 auto;
}

/* Guide Sections */
.guide-section {
    padding: 80px 0;
}

.guide-section-alt {
    background: #f8f9fa;
}

.guide-section h2 {
    font-size: 2.2rem;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.guide-section h3 {
    font-size: 1.8rem;
    color: #e91e63;
    margin-bottom: 20px;
    margin-top: 40px;
}

.guide-intro-text {
    font-size: 1.1rem;
    line-height: 1.7;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px;
    color: #666;
}

/* Guide Content */
.guide-content {
    max-width: 1200px;
    margin: 0 auto;
}

.guide-intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 40px;
}

.guide-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.guide-text p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #333;
}

/* Guide Subsections */
.guide-subsection {
    margin-bottom: 60px;
}

.guide-subsection h3 {
    margin-top: 0;
}

.guide-subsection > p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 30px;
    color: #666;
}

/* Guide Grid */
.guide-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-top: 30px;
}

.guide-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.guide-card:hover {
    transform: translateY(-5px);
}

.guide-card-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.guide-card h4 {
    color: #e91e63;
    font-size: 1.3rem;
    margin: 20px 20px 15px;
}

.guide-card p {
    padding: 0 20px 20px;
    line-height: 1.6;
    color: #333;
}

/* Guide Features */
.guide-features {
    margin-top: 30px;
}

.guide-feature-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

.guide-feature-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.guide-feature-content h4 {
    color: #e91e63;
    font-size: 1.3rem;
    margin-bottom: 15px;
    margin-top: 30px;
}

.guide-feature-content h4:first-child {
    margin-top: 0;
}

.guide-feature-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #333;
}

/* Guide Terms Grid */
.guide-terms-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 40px;
}

.guide-term-card {
    background: white;
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid #e91e63;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.guide-term-card h4 {
    color: #e91e63;
    font-size: 1.3rem;
    margin-bottom: 15px;
}

.guide-term-card p {
    line-height: 1.6;
    color: #333;
}

/* Guide Benefits */
.guide-benefits {
    margin-top: 40px;
}

.guide-benefit-item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 40px;
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.guide-benefit-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

.guide-benefit-content h3 {
    color: #e91e63;
    font-size: 1.4rem;
    margin: 0 0 15px 0;
}

.guide-benefit-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

/* Allowance Tables */
.guide-table-container {
    margin-bottom: 50px;
}

.guide-table-container h3 {
    color: #e91e63;
    font-size: 1.6rem;
    margin-bottom: 25px;
    text-align: left;
}

.guide-allowance-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow: hidden;
}

.guide-allowance-table thead {
    background: #e91e63;
    color: white;
}

.guide-allowance-table th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
}

.guide-allowance-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
}

.guide-allowance-table tbody tr:last-child td {
    border-bottom: none;
}

.guide-allowance-table tbody tr:hover {
    background: #f8f9fa;
}

.guide-allowance-note {
    background: #fff3e0;
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid #ff9800;
    margin-top: 30px;
}

.guide-allowance-note p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

/* Guide Steps */
.guide-steps {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.guide-step {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.guide-step-number {
    width: 60px;
    height: 60px;
    background: #e91e63;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-bottom: 20px;
}

.guide-step-content h3 {
    color: #333;
    font-size: 1.5rem;
    margin: 0 0 20px 0;
}

.guide-step-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.guide-step-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #333;
}

.guide-checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.guide-checklist li {
    padding: 10px 0 10px 30px;
    position: relative;
    line-height: 1.5;
    color: #333;
}

.guide-checklist li:before {
    content: "✓";
    color: #e91e63;
    font-weight: bold;
    position: absolute;
    left: 0;
    font-size: 1.2rem;
}

/* Red Flags */
.guide-red-flags {
    margin-top: 40px;
}

.guide-red-flag-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-bottom: 25px;
    border-left: 4px solid #ff5252;
}

.guide-red-flag-icon {
    font-size: 2.5rem;
    text-align: center;
}

.guide-red-flag-content h4 {
    color: #ff5252;
    font-size: 1.3rem;
    margin: 0 0 15px 0;
}

.guide-red-flag-content p {
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.guide-safety-tip {
    background: #e8f5e9;
    padding: 30px;
    border-radius: 8px;
    border-left: 4px solid #4caf50;
    margin-top: 40px;
}

.guide-safety-tip h3 {
    color: #4caf50;
    font-size: 1.5rem;
    margin: 0 0 15px 0;
}

.guide-safety-tip p {
    line-height: 1.7;
    color: #333;
    margin: 0;
}

/* Conclusion */
.guide-conclusion {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

.guide-conclusion-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 8px;
}

.guide-conclusion-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #333;
}

/* Guide CTA Box */
.guide-cta-box {
    background: linear-gradient(135deg, #e91e63, #ad1457);
    color: white;
    padding: 50px 30px;
    border-radius: 12px;
    text-align: center;
}

.guide-cta-box h3 {
    color: white;
    font-size: 2rem;
    margin: 0 0 20px 0;
}

.guide-cta-box p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

.guide-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.guide-cta-buttons .btn {
    min-width: 250px;
}

/* Tablet Styles */
@media (min-width: 768px) {
    .blog-hero-guide h1 {
        font-size: 3rem;
    }
    
    .guide-intro {
        grid-template-columns: 400px 1fr;
        align-items: start;
    }
    
    .guide-image {
        height: 400px;
    }
    
    .guide-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .guide-feature-row {
        grid-template-columns: 350px 1fr;
        align-items: start;
    }
    
    .guide-terms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .guide-benefit-item {
        grid-template-columns: 300px 1fr;
        align-items: center;
    }
    
    .guide-benefit-image {
        height: 200px;
    }
    
    .guide-steps {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .guide-conclusion {
        grid-template-columns: 350px 1fr;
        align-items: start;
    }
    
    .guide-cta-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* Desktop Styles */
@media (min-width: 1024px) {
    .blog-hero-guide h1 {
        font-size: 3.5rem;
    }
    
    .guide-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .guide-intro {
        grid-template-columns: 450px 1fr;
    }
    
    .guide-feature-row {
        grid-template-columns: 400px 1fr;
    }
    
    .guide-benefit-item {
        grid-template-columns: 350px 1fr;
    }
    
    .guide-steps {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .guide-conclusion {
        grid-template-columns: 400px 1fr;
    }
}

/* Mobile Optimization */
@media (max-width: 767px) {
    .guide-allowance-table {
        font-size: 0.85rem;
    }
    
    .guide-allowance-table th,
    .guide-allowance-table td {
        padding: 10px 8px;
    }
    
    .guide-red-flag-icon {
        text-align: left;
    }
}

/* Sample Profile Styles */
.guide-sample-profiles {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.guide-sample-profile {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.guide-sample-header {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f0f0f0;
}

.guide-sample-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.guide-sample-info h3 {
    color: #d4145a;
    margin: 0 0 8px 0;
    font-size: 1.3rem;
}

.guide-sample-headline {
    color: #666;
    font-style: italic;
    margin: 0;
    font-size: 1rem;
}

.guide-sample-content h4 {
    color: #333;
    margin: 20px 0 10px 0;
    font-size: 1.1rem;
}

.guide-sample-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

@media (max-width: 767px) {
    .guide-sample-header {
        flex-direction: column;
        text-align: center;
    }
    
    .guide-sample-image {
        width: 80px;
        height: 80px;
    }
    
    .guide-sample-profile {
        padding: 20px;
    }
}

/* Blog Page Styles */
.blog-hero {
    background: linear-gradient(135deg, #d4145a 0%, #e91e63 100%);
    padding: 80px 0 60px;
    text-align: center;
    color: #fff;
    position: relative;
    z-index: 1;
}

.blog-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.blog-hero-subtitle {
    font-size: 1.2rem;
    opacity: 0.95;
}

.blog-articles {
    padding: 60px 0;
    background: #f8f9fa;
}

.blog-articles-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
}

/* PC端 - 3 columns for blog articles */
@media (min-width: 768px) {
    .blog-articles-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* Mobile端 - keep 1 column (default above) */

.blog-article-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.blog-article-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-article-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.blog-article-content {
    padding: 30px;
}

.blog-article-date {
    color: #d4145a;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.blog-article-content h2 {
    color: #333;
    font-size: 1.8rem;
    margin-bottom: 15px;
    line-height: 1.3;
}

.blog-article-content p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
}

.blog-read-more {
    color: #d4145a;
    font-weight: 600;
    display: inline-block;
}

.blog-categories {
    padding: 60px 0;
    background: #fff;
}

.blog-categories h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #333;
}

.blog-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.blog-category-card {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 12px;
}

.blog-category-card h3 {
    color: #d4145a;
    margin-bottom: 20px;
    font-size: 1.3rem;
}

.blog-category-card ul {
    list-style: none;
    padding: 0;
}

.blog-category-card li {
    margin-bottom: 12px;
}

.blog-category-card a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-category-card a:hover {
    color: #d4145a;
}

.blog-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #d4145a 0%, #e91e63 100%);
    text-align: center;
    color: #fff;
}

.blog-cta h2 {
    font-size: 2.2rem;
    margin-bottom: 15px;
}

.blog-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.95;
}

.blog-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .blog-hero h1 {
        font-size: 2rem;
    }
    
    .blog-hero-subtitle {
        font-size: 1rem;
    }
    
    .blog-article-image {
        height: 200px;
    }
    
    .blog-article-content h2 {
        font-size: 1.4rem;
    }
    
    .blog-cta h2 {
        font-size: 1.8rem;
    }
    
    .blog-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .blog-cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Membership Options - Features List Fix (One per line, wider cards) */
@media (min-width: 768px) {
    .membership-options .membership-grid {
        max-width: 1400px;
        gap: 40px;
    }
    
    .membership-options .membership-card {
        padding: 40px 35px;
    }
    
    .membership-options .features-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
    .membership-options .features-list li {
        width: 100%;
        display: block;
        text-align: left;
    }
}

@media (min-width: 1024px) {
    .membership-options .membership-grid {
        max-width: 1400px;
        gap: 40px;
    }
    
    .membership-options .membership-card {
        padding: 45px 40px;
    }
}

/* Guide Steps Grid - 2 columns on PC, 1 on mobile */
.guide-steps-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 40px;
}

.guide-step-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.guide-step-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #d4145a 0%, #e91e63 100%);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.guide-step-card h3 {
    color: #333;
    font-size: 1.5rem;
    margin: 20px 0 15px 0;
}

.guide-step-card p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
}

.guide-step-card strong {
    color: #333;
}

/* Tablet and Desktop - 2 columns */
@media (min-width: 768px) {
    .guide-steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

/* Mobile - keep 1 column (default) */
@media (max-width: 767px) {
    .guide-step-card {
        padding: 20px;
    }
    
    .guide-step-number {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
    
    .guide-step-card h3 {
        font-size: 1.3rem;
    }
}