/* =========================================================
CONTACT PAGE
========================================================= */
.contact-page{
background:#fff;
color:#171717;
overflow:hidden;
}
.contact-page a{
text-decoration:none;
}
/* CONTACT SECTION SPACING */
.contact-information,
.contact-enquiry,
.contact-process,
.contact-location,
.contact-final{
padding:var(--dvs-section-padding) 0;
}
/* =========================================================
CONTACT HERO
========================================================= */
.contact-hero{
position:relative;
background:#171717;
color:#fff;
padding:155px 0 105px;
overflow:hidden;
}
.contact-hero::before{
content:"";
position:absolute;
width:700px;
height:700px;
right:-280px;
top:-380px;
border:1px solid rgba(238,121,31,.12);
border-radius:50%;
}
.contact-hero::after{
content:"";
position:absolute;
width:500px;
height:500px;
left:-300px;
bottom:-380px;
border:1px solid rgba(255,255,255,.05);
border-radius:50%;
}
.contact-hero .dvs-layout-container{
position:relative;
z-index:2;
}
.contact-hero-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:50px;
}
.contact-eyebrow,
.contact-section-label{
display:flex;
align-items:center;
gap:13px;
color:#ee791f;
font-size:10px;
font-weight:700;
letter-spacing:2.5px;
text-transform:uppercase;
margin:0 0 30px;
}
.contact-eyebrow::before,
.contact-section-label::before{
content:"";
width:45px;
height:2px;
background:#ee791f;
}
.contact-hero h1{
max-width:900px;
font-family:"Manrope",sans-serif;
font-size:clamp(55px,7vw,105px);
font-weight:800;
line-height:.96;
letter-spacing:-.07em;
margin:0;
}
.contact-hero h1 span{
color:#ee791f;
}
.contact-hero-index{
padding-top:5px;
color:rgba(255,255,255,.3);
font-family:"Manrope",sans-serif;
font-size:10px;
font-weight:700;
letter-spacing:2px;
line-height:1.8;
text-align:right;
}
.contact-hero-index strong{
color:#ee791f;
font-size:42px;
letter-spacing:-.05em;
}
.contact-hero-bottom{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:60px;
margin-top:90px;
padding-top:30px;
border-top:1px solid rgba(255,255,255,.12);
}
.contact-hero-bottom p{
max-width:680px;
color:rgba(255,255,255,.55);
font-size:15px;
line-height:1.9;
margin:0;
}
.contact-hero-link{
display:inline-flex;
align-items:center;
gap:13px;
flex-shrink:0;
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
}
.contact-hero-link i{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border:1px solid rgba(255,255,255,.25);
border-radius:50%;
color:#ee791f;
font-size:10px;
transition:.3s ease;
}
.contact-hero-link:hover i{
background:#ee791f;
color:#fff;
border-color:#ee791f;
transform:translateY(4px);
}
/* =========================================================
CONTACT INFORMATION
========================================================= */
.contact-section-heading{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(300px,.7fr);
gap:100px;
align-items:end;
margin-bottom:60px;
}
.contact-section-heading h2,
.contact-enquiry-intro h2,
.contact-process-heading h2,
.contact-location-heading h2{
font-family:"Manrope",sans-serif;
font-size:clamp(43px,4.5vw,68px);
font-weight:800;
line-height:1.02;
letter-spacing:-.06em;
margin:0;
}
.contact-section-heading>p{
max-width:520px;
color:#656565;
font-size:14px;
line-height:1.9;
margin:0 0 5px;
}
.contact-info-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}
.contact-info-card{
border-radius:20px;
position:relative;
display:flex;
flex-direction:column;
min-height:340px;
padding:30px;
background:#f5f5f3;
color:#171717;
border:1px solid #e7e7e5;
overflow:hidden;
transition:.4s ease;
}
.contact-info-card::before{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:3px;
background:#ee791f;
transform:scaleX(0);
transform-origin:left;
transition:.4s ease;
}
.contact-info-card:hover{
background:#171717;
color:#fff;
transform:translateY(-7px);
box-shadow:0 25px 55px rgba(0,0,0,.14);
}
.contact-info-card:hover::before{
transform:scaleX(1);
}
.contact-info-card-top{
display:flex;
align-items:center;
justify-content:space-between;
}
.contact-info-number{
font-family:"Manrope",sans-serif;
color:#ee791f;
font-size:11px;
font-weight:800;
}
.contact-info-icon{
display:flex;
align-items:center;
justify-content:center;
width:58px;
height:58px;
border:1px solid rgba(23,23,23,.12);
border-radius:50%;
font-size:15px;
color:#ee791f;
transition:.3s ease;
}
.contact-info-card:hover .contact-info-icon{
border-color:rgba(238,121,31,.5);
background:#ee791f;
color:#fff;
}
.contact-info-card-content{
margin-top:auto;
padding-bottom:10px;
}
.contact-info-card-content>span{
display:block;
color:#999;
font-size:9px;
font-weight:800;
letter-spacing:1.8px;
margin-bottom:12px;
}
.contact-info-card:hover .contact-info-card-content>span{
color:rgba(255,255,255,.4);
}
.contact-info-card-content h3{
font-family:"Manrope",sans-serif;
font-size:21px;
font-weight:700;
line-height:1.25;
margin:0 0 13px;
word-break:break-word;
}
.contact-info-card-content p{
max-width:330px;
color:#707070;
font-size:12px;
line-height:1.75;
margin:0;
}
.contact-info-card:hover .contact-info-card-content p{
color:rgba(255,255,255,.5);
}
.contact-info-card-arrow{
position:absolute;
right:30px;
bottom:30px;
color:#999;
font-size:11px;
transition:.3s ease;
}
.contact-info-card:hover .contact-info-card-arrow{
color:#ee791f;
transform:translate(3px,-3px);
}
/* =========================================================
ENQUIRY
========================================================= */
.contact-enquiry{
position:relative;
background:#171717;
color:#fff;
overflow:hidden;
}
.contact-enquiry::before{
content:"";
position:absolute;
right:-350px;
top:-300px;
width:700px;
height:700px;
border:1px solid rgba(238,121,31,.08);
border-radius:50%;
}
.contact-enquiry-grid{
display:grid;
grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
gap:110px;
align-items:start;
}
.contact-enquiry-intro{
position:sticky;
top:120px;
}
.contact-enquiry-intro h2{
color:#fff;
margin-bottom:30px;
}
.contact-enquiry-intro h2 span{
color:#ee791f;
}
.contact-enquiry-intro>p:not(.contact-section-label){
max-width:520px;
color:rgba(255,255,255,.5);
font-size:14px;
line-height:1.9;
margin:0;
}
.contact-requirement-list{
margin-top:50px;
border-top:1px solid rgba(255,255,255,.12);
}
.contact-requirement-list div{
display:flex;
align-items:center;
gap:25px;
padding:18px 0;
border-bottom:1px solid rgba(255,255,255,.12);
}
.contact-requirement-list span{
color:#ee791f;
font-family:"Manrope",sans-serif;
font-size:10px;
font-weight:800;
}
.contact-requirement-list p{
margin:0;
color:rgba(255,255,255,.65);
font-size:12px;
}
.contact-form-wrap{
border-radius:20px;
background:#fff;
color:#171717;
padding:45px;
}
.contact-form-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding-bottom:28px;
margin-bottom:28px;
border-bottom:1px solid #e1e1df;
}
.contact-form-heading span{
font-size:10px;
font-weight:800;
letter-spacing:2px;
color:#ee791f;
}
.contact-form-heading p{
font-size:10px;
color:#999;
margin:0;
}
.contact-form-row{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.contact-field{
margin-bottom:22px;
}
.contact-field label{
display:block;
font-size:10px;
font-weight:800;
letter-spacing:.7px;
text-transform:uppercase;
margin-bottom:9px;
color:#333;
}
.contact-field input,
.contact-field textarea,
.contact-field select{
width:100%;
border:1px solid #dededb;
background:#f8f8f6;
color:#171717;
border-radius:0;
padding:14px 15px;
font-family:var(--body-font);
font-size:13px;
outline:none;
transition:.25s ease;
}
.contact-field textarea{
resize:vertical;
min-height:135px;
}
.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus{
border-color:#ee791f;
background:#fff;
box-shadow:0 0 0 3px rgba(238,121,31,.08);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder{
color:#aaa;
}
.contact-select-wrap{
position:relative;
}
.contact-select-wrap select{
appearance:none;
padding-right:45px;
cursor:pointer;
}
.contact-select-wrap i{
position:absolute;
right:16px;
top:50%;
transform:translateY(-50%);
font-size:10px;
color:#888;
pointer-events:none;
}
.contact-submit{
border-radius:8px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:13px;
border:0;
background:#ee791f;
color:#fff;
padding:17px 27px;
font-family:var(--heading-font);
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
cursor:pointer;
transition:.3s ease;
}
.contact-submit i{
transition:.3s ease;
}
.contact-submit:hover{
background:#171717;
}
.contact-submit:hover i{
transform:translateX(5px);
}
/* =========================================================
PROCESS
========================================================= */
.contact-process{
background:#f5f5f3;
}
.contact-process .dvs-layout-container{
display:grid;
grid-template-columns:.75fr 1.25fr;
gap:100px;
}
.contact-process-heading h2 span{
color:#ee791f;
}
.contact-process-intro{
max-width:430px;
color:#707070;
font-size:13px;
line-height:1.85;
margin:28px 0 0;
}
.contact-process-list{
border-top:1px solid #d8d8d5;
}
.contact-process-item{
border-bottom:1px solid #d8d8d5;
}
.contact-process-trigger{
width:100%;
display:flex;
align-items:center;
gap:25px;
padding:30px 0;
border:0;
background:transparent;
color:#171717;
text-align:left;
cursor:pointer;
}
.contact-process-number{
width:50px;
flex:0 0 50px;
color:#ee791f;
font-size:10px;
font-weight:800;
}
.contact-process-title{
min-width:0;
flex:1;
}
.contact-process-title h3{
font-family:"Manrope",sans-serif;
font-size:20px;
font-weight:700;
margin:0 0 7px;
}
.contact-process-title p{
color:#707070;
font-size:12px;
line-height:1.65;
margin:0;
}
.contact-process-read{
flex:0 0 auto;
display:block;
min-width:65px;
color:#171717;
font-size:8px;
font-weight:800;
letter-spacing:1.7px;
text-transform:uppercase;
white-space:nowrap;
text-align:right;
transition:.3s ease;
}
.contact-process-icon{
display:flex;
align-items:center;
justify-content:center;
flex:0 0 48px;
width:48px;
height:48px;
border:1px solid #d3d3d0;
border-radius:50%;
color:#999;
background:transparent;
transition:.35s ease;
}
.contact-process-icon i{
font-size:10px;
transition:.35s ease;
}
.contact-process-item:hover .contact-process-read{
color:#ee791f;
}
.contact-process-item:hover .contact-process-icon{
border-color:#ee791f;
color:#ee791f;
}
.contact-process-item.active .contact-process-read{
color:#ee791f;
}
.contact-process-item.active .contact-process-icon{
background:#ee791f;
border-color:#ee791f;
color:#fff;
}
.contact-process-item.active .contact-process-icon i{
transform:rotate(180deg);
}
.contact-process-item.active .contact-process-read{
font-size:0;
}
.contact-process-item.active .contact-process-read::after{
content:"READ LESS";
font-size:8px;
letter-spacing:1.7px;
}
.contact-process-body{
max-height:0;
overflow:hidden;
padding:0 73px 0 75px;
transition:max-height .45s ease,padding .45s ease;
}
.contact-process-item.active .contact-process-body{
padding-bottom:28px;
}
.contact-process-body p{
max-width:720px;
color:#666;
font-size:13px;
line-height:1.85;
margin:0;
}
/* =========================================================
LOCATION
========================================================= */
.contact-location-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:60px;
margin-bottom:45px;
}
.contact-location-address>a{
display:flex;
align-items:flex-start;
gap:15px;
color:#656565;
transition:.3s ease;
}
.contact-location-address>a:hover{
color:#171717;
}
.contact-location-address span{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
background:#171717;
color:#ee791f;
border-radius:50%;
font-size:12px;
flex-shrink:0;
transition:.3s ease;
}
.contact-location-address>a:hover span{
background:#ee791f;
color:#fff;
}
.contact-location-address p{
font-size:12px;
line-height:1.7;
margin:0;
}
.contact-map-wrap{
position:relative;
height:520px;
background:#ddd;
overflow:hidden;
}
.contact-map-wrap iframe{
display:block;
filter:grayscale(.15);
}
.contact-map-overlay{
position:absolute;
left:25px;
bottom:25px;
display:flex;
flex-direction:column;
align-items:flex-start;
background:#171717;
color:#fff;
padding:25px 28px;
min-width:250px;
box-shadow:0 15px 40px rgba(0,0,0,.2);
}
.contact-map-overlay span{
color:#ee791f;
font-size:9px;
font-weight:800;
letter-spacing:1.7px;
margin-bottom:8px;
}
.contact-map-overlay strong{
font-family:"Manrope",sans-serif;
font-size:20px;
margin-bottom:16px;
}
.contact-map-overlay a{
color:#fff;
font-size:10px;
font-weight:700;
letter-spacing:.8px;
text-transform:uppercase;
transition:.3s ease;
}
.contact-map-overlay a:hover{
color:#ee791f;
}
.contact-map-overlay a i{
color:#ee791f;
margin-left:5px;
}
/* =========================================================
FINAL CTA
========================================================= */
.contact-final{
background:#ee791f;
color:#fff;
}
.contact-final-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.contact-final .contact-section-label{
color:#171717;
margin-bottom:20px;
}
.contact-final .contact-section-label::before{
background:#171717;
}
.contact-final h2{
font-family:"Manrope",sans-serif;
font-size:clamp(43px,5vw,70px);
font-weight:800;
line-height:1;
letter-spacing:-.06em;
margin:0;
}
.contact-final h2 span{
color:#171717;
}
.contact-final-button{
border-radius:8px;
display:inline-flex;
align-items:center;
gap:12px;
background:#171717;
color:#fff;
padding:18px 27px;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
white-space:nowrap;
transition:.3s ease;
}
.contact-final-button:hover{
background:#fff;
color:#171717;
transform:translateY(-3px);
}
.contact-final-button i{
color:#ee791f;
}
/* =========================================================
LAPTOP
========================================================= */
@media(max-width:1100px){
.contact-hero{
padding-top:135px;
}
.contact-section-heading{
gap:60px;
}
.contact-enquiry-grid{
gap:60px;
}
.contact-process .dvs-layout-container{
gap:60px;
}
}
/* =========================================================
TABLET
========================================================= */
@media(max-width:991px){
.contact-hero{
padding:125px 0 85px;
}
.contact-hero h1{
font-size:clamp(50px,8vw,75px);
}
.contact-hero-bottom{
margin-top:65px;
}
.contact-section-heading{
grid-template-columns:1fr;
gap:25px;
}
.contact-info-grid{
grid-template-columns:1fr;
}
.contact-info-card{
min-height:290px;
}
.contact-enquiry-grid{
grid-template-columns:1fr;
gap:55px;
}
.contact-enquiry-intro{
position:static;
}
.contact-process .dvs-layout-container{
grid-template-columns:1fr;
gap:55px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:767px){
.contact-hero{
padding:188px 0 111px;
}
.contact-hero-top{
display:block;
}
.contact-hero-index{
display:none;
}
.contact-hero h1{
font-size:45px;
line-height:1;
}
.contact-hero-bottom{
display:block;
margin-top:50px;
}
.contact-hero-bottom p{
font-size:13px;
}
.contact-hero-link{
margin-top:30px;
}
.contact-section-heading h2,
.contact-enquiry-intro h2,
.contact-process-heading h2,
.contact-location-heading h2{
font-size:42px;
}
.contact-info-card{
min-height:270px;
padding:25px;
}
.contact-form-wrap{
padding:28px 20px;
}
.contact-form-row{
grid-template-columns:1fr;
gap:0;
}
.contact-form-heading{
display:block;
}
.contact-form-heading p{
margin-top:8px;
}
.contact-requirement-list{
margin-top:35px;
}
.contact-process-trigger{
gap:15px;
padding:25px 0;
}
.contact-process-number{
width:35px;
flex-basis:35px;
}
.contact-process-title h3{
font-size:16px;
}
.contact-process-title p{
font-size:11px;
}
.contact-process-read{
min-width:60px;
font-size:7px;
letter-spacing:1px;
}
.contact-process-item.active .contact-process-read::after{
font-size:7px;
letter-spacing:1px;
}
.contact-process-icon{
flex-basis:40px;
width:40px;
height:40px;
}
.contact-process-body{
padding-left:50px;
padding-right:45px;
}
.contact-process-item.active .contact-process-body{
padding-bottom:23px;
}
.contact-process-body p{
font-size:12px;
line-height:1.75;
}
.contact-location-heading{
display:block;
}
.contact-location-address{
margin-top:25px;
}
.contact-map-wrap{
height:400px;
}
.contact-map-overlay{
left:15px;
bottom:15px;
padding:20px;
min-width:220px;
}
.contact-map-overlay strong{
font-size:17px;
}
.contact-final-inner{
display:block;
}
.contact-final-button{
margin-top:35px;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media(max-width:480px){
.contact-hero h1{
font-size:39px;
}
.contact-eyebrow,
.contact-section-label{
font-size:9px;
letter-spacing:1.8px;
}
.contact-section-heading h2,
.contact-enquiry-intro h2,
.contact-process-heading h2,
.contact-location-heading h2{
font-size:36px;
}
.contact-info-card-content h3{
font-size:18px;
}
.contact-form-wrap{
padding:25px 17px;
}
.contact-submit{
width:100%;
}
.contact-process-trigger{
gap:10px;
padding:22px 0;
}
.contact-process-number{
width:28px;
flex-basis:28px;
}
.contact-process-title h3{
font-size:15px;
}
.contact-process-title p{
font-size:10px;
}
.contact-process-read{
min-width:58px;
font-size:6px;
letter-spacing:.8px;
}
.contact-process-item.active .contact-process-read::after{
font-size:6px;
letter-spacing:.8px;
}
.contact-process-icon{
flex-basis:36px;
width:36px;
height:36px;
}
.contact-process-body{
padding-left:40px;
padding-right:40px;
}
.contact-process-body p{
font-size:11px;
}
.contact-map-wrap{
height:350px;
}
.contact-map-overlay{
position:absolute;
left:10px;
right:10px;
bottom:10px;
min-width:0;
}
.contact-final h2{
font-size:38px;
}
.contact-final-button{
width:100%;
justify-content:center;
}
}