/* =====================================================
CONTACT PAGE
Curious Explorer
===================================================== */

.contact-page {
overflow: hidden;
background: #f7faf8;
color: #17231c;
}

/* =====================================================
CONTACT INTRO
===================================================== */

.contact-intro {
position: relative;
min-height: 58vh;
display: flex;
align-items: center;
padding: 170px 0 100px;
overflow: hidden;


background:
    radial-gradient(
        circle at 12% 20%,
        rgba(34, 197, 94, .20),
        transparent 30%
    ),
    radial-gradient(
        circle at 88% 70%,
        rgba(14, 165, 233, .18),
        transparent 30%
    ),
    linear-gradient(
        135deg,
        #063b2a 0%,
        #087443 48%,
        #0d8f58 100%
    );

color: #fff;


}

.contact-intro::before {
content: "";
position: absolute;
inset: 0;


background-image:
    linear-gradient(
        135deg,
        rgba(255,255,255,.04) 25%,
        transparent 25%
    );

background-size: 60px 60px;

opacity: .35;


}

.contact-intro-glow {
position: absolute;
border-radius: 50%;
filter: blur(5px);
pointer-events: none;
}

.contact-glow-one {
width: 360px;
height: 360px;


top: -170px;
left: -100px;

background: rgba(255, 193, 7, .18);


}

.contact-glow-two {
width: 420px;
height: 420px;


right: -160px;
bottom: -220px;

background: rgba(14, 165, 233, .20);


}

.contact-intro-content {
position: relative;
z-index: 2;
max-width: 850px;
}

.contact-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;


padding: 9px 17px;

margin-bottom: 24px;

border: 1px solid rgba(255,255,255,.28);
border-radius: 999px;

background: rgba(255,255,255,.09);

backdrop-filter: blur(12px);

color: #d9ff8f;

font-size: .82rem;
font-weight: 800;
letter-spacing: 1.5px;
text-transform: uppercase;


}

.contact-intro h1 {
margin: 0;


font-family: "Plus Jakarta Sans", sans-serif;

font-size: clamp(3rem, 7vw, 6.5rem);

line-height: .98;

font-weight: 800;

letter-spacing: -3px;


}

.contact-intro h1 span {
display: block;


color: #ffd43b;

text-shadow:
    0 8px 30px rgba(0,0,0,.18);


}

.contact-intro p {
max-width: 680px;


margin: 30px 0 0;

color: rgba(255,255,255,.84);

font-size: 1.12rem;
line-height: 1.85;


}

.contact-scroll {
display: flex;
align-items: center;
gap: 12px;


margin-top: 50px;

color: rgba(255,255,255,.7);


}

.contact-scroll span {
position: relative;


display: inline-block;

width: 28px;
height: 46px;

border: 1px solid rgba(255,255,255,.55);
border-radius: 20px;


}

.contact-scroll span::after {
content: "";


position: absolute;

width: 5px;
height: 9px;

left: 50%;
top: 8px;

transform: translateX(-50%);

border-radius: 10px;

background: #fff;

animation: contactScroll 1.8s infinite;


}

.contact-scroll small {
font-size: .75rem;
letter-spacing: 1.5px;
text-transform: uppercase;
}

@keyframes contactScroll {


0% {
    opacity: 0;
    transform: translate(-50%, 0);
}

30% {
    opacity: 1;
}

100% {
    opacity: 0;
    transform: translate(-50%, 18px);
}


}

/* =====================================================
CONTACT DETAILS
===================================================== */

.contact-details {
position: relative;
padding: 110px 0;
background: #fff;
}

.section-heading {
max-width: 760px;
margin: 0 auto 55px;
text-align: center;
}

.contact-heading > span {
display: inline-block;


margin-bottom: 12px;

color: #078548;

font-size: .78rem;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;


}

.contact-heading h2 {
margin: 0;


font-family: "Plus Jakarta Sans", sans-serif;

font-size: clamp(2.2rem, 4vw, 4rem);

line-height: 1.1;

font-weight: 800;

color: #122019;


}

.contact-heading h2 strong {
color: #078548;
}

.contact-heading p {
margin: 22px auto 0;


max-width: 650px;

color: #66736b;

line-height: 1.8;


}

.contact-info-card {
position: relative;


height: 100%;

padding: 38px 32px;

border-radius: 24px;

background: #fff;

border: 1px solid #e5ece7;

box-shadow:
    0 15px 45px rgba(19, 55, 36, .07);

transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    box-shadow .45s ease,
    border-color .45s ease;

overflow: hidden;


}

.contact-info-card::after {
content: "";


position: absolute;

width: 120px;
height: 120px;

right: -60px;
bottom: -60px;

border-radius: 50%;

background: rgba(16,185,129,.08);

transition: transform .5s ease;


}

.contact-info-card:hover {
transform: translateY(-10px);


border-color: rgba(16,185,129,.35);

box-shadow:
    0 25px 60px rgba(19, 55, 36, .13);


}

.contact-info-card:hover::after {
transform: scale(2.3);
}

.contact-info-icon {
width: 64px;
height: 64px;


display: flex;
align-items: center;
justify-content: center;

margin-bottom: 25px;

border-radius: 18px;

background:
    linear-gradient(
        135deg,
        #d9f99d,
        #86efac
    );

color: #075c37;

font-size: 1.4rem;

box-shadow:
    0 10px 25px rgba(34,197,94,.15);


}

.contact-info-card > span {
color: #078548;


font-size: .75rem;
font-weight: 800;

letter-spacing: 1.5px;

text-transform: uppercase;


}

.contact-info-card h3 {
margin: 9px 0 12px;


font-family: "Plus Jakarta Sans", sans-serif;

font-size: 1.4rem;

font-weight: 800;


}

.contact-info-card p {
margin-bottom: 20px;


color: #718078;

line-height: 1.7;


}

.contact-info-card a {
position: relative;
z-index: 2;


display: inline-flex;
align-items: center;
gap: 10px;

color: #078548;

font-size: .9rem;
font-weight: 800;

text-decoration: none;

transition: gap .3s ease;


}

.contact-info-card a:hover {
gap: 16px;
}

/* =====================================================
CONTACT FORM
===================================================== */

.contact-form-section {
padding: 120px 0;


background:
    linear-gradient(
        135deg,
        #eef8f1 0%,
        #f8fbf9 50%,
        #edf7ff 100%
    );


}

.contact-form-intro {
height: 100%;


padding: 25px 20px 25px 0;


}

.contact-section-label {
display: inline-flex;
align-items: center;
gap: 9px;


margin-bottom: 22px;

color: #078548;

font-size: .78rem;
font-weight: 800;

letter-spacing: 1.7px;
text-transform: uppercase;


}

.contact-form-intro h2,
.location-content h2 {
margin: 0;


font-family: "Plus Jakarta Sans", sans-serif;

font-size: clamp(2.2rem, 4vw, 4rem);

line-height: 1.08;

font-weight: 800;

color: #14221a;


}

.contact-form-intro h2 strong,
.location-content h2 strong {
color: #078548;
}

.contact-form-intro > p {
margin: 25px 0 35px;


color: #65736b;

line-height: 1.85;


}

.contact-reasons {
display: flex;
flex-direction: column;
gap: 22px;
}

.contact-reason {
display: flex;
align-items: flex-start;
gap: 17px;
}

.reason-icon {
flex: 0 0 48px;


width: 48px;
height: 48px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 14px;

background: #fff;

color: #078548;

box-shadow:
    0 8px 25px rgba(20,60,38,.08);


}

.contact-reason h4 {
margin: 0 0 5px;


font-size: 1rem;
font-weight: 800;

color: #17251d;


}

.contact-reason p {
margin: 0;


color: #738078;

font-size: .88rem;

line-height: 1.6;


}

.contact-form-card {
padding: 45px;


border-radius: 28px;

background: rgba(255,255,255,.88);

border: 1px solid rgba(255,255,255,.9);

box-shadow:
    0 25px 70px rgba(20,60,38,.10);

backdrop-filter: blur(15px);


}

.contact-form-card label {
display: block;


margin-bottom: 9px;

color: #25342b;

font-size: .82rem;
font-weight: 800;


}

.contact-input {
position: relative;
}

.contact-input > i {
position: absolute;


left: 18px;
top: 50%;

transform: translateY(-50%);

color: #078548;

pointer-events: none;

z-index: 2;


}

.contact-input input,
.contact-input textarea {
width: 100%;


border: 1px solid #dce7df;

border-radius: 13px;

background: #fff;

color: #17231c;

outline: none;

font-family: "Inter", sans-serif;

transition:
    border-color .3s ease,
    box-shadow .3s ease,
    background .3s ease;


}

.contact-input input {
height: 56px;


padding: 0 18px 0 48px;


}

.contact-input textarea {
min-height: 160px;


padding: 17px 18px 17px 48px;

resize: vertical;


}

.contact-input input::placeholder,
.contact-input textarea::placeholder {
color: #9aa69f;
}

.contact-input input:focus,
.contact-input textarea:focus {
border-color: #20a464;


background: #fbfffc;

box-shadow:
    0 0 0 4px rgba(32,164,100,.10);


}

