body {
        font-family: 'Montserrat', sans-serif;
        background-color: #f5f7fa;
        color: #333;
    }

    :root {
        --primary-color: #42a0d6;
        --secondary-color: #0D2C54;
        --accent-color: #e53945;
        --light-bg: #f8f9fa;
    }

    .primary-btn {
        background-color: var(--accent-color);
        color: white;
        transition: all 0.3s ease;
    }

    .primary-btn:hover {
        background-color: #e53945;
        transform: scale(1.05);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .pattern-bg {
        background-color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f0f0f0' fill-opacity='0.4' fill-rule='evenodd'%3E%3Cpath d='M0 20L20 0v5L5 20zm40-5V0L20 20h5L40 5zm-5 15L20 40v-5L35 20zM0 25l20 20h-5L0 25z'/%3E%3C/g%3E%3C/svg%3E");
    }

    .slide {
        display: none;
        height: 400px;
        overflow: hidden;
        border-radius: 6px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .slide.active {
        display: block;
        animation: fadeIn 0.5s ease-in;
    }

    .slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .feature-card {
        transition: all 0.3s ease;
        border-radius: 6px;
    }

    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    .fade-in {
        animation: fadeIn 0.8s ease-in;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

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

    .city-message {
        color: #e53945;
        font-weight: 500;
        opacity: 0;
        animation: fadeIn 0.5s ease-in forwards;
        animation-delay: 0.5s;
    }

    #popup {
        transition: all 0.5s ease-out;
        border-left: 3px solid var(--accent-color);
        transform: scale(0.85);
    }

    .pulse {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.03);
        }

        100% {
            transform: scale(1);
        }
    }

    .cta-section {
        background-color: var(--secondary-color);
    }

    .logo-container {
        display: flex;
        align-items: center;
    }

    .logo-circle {
        width: 2.5rem;
        height: 2.5rem;
        background-color: var(--primary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.75rem;
    }

    .logo-inner {
        width: 1.75rem;
        height: 1.75rem;
        background-color: white;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
    }

    .dollar-sign {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--primary-color);
        font-size: 1rem;
    }

    .highlight-text {
        color: var(--accent-color);
    }