/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

/* Header Adjustments - hide standard header since we have logo in hero now?
   Or make it absolute top bar strictly for nav if needed.
   For now, strictly matching the image which often has logo simply placed above content. */
.header {
    display: none;
    /* Hiding separate header to rely on hero structure */
}

/* Hero Section Redesign 5.0 (Agent Right, Text Left/Center) */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    /* align-items: center;  <-- REMOVED to align to top */
    /* Background Image Flipped (Agent Right) with Blue Overlay */
    /* Gradient: Darker on left (for text), Lighter/Transparent on right (for agent) */
    background:
        linear-gradient(to right, rgba(1, 42, 94, 0.95) 0%, rgba(1, 58, 128, 0.7) 60%, rgba(1, 58, 128, 0.1) 100%),
        url('modelo/atendente1.jpg');
    background-size: cover;
    background-position: center right;
    /* Pin agent to right */
    background-repeat: no-repeat;
    color: #fff;
    padding: 60px 0 120px;
    /* Reduced top padding to move logo up */
    overflow: hidden;
}

.hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centered Layout */
    justify-content: flex-start;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Image Column Hidden */
.hero-image-col,
.hero-agent-img {
    display: none;
}

/* Logo Positioned Center */
.logo-hero {
    align-self: center;
    /* Center */
    margin-bottom: 20px;
    margin-left: 0;
}

