/* ===============================
           RESET
        =============================== */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        /* ===============================
           BODY
        =============================== */

        body {
            background: #030405;
            color: #ffffff;
            font-family: "Montserrat", sans-serif;


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

            overflow-x: hidden;
        }


        /* ===============================
           MAIN WRAPPER
        =============================== */

        .maintenance-page {
            width: 100%;
            padding-top: 75px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

        
        }


        /* ===============================
           LOGO SECTION
        =============================== */

        .logo-section {
            text-align: center;
            margin-bottom: 12px;
        }

        .logo-section img {
            width: 145px;
            max-width: 100%;
            margin-bottom: 10px;
        }


        /* ===============================
           TAGLINE
        =============================== */

        .tagline {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;

            width: 100%;
            margin-bottom: 48px;
        }

        .tagline-line {
            width: 55px;
            height: 2px;

            background: linear-gradient(
                90deg,
                transparent,
                #a000b8
            );
        }

        .tagline-line.right {
            background: linear-gradient(
                90deg,
                #a000b8,
                transparent
            );
        }

        .tagline p {
            color: #d5d5d5;
            font-size: 17px;
            font-weight: 500;
            white-space: nowrap;
        }


        /* ===============================
           MAINTENANCE CONTENT
        =============================== */

        .maintenance-content {
            text-align: center;
        }

        .maintenance-content h3 {
            font-size: 25px;
            font-weight: 700;
            letter-spacing: 1px;

            margin-bottom: 8px;
        }

        .maintenance-content h1 {
            font-size: 42px;
            font-weight: 700;
            letter-spacing: 1px;

            margin-bottom: 12px;
        }

        .maintenance-content .description {
            font-size: 13px;
            color: #bcbcbc;
            font-weight: 600;

            margin-bottom: 8px;
        }

        .thank-you {
            font-family: "Playwrite IN", cursive;

            font-size: 16px;
            color: #850092;

            margin-bottom: 36px;
        }


        /* ===============================
           CONTACT CARD
        =============================== */

        .contact-card {
            width: 100%;
            max-width: 900px;

            background:
                linear-gradient(
                    90deg,
                    rgba(40, 0, 45, 0.9),
                    rgba(28, 0, 32, 0.85)
                );

            border-radius: 20px;

            padding: 17px 35px;

            display: grid;
            grid-template-columns: repeat(4, 1fr);

            gap: 25px;

            margin-bottom: 30px;
        }


        /* ===============================
           CONTACT ITEM
        =============================== */

        .contact-item {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .contact-icon {
            width: 28px;
            height: 28px;

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

            color: #8f009f;
            font-size: 20px;
        }

        .contact-text h4 {
            color: #9b1ca8;

            font-size: 13px;
            font-weight: 600;

            margin-bottom: 6px;
        }

        .contact-text p,
        .contact-text a {
            color: #d0d0d0;

            font-size: 13px;
            font-weight: 500;

            text-decoration: none;
            white-space: nowrap;
        }

        .contact-text a:hover {
            color: #b800d1;
        }


        /* ===============================
           FOLLOW US
        =============================== */

        .follow-section {
            text-align: center;

            margin-bottom: 40px;
        }

        .follow-title {
            display: flex;
            align-items: center;
            justify-content: center;

            gap: 15px;

            margin-bottom: 14px;
        }

        .follow-line {
            width: 80px;
            height: 1px;

            background: linear-gradient(
                90deg,
                transparent,
                #750080
            );
        }

        .follow-line.right {
            background: linear-gradient(
                90deg,
                #750080,
                transparent
            );
        }

        .follow-title span {
            font-size: 13px;
            font-weight: 600;

            color: #c7c7c7;

            white-space: nowrap;
        }


        /* ===============================
           SOCIAL ICONS
        =============================== */

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 18px;
        }

        .social-icons a {
            color: #870096;

            font-size: 19px;

            transition: 0.3s ease;
        }

        .social-icons a:hover {
            color: #d000ef;

            transform: translateY(-4px);
        }


        /* ===============================
           FOOTER
        =============================== */

        .footer {
            text-align: center;
        }

        .footer p {
            color: #a9a9a9;

            font-size: 13px;
            font-weight: 600;
        }


        /* ===============================
           TABLET
        =============================== */

        @media (max-width: 900px) {

            .contact-card {
                grid-template-columns: repeat(2, 1fr);
                max-width: 650px;
            }

        }


        /* ===============================
           MOBILE
        =============================== */

        @media (max-width: 600px) {

            .maintenance-page {
                padding: 35px 18px;
                justify-content: flex-start;
            }


            /* Logo */

            .logo-section {
                margin-top: 20px;
            }

            .logo-section img {
                width: 125px;
            }


            /* Tagline */

            .tagline {
                gap: 10px;
                margin-bottom: 42px;
            }

            .tagline-line {
                width: 25px;
            }

            .tagline p {
                font-size: 12px;
            }


            /* Heading */

            .maintenance-content h3 {
                font-size: 19px;
            }

            .maintenance-content h1 {
                font-size: 31px;
                line-height: 1.2;
            }

            .maintenance-content .description {
                font-size: 11px;
                line-height: 1.6;

                max-width: 300px;
                margin-left: auto;
                margin-right: auto;
            }

            .thank-you {
                font-size: 12px;
                margin-bottom: 30px;
            }


            /* Contact Card */

            .contact-card {
                grid-template-columns: 1fr;

                padding: 25px;

                gap: 22px;

                border-radius: 18px;

                max-width: 380px;
            }

            .contact-item {
                justify-content: flex-start;
            }


            /* Follow */

            .follow-section {
                margin-bottom: 25px;
            }

            .follow-line {
                width: 50px;
            }


            /* Footer */

            .footer p {
                font-size: 10px;
                line-height: 1.6;
            }

        }


        /* ===============================
           SMALL MOBILE
        =============================== */

        @media (max-width: 380px) {

            .tagline p {
                font-size: 10px;
            }

            .maintenance-content h1 {
                font-size: 27px;
            }

            .contact-card {
                padding: 22px 18px;
            }

        }