/* ========================================  
   CSS VARIABLES & RESET  
   ======================================== */  
:root {  
    --primary: #00202D;  
    --primary-light: #16213e;  
    --accent: #f59e0b;  
    --accent-hover: #d97706;  
    --accent-red: #ef4444;  
    --accent-gradient: linear-gradient(135deg, #f59e0b, #ef4444);  
    --text-dark: #00202D;  
    --text-body: #333;  
    --text-light: #555;  
    --bg-white: #ffffff;  
    --bg-light: #f8f9fb;  
    --bg-card: #ffffff;  
    --border-light: #eef0f3;  
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);  
    --shadow-md: 0 4px 20px rgba(0,0,0,0.06);  
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.08);  
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.1);  
    --radius-sm: 8px;  
    --radius-md: 12px;  
    --radius-lg: 16px;  
    --radius-xl: 24px;  
    --radius-full: 50px;  
    --font-body: 'DM Sans', sans-serif;  
    --font-heading: 'DM Sans', sans-serif;  
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);  
}  
  
*,  
*::before,  
*::after {  
    margin: 0;  
    padding: 0;  
    box-sizing: border-box;  
}  
  
html {  
    scroll-behavior: smooth;  
    scroll-padding-top: 80px;  
}  
  
body {  
    font-family: var(--font-body);  
    color: var(--text-body);  
    line-height: 1.6;  
    background: var(--bg-white);  
    -webkit-font-smoothing: antialiased;  
    overflow-x: hidden;  
}  
  
a {  
    text-decoration: none;  
    color: inherit;  
}  
  
ul {  
    list-style: none;  
}  
  
img {  
    max-width: 100%;  
    display: block;  
}  
  
.container {  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 0 15px;  
}  
  
.text-center {  
    text-align: center;  
}  

.testimonial-nav {display: none;}
  
/* ========================================  
   TYPOGRAPHY  
   ======================================== */  
.section-tag {  
    display: inline-block;  
    background: #f0f0f0;  
    color: #ef4444;  
    padding: 6px 18px;  
    border-radius: var(--radius-full);  
    font-size: 13px;  
    font-weight: 600;  
    margin-bottom: 16px;  
    letter-spacing: 0.3px;  
}  


input.send-btn {
    width: 100% !important;
    padding: 10px 20px !important;
    border: none !important;
    border-radius: 8px !important;
    background: var(--accent-gradient) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: var(--transition);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
  
.section-title {  
    font-family: var(--font-heading);  
    font-size: 34px;  
    color: var(--text-dark);  
    line-height: 1.2;  
    margin-bottom: 12px;  
}  
  
.section-desc {  
    color: var(--text-light);  
    font-size: 16px;  
    max-width: 600px;  
    margin: 0 auto 40px;  
}  
  
.section-eyebrow {  
    color: var(--text-dark);  
    font-size: 17px;  
    margin-bottom: 8px;  
}  
  
.section-header {  
    margin-bottom: 50px;  
}  
  
.accent {  
    color: var(--accent);  
}  
  
.highlight {  
    background: var(--accent-gradient);  
    -webkit-background-clip: text;  
    -webkit-text-fill-color: transparent;  
    background-clip: text;  
}  
  
/* ========================================  
   BUTTONS  
   ======================================== */  
.btn {  
    display: inline-flex;  
    align-items: center;  
    gap: 10px;  
    padding: 14px 32px;  
    border-radius: var(--radius-full);  
    font-size: 15px;  
    font-weight: 600;  
    font-family: var(--font-body);  
    cursor: pointer;  
    border: none;  
    transition: var(--transition);  
    text-decoration: none;  
}  
  
.btn-primary {  
    background: var(--accent-gradient);  
    color: white;  
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);  
}  
  
.btn-primary:hover {  
    transform: translateY(-2px);  
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);  
}  
  
.btn-outline {  
    background: transparent;  
    color: white;  
    border: 2px solid rgba(255,255,255,0.3);  
}  
  
.btn-outline:hover {  
    background: rgba(255,255,255,0.1);  
    border-color: rgba(255,255,255,0.6);  
}  

.btn-outline-black {  
    background: transparent;  
    color: #ef4444;  
    border: 2px solid #ef4444;  
}  
  
.btn-outline-black:hover {  
    background: rgba(255,255,255,0.1);  
    border-color: #000;  
    color: #000;
}
  
