/* CSS Variables & Reset */
:root {
    --primary-red: #E60000;
    --dark-red: #8B0000;
    --dark-bg: #0A0A0A;
    --card-bg: #1A1A1A;
    --text-main: #FFFFFF;
    --text-sub: #CCCCCC;
    --gradient-red: linear-gradient(135deg, #E60000, #8B0000);
    --gradient-metallic: linear-gradient(145deg, #2a2a2a, #111);
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Added scroll-padding-top to account for the new sticky header */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}
h1, h2, h3, h4, .btn, .oswald { font-family: 'Oswald', sans-serif; text-transform: uppercase; }

/* Typography */
h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1rem; color: #fff; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
h2 { font-size: 2.8rem; color: var(--primary-red); margin-bottom: 1rem; }
h3 { font-size: 1.8rem; margin-bottom: 10px; color: #fff; }
.subheadline { font-size: 1.2rem; color: var(--text-sub); margin-bottom: 2rem; }

/* Utility Classes */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-pad { padding: 80px 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.text-center { text-align: center; }
.bg-darker { background-color: #050505; }
.bg-light { background-color: #F8F9FA; color: #111; }
.bg-light h2 { color: #111; text-shadow: none; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transform: skewX(-10deg);
    transition: all 0.3s ease;
    position: relative;
    text-align: center;
}
.btn span { display: inline-block; transform: skewX(10deg); }
.btn-primary {
    background: var(--gradient-red);
    color: #fff;
    box-shadow: 0 5px 15px rgba(230, 0, 0, 0.4);
}
.btn-primary:hover { box-shadow: 0 8px 25px rgba(230, 0, 0, 0.6); transform: skewX(-10deg) scale(1.05); }
.btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid var(--primary-red);
}
.btn-secondary:hover { background: var(--primary-red); }

/* 12. STICKY ELEMENTS */
.top-bar {
    background: var(--primary-red);
    color: white;
    text-align: center;
    padding: 10px;
    font-weight: bold;
    position: sticky;
    z-index: 1000;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- HEADER CSS --- */
.main-header {
    background: #0A0A0A;
    border-bottom: 1px solid #222;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.header-container { display: flex; justify-content: space-between; align-items: center; }
.logo h2 { margin: 0; color: #fff; font-size: 2rem; }
.logo span { color: var(--primary-red); }
.nav-links { display: flex; gap: 25px; }
.nav-links a {
    color: var(--text-main);
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}
.nav-links a:hover { color: var(--primary-red); }

/* 1. HERO SECTION SLIDER */
.hero-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    border-bottom: 4px solid var(--primary-red);
    background-color: var(--dark-bg);
}
.hero-slider-track {
    display: flex;
    will-change: transform;
}
.hero-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}

.hero-bg-1 { background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(26,26,26,0.8) 50%, rgba(0,0,0,0.4) 100%), url('https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover; }
.hero-bg-2 { background: linear-gradient(0deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.7) 100%), url('https://images.unsplash.com/photo-1542282088-72c9c27ed0cd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover; }
.hero-bg-3 { background: linear-gradient(270deg, rgba(10,10,10,0.95) 0%, rgba(26,26,26,0.7) 50%, rgba(0,0,0,0.3) 100%), url('https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover; }
.hero-bg-4 { background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(26,26,26,0.8) 60%, rgba(0,0,0,0.4) 100%), url('https://images.unsplash.com/photo-1617531653332-bd46c24f2068?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover; }

/* Hero Arrows */
.hero-arrows {
    position: absolute;
    top: 50%;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 10;
    pointer-events: none;
}
.hero-arrow {
    background: rgba(10, 10, 10, 0.6);
    color: white;
    border: 2px solid var(--primary-red);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.hero-arrow:hover { background: var(--primary-red); transform: scale(1.1); }

.hero-dots-container {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}
.hero-dot {
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}
.hero-dot.active {
    background: var(--primary-red);
    box-shadow: 0 0 10px var(--primary-red);
    transform: scale(1.2);
}

/* Hero Feature Cards */
.hero-feature-card {
    background: #111;
    padding: 15px;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 4px;
    text-align: left;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.hero-feature-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-5px);
}
.hero-icon-circle {
    background: var(--primary-red);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 5px 10px rgba(230,0,0,0.3);
}
.hero-feature-card h4 { font-size: 1.05rem; margin-bottom: 2px; color: #fff; }
.hero-feature-card p { font-size: 0.85rem; color: var(--text-sub); margin: 0; }

/* --- LIGHT MODE EXPERTS SECTION CSS --- */
.expert-section-title { text-align: center; margin-bottom: 50px; }
.expert-section-title h2 { font-size: 3.5rem; color: #111; margin-bottom: 5px; }
.expert-section-title .expert-sub {
    font-size: 1.2rem; font-style: italic; font-weight: bold; color: #555;
    display: flex; align-items: center; justify-content: center; gap: 15px;
}
.expert-section-title .expert-sub::before,
.expert-section-title .expert-sub::after { content: ""; height: 2px; width: 60px; background-color: var(--primary-red); }

.expert-card {
    background: #fff; border-radius: 6px; overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); transition: transform 0.3s ease;
}
.expert-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.15); }
.expert-img { width: 100%; height: 350px; object-fit: cover; }
.expert-label {
    background: #0A192F; color: #fff; text-align: center; padding: 18px;
    font-family: 'Oswald', sans-serif; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; gap: 10px;
}
.expert-label i { color: var(--primary-red); font-size: 1.5rem; }

.expert-feature-strip { background: #111; padding: 30px 0; margin-top: -10px; }
.expert-strip-flex { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.expert-strip-item { display: flex; align-items: center; gap: 15px; color: #fff; }
.expert-strip-item i { color: var(--primary-red); font-size: 2.2rem; }
.expert-strip-item span { font-family: 'Oswald', sans-serif; font-size: 1.1rem; line-height: 1.2; letter-spacing: 0.5px; }

/* --- CTA STORM SECTION CSS --- */
.cta-storm-section {
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.95) 20%, rgba(255,255,255,0.75) 60%, rgba(0,0,0,0.6) 100%), url('https://images.unsplash.com/photo-1559087316-6b27308e53f6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80') center/cover;
    background-attachment: fixed;
    color: #111;
    padding: 80px 0;
    border-bottom: 4px solid var(--primary-red);
}
.cta-headline { font-size: 4.5rem; color: var(--primary-red) !important; margin-bottom: 0 !important; text-transform: uppercase; font-style: italic; text-shadow: none !important; line-height: 1; }
.cta-subhead { font-size: 2.2rem; color: #111; margin-bottom: 30px; text-transform: uppercase; font-style: italic; font-family: 'Oswald', sans-serif; font-weight: 700; }
.cta-subhead .highlight-red { background-color: var(--primary-red); color: #fff; padding: 2px 15px; display: inline-block; }
.cta-black-bar { background-color: #111; display: inline-flex; align-items: stretch; margin: 0 auto 40px auto; transform: skewX(-10deg); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.cta-bolt { background-color: var(--primary-red); color: #fff; padding: 10px 25px; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.cta-bolt i { transform: skewX(10deg); }
.cta-bar-text { color: #fff; padding: 15px 30px; font-family: 'Oswald', sans-serif; font-size: 1.4rem; font-weight: bold; letter-spacing: 1px; display: flex; align-items: center; }
.cta-bar-text-inner { transform: skewX(10deg); }
.cta-paragraph { font-size: 1.3rem; color: #333; max-width: 850px; margin: 0 auto 40px auto; line-height: 1.8; font-weight: 500; }
.cta-bottom-callout { font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: bold; color: #111; display: flex; justify-content: center; align-items: center; gap: 15px; text-transform: uppercase; }
.cta-bottom-callout i { color: var(--primary-red); font-size: 2.5rem; }

/* --- WHY CHOOSE US SECTION CSS --- */
.why-section {
    position: relative;
    display: flex;
    min-height: 800px;
    background: #fff; 
}
.why-img-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1621993202323-f438eec934ff?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80') center/cover;
    z-index: 1;
}
.why-content-outer {
    position: relative;
    z-index: 2;
    width: 55%;
    background: var(--primary-red);
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}
.why-content-inner {
    background: #0A0A0A;
    clip-path: polygon(0 0, calc(100% - 5px) 0, calc(85% - 5px) 100%, 0 100%);
    height: 100%;
    padding: 80px 10% 80px max(20px, calc((100vw - 1200px) / 2));
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.why-title { font-family: 'Oswald', sans-serif; font-size: 4.5rem; line-height: 1.1; text-transform: uppercase; color: #fff; margin-bottom: 40px; }
.why-title span { color: var(--primary-red); font-size: 5rem; }
.why-list { display: flex; flex-direction: column; gap: 25px; }
.why-item { display: flex; align-items: flex-start; gap: 20px; }
.why-icon { color: var(--primary-red); font-size: 2.2rem; min-width: 40px; text-align: center; margin-top: 5px; }
.why-text h4 { color: #fff; font-size: 1.2rem; margin-bottom: 5px; letter-spacing: 0.5px; }
.why-text p { color: var(--text-sub); font-size: 1rem; line-height: 1.5; max-width: 400px; }
.why-bottom-badge { display: flex; align-items: center; gap: 15px; margin-top: 40px; padding-top: 30px; border-top: 1px solid #222; }
.why-bottom-badge i { font-size: 3.5rem; color: #ccc; }
.why-badge-text h4 { color: #fff; font-size: 1.4rem; margin-bottom: 2px; letter-spacing: 1px; }
.why-badge-text p { color: var(--primary-red); font-size: 0.9rem; font-weight: bold; letter-spacing: 1px; }

/* --- MAKE IT EASY SECTION (LIGHT MODE) --- */
.easy-section {
    background-color: #ffffff;
    padding: 80px 0 0 0;
    position: relative;
}
.easy-content-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.easy-text-col {
    padding-bottom: 60px;
}
.easy-title {
    font-family: 'Oswald', sans-serif;
    font-size: 4.2rem;
    color: #111;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 5px;
}
.easy-title span {
    color: var(--primary-red);
}
.easy-subtitle {
    font-size: 1.3rem;
    color: #555;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 40px;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 2px solid #EEE;
    padding-bottom: 15px;
    display: inline-block;
}
.easy-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px;
}
.easy-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}
.easy-icon {
    width: 55px;
    height: 55px;
    border: 2px solid var(--primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-red);
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 4px 10px rgba(230,0,0,0.1);
}
.easy-feature-text h4 {
    font-size: 1.1rem;
    color: #111;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-weight: 700;
}
.easy-feature-text p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.4;
}
.easy-img-col {
    height: 100%;
    min-height: 600px;
    background: url('https://images.unsplash.com/photo-1517524206127-48bbd363f3d7?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80') center/cover;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
}
.easy-bottom-banner {
    background: var(--primary-red);
    color: #fff;
    text-align: center;
    padding: 25px 20px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    text-transform: uppercase;
}
.easy-bottom-banner i {
    font-size: 2.2rem;
}

/* --- ROOF PROTECTION SECTION CSS --- */
.roof-protect-section {
    position: relative;
    background: url('https://images.unsplash.com/photo-1635424709870-cdc6e64f0e20?q=80&w=1171&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover;
    background-attachment: fixed;
    padding: 80px 0 120px 0;
    text-align: center;
}
.roof-protect-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
}
.roof-protect-content {
    position: relative;
    z-index: 2;
}
.roof-title-white {
    font-size: 5rem;
    color: #fff;
    font-style: italic;
    margin-bottom: -10px;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
    font-family: 'Oswald', sans-serif;
}
.roof-title-red {
    font-size: 5rem;
    color: var(--primary-red);
    font-style: italic;
    margin-bottom: 25px;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.9);
    font-family: 'Oswald', sans-serif;
}
.roof-subhead-container {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}
.roof-subhead-inner {
    background: #0B2046; 
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 2.2rem;
    padding: 10px 50px;
    transform: skewX(-15deg);
    border-bottom: 4px solid var(--primary-red);
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}
.roof-features-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
.roof-feature {
    display: flex;
    align-items: center;
    gap: 15px;
}
.roof-icon {
    width: 60px;
    height: 60px;
    border: 2px solid var(--primary-red);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary-red);
    background: rgba(0,0,0,0.7);
    box-shadow: 0 0 15px rgba(230,0,0,0.4);
}
.roof-f-text {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    text-align: left;
    line-height: 1.2;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.9);
}

.roof-bottom-bar-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 3;
}
.roof-ribbon {
    background: var(--primary-red);
    height: 70px;
    padding: 0 60px 0 10%;
    display: flex;
    align-items: center;
    clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0% 100%);
    box-shadow: 5px 5px 20px rgba(0,0,0,0.6);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}
.roof-ribbon-content {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 1.8rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 10px;
}
.roof-bottom-bar {
    background: #111;
    height: 50px;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10%;
    margin-left: -30px; 
    position: relative;
    z-index: 1;
}
.roof-bottom-text {
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    white-space: nowrap; 
}

/* --- NEW INSURANCE LOGOS SECTION CSS --- */
.insurance-logos-section {
    background-color: #050505;
    padding: 80px 0;
    border-bottom: 4px solid var(--primary-red);
}
.ins-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.ins-line {
    flex-grow: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-red));
    max-width: 300px;
}
.ins-line.right {
    background: linear-gradient(270deg, transparent, var(--primary-red));
}
.ins-icon {
    color: var(--primary-red);
    font-size: 2.5rem;
    margin: 0 20px;
}
.ins-title {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-size: 4rem;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 20px;
}
.ins-title span {
    color: var(--primary-red);
}
.ins-subtitle-bar {
    background: linear-gradient(90deg, #4a0000, var(--primary-red), #4a0000);
    color: #fff;
    text-align: center;
    padding: 15px 20px;
    font-family: 'Oswald', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    margin-bottom: 50px;
}
.ins-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 15px;
}
.ins-logo-card {
    background: #111;
    border: 1px solid #333;
    padding: 20px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.ins-logo-card:hover {
    border-color: var(--primary-red);
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(230,0,0,0.5);
}
.ins-logo-card i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--text-sub);
}
.ins-logo-card span {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
}

/* 2. ADVANTAGES CARDS */
.card { background: var(--card-bg); padding: 30px; border-top: 4px solid var(--primary-red); box-shadow: 0 10px 30px rgba(0,0,0,0.5); transition: transform 0.3s; }
.card:hover { transform: translateY(-10px); }
.card i { font-size: 2.5rem; color: var(--primary-red); margin-bottom: 15px; }
.card ul { list-style: none; margin: 15px 0; color: var(--text-sub); }
.card ul li { margin-bottom: 10px; }
.card ul li::before { content: "✔"; color: var(--primary-red); margin-right: 10px; font-weight: bold; }

/* 3. BEFORE & AFTER */
.ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.ba-card { background: #111; border: 1px solid #333; padding: 15px; }
.ba-image { width: 100%; height: 250px; object-fit: cover; border-radius: 2px; }
.ba-label { background: var(--primary-red); padding: 5px 15px; display: inline-block; font-weight: bold; font-family: 'Oswald', sans-serif; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;}
.ba-label.after { background: #FFFFFF; color: #000; }

/* 4. REVIEWS - CAROUSEL CSS */
.stars { color: #E60000; margin-bottom: 15px; font-size: 1.2rem; letter-spacing: 2px;}
.carousel-container { position: relative; margin-top: 40px; }
.carousel-wrapper { overflow: hidden; width: 100%; padding-bottom: 20px; }
.carousel-track { display: flex; gap: 30px; will-change: transform; }
.review-card { background: var(--gradient-metallic); padding: 30px; border-left: 3px solid var(--primary-red); font-style: italic; flex: 0 0 calc(33.333% - 20px); min-width: calc(33.333% - 20px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }

.carousel-arrows { position: absolute; top: 50%; left: -25px; right: -25px; display: flex; justify-content: space-between; transform: translateY(-50%); z-index: 10; pointer-events: none; }
.carousel-arrow { background: var(--card-bg); color: white; border: 2px solid var(--primary-red); width: 45px; height: 45px; border-radius: 50%; cursor: pointer; pointer-events: auto; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.carousel-arrow:hover { background: var(--primary-red); transform: scale(1.1); }
.carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 15px; }

/* 6. EDUCATION TABLE */
.edu-table { width: 100%; border-collapse: collapse; margin-top: 30px; background: var(--card-bg); }
.edu-table th, .edu-table td { padding: 15px; border: 1px solid #333; text-align: left; }
.edu-table th { background: var(--primary-red); color: white; font-family: 'Oswald', sans-serif; font-size: 1.2rem;}
.edu-table tr:nth-child(even) { background: #111; }

/* 7. MAP PINS */
.map-pins { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; }
.pin { background: var(--card-bg); border: 1px solid #333; padding: 10px 20px; font-weight: bold; }
.pin i { color: var(--primary-red); margin-right: 8px; }

/* 9. MULTI-STEP FORM WITH PROGRESS BAR */
.form-container { background: var(--gradient-metallic); padding: 40px; border: 2px solid #333; box-shadow: 0 10px 40px rgba(0,0,0,0.8); }
.progress-bar-container { display: flex; gap: 5px; margin-bottom: 30px; }
.progress-segment { flex: 1; height: 8px; background: #333; transition: background 0.3s ease; border-radius: 4px; }
.progress-segment.active { background: var(--primary-red); box-shadow: 0 0 10px rgba(230,0,0,0.5); }
.form-step { display: none; }
.form-step.active { display: block; animation: fadeIn 0.5s; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--text-sub); }
.form-control { width: 100%; padding: 15px; background: #000; border: 1px solid #444; color: white; font-family: inherit; font-size: 1rem; }
.form-control:focus { border-color: var(--primary-red); outline: none; }
.checkbox-group { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; background: #111; padding: 15px; border-left: 3px solid var(--primary-red); cursor: pointer; }
.checkbox-group input { transform: scale(1.5); accent-color: var(--primary-red); cursor: pointer; }

/* 10. FAQ */
.faq-item { background: var(--card-bg); margin-bottom: 15px; border-left: 4px solid var(--primary-red); }
.faq-question { padding: 20px; cursor: pointer; display: flex; justify-content: space-between; font-weight: bold; font-family: 'Oswald', sans-serif; font-size: 1.2rem; }
.faq-answer { padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; color: var(--text-sub); }
.faq-item.active .faq-answer { padding: 0 20px 20px; max-height: 500px; }
.faq-item.active .faq-question i { transform: rotate(180deg); }

/* Alerts & Footer */
.success-banner { background: #28a745; color: white; padding: 15px; text-align: center; font-weight: bold; font-size: 1.2rem; text-transform: uppercase; }
.footer-urgency { background: var(--primary-red); text-align: center; padding: 60px 20px; }
.floating-cta { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
.floating-cta .btn { border-radius: 50px; transform: none; box-shadow: 0 5px 20px rgba(0,0,0,0.8); }
.floating-cta .btn span { transform: none; }

/* Exit Popup */
.popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 10000; justify-content: center; align-items: center; }
.popup-content { background: var(--card-bg); padding: 50px; max-width: 600px; text-align: center; border: 2px solid var(--primary-red); position: relative; }
.close-popup { position: absolute; top: 10px; right: 20px; font-size: 2rem; cursor: pointer; color: white; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Responsive */
@media(max-width: 1100px) {
     .roof-bottom-text { font-size: 1rem; white-space: normal; padding-left: 20px; text-align: right;}
}
@media(max-width: 992px) {
    .grid-4, .grid-3 { grid-template-columns: 1fr 1fr; }
    .hero-slide { padding: 60px 0; }
    .hero-bg-1 { background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.9) 100%), url('https://images.unsplash.com/photo-1603584173870-7f23fdae1b7a?ixlib=rb-4.0.3') center/cover; }
    .hero-bg-2 { background: linear-gradient(0deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.8) 100%), url('https://images.unsplash.com/photo-1542282088-72c9c27ed0cd?ixlib=rb-4.0.3') center/cover; }
    .hero-bg-3 { background: linear-gradient(270deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.8) 100%), url('https://images.unsplash.com/photo-1502877338535-766e1452684a?ixlib=rb-4.0.3') center/cover; }
    .hero-bg-4 { background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.9) 100%), url('https://images.unsplash.com/photo-1617531653332-bd46c24f2068?ixlib=rb-4.0.3') center/cover; }
    .review-card { flex: 0 0 calc(50% - 15px); min-width: calc(50% - 15px); }
    .carousel-arrows { left: 5px; right: 5px; }
    .why-content-outer { width: 70%; clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%); }
    .why-content-inner { clip-path: polygon(0 0, calc(100% - 5px) 0, calc(90% - 5px) 100%, 0 100%); }
    .easy-content-wrap { grid-template-columns: 1fr; gap: 0; }
    .easy-img-col { clip-path: none; min-height: 400px; margin-top: 40px; }
    
    /* Tablet Ins Grid */
    .ins-grid { grid-template-columns: repeat(4, 1fr); }
    .ins-title { font-size: 3rem; }
}
@media(max-width: 768px) {
    .grid-2, .grid-3, .grid-4, .ba-grid, .trust-strip .container { grid-template-columns: 1fr; flex-direction: column; text-align: center; }
    h1 { font-size: 2.2rem !important; }
    .trust-item { justify-content: center; margin-bottom: 10px; }
    .btn { display: block; width: 100%; margin-bottom: 15px; }
    .nav-links { display: none; }
    .review-card { flex: 0 0 100%; min-width: 100%; }
    .carousel-arrows, .hero-arrows { display: none; }
    
    .expert-strip-flex { flex-direction: column; align-items: center; text-align: center; }
    .expert-strip-item { flex-direction: column; gap: 5px; }

    /* Mobile CTA section */
    .cta-headline { font-size: 2.8rem; }
    .cta-subhead { font-size: 1.5rem; }
    .cta-black-bar { flex-direction: column; transform: none; width: 100%; border-radius: 8px; overflow: hidden; }
    .cta-bolt { width: 100%; padding: 15px; }
    .cta-bolt i { transform: none; }
    .cta-bar-text { font-size: 1.1rem; padding: 15px; text-align: center; justify-content: center; }
    .cta-bar-text-inner { transform: none; }
    .cta-paragraph { font-size: 1.1rem; padding: 0 15px; }
    .cta-bottom-callout { font-size: 1.4rem; flex-direction: column; text-align: center; }
    .cta-bottom-callout i { font-size: 2rem; }

    /* Mobile Why Choose Us Fix */
    .why-section { flex-direction: column-reverse; min-height: auto; }
    .why-img-bg { position: relative; width: 100%; height: 350px; }
    .why-content-outer { width: 100%; clip-path: none; border-bottom: 5px solid var(--primary-red); }
    .why-content-inner { clip-path: none; padding: 50px 20px; }
    .why-title { font-size: 3.5rem; }
    .why-title span { font-size: 4rem; }
    .why-item { flex-direction: column; align-items: center; text-align: center; }
    .why-bottom-badge { flex-direction: column; text-align: center; }

    /* Mobile Make it Easy Section */
    .easy-features-grid { grid-template-columns: 1fr; gap: 20px; }
    .easy-feature-item { flex-direction: column; align-items: center; text-align: center; }
    .easy-title { font-size: 3rem; text-align: center; }
    .easy-subtitle { display: block; text-align: center; }

    /* Mobile Roof Protect Section */
    .roof-title-white, .roof-title-red { font-size: 2.5rem; margin-bottom: 10px; }
    .roof-subhead-inner { font-size: 1.3rem; padding: 10px 20px; }
    .roof-features-row { flex-direction: column; align-items: center; gap: 20px; padding-left: 0; }
    
    .roof-bottom-bar-wrapper { flex-direction: column; position: relative; margin-top: 40px; }
    .roof-ribbon { padding: 15px; width: 100%; clip-path: none; height: auto; justify-content: center; }
    .roof-ribbon-content { font-size: 1.3rem; justify-content: center; text-align: center; }
    .roof-bottom-bar { width: 100%; margin-left: 0; padding: 15px; height: auto; justify-content: center; text-align: center; }
    .roof-bottom-text { white-space: normal; text-align: center; padding-right: 0;}
    
    /* Mobile Insurance Section */
    .ins-grid { grid-template-columns: repeat(2, 1fr); }
    .ins-title { font-size: 2.2rem; }
    .ins-subtitle-bar { font-size: 1.2rem; padding: 10px; }

    /* Mobile Floating Buttons Fix */
    .floating-cta { bottom: 10px; left: 10px; right: 10px; display: flex; flex-direction: row; gap: 10px; }
    .floating-cta .btn { margin-bottom: 0 !important; padding: 12px 5px !important; font-size: 0.85rem !important; width: 100% !important; flex: 1; }
}