.contact-textarea > i {
top: 25px;


transform: none;


}

.contact-submit {
width: 100%;


min-height: 58px;

border: 0;

border-radius: 14px;

background:
    linear-gradient(
        135deg,
        #078548,
        #11a968
    );

color: #fff;

font-weight: 800;

letter-spacing: .2px;

box-shadow:
    0 14px 30px rgba(7,133,72,.22);

cursor: pointer;

transition:
    transform .3s ease,
    box-shadow .3s ease;


}

.contact-submit i {
margin-left: 10px;


transition: transform .3s ease;


}

.contact-submit:hover {
transform: translateY(-3px);


box-shadow:
    0 18px 35px rgba(7,133,72,.30);


}

.contact-submit:hover i {
transform: translateX(5px);
}

/* =====================================================
LOCATION
===================================================== */

.contact-location {
padding: 120px 0;


background: #fff;


}

.location-content {
padding-right: 35px;
}

.location-content > p {
margin: 25px 0 30px;


color: #66746c;

line-height: 1.85;


}

.location-list {
display: flex;
flex-direction: column;
gap: 17px;
}

.location-list div {
display: flex;
align-items: center;
gap: 14px;


color: #344239;

font-size: .92rem;


}

.location-list i {
width: 40px;
height: 40px;


display: flex;
align-items: center;
justify-content: center;

border-radius: 12px;

background: #e7f7ed;

color: #078548;


}

.location-visual {
position: relative;


min-height: 430px;

border-radius: 30px;

overflow: hidden;

background:
    linear-gradient(
        rgba(6,59,42,.20),
        rgba(6,59,42,.20)
    ),
    linear-gradient(
        135deg,
        #dcefdc,
        #b8dfca
    );

box-shadow:
    0 25px 70px rgba(20,60,38,.12);


}

.location-map-pattern {
position: absolute;
inset: 0;


opacity: .65;

background-image:
    linear-gradient(
        35deg,
        transparent 45%,
        rgba(255,255,255,.65) 46%,
        transparent 48%
    ),
    linear-gradient(
        145deg,
        transparent 45%,
        rgba(255,255,255,.55) 46%,
        transparent 48%
    );

background-size: 120px 120px;


}

.location-map-pattern::before,
.location-map-pattern::after {
content: "";


position: absolute;

border: 2px solid rgba(255,255,255,.48);

border-radius: 50%;


}

.location-map-pattern::before {
width: 300px;
height: 300px;


left: -80px;
top: 60px;


}

.location-map-pattern::after {
width: 420px;
height: 420px;


right: -130px;
bottom: -170px;


}

.map-pin {
position: absolute;


left: 50%;
top: 50%;

transform: translate(-50%, -50%);


}

.map-pin-icon {
position: relative;
z-index: 3;


width: 70px;
height: 70px;

display: flex;
align-items: center;

justify-content: center;

border-radius: 50% 50% 50% 0;

transform: rotate(-45deg);

background: #e63946;

color: #fff;

font-size: 1.5rem;

box-shadow:
    0 15px 30px rgba(120,20,30,.25);


}

.map-pin-icon i {
transform: rotate(45deg);
}

.map-pin-pulse {
position: absolute;


width: 150px;
height: 150px;

left: 50%;
top: 50%;

transform: translate(-50%, -50%);

border-radius: 50%;

background: rgba(230,57,70,.18);

animation: mapPulse 2.2s infinite;


}

@keyframes mapPulse {


0% {
    transform: translate(-50%, -50%) scale(.4);
    opacity: .8;
}

70% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
}

100% {
    opacity: 0;
}


}

.map-label {
position: absolute;


left: 50%;
top: calc(50% + 65px);

transform: translateX(-50%);

display: flex;
align-items: center;
gap: 8px;

padding: 11px 17px;

border-radius: 999px;

background: rgba(255,255,255,.92);

color: #173324;

font-size: .8rem;
font-weight: 800;

white-space: nowrap;

box-shadow:
    0 10px 30px rgba(20,60,38,.12);


}

/* =====================================================
SOCIAL
===================================================== */

.contact-social {
padding: 110px 0;


background:
    radial-gradient(
        circle at 15% 40%,
        rgba(34,197,94,.12),
        transparent 28%
    ),
    radial-gradient(
        circle at 85% 60%,
        rgba(14,165,233,.12),
        transparent 28%
    ),
    #f3f8f4;


}

.social-content {
max-width: 760px;


margin: auto;

text-align: center;


}

.social-content > span {
color: #078548;


font-size: .76rem;
font-weight: 800;

letter-spacing: 2px;

text-transform: uppercase;


}