.btn-accent {  
    background: var(--accent-red);  
    color: white;  
    border-radius: var(--radius-sm);  
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);  
}  
  
.btn-accent:hover {  
    background: #dc2626;  
    transform: translateY(-2px);  
}  
  
.btn-lg {  
    padding: 18px 40px;  
    font-size: 16px;  
}  
  
/* ========================================  
   NAVIGATION  
   ======================================== */  
.navbar {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    z-index: 1000;  
    background: var(--primary);  
    transition: var(--transition);  
}  
  
.navbar.scrolled {  
    box-shadow: 0 4px 30px rgba(0,0,0,0.3);  
    background: #00202D;
    backdrop-filter: blur(20px);  
}  
  
.nav-container {  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 0 24px;  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
 
}  

.logo img {width: 70px;}
  
.logo {  
    display: flex;  
    align-items: center;  
    gap: 10px;  padding: 3px 0px;

}  
  
.logo-icon {  
    width: 42px;  
    height: 42px;  
    background: var(--accent-gradient);  
    border-radius: var(--radius-sm);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: white;  
    font-size: 18px;  
}  
  
.logo-icon.small {  
    width: 36px;  
    height: 36px;  
    font-size: 15px;  
}  
  
.logo-text {  
    font-family: var(--font-heading);  
    font-size: 22px;  
    color: white;  
}  

  .desktop-hide {  
        display: none !important;  
    }
  
.nav-links {  
    display: flex;  
    gap: 8px;  
}  
  
.nav-links a {  
    color: #aaa;  
    font-size: 13px;  
    font-weight: 600;  
    letter-spacing: 1px;  
    padding: 8px 16px;  
    border-radius: var(--radius-sm);  
    transition: var(--transition);  
}  
  
.nav-links a:hover,  
.nav-links a.active {  
    color: var(--accent);  
    background: rgba(245, 158, 11, 0.1);  
}  
  
.mobile-toggle {  
    display: none;  
    flex-direction: column;  
    gap: 5px;  
    background: none;  
    border: none;  
    cursor: pointer;  
    padding: 5px;  
}  
  
.mobile-toggle span {  
    width: 24px;  
    height: 2px;  
    background: white;  
    border-radius: 2px;  
    transition: var(--transition);  
}  
  
/* ========================================  
   HERO SECTION  
   ======================================== */  
.hero {  
    position: relative;  

    display: flex;  
    align-items: center;  
    /* background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 40%, #1e2a4a 70%, #162447 100%);   */
    background-image: url("../images/happy-family.jpg");
    padding-top: 65px;  
    overflow: hidden;  
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}  

.hero::before {  
    content: '';  
    position: absolute;  
    inset: 0;  
   background: linear-gradient(277deg,rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 100%);
    z-index: 1;  
}
  
.hero-bg-overlay {  
    position: absolute;  
    inset: 0;  
    background:  
        radial-gradient(ellipse at 80% 50%, rgba(245, 158, 11, 0.08) 0%, transparent 60%),  
        radial-gradient(ellipse at 20% 80%, rgba(239, 68, 68, 0.05) 0%, transparent 50%);  
}  
  
.hero-particles {  
    position: absolute;  
    inset: 0;  
    overflow: hidden;  
    pointer-events: none;  
}  
  
.hero-container {  
    max-width: 1200px;  
    margin: 0 auto;  
    padding: 20px;  
    display: grid;  
    grid-template-columns: 1fr 1fr;  
    gap: 30px;  
    align-items: start;  
    position: relative;  
    z-index: 2;  
    padding: 50px 0px 60px 0px;
}  
  
.hero-badge {  
    display: inline-flex;  
    align-items: center;  
    gap: 8px;  
    background: rgba(245, 158, 11, 0.15);  
    border: 1px solid rgba(245, 158, 11, 0.3);  
    color: var(--accent);  
    padding: 8px 18px;  
    border-radius: var(--radius-full);  
    font-size: 13px;  
    font-weight: 500;  
    margin-bottom: 24px;  
}  
  
.hero h1 {  
    font-family: var(--font-heading);  
    font-size: 44px;  
    color: #000;  
    line-height: 54px;  
    margin-bottom: 20px;  
    font-weight: 700;
}  
  
