:root { --bg: #f7f7ff; --primary: #1450de; --navy: #102c6d; --muted: #475569; --faint: #94a3b8; }
.contact-meddle-section {padding: 0px 15px 80px 15px}
.heading-five.service-two-clint-logo-heading { padding-top: 80px; }
.svc-hero { background-color: #f7f7ff; background-image: linear-gradient(rgba(20, 80, 222, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 80, 222, 0.05) 1px, transparent 1px); background-size: 56px 56px; position: relative; overflow: hidden; padding: 35px 0 35px; }
.svc-hero-wrap { display: flex; align-items: center; flex-wrap: wrap; max-width: 1290px; margin: 0 auto; width: 100%; }
.svc-hero-content { padding-right: 32px; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 80, 222, 0.07); border: 1px solid rgba(20, 80, 222, 0.22); border-radius: 50px; padding: 6px 16px; font-size: 12.5px; color: var(--primary); font-weight: 500; letter-spacing: 0.03em; margin-bottom: 1.4rem; text-transform: uppercase; }
.badge-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 7px rgba(20, 80, 222, 0.6); animation: pulse-dot 1.8s ease-in-out infinite; }
.svc-hero-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.72; max-width: 460px; margin-top: 1.2rem; margin-bottom: 0; }
.svc-hero-visual { display: flex; align-items: center; justify-content: center; }
.svc-canvas-wrap { width: 100%; display: flex; justify-content: end; }
h1 { margin: auto; }
.t-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--navy) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-accent { background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.72); } }
@media (max-width: 767px) { .svc-hero { padding: 52px 0 44px; } .svc-hero-content { padding-right: 10px; margin-bottom: 24px; } }
@media (min-width: 1310px) { .w-col { padding: 0 !important; } }
.ct-wrap { position: relative; width: 435px; animation: ct-wrap-in 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
@keyframes ct-wrap-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.ct-card { background: #fff; border-radius: 18px; border: 1px solid rgba(20, 80, 222, 0.12); box-shadow: 0 8px 40px rgba(20, 80, 222, 0.09), 0 2px 8px rgba(0,0,0,0.04); overflow: hidden; }
.ct-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, var(--primary) 0%, var(--navy) 100%); }
.ct-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ct-hname { font-size: 13px; font-weight: 700; color: #fff; }
.ct-hstatus { font-size: 10.5px; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 5px; }
.ct-online-dot { width: 6px; height: 6px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 0 2px rgba(74,222,128,0.3); animation: ct-online-pulse 2s ease-in-out infinite; }
@keyframes ct-online-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(74,222,128,0.3); } 50% { box-shadow: 0 0 0 5px rgba(74,222,128,0.08); } }
.ct-body { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 10px; height: 380px; overflow: hidden; }
.ct-sender { font-size: 10px; font-weight: 600; color: #94a3b8; margin-bottom: 2px; padding-left: 2px; }
.ct-row { display: flex; opacity: 0; }
.ct-row-right { justify-content: flex-end; }
.ct-row-left { justify-content: flex-start; }
.ct-bubble { max-width: 80%; padding: 8px 13px; border-radius: 14px; font-size: 12.5px; line-height: 1.5; }
.ct-bubble-user { background: linear-gradient(135deg, var(--primary) 0%, var(--navy) 100%); color: #fff; border-bottom-right-radius: 4px; }
.ct-bubble-zl { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; }
.ct-dots { display: flex; align-items: center; gap: 4px; padding: 10px 14px; }
.ct-dots span { display: inline-block; width: 6px; height: 6px; background: #94a3b8; border-radius: 50%; animation: dot-bounce 1.1s ease-in-out infinite; }
.ct-dots span:nth-child(2) { animation-delay: 0.18s; }
.ct-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes dot-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
@keyframes ct-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ct-show { to { opacity: 1; max-height: 60px; } }
@keyframes ct-hide { to { opacity: 0; max-height: 0; height: 0; padding: 0; margin: -5px 0 0; overflow: hidden; } }
.ct-m1 { animation: ct-msg-in 0.4s cubic-bezier(0.16,1,0.3,1) 0.5s both; }
.ct-typing-1 { max-height: 0; animation: ct-show 0.3s ease 0.9s forwards, ct-hide 0.15s ease 1.4s forwards; }
.ct-m2 { animation: ct-msg-in 0.4s cubic-bezier(0.16,1,0.3,1) 1.5s both; }
.ct-m3 { animation: ct-msg-in 0.4s cubic-bezier(0.16,1,0.3,1) 1.9s both; }
.ct-typing-2 { max-height: 0; animation: ct-show 0.3s ease 2.3s forwards, ct-hide 0.15s ease 2.8s forwards; }
.ct-m4 { animation: ct-msg-in 0.4s cubic-bezier(0.16,1,0.3,1) 2.9s both; }
.ct-m5 { animation: ct-msg-in 0.4s cubic-bezier(0.16,1,0.3,1) 3.3s both; }
.ct-typing-3 { max-height: 0; animation: ct-show 0.3s ease 3.7s forwards, ct-hide 0.15s ease 4.2s forwards; }
.ct-m6 { animation: ct-msg-in 0.4s cubic-bezier(0.16,1,0.3,1) 4.3s both; }
.ct-m7 { animation: ct-msg-in 0.4s cubic-bezier(0.16,1,0.3,1) 4.7s both; }
.ct-mail-btn { display: inline-flex; align-items: center; gap: 7px; background: #f1f5f9; color: #1e293b !important; border: 1px solid rgba(20, 80, 222, 0.18); padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; animation: ct-btn-float 2.8s ease-in-out 3.5s infinite; }
.ct-sched-btn { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--primary) 0%, var(--navy) 100%); color: #fff !important; padding: 9px 16px; border-radius: 10px; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; animation: ct-btn-float 2.8s ease-in-out 4.0s infinite; }
@keyframes ct-btn-float { 0%, 100% { transform: translateY(0);} 50% { transform: translateY(-5px);} }
.ct-badge { position: absolute; bottom: -12px; right: -8px; background: var(--primary); color: #fff; border-radius: 12px; padding: 10px 16px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 8px 24px rgba(20, 80, 222, 0.38); z-index: 2; animation: ct-badge-in 0.5s cubic-bezier(0.34,1.56,0.64,1) 1.5s both, ct-badge-bob 3.5s ease-in-out 2s infinite; }
@keyframes ct-badge-in { from { opacity: 0; transform: scale(0.65) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes ct-badge-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ct-badge-num { font-size: 17px; font-weight: 800; line-height: 1; }
.ct-badge-txt { font-size: 10px; font-weight: 500; opacity: 0.88; white-space: nowrap; }
@media (max-width: 992px) { .svc-canvas-wrap { justify-content: center; } }
@media (max-width: 767px) { .ct-body { height: 390px; } }
.ctf-section { background: #ffffff; padding: 80px 10px 0; }
.ctf-wrapper { max-width: 1290px; margin: 0 auto; display: flex; gap: 40px; align-items: flex-start; }
.ctf-left { flex: 1 1 0; min-width: 0; max-width: 640px; }
.ctf-badge { margin-bottom: 20px; }
.ctf-heading { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; color: #102c6d; line-height: 1.2; margin: 0 0 16px; }
.ctf-grad { background: linear-gradient(135deg, #1450de, #102c6d); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ctf-sub { color: #475569; font-size: 1rem; line-height: 1.7; margin: 0 0 32px; }
.ctf-sub strong { color: #1450de; }
.ctf-form { background: #ffffff; border: 1px solid rgba(20,80,222,0.12); border-radius: 16px; padding: 28px; box-shadow: 0 4px 24px rgba(20,80,222,0.08); }
.ctf-row { display: flex; gap: 14px; margin-bottom: 14px; }
.ctf-field { flex: 1; display: flex; align-items: center; background: #f1f5f9; border: 1.5px solid rgba(20,80,222,0.10); border-radius: 10px; overflow: hidden; transition: border-color 0.22s ease; min-width: 0; }
.ctf-field:focus-within { border-color: #1450de; background: #f8f9ff; }
.ctf-field-icon { display: flex; align-items: center; padding: 0 10px 0 14px; color: #94a3b8; flex-shrink: 0; }
.ctf-field input, .ctf-field select { flex: 1; border: none; background: transparent; outline: none; padding: 13px 14px 13px 0; font-size: 0.9rem; color: #102c6d; width: 100%; min-width: 0; }
.ctf-field input::placeholder { color: #94a3b8; }
.ctf-field select { appearance: none; -webkit-appearance: none; cursor: pointer; color: #94a3b8; }
.ctf-field select.ctf-has-value { color: #000000; }
.ctf-field select option { color: #102c6d; }
.ctf-select-wrap { position: relative; }
.ctf-select-arrow { display: flex; align-items: center; padding-right: 12px; color: #94a3b8; pointer-events: none; flex-shrink: 0; }
.ctf-phone-field { overflow: visible; padding: 0; border: none; background: transparent; }
.ctf-phone-field .iti { width: 100%; border: 1.5px solid rgba(20,80,222,0.10); border-radius: 10px; overflow: visible; background: #f1f5f9; transition: border-color 0.22s ease; }
.ctf-phone-field .iti--allow-dropdown.iti--separate-dial-code .iti__selected-flag { background: transparent; border-right: 1px solid rgba(20,80,222,0.10); }
.ctf-phone-field .iti input { background: transparent; border: none; outline: none; padding: 13px 14px; font-size: 0.9rem; color: #102c6d; width: 100%; }
.ctf-phone-field .iti input::placeholder { color: #94a3b8; }
.ctf-phone-field:focus-within .iti { border-color: #1450de; background: #f8f9ff; }
.ctf-textarea-wrap { align-items: flex-start; margin-bottom: 16px; }
.ctf-textarea-wrap .ctf-field-icon { padding-top: 14px; align-self: flex-start; }
.ctf-textarea-wrap textarea { flex: 1; border: none; background: transparent; outline: none; padding: 13px 14px 13px 0; font-size: 0.9rem; color: #102c6d; resize: vertical; min-height: 110px; width: 100%; font-family: inherit; }
.ctf-textarea-wrap textarea::placeholder { color: #94a3b8; }
.ctf-submit-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin: 4px 0 0; background: linear-gradient(135deg, #1450de, #102c6d); color: #fff; font-size: 0.95rem; font-weight: 700; border: none; border-radius: 10px; padding: 13px 32px; cursor: pointer; text-decoration: none; transition: opacity 0.22s ease, transform 0.22s ease; box-shadow: 0 4px 16px rgba(20,80,222,0.25); }
.ctf-submit-btn:hover { opacity: 0.9; transform: translateY(-2px); color: #fff; }
.ctf-submit-btn:disabled { opacity: 0.8; transform: none; cursor: not-allowed; }
@keyframes ctf-spin { to { transform: rotate(360deg); } }
.ctf-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #ffffff; border-radius: 50%; animation: ctf-spin 0.7s linear infinite; vertical-align: middle; margin-right: 4px; }
.ctf-trust { display: flex; align-items: center; justify-content: flex-start; gap: 7px; font-size: 0.8rem; color: #94a3b8; margin-top: 14px; }
.ctf-right { flex: 0 0 480px; max-width: 480px; margin-left: auto; }
.ctf-panel { background: #F7F7FF; border: 1px solid rgba(20,80,222,0.12); border-radius: 16px; padding: 32px; box-shadow: 0 4px 24px rgba(20,80,222,0.08); }
.ctf-panel-h { font-size: 1.45rem; font-weight: 800; color: #102c6d; margin: 0 0 8px; }
.ctf-panel-sub { font-size: 0.9rem; color: #475569; line-height: 1.6; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(20,80,222,0.08); }
.ctf-services { display: flex; flex-direction: column; margin-bottom: 24px; }
.ctf-svc { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-bottom: 1px solid rgba(20,80,222,0.08); }
.ctf-svc:last-child { border-bottom: none; padding-bottom: 0; }
.ctf-svc-icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(20,80,222,0.06); display: flex; align-items: center; justify-content: center; color: #1450de; flex-shrink: 0; }
.ctf-svc-title { font-size: 0.9rem; font-weight: 700; color: #102c6d; margin-bottom: 2px; }
.ctf-svc-desc { font-size: 0.8rem; color: #64748b; }
.ctf-consult-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 10px; border: none; color: #fff; background: linear-gradient(135deg, #1450de, #102c6d); border-radius: 10px; padding: 13px 28px; font-size: 0.9rem; font-weight: 700; text-decoration: none; transition: opacity 0.22s ease, transform 0.22s ease; box-shadow: 0 4px 16px rgba(20,80,222,0.25); }
.ctf-consult-btn:hover { opacity: 0.9; transform: translateY(-2px); color: #fff; }
.ctf-no-commit { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.78rem; color: #94a3b8; margin-bottom: 20px; }
.ctf-stats { display: flex; gap: 10px; }
.ctf-stat { flex: 1; background: rgba(20,80,222,0.05); border-radius: 10px; padding: 14px 8px; text-align: center; }
.ctf-stat-icon { color: #1450de; margin-bottom: 6px; display: flex; justify-content: center; }
.ctf-stat-n { font-size: 1rem; font-weight: 800; color: #102c6d; line-height: 1; margin-bottom: 4px; }
.ctf-stat-l { font-size: 0.7rem; color: #64748b; line-height: 1.3; }
.ctf-bar { max-width: 1290px; margin: 40px auto 0; display: flex; border-top: 1px solid rgba(20,80,222,0.10); }
.ctf-bar-item { flex: 1; display: flex; align-items: center; gap: 14px; padding: 26px 20px; border-right: 1px solid rgba(20,80,222,0.10); }
.ctf-bar-item:last-child { border-right: none; }
.ctf-bar-icon { width: 46px; height: 46px; border-radius: 10px; background: rgba(20,80,222,0.06); display: flex; align-items: center; justify-content: center; color: #1450de; flex-shrink: 0; }
.ctf-bar-label { font-size: 0.78rem; color: #64748b; margin-bottom: 3px; }
.ctf-bar-val { font-size: 0.9rem; font-weight: 700; color: #102c6d; text-decoration: none; display: block; }
.ctf-bar-val:hover { color: #1450de; }
@media (max-width: 1100px) { .ctf-right { flex: 0 0 400px; max-width: 400px; } }
@media (max-width: 900px) { .ctf-wrapper { flex-direction: column; align-items: stretch; } .ctf-left { max-width: 100%; width: 100%; text-align: center; } .ctf-badge { margin-left: auto; margin-right: auto; } .ctf-sub { margin-left: auto; margin-right: auto; } .ctf-trust { justify-content: center; } .ctf-right { flex: unset; max-width: 100%; width: 100%; margin-left: 0; } .ctf-panel { width: 100%; box-sizing: border-box; } .ctf-bar { flex-direction: column; } .ctf-bar-item { border-right: none; border-bottom: 1px solid rgba(20,80,222,0.10); } .ctf-bar-item:last-child { border-bottom: none; } }
@media (max-width: 600px) { .ctf-row { flex-direction: column; } .ctf-form { padding: 20px; } .ctf-panel { padding: 20px; } .ctf-stats { gap: 8px; } .ctf-section { padding: 48px 16px 0; } .ctf-submit-btn { width: 100%; } }