/* Immigration Legal Services - Styles */

:root {    --navy-primary: #1a2b42;    --navy-secondary: #2c4269;    --gold-primary: #b8860b;    --gold-accent: #daa520;    --cream-bg: #fefdf8;    --text-dark: #2c2c2c;    --text-light: #666;    --border-gold: #daa520;    --success-green: #10b981;    --urgent-red: #ef4444;    --warning-orange: #f59e0b;
}

* {    margin: 0;    padding: 0;    box-sizing: border-box;

}

body {
    background-color: var(--cream-bg);    color: var(--text-dark);    line-height: 1.6;    font-size: 0.9rem;
}

/* Global paragraph styling */
p {    font-size: 0.95rem;    color: var(--text-light);    line-height: 1.7;    margin-bottom: 1.5rem;
}

/* Typography */
h1, h2, h3 {    font-weight: 600;    margin-bottom: 1rem;
}

/* Common text classes for consistency */
.form-intro {    color: var(--navy-primary);    margin-bottom: 1rem;    font-weight: 500;
}

.text-standard {    font-size: 0.95rem;    color: var(--text-light);    line-height: 1.7;
}

.text-small {    font-size: 0.85rem;    color: var(--text-light);    line-height: 1.6;
}

.text-large {    font-size: 1.1rem;    color: var(--text-dark);    line-height: 1.6;
}

.price-text {    font-size: 1.8rem;    font-weight: bold;    color: var(--gold-primary);
}

.title-text {    font-size: 1.2rem;    font-weight: 600;    color: var(--navy-primary);
}

.subtitle-text {    font-size: 0.95rem;    font-weight: 400;    color: var(--text-light);
}

h1 { font-size: 2.4rem; color: var(--navy-primary); }
h2 { font-size: 2rem; color: var(--navy-secondary); }
h3 { font-size: 1.6rem; color: var(--navy-secondary); }

