.contact-hero {
            padding: 100px 0;
            background: linear-gradient(rgba(214, 48, 49, 0.05), rgba(243, 156, 18, 0.05));
            text-align: center;
        }

        .contact-card {
            background: #fff;
            border-radius: 40px;
            padding: 50px;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--surface-border);
            margin-top: -100px;
            position: relative;
            z-index: 10;
        }

        .form-control {
            height: 65px;
            border-radius: 11px;
            margin-top: 5px;
            border: 2px solid black;
            padding: 0 25px;
            font-family: var(--font-main);
            font-size: 16px;
            transition: 0.4s;
            background: var(--bg-soft);
        }

        .form-control:focus {
            border-color: var(--primary);
            background: #fff;
            box-shadow: 0 10px 25px var(--primary-glow);
        }

        textarea.form-control {
            height: 180px;
            padding-top: 20px;
        }

        .contact-info-item {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 40px;
        }

        .contact-circle {
            width: 70px;
            height: 70px;
            background: var(--primary);
            color: #fff;
            border-radius: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 10px 20px var(--primary-glow);
            transition: 0.4s;
        }

        .contact-info-item:hover .contact-circle {
            transform: scale(1.1) rotate(10deg);
            background: var(--secondary);
        }

        .info-text h4 {
            font-family: var(--font-heading);
            font-size: 20px;
            margin-bottom: 5px;
        }

        .info-text p {
            color: var(--text-muted);
            margin: 0;
            font-size: 17px;
        }

        .map-container {
            border-radius: 40px;
            border: 10px solid #fff;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
            width: 100%;
            /* Responsive width */
            max-width: 1400px;
            margin: 0 auto;
        }

        @media (max-width: 991px) {
            .contact-card {
                margin-top: 40px;
                padding: 30px;
            }

            .map-container {
                width: 100%;
                margin: 0;
            }
        }

        /* Typewriter Animation */
        .typewriter {
            overflow: hidden;
            border-right: .15em solid var(--secondary);
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: .10em;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
            max-width: fit-content;
        }

        @keyframes typing {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        @keyframes blink-caret {

            from,
            to {
                border-color: transparent
            }

            50% {
                border-color: var(--secondary)
            }
        }

        /* Responsive Typewriter */
        @media (max-width: 768px) {
            .typewriter {
                white-space: normal;
                border: none;
                animation: fadeIn 2s ease-in;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }