* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; overflow-x: hidden; }

header {
    background: linear-gradient(135deg, #203E47 0%, #2BAFB1 100%);
    color: white; padding: 1rem 0; position: fixed; width: 100%; top: 0; z-index: 1000;
    box-shadow: 0 2px 10px rgba(32,62,71,0.3);
}

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

.logo { display: flex; align-items: center; gap: 0.6rem; font-size: 2rem; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); text-decoration: none; }
.logo img {
    height: 52px; width: 52px; object-fit: contain; display: block; background: #ffffff;
    border-radius: 50%; padding: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.logo span { color: #ffffff; font-size: 1.8rem; }

.nav-links { display: flex; list-style: none; gap: 2rem; }
.nav-links a { color: white; text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: #2BAFB1; }

.menu-toggle { display: none; background: transparent; border: none; color: white; font-size: 1.8rem; cursor: pointer; line-height: 1; }

.cta-button {
    background: #2BAFB1; color: #fafafa; padding: 0.8rem 1.5rem; border-radius: 25px;
    text-decoration: none; font-weight: bold; transition: all 0.3s; border: 2px solid #2BAFB1;
}
.cta-button:hover { background: white; color: #203E47; transform: translateY(-2px); }

.hero {
    background: linear-gradient(rgba(32,62,71,0.95), rgba(43,175,177,0.9)),
                url('data:images/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23e8f5f5" width="1200" height="600"/><path fill="%23203E47" opacity="0.2" d="M0 300Q300 100 600 300T1200 300V600H0z"/><circle fill="%232BAFB1" opacity="0.3" cx="200" cy="200" r="100"/><circle fill="%232BAFB1" opacity="0.2" cx="1000" cy="400" r="80"/></svg>');
    height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: white; margin-top: 80px;
    position: relative;
    padding-bottom: 120px;
}

.hero-logo {
    width: 180px; height: 180px; object-fit: contain; background: #ffffff; border-radius: 50%;
    padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); margin-bottom: 1rem; animation: fadeInUp 1s ease-out;
}
.hero-subtitle { font-size: 2.4rem; font-weight: 700; margin-bottom: 1rem; animation: fadeInUp 1s ease-out 0.1s both; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.hero-content p { font-size: 1.3rem; margin-bottom: 2rem; animation: fadeInUp 1s ease-out 0.2s both; max-width: 600px; }

.hero-insurance-wrap {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(920px, calc(100% - 2rem));
    z-index: 5;
}
.hero-insurance-banner {
    width: 100%;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 14px 35px rgba(12, 43, 51, 0.22);
    padding: 0.7rem 0 0.85rem;
    overflow: hidden;
}
.insurance-banner-title {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.6rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.insurance-track {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    width: max-content;
    animation: insuranceMarquee 22s linear infinite;
}
.insurance-logo {
    height: 60px;
    width: 140px;
    object-fit: contain;
    display: block;
    flex: 0 0 auto;
}
@keyframes insuranceMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.services { padding: 100px 2rem; max-width: 1200px; margin: 0 auto; background: #f8fbfc; }
.section-title { text-align: center; font-size: 2.5rem; margin-bottom: 3rem; color: #203E47; position: relative; }
.section-title::after {
    content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%);
    width: 80px; height: 4px; background: linear-gradient(90deg, #203E47, #2BAFB1); border-radius: 2px;
}

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.service-card {
    background: white; padding: 2.5rem 2rem; border-radius: 20px; box-shadow: 0 10px 40px rgba(32,62,71,0.1);
    text-align: center; transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); border-top: 5px solid #2BAFB1; position: relative; overflow: hidden;
}
.service-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #203E47, #2BAFB1);
}
.service-card:hover { transform: translateY(-15px) scale(1.02); box-shadow: 0 25px 60px rgba(43,175,177,0.2); }
.service-icon { font-size: 3.5rem; margin-bottom: 1.5rem; display: block; }
.service-image {
    width: 100%;
    max-width: 240px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px;
    margin: 0 auto 1.5rem;
    display: block;
    box-shadow: 0 6px 18px rgba(32,62,71,0.18);
}
.service-card h3 { color: #203E47; margin-bottom: 1rem; font-size: 1.6rem; }
.service-card p { color: #666; line-height: 1.7; }

.about { padding: 100px 2rem; background: linear-gradient(135deg, #203E47 0%, #2BAFB1 100%); color: white; }
.about-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-text h2 { font-size: 2.8rem; margin-bottom: 1.5rem; color: white; }
.about-text p { font-size: 1.1rem; margin-bottom: 1.5rem; opacity: 0.95; }

.stats { text-align: center; }
.stat-item { display: inline-block; margin: 0 1rem; }
.stat-number { font-size: 3rem; font-weight: bold; color: #2BAFB1; display: block; }

.contact { padding: 100px 2rem; background: #f8fbfc; }
.contact-container { max-width: 1200px; margin: 0 auto; text-align: center; }
.contact h2 { font-size: 2.8rem; margin-bottom: 1rem; color: #203E47; }
.contact p { font-size: 1.2rem; margin-bottom: 3rem; color: #666; }

.contact-form { max-width: 700px; margin: 0 auto; display: grid; gap: 1.5rem; }
.contact-form input, .contact-form textarea {
    padding: 1.2rem; border: 2px solid #e1e8ed; border-radius: 15px; font-size: 1rem; transition: all 0.3s; background: white;
}
.contact-form input:focus, .contact-form textarea:focus {
    outline: none; border-color: #2BAFB1; box-shadow: 0 0 0 3px rgba(43,175,177,0.1);
}
.contact-form button {
    background: linear-gradient(135deg, #203E47 0%, #2BAFB1 100%); color: white; padding: 1.2rem 3rem;
    border: none; border-radius: 15px; font-size: 1.2rem; font-weight: bold; cursor: pointer; transition: all 0.3s;
}
.contact-form button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(43,175,177,0.3); }

.contact-info { margin-top: 4rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
.contact-item { text-align: center; padding: 2rem; background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }

footer { background: #203E47; color: white; text-align: center; padding: 3rem 2rem; }

.opening-soon-marquee {
    background: linear-gradient(90deg, #203E47, #2BAFB1);
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    padding: 0.65rem 0;
    box-shadow: 0 4px 14px rgba(32,62,71,0.25);
    position: relative;
    z-index: 999;
}
.opening-soon-track {
    display: inline-block;
    padding-left: 100%;
    animation: marqueeRightToLeft 14s linear infinite;
    font-weight: 700;
    letter-spacing: 0.4px;
}
@keyframes marqueeRightToLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

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

@media (max-width: 1200px) {
    .services-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 1024px) {
    nav {
        padding: 0 1rem;
        gap: 0.8rem;
        flex-wrap: wrap;
    }
    .nav-links {
        gap: 0.9rem;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav-links a {
        font-size: 0.92rem;
    }
    .cta-button {
        padding: 0.65rem 1rem;
        font-size: 0.9rem;
        white-space: nowrap;
    }
    .logo span {
        font-size: 1.35rem;
    }

    .hero {
        min-height: calc(100vh - 80px);
        height: auto;
        padding: 2.5rem 1rem 9.5rem;
    }
    .hero-content {
        max-width: 760px;
        width: 100%;
        margin: 0 auto;
        padding: 0 0.4rem;
    }
    .hero-subtitle { font-size: 2rem; }
    .hero-content p { font-size: 1.08rem; max-width: 100%; margin: 0 auto 1.35rem; }

    .hero-insurance-wrap {
        width: calc(100% - 2rem);
        bottom: 10px;
    }
    .insurance-banner-title { font-size: 1.08rem; }
    .insurance-logo { height: 44px; width: 110px; }

    .about-text h2,
    .contact h2 { font-size: 2.2rem; }
}

@media (max-width: 900px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding-top: 2rem;
        padding-bottom: 8.5rem;
    }
    .hero-logo {
        width: 110px;
        height: 110px;
        margin-bottom: 0.7rem;
    }
    .hero-subtitle {
        font-size: 1.6rem;
        margin-bottom: 0.55rem;
    }
    .hero-content p {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }
    .opening-soon-marquee {
        margin-top: 0.7rem !important;
    }
    .hero-insurance-wrap {
        bottom: 8px;
    }
    .insurance-banner-title {
        font-size: 0.95rem;
        margin-bottom: 0.3rem;
    }
    .insurance-logo {
        height: 34px;
        width: 90px;
    }
}

@media (max-width: 768px) {
    nav { position: relative; flex-wrap: wrap; gap: 0.75rem; }
    .menu-toggle { display: block; }
    .nav-links {
        display: none; width: 100%; flex-direction: column; gap: 0.8rem; background: rgba(32,62,71,0.96);
        padding: 0.9rem 1rem 1rem; border-radius: 12px; margin-top: 0.4rem;
    }
    .nav-links.show { display: flex; }
    .hero {
        min-height: calc(100vh - 80px);
        height: auto;
        padding: 1.8rem 0.8rem 8.2rem;
    }
    .hero-logo { width: 130px; height: 130px; padding: 10px; }
    .hero-subtitle { font-size: 1.8rem; }
    .hero-insurance-wrap {
        width: calc(100% - 1.2rem);
        bottom: 8px;
    }
    .hero-insurance-banner {
        padding: 0.6rem 0 0.7rem;
        border-radius: 14px;
    }
    .insurance-banner-title {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
    }
    .insurance-track {
        gap: 0.9rem;
        animation-duration: 18s;
    }
    .insurance-logo {
        height: 28px;
        width: 88px;
    }
    .about-container { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .services-grid { grid-template-columns: 1fr; }
    .logo { font-size: 1.6rem; }
    .logo span { font-size: 1.8rem; }
    .cta-button { display: inline-block; }
}