/* Navigation */
nav {    background: linear-gradient(135deg, var(--navy-primary), var(--navy-secondary));    padding: 1rem 0;    position: sticky;    top: 0;    z-index: 1000;    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.nav-container {    max-width: 1200px;    margin: 0 auto;    padding: 0 2rem;    display: flex;    justify-content: space-between;    align-items: center;
}

.logo {    color: var(--gold-primary);    font-size: 1.5rem;    font-weight: bold;    text-decoration: none;    display: flex;    align-items: center;
}

.logo::before {    content: "§";    font-size: 2rem;    margin-right: 0.5rem;
}

.nav-links {    display: flex;    gap: 2rem;    list-style: none;    align-items: center;
}

.nav-links a {    color: white;    text-decoration: none;    transition: color 0.3s;    font-size: 1rem;    padding: 0.4rem 0.8rem;    border-radius: 4px;
}

.nav-links a:hover,
.nav-links a.active {    color: var(--gold-accent);    background: rgba(255,255,255,0.1);
}

/* Language Selector */
.language-selector {    position: relative;    margin-left: 2rem;
}

.language-btn {    background: rgba(255,255,255,0.1);    border: 1px solid rgba(255,255,255,0.2);    color: white;    padding: 0.5rem 1rem;    border-radius: 4px;    cursor: pointer;    display: flex;    align-items: center;    gap: 0.5rem;    transition: all 0.3s;    font-size: 0.9rem;
}

.language-btn:hover {    background: rgba(255,255,255,0.2);    border-color: rgba(255,255,255,0.3);
}

.language-dropdown {    position: absolute;    top: 100%;    right: 0;    background: white;    border-radius: 8px;    box-shadow: 0 4px 20px rgba(0,0,0,0.15);    min-width: 200px;    z-index: 1001;    display: none;    border: 1px solid rgba(0,0,0,0.1);
}

.language-dropdown.show {    display: block;
}

.language-dropdown a {    display: block;    padding: 0.75rem 1rem;    color: var(--text-dark);    text-decoration: none;    border-bottom: 1px solid #f3f4f6;
}

.language-dropdown a:hover {    background: #f9fafb;
}

.language-dropdown a:last-child {    border-bottom: none;
}

/* Container */
.container {    max-width: 1200px;    margin: 0 auto;    padding: 1.5rem;
}

/* Hero Section */
.hero {    background: linear-gradient(135deg, rgba(26,43,66,0.05), rgba(44,66,105,0.05));    padding: 3rem 1.5rem;    text-align: center;    border-bottom: 3px solid var(--gold-primary);    margin-bottom: 1.5rem;
}

.hero h1 {    margin-bottom: 1.2rem;    line-height: 1.2;    font-size: 2.1rem;
}

.hero p {    max-width: 800px;    margin: 0 auto 1.5rem;
}

/* Buttons */
.btn {    display: inline-block;    padding: 0.6rem 1.2rem;    text-decoration: none;    border-radius: 4px;    transition: all 0.3s;    font-weight: 600;    cursor: pointer;    border: none;    font-size: 0.85rem;
}

.btn-primary {    background: var(--gold-primary);    color: white;
}

.btn-primary:hover {    background: var(--gold-accent);    transform: translateY(-2px);    box-shadow: 0 4px 12px rgba(184,134,11,0.3);
}

.btn-secondary {    background: white;    color: var(--navy-primary);    border: 2px solid var(--navy-primary);
}

.btn-secondary:hover {    background: var(--navy-primary);    color: white;
}

/* Sections */
.section {    padding: 2rem 0;    border-bottom: 1px solid rgba(218,165,32,0.2);
}

/* Tool Features */
.tool-feature {    padding: 1.5rem;    background: white;    border: 2px solid var(--gold-primary);    border-radius: 8px;    margin-bottom: 1.5rem;
}

.tool-feature h3 {    color: var(--gold-primary);    margin-bottom: 0.8rem;
}

.tool-feature ul {    list-style-type: disc;    margin-left: 2rem;
}

.tool-feature li {    margin-bottom: 0.5rem;
}

/* CTA Box */
.cta-box {    background: linear-gradient(135deg, var(--gold-primary), var(--gold-accent));    color: white;    padding: 2rem;    border-radius: 8px;    text-align: center;    margin: 2rem 0;
}

.cta-box h2,
.cta-box h3 {    color: white;    margin-bottom: 1rem;
}

/* Footer */
footer {    background: var(--navy-primary);    color: white;    padding: 3rem 0 1rem;    margin-top: 4rem;
}

.footer-content {    max-width: 1200px;    margin: 0 auto;    padding: 0 2rem;    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 2rem;
}

.footer-section h4 {    color: var(--gold-primary);    margin-bottom: 1rem;
}

.footer-section a {    color: rgba(255,255,255,0.8);    text-decoration: none;    display: block;    padding: 0.25rem 0;    transition: color 0.3s;
}

.footer-section a:hover {    color: var(--gold-accent);
}

.footer-bottom {    max-width: 1200px;    margin: 2rem auto 0;    padding: 1rem 2rem;    border-top: 1px solid rgba(255,255,255,0.2);    text-align: center;    color: rgba(255,255,255,0.8);
}

/* Mobile Responsive */
@media (max-width: 768px) {    .nav-container {        flex-direction: column;        gap: 1rem;    }        .nav-links {        flex-direction: column;        gap: 0.5rem;        width: 100%;        text-align: center;    }        h1 { font-size: 1.8rem; }    h2 { font-size: 1.4rem; }        .hero {         padding: 1.5rem 1rem;     }        .container {        padding: 1rem;    }        .section {        padding: 1.5rem 0;    }
    .language-selector {        margin-left: 0;        margin-top: 1rem;    }
    .language-btn {        padding: 0.4rem 0.8rem;        font-size: 0.8rem;    }
    .language-dropdown {        right: 0;        min-width: 180px;    }
}

/* Services Section Styles */
.service-nav {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));    gap: 1.5rem;    margin: 2rem 0;
}

.nav-item {    background: white;    padding: 2rem;    border-radius: 12px;    text-align: center;    cursor: pointer;    transition: all 0.3s;    border: 2px solid transparent;    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.nav-item:hover {    transform: translateY(-4px);    box-shadow: 0 8px 24px rgba(0,0,0,0.12);    border-color: var(--gold-primary);
}

.nav-item.active {    border-color: var(--gold-primary);    background: linear-gradient(135deg, rgba(184,134,11,0.05), rgba(218,165,32,0.05));
}

.nav-item .icon {    font-size: 2rem;    margin-bottom: 0.8rem;
}

.nav-item .title {    font-size: 1.1rem;    font-weight: 600;    color: var(--navy-primary);    margin-bottom: 0.5rem;
}

.nav-item .subtitle {    font-size: 0.95rem;    font-weight: 400;    color: var(--text-light);
}

/* Service Content */
.service-content {    margin-top: 3rem;    display: none;
}

.service-content.active {    display: block;
}

/* Premium Services */
.premium-services {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));    gap: 2rem;    margin-top: 2rem;
}

.premium-card {    background: white;    border-radius: 16px;    overflow: hidden;    box-shadow: 0 8px 30px rgba(0,0,0,0.15);    transition: all 0.3s ease;
}