.hero p {  
    color: #000;  
    font-size: 17px;  
    line-height: 1.7;  
    margin-bottom: 20px;  
    max-width: 500px;  
}  
  
.hero-cta-group {  
    display: flex;  
    gap: 16px;  
    margin-bottom: 48px;  
    flex-wrap: wrap;  
}  
  
.hero-stats {  
    display: flex;  
    align-items: center;  
    gap: 24px;  
}  
  
.hero-stat strong {  
    display: block;  
    font-size: 24px;  
    color: white;  
    font-weight: 700;  
}  
  
.hero-stat span {  
    font-size: 13px;  
    color: #6b7280;  
}  
  
.hero-stat-divider {  
    width: 1px;  
    height: 40px;  
    background: rgba(255,255,255,0.1);  
}  
  
/* Hero Visual */  
.hero-visual {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
}  
  
.hero-image-wrapper {  
    position: relative;  
    width: 400px;  
    height: 400px;  
}  
  
.hero-house-icon {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    width: 180px;  
    height: 180px;  
    background: rgba(245, 158, 11, 0.1);  
    border: 2px solid rgba(245, 158, 11, 0.2);  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  
  
.hero-house-icon i {  
    font-size: 70px;  
    color: rgba(245, 158, 11, 0.6);  
}  
  
.hero-image-card {  
    position: absolute;  
    background: rgba(255,255,255,0.1);  
    backdrop-filter: blur(10px);  
    border: 1px solid rgba(255,255,255,0.15);  
    border-radius: var(--radius-md);  
    padding: 14px 20px;  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    color: white;  
    font-size: 13px;  
    font-weight: 500;  
    animation: float 6s ease-in-out infinite;  
}  
  
.hero-image-card i {  
    font-size: 18px;  
    color: var(--accent);  
}  
  
.card-1 {  
    top: 40px;  
    right: 20px;  
    animation-delay: 0s;  
}  
  
.card-2 {  
    bottom: 80px;  
    left: 0;  
    animation-delay: 2s;  
}  
  
.card-3 {  
    bottom: 20px;  
    right: 40px;  
    animation-delay: 4s;  
}  
  
.card-3 .mini-rating {  
    display: flex;  
    gap: 2px;  
}  
  
.card-3 .mini-rating i {  
    font-size: 12px;  
}  
  
.hero-wave {  
    position: absolute;  
    bottom: -1px;  
    left: 0;  
    right: 0;  
    z-index: 3;  
}  
  
.hero-wave svg {  
    display: block;  
    width: 100%;  
    height: 80px;  
}  
  
/* ========================================  
   COMPARE / PROVIDERS SECTION  
   ======================================== */  
.compare-section {  
    background: var(--bg-light);  
    padding: 60px 0;  
}  
  
.providers-grid {  
    display: grid;  
    grid-template-columns: repeat(5, 1fr);  
    gap: 18px;  
    margin-bottom: 50px;  
}  
  
.provider-card {  
    background: var(--bg-card);  
    border-radius: var(--radius-lg);  
    padding: 20px 15px;  
    text-align: center;  
    border: 2px solid var(--border-light);  
    cursor: pointer;  
    transition: var(--transition);  
    position: relative;  
    overflow: hidden;  
}  
  
.provider-card:hover {  
    border-color: var(--accent);  
    transform: translateY(-4px);  
    box-shadow: var(--shadow-lg);  
}  
  
.provider-card.selected {  
    border-color: var(--accent);  
    box-shadow: 0 8px 30px rgba(245, 158, 11, 0.15);  
}  
  
.card-select-indicator {  
    position: absolute;  
    top: 12px;  
    left: 12px;  
}  
  
.checkbox {  
    width: 24px;  
    height: 24px;  
    border-radius: 50%;  
    border: 2px solid #ddd;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    transition: var(--transition);  
    font-size: 11px;  
    color: transparent;  
}  
  
.provider-card.selected .checkbox {  
    background: var(--accent);  
    border-color: var(--accent);  
    color: white;  
}  
  
.card-ribbon {  
    position: absolute;  
    top: 12px;  
    right: -30px;  
    background: var(--accent-gradient);  
    color: white;  
    font-size: 10px;  
    font-weight: 700;  
    padding: 4px 35px;  
    transform: rotate(45deg);  
    letter-spacing: 0.5px;  
}  
  
.provider-brand {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    gap: 10px;  
    margin-bottom: 16px;  
    margin-top:0px;  
}  
  
.brand-icon {  
    width: 48px;  
    height: 48px;  
    border-radius: var(--radius-md);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 22px;  
}  
  
.brand-name {  
    font-weight: 700;  
    font-size: 14px;  
    color: var(--text-dark);  
}  
  
.provider-score {  
    margin-bottom: 8px;  
}  
  
.score-number {  
    font-size: 46px;  
    font-weight: 800;  
    color: var(--text-dark);  
    line-height: 1;  
}  
  
.provider-stars {  
    color: var(--accent);  
    font-size: 14px;  
    margin-bottom: 6px;  
    display: flex;  
    justify-content: center;  
    gap: 2px;  
}  
  
.score-label {  
    font-size: 10px;  
    font-weight: 700;  
    text-transform: uppercase;  
    letter-spacing: 1.5px;  
    margin-bottom: 18px;  
    padding: 4px 12px;  
    border-radius: var(--radius-full);  
    display: inline-block;  
}  
  
.score-label.outstanding {  
    background: #dcfce7;  
    color: #166534;  
}  
  
.score-label.very-good {  
    background: #e0f2fe;  
    color: #075985;  
}  
  
.provider-details {  
    border-top: 1px solid var(--border-light);  
    padding-top: 14px;  
}  
  
.detail-row {  
    display: flex;  
    justify-content: space-between;  
    padding: 6px 0;  
    font-size: 12px;  
}  
  
.detail-label {  
    color: var(--text-light);  
    font-weight: 500;  
}  
  
.detail-value {  
    color: var(--text-dark);  
    font-weight: 600;  
}  
  
.provider-features {  
    display: flex;  
    flex-direction: column;  
    gap: 6px;  
    margin-top: 14px;  
    padding-top: 14px;  
    border-top: 1px solid var(--border-light);  
}  
  
.feature-tag {  
    font-size: 14px;  
  color: #333; 
    font-weight: 500;  
    display: flex;  
    align-items: center;  
    gap: 6px;  
    justify-content: center;  
}  
  
.feature-tag i {  
    font-size: 14px;  
    color: #fa353f;
}  
  
.compare-cta {  
    margin-top: 20px;  
}  
  
.cta-note {  
    margin-top: 12px;  
    font-size: 13px;  
    color: var(--text-light);  
}  
  
.cta-note i {  
    margin-right: 4px;  
    color: #22c55e;  
}  
  
/* ========================================  
   TESTIMONIALS SECTION  
   ======================================== */  
.testimonials-section {  
    background: var(--bg-white);  
    padding: 80px 0;  
}  
  
.testimonials-carousel {
    overflow: hidden;
    position: relative;
}

.testimonials-carousel:hover .testimonials-track {
    animation-play-state: paused;
}

.testimonials-track {
    display: flex;
    gap: 22px;
    width: calc(6 * (100% / 6 + 22px) - 22px);
    animation: slideTestimonials 8s linear infinite;
}

.testimonials-track .testimonial-card {
    flex: 0 0 calc(25% - 22px);
    min-width: 0;
}  
  
.testimonial-card {  
    background: var(--bg-light);  
    border-radius: var(--radius-lg);  
    padding: 24px;  
    border: 1px solid var(--border-light);  
    transition: var(--transition);  
    display: flex;  
    flex-direction: column;  
}  
  
.testimonial-card:hover {  
    transform: translateY(-6px);  
    box-shadow: var(--shadow-lg);  
    border-color: transparent;  
}  
  
.testimonial-header {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    margin-bottom: 16px;  
    padding-bottom: 16px;  
    border-bottom: 2px solid var(--accent);  
}  
  
.testimonial-company-badge {  
    font-weight: 700;  
    font-size: 14px;  
    color: var(--text-dark);  
}  
  
.testimonial-rating {  
    color: var(--accent);  
    font-size: 13px;  
    display: flex;  
    gap: 2px;  
}  
  
.testimonial-body {  
    flex: 1;  
    margin-bottom: 20px;  
}  
  
.testimonial-body p {  
    font-size: 13px;  
    color: #222; 
    line-height: 1.75;  
    font-style: italic;  
}  
  
.testimonial-footer {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    padding-top: 16px;  
    border-top: 1px solid var(--border-light);  
}  
  
.testimonial-avatar {  
    font-size: 36px;  
    color: #d1d5db;  
}  
  
.testimonial-author-info {  
    flex: 1;  
}  
  
.testimonial-author-info strong {  
    display: block;  
    font-size: 14px;  
    color: var(--text-dark);  
}  
  
.testimonial-author-info span {  
    font-size: 13px;  
    color: #ef4444;  
}  
  
.testimonial-source {  
    display: flex;  
    align-items: center;  
    gap: 4px;  
    font-size: 11px;  
    color: var(--text-light);  
}  
  
.section-divider {  
    width: 60px;  
    height: 4px;  
    background: var(--accent-gradient);  
    margin: 50px auto 0;  
    border-radius: 2px;  
}  
  
/* ========================================  
   COVERED ITEMS SECTION  
   ======================================== */  
.covered-section {  
    background: var(--bg-light);  
    padding: 80px 0;  
}  
  
.covered-grid {  
    display: grid;  
    grid-template-columns: repeat(6, 1fr);  
    gap: 24px;  
}  
  
.covered-item {  
    text-align: center;  
    padding: 24px 12px;  
    border-radius: var(--radius-lg);  
    transition: var(--transition);  
}  
  
.covered-item:hover {  
    background: var(--bg-card);  
    box-shadow: var(--shadow-md);  
    transform: translateY(-4px);  
}  
  
.covered-icon {  
    width: 120px;  
    height: 120px;  
    background: var(--bg-card);  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    margin: 0 auto 16px;  
    box-shadow: var(--shadow-sm);  
    border: 2px solid var(--border-light);  
    transition: var(--transition);  
}  

.covered-icon img {  
    width: 60px;  
    height: 60px;  
    object-fit: contain;  
}
  
.covered-item:hover .covered-icon {  
    border-color: #ef4444;  
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);  
}  
  
