body {

            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #fff;
            margin: 0;
            padding: 0;
            width: 100%;
            overflow-x: hidden;

        }

        .contact-hero {
            position: relative;
            height: 80vh;
            background: url("asset/banner/contact2.jpg") center/cover no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }



        .contact-hero .hero-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
        }


        .hero-text {
            position: relative;
            max-width: 900px;
            padding: 0 20px;
            z-index: 2;
        }

        .hero-text h1 {
            font-size: 2vw;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 15px;
            color: #ff4d4d;
        }


        .hero-text p {
            font-size: 1.2vw;
            line-height: 1.6;
            color: #eee;
            margin: 0;
        }


        /* ===== FORM SECTION ===== */


        .testdrive-form {
            max-width: 1150px;
            min-width: 400px;
            margin: 1vw auto;
            padding: 1vw 3vw;
            background: #faf7f4;
            color: #111;
        }

        .testdrive-form h1 {
            text-align: center;
            font-size: 1.6vw;
            margin-bottom: 1vw;
        }

        /* GRID */

        .form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1vw 2vw;
        }

        /* FIELD */

        .field label {
            display: block;
            font-size: 1vw;
            font-weight: 600;
            margin-bottom: 0.2vw;
        }

        .field input,
        .field select,
        .field textarea {
            width: 100%;
            padding: 0.2vw 0.4vw;
            font-size: 0.8vw;
            border: 0.12vw solid #ddd;
            border-radius: 0.3vw;
            outline: none;
        }

        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            border-color: #111;
        }

        /* RADIO */

        .radio-group {
            display: flex;
            gap: 1vw;
            margin-top: 0.4vw;
        }

        .radio-group label {
            font-size: 1vw;
        }

        /* OTP */

        .otp-row {
            display: flex;
            gap: 1vw;
        }

        .send-otp {
            padding: 0.2vw 0.4vw;
            font-size: 0.7vw;
            background: #556b82;
            color: white;
            border: none;
            cursor: pointer;
        }

        /* TEXTAREA */

        .field textarea {
            grid-column: span 2;
            height: 2vw;
            resize: none;
        }

        /* TERMS */

        .terms {
            margin-top: 0.5vw;
            font-size: 0.6vw;
        }

        /* SUBMIT */

        .submit-btn {
            display: block;
            margin: 1vw auto 0;
            padding: 0.4vw 0.8vw;
            font-size: 1.1vw;
            background: #001f3f;
            color: white;
            border: none;
            cursor: pointer;
        }

        /* MAP */

        .contact-map {
            max-width: 1150px;
            margin: 60px auto;
            padding: 0 20px;
        }

        .contact-map iframe {
            width: 100%;
            height: 420px;
            border-radius: 18px;
            border: none;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
        }

        .contact-map h2 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.6vw;
            color: #111;
        }




        /* FAQ */

  
         .contact-faq{
            text-align: center;
         }
        .faq-accordion {
            max-width: 900px;
            margin: 0 auto;
        }

        .faq-item {
            background: white;
            border-radius: 16px;
            margin-bottom: 18px;
            overflow: hidden;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
        }

        /* QUESTION */

        .faq-question {
            width: 100%;
            background: none;
            border: none;
            outline: none;
            padding: 22px 26px;

            font-size: 1.1vw;
            font-weight: 600;

            display: flex;
            justify-content: space-between;
            align-items: center;

            cursor: pointer;
            text-align: left;
        }

        .faq-question span {
            font-size: 1.8vw;
            transition: transform 0.3s ease;
        }



        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease;
            background: #fafafa;
        }

        .faq-answer p {
            padding: 18px 26px;
            margin: 0;
            color: #333;
        }

        /* ACTIVE */

        .faq-item.active .faq-answer {
            max-height: 300px;
        }

        .faq-item.active .faq-question span {
            transform: rotate(45deg);
        }

            /* Footer CSS*/
        .footer {
            background: #3b3b3b;
            color: #fff;
            padding: 60px 80px;
        }

        .footer-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 40px;
        }

        .footer-col h4,
        .footer-col h3 {
            margin-bottom: 20px;
            font-size: 18px;
        }

        .footer-col p {
            opacity: 0.8;
            font-size: 14px;
        }

        .footer-col ul {
            list-style: none;
            padding: 0;
        }

        .footer-col ul li {
            margin-bottom: 12px;
            font-size: 14px;
            cursor: pointer;
            opacity: 0.85;
            transition: 0.3s;
        }

        .footer-col ul li:hover {
            opacity: 1;
            transform: translateX(5px);
        }

        .brand {
            color: #ff4d4d;
            font-size: 22px;
        }

        .social li {
            display: flex;
            align-items: center;
        }




        @media (max-width: 880px) {

            /* HERO TEXT */

            .hero-text h1 {
                font-size: 7vw;
            }

            .hero-text p {
                font-size: 3.8vw;
                line-height: 1.5;
            }

            /* FORM */

            .testdrive-form {
                width: 92vw;
                min-width: unset;
                padding: 4vw;
            }

            .testdrive-form h1 {
                font-size: 5vw;
            }

            .form-grid {
                grid-template-columns: 1fr;
                gap: 4vw;
            }

            .field label {
                font-size: 3.2vw;
            }

            .field input,
            .field select,
            .field textarea {
                font-size: 3vw;
                padding: 2.5vw;
                border-radius: 2vw;
            }

            .radio-group label {
                font-size: 3vw;
            }

            .send-otp {
                font-size: 2.8vw;
                padding: 2vw 3vw;
            }

            .terms {
                font-size: 2.6vw;
            }

            .submit-btn {
                font-size: 4vw;
                padding: 3vw 6vw;
                border-radius: 8vw;
            }

            /* MAP */

            .contact-map {
                width: 92vw;
                margin: 10vw auto;
            }

            .contact-map h2 {
                font-size: 6vw;
            }

            .contact-map iframe {
                height: 55vw;
                border-radius: 4vw;
            }

            /* FAQ */
            .faq-question {
                font-size: 4vw;
                padding: 18px;
            }

            .faq-question span {
                font-size: 6vw;
            }

            .faq-answer p {
                font-size: 3.4vw;
            }
                  .footer {
                padding: 40px 16px;
            }

            .footer-col {
                text-align: left;
                padding-left: 40px;
            }

            .footer-col h3,
            .footer-col h4 {
                font-size: 18px;
                margin-bottom: 12px;
            }

            .footer-col p {
                font-size: 14px;
            }

            .footer-col ul li {
                font-size: 14px;
                margin-bottom: 10px;
            }

            .social li {
                font-size: 14px;
            }

            .footer-container {
                display: flex;
                flex-direction: column;
                gap: 32px;
            }
        }