/* Right Column: Content */
.hero-content {
    width: 100%;
    max-width: 950px;
    /* Increased to fit single line text */
    margin: 0 auto;
    /* Center block */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-subtitle {
    color: #ffff00;
    font-size: 18px;
    /* Reduced size */
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-form {
    width: 100%;
    max-width: 950px;
    /* Match hero-content width */
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-form input {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    color: #333;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-form input::placeholder {
    color: #aaa;
}

/* Logo Hero Adjustment */
/* .logo-hero {
    margin-bottom: 25px;
} */

.logo-img {
    width: 600px;
    /* Increased from 400px for prominence */
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    /* Added 'destaque' */
}

.hero-content h1 {
    font-size: 48px;
    /* Big White Title */
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.1;
    font-family: 'Inter', sans-serif;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.5;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.highlight-yellow {
    color: #ffff00;
    font-weight: 700;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%;
    max-width: 950px;
    /* Match form and content width */
}

.btn {
    width: 100%;
    padding: 16px;
    font-size: 16px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    font-weight: 800;
    letter-spacing: 0.5px;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none !important;
    /* Force removal of underlines */
    display: flex;
    /* Ensure all buttons use flex for centering */
    justify-content: center;
    align-items: center;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn-green {
    background-color: #07B31E;
    border: none;
    color: #fff;
    /* Flex properties inherited from .btn now */
}

.btn-red {
    background: linear-gradient(to bottom, #ff3b3b, #d32f2f);
    border: 1px solid #c62828;
    color: #fff;
    display: flex;
    justify-content: center;
    /* Centered */
    align-items: center;
    gap: 10px;
    /* Space between text and icon */
    padding: 16px 25px;
}

.btn-red i,
.btn-yellow i {
    font-size: 18px;
}

.btn-yellow {
    background: linear-gradient(to bottom, #ffeb3b, #fdd835);
    color: #333;
    border: 1px solid #fbc02d;
    display: flex;
    justify-content: center;
    /* Centered */
    align-items: center;
    gap: 10px;
    /* Space between text and icon */
    padding: 16px 25px;
}

.btn-light-blue {
    background: linear-gradient(to bottom, #4fc3f7, #039be5);
    /* Light Blue Gradient */
    color: #fff;
    border: 1px solid #0288d1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 16px 25px;
    text-transform: uppercase;
}

.btn-light-blue i {
    font-size: 18px;
}

.hero-footer-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 15px 0;
    text-align: center;
    border-top: none;
    z-index: 10;
    margin-top: 0;
}

/* Cookie Popup */
.cookie-popup {
    position: fixed;
    bottom: -200px;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 20px;
    z-index: 9999;
    transition: bottom 0.5s ease-in-out, opacity 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    opacity: 0;
    border-top: 1px solid rgba(1, 58, 128, 0.1);
}

.cookie-popup.show {
    bottom: 0;
    opacity: 1;
}

.cookie-content {
    max-width: 1200px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-size: 14px;
    color: #333;
}

.cookie-content p {
    margin: 0;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
}

.cookie-content a {
    color: #013A80;
    font-weight: 700;
    text-decoration: none;
}

.btn-cookie {
    background-color: #07B31E;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-cookie:hover {
    background-color: #059018;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(7, 179, 30, 0.3);
}

@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-popup {
        padding: 15px;
    }

    .btn-cookie {
        width: 100%;
        max-width: 200px;
    }
}

.hero-footer-text p {
    font-size: 16px;
    /* Slightly larger for readability */
    color: #ffff00;
    /* Yellow text */
    font-weight: 400;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* Responsive */
@media (max-width: 900px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        padding-top: 20px;
    }

    .hero-section {
        min-height: auto;
        flex-direction: column;
        /* Stack container and footer text vertically */
        padding-top: 10px;
        /* Move logo closer to top (overriding global 60px) */
        /* Mobile background fit - prioritize top (face) and center alignment (50%) - aligned to top to avoid gap */
        background-position: center top !important;
        background-size: 130% auto;
        /* Vertical gradient for mobile: Stronger blue mask as requested */
        background-image:
            linear-gradient(to bottom, rgba(1, 42, 94, 0.6) 0%, rgba(1, 58, 128, 0.5) 45%, rgba(1, 58, 128, 0.95) 90%),
            url('modelo/atendente1.jpg');
        padding-bottom: 0;
        /* Clear padding so footer text sits at very bottom if needed, or keep small spacing */
    }

    .hero-container {
        padding-top: 0;
    }

    /* Push text down to reveal the agent's face between logo and text */
    /* Reduced margin to bring content up further to cover image cut */
    .hero-content {
        margin-top: 130px;
    }

    .hero-image-col {
        display: none;
    }

    .hero-content-col {
        padding: 0;
    }

    .hero-content-col h1 {
        font-size: 14px;
    }

    .hero-content h1 {
        font-size: 20px;
    }

    .hero-subtitle {
        font-size: 18px;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
    }

    .hero-footer-text {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 20px;
        background-color: #000;
        /* Solid black or dark to match design */
    }

    .logo-hero {
        margin-top: 0;
        margin-bottom: 0;
        /* Logo stays at top */
    }
}

/* Benefits Section Redesign */
.benefits-section {
    padding: 80px 0;
    background-color: #ffffff;
    /* Changed to White to blend with studio images */
    text-align: center;
}

.section-title {
    color: #013A80;
    font-size: 32px;
    margin-bottom: 40px;
    font-weight: 800;
    text-transform: uppercase;
}

/* Tabs */
.vehicle-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 30px;
    border: none;
    background-color: #f0f0f0;
    /* Light gray default */
    color: #666;
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px;
    /* Rounded rects as in image */
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
    background-color: #013A80;
    /* Dark blue active */
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(1, 58, 128, 0.3);
}

/* Benefits Grid Display */
.benefits-grid-display {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 Columns on desktop */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Feature Cards Unified Style */
.feature-card {
    display: flex;
    align-items: center;
    background: #f4f6f9;
    /* Slight grey for contrast on white bg */
    padding: 25px;
    border-radius: 12px;
    /* Standard rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-align: left;
    gap: 20px;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(1, 58, 128, 0.15);
    background: #fff;
    border: 1px solid #e0e0e0;
}

.feature-icon {
    width: 60px;
    height: 60px;
    background-color: #013A80;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.feature-icon i {
    color: #fff;
    font-size: 24px;
}

.feature-text h3 {
    color: #013A80;
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 700;
}

.feature-text p {
    flex-direction: column;
    gap: 30px;
}

/* End of max-width: 1024px */

/* Video Section */
.video-section {
    padding: 60px 0;
    background-color: #f9f9f9;
    text-align: center;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .main-vehicle-img {
        width: 80%;
        margin-bottom: 20px;
    }

    .features-column.left .feature-card,
    .features-column.right .feature-card {
        flex-direction: row;
        /* Force standard list view on mobile */
        text-align: left;
        border-radius: 20px;
        padding: 15px;
    }

    .features-column.right .feature-card {
        justify-content: flex-start;
    }

    .features-column.left .feature-text,
    .features-column.right .feature-text {
        text-align: left;
        margin-left: 15px;
        margin-right: 0;
    }

    .features-column.right .feature-icon {
        order: -1;
        /* Move icon to start */
    }
}

/* Coverage List Section */
.coverages-section {
    padding: 80px 0;
    background-color: #fff;
    display: flex;
    justify-content: center;
}

.coverage-container {
    display: flex;
    align-items: flex-start;
    /* Align top */
    justify-content: space-between;
    gap: 60px;
    max-width: 1200px;
}

/* Left Side: Title + Image */
.coverage-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 450px;
}

.coverage-title {
    color: #0A1931;
    /* Dark Blue */
    font-size: 28px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.2;
    text-transform: uppercase;
}

.coverage-image-wrapper img {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 20px;
    /* Assuming rounded corners from visual style */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Shadow for depth */
}

/* Right Side: List */
.coverage-right {
    flex: 1.2;
    /* Give more space to list */
    padding-top: 10px;
}

.coverage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* No columns by default, just one list? The image showed a single column list but it suggests 2 in older code. 
       The prompt image has a single long list. I will keep it clean. */
}

.coverage-list li {
    font-size: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    /* Align checkmark with top of multiline text */
    gap: 12px;
    color: #333;
    font-weight: 500;
    line-height: 1.4;
}

.coverage-list li i {
    color: #333;
    /* Dark checkmark as per image (looks black/dark grey) */
    /* Wait, usually checks are green, but looking at the user image, they look dark grey or black */
    font-size: 18px;
    margin-top: 3px;
    min-width: 20px;
    /* alignment */
}

/* Responsive */
@media (max-width: 900px) {
    .coverage-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .coverage-left {
        margin-bottom: 40px;
        max-width: 100%;
    }

    .coverage-list li {
        justify-content: flex-start;
        text-align: left;
    }
}

/* FAQ Section */
/* FAQ Section Redesign */
.faq-section {
    background: radial-gradient(circle at center top, #0d1e42 0%, #00081c 100%);
    color: #fff;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.faq-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.faq-header .shield-icon-bg {
    font-size: 80px;
    color: #0056b3;
    opacity: 0.2;
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    filter: blur(10px);
    /* Glowing effect */
}

.faq-header h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-shadow: 0 0 20px rgba(0, 86, 179, 0.8);
}

.faq-header p {
    font-size: 16px;
    color: #ccc;
    max-width: 600px;
    margin: 0 auto;
}

/* Styled Accordion Buttons */
.faq-accordion {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 20px;
}

.faq-btn {
    width: 100%;
    background-color: rgba(10, 25, 49, 0.6);
    /* Semi-transparent dark blue */
    color: #fff;
    border: 2px solid #0044cc;
    /* Bright Border */
    padding: 18px 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50px;
    /* Pill shape */
    display: flex;
    justify-content: center;
    /* Center text */
    align-items: center;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 68, 204, 0.2);
}

.faq-btn:hover {
    background-color: #0044cc;
    box-shadow: 0 0 20px rgba(0, 68, 204, 0.6);
    transform: scale(1.02);
}

.faq-btn i {
    position: absolute;
    right: 25px;
    /* Icon stays right */
    transition: transform 0.3s;
}

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

.faq-content {
    display: none;
    padding: 0 30px 20px;
    color: #e0e0e0;
    /* Light text for readability on dark background */
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
}

.faq-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Bottom Features Redesign */
/* Bottom Features Banner */
.bottom-features {
    background-color: #013A80;
    padding: 0;
    width: 100%;
    overflow: hidden;
    /* Prevent horizontal scroll if image is huge */
    color: #fff;
    display: flex;
    justify-content: center;
}

.features-banner-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

.features-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Ensures it covers efficiently */
}

/* Testimonials Carousel */
.carousel-container {
    position: relative;
    max-width: 1000px;
    /* Adjust based on image sizes */
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 0 40px;
}

.carousel-track-container {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    list-style: none;
    padding: 0;
    margin: 0;
}

.carousel-slide {
    min-width: 33.333%;
    /* Show 3 at a time on desktop */
    padding: 0 10px;
    box-sizing: border-box;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* Optional rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.carousel-nav {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    gap: 10px;
}

.carousel-indicator {
    border: none;
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.carousel-indicator.current-slide {
    background: #013A80;
    transform: scale(1.2);
}

/* Responsive Carousel */
@media (max-width: 768px) {
    .carousel-slide {
        min-width: 100%;
        /* Show 1 at a time on mobile */
    }
}

/* Depoimentos */
.depoimentos-section {
    padding: 60px 0;
    text-align: center;
}

.title-depoimentos {
    color: #0A1931;
    margin-bottom: 40px;
}

.depoimentos-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.depoimento-item {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 5px;
    font-size: 13px;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.depoimento-item .user-info {
    margin-bottom: 10px;
    color: #3b5998;
    /* FB blue-ish */
}

/* Footer */
.main-footer {
    background-color: #f9f9f9;
    /* Light background from image */
    color: #333;
    /* Dark text */
    padding: 60px 0 40px;
    text-align: center;
    font-size: 14px;
}

.footer-info p {
    margin-bottom: 5px;
    line-height: 1.6;
}

.institucional-title {
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
    font-size: 16px;
}

.cnpj {
    margin-bottom: 20px !important;
}

.company-name {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 30px !important;
}

.footer-block {
    margin-bottom: 30px;
}

.location-title {
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.footer-links {
    margin-top: 40px;
    font-size: 13px;
    text-transform: lowercase;
}

.footer-links a {
    color: #333;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Modal */
.quote-form-section {
    display: none;
    /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
    }

    .hero-image {
        max-width: 80%;
        margin-bottom: 20px;
    }

    .hero-content {
        padding-left: 0;
        text-align: center;
    }

    .hero-buttons {
        align-items: center;
    }

    .vehicle-display {
        flex-direction: column;
    }

    .coverage-container {
        flex-direction: column;
    }

    .features-grid-3 {
        flex-direction: column;
        align-items: center;
    }

    .depoimentos-list {
        grid-template-columns: 1fr;
    }
}

/* --- New Benefits (Vehicle Carousel) Section Styles --- */
.benefits-section {
    padding: 40px 0;
    background-color: #fff;
}

.benefits-section .section-title {
    color: #0A2240;
    /* Dark Blue */
    font-size: 32px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-align: center;
}

.vehicle-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.tab-btn {
    padding: 12px 30px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f2f2f2;
    /* Light Gray Inactive */
    color: #555;
    min-width: 140px;
}

.tab-btn.active,
.tab-btn:hover {
    background-color: #0c1e5b;
    /* Dark Blue Active matched to reference */
    color: #fff;
    box-shadow: 0 4px 12px rgba(12, 30, 91, 0.3);
}

.vehicle-display {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.vehicle-banner {
    width: 100%;
    max-width: 1100px;
    /* Constrain width to look nice */
    height: auto;
    /* The image itself contains the design (Vehicle + Text Bubbles) */
}

/* Success Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background-color: #000;
    color: #fff;
    padding: 40px;
    border: 1px solid #333;
    width: 90%;
    max-width: 600px;
    text-align: left;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.modal-content h2 {
    font-size: 32px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #fff;
}

.modal-content p {
    font-size: 18px;
    line-height: 1.5;
    color: #ddd;
}

.close-btn {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close-btn:hover,
.close-btn:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .modal-content {
        padding: 30px 20px;
    }

    .modal-content h2 {
        font-size: 24px;
    }

    .modal-content p {
        font-size: 16px;
    }
}