.covered-icon i {  
    font-size: 28px;  
    color: var(--text-dark);  
}  
  
.covered-item h4 {  
    font-size: 14px;  
    color: var(--text-dark);  
    margin-bottom: 6px;  
    font-weight: 600;  
}  
  
.covered-item p {  
    font-size: 12px;  
    color: var(--text-light);  
    line-height: 1.5;  
}  
  
/* ========================================  
   EXPLAINER SECTION  
   ======================================== */  
.explainer-section {  
    padding: 80px 0;  
    background: var(--bg-white);  
}  
  
.explainer-card {  
    background: var(--primary);  
    border-radius: var(--radius-xl);  
    padding: 60px;  
    display: grid;  
    grid-template-columns: 1fr 1.3fr;  
    gap: 60px;  
    align-items: center;  
    overflow: hidden;  
    position: relative;  
}  
  
.explainer-card::before {  
    content: '';  
    position: absolute;  
    top: -50%;  
    right: -20%;  
    width: 500px;  
    height: 500px;  
    background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 70%);  
    pointer-events: none;  
}  
  
.explainer-visual {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
}  
  
.explainer-icon-wrapper {  
    position: relative;  
    width: 280px;  
    height: 280px;  
}  
  
.explainer-circle {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    width: 160px;  
    height: 160px;  
    background: rgba(245, 158, 11, 0.1);  
    border: 2px solid rgba(245, 158, 11, 0.2);  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  
  
.explainer-circle i {  
    font-size: 60px;  
    color: rgba(245, 158, 11, 0.5);  
}  
  
.floating-badge {  
    position: absolute;  
    width: 50px;  
    height: 50px;  
    background: rgba(255,255,255,0.1);  
    backdrop-filter: blur(10px);  
    border: 1px solid rgba(255,255,255,0.15);  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: var(--accent);  
    font-size: 18px;  
    animation: float 5s ease-in-out infinite;  
}  
  
.badge-1 {  
    top: 20px;  
    left: 50%;  
    animation-delay: 0s;  
}  
  
.badge-2 {  
    bottom: 30px;  
    left: 20px;  
    animation-delay: 1.5s;  
}  
  
.badge-3 {  
    bottom: 30px;  
    right: 20px;  
    animation-delay: 3s;  
}  
  
.explainer-content {  
    position: relative;  
    z-index: 2;  
}  
  
.explainer-content h2 {  
    font-family: var(--font-heading);  
    font-size: 36px;  
    color: white;  
    line-height: 1.2;  
    margin-bottom: 20px;  
}  
  
.explainer-content p {  
      color: #f7f7f7;
    font-size: 15px;
    line-height: 24px;  
    margin-bottom: 16px;  
}  
  
.explainer-highlights {  
    display: flex;  
    flex-direction: column;  
    gap: 10px;  
    margin: 24px 0;  
}  
  
.highlight-item {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    color: white;  
    font-size: 14px;  
    font-weight: 500;  
}  
  
.highlight-item i {  
    color: #22c55e;  
    font-size: 16px;  
}  
  
/* ========================================  
   BENEFITS SECTION  
   ======================================== */  
.benefits-section {  
    background: var(--bg-light);  
    padding: 80px 0;  
}  
  
.benefits-grid {  
    display: grid;  
    grid-template-columns: repeat(4, 1fr);  
    gap: 22px;  
}  
  
.benefit-card {  
    background: var(--bg-card);  
    border-radius: var(--radius-lg);  
    padding: 30px 24px;  
    border: 1px solid var(--border-light);  
    transition: var(--transition);  
}  
  
.benefit-card:hover {  
    transform: translateY(-6px);  
    box-shadow: var(--shadow-lg);  
    border-color: transparent;  
}  
  
.benefit-icon-wrapper {  
    width: 56px;  
    height: 56px;  
    border-radius: var(--radius-md);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 24px;  
    margin-bottom: 20px;  
}  
  
.benefit-icon-wrapper.green {  
    background: #dcfce7;  
    color: #16a34a;  
}  
  
.benefit-icon-wrapper.blue {  
    background: #dbeafe;  
    color: #2563eb;  
}  
  
.benefit-icon-wrapper.purple {  
    background: #f3e8ff;  
    color: #9333ea;  
}  
  
.benefit-icon-wrapper.orange {  
    background: #fef3c7;  
    color: #d97706;  
}  
  
.benefit-card h4 {  
    font-size: 17px;  
    color: var(--text-dark);  
    margin-bottom: 10px;  
    font-weight: 700;  
}  
  
.benefit-card p {  
    font-size: 14px;  
    color: var(--text-body);  
    line-height: 1.75;  
}  
  
/* ========================================  
   EVALUATION / METHODOLOGY SECTION  
   ======================================== */  
.evaluation-section {  
    background: linear-gradient(180deg, #fce6e6 0%, var(--bg-white) 100%);  
    padding: 80px 0;  
}  
  
.eval-layout {  
    display: grid;  
    grid-template-columns: 1fr 1fr;  
    gap: 40px;  
    align-items: center;
}  

.eval-content {
    grid-column: 1;
}

.eval-image {
    grid-column: 2;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.eval-image img {
    width: 100%;
    height: auto;
    display: block;
}  
  
.eval-grid {  
    display: grid;  
    grid-template-columns: repeat(2, 1fr);  
    gap: 18px;  
}  
  
.eval-card {  
    background: var(--bg-card);  
    border-radius: var(--radius-md);  
    padding: 24px;  
    border: 1px solid var(--border-light);  
    transition: var(--transition);  
    cursor: pointer;  
}  
  
.eval-card:hover {  
    border-color: var(--accent);  
    box-shadow: var(--shadow-md);  
    transform: translateY(-2px);  
}  
  
.eval-card-header {  
    display: flex;  
    align-items: center;  
    gap: 14px;  
    margin-bottom: 12px;  
}  
  
.eval-number {  
    font-size: 14px;  
    font-weight: 800;  
    color: #f59e0b;  
    background: #fff1d7;  
    width: 36px;  
    height: 36px;  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    flex-shrink: 0;  
}  
  
.eval-card-header h4 {  
    flex: 1;  
    font-size: 16px;  
    color: var(--text-dark);  
    font-weight: 700;  
}  
  
.eval-arrow {  
    width: 30px;  
    height: 30px;  
    background: #fee2e2;  
    border-radius: var(--radius-sm);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: var(--accent-red);  
    font-size: 12px;  
    transition: var(--transition);  
}  
  
.eval-card:hover .eval-arrow {  
    background: var(--accent-red);  
    color: white;  
}  
  
.eval-card p {  
    font-size: 14px;  
    color: var(--text-body);  
    line-height: 1.7;  
}  
  
/* ========================================  
   FINAL CTA SECTION  
   ======================================== */  
.final-cta-section {  
    background: var(--accent-gradient);  
    padding: 80px 0;  
}  
  
.final-cta-section h2 {  
    font-family: var(--font-heading);  
    font-size: 36px;  
    color: white;  
    margin-bottom: 12px;  
}  
  
.final-cta-section p {  
    color: rgba(255,255,255,0.8);  
    font-size: 16px;  
    margin-bottom: 32px;  
}  
  
.final-cta-section .btn-primary {  
    background: white;  
    color: var(--text-dark);  
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);  
}  
  
.final-cta-section .btn-primary:hover {  
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);  
}  
  
/* ========================================  
   FOOTER  
   ======================================== */  
.footer {  
    background: var(--primary);  
    color: white;  
    padding: 60px 0 0;  
}  
  
.footer-grid {  
    display: grid;  
    grid-template-columns: 25% 75%;  
    gap: 20px;  
    padding-bottom: 40px;  
    align-items: flex-start;
}  

.footer-brand-col {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 20px;
}

.footer-policy-col {
    padding-left: 20px;
}

.footer-policy-col h4 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 700;
    color: #f59e0b;
    border-bottom: 2px solid #f59e0b;
    padding-bottom: 12px;
    display: inline-block;
}

