/* =====================================================
           GLOBAL
        ===================================================== */

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Segoe UI", Arial, sans-serif;
            background: #ffffff;
            color: #172033;
            overflow-x: hidden;
        }

        a {
            text-decoration: none;
        }

        .text-cyan {
            color: #00a9d6 !important;
        }

        .section-padding {
            padding: 90px 0;
        }

        .section-label {
            color: #00a9d6;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .section-title {
            font-size: 44px;
            line-height: 1.2;
            font-weight: 750;
            color: #111827;
            margin-bottom: 20px;
        }

        .section-description {
            color: #667085;
            font-size: 17px;
            line-height: 30px;
        }


        /* =====================================================
           BUTTON
        ===================================================== */

        .btn-vivastar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 30px;
            border-radius: 50px;
            background: #00b8e6;
            color: #ffffff;
            font-weight: 700;
            border: 2px solid #00b8e6;
            transition: all .3s ease;
        }

        .btn-vivastar:hover {
            background: #008fba;
            border-color: #008fba;
            color: #ffffff;
            transform: translateY(-3px);
        }


        /* =====================================================
           HERO
        ===================================================== */

        .contact-hero {
            position: relative;
            min-height: 560px;
            display: flex;
            align-items: center;
            overflow: hidden;

            background:
                linear-gradient(
                    90deg,
                    rgba(247, 252, 255, .98) 0%,
                    rgba(247, 252, 255, .94) 50%,
                    rgba(247, 252, 255, .65) 100%
                ),
               url('../assets/images/img6.jpeg');

            background-size: cover;
            background-position: center;

            padding: 140px 0 80px;
        }

        .contact-hero::before {
            content: "";
            position: absolute;
            width: 450px;
            height: 450px;
            border-radius: 50%;
            background: rgba(0, 184, 230, .08);
            filter: blur(80px);
            right: -120px;
            top: -100px;
        }

        .contact-hero-content {
            position: relative;
            z-index: 2;
        }

        .contact-badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 16px;
            border-radius: 50px;
            background: rgba(0, 184, 230, .08);
            border: 1px solid rgba(0, 184, 230, .25);
            color: #008db8;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 22px;
        }

        .contact-badge i {
            color: #00a9d6;
        }

        .contact-hero h1 {
            max-width: 780px;
            font-size: 60px;
            line-height: 1.1;
            font-weight: 800;
            color: #111827;
            margin-bottom: 22px;
        }

        .contact-hero h1 span {
            color: #00a9d6;
        }

        .contact-hero p {
            max-width: 700px;
            color: #5f6c7b;
            font-size: 18px;
            line-height: 31px;
            margin-bottom: 30px;
        }


        /* =====================================================
           CONTACT SECTION
        ===================================================== */

        .contact-section {
            background: #ffffff;
        }

        .contact-info-card {
            height: 100%;
            padding: 35px;
            border-radius: 24px;
            background: #f6fafc;
            border: 1px solid #e3ebf0;
        }

        .contact-info-card h3 {
            color: #111827;
            font-size: 28px;
            font-weight: 750;
            margin-bottom: 15px;
        }

        .contact-info-card > p {
            color: #697586;
            line-height: 27px;
            margin-bottom: 30px;
        }


        /* Contact item */

        .contact-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
            padding: 18px 0;
            border-bottom: 1px solid #e2e9ee;
        }

        .contact-item:last-child {
            border-bottom: none;
        }

        .contact-item-icon {
            min-width: 48px;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 13px;
            background: #e8f9fd;
            color: #00a9d6;
            font-size: 21px;
        }

        .contact-item h6 {
            color: #172033;
            font-size: 15px;
            font-weight: 700;
            margin-bottom: 5px;
        }

        .contact-item p {
            color: #697586;
            font-size: 14px;
            line-height: 23px;
            margin: 0;
        }

        .contact-item a {
            color: #697586;
            transition: .3s;
        }

        .contact-item a:hover {
            color: #00a9d6;
        }


        /* =====================================================
           CONTACT FORM
        ===================================================== */

        .contact-form-card {
            padding: 40px;
            border-radius: 24px;
            background: #ffffff;
            border: 1px solid #e1e9ef;
            box-shadow: 0 20px 55px rgba(22, 67, 90, .08);
        }

        .contact-form-card h3 {
            color: #111827;
            font-size: 28px;
            font-weight: 750;
            margin-bottom: 10px;
        }

        .contact-form-card > p {
            color: #697586;
            line-height: 26px;
            margin-bottom: 28px;
        }

        .form-label {
            color: #344054;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .form-control,
        .form-select {
            min-height: 52px;
            border-radius: 12px;
            border: 1px solid #d9e2e8;
            padding: 12px 15px;
            color: #172033;
            background: #ffffff;
            box-shadow: none;
            transition: .3s;
        }

        textarea.form-control {
            min-height: 145px;
            resize: vertical;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #00b8e6;
            box-shadow: 0 0 0 4px rgba(0, 184, 230, .10);
        }

        .form-control::placeholder {
            color: #98a2b3;
        }


        /* =====================================================
           BUSINESS HOURS
        ===================================================== */

        .business-hours {
            margin-top: 25px;
            padding: 22px;
            border-radius: 16px;
            background: #ffffff;
            border: 1px solid #e1e9ef;
        }

        .business-hours h5 {
            color: #172033;
            font-size: 17px;
            margin-bottom: 15px;
        }

        .hours-row {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding: 8px 0;
            color: #697586;
            font-size: 14px;
        }

        .hours-row strong {
            color: #344054;
        }


        /* =====================================================
           WHY CONTACT US
        ===================================================== */

        .contact-benefits {
            background: #f6fafc;
        }

        .benefit-card {
            height: 100%;
            padding: 30px;
            border-radius: 20px;
            background: #ffffff;
            border: 1px solid #e1e9ef;
            transition: .35s ease;
        }

        .benefit-card:hover {
            transform: translateY(-7px);
            border-color: rgba(0, 184, 230, .35);
            box-shadow: 0 20px 45px rgba(24, 61, 85, .08);
        }

        .benefit-icon {
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            background: #e9faff;
            color: #00a9d6;
            font-size: 25px;
            margin-bottom: 20px;
        }

        .benefit-card h5 {
            color: #172033;
            font-size: 19px;
            margin-bottom: 10px;
        }

        .benefit-card p {
            color: #697586;
            line-height: 26px;
            margin: 0;
        }


        /* =====================================================
           CTA
        ===================================================== */

        .contact-cta {
            padding: 90px 0;
            background:
                linear-gradient(
                    135deg,
                    #e9faff,
                    #f7fbff
                );
        }

        .contact-cta-box {
            text-align: center;
            padding: 65px 45px;
            border-radius: 28px;
            background: #ffffff;
            border: 1px solid #cfeaf2;
            box-shadow: 0 20px 55px rgba(22, 67, 90, .07);
        }

        .contact-cta-box h2 {
            color: #111827;
            font-size: 43px;
            font-weight: 800;
            margin-bottom: 18px;
        }

        .contact-cta-box p {
            max-width: 700px;
            margin: 0 auto 30px;
            color: #667085;
            font-size: 17px;
            line-height: 28px;
        }


        /* =====================================================
           RESPONSIVE
        ===================================================== */

        @media (max-width: 1199px) {

            .contact-hero h1 {
                font-size: 52px;
            }

        }

        @media (max-width: 991px) {

            .contact-hero {
                text-align: center;
            }

            .contact-hero p {
                margin-left: auto;
                margin-right: auto;
            }

            .contact-info-card {
                margin-bottom: 30px;
            }

        }

        @media (max-width: 767px) {

            .section-padding {
                padding: 70px 0;
            }

            .contact-hero {
                min-height: auto;
                padding: 140px 0 80px;
            }

            .contact-hero h1 {
                font-size: 40px;
            }

            .contact-hero p {
                font-size: 16px;
                line-height: 27px;
            }

            .section-title {
                font-size: 34px;
            }

            .contact-info-card,
            .contact-form-card {
                padding: 28px;
            }

            .contact-cta-box {
                padding: 50px 25px;
            }

            .contact-cta-box h2 {
                font-size: 33px;
            }

        }

        @media (max-width: 480px) {

            .contact-hero h1 {
                font-size: 34px;
            }

            .contact-info-card,
            .contact-form-card {
                padding: 23px;
            }

            .hours-row {
                flex-direction: column;
                gap: 3px;
            }

        }
		.contact-item-icon a {
		    color: #00a9d6;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    width: 100%;
		    height: 100%;
		    text-decoration: none;
		}

		.contact-item-icon a:hover {
		    color: #008fba;
		    transform: scale(1.1);
		}
		/* =====================================================
		   GOOGLE MAP
		===================================================== */

		.contact-map-section {
		    padding: 90px 0;
		    background: #f6fafc;
		}

		.map-heading {
		    max-width: 750px;
		    margin: 0 auto 45px;
		}

		.map-heading .section-title {
		    margin-bottom: 15px;
		}

		.map-wrapper {
		    position: relative;
		    overflow: hidden;
		    border-radius: 25px;
		    border: 1px solid #dce8ee;
		    background: #ffffff;
		    box-shadow: 0 20px 55px rgba(22, 67, 90, .10);
		}

		.map-wrapper iframe {
		    display: block;
		    width: 100%;
		    min-height: 450px;
		}

		.map-button-wrapper {
		    text-align: center;
		    margin-top: 30px;
		}


		/* =====================================================
		   MAP RESPONSIVE
		===================================================== */

		@media (max-width: 767px) {

		    .contact-map-section {
		        padding: 70px 0;
		    }

		    .map-wrapper {
		        border-radius: 18px;
		    }

		    .map-wrapper iframe {
		        min-height: 350px;
		    }

		}