.elementor-506 .elementor-element.elementor-element-30a258f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-7f726ea *//* =========================================================
   GLOBAL WRAPPER & TYPOGRAPHY
   ========================================================= */
.contact-page-wrapper {
    background-color: #011032;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    overflow: hidden;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.tech-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* Buttons */
.bold-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-family: 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: 1px; text-decoration: none !important; transition: all 0.4s ease; }
.btn-neon { background-color: #00f2ff; color: #011032 !important; border: 2px solid #00f2ff; }
.btn-neon:hover { background-color: transparent !important; color: #00f2ff !important; box-shadow: 0 0 20px rgba(0, 242, 255, 0.6) !important; transform: translateY(-3px) !important; }

/* =========================================================
   SECTION 1: HERO HEADER
   ========================================================= */
.contact-hero-section {
    padding: 100px 0 40px;
    text-align: center;
    background: radial-gradient(circle at top, #011a4a 0%, #011032 70%);
}
.neon-subtitle { color: #00f2ff; letter-spacing: 3px; font-size: 15px; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; }
.main-tech-title { font-size: 48px; font-weight: 900; color: #ffffff !important; line-height: 1.2; margin-bottom: 25px; text-shadow: 0 0 20px rgba(0, 242, 255, 0.3); }
.contact-lead-text { color: #ccd6f6; font-size: 18px; line-height: 1.8; max-width: 800px; margin: 0 auto; }

/* =========================================================
   SECTION 2: SPLIT LAYOUT (DARK INFO + LIGHT FORM)
   ========================================================= */
.contact-split-section { padding: 40px 0 100px; }
.contact-split-grid { display: grid !important; grid-template-columns: 1fr 1.3fr !important; gap: 60px !important; align-items: stretch !important; }

/* Left Side (Dark) */
.contact-info-dark { display: flex; flex-direction: column; justify-content: center; gap: 15px; }
.side-heading { font-size: 24px; color: #fff; font-weight: 700; margin-bottom: 5px; }
.side-text { color: #8892b0; font-size: 16px; margin-bottom: 25px; line-height: 1.6; }

.dark-contact-card {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 20px 25px !important;
    border-radius: 12px !important;
    display: flex !important; align-items: center !important; gap: 20px !important;
    transition: all 0.3s ease;
}
.dark-contact-card:hover { border-color: #00f2ff !important; background: rgba(0, 242, 255, 0.03) !important; transform: translateX(10px); }

.dark-icon {
    width: 50px !important; height: 50px !important;
    background: rgba(0, 242, 255, 0.1) !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: 20px !important; color: #00f2ff !important; flex-shrink: 0;
}
.dark-details h3 { font-size: 18px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 3px !important; }
.dark-details p { color: #8892b0 !important; font-size: 14px !important; margin: 0 !important; }

/* Social Icons */
.social-media-block { margin-top: 15px; padding: 25px; background: rgba(0, 242, 255, 0.02); border-radius: 12px; border: 1px dashed rgba(0, 242, 255, 0.2); }
.social-title { color: #00f2ff; font-size: 16px; font-weight: 600; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px;}
.social-icons-row { display: flex; gap: 15px; }
.social-icon { width: 45px; height: 45px; background: #011a4a; border: 1px solid rgba(0, 242, 255, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ccd6f6; font-size: 18px; transition: all 0.3s ease; text-decoration: none !important; }
.social-icon:hover { background: #00f2ff; color: #011032; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 242, 255, 0.4); }

/* Right Side (Light Form) */
.contact-form-light-box {
    background: #ffffff !important; border-radius: 16px !important; padding: 50px 45px !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important; border-top: 4px solid #00f2ff !important;
}
.form-title-dark { font-size: 32px !important; font-weight: 800 !important; color: #011032 !important; margin-bottom: 10px !important; }
.form-subtitle-dark { color: #666 !important; font-size: 15px !important; margin-bottom: 35px !important; }

.tech-contact-form { display: flex; flex-direction: column; gap: 20px; }
.light-input-group input, .light-input-group select, .light-input-group textarea {
    width: 100% !important; background: #fcfcfc !important; border: 1px solid #dcdcdc !important; color: #333 !important; font-family: 'Poppins', sans-serif !important; font-size: 15px !important; padding: 18px 20px !important; border-radius: 8px !important; outline: none !important; box-sizing: border-box !important; transition: 0.3s;
}
.light-input-group select { appearance: none !important; cursor: pointer !important; color: #555 !important; }
.light-input-group input:focus, .light-input-group select:focus, .light-input-group textarea:focus { border-color: #00f2ff !important; box-shadow: 0 0 0 4px rgba(0, 242, 255, 0.1) !important; background: #ffffff !important; }

.form-submit-btn { width: 100% !important; padding: 20px !important; font-size: 16px !important; border-radius: 8px !important; margin-top: 10px !important; cursor: pointer !important; }

/* =========================================================
   SECTION 3: WHAT HAPPENS NEXT (PROCESS)
   ========================================================= */
.contact-process-section { padding: 80px 0 100px; background-color: #010a1c; border-top: 1px solid rgba(0, 242, 255, 0.1); }
.process-main-title { text-align: center; color: #00f2ff; font-size: 32px; font-weight: 800; margin-bottom: 50px; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

.process-step { background: rgba(255,255,255,0.02); padding: 40px 30px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05); text-align: center; transition: 0.3s; }
.process-step:hover { background: rgba(0, 242, 255, 0.03); border-color: rgba(0, 242, 255, 0.2); transform: translateY(-5px); }

.step-number { font-size: 40px; font-weight: 900; color: transparent; -webkit-text-stroke: 1px #00f2ff; margin-bottom: 15px; }
.step-title { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 15px; }
.step-text { color: #8892b0; font-size: 15px; line-height: 1.6; }

/* =========================================================
   MOBILE RESPONSIVENESS
   ========================================================= */
@media (max-width: 991px) {
    .contact-split-grid { grid-template-columns: 1fr !important; gap: 50px !important; }
    .process-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .tech-container { padding: 0 20px; }
    .main-tech-title { font-size: 36px !important; }
    .contact-form-light-box { padding: 35px 25px !important; }
}/* End custom CSS */