.footer-policy-col p {
    font-size: 14px;
    color: #ccc;
    line-height: 22px;
}
  
.footer-logo {  
    display: flex;  
    align-items: center;  
    gap: 10px;  
    margin-bottom: 16px;  
}

.footer-logo .logo-text {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
}
  
.footer-tagline {  
    font-size: 15px;  
    color: #9ca3af;  
    line-height: 1.7;  
    margin-bottom: 20px;  
}  
  
.footer-social {  
    display: flex;  
    gap: 10px;  
}  
  
.footer-social a {  
    width: 38px;  
    height: 38px;  
    background: rgba(255,255,255,0.08);  
    border-radius: var(--radius-sm);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    color: #9ca3af;  
    font-size: 15px;  
    transition: var(--transition);  
}  
  
.footer-social a:hover {  
    background: var(--accent);  
    color: white;  
}  
  
.footer-disclaimer {  
    border-top: 1px solid rgba(255,255,255,0.08);  
    padding: 24px 0;  
}  
  
.footer-disclaimer p {  
    font-size: 11px;  
    color: #4b5563;  
    line-height: 1.8;  
}  
  
.footer-bottom {  
    border-top: 1px solid rgba(255,255,255,0.05);  
    padding: 20px 0;  
    text-align: center;  
}  
  
