body {
            font-family: "Poppins", sans-serif;
            margin: 0;
            padding: 0;
            background: #f4f7fb;
            color: #333;
        }

        .contact {
            padding: 60px 8%;
        }

            .contact h1 {
                text-align: center;
                font-size: 2.6rem;
                margin-bottom: 40px;
                color: #222;
            }

        .contact-wrapper {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
        }

        /* LEFT PANEL */
        .contact-info {
            background: #ffffffcc;
            backdrop-filter: blur(6px);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        }

            .contact-info h2 {
                margin-bottom: 12px;
                font-size: 1.7rem;
                color: #222;
            }

            .contact-info p {
                font-size: 1rem;
                margin: 8px 0;
                line-height: 1.5;
            }

            .contact-info strong {
                color: #111;
            }

        /* MAP */
        .map-container {
            margin-top: 20px;
            border-radius: 16px;
            overflow: hidden;
            height: 260px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
        }

        /* RIGHT PANEL (FORM) */
        .contact-form {
            background: #ffffffcc;
            backdrop-filter: blur(6px);
            border-radius: 16px;
            padding: 30px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
        }

            .contact-form input,
            .contact-form select,
            .contact-form textarea {
                width: 100%;
                padding: 14px;
                margin: 10px 0;
                border-radius: 10px;
                border: 1px solid #dcdcdc;
                font-size: 1rem;
                transition: 0.3s ease;
            }

                .contact-form input:focus,
                .contact-form select:focus,
                .contact-form textarea:focus {
                    border-color: #3b82f6;
                    box-shadow: 0 0 6px rgba(59,130,246,0.3);
                    outline: none;
                }

            .contact-form button {
                width: 100%;
                padding: 14px;
                background: #3b82f6;
                color: white;
                border: none;
                border-radius: 10px;
                font-size: 1.1rem;
                cursor: pointer;
                transition: 0.3s ease;
            }

                .contact-form button:hover {
                    background: #1e63d8;
                    transform: translateY(-2px);
                }

        /* FOOTER */
        .footer {
            text-align: center;
            background: #111;
            padding: 18px;
            color: white;
            margin-top: 40px;
            font-size: 0.95rem;
        }

        /* RESPONSIVE */
        @media (max-width: 900px) {
            .contact-wrapper {
                grid-template-columns: 1fr;
            }

            .map-container {
                height: 320px;
            }
        }