/*========================
RESET
=========================*/

*,*:before,*:after{
margin:0;
padding:0;
outline:0;
box-sizing:border-box;
}

/*========================
FONTS
=========================*/

@font-face{
src:url(../fonts/poppins-SemiBold.ttf);
font-family:poppins_semibold;
}

@font-face{
src:url(../fonts/notosans.ttf);
font-family:notosans;
}

@font-face{
src:url(../fonts/Rubik-VariableFont_wght.ttf);
font-family:rubik;
}

@font-face{
font-family:PlayfairDisplay;
src:url('../fonts/PlayfairDisplay-Bold.ttf');
}

@font-face{
src:url("../font/amplitude_regular.ttf");
font-family:amplitude_regular;
}

@font-face{
src:url("../font/opensans.ttf");
font-family:openSans;
}

@font-face{
src:url("../font/helvetica_neue_medium.otf");
font-family:helvetica_neue_medium;
}

@font-face{
src:url("../font/rubik.ttf");
font-family:rubik;
}

/*========================
CONTACT HERO
=========================*/

#contact_hero{

position:relative;

height:720px;

background:
url("../images/contact_hero.jpg")
center center/cover
no-repeat;

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

overflow:hidden;
}

#contact_hero_overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
90deg,
rgba(4,25,19,.82),
rgba(4,25,19,.42)
);
}

/* HERO CONTENT */

#contact_hero_content{

position:relative;
z-index:2;

width:88%;
max-width:1400px;

margin:auto;

display:flex;
align-items:center;
}

#contact_hero_content>div{

width:100%;
max-width:640px;

display:flex;
flex-direction:column;
align-items:flex-start;
}

/* TAG */

.contact_tag{

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

padding:10px 18px;

border-radius:40px;

background:
rgba(214,180,94,.12);

border:
1px solid
rgba(214,180,94,.22);

font:12px amplitude_regular;
letter-spacing:1.4px;

color:#D6B45E;

margin-bottom:26px;
}

/* TITLE */

#contact_hero_content h2{

font:72px PlayfairDisplay;
line-height:1.05;

color:#fff;

margin-bottom:24px;
}

/* COPY */

#contact_hero_content p{

font:18px amplitude_regular;
line-height:1.9;

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

margin-bottom:34px;
}

/*========================
HERO ACTIONS
=========================*/

.contact_hero_actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:18px;
}

.contact_hero_actions a{
height:58px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
padding:0 28px;
border-radius:40px;
text-decoration:none;
font:14px amplitude_regular;
transition:.35s;
}

/* PRIMARY */
.contact_hero_actions a:first-child{

background:#D6B45E;
color:#041913;
}

.contact_hero_actions a:first-child:hover{

background:#e0c170;
}

/* SECONDARY */

.contact_hero_actions a:last-child{

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

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

color:#fff;
}

.contact_hero_actions a:last-child:hover{
background:rgba(255,255,255,.12);
}

/*========================
CONTACT SECTION
=========================*/

#contact_form_section{

background:#F6F3EC;

padding:120px 0;
}

/* HEADER */

#contact_section_header{

width:88%;
max-width:1200px;

margin:auto auto 70px auto;

display:flex;
flex-direction:column;
align-items:center;

text-align:center;
}

#contact_section_header h2{

font:56px PlayfairDisplay;
color:#041913;

margin:22px 0;
}

#contact_section_header p{

max-width:720px;

font:17px amplitude_regular;
line-height:1.9;

color:#59635F;
}

/*========================
LAYOUT
=========================*/

#contact_layout{

width:88%;
max-width:1300px;

margin:auto;

display:flex;
gap:34px;
align-items:flex-start;
}

/*========================
FORM WRAP
=========================*/

#contact_form_wrap{

flex:1.2;
min-width:0;

background:#fff;

padding:48px;

border-radius:34px;

display:flex;
flex-direction:column;

box-shadow:
0 24px 70px
rgba(0,0,0,.05);
}

#contact_form_wrap h3{

font:38px PlayfairDisplay;
color:#041913;

margin-bottom:14px;
}

#contact_form_wrap>p{

font:15px amplitude_regular;
line-height:1.8;

color:#5F6764;

margin-bottom:34px;
}

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

#contact_form{

width:100%;

display:flex;
flex-direction:column;

gap:22px;
}

/* ROW */

.contact_row{

display:flex;
gap:20px;

width:100%;
}

.contact_row>div{

flex:1;
min-width:0;

display:flex;
flex-direction:column;
}

/* LABEL */

#contact_form label{