.footer-bottom p {  
    font-size: 13px;  
    color: #ccc;  
}  
  
/* ========================================  
   BACK TO TOP  
   ======================================== */  
.back-to-top {  
    position: fixed;  
    bottom: 30px;  
    right: 30px;  
    width: 48px;  
    height: 48px;  
    background: var(--accent-gradient);  
    color: white;  
    border: none;  
    border-radius: 50%;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 18px;  
    cursor: pointer;  
    opacity: 0;  
    visibility: hidden;  
    transform: translateY(20px);  
    transition: var(--transition);  
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);  
    z-index: 999;  
}  
  
.back-to-top.visible {  
    opacity: 1;  
    visibility: visible;  
    transform: translateY(0);  
}  
  
.back-to-top:hover {  
    transform: translateY(-4px);  
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);  
}  
  
/* ========================================  
   SCROLLBAR  
   ======================================== */  
::-webkit-scrollbar {  
    width: 8px;  
}  
  
::-webkit-scrollbar-track {  
    background: #f1f1f1;  
}  
  
::-webkit-scrollbar-thumb {  
    background: #c0c0c0;  
    border-radius: 4px;  
}  
  
::-webkit-scrollbar-thumb:hover {  
    background: #a0a0a0;  
}  



/* ========================================  
   INTAKE FORM STYLES  
   ======================================== */  
