* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
           
        }
        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', sans-serif;
            color: #333;
        }
        .contact-hero-area {
	position: relative;
	height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
        .contact-hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .contact-hero-content {
            position: relative;
            z-index: 2;
            max-width: 1500px;
            width: 100%;
            margin: 0 auto;
            padding: 0 20px;
            text-align: left;
        }
        .contact-hero-content h1 {
            font-size: 48px;
            color: #000000;
            margin-bottom: 30px;
            font-weight: 400;
            font-family: 'Work Sans', sans-serif;
        }
        .contact-hero-btn {
            display: inline-block;
            padding: 12px 30px;
            background-color: rgb(255, 255, 255);
            color: #000000;
            border: 1px solid #ffffff;
            border-radius: 25px;
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        .contact-hero-btn:hover {
            background-color: #ffffff;
            color: #333333;
        }

        @media screen and (max-width: 768px) {
            .contact-hero-area {
                height: 220px;
                background-image: url(https://);
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .contact-hero-video {
                display: none;
            }
            .contact-hero-content h1 {
                font-size: 32px;
            }
        }

        @media screen and (max-width: 480px) {
            .contact-hero-content h1 {
                font-size: 26px;
            }
        }

        .contact-cards-area {
	padding: 0px 20px 60px 20px;
	background-color: #ffffff;
}
        .contact-cards-container {
            max-width: 1500px;
            margin: 0 auto;
        }
        .contact-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        .contact-card {
	background-color: #f8f9fa;
	padding: 30px 50px;
	border-radius: 12px;
	text-align: center;
	transition: all 0.3s ease;
}
        .contact-card:hover {
            box-shadow: inset 0 0 15px rgba(102, 126, 234, 0.3), inset 0 0 8px rgba(118, 75, 162, 0.2), inset 0 0 5px rgba(255, 105, 180, 0.2);

            border-color:#000000;
            color: #000000;
        }
        .contact-card .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 0 auto 15px;
            object-fit: cover;

        }
        .contact-card .name {
	font-size: 18px;
	color: #333333;
	font-weight: 700;
	margin-bottom: 8px;
}
        .contact-card:hover .name {
            color: #333333;
        }
        .contact-card .work-time {
	font-size: 14px;
	color: #999999;
	margin-bottom: 15px;
}
        .contact-card:hover .work-time {
            color: #999999;
        }
        .contact-card .qq-btn {
	border: 1px solid #333333;
	display: inline-block;
	padding: 8px 20px;
	background-color: #FFFFFF;
	color: #333333;
	border-radius: 20px;
	font-size: 16px;
	text-decoration: none;
	transition: all 0.3s ease;
}
        .contact-card:hover .qq-btn {

        }

        @media screen and (max-width: 1200px) {
            .contact-cards-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media screen and (max-width: 992px) {
            .contact-cards-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media screen and (max-width: 768px) {
            .contact-cards-area {
	padding: 5px 15px 40px 15px;
}
            .contact-cards-grid {
                grid-template-columns: 1fr;
            }
            
        }

        .address-area {
	padding: 10px 20px 60px 20px;
}
        .address-container {
            max-width: 1500px;
            margin: 0 auto;
        }
        .address-title {
            font-size: 28px;
            color: #333333;
            font-weight: 600;
            text-align: center;
            margin-bottom: 40px;
        }
        .address-content {
            display: flex;
            height: 400px;
            border-radius: 16px;
            overflow: hidden;
        }
        .address-left {
            flex: 1.8;
            background-color: #ffffff;
            background-image: url(/plugins/img/dt-left.jpg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            align-items: center;;
            padding: 40px;
            position: relative;
        }

        .address-info {
            text-align: left;
            position: relative;
            z-index: 1;
            padding-left: 70px;
        }
        .address-info p {
            font-size: 16px;
            color: #333333;
            margin-bottom: 15px;
            line-height: 1.8;
        }
        .address-info p:last-child {
            margin-bottom: 0;
        }
        .address-info span {
	font-size: 32px;
}
        .gradient-text {
            font-size:24px;
            font-weight: bold;
            text-align: center;
            background: linear-gradient(90deg, #2E5BFF 0%, #2E5BFF 35%, #9333EA 60%, #EC4899 90%, #F97316 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }


 
        @media screen and (max-width: 1050px){
            .address-content{
                height:330px;
            }
            .address-info{
                padding:20px;
            }
        }



        @media screen and (min-width: 769px) {
            .address-right {
            flex: 2;
            background-image: url(/plugins/img/contact-dt.jpg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        }
            @media screen and (max-width: 768px) {
                .address-area {
                    padding: 40px 15px;
                }
                .address-title {
                    font-size: 24px;
                    margin-bottom: 30px;
                }
                .address-content {
                    flex-direction: column;
                    height: auto;
                }
                .address-left {
                    padding: 30px 25px;
                    background-image: url();
                    background-color: #f5f5f5;
                }
                .address-info{
                    padding: unset;
                }
                .address-info p {
                    font-size: 14px;
                }

                .address-right {
            height: 250px;
            background-image: url(/plugins/img/contact-dt.jpg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
        }
            }

            .contact-service-area {
	padding: 20px 20px 60px 20px;
}
            .contact-service-container {
                max-width: 1500px;
                margin: 0 auto;
            }
            .contact-service-title {
                text-align: center;
                font-size: 32px;
                color: #333333;
                font-weight: 600;
                margin-bottom: 50px;
            }
            .contact-service-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 30px;
            }
            .contact-service-left {
                grid-column: span 2;
                background-color: #ffffff;
                border-radius: 12px;
                padding: 40px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            }
            .contact-service-right {
                background-color: #ffffff;
                border-radius: 12px;
                padding: 40px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            }
            .service-phone-title {
                font-size: 18px;
                color: #333333;
                font-weight: 600;
                margin-bottom: 20px;
            }
            .service-phone-number {
	font-size: 36px;
	color: #3399FF;
	font-weight: 700;
	margin-bottom: 20px;
}
            .service-phone-desc {
                font-size: 14px;
                color: #666666;
                line-height: 1.6;
            }
            .service-online-title {
                font-size: 18px;
                color: #333333;
                font-weight: 600;
                margin-bottom: 15px;
            }
            .service-online-desc {
                font-size: 14px;
                color: #666666;
                line-height: 1.6;
                margin-bottom: 30px;
            }
            .service-submit-btn {
                display: inline-block;
                padding: 12px 30px;
                background-color: #333333;
                color: #ffffff;
                border: none;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 500;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }
            .service-submit-btn:hover {
                background-color: #555555;
                color:#fff;
            }

            @media screen and (max-width: 992px) {
                .contact-service-grid {
                    grid-template-columns: 1fr;
                }
                .contact-service-left {
                    grid-column: span 1;
                }
            }

            @media screen and (max-width: 768px) {
                .contact-service-area {
                    padding: 40px 15px;
                }
                .contact-service-title {
                    font-size: 26px;
                    margin-bottom: 35px;
                }
                .contact-service-left,
                .contact-service-right {
                    padding: 30px 20px;
                }
                .service-phone-number {
                    font-size: 28px;
                }
            }

            @media screen and (max-width: 480px) {
                .contact-service-title {
                    font-size: 22px;
                }
                .service-phone-number {
                    font-size: 24px;
                }
            }

            .faq-area {
                padding: 60px 20px;
                background-color: #ffffff;
            }
            .faq-container {
                max-width: 1500px;
                margin: 0 auto;
            }
            .faq-title {
                text-align: center;
                font-size: 32px;
                color: #333333;
                font-weight: 600;
                margin-bottom: 50px;
            }
            .faq-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 30px;
            }
            .faq-card {
                background-color: #ffffff;
                padding: 35px;
                border: 1px solid #eeeeee;
                border-radius: 8px;
            }
            .faq-card .faq-question {
	font-size: 16px;
	color: #666666;
	line-height: 2;
}

            @media screen and (max-width: 992px) {
                .faq-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            @media screen and (max-width: 768px) {
                .faq-area {
                    padding: 40px 15px;
                }
                .faq-title {
                    font-size: 26px;
                    margin-bottom: 35px;
                }
                .faq-grid {
                    grid-template-columns: 1fr;
                    gap: 20px;
                }
                .faq-card {
                    padding: 25px;
                }
            }

            @media screen and (max-width: 480px) {
                .faq-title {
                    font-size: 22px;
                }
            }
            
                .bgtop {
	background-position: center;
	background-image: url('/plugins/img/contact1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
}

        /* Cloud Services Support Area */
        .cloud-services-support-area {
            background-color: #f5f5f5;
            padding-top: 80px;
            padding-bottom: 60px;
        }

        .cloud-services-support-area .container-fluid {
            max-width: 1500px;
            margin: 0 auto;
            padding: 0 40px;
        }

        .cloud-services-support-area .section-title h2 {
            font-size: 32px;
            font-weight: 700;
            color: #1f1f1f;
            margin-bottom: 0;
        }

        .cloud-services-support-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        .cloud-services-support-right {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        .cloud-services-support-card {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 48px 40px;
            transition: all 0.3s ease;
            border: 1px solid #f0f0f0;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .main-contact-card {
            max-height: 450px;
        }

        .cloud-services-support-right .cloud-services-support-card {
            padding: 32px 28px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .cloud-services-support-card:hover,
        .main-contact-card:hover {
            box-shadow: inset 0 0 15px rgba(102, 126, 234, 0.3), inset 0 0 8px rgba(118, 75, 162, 0.2), inset 0 0 5px rgba(255, 105, 180, 0.2);
            border-color: #e0e0e0;
        }

        .support-card-icon {
            width: 48px;
            height: 44px;
            border-radius: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #ffffff;
            margin-bottom: 16px;
            background-color: transparent !important;
        }

        .support-card-icon img {
            width: 48px;
            height: 44px;
            object-fit: contain;
            border-radius: 15%;
        }

        .cloud-services-support-card h3 {
            font-size: 18px;
            font-weight: 700;
            color: #1f1f1f;
            margin: 0 0 12px 0;
        }

        .cloud-services-support-card p {
            font-size: 14px;
            color: #666666;
            margin: 0;
            line-height: 1.6;
        }

        .contact-options {
            margin-top: 32px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .contact-option-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 18px;
            background-color: #f8f8f8;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .contact-option-item:hover {
            background-color: #f0f0f0;
        }

        .contact-option-item img {
            width: 22px;
            height: 21px;
        }

        .contact-option-item span {
            flex: 1;
            font-size: 14px;
            color: #222222;
            font-weight: 600;
        }

        .contact-option-item svg.icon {
            width: 24px;
            height: 24px;
            fill: #aaaaaa;
        }

        .support-card-content-row {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
        }

        .support-card-content-row .support-card-icon {
            flex-shrink: 0;
            margin-bottom: 0;
        }

        .support-card-text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .support-card-text h3 {
            margin: 0 0 8px 0;
        }

        .support-card-text p {
            margin: 0;
        }

        @media (max-width: 1200px) {
            .cloud-services-support-grid {
                grid-template-columns: 1fr;
            }
            
            .cloud-services-support-right {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .cloud-services-support-right {
                grid-template-columns: 1fr;
            }
            
            .cloud-services-support-card {
                padding: 36px 32px;
            }
            
            .support-card-icon {
                width: 42px;
                height: 42px;
                font-size: 28px;
            }

            .cloud-services-support-card h3 {
                font-size: 16px;
                font-weight: 600;
            }
            
            .support-card-content-row {
                flex-direction: row;
                align-items: flex-start;
                gap: 16px;
            }
        }