.contact-hero {
position: relative;
padding: 80px 0 60px 0;
background-color: var(--bg-base);
overflow: hidden;
}
.contact-hero .hero-bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 30%, rgba(255, 107, 0, 0.05) 0%, transparent 60%);
pointer-events: none;
z-index: 1;
}
.contact-hero .container {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
} .breadcrumb-list {
list-style: none;
display: flex;
justify-content: center;
gap: 8px;
padding: 0;
margin: 0 0 20px 0;
font-size: 0.82rem;
}
.breadcrumb-item a {
color: var(--text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
}
.breadcrumb-item a:hover {
color: var(--primary);
}
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
color: var(--text-muted);
margin-right: 8px;
}
.breadcrumb-item.active {
color: var(--primary);
font-weight: 500;
}
.hero-tagline {
font-family: var(--font-heading);
color: var(--primary);
font-weight: 700;
letter-spacing: 0.15em;
font-size: 0.85rem;
display: block;
margin-bottom: 12px;
}
.hero-title {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
letter-spacing: -0.02em;
}
.hero-subtitle {
font-size: 1.05rem;
color: var(--text-secondary);
line-height: 1.6;
} .contact-form-section {
position: relative;
padding: 60px 0 100px 0;
background: #0b0b0d;
}
.section-glow-left {
position: absolute;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 107, 0, 0.04) 0%, transparent 70%);
top: 20%;
left: -200px;
pointer-events: none;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 50px;
align-items: start;
} .contact-info-panel {
max-width: 500px;
}
.info-tag {
font-family: var(--font-heading);
color: var(--primary);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
display: block;
margin-bottom: 12px;
}
.info-title {
font-size: 2.2rem;
font-weight: 800;
margin-bottom: 20px;
color: var(--text-primary);
}
.info-desc {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 40px;
}
.branches-container {
display: flex;
flex-direction: column;
gap: 24px;
}
.branch-card {
background: var(--bg-surface-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-md);
padding: 24px;
transition: all var(--transition-normal);
}
.branch-card:hover {
border-color: rgba(255, 107, 0, 0.25);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.branch-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.branch-icon {
width: 36px;
height: 36px;
background: rgba(255, 107, 0, 0.1);
color: var(--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 107, 0, 0.2);
}
.branch-header h4 {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--text-primary);
}
.branch-body p {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 6px;
}
.branch-body p:last-child {
margin-bottom: 0;
}
.branch-body strong {
color: var(--text-primary);
} .contact-form-panel {
background: var(--bg-surface-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 40px;
position: relative;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.contact-form-panel .form-title {
font-size: 1.6rem;
font-weight: 700;
margin-bottom: 8px;
}
.contact-form-panel .form-desc {
font-size: 0.92rem;
color: var(--text-secondary);
margin-bottom: 30px;
line-height: 1.5;
}
.consultation-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.input-label {
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.02em;
}
.form-input, .form-select, .form-textarea {
background: rgba(8, 8, 9, 0.5);
border: 1px solid var(--border-color);
color: var(--text-primary);
padding: 12px 16px;
font-family: var(--font-body);
font-size: 0.95rem;
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast);
outline: none;
width: 100%;
}
.form-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B5B5C0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 16px;
padding-right: 40px;
}
.form-select option {
background: var(--bg-surface-card);
color: var(--text-primary);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color: var(--border-color-active);
box-shadow: 0 0 12px rgba(255, 107, 0, 0.15);
background: rgba(8, 8, 9, 0.8);
}
.form-textarea {
resize: vertical;
} .submit-btn {
background: var(--gradient-primary);
color: var(--text-primary);
border: none;
padding: 16px;
font-family: var(--font-heading);
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.05em;
border-radius: var(--border-radius-sm);
cursor: pointer;
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(255, 107, 0, 0.25);
margin-top: 10px;
}
.submit-btn:hover {
box-shadow: 0 4px 30px var(--primary-glow);
transform: translateY(-2px);
}
.btn-glow-line {
position: absolute;
top: 0;
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: none;
}
.submit-btn:hover .btn-glow-line {
left: 150%;
transition: left 0.75s ease-in-out;
}
.loading-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: var(--text-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 10px;
display: inline-block;
}
@keyframes spin {
to { transform: rotate(360deg); }
} .map-section {
padding: 80px 0;
background: var(--bg-base);
border-top: 1px solid var(--border-color);
}
.map-section .section-header {
text-align: center;
max-width: 600px;
margin: 0 auto 40px auto;
}
.map-tabs {
display: flex;
justify-content: center;
gap: 16px;
margin-bottom: 30px;
}
.map-tab-btn {
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border-color);
color: var(--text-secondary);
padding: 10px 24px;
font-family: var(--font-heading);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.05em;
border-radius: 30px;
cursor: pointer;
transition: all var(--transition-fast);
}
.map-tab-btn:hover {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.08);
}
.map-tab-btn.active {
background: var(--gradient-primary);
border-color: transparent;
color: var(--text-primary);
box-shadow: 0 4px 15px rgba(255, 107, 0, 0.25);
}
.map-wrapper {
background: var(--bg-surface-card);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
padding: 12px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.map-iframe-container {
display: none;
border-radius: var(--border-radius-md);
overflow: hidden; filter: grayscale(1) invert(0.92) contrast(1.15) hue-rotate(200deg);
}
.map-iframe-container.active {
display: block;
animation: fadeIn var(--transition-normal);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
} @media (max-width: 1024px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.contact-info-panel {
max-width: 100%;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.5rem;
}
.contact-form-panel {
padding: 30px 20px;
}
.input-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.map-tabs {
flex-wrap: wrap;
gap: 10px;
}
.map-tab-btn {
flex: 1 1 30%;
text-align: center;
padding: 10px 16px;
font-size: 0.75rem;
}
} .sthh-demo-contact .section-tag,
.sthh-demo-contact .hero-tagline,
.sthh-demo-contact .info-tag {
display: none !important;
}
.sthh-demo-contact .contact-hero {
padding: 108px 0 60px;
}
.sthh-demo-contact .contact-form-panel .fluentform,
.sthh-demo-contact .contact-form-panel .frm-fluent-form {
margin-top: 12px;
}
.sthh-demo-contact .contact-form-panel .ff-el-group {
margin-bottom: 16px;
}
.sthh-demo-contact .contact-form-panel input,
.sthh-demo-contact .contact-form-panel select,
.sthh-demo-contact .contact-form-panel textarea {
background: rgba(8, 8, 9, 0.55) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
border-radius: var(--border-radius-sm) !important;
}
.sthh-demo-contact .contact-form-panel input:focus,
.sthh-demo-contact .contact-form-panel select:focus,
.sthh-demo-contact .contact-form-panel textarea:focus {
border-color: var(--border-color-active) !important;
box-shadow: 0 0 12px rgba(255, 107, 0, 0.15) !important;
}
.sthh-demo-contact .contact-form-panel button[type="submit"],
.sthh-demo-contact .contact-form-panel .ff-btn-submit {
background: var(--gradient-primary) !important;
color: var(--text-primary) !important;
border: none !important;
border-radius: var(--border-radius-sm) !important;
font-family: var(--font-heading) !important;
font-weight: 700 !important;
}
.sthh-demo-contact .contact-methods-section {
padding: 80px 0;
background: var(--bg-base);
border-top: 1px solid var(--border-color);
}
.sthh-demo-contact .contact-method-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
}
.sthh-demo-contact .contact-method-card {
padding: 24px;
border-radius: var(--border-radius-md);
border: 1px solid var(--border-color);
background: var(--bg-surface-card);
}
.sthh-demo-contact .contact-method-card h3 {
font-size: 1rem;
margin-bottom: 10px;
}
.sthh-demo-contact .contact-method-card a,
.sthh-demo-contact .contact-method-card span {
color: var(--text-secondary);
line-height: 1.6;
}
.sthh-demo-contact .contact-method-card a:hover {
color: var(--primary);
}
.sthh-demo-contact .consultation-steps-section {
padding: 80px 0;
background: #0b0b0d;
border-top: 1px solid var(--border-color);
}
.sthh-demo-contact .consultation-steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.sthh-demo-contact .consultation-step-card {
padding: 28px;
border-radius: var(--border-radius-md);
border: 1px solid var(--border-color);
background: var(--bg-surface-card);
}
.sthh-demo-contact .consultation-step-card strong {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 107, 0, 0.12);
color: var(--primary);
margin-bottom: 16px;
font-family: var(--font-heading);
}
.sthh-demo-contact .consultation-step-card h3 {
font-size: 1.05rem;
margin-bottom: 10px;
}
.sthh-demo-contact .consultation-step-card p {
color: var(--text-secondary);
line-height: 1.65;
}
@media (max-width: 1024px) {
.sthh-demo-contact .contact-grid,
.sthh-demo-contact .contact-method-grid,
.sthh-demo-contact .consultation-steps-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.sthh-demo-contact .contact-hero {
padding: 92px 0 44px;
}
.sthh-demo-contact .contact-grid,
.sthh-demo-contact .contact-method-grid,
.sthh-demo-contact .consultation-steps-grid {
grid-template-columns: 1fr;
}
.sthh-demo-contact .contact-form-panel {
padding: 24px;
}
.sthh-demo-contact .hero-title {
font-size: clamp(2rem, 10vw, 2.75rem);
}
.sthh-demo-contact .map-tabs {
flex-wrap: wrap;
}
} .sthh-demo-contact .contact-form-panel {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0 !important;
}
.sthh-demo-contact .contact-form-panel > .form-card {
margin: 0;
}
@media (max-width: 768px) {
.sthh-demo-contact .contact-form-panel {
padding: 0 !important;
}
.sthh-demo-contact .contact-form-panel > .form-card {
padding: 28px 22px;
}
}