.intake-form {  
    background: linear-gradient(135deg, #3a3f51 0%, #2d3139 100%);  
    border-radius: var(--radius-lg);  
    padding: 20px;  
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);  
    max-width: 500px;  
    width: 100%;  
}  

.form-row {  
    display: grid;  
    grid-template-columns: 1fr 1fr;  
    gap: 16px;  
    }  

.form-group {  
    margin-bottom: 16px;  
}  

.intake-form input {  
    width: 100%;  
    padding: 6px;  
    border: 2px solid rgba(255, 255, 255, 0.2);  
    border-radius: 6px;  
    background: rgba(255, 255, 255, 0.95);  
    color: var(--text-dark);  
    font-family: var(--font-body);  
    font-size: 14px;  
    transition: var(--transition);
      
}  

.intake-form input::placeholder {  
    color: #999;  
}  

.intake-form input:focus {  
    outline: none;  
    border-color: var(--accent);  
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);  
}  

.form-providers {  
    margin-bottom: 15px;  
    padding: 5px 0;  
    /* border-top: 1px solid rgba(255, 255, 255, 0.1);  
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);   */
    display: grid;  
    grid-template-columns: 1fr 1fr;  
    gap: 10px;  
}  

.form-providers::before {  
    content: 'Select up to 5 companies:';  
    display: block;  
    grid-column: 1 / -1;  
    color: rgba(255, 255, 255, 0.8);  
    font-size: 13px;  
    font-weight: 500;  
    margin-bottom: 4px;  
    text-transform: none;  
}  