font:13px amplitude_regular;
letter-spacing:.5px;

color:#34413D;

margin-bottom:8px;
}

/* INPUTS */

#contact_form input,
#contact_form textarea{

width:100%;

border:
1px solid
rgba(4,25,19,.08);

background:#FAFAF8;

border-radius:18px;

padding:0 18px;

font:14px amplitude_regular;
color:#041913;

transition:.35s;

box-sizing:border-box;
}

#contact_form input{

height:58px;
}

#contact_form textarea{

height:180px;

padding:18px;

resize:none;
}

/* FOCUS */

#contact_form input:focus,
#contact_form textarea:focus{

outline:none;

border-color:#D6B45E;

background:#fff;
}

/* SUBMIT */

#contact_form input[type="submit"]{
height:60px;
border:none;
background:#041913;
color:#fff;
border-radius:40px;
font:14px amplitude_regular;
letter-spacing:.8px;
cursor:pointer;
transition:.35s;
}

#contact_form input[type="submit"]:hover{
background:#0A2A21;
}

/*========================
INFO CARDS
=========================*/

#contact_info_wrap{
flex:.8;
min-width:0;
display:flex;
flex-direction:column;
gap:20px;
}

.contact_info_card{
background:#fff;
padding:30px;
border-radius:28px;
display:flex;
align-items:flex-start;
gap:18px;

box-shadow:
0 18px 60px
rgba(0,0,0,.04);

transition:.35s;
}

.contact_info_card:hover{

transform:translateY(-4px);

box-shadow:
0 28px 80px
rgba(0,0,0,.08);
}

/* ICON */

.contact_icon{

width:58px;
height:58px;

flex-shrink:0;

border-radius:18px;

background:
rgba(214,180,94,.12);

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

color:#D6B45E;
}

.contact_icon svg{

width:22px;
height:22px;
}

/* TEXT */

.contact_info_card>div{

display:flex;
flex-direction:column;
}

.contact_info_card h4{

font:24px PlayfairDisplay;
color:#041913;

margin-bottom:8px;
}

.contact_info_card p{

font:14px amplitude_regular;
line-height:1.8;

color:#5F6764;
}

/*========================
TRUST STRIP
=========================*/

#contact_trust_strip{

background:#fff;
padding:80px 6%;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
gap:24px;
}

.trust_item{

flex:1;
min-width:220px;

display:flex;
flex-direction:column;
align-items:center;

text-align:center;
}

/* ICON */

.trust_icon{

width:72px;
height:72px;

margin-bottom:22px;

border-radius:22px;

background:
rgba(214,180,94,.12);

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

color:#D6B45E;
}

.trust_icon svg{

width:26px;
height:26px;
}

/* TEXT */

.trust_item h4{

font:28px PlayfairDisplay;
color:#041913;

margin-bottom:12px;
}

.trust_item p{

font:14px amplitude_regular;
line-height:1.8;

color:#5F6764;

max-width:260px;
}

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

#contact_cta{

position:relative;

padding:120px 0;

background:
linear-gradient(
135deg,
#041913,
#0B2A21
);

overflow:hidden;
}

#contact_cta_overlay{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
radial-gradient(
circle at center,
rgba(214,180,94,.06),
transparent 70%
);
}

#contact_cta_content{

position:relative;
z-index:2;

width:88%;
max-width:1000px;

margin:auto;

display:flex;
flex-direction:column;
align-items:center;

text-align:center;
}

#contact_cta_content span{

font:12px amplitude_regular;
letter-spacing:1.6px;

color:#D6B45E;
}

#contact_cta_content h2{

font:62px PlayfairDisplay;
line-height:1.1;

color:#fff;

margin:24px 0;
}

#contact_cta_content p{

max-width:720px;

font:17px amplitude_regular;
line-height:1.9;

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

margin-bottom:34px;
}

/* CTA ACTIONS */

#contact_cta_actions{

display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:18px;
}

#contact_cta_actions a{

height:58px;

display:flex;
align-items:center;
justify-content:center;
gap:10px;

padding:0 28px;

border-radius:40px;

text-decoration:none;

font:14px amplitude_regular;

transition:.35s;
}

/* PRIMARY */

#contact_cta_actions a:first-child{

background:#D6B45E;
color:#041913;
}

#contact_cta_actions a:first-child:hover{

background:#e0c170;
}

/* SECONDARY */

#contact_cta_actions a:last-child{

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

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

color:#fff;
}

#contact_cta_actions a:last-child:hover{

background:
rgba(255,255,255,.12);
}