.premium-card:hover {    transform: translateY(-10px);    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.premium-card.featured {    border: 3px solid var(--gold-primary);    position: relative;
}

.premium-card.featured::before {    content: "⭐ Featured";    position: absolute;    top: 1rem;    right: 1rem;    background: var(--gold-primary);    color: white;    padding: 0.5rem 1rem;    border-radius: 20px;    font-size: 0.9rem;    font-weight: bold;
}

.card-header {    background: linear-gradient(135deg, var(--navy-primary), var(--navy-secondary));    color: white;    padding: 2rem;    text-align: center;
}

.card-title {
    font-size: 1.3rem;    font-weight: 600;    margin-bottom: 1rem;
}

.card-subtitle {
    font-weight: 400;    color: rgba(255,255,255,0.9);    margin-bottom: 1.5rem;
}

.price-section {    background: rgba(255,255,255,0.1);    padding: 1rem;    border-radius: 8px;
}

.price {
    font-size: 2rem;    font-weight: bold;    color: var(--gold-accent);
}

.price-note {
    font-size: 0.9rem;    font-weight: 400;    color: rgba(255,255,255,0.8);
}

.card-body {    padding: 2rem;
}

.process-timeline {    margin-bottom: 2rem;
}

.timeline-title {
    font-weight: 600;    margin-bottom: 1rem;    color: var(--navy-primary);
}

.timeline-steps {    display: flex;    justify-content: space-between;    gap: 1rem;
}

.timeline-step {    text-align: center;    flex: 1;
}

.step-number {    width: 40px;    height: 40px;    background: var(--gold-primary);    color: white;    border-radius: 50%;    display: flex;    align-items: center;    justify-content: center;    margin: 0 auto 0.5rem;    font-weight: bold;
}

.step-text {
    font-size: 0.9rem;    font-weight: 400;    color: var(--text-light);
}

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

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

.features-list li::before {    content: "✓";    position: absolute;    left: 0;    color: var(--gold-primary);    font-weight: bold;
}

/* Support Services */
.support-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;    margin-top: 2rem;
}

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

.support-card:hover {    transform: translateY(-5px);    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.support-card h4 {
    font-weight: 600;    color: var(--navy-primary);    margin-bottom: 1rem;
}

.support-card .price {    font-size: 1.5rem;    font-weight: bold;    color: var(--gold-primary);    margin: 1rem 0;
}

/* Resources */
.resource-categories {    display: flex;    gap: 1rem;    margin-bottom: 2rem;    flex-wrap: wrap;    justify-content: center;
}

.resource-tab {    background: white;    padding: 1rem 1.5rem;    border-radius: 8px;    cursor: pointer;    transition: all 0.3s ease;    border: 2px solid transparent;    box-shadow: 0 2px 10px rgba(0,0,0,0.1);    text-align: center;
}

.resource-tab:hover {    border-color: var(--gold-primary);
}

.resource-tab.active {    border-color: var(--gold-primary);    background: var(--gold-primary);    color: white;
}

.tab-icon {    font-size: 1.3rem;    margin-bottom: 0.5rem;
}

.tab-title {    font-size: 1.1rem;    font-weight: 600;    color: var(--navy-primary);
}

.resource-category {    display: none;
}

.resource-category.active {    display: block;
}

.resource-section {    margin-bottom: 3rem;
}

.resource-header {
    font-size: 1.3rem;    font-weight: 600;    color: var(--navy-primary);    margin-bottom: 1.5rem;    padding-bottom: 0.5rem;    border-bottom: 2px solid var(--gold-primary);
}

.resource-list {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 1.5rem;
}

.resource-item {    background: white;    padding: 1.5rem;    border-radius: 8px;    box-shadow: 0 2px 10px rgba(0,0,0,0.1);    display: flex;    justify-content: space-between;    align-items: center;    transition: all 0.3s ease;
}

.resource-item:hover {    transform: translateY(-3px);    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.resource-content h4 {
    font-weight: 600;    color: var(--navy-primary);    margin-bottom: 0.5rem;
}

.resource-content p {    color: var(--text-light);    font-size: 0.9rem;
}

.resource-price {    text-align: right;
}

.price-tag {    background: var(--gold-primary);    color: white;    padding: 0.5rem 1rem;    border-radius: 20px;    font-weight: bold;    display: block;    margin-bottom: 0.5rem;
}

.btn-small {    padding: 0.4rem 0.8rem;    font-size: 0.8rem;
}

/* Consultation */
.consultation-options {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));    gap: 2rem;    margin-top: 2rem;
}

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

