/*
    LEGAL COPYRIGHT NOTICE:
    This website and all associated code is the exclusive property of Mediavision.us
    
    UNAUTHORIZED USE PROHIBITED:
    - Copying, modifying, or redistributing this code without written permission is illegal
    - Violators will be prosecuted to the full extent of the law
    - Legal action may include court proceedings and monetary damages
    - All code usage is monitored and tracked
    
    For licensing or permission requests:
    Contact: Mediavision.us
    Phone: (714) 888-5959
    
    This notice serves as legal documentation of ownership and copyright protection.
*/

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Navigation */
header {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    padding: 1rem 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    color: #fff;
    font-size: 1.8rem;
    margin-bottom: 0.2rem;
}

.tagline {
    color: #f0f0f0;
    font-size: 0.9rem;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: #ffd700;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, rgba(30, 60, 114, 0.9), rgba(42, 82, 152, 0.9)),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%231e3c72" width="1200" height="600"/><path fill="%232a5298" d="M0 300L50 283.3C100 266.7 200 233.3 300 233.3C400 233.3 500 266.7 600 283.3C700 300 800 300 900 283.3C1000 266.7 1100 233.3 1150 216.7L1200 200V600H1150C1100 600 1000 600 900 600C800 600 700 600 600 600C500 600 400 600 300 600C200 600 100 600 50 600H0V300Z"/></svg>');
    background-size: cover;
    background-position: center;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.cta-button {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: #ffd700;
    color: #1e3c72;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.6);
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 1.5s ease-in;
}

.animate-slide-up {
    animation: slideUp 1.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Services Section */
.services {
    padding: 5rem 0;
    background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
}

.services h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1e3c72;
}

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

.service-card {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s;
    text-align: center;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(30, 60, 114, 0.2);
}

.service-card .icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.service-card h3 {
    color: #1e3c72;
    margin-bottom: 1rem;
}

/* About Section */
.about {
    padding: 5rem 0;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
}

.about h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
}

.profile-image .image-placeholder {
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.profile-image .image-placeholder::before {
    content: '👤';
}

.about-text h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #ffd700;
}

.about-text p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.expertise {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
}

.expertise h4 {
    margin-bottom: 1rem;
    color: #ffd700;
}

.expertise ul {
    list-style: none;
    padding-left: 0;
}

.expertise li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.expertise li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ffd700;
    font-weight: bold;
}

/* Coverage Section */
.coverage {
    padding: 4rem 0;
    background: #f8f9fa;
}

.coverage h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1e3c72;
}

.counties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.county-card {
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff;
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    font-size: 1.3rem;
    font-weight: bold;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.county-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(30, 60, 114, 0.3);
}

/* Contact Section */
.contact {
    padding: 5rem 0;
    background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
}

.contact h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    color: #1e3c72;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.info-card {
    background: #fff;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    text-align: center;
}

.icon-large {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: pulse-icon 2s ease-in-out infinite;
}

@keyframes pulse-icon {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.info-card h3 {
    color: #1e3c72;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.info-card a {
    color: #2a5298;
    text-decoration: none;
    font-weight: bold;
}

.phone-link {
    font-size: 1.3rem;
    display: block;
    margin: 1rem 0;
}

.info-card a:hover {
    color: #ffd700;
}

.btn-small {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    color: #fff !important;
    border-radius: 25px;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-small:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(30, 60, 114, 0.4);
}

.map-container {
    margin-top: 3rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border-radius: 15px;
    overflow: hidden;
}

/* Footer */
footer {
    background: #1e3c72;
    color: #fff;
    padding: 2rem 0;
    text-align: center;
}

/* Floating Call Button */
.floating-call-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 25px rgba(255, 215, 0, 0.5);
    z-index: 999;
    transition: all 0.3s;
    animation: pulse-btn 2s infinite;
}

.floating-call-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 35px rgba(255, 215, 0, 0.7);
}

.phone-icon {
    font-size: 2rem;
    animation: ring 1.5s ease-in-out infinite;
}

@keyframes pulse-btn {
    0%, 100% {
        box-shadow: 0 5px 25px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 5px 35px rgba(255, 215, 0, 0.8);
    }
}

@keyframes ring {
    0%, 100% { transform: rotate(0deg); }
    10%, 30% { transform: rotate(-15deg); }
    20%, 40% { transform: rotate(15deg); }
}

footer p {
    margin: 0.5rem 0;
}

.social-links {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.social-links a {
    color: #ffd700;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.social-links a:hover {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .hero h2 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1.2rem;
    }
    
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .services-grid,
    .counties,
    .contact-info {
        grid-template-columns: 1fr;
    }
    
    .floating-call-btn {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
    }
    
    .phone-icon {
        font-size: 1.7rem;
    }
}