* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Inter, Arial, sans-serif;
        }

        body {
            background: #f8fafc;
            color: #0f172a;
            line-height: 1.7;
        }

        /* HEADER */

        header {

            background: #020617;

            padding: 20px 8%;

            display: flex;

            justify-content: space-between;

            align-items: center;

            position: sticky;

            top: 0;

            z-index: 1000;

        }

        .logo {

            font-size: 30px;

            font-weight: bold;

            color: #4ade80;

        }

        nav a {

            color: white;

            text-decoration: none;

            margin-left: 25px;

            transition: .3s;

        }

        nav a:hover {

            color: #4ade80;

        }

        /* HERO */

        .hero {

            padding: 80px 20px;

            text-align: center;

            background: linear-gradient(135deg, #2563eb, #22c55e);

            color: white;

        }

        .hero h1 {

            font-size: 52px;

            margin-bottom: 20px;

        }

        .hero p {

            font-size: 20px;

            opacity: .9;

        }

        /* CONTACT */

        .container {

            max-width: 1200px;

            margin: 70px auto;

            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 50px;

            padding: 0 20px;

        }

        .card {

            background: white;

            padding: 40px;

            border-radius: 25px;

            box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

        }

        .card h2 {

            margin-bottom: 25px;

            color: #2563eb;

        }

        .info {

            margin-bottom: 25px;

        }

        .info strong {

            display: block;

            margin-bottom: 5px;

        }

        .info p {

            color: #64748b;

        }

        form {

            display: flex;

            flex-direction: column;

            gap: 20px;

        }

        input,
        textarea {

            padding: 16px;

            border-radius: 12px;

            border: 1px solid #cbd5e1;

            font-size: 16px;

            outline: none;

        }

        textarea {

            height: 160px;

            resize: none;

        }

        button {

            padding: 18px;

            background: linear-gradient(135deg, #2563eb, #22c55e);

            border: none;

            color: white;

            font-size: 18px;

            font-weight: bold;

            border-radius: 15px;

            cursor: pointer;

            transition: .3s;

        }

        button:hover {

            transform: translateY(-3px);

        }

        /* FAQ */

        .faq {

            max-width: 1100px;

            margin: 70px auto;

            padding: 0 20px;

        }

        .faq h2 {

            text-align: center;

            font-size: 42px;

            margin-bottom: 40px;

        }

        details {

            background: white;

            padding: 20px;

            margin-bottom: 20px;

            border-radius: 15px;

            box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

        }

        summary {

            font-weight: bold;

            font-size: 18px;

            cursor: pointer;

        }

        /* MAP */

        .map {

            margin-top: 30px;

            height: 280px;

            background: #e2e8f0;

            display: flex;

            justify-content: center;

            align-items: center;

            border-radius: 20px;

            font-size: 22px;

            color: #64748b;

        }

        /* FOOTER */

        footer {

            margin-top: 80px;

            background: #020617;

            color: white;

            padding: 50px 20px;

            text-align: center;

        }

        footer a {

            color: #93c5fd;

            text-decoration: none;

            margin: 0 15px;

        }

        footer p {

            margin-top: 20px;

            color: #94a3b8;

        }

        /* MOBILE */

        @media(max-width:900px) {

            .container {

                grid-template-columns: 1fr;

            }

            .hero h1 {

                font-size: 38px;

            }

        }