.provider-checkbox {  
    display: flex;  
    align-items: center;  
    cursor: pointer;  
    color: rgba(255, 255, 255, 0.85);  
    font-size: 14px;  
    transition: color 0.2s;  
}  

.provider-checkbox:hover {  
    color: rgba(255, 255, 255, 1);  
}  

.provider-checkbox input[type="checkbox"] {  
    position: absolute;  
    opacity: 0;  
    cursor: pointer;  
    margin: 0;  
    width: 0;  
    height: 0;  
}  

.provider-checkbox .checkmark {  
    display: inline-block;  
    width: 18px;  
    height: 18px;  
    border: 2px solid rgba(245, 158, 11, 0.5);  
    border-radius: 4px;  
    margin-right: 5px;  
    transition: var(--transition);  
    flex-shrink: 0;  
}  

.provider-checkbox input[type="checkbox"]:checked ~ .checkmark {  
    background: var(--accent);  
    border-color: var(--accent);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
}  

.provider-checkbox input[type="checkbox"]:checked ~ .checkmark::after {  
    content: '✓';  
    color: white;  
    font-size: 12px;  
    font-weight: bold;  
}  

.btn-submit {  
    width: 100%;  
    padding: 14px 20px;  
    border: none;  
    border-radius: 8px;  
    background: var(--accent-gradient);  
    color: white;  
    font-weight: 600;  
    font-size: 14px;  
    cursor: pointer;  
    transition: var(--transition);  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    gap: 8px;  
    text-transform: uppercase;  
    letter-spacing: 0.5px;  
}  

.btn-submit:hover {  
    transform: translateY(-2px);  
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3);  
}  

.btn-submit:active {  
    transform: translateY(0);  
}  

.intake-form input:required {  
    background: rgba(255, 255, 255, 0.95);  
}  

.inner-page h1

{font-family: var(--font-heading); font-size: 40px; color: #000; margin-bottom: 8px;}

.mb-20 {margin-bottom: 20px;}

.mb-25 {margin-bottom: 25px;}

.mb-10 {margin-bottom: 10px;}


.border-block-start {
   background: linear-gradient(270deg, rgba(217, 119, 6, 1) 0%, rgba(239, 68, 68, 1) 100%) !important;
   width: 70px;
   height: 3px;
   margin: 5px 0px;
}

.faq-item {
            background: white;
            border-radius: 12px;
            border: 1px solid var(--border-light);
            margin-bottom: 12px;
            overflow: hidden;
            transition: var(--transition);
        }

        .faq-item:hover {
            border-color: var(--accent);
        }

        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            cursor: pointer;
            font-weight: 600;
            font-size: 16px;
            color: var(--text-dark);
            gap: 16px;
        }

        .faq-question i {
            font-size: 14px;
            color: var(--accent);
            transition: transform 0.3s;
            flex-shrink: 0;
        }

        .faq-item.active .faq-question i {
            transform: rotate(180deg);
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease;
        }

        .faq-item.active .faq-answer {
            max-height: 300px;
        }

        .faq-answer-inner {
            padding: 0 24px 20px;
            font-size: 14px;
            color: var(--text-body);
            line-height: 1.8;
        }