/* Contact page visual layout. Existing copy and contact details live in the HTML. */
.contact-page { overflow: hidden; background: #080b09; }
.contact-page > .section:not(.contact-hero) { padding-block: clamp(5rem, 8vw, 8.5rem); }
.contact-page h2, .contact-page h3, .contact-page h4 { font-family: var(--font-2); letter-spacing: -.05em; line-height: 1.08; }
.contact-page h3 { font-size: clamp(2.5rem, 4.5vw, 5rem); }
.contact-page p { line-height: 1.75; }
.contact-page .sub-heading { opacity: .1; pointer-events: none; }

.contact-hero { position: relative; min-height: 690px; padding-top: clamp(10rem, 14vw, 15rem); isolation: isolate; background: #0b100d !important; }
.contact-hero::before { content: ''; position: absolute; inset: 0 0 13%; z-index: -1; background: linear-gradient(90deg, rgba(5,12,7,.95), rgba(5,12,7,.76) 52%, rgba(5,12,7,.45)), url('../image/contact-banner-unsplash.jpg') center/cover no-repeat; }
.contact-hero::after { content: ''; position: absolute; inset: 0 0 13%; z-index: -1; background: linear-gradient(0deg, #080b09, transparent 50%); }
.contact-hero .float-container { padding-bottom: clamp(5rem, 8vw, 9rem); }
.contact-hero h2:first-child { width: fit-content; margin-bottom: 1rem; padding: .55rem 1rem; border: 1px solid rgba(126,188,129,.45); border-radius: 100px; color: #b7e5b6; font-family: var(--font-1); font-size: .8rem; font-style: normal !important; font-weight: 600 !important; letter-spacing: .22em; }
.contact-hero h2:not(:first-child) { max-width: 950px; font-size: clamp(3.6rem, 7.8vw, 8rem); font-style: normal !important; font-weight: 600 !important; text-align: left !important; text-wrap: balance; }
.contact-hero img[src*='icon 6'] { display: none; }
.contact-hero .btn-play { margin-left: 0 !important; }
.contact-hero .social-wrapper { border-left: 1px solid rgba(255,255,255,.2); padding-left: 1.5rem; }
.contact-hero .marquee-container { border-block: 1px solid rgba(255,255,255,.15); box-shadow: 0 20px 60px rgba(0,0,0,.28); }

.contact-main { background: radial-gradient(circle at 100% 5%, rgba(36,109,36,.15), transparent 38%), #0b100d; }
.contact-main > .r-container > .d-flex > .d-flex:first-child { align-items: end; gap: clamp(1.5rem, 3vw, 3rem); }
.contact-main > .r-container > .d-flex > .d-flex:first-child h3 { max-width: 820px; }
.contact-main > .r-container > .d-flex > .d-flex:first-child > p { max-width: 390px; margin-bottom: .5rem; color: #bdcbbf; }
.contact-details { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.contact-details .col { min-width: 0; }
.contact-details .card-service { justify-content: space-between; gap: 1rem !important; max-width: 100%; min-height: 185px; padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px solid rgba(132,175,135,.22); border-radius: 1.25rem; background: #141b16; transition: border-color .2s ease, transform .2s ease; }
.contact-details .card-service:hover { transform: translateY(-4px); border-color: #4a9a53; background: #17271a; }
.contact-details .card-service h5 { font-family: var(--font-2); font-size: clamp(1.35rem, 2vw, 1.75rem); }
.contact-details .card-service > div { align-items: flex-start !important; }
.contact-details .card-service i { flex: none; color: #88c98e; font-size: 2rem !important; }
.contact-details .card-service p { overflow-wrap: anywhere; color: #e2ebe2; font-size: .95rem; line-height: 1.55; }

.contact-form-row { align-items: flex-start; margin-top: clamp(1rem, 3vw, 3rem); }
.contact-form-row > .col-lg-3 { display: flex; flex-direction: column; justify-content: flex-start; align-self: flex-start; gap: .75rem; padding: 1.5rem; border: 1px solid rgba(132,175,135,.18); border-radius: 1.25rem; background: #111a14; }
.contact-form-row > .col-lg-3 p { margin-bottom: .5rem; font-weight: 500; }
.contact-form-row > .col-lg-9 { min-width: 0; padding-inline: clamp(.75rem, 2vw, 2rem); }
.contact-form-row form { height: auto !important; margin: 0 !important; padding: clamp(1.5rem, 4vw, 4rem); border: 1px solid rgba(132,175,135,.22); border-radius: 1.25rem; background: #141b16; }
.contact-form-row form h4 { font-size: clamp(2rem, 3vw, 3.3rem); }
.contact-form-row form > p { margin: -.5rem 0 .5rem; color: #bccbbd; }
.contact-form-row .form-control, .contact-form-row .form-select { min-height: 58px; border: 1px solid rgba(179,205,181,.25); border-radius: .75rem; color: #f5f5f5; background-color: #0b100d; }
.contact-form-row textarea.form-control { min-height: 160px; resize: vertical; }
.contact-form-row .form-control:focus, .contact-form-row .form-select:focus { border-color: #74b87a; box-shadow: 0 0 0 3px rgba(75,157,84,.18); }
.contact-form-row .form-control::placeholder { color: #aebaae; opacity: 1; }
.contact-form-row .form-select { color: #cdd9ce; }
.contact-form-row button[type='submit'] { align-self: flex-start !important; margin-top: .5rem !important; padding-inline: 2.2rem; }
.contact-form-row > img.position-absolute { display: none !important; }

.contact-map { display: block; width: min(calc(100% - 2rem), 1320px); height: clamp(340px, 40vw, 520px); margin: 0 auto; border: 1px solid rgba(132,175,135,.22); border-radius: 1.25rem !important; filter: grayscale(.2); }
.contact-cta .bg-color-2 { padding: clamp(3rem, 6vw, 7rem) clamp(1.25rem, 4vw, 4rem) !important; border: 1px solid rgba(132,175,135,.18); border-radius: 1.5rem !important; background: radial-gradient(circle at 100% 0%, rgba(36,109,36,.22), transparent 40%), #111a14; }
.contact-cta .col-8 { width: 100%; max-width: 800px; margin-inline: auto; }
.contact-cta .col-2 { display: none; }
.contact-cta .cta-text { font-size: clamp(2.8rem, 6.5vw, 7rem); }

@media (max-width: 1199px) {
    .contact-details .col { width: 50%; }
    .contact-main > .r-container > .d-flex > .d-flex:first-child { align-items: flex-start; }
    .contact-main > .r-container > .d-flex > .d-flex:first-child > p { align-self: flex-start !important; }
}
@media (max-width: 991px) {
    .contact-hero { min-height: 600px; }
    .contact-hero .social-wrapper { display: none; }
    .contact-form-row > .col-lg-3 { min-height: 0; margin-bottom: 1rem; }
    .contact-form-row > .col-lg-9 { padding-inline: .75rem; }
    .contact-page .sub-heading { display: none; }
}
@media (max-width: 575px) {
    .contact-page > .section:not(.contact-hero) { padding-block: 4rem; }
    .contact-hero { min-height: 560px; padding-top: 9rem; }
    .contact-hero h2:not(:first-child) { font-size: clamp(3rem, 12vw, 4.5rem); }
    .contact-details .col { width: 100%; }
    .contact-details .card-service { min-height: 180px; }
    .contact-form-row form { padding: 1.5rem; }
    .contact-map { width: calc(100% - 1.5rem); }
}