.social-content h2 {
margin: 15px 0;


font-family: "Plus Jakarta Sans", sans-serif;

font-size: clamp(2.3rem, 5vw, 4.5rem);

line-height: 1.05;

font-weight: 800;


}

.social-content h2 strong {
color: #078548;
}

.social-content p {
max-width: 620px;


margin: 0 auto 30px;

color: #69776f;

line-height: 1.8;


}

.contact-social-links {
display: flex;
justify-content: center;
gap: 13px;
}

.contact-social-links a {
width: 48px;
height: 48px;


display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background: #fff;

color: #078548;

text-decoration: none;

box-shadow:
    0 8px 25px rgba(20,60,38,.08);

transition:
    transform .3s ease,
    background .3s ease,
    color .3s ease;


}

.contact-social-links a:hover {
transform: translateY(-6px);


background: #078548;

color: #fff;


}

/* =====================================================
CTA
===================================================== */

.contact-cta {
position: relative;


padding: 125px 0;

overflow: hidden;

background:
    radial-gradient(
        circle at 15% 50%,
        rgba(255,193,7,.20),
        transparent 25%
    ),
    radial-gradient(
        circle at 85% 40%,
        rgba(14,165,233,.18),
        transparent 27%
    ),
    linear-gradient(
        135deg,
        #043a29,
        #08784a 52%,
        #096c45
    );

color: #fff;


}

.contact-cta::before {
content: "";


position: absolute;

inset: 0;

opacity: .12;

background-image:
    radial-gradient(
        circle at center,
        #fff 1px,
        transparent 1px
    );

background-size: 35px 35px;


}

.contact-cta-light {
position: absolute;


border-radius: 50%;

filter: blur(3px);


}

.contact-cta-light-one {
width: 300px;
height: 300px;


left: -150px;
top: -100px;

background: rgba(255,193,7,.12);


}

.contact-cta-light-two {
width: 350px;
height: 350px;


right: -150px;
bottom: -160px;

background: rgba(14,165,233,.13);


}

.contact-cta-content {
position: relative;
z-index: 2;


max-width: 850px;

margin: auto;

text-align: center;


}

.contact-cta-content > span {
display: inline-flex;
align-items: center;
gap: 9px;


margin-bottom: 20px;

color: #d9ff8f;

font-size: .78rem;
font-weight: 800;

letter-spacing: 1.5px;

text-transform: uppercase;


}

.contact-cta h2 {
margin: 0;


font-family: "Plus Jakarta Sans", sans-serif;

font-size: clamp(2.5rem, 6vw, 5.5rem);

line-height: 1;

font-weight: 800;


}

.contact-cta h2 strong {
color: #ffd43b;
}

.contact-cta p {
max-width: 650px;


margin: 25px auto 35px;

color: rgba(255,255,255,.78);

line-height: 1.8;


}

.contact-cta-buttons {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}

.contact-cta-buttons .btn {
min-width: 165px;


padding: 13px 24px;

border-radius: 999px;

font-weight: 800;


}

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 991px) {


.contact-intro {
    min-height: 52vh;

    padding: 150px 0 90px;
}


.contact-form-intro {
    padding-right: 0;
}


.location-content {
    padding-right: 0;
}


.contact-form-card {
    padding: 35px;
}


}

@media (max-width: 767px) {

```
.contact-intro {
    padding: 135px 0 75px;
}


.contact-intro h1 {
    letter-spacing: -2px;
}


.contact-intro p {
    font-size: 1rem;
}


.contact-details,
.contact-form-section,
.contact-location,
.contact-social {
    padding: 80px 0;
}


.contact-info-card {
    padding: 30px 25px;
}


.contact-form-card {
    padding: 25px 20px;
    border-radius: 22px;
}


.location-visual {
    min-height: 330px;
}


.contact-cta {
    padding: 90px 0;
}


}

@media (max-width: 480px) {


.contact-intro h1 {
    font-size: 3rem;
}


.contact-eyebrow {
    font-size: .68rem;
}


.contact-form-card {
    padding: 22px 16px;
}


.contact-social-links {
    gap: 8px;
}


.contact-social-links a {
    width: 44px;
    height: 44px;
}


.contact-cta-buttons {
    flex-direction: column;
    align-items: center;
}


.contact-cta-buttons .btn {
    width: 100%;
    max-width: 280px;
}


}

/* =====================================================
REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {


.contact-scroll span::after,
.map-pin-pulse {
    animation: none;
}


.contact-info-card,
.contact-submit,
.contact-social-links a {
    transition: none;
}


}