.consultation-card:hover {    transform: translateY(-5px);    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

.consultation-card h3 {
    font-weight: 600;    color: var(--navy-primary);    margin-bottom: 1rem;
}

.consultation-card .price {    font-size: 1.5rem;    font-weight: bold;    color: var(--gold-primary);    margin: 1rem 0;
}

/* Comparison Chart */
.comparison-chart {    background: white;    border-radius: 16px;    padding: 3rem;    box-shadow: 0 8px 32px rgba(0,0,0,0.1);    margin: 2rem 0;
}

.chart-header {    text-align: center;    margin-bottom: 1rem;
}

.chart-header h2 {    color: var(--navy-primary);    margin-bottom: 0.4rem;    font-size: 1.3rem;
}

.chart-header p {    color: var(--text-light);    font-size: 0.9rem;    max-width: 800px;    margin: 0 auto;    line-height: 1.4;
}

.comparison-table-modern {    border: 2px solid #e5e7eb;    border-radius: 12px;    overflow: hidden;    margin: 2rem 0;
}

.table-header {    display: grid;    grid-template-columns: 1fr 1fr 1fr;    background: linear-gradient(135deg, var(--navy-primary), var(--navy-secondary));    color: white;
}

.header-cell {    padding: 1.2rem;    text-align: center;    border-right: 1px solid rgba(255,255,255,0.2);
}

.header-cell:last-child {    border-right: none;
}

.visa-type {    font-size: 1.2rem;    font-weight: 700;    margin-bottom: 0.4rem;
}

.visa-subtitle {    font-size: 0.9rem;    opacity: 0.9;
}

.table-row {    display: grid;    grid-template-columns: 1fr 1fr 1fr;    border-bottom: 1px solid #e5e7eb;
}

.table-row:last-child {    border-bottom: none;
}

.row-label {    background: #f9fafb;    padding: 1.2rem;    font-weight: 600;    color: var(--navy-primary);    border-right: 1px solid #e5e7eb;    display: flex;    align-items: center;
}

.row-content {    padding: 1.2rem;    border-right: 1px solid #e5e7eb;    line-height: 1.6;
}

.row-content:last-child {    border-right: none;
}

.eb1a-content {    background: rgba(184,134,11,0.05);
}

.niw-content {    background: rgba(26,43,66,0.05);
}

.checkmark {    font-size: 1.2rem;    margin-right: 0.5rem;
}

.speed-fast {    color: #10b981;    font-weight: 600;
}

.speed-standard {    color: #f59e0b;    font-weight: 600;
}

/* CTA Section */
.cta-section {    text-align: center;    margin-top: 2rem;    padding: 2rem;    background: linear-gradient(135deg, rgba(184,134,11,0.1), rgba(218,165,32,0.1));    border-radius: 12px;
}

.cta-headline {    font-size: 1.6rem;    font-weight: 600;    color: var(--navy-primary);    margin-bottom: 0.5rem;
}

.cta-subtext {    color: var(--text-light);    margin-bottom: 1.5rem;
}

/* Newsletter */
.newsletter-box {    background: linear-gradient(135deg, var(--gold-primary), var(--gold-accent));    padding: 3rem 0;    text-align: center;    color: white;
}

.newsletter-form {    display: flex;    gap: 1rem;    max-width: 500px;    margin: 2rem auto 0;
}

.newsletter-input {    flex: 1;    padding: 1rem;    border: 2px solid white;    background: rgba(255,255,255,0.9);    border-radius: 4px;
}

/* Mobile Responsive for New Components */
@media (max-width: 768px) {    .service-nav {        grid-template-columns: 1fr;        gap: 1rem;    }
    .premium-services {        grid-template-columns: 1fr;    }
    .support-grid {        grid-template-columns: 1fr;    }
    .resource-categories {        flex-direction: column;        align-items: center;    }
    .resource-list {        grid-template-columns: 1fr;    }
    .consultation-options {        grid-template-columns: 1fr;    }
    .timeline-steps {        flex-direction: column;        gap: 1rem;    }
    .comparison-chart {        padding: 2rem 1rem;    }
    .table-header,    .table-row {        grid-template-columns: 1fr;    }
    .header-cell,    .row-label,    .row-content {        border-right: none;        border-bottom: 1px solid #e5e7eb;    }
    .row-label {        background: var(--navy-primary);        color: white;        font-weight: 600;    }
    .newsletter-form {        flex-direction: column;        gap: 1rem;    }
    .resource-item {        flex-direction: column;        text-align: center;        gap: 1rem;    }
    .resource-price {        text-align: center;    }
}