/* Smooth scroll */
html{
scroll-behavior: smooth;
}
/*html, body{
width:100%;
height:100%;
overflow-x:hidden;
}
body{
margin:0;
padding:0;
}
*/
/* Offset only for desktop */
@media (min-width: 769px){
section{
scroll-margin-top: 80px; /* navbar height */
}
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}
body{color:#333}
/* COMMON */
.container{width:90%;max-width:1200px;margin:auto}
h2{/*text-align:center;*/margin-bottom:25px}
/* NAVBAR */
/* NAVBAR */
.navbar{
position:sticky;
top:0;
width:100%;
background:#0b2c4d;
z-index:999;
}
.nav-container{
max-width:1200px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:10px 15px;
}
/* LOGO */
.nav-logo-text{
display:flex;
align-items:center;
gap:10px;
}
.logo-icon{
height:56px; /* larger icon */
width:auto;
object-fit:contain;
flex-shrink:0;
}
.logo-text-wrap{
display:flex;
flex-direction:column;
line-height:1.1;
}
.typing-text{
font-size:16px;
font-weight:700;
color:#fff;
white-space:nowrap;
overflow:hidden;
width:0;
animation: typing 3s steps(22,end) forwards;
}
.logo-sub{
font-size:11px;
font-weight:600;
color:#fff;
background:#CC0000;
padding:3px 8px;
border-radius:4px;
margin-top:4px;
width:max-content;
}
/* MENU */
.nav-menu{
display:flex;
gap:25px;
}
.nav-menu a{
color:#fff;
text-decoration:none;
font-weight:500;
font-size:14px;
}
/* ACTION BUTTONS */
.nav-actions{
display:flex;
align-items:center;
gap:10px;
}
.nav-btn{
padding:8px 10px;
border-radius:6px;
color:#fff;
}
.nav-btn.whatsapp{ background:#25D366; }
.nav-btn.call{ background:#ff7a00; }
/* HAMBURGER */
.hamburger{
display:none;
flex-direction:column;
gap:4px;
cursor:pointer;
}
.hamburger span{
width:22px;
height:2px;
background:#fff;
}
/* TYPING ANIMATION */
@keyframes typing{
from{ width:0 }
to{ width:25ch; }
}
/* MOBILE */
@media (max-width:768px){
.nav-menu{
position:absolute;
top:100%;
left:0;
width:100%;
background:#0b2c4d;
flex-direction:column;
display:none;
gap:5px;
}
.nav-menu a{
padding:5px 14px;
border-top:1px solid rgba(255,255,255,0.1);
}
.nav-menu.show{
display:flex;
}
.hamburger{
display:flex;
}
/* Hide WhatsApp & Call on mobile */
.nav-btn.whatsapp,
.nav-btn.call{
display:none;
}
.logo-icon{
height:50px;
}
.typing-text{
font-size:13px;
}
}
/* SECTIONS */
.about,.why,.quote{padding:60px 0}
/*==================================
ABOUT SECTION
===================================*/
/*==================================================
EAGLE ABOUT INTRODUCTION
==================================================*/
.eagleaboutintro,
.eagleaboutintro *{
box-sizing:border-box;
}
.eagleaboutintro{
position:relative;
width:100%;
padding:110px 0;
background:#ffffff;
overflow:hidden;
font-family:'Poppins',sans-serif;
}
.eagleaboutintro::before{
content:"";
position:absolute;
top:-180px;
right:-120px;
width:520px;
height:520px;
border:90px solid rgba(14,15,72,.03);
border-radius:50%;
}
.eagleaboutintro::after{
content:"";
position:absolute;
left:-100px;
bottom:-120px;
width:300px;
height:300px;
background:rgba(255,193,7,.08);
border-radius:50%;
}
/*==================================================
CONTAINER
==================================================*/
.eagleaboutcontainer{
width:100%;
max-width:1320px;
margin:auto;
padding:0 15px;
position:relative;
z-index:2;
}
/*==================================================
GRID
==================================================*/
.eagleaboutwrapper{
display:grid;
grid-template-columns:48% 52%;
gap:70px;
align-items:center;
}
/*==================================================
IMAGE
==================================================*/
.eagleaboutimage{
position:relative;
}
.eagleaboutimage img{
width:100%;
height:650px;
object-fit:cover;
display:block;
border-radius:18px;
box-shadow:0 30px 80px rgba(14,15,72,.15);
}
.eagleaboutimage::before{
content:"";
position:absolute;
top:25px;
left:-25px;
width:100%;
height:100%;
border:4px solid #e53935;
border-radius:18px;
z-index:-1;
}
/*==================================================
CONTENT
==================================================*/
.eagleaboutcontent{
position:relative;
}
/*==================================================
TAG
==================================================*/
.eagleabouttag{
display:inline-flex;
align-items:center;
gap:12px;
padding:10px 22px;
margin-bottom:22px;
background:#fff5f5;
color:#e53935;
border-radius:50px;
font-size:14px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
}
.eagleabouttag i{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:50%;
}
/*==================================================
HEADING
==================================================*/
.eagleaboutcontent h2{
margin:0 0 25px;
color:#0e0f48;
font-size:48px;
font-weight:800;
line-height:1.2;
}
.eagleaboutcontent h2 span{
color:#ffc107;
}
/*==================================================
PARAGRAPH
==================================================*/
.eagleaboutcontent p{
margin:0 0 22px;
color:#5f667d;
font-size:17px;
line-height:1.9;
}
/*==================================================
FEATURES
==================================================*/
.eagleaboutfeatures{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
margin:35px 0 40px;
}
.eagleaboutfeatures div{
display:flex;
align-items:center;
gap:14px;
padding:16px 18px;
background:#ffffff;
border:1px solid #eceff5;
border-radius:10px;
font-weight:600;
color:#0e0f48;
transition:.35s;
}
.eagleaboutfeatures div:hover{
border-color:#e53935;
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(14,15,72,.10);
}
.eagleaboutfeatures i{
width:38px;
height:38px;
min-width:38px;
display:flex;
align-items:center;
justify-content:center;
background:#0e0f48;
color:#ffffff;
border-radius:50%;
transition:.35s;
}
.eagleaboutfeatures div:hover i{
background:#e53935;
}
/*==================================================
BUTTON
==================================================*/
.eagleaboutbtn{
display:inline-flex;
align-items:center;
gap:12px;
padding:17px 34px;
background:#e53935;
color:#ffffff;
text-decoration:none;
border-radius:8px;
font-size:16px;
font-weight:700;
transition:.35s;
box-shadow:0 18px 45px rgba(229,57,53,.25);
}
.eagleaboutbtn i{
transition:.35s;
}
.eagleaboutbtn:hover{
background:#0e0f48;
transform:translateY(-4px);
}
.eagleaboutbtn:hover i{
transform:translateX(6px);
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.eagleaboutintro{
padding:80px 0;
}
.eagleaboutcontainer{
padding:0 25px;
}
.eagleaboutwrapper{
grid-template-columns:1fr;
gap:45px;
}
.eagleaboutimage{
max-width:700px;
margin:auto;
}
.eagleaboutimage img{
height:500px;
}
.eagleaboutcontent h2{
font-size:40px;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.eagleaboutintro{
padding:60px 0;
}
.eagleaboutcontainer{
padding:0 18px;
}
.eagleaboutimage::before{
display:none;
}
.eagleaboutimage img{
height:330px;
}
.eagleabouttag{
font-size:12px;
padding:8px 16px;
}
.eagleabouttag i{
width:36px;
height:36px;
}
.eagleaboutcontent h2{
font-size:32px;
}
.eagleaboutcontent p{
font-size:15px;
}
.eagleaboutfeatures{
grid-template-columns:1fr;
}
.eagleaboutbtn{
width:100%;
justify-content:center;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.eagleaboutcontainer{
padding:0 15px;
}
.eagleaboutimage img{
height:260px;
}
.eagleaboutcontent h2{
font-size:28px;
line-height:1.3;
}
.eagleaboutcontent p{
font-size:14px;
}
}
/*=========================================
EAGLE CONTACT SECTION
=========================================*/
.eaglecontact{
position:relative;
padding:100px 0;
background:#f7f9fc;
overflow:hidden;
}
.eaglecontainer{
max-width:1320px;
width:100%;
margin:auto;
padding:0 15px;
}
/*=========================================
SECTION HEADING
=========================================*/
.eaglecontactheading{
max-width:760px;
margin:0 auto 70px;
text-align:center;
}
.eaglecontacttag{
display:inline-flex;
align-items:center;
gap:12px;
padding:12px 24px;
background:#ffffff;
border-radius:50px;
color:#e53935;
font-size:15px;
font-weight:700;
letter-spacing:1px;
border:1px solid rgba(229,57,53,.12);
box-shadow:0 8px 25px rgba(0,0,0,.05);
}
.eaglecontacttag i{
width:44px;
height:44px;
border-radius:50%;
background:#e53935;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}
.eaglecontactheading h2{
font-size:52px;
font-weight:800;
color:#0e0f48;
line-height:1.2;
margin:30px 0 18px;
}
.eaglecontactheading h2 span{
color:#e53935;
}
.eaglecontactheading p{
font-size:17px;
line-height:1.9;
color:#666;
}
/*=========================================
WRAPPER
=========================================*/
.eaglecontactwrapper{
display:grid;
grid-template-columns:470px 1fr;
gap:40px;
align-items:stretch;
}
/*=========================================
INFORMATION PANEL
=========================================*/
.eaglecontactinfo{
background:#ffffff;
border-radius:28px;
overflow:hidden;
box-shadow:0 20px 60px rgba(14,15,72,.08);
border:1px solid rgba(14,15,72,.08);
display:flex;
flex-direction:column;
height:100%;
}
/*=========================================
ITEM
=========================================*/
.eaglecontactitem{
display:flex;
align-items:flex-start;
gap:24px;
padding:35px;
transition:.35s;
position:relative;
}
.eaglecontactitem:not(:last-child){
border-bottom:1px solid #edf1f7;
}
.eaglecontactitem:hover{
background:#fafbff;
}
/*=========================================
ICON
=========================================*/
.eaglecontacticon{
width:70px;
min-width:70px;
height:70px;
border-radius:50%;
background:linear-gradient(135deg,#0e0f48,#24359d);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:26px;
transition:.35s;
}
.eaglecontactitem:hover .eaglecontacticon{
background:#e53935;
transform:rotate(-8deg);
}
/*=========================================
CONTENT
=========================================*/
.eaglecontactcontent{
flex:1;
}
.eaglecontactcontent h3{
font-size:24px;
font-weight:700;
color:#0e0f48;
margin-bottom:14px;
}
.eaglecontactcontent p{
font-size:16px;
line-height:1.9;
color:#666;
margin:0;
}
.eaglecontactcontent span{
display:block;
margin-top:8px;
color:#e53935;
font-weight:600;
}
.eaglecontactcontent a{
display:block;
text-decoration:none;
color:#666;
font-size:16px;
margin-bottom:10px;
transition:.3s;
word-break:break-word;
}
.eaglecontactcontent a:hover{
color:#e53935;
padding-left:8px;
}
/*=========================================
GOOGLE MAP
=========================================*/
.eaglecontactmap{
border-radius:28px;
overflow:hidden;
box-shadow:0 20px 60px rgba(14,15,72,.10);
border:1px solid rgba(14,15,72,.08);
min-height:650px;
background:#fff;
}
.eaglecontactmap iframe{
width:100%;
height:100%;
min-height:650px;
border:0;
display:block;
}
/*=========================================
DECORATIVE EFFECT
=========================================*/
.eaglecontact::before{
content:"";
position:absolute;
width:320px;
height:320px;
background:rgba(255,193,7,.10);
border-radius:50%;
top:-140px;
left:-140px;
z-index:0;
}
.eaglecontact::after{
content:"";
position:absolute;
width:260px;
height:260px;
background:rgba(229,57,53,.06);
border-radius:50%;
bottom:-120px;
right:-120px;
z-index:0;
}
.eaglecontainer{
position:relative;
z-index:2;
}
/*=========================================
LARGE LAPTOP
=========================================*/
@media (max-width:1400px){
.eaglecontainer{
max-width:1140px;
}
.eaglecontactwrapper{
grid-template-columns:430px 1fr;
gap:35px;
}
.eaglecontactheading h2{
font-size:46px;
}
.eaglecontactmap,
.eaglecontactmap iframe{
min-height:600px;
}
}
/*=========================================
LAPTOP
=========================================*/
@media (max-width:1199px){
.eaglecontact{
padding:80px 0;
}
.eaglecontainer{
max-width:960px;
}
.eaglecontactwrapper{
grid-template-columns:380px 1fr;
gap:30px;
}
.eaglecontactheading h2{
font-size:42px;
}
.eaglecontactheading p{
font-size:16px;
}
.eaglecontactitem{
padding:28px;
}
.eaglecontacticon{
width:62px;
min-width:62px;
height:62px;
font-size:22px;
}
.eaglecontactcontent h3{
font-size:22px;
}
.eaglecontactcontent p,
.eaglecontactcontent a{
font-size:15px;
}
.eaglecontactmap,
.eaglecontactmap iframe{
min-height:560px;
}
}
/*=========================================
TABLET
=========================================*/
@media (max-width:991px){
.eaglecontact{
padding:70px 0;
}
.eaglecontactheading{
margin-bottom:50px;
}
.eaglecontactheading h2{
font-size:36px;
}
.eaglecontactwrapper{
grid-template-columns:1fr;
gap:35px;
}
.eaglecontactinfo{
order:1;
}
.eaglecontactmap{
order:2;
}
.eaglecontactmap,
.eaglecontactmap iframe{
min-height:480px;
}
}
/*=========================================
MOBILE
=========================================*/
@media (max-width:767px){
.eaglecontact{
padding:60px 0;
}
.eaglecontainer{
padding:0 20px;
}
.eaglecontactheading{
margin-bottom:40px;
}
.eaglecontacttag{
padding:10px 18px;
font-size:13px;
}
.eaglecontacttag i{
width:38px;
height:38px;
font-size:16px;
}
.eaglecontactheading h2{
font-size:30px;
margin:20px 0 15px;
}
.eaglecontactheading p{
font-size:15px;
line-height:1.8;
}
.eaglecontactitem{
padding:24px;
gap:18px;
}
.eaglecontacticon{
width:56px;
min-width:56px;
height:56px;
font-size:20px;
}
.eaglecontactcontent h3{
font-size:20px;
margin-bottom:10px;
}
.eaglecontactcontent p,
.eaglecontactcontent a,
.eaglecontactcontent span{
font-size:15px;
line-height:1.8;
}
.eaglecontactmap,
.eaglecontactmap iframe{
min-height:380px;
}
}
/*=========================================
SMALL MOBILE
=========================================*/
@media (max-width:575px){
.eaglecontact{
padding:50px 0;
}
.eaglecontainer{
padding:0 15px;
}
.eaglecontactheading{
text-align:left;
}
.eaglecontactheading h2{
font-size:26px;
}
.eaglecontacttag{
width:100%;
justify-content:center;
}
.eaglecontactinfo{
border-radius:20px;
}
.eaglecontactitem{
flex-direction:column;
text-align:center;
align-items:center;
padding:22px;
}
.eaglecontacticon{
margin-bottom:5px;
}
.eaglecontactcontent{
width:100%;
}
.eaglecontactcontent h3{
font-size:18px;
}
.eaglecontactcontent p,
.eaglecontactcontent a,
.eaglecontactcontent span{
font-size:14px;
}
.eaglecontactmap{
border-radius:20px;
}
.eaglecontactmap,
.eaglecontactmap iframe{
min-height:320px;
}
}
/*=========================================
EXTRA SMALL DEVICES
=========================================*/
@media (max-width:380px){
.eaglecontactheading h2{
font-size:22px;
}
.eaglecontacttag{
font-size:12px;
padding:8px 15px;
}
.eaglecontacttag i{
width:34px;
height:34px;
font-size:14px;
}
.eaglecontactitem{
padding:18px;
}
.eaglecontacticon{
width:50px;
min-width:50px;
height:50px;
font-size:18px;
}
.eaglecontactcontent h3{
font-size:17px;
}
.eaglecontactcontent p,
.eaglecontactcontent a,
.eaglecontactcontent span{
font-size:13px;
}
.eaglecontactmap,
.eaglecontactmap iframe{
min-height:280px;
}
}
/*=========================================
EAGLE CTA SECTION
=========================================*/
.eaglecta{
position:relative;
padding:90px 0;
background:linear-gradient(135deg,#0e0f48 0%,#18266f 100%);
overflow:hidden;
z-index:1;
}
.eaglecta::before{
content:"";
position:absolute;
width:380px;
height:380px;
background:rgba(255,255,255,.05);
border-radius:50%;
top:-170px;
left:-140px;
}
.eaglecta::after{
content:"";
position:absolute;
width:300px;
height:300px;
background:rgba(229,57,53,.12);
border-radius:50%;
bottom:-120px;
right:-120px;
}
.eaglectabox{
position:relative;
z-index:2;
display:grid;
grid-template-columns:1.7fr .9fr;
gap:60px;
align-items:center;
}
/*=========================================
LEFT SIDE
=========================================*/
.eaglectatag{
display:inline-flex;
align-items:center;
gap:12px;
padding:12px 24px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.15);
border-radius:50px;
color:#ffffff;
font-size:14px;
font-weight:700;
letter-spacing:1px;
margin-bottom:28px;
backdrop-filter:blur(12px);
}
.eaglectatag i{
width:42px;
height:42px;
border-radius:50%;
background:#ffc107;
color:#0e0f48;
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}
.eaglectaleft h2{
font-size:56px;
font-weight:800;
line-height:1.2;
color:#ffffff;
margin-bottom:25px;
}
.eaglectaleft h2 span{
color:#ffc107;
}
.eaglectaleft p{
font-size:17px;
line-height:1.9;
color:rgba(255,255,255,.82);
max-width:720px;
margin-bottom:40px;
}
/*=========================================
FEATURES
=========================================*/
.eaglectafeatures{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}
.eaglectaitem{
display:flex;
align-items:center;
gap:16px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
padding:18px 22px;
border-radius:16px;
transition:.35s;
backdrop-filter:blur(8px);
}
.eaglectaitem:hover{
background:#ffffff;
transform:translateY(-5px);
}
.eaglectaitem i{
width:52px;
height:52px;
border-radius:50%;
background:#e53935;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
transition:.35s;
}
.eaglectaitem:hover i{
background:#0e0f48;
}
.eaglectaitem span{
color:#ffffff;
font-size:16px;
font-weight:600;
transition:.35s;
}
.eaglectaitem:hover span{
color:#0e0f48;
}
/*=========================================
RIGHT CARD
=========================================*/
.eaglectacard{
background:#ffffff;
border-radius:28px;
padding:45px;
box-shadow:0 30px 80px rgba(0,0,0,.20);
text-align:center;
}
.eaglectacard h3{
font-size:34px;
color:#0e0f48;
margin-bottom:20px;
line-height:1.3;
font-weight:800;
}
.eaglectacard p{
color:#666;
line-height:1.8;
margin-bottom:30px;
font-size:16px;
}
/*=========================================
PHONE BUTTON
=========================================*/
.eaglectaphone{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
width:100%;
height:68px;
border-radius:14px;
background:#e53935;
color:#ffffff;
font-size:22px;
font-weight:700;
text-decoration:none;
transition:.35s;
margin-bottom:30px;
}
.eaglectaphone:hover{
background:#0e0f48;
color:#ffffff;
}
.eaglectaphone i{
font-size:24px;
}
/*=========================================
BUTTONS
=========================================*/
.eaglectabuttons{
display:flex;
flex-direction:column;
gap:15px;
}
.eaglectabtn{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
height:58px;
border-radius:12px;
text-decoration:none;
font-weight:700;
transition:.35s;
font-size:16px;
}
.eaglectabtnprimary{
background:#0e0f48;
color:#ffffff;
}
.eaglectabtnprimary:hover{
background:#ffc107;
color:#0e0f48;
}
.eaglectabtnsecondary{
border:2px solid #25d366;
color:#25d366;
background:#ffffff;
}
.eaglectabtnsecondary:hover{
background:#25d366;
color:#ffffff;
}
/*=========================================
SMALL ANIMATION
=========================================*/
.eaglectacard,
.eaglectaitem,
.eaglectaphone,
.eaglectabtn{
transition:all .35s ease;
}
/*=========================================
1400px
=========================================*/
@media (max-width:1400px){
.eaglectaleft h2{
font-size:50px;
}
.eaglectabox{
gap:45px;
}
}
/*=========================================
1200px
=========================================*/
@media (max-width:1199px){
.eaglecta{
padding:80px 0;
}
.eaglectabox{
grid-template-columns:1.5fr 1fr;
gap:35px;
}
.eaglectaleft h2{
font-size:42px;
}
.eaglectaleft p{
font-size:16px;
}
.eaglectacard{
padding:35px;
}
.eaglectacard h3{
font-size:30px;
}
.eaglectaphone{
font-size:20px;
}
}
/*=========================================
992px
=========================================*/
@media (max-width:991px){
.eaglecta{
padding:70px 0;
}
.eaglectabox{
grid-template-columns:1fr;
gap:45px;
}
.eaglectaleft{
text-align:center;
}
.eaglectatag{
justify-content:center;
}
.eaglectaleft p{
margin:0 auto 35px;
}
.eaglectafeatures{
max-width:700px;
margin:auto;
}
.eaglectaright{
max-width:550px;
margin:auto;
width:100%;
}
}
/*=========================================
768px
=========================================*/
@media (max-width:767px){
.eaglecta{
padding:60px 0;
}
.eaglectatag{
font-size:13px;
padding:10px 20px;
}
.eaglectatag i{
width:38px;
height:38px;
font-size:16px;
}
.eaglectaleft h2{
font-size:34px;
}
.eaglectaleft p{
font-size:15px;
}
.eaglectafeatures{
grid-template-columns:1fr;
gap:15px;
}
.eaglectaitem{
padding:16px 18px;
}
.eaglectaitem i{
width:48px;
height:48px;
font-size:18px;
}
.eaglectaitem span{
font-size:15px;
}
.eaglectacard{
padding:30px;
}
.eaglectacard h3{
font-size:26px;
}
.eaglectaphone{
height:60px;
font-size:18px;
}
.eaglectabtn{
height:54px;
font-size:15px;
}
}
/*=========================================
576px
=========================================*/
@media (max-width:575px){
.eaglecta{
padding:50px 0;
}
.eaglectatag{
width:100%;
justify-content:center;
text-align:center;
}
.eaglectaleft h2{
font-size:28px;
line-height:1.35;
}
.eaglectaleft p{
font-size:15px;
}
.eaglectaitem{
flex-direction:column;
text-align:center;
gap:15px;
}
.eaglectacard{
border-radius:20px;
padding:28px 22px;
}
.eaglectacard h3{
font-size:24px;
}
.eaglectaphone{
font-size:17px;
}
}
/*=========================================
380px
=========================================*/
@media (max-width:380px){
.eaglectaleft h2{
font-size:24px;
}
.eaglectatag{
font-size:12px;
padding:8px 14px;
}
.eaglectatag i{
width:34px;
height:34px;
font-size:14px;
}
.eaglectacard{
padding:22px 18px;
}
.eaglectacard h3{
font-size:21px;
}
.eaglectaphone{
height:55px;
font-size:16px;
}
.eaglectabtn{
height:50px;
font-size:14px;
}
.eaglectaitem span{
font-size:14px;
}
}
.hcmpmumcounterbox{
background:#173d69;
color:#fff;
padding:30px 20px;
border-radius:15px;
}
.hcmpmumcounterbox h3{
font-size:42px;
color:#e53935;
margin-bottom:10px;
}
.hcmpmumcounterbox span{
font-size:16px;
font-weight:600;
}
/* Tablet */
@media(max-width:991px){
.hcmpmumaboutcontent h2{
font-size:36px;
}
.hcmpmumaboutfeatures{
grid-template-columns:repeat(2,1fr);
}
.hcmpmumaboutcounter{
grid-template-columns:repeat(2,1fr);
}
}
/* Mobile */
@media(max-width:767px){
.hcmpmumaboutsection{
padding:70px 0;
}
.hcmpmumaboutcontent h2{
font-size:28px;
}
.hcmpmumaboutcontent p{
font-size:15px;
}
.hcmpmumaboutfeatures{
grid-template-columns:1fr;
}
.hcmpmumaboutcounter{
grid-template-columns:1fr;
}
.hcmpmumcounterbox h3{
font-size:34px;
}
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.two-col img{width:100%;border-radius:10px}
.icon-list{list-style:none}
.icon-list li{margin-bottom:10px;font-weight:500}
.icon-list i{color:#ff7a00;margin-right:8px}
/* FORM */
form{max-width:420px;margin:auto}
input,textarea{width:100%;padding:12px;margin-bottom:10px;border:1px solid #ccc}
button{width:100%;padding:12px;background:#ff7a00;color:#fff;border:none}
/* FOOTER */
.footer{background:#0b2c4d;color:#fff;text-align:center;padding:15px}
/*==================================================
EAGLE PREMIUM HERO
PART 2A-1
LAYOUT & BACKGROUND
==================================================*/
/*==============================
HERO SECTION
==============================*/
.eaglehero{
position:relative;
overflow:hidden;
padding:90px 0;
background:linear-gradient(135deg,#081d46 0%,#0b295d 45%,#123d82 100%);
font-family:'Poppins',sans-serif;
}
/*==============================
CONTAINER
==============================*/
.eaglecontainer{
max-width:1320px;
width:100%;
margin:0 auto;
padding:0 15px;
position:relative;
z-index:5;
}
/*==============================
GRID
==============================*/
.eagleherogrid{
display:grid;
grid-template-columns:1.1fr .9fr;
align-items:center;
gap:70px;
}
/*==============================
LEFT CONTENT
==============================*/
.eagleherocontent{
position:relative;
z-index:2;
}
/*==============================
RIGHT FORM
==============================*/
.eagleheroquote{
position:relative;
z-index:5;
}
/*==============================
BACKGROUND SHAPE 1
==============================*/
.eagleheroshape{
position:absolute;
border-radius:50%;
pointer-events:none;
}
.eagleheroshape1{
width:520px;
height:520px;
left:-220px;
top:-180px;
background:rgba(255,255,255,.04);
}
/*==============================
BACKGROUND SHAPE 2
==============================*/
.eagleheroshape2{
width:340px;
height:340px;
right:-120px;
bottom:-120px;
background:rgba(229,57,53,.12);
filter:blur(10px);
}
/*==============================
WORLD MAP OVERLAY
==============================*/
.eaglehero::before{
content:"";
position:absolute;
inset:0;
background:url("images/world-map.png") center center no-repeat;
background-size:65%;
opacity:.05;
pointer-events:none;
}
/*==============================
GRADIENT OVERLAY
==============================*/
.eaglehero::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(8,29,70,.15),
rgba(8,29,70,0)
);
}
/*==============================
DESKTOP LARGE
==============================*/
@media(max-width:1400px){
.eagleherogrid{
gap:55px;
}
}
/*==============================
LAPTOP
==============================*/
@media(max-width:1200px){
.eaglehero{
padding:80px 0;
}
.eagleherogrid{
gap:45px;
}
}
/*==============================
TABLET
==============================*/
@media(max-width:991px){
.eaglehero{
padding:70px 0;
}
.eagleherogrid{
grid-template-columns:1fr;
gap:50px;
}
.eagleherocontent{
text-align:center;
}
.eagleheroquote{
max-width:700px;
width:100%;
margin:auto;
}
.eaglehero::before{
background-size:90%;
}
}
/*==============================
MOBILE
==============================*/
@media(max-width:767px){
.eaglehero{
padding:60px 0;
}
.eaglecontainer{
padding:0 15px;
}
.eagleherogrid{
gap:40px;
}
.eaglehero::before{
background-size:120%;
opacity:.03;
}
.eagleheroshape1{
width:280px;
height:280px;
left:-140px;
top:-120px;
}
.eagleheroshape2{
width:220px;
height:220px;
right:-90px;
bottom:-90px;
}
}
/*==============================
SMALL MOBILE
==============================*/
@media(max-width:480px){
.eaglehero{
padding:50px 0;
}
.eaglecontainer{
padding:0 12px;
}
.eagleherogrid{
gap:35px;
}
.eaglehero::before{
display:none;
}
}
/*==================================================
EAGLE HERO
PART 2A-2
LEFT CONTENT TYPOGRAPHY
==================================================*/
/*====================================
LEFT CONTENT
====================================*/
.eagleherocontent{
position:relative;
z-index:5;
}
/*====================================
TOP BADGE
====================================*/
.eagleherobadge{
display:inline-flex;
align-items:center;
gap:12px;
padding:12px 24px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.15);
backdrop-filter:blur(12px);
border-radius:50px;
color:#ffffff;
font-size:15px;
font-weight:600;
letter-spacing:.3px;
margin-bottom:30px;
transition:.35s;
}
.eagleherobadge:hover{
background:#e53935;
border-color:#e53935;
}
.eagleherobadge i{
width:38px;
height:38px;
border-radius:50%;
background:#ffc107;
color:#081d46;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
}
/*====================================
MAIN HEADING
====================================*/
.eagleherocontent h1{
margin:0;
color:#ffffff;
font-size:62px;
font-weight:800;
line-height:1.15;
letter-spacing:-1px;
}
.eagleherocontent h1 span{
display:block;
margin:8px 0;
color:#ffc107;
}
/*====================================
DESCRIPTION
====================================*/
.eagleherocontent p{
max-width:650px;
margin:30px 0 40px;
color:rgba(255,255,255,.82);
font-size:17px;
line-height:1.9;
}
/*====================================
TEXT SELECTION
====================================*/
.eagleherocontent ::selection{
background:#ffc107;
color:#081d46;
}
/*====================================
TABLET
====================================*/
@media(max-width:991px){
.eagleherocontent{
text-align:center;
}
.eagleherobadge{
margin:0 auto 25px;
}
.eagleherocontent h1{
font-size:48px;
}
.eagleherocontent p{
margin:25px auto 35px;
max-width:100%;
}
}
/*====================================
MOBILE
====================================*/
@media(max-width:767px){
.eagleherobadge{
font-size:13px;
padding:10px 18px;
}
.eagleherobadge i{
width:34px;
height:34px;
font-size:15px;
}
.eagleherocontent h1{
font-size:36px;
line-height:1.25;
}
.eagleherocontent p{
font-size:15px;
line-height:1.8;
margin:22px 0 30px;
}
}
/*====================================
SMALL MOBILE
====================================*/
@media(max-width:480px){
.eagleherobadge{
width:100%;
justify-content:center;
font-size:12px;
}
.eagleherocontent h1{
font-size:30px;
}
.eagleherocontent p{
font-size:14px;
line-height:1.75;
}
}
/*==================================================
EAGLE HERO
PART 2A-3
FEATURE CARDS
==================================================*/
/*====================================
FEATURES WRAPPER
====================================*/
.eagleherofeatures{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
margin:35px 0 40px;
}
/*====================================
FEATURE CARD
====================================*/
.eaglefeaturebox{
position:relative;
overflow:hidden;
display:flex;
align-items:center;
gap:16px;
padding:18px;
min-height:88px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
backdrop-filter:blur(12px);
transition:.35s ease;
}
/* TOP BORDER */
.eaglefeaturebox::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#e53935,#ff9800,#ffc107);
transform:translateY(-100%);
transition:.35s ease;
}
/*====================================
ICON BOX
====================================*/
.eaglefeatureicon{
width:64px;
height:64px;
min-width:64px;
border-radius:16px;
background:linear-gradient(135deg,#e53935,#c62828);
display:flex;
align-items:center;
justify-content:center;
color:#ffffff;
font-size:24px;
transition:.4s;
}
/*====================================
TEXT
====================================*/
.eaglefeaturebox h4{
margin:0 0 6px;
color:#ffffff;
font-size:18px;
font-weight:700;
line-height:1.3;
}
.eaglefeaturebox p{
margin:0;
color:rgba(255,255,255,.75);
font-size:14px;
line-height:1.6;
}
/*====================================
HOVER
====================================*/
.eaglefeaturebox:hover{
transform:translateY(-6px);
background:#ffffff;
border-color:#ffffff;
box-shadow:0 18px 40px rgba(0,0,0,.15);
}
.eaglefeaturebox:hover::before{
transform:translateY(0);
}
.eaglefeaturebox:hover h4{
color:#081d46;
}
.eaglefeaturebox:hover p{
color:#666;
}
.eaglefeaturebox:hover .eaglefeatureicon{
background:#081d46;
color:#ffc107;
}
/*==============================
TEXT
==============================*/
.eaglefeaturecontent{
flex:1;
}
.eaglefeaturecontent h4{
margin:0 0 4px;
font-size:17px;
font-weight:700;
color:#ffffff;
line-height:1.2;
}
.eaglefeaturecontent p{
margin:0;
font-size:14px;
color:rgba(255,255,255,.75);
line-height:1.5;
}
/*====================================
ICON ANIMATION
====================================*/
.eaglefeatureicon i{
transition:.45s ease;
}
/*====================================
TABLET
====================================*/
@media(max-width:991px){
.eagleherofeatures{
grid-template-columns:repeat(2,1fr);
gap:18px;
}
.eaglefeaturebox{
padding:20px;
}
.eaglefeatureicon{
width:56px;
height:56px;
min-width:56px;
border-radius:14px;
background:linear-gradient(135deg,#e67e22,#e53935);
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:22px;
transition:.35s;
}
.eaglefeaturebox h4{
font-size:17px;
}
}
/*====================================
MOBILE
====================================*/
@media(max-width:767px){
.eagleherofeatures{
grid-template-columns:1fr;
gap:16px;
margin-bottom:35px;
}
.eaglefeaturebox{
padding:18px;
min-height:80px;
border-radius:14px;
}
.eaglefeatureicon{
width:50px;
height:50px;
min-width:50px;
border-radius:14px;
font-size:20px;
}
.eaglefeaturebox h4{
font-size:17px;
}
.eaglefeaturebox p{
font-size:13px;
}
}
/*====================================
SMALL MOBILE
====================================*/
@media(max-width:480px){
.eaglefeaturebox{
gap:14px;
padding:16px;
}
.eaglefeatureicon{
width:50px;
height:50px;
min-width:50px;
font-size:18px;
}
.eaglefeaturebox h4{
font-size:15px;
}
.eaglefeaturebox p{
font-size:12px;
}
}
/*==================================================
EAGLE HERO
PART 2A-4
CTA BUTTONS & STATISTICS
==================================================*/
/*====================================
ACTION BUTTONS
====================================*/
.eagleheroactions{
display:flex;
align-items:center;
gap:20px;
margin-bottom:45px;
}
/*====================================
COMMON BUTTON
====================================*/
.eagleheroprimary,
.eagleherocall{
display:inline-flex;
align-items:center;
text-decoration:none;
transition:.35s ease;
}
/*====================================
PRIMARY BUTTON
====================================*/
.eagleheroprimary{
gap:12px;
padding:18px 34px;
background:linear-gradient(135deg,#e53935,#d32f2f);
color:#ffffff;
border-radius:10px;
font-size:16px;
font-weight:700;
box-shadow:0 18px 45px rgba(229,57,53,.30);
}
.eagleheroprimary i{
transition:.35s;
}
.eagleheroprimary:hover{
background:linear-gradient(135deg,#ffc107,#ffb300);
color:#081d46;
transform:translateY(-5px);
box-shadow:0 22px 50px rgba(255,193,7,.35);
}
.eagleheroprimary:hover i{
transform:translateX(6px);
}
/*====================================
CALL BUTTON
====================================*/
.eagleherocall{
gap:14px;
padding:12px 22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(12px);
border-radius:12px;
}
.eaglecallicon{
width:56px;
height:56px;
min-width:56px;
border-radius:50%;
background:#081d46;
display:flex;
align-items:center;
justify-content:center;
color:#ffc107;
font-size:20px;
transition:.35s;
}
.eagleherocall small{
display:block;
color:rgba(255,255,255,.75);
font-size:12px;
margin-bottom:4px;
}
.eagleherocall strong{
color:#ffffff;
font-size:18px;
font-weight:700;
}
.eagleherocall:hover{
background:#ffffff;
transform:translateY(-5px);
}
.eagleherocall:hover strong{
color:#081d46;
}
.eagleherocall:hover small{
color:#555;
}
.eagleherocall:hover .eaglecallicon{
background:#e53935;
color:#ffffff;
transform:rotate(15deg);
}
/*====================================
STATISTICS
====================================*/
.eagleherostats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
.eagleherostat{
text-align:center;
padding:25px 20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
backdrop-filter:blur(12px);
border-radius:18px;
transition:.35s;
}
.eagleherostat h3{
margin:0 0 8px;
color:#ffc107;
font-size:40px;
font-weight:800;
line-height:1;
}
.eagleherostat span{
color:#ffffff;
font-size:15px;
font-weight:500;
}
.eagleherostat:hover{
background:#ffffff;
transform:translateY(-8px);
box-shadow:0 25px 55px rgba(0,0,0,.18);
}
.eagleherostat:hover h3{
color:#e53935;
}
.eagleherostat:hover span{
color:#081d46;
}
/*====================================
TABLET
====================================*/
@media(max-width:991px){
.eagleheroactions{
justify-content:center;
flex-wrap:wrap;
}
.eagleherostats{
gap:18px;
}
.eagleherostat{
padding:22px;
}
.eagleherostat h3{
font-size:34px;
}
}
/*====================================
MOBILE
====================================*/
@media(max-width:767px){
.eagleheroactions{
flex-direction:column;
align-items:stretch;
gap:15px;
}
.eagleheroprimary,
.eagleherocall{
width:100%;
justify-content:center;
}
.eagleherostats{
grid-template-columns:1fr;
gap:15px;
}
.eagleherostat{
padding:20px;
}
.eagleherostat h3{
font-size:30px;
}
.eagleherostat span{
font-size:14px;
}
}
/*====================================
SMALL MOBILE
====================================*/
@media(max-width:480px){
.eagleheroprimary{
padding:16px 22px;
font-size:15px;
}
.eaglecallicon{
width:48px;
height:48px;
min-width:48px;
font-size:18px;
}
.eagleherocall strong{
font-size:16px;
}
.eagleherostat h3{
font-size:28px;
}
}
/*==================================================
EAGLE HERO
PART 2A-5
QUOTE FORM CONTAINER
==================================================*/
/*=========================================
QUOTE FORM CARD
=========================================*/
.eagleheroquote{
position:relative;
background:rgba(255,255,255,.10);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.15);
border-radius:28px;
overflow:hidden;
box-shadow:
0 35px 80px rgba(0,0,0,.18);
transition:.4s ease;
}
/*=========================================
TOP BORDER
=========================================*/
.eagleheroquote::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#e53935,#ffc107,#081d46);
}
/*=========================================
DECORATIVE CIRCLE
=========================================*/
.eagleheroquote::after{
content:"";
position:absolute;
width:220px;
height:220px;
border-radius:50%;
background:rgba(255,193,7,.10);
right:-90px;
top:-90px;
pointer-events:none;
}
/*=========================================
HOVER
=========================================*/
.eagleheroquote:hover{
transform:translateY(-10px);
box-shadow:
0 45px 100px rgba(0,0,0,.25);
}
/*=========================================
HEADER
=========================================*/
.eaglequoteheader{
position:relative;
z-index:2;
padding:40px 40px 20px;
text-align:center;
}
/*=========================================
HEADER BADGE
=========================================*/
.eaglequoteheader span{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 22px;
border-radius:50px;
background:rgba(229,57,53,.18);
color:#ffffff;
font-size:14px;
font-weight:600;
margin-bottom:20px;
}
.eaglequoteheader span i{
width:34px;
height:34px;
border-radius:50%;
background:#e53935;
display:flex;
align-items:center;
justify-content:center;
color:#ffffff;
}
/*=========================================
TITLE
=========================================*/
.eaglequoteheader h2{
color:#ffffff;
margin:0 0 15px;
font-size:38px;
font-weight:800;
line-height:1.2;
}
/*=========================================
DESCRIPTION
=========================================*/
.eaglequoteheader p{
margin:0;
color:rgba(255,255,255,.82);
font-size:15px;
line-height:1.8;
}
/*=========================================
FORM
=========================================*/
.eaglequoteform{
position:relative;
z-index:2;
padding:0 40px 40px;
}
/*=========================================
BOTTOM INFO BAR
=========================================*/
.eaglequotefooter{
display:flex;
justify-content:space-between;
gap:15px;
padding:20px 40px 35px;
border-top:1px solid rgba(255,255,255,.10);
}
.eaglequotefooter div{
display:flex;
align-items:center;
gap:12px;
}
.eaglequotefooter i{
width:42px;
height:42px;
border-radius:50%;
background:#081d46;
display:flex;
align-items:center;
justify-content:center;
color:#ffc107;
font-size:16px;
}
.eaglequotefooter span{
color:#ffffff;
font-size:14px;
font-weight:600;
}
/*=========================================
TABLET
=========================================*/
@media(max-width:991px){
.eagleheroquote{
max-width:720px;
margin:auto;
}
.eaglequoteheader{
padding:35px 30px 18px;
}
.eaglequoteform{
padding:0 30px 30px;
}
.eaglequotefooter{
padding:20px 30px 30px;
}
}
/*=========================================
MOBILE
=========================================*/
@media(max-width:767px){
.eagleheroquote{
border-radius:20px;
}
.eaglequoteheader{
padding:30px 22px 18px;
}
.eaglequoteheader h2{
font-size:30px;
}
.eaglequoteform{
padding:0 22px 25px;
}
.eaglequotefooter{
flex-direction:column;
padding:20px 22px 25px;
}
}
/*=========================================
SMALL MOBILE
=========================================*/
@media(max-width:480px){
.eagleheroquote{
border-radius:18px;
}
.eaglequoteheader{
padding:25px 18px 15px;
}
.eaglequoteheader h2{
font-size:25px;
}
.eaglequoteheader p{
font-size:14px;
}
.eaglequoteform{
padding:0 18px 20px;
}
.eaglequotefooter{
padding:18px;
}
.eaglequotefooter span{
font-size:13px;
}
}
/*==================================================
EAGLE HERO
PART 2A-6
FORM FIELDS & BUTTON
==================================================*/
/*==================================
FORM GROUP
==================================*/
.eaglefield{
position:relative;
margin-bottom:18px;
}
/*==================================
ROW
==================================*/
.eaglefieldrow{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}
/*==================================
INPUTS
==================================*/
.eaglefield input,
.eaglefield select,
.eaglefield textarea{
width:100%;
background:#ffffff;
border:1px solid #e4e8f1;
border-radius:12px;
outline:none;
padding:0 18px;
height:56px;
font-size:15px;
font-weight:500;
color:#1b2430;
font-family:'Poppins',sans-serif;
transition:.35s;
}
/*==================================
TEXTAREA
==================================*/
.eaglefield textarea{
height:130px;
resize:none;
padding:16px 18px;
}
/*==================================
SELECT
==================================*/
.eaglefield select{
appearance:none;
-webkit-appearance:none;
cursor:pointer;
padding-right:48px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23081d46' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-size:18px;
background-position:right 16px center;
}
/*==================================
PLACEHOLDER
==================================*/
.eaglefield input::placeholder,
.eaglefield textarea::placeholder{
color:#7b8794;
}
/*==================================
FOCUS
==================================*/
.eaglefield input:focus,
.eaglefield textarea:focus,
.eaglefield select:focus{
border-color:#e53935;
box-shadow:
0 0 0 4px rgba(229,57,53,.10);
}
/*==================================
HOVER
==================================*/
.eaglefield input:hover,
.eaglefield textarea:hover,
.eaglefield select:hover{
border-color:#ffc107;
}
/*==================================
BUTTON
==================================*/
.eaglequotesubmit{
width:100%;
border:none;
height:58px;
border-radius:12px;
background:linear-gradient(135deg,#e53935,#cf2c2c);
color:#ffffff;
font-size:17px;
font-weight:700;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
transition:.35s;
box-shadow:
0 18px 40px rgba(229,57,53,.25);
}
.eaglequotesubmit i{
transition:.35s;
}
.eaglequotesubmit:hover{
background:linear-gradient(135deg,#ffc107,#ffb400);
color:#081d46;
transform:translateY(-4px);
}
.eaglequotesubmit:hover i{
transform:translateX(6px);
}
/*==================================
OPTION
==================================*/
.eaglefield option{
color:#081d46;
background:#ffffff;
}
/*==================================
TABLET
==================================*/
@media(max-width:991px){
.eaglefieldrow{
gap:15px;
}
.eaglefield input,
.eaglefield select{
height:54px;
}
}
/*==================================
MOBILE
==================================*/
@media(max-width:767px){
.eaglefieldrow{
grid-template-columns:1fr;
}
.eaglefield input,
.eaglefield select{
height:52px;
font-size:14px;
}
.eaglefield textarea{
height:110px;
font-size:14px;
}
.eaglequotesubmit{
height:54px;
font-size:15px;
}
}
/*==================================
SMALL MOBILE
==================================*/
@media(max-width:480px){
.eaglefield input,
.eaglefield select{
padding:0 15px;
}
.eaglefield textarea{
padding:14px 15px;
}
.eaglequotesubmit{
height:52px;
font-size:14px;
}
}
/*==================================================
hcmp HERO SECTION
COLOR COMBINATION
PRIMARY NAVY : #173d69
ACCENT ORANGE : #e53935
==================================================*/
.hcmphero{
position:relative;
width:100%;
min-height:780px;
display:flex;
align-items:center;
padding:85px 0;
background:
radial-gradient(
circle at 88% 15%,
rgba(221,116,54,.18) 0,
rgba(221,116,54,0) 29%
),
radial-gradient(
circle at 5% 90%,
rgba(255,255,255,.05) 0,
rgba(255,255,255,0) 25%
),
linear-gradient(
115deg,
#102d4f 0%,
#173d69 48%,
#214f80 100%
);
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmphero,
.hcmphero *{
box-sizing:border-box;
}
/*==================================================
BACKGROUND GRID
==================================================*/
.hcmphero::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:55px 55px;
pointer-events:none;
}
/*==================================================
BACKGROUND DECORATIVE CIRCLE
==================================================*/
.hcmphero::after{
content:"";
position:absolute;
width:650px;
height:650px;
top:-430px;
right:-230px;
border:90px solid rgba(221,116,54,.08);
border-radius:50%;
pointer-events:none;
}
/*==================================================
DECORATIVE LINES
==================================================*/
.hcmpheroline{
position:absolute;
height:1px;
background:linear-gradient(
90deg,
transparent,
rgba(221,116,54,.55),
transparent
);
transform:rotate(-35deg);
pointer-events:none;
}
.hcmpherolineone{
width:600px;
top:150px;
left:-270px;
}
.hcmpherolinetwo{
width:500px;
right:-190px;
bottom:100px;
}
/*==================================================
HERO WRAPPER
==================================================*/
.hcmpherowrap{
position:relative;
z-index:2;
width:100%;
display:grid;
grid-template-columns:
minmax(0,1.05fr)
minmax(500px,.95fr);
align-items:center;
gap:70px;
}
/*==================================================
LEFT HERO CONTENT
==================================================*/
.hcmpherocontent{
width:100%;
max-width:760px;
text-align:left;
}
/*==================================================
HERO BADGE
==================================================*/
.hcmpherobadge{
display:inline-flex;
align-items:center;
gap:10px;
margin:0 0 25px;
padding:8px 19px 8px 8px;
background:rgba(255,255,255,.09);
color:#ffffff;
border:1px solid rgba(255,255,255,.15);
border-radius:50px;
font-size:13px;
font-weight:700;
line-height:1.4;
box-shadow:
0 12px 30px rgba(0,0,0,.08);
}
.hcmpherobadgeicon{
width:36px;
height:36px;
min-width:36px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:50%;
font-size:13px;
box-shadow:
0 8px 20px rgba(221,116,54,.28);
}
/*==================================================
HERO HEADING
==================================================*/
.hcmpherocontent h1{
margin:0 0 27px;
color:#ffffff;
font-size:60px;
font-weight:800;
line-height:1.16;
letter-spacing:-1.7px;
}
.hcmpherocontent h1 span{
display:block;
color:#e53935;
}
/*==================================================
HERO DESCRIPTION
==================================================*/
.hcmpherolead{
width:100%;
max-width:710px;
margin:0 0 33px;
color:rgba(255,255,255,.82);
font-size:16px;
font-weight:400;
line-height:1.9;
}
/*==================================================
HERO ACTION AREA
==================================================*/
.hcmpheroactions{
display:flex;
align-items:center;
gap:27px;
margin:0 0 38px;
}
/*==================================================
PRIMARY QUOTE BUTTON
==================================================*/
.hcmpheroprimary{
min-height:60px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
padding:15px 27px;
background:#e53935;
color:#ffffff;
border:1px solid #e53935;
border-radius:8px;
text-decoration:none;
font-size:14px;
font-weight:800;
white-space:nowrap;
box-shadow:
0 13px 30px rgba(221,116,54,.24);
transition:
background .3s ease,
color .3s ease,
border-color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.hcmpheroprimary i{
font-size:12px;
transition:transform .3s ease;
}
.hcmpheroprimary:hover{
background:#ffffff;
color:#173d69;
border-color:#ffffff;
transform:translateY(-3px);
box-shadow:
0 18px 38px rgba(0,0,0,.18);
}
.hcmpheroprimary:hover i{
transform:translateX(5px);
}
/*==================================================
CALL BUTTON
==================================================*/
.hcmpherocall{
display:flex;
align-items:center;
gap:13px;
color:#ffffff;
text-decoration:none;
}
.hcmpherocallicon{
width:56px;
height:56px;
min-width:56px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.24);
border-radius:50%;
color:#e53935;
font-size:17px;
transition:
background .3s ease,
color .3s ease,
border-color .3s ease,
transform .3s ease;
}
.hcmpherocall:hover .hcmpherocallicon{
background:#e53935;
color:#ffffff;
border-color:#e53935;
transform:rotate(-8deg);
}
.hcmpherocalltext{
display:block;
color:#ffffff;
font-size:16px;
font-weight:700;
line-height:1.4;
}
.hcmpherocalltext small{
display:block;
margin:0 0 3px;
color:rgba(255,255,255,.62);
font-size:11px;
font-weight:500;
}
/*==================================================
TRUST FEATURES
==================================================*/
.hcmpherotrust{
width:100%;
max-width:720px;
display:grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:15px;
}
/*==================================================
TRUST ITEM
==================================================*/
.hcmpherotrustitem{
min-width:0;
display:flex;
align-items:center;
gap:13px;
padding:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
transition:
background .3s ease,
border-color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.hcmpherotrustitem:hover{
background:rgba(221,116,54,.15);
border-color:rgba(221,116,54,.60);
transform:translateY(-4px);
box-shadow:
0 15px 30px rgba(8,29,51,.20);
}
/*==================================================
TRUST ICON
==================================================*/
.hcmpherotrusticon{
width:47px;
height:47px;
min-width:47px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:9px;
font-size:17px;
box-shadow:
0 8px 20px rgba(221,116,54,.25);
}
/*==================================================
TRUST TEXT
==================================================*/
.hcmpherotrusttext{
min-width:0;
display:block;
color:rgba(255,255,255,.62);
font-size:10px;
font-weight:400;
line-height:1.5;
}
.hcmpherotrusttext strong{
display:block;
margin:0 0 3px;
color:#ffffff;
font-size:13px;
font-weight:700;
line-height:1.4;
}
/*==================================================
RIGHT QUOTE SIDE
==================================================*/
.hcmpheroquoteside{
position:relative;
width:100%;
display:flex;
align-items:center;
justify-content:flex-end;
}
/*==================================================
QUOTE FORM BOX
==================================================*/
.hcmpheroquotebox{
position:relative;
width:100%;
max-width:570px;
padding:42px 40px;
background:#ffffff;
border:1px solid rgba(255,255,255,.18);
border-radius:18px;
box-shadow:
0 35px 80px rgba(8,29,51,.34);
overflow:hidden;
}
.hcmpheroquotebox::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:6px;
background:linear-gradient(
90deg,
#173d69 0%,
#e53935 100%
);
}
.hcmpheroquotebox::after{
content:"";
position:absolute;
width:250px;
height:250px;
top:-175px;
right:-155px;
border:45px solid rgba(23,61,105,.035);
border-radius:50%;
pointer-events:none;
}
/*==================================================
QUOTE HEADING
==================================================*/
.hcmpheroquotehead{
position:relative;
z-index:2;
margin:0 0 28px;
text-align:left;
}
.hcmpheroquotetag{
display:inline-flex;
align-items:center;
gap:9px;
margin:0 0 12px;
color:#e53935;
font-size:12px;
font-weight:800;
line-height:1.4;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpheroquotetag i{
font-size:14px;
}
.hcmpheroquotehead h2{
margin:0 0 10px;
color:#173d69;
font-size:34px;
font-weight:800;
line-height:1.25;
letter-spacing:-.5px;
}
.hcmpheroquotehead p{
margin:0;
color:#6d7680;
font-size:15px;
font-weight:400;
line-height:1.7;
}
/*==================================================
QUOTE FORM
==================================================*/
.hcmpheroquoteform{
position:relative;
z-index:2;
width:100%;
}
/*==================================================
FORM ROW
==================================================*/
.hcmpheroquoterow{
width:100%;
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:16px;
}
/*==================================================
FORM FIELD
==================================================*/
.hcmpheroquotefield{
position:relative;
width:100%;
min-width:0;
margin:0 0 16px;
}
.hcmpheroquotefield > i{
position:absolute;
top:50%;
left:20px;
z-index:2;
transform:translateY(-50%);
color:#e53935;
font-size:16px;
pointer-events:none;
}
/*==================================================
INPUT AND SELECT
==================================================*/
.hcmpheroquotefield input,
.hcmpheroquotefield select{
display:block;
width:100%;
max-width:100%;
height:64px;
margin:0;
padding:0 20px 0 54px;
background:#f7f9fb;
border:1px solid #dce3ea;
border-radius:10px;
outline:none;
color:#173d69;
font-family:"Poppins",sans-serif;
font-size:15px;
font-weight:500;
line-height:1;
transition:
border-color .3s ease,
box-shadow .3s ease,
background .3s ease,
transform .3s ease;
}
.hcmpheroquotefield input::placeholder{
color:#7b8794;
opacity:1;
font-size:15px;
font-weight:400;
}
.hcmpheroquotefield input:focus,
.hcmpheroquotefield select:focus{
background:#ffffff;
border-color:#e53935;
box-shadow:
0 0 0 4px rgba(221,116,54,.12);
transform:translateY(-1px);
}
/*==================================================
SELECT FIELD
==================================================*/
.hcmpheroquotefield select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
padding-right:45px;
cursor:pointer;
}
.hcmpheroquoteselect::after{
content:"\f078";
position:absolute;
top:50%;
right:20px;
transform:translateY(-50%);
color:#173d69;
font-family:"Font Awesome 6 Free";
font-size:12px;
font-weight:900;
pointer-events:none;
}
/*==================================================
DATE FIELD
==================================================*/
.hcmpheroquotefield input[type="date"]{
color:#657180;
font-size:15px;
}
.hcmpheroquotefield
input[type="date"]::-webkit-calendar-picker-indicator{
cursor:pointer;
opacity:.75;
}
/*==================================================
SUBMIT BUTTON
==================================================*/
.hcmpheroquotebtn{
width:100%;
min-height:64px;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
padding:13px 22px;
background:#173d69;
color:#ffffff;
border:1px solid #173d69;
border-radius:10px;
font-family:"Poppins",sans-serif;
font-size:16px;
font-weight:800;
cursor:pointer;
box-shadow:
0 12px 28px rgba(23,61,105,.22);
transition:
background .3s ease,
color .3s ease,
border-color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.hcmpheroquotebtn i{
width:38px;
height:38px;
min-width:38px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:50%;
font-size:13px;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}
.hcmpheroquotebtn:hover{
background:#e53935;
color:#ffffff;
border-color:#e53935;
transform:translateY(-3px);
box-shadow:
0 18px 35px rgba(221,116,54,.25);
}
.hcmpheroquotebtn:hover i{
background:#173d69;
color:#ffffff;
transform:translateX(4px);
}
/*==================================================
FORM BOTTOM INFORMATION
==================================================*/
.hcmpheroquotesecure{
position:relative;
z-index:2;
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin:20px 0 0;
padding:18px 0 0;
border-top:1px solid #e1e7ed;
}
.hcmpheroquotesecure span{
display:flex;
align-items:center;
gap:7px;
color:#687482;
font-size:11px;
font-weight:500;
line-height:1.5;
}
.hcmpheroquotesecure i{
color:#e53935;
font-size:12px;
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmphero{
min-height:740px;
padding:75px 0;
}
.hcmpherowrap{
grid-template-columns:
minmax(0,1fr)
minmax(440px,.9fr);
gap:45px;
}
.hcmpherocontent h1{
font-size:49px;
}
.hcmpherolead{
font-size:15px;
line-height:1.85;
}
.hcmpheroquotebox{
max-width:520px;
padding:36px 32px;
}
.hcmpheroquotehead h2{
font-size:30px;
}
.hcmpheroquotefield input,
.hcmpheroquotefield select{
height:60px;
font-size:14px;
}
.hcmpheroquotefield input::placeholder{
font-size:14px;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmphero{
min-height:auto;
padding:65px 0;
}
.hcmpherowrap{
grid-template-columns:
minmax(0,1fr)
minmax(360px,.88fr);
gap:35px;
}
.hcmpherobadge{
font-size:11px;
}
.hcmpherocontent h1{
font-size:41px;
letter-spacing:-1px;
}
.hcmpherolead{
font-size:14px;
line-height:1.8;
}
.hcmpheroactions{
flex-direction:column;
align-items:flex-start;
gap:17px;
margin-bottom:30px;
}
.hcmpherotrust{
grid-template-columns:1fr;
gap:9px;
}
.hcmpherotrustitem{
padding:12px;
}
.hcmpherotrusticon{
width:43px;
height:43px;
min-width:43px;
}
.hcmpheroquotebox{
max-width:100%;
padding:30px 25px;
border-radius:16px;
}
.hcmpheroquotehead{
margin-bottom:22px;
}
.hcmpheroquotehead h2{
font-size:27px;
}
.hcmpheroquotehead p{
font-size:13px;
}
.hcmpheroquoterow{
grid-template-columns:1fr;
gap:0;
}
.hcmpheroquotefield{
margin-bottom:13px;
}
.hcmpheroquotefield input,
.hcmpheroquotefield select{
height:58px;
padding-left:50px;
font-size:14px;
}
.hcmpheroquotefield input::placeholder{
font-size:14px;
}
.hcmpheroquotefield > i{
left:18px;
font-size:14px;
}
.hcmpheroquotebtn{
min-height:59px;
font-size:14px;
}
.hcmpheroquotesecure{
flex-direction:column;
align-items:flex-start;
gap:8px;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmphero{
padding:55px 0 60px;
background:
radial-gradient(
circle at 100% 8%,
rgba(221,116,54,.20) 0,
rgba(221,116,54,0) 30%
),
linear-gradient(
150deg,
#102d4f 0%,
#173d69 65%,
#214f80 100%
);
}
.hcmpherowrap{
grid-template-columns:1fr;
gap:45px;
}
.hcmpherocontent{
max-width:100%;
}
.hcmpherocontent h1{
font-size:38px;
line-height:1.2;
}
.hcmpherolead{
max-width:100%;
font-size:14px;
}
.hcmpheroprimary{
width:100%;
}
.hcmpherotrust{
max-width:100%;
grid-template-columns:1fr;
}
.hcmpheroquoteside{
justify-content:flex-start;
}
.hcmpheroquotebox{
width:100%;
max-width:100%;
margin:0;
padding:30px 24px;
border-radius:15px;
}
.hcmpheroquotehead h2{
font-size:28px;
}
.hcmpheroquotehead p{
font-size:14px;
}
.hcmpheroquoterow{
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:13px;
}
.hcmpheroquotefield input,
.hcmpheroquotefield select{
height:60px;
font-size:14px;
}
.hcmpheroquotefield input::placeholder{
font-size:14px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:575px){
.hcmphero{
padding:48px 0 55px;
}
.hcmpherobadge{
width:100%;
padding-right:13px;
border-radius:9px;
font-size:10px;
}
.hcmpherocontent h1{
font-size:32px;
line-height:1.22;
letter-spacing:-.5px;
}
.hcmpherolead{
font-size:13px;
line-height:1.8;
}
.hcmpheroactions{
width:100%;
}
.hcmpherocall{
width:100%;
}
.hcmpherotrustitem{
padding:14px;
}
.hcmpherotrusttext{
font-size:10px;
}
.hcmpherotrusttext strong{
font-size:13px;
}
.hcmpheroquotebox{
padding:27px 18px;
border-radius:13px;
}
.hcmpheroquotetag{
font-size:10px;
}
.hcmpheroquotehead h2{
font-size:25px;
}
.hcmpheroquotehead p{
font-size:13px;
}
.hcmpheroquoterow{
grid-template-columns:1fr;
gap:0;
}
.hcmpheroquotefield{
margin-bottom:12px;
}
.hcmpheroquotefield input,
.hcmpheroquotefield select{
height:58px;
padding-left:49px;
font-size:14px;
border-radius:8px;
}
.hcmpheroquotefield input::placeholder{
font-size:14px;
}
.hcmpheroquotefield > i{
left:17px;
font-size:14px;
}
.hcmpheroquotebtn{
min-height:59px;
padding:12px 17px;
font-size:14px;
border-radius:8px;
}
.hcmpheroquotebtn i{
width:34px;
height:34px;
min-width:34px;
font-size:11px;
}
.hcmpheroquotesecure{
flex-direction:column;
align-items:flex-start;
gap:9px;
margin-top:17px;
}
.hcmpheroquotesecure span{
font-size:10px;
}
}
/*==================================================
VERY SMALL MOBILE
==================================================*/
@media screen and (max-width:380px){
.hcmpherocontent h1{
font-size:29px;
}
.hcmpheroquotebox{
padding:24px 15px;
}
.hcmpheroquotehead h2{
font-size:22px;
}
.hcmpheroquotehead p{
font-size:12px;
}
.hcmpheroquotefield input,
.hcmpheroquotefield select{
height:56px;
font-size:13px;
}
.hcmpheroquotefield input::placeholder{
font-size:13px;
}
.hcmpheroquotebtn{
font-size:13px;
}
}
/* RESPONSIVE */
@media screen and (max-width:768px){
.two-col{
grid-template-columns:1fr;
}
.hero-content h1{
font-size:28px;
}
}
@media(min-width:769px){
.sticky{display:none}
}
/* SERVICES SECTION */
.services{
padding:60px 0;
background:#f9fafb;
}
.services h2{
text-align:center;
margin-bottom:35px;
color:#0b2c4d;
}
.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}
.service-card{
background:#fff;
border-radius:12px;
overflow:hidden;
text-align:center;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:transform .3s ease;
}
.service-card:hover{
transform:translateY(-6px);
}
.service-card img{
width:100%;
height:170px;
object-fit:cover;
}
.service-card i{
font-size:28px;
color:#ff7a00;
margin-top:15px;
}
.service-card h4{
margin:10px 0 6px;
font-size:17px;
color:#0b2c4d;
}
.service-card p{
font-size:14px;
line-height:1.5;
padding:0 15px 20px;
color:#555;
}
/* MOBILE */
@media(max-width:768px){
.service-card img{
height:150px;
}
}
/* WHY CHOOSE + FORM WITH IMAGE */
.why-form{
padding:70px 0;
background:#f4f6f8;
}
.why-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
align-items:flex-start;
}
/* COMMON CARD STYLE */
.why-box,
.form-box{
background:#fff;
padding:30px;
border-radius:14px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
}
/* IMAGE */
.why-box img,
.form-box img{
width:100%;
height:auto;
object-fit:cover;
border-radius:10px;
margin-bottom:18px;
}
/* HEADINGS */
.why-box h3,
.form-box h3{
color:#0b2c4d;
margin-bottom:15px;
text-align:center;
}
/* WHY LIST */
.why-list{
list-style:none;
}
.why-list li{
margin-bottom:12px;
font-weight:500;
color:#333;
}
.why-list i{
color:#ff7a00;
margin-right:10px;
}
/* FORM FIX (IMPORTANT) */
.form-box form{
width:100%;
}
.form-box input,
.form-box textarea{
width:100%;
padding:12px;
margin-bottom:14px;
border-radius:6px;
border:1px solid #ccc;
font-size:14px;
display:block;
box-sizing:border-box;
}
.form-box textarea{
resize:none;
height:100px;
}
.form-box button{
width:100%;
padding:14px;
background:#25D366;
color:#fff;
border:none;
border-radius:6px;
font-size:16px;
font-weight:600;
cursor:pointer;
}
.form-box button i{
margin-right:6px;
}
/* MOBILE */
@media(max-width:768px){
.why-form-grid{
grid-template-columns:1fr;
}
}
/* FULL WIDTH CONTACT SECTION */
/* CONTACT SECTION */
.contact-separate{
width:100%;
padding:60px 15px;
background:#f4f6f8;
}
/* GRID */
.contact-separate-grid{
max-width:1300px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:20px;
}
/* CARD */
.contact-card{
background:#fff;
padding:25px 20px;
border-radius:12px;
text-align:center;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
/* ICON */
.contact-card i{
font-size:32px;
color:#ff7a00;
margin-bottom:12px;
}
/* TITLE */
.contact-card h4{
font-size:17px;
margin-bottom:8px;
color:#0b2c4d;
}
/* TEXT */
.contact-card p{
font-size:14px;
color:#444;
line-height:1.6;
margin:0;
}
/* BREAK LONG TEXT (EMAIL FIX) */
.break-text{
word-break:break-all;
}
/* LINKS */
.contact-card a{
color:#0b2c4d;
text-decoration:none;
font-weight:500;
}
/* MOBILE */
@media(max-width:480px){
.contact-card{
padding:20px 16px;
}
.contact-card h4{
font-size:16px;
}
.contact-card p{
font-size:13px;
}
}
/* Fix for sticky navbar overlap */
.read-more-btn{
display:inline-block;
margin-top:15px;
padding:10px 22px;
background:#ff7a00;
color:#fff;
text-decoration:none;
border-radius:25px;
font-size:14px;
font-weight:500;
transition:all 0.3s ease;
}
.read-more-btn:hover{
background:#e66a00;
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.2);
}
.read-more-btn span{
margin-left:6px;
transition:0.3s;
}
.read-more-btn:hover span{
margin-left:12px;
}
.hero-service{
height: 300px;
background: linear-gradient(135deg, #fdf6ec, #f7e9d7);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #222; /* Dark text for light bg */
padding: 0 20px;
}
.hero-contentpages h1{
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
color:#000000;
}
.hero-contentpages p{
font-size: 16px;
margin-bottom: 20px;
color:#000000;
}
.hero-btn{
background: #ff6b00;
color: #ffffff;
padding: 10px 22px;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: 0.3s;
}
.hero-btn:hover{
background: #e65c00;
}
.hero-points{
font-size:16px;
color:#000;
margin-bottom:20px;
}
.hero-points i{
color:#ff6b00;
margin-right:6px;
}
.divider{
margin:0 12px;
color:#999;
}
.service-page{
padding:70px 5%;
background:#f8f9fa;
}
.service-page h2{
text-align:center;
margin-bottom:20px;
}
.service-page p{
color:#555;
line-height:1.7;
margin-bottom:20px;
}
.features{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:40px;
}
.feature-box{
background:#fff;
padding:25px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.08);
transition:0.3s;
}
.feature-box:hover{
transform:translateY(-6px);
}
.feature-box i{
font-size:30px;
color:#ff6b00;
margin-bottom:10px;
}
.cta-section{
background:#0b2c4d;
color:#fff;
text-align:center;
padding:60px 5%;
}
.cta-section h2{
font-size:28px;
margin-bottom:15px;
}
.cta-btn{
background:#ff6b00;
padding:14px 28px;
color:#fff;
text-decoration:none;
border-radius:6px;
font-weight:600;
}
.footer{
background:#e53935;
color:#fff;
text-align:center;
padding:20px;
}
/* Responsive */
@media(max-width:992px){
.features{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
.features{grid-template-columns:1fr;}
.hero-content h1{font-size:24px;}
}
/*=========================================
WHY CHOOSE US SECTION
=========================================*/
.hcmpmumwhysection{
padding:100px 0;
background:#ffffff;
position:relative;
overflow:hidden;
}
.hcmpmumwhysection::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:300px;
height:300px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumwhysection::after{
content:"";
position:absolute;
bottom:-150px;
left:-150px;
width:350px;
height:350px;
background:rgba(23,61,105,.05);
border-radius:50%;
}
/*===========================
GRID
===========================*/
.hcmpmumwhygrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:60px;
}
/*===========================
CARD
===========================*/
.hcmpmumwhycard{
background:#fff;
border-radius:18px;
padding:40px 35px;
text-align:center;
transition:.35s;
box-shadow:0 12px 35px rgba(0,0,0,.08);
border:1px solid #eee;
position:relative;
overflow:hidden;
}
.hcmpmumwhycard::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:#e53935;
transition:.35s;
}
.hcmpmumwhycard:hover{
transform:translateY(-10px);
box-shadow:0 22px 50px rgba(23,61,105,.18);
}
.hcmpmumwhycard:hover::before{
height:100%;
opacity:.05;
}
/*===========================
ICON
===========================*/
.hcmpmumwhyicon{
width:85px;
height:85px;
margin:0 auto 25px;
border-radius:20px;
background:#173d69;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
transition:.35s;
}
.hcmpmumwhycard:hover .hcmpmumwhyicon{
background:#e53935;
color:#173d69;
transform:rotate(-8deg);
}
/*===========================
TEXT
===========================*/
.hcmpmumwhycard h3{
font-size:24px;
color:#173d69;
margin-bottom:15px;
font-weight:700;
}
.hcmpmumwhycard p{
color:#666;
line-height:1.8;
font-size:15px;
}
/*===========================
BUTTON
===========================*/
.hcmpmumwhybtnwrap{
margin-top:40px;
text-align:center;
}
.hcmpmumwhybtnwrap .hcmpmumprimarybtn{
display:inline-flex;
align-items:center;
gap:12px;
background:#173d69;
color:#fff;
padding:16px 36px;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:.35s;
}
.hcmpmumwhybtnwrap .hcmpmumprimarybtn:hover{
background:#e53935;
color:#000;
}
.hcmpmumwhybtnwrap .hcmpmumprimarybtn i{
transition:.35s;
}
.hcmpmumwhybtnwrap .hcmpmumprimarybtn:hover i{
transform:translateX(6px);
}
/*====================================
LAPTOP
====================================*/
@media(max-width:1199px){
.hcmpmumwhygrid{
grid-template-columns:repeat(2,1fr);
}
}
/*====================================
TABLET
====================================*/
@media(max-width:991px){
.hcmpmumwhysection{
padding:80px 0;
}
.hcmpmumwhygrid{
gap:25px;
}
.hcmpmumwhycard{
padding:35px 25px;
}
.hcmpmumwhyicon{
width:75px;
height:75px;
font-size:30px;
}
.hcmpmumwhycard h3{
font-size:22px;
}
}
/*====================================
MOBILE
====================================*/
@media(max-width:767px){
.hcmpmumwhysection{
padding:60px 0;
}
.hcmpmumwhygrid{
grid-template-columns:1fr;
gap:20px;
margin-top:40px;
}
.hcmpmumwhycard{
padding:30px 22px;
}
.hcmpmumwhyicon{
width:70px;
height:70px;
font-size:28px;
}
.hcmpmumwhycard h3{
font-size:21px;
}
.hcmpmumwhycard p{
font-size:15px;
}
.hcmpmumwhybtnwrap{
margin-top:40px;
}
.hcmpmumwhybtnwrap .hcmpmumprimarybtn{
width:100%;
justify-content:center;
}
}
/*====================================
LARGE DESKTOP
====================================*/
@media(min-width:1400px){
.hcmpmumwhygrid{
gap:35px;
}
.hcmpmumwhycard{
padding:45px 40px;
}
.hcmpmumwhycountbox{
padding:40px 25px;
}
}
/*=========================================
SERVICE AREAS
=========================================*/
.hcmpmumareassection{
padding:100px 0;
background:#f8f9fc;
}
.hcmpmumareagrid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin-top:50px;
}
.hcmpmumareabox{
background:#fff;
border:1px solid #e9e9e9;
border-radius:12px;
padding:18px 20px;
text-align:center;
text-decoration:none;
color:#173d69;
font-weight:600;
transition:.35s;
box-shadow:0 8px 20px rgba(0,0,0,.05);
}
.hcmpmumareabox:hover{
background:#173d69;
color:#fff;
transform:translateY(-5px);
border-color:#173d69;
}
/* Tablet */
@media(max-width:991px){
.hcmpmumareassection{
padding:80px 0;
}
.hcmpmumareagrid{
grid-template-columns:repeat(2,1fr);
}
}
/* Mobile */
@media(max-width:767px){
.hcmpmumareassection{
padding:60px 0;
}
.hcmpmumareagrid{
grid-template-columns:1fr;
gap:15px;
}
.hcmpmumareabox{
padding:16px;
font-size:15px;
}
}
/* Large Desktop */
@media(min-width:1400px){
.hcmpmumareagrid{
grid-template-columns:repeat(5,1fr);
}
}
/*=========================================
CTA SECTION
=========================================*/
.hcmpmumctasection{
padding:90px 0;
background:linear-gradient(135deg,#173d69,#0d2c52);
position:relative;
overflow:hidden;
}
.hcmpmumctasection::before{
content:"";
position:absolute;
width:300px;
height:300px;
background:rgba(255,255,255,.05);
border-radius:50%;
top:-120px;
right:-120px;
}
.hcmpmumctasection::after{
content:"";
position:absolute;
width:250px;
height:250px;
background:rgba(244,180,0,.12);
border-radius:50%;
bottom:-100px;
left:-80px;
}
.hcmpmumctawrapper{
position:relative;
z-index:2;
max-width:900px;
margin:auto;
text-align:center;
}
.hcmpmumctatag{
display:inline-block;
background:#e53935;
color:#000;
padding:10px 24px;
border-radius:40px;
font-weight:700;
margin-bottom:20px;
}
.hcmpmumctawrapper h2{
color:#fff;
font-size:48px;
font-weight:800;
line-height:1.3;
margin-bottom:25px;
}
.hcmpmumctawrapper h2 span{
color:#e53935;
}
.hcmpmumctawrapper p{
color:#e7e7e7;
font-size:18px;
line-height:1.9;
margin-bottom:40px;
}
.hcmpmumctabtnwrap{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
.hcmpmumctacall{
background:#e53935;
color:#000;
text-decoration:none;
padding:17px 36px;
border-radius:50px;
font-weight:700;
transition:.35s;
}
.hcmpmumctacall:hover{
background:#fff;
color:#173d69;
}
.hcmpmumctaquote{
border:2px solid #fff;
color:#fff;
text-decoration:none;
padding:17px 36px;
border-radius:50px;
font-weight:700;
transition:.35s;
}
.hcmpmumctaquote:hover{
background:#fff;
color:#173d69;
}
.hcmpmumctabtnwrap a{
display:flex;
align-items:center;
gap:10px;
}
.hcmpmumctainfo{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-top:45px;
}
.hcmpmumctabox{
background:rgba(255,255,255,.10);
backdrop-filter:blur(12px);
padding:15px 22px;
border-radius:12px;
color:#fff;
display:flex;
align-items:center;
gap:10px;
}
.hcmpmumctabox i{
color:#e53935;
font-size:20px;
}
/*==============================
TABLET
==============================*/
@media(max-width:991px){
.hcmpmumctawrapper h2{
font-size:38px;
}
.hcmpmumctawrapper p{
font-size:16px;
}
}
/*==============================
MOBILE
==============================*/
@media(max-width:767px){
.hcmpmumctasection{
padding:70px 0;
}
.hcmpmumctawrapper h2{
font-size:30px;
}
.hcmpmumctawrapper p{
font-size:15px;
}
.hcmpmumctabtnwrap{
flex-direction:column;
}
.hcmpmumctacall,
.hcmpmumctaquote{
width:100%;
justify-content:center;
}
.hcmpmumctainfo{
flex-direction:column;
}
.hcmpmumctabox{
justify-content:center;
}
}
/*=========================================
FOOTER
=========================================*/
.hcmpmumfooter{
background:#173d69;
color:#fff;
padding:90px 0 0;
position:relative;
}
.hcmpmumfootergrid{
display:grid;
grid-template-columns:1.4fr 1fr 1fr 1.2fr;
gap:50px;
padding-bottom:60px;
}
/*=========================================
LOGO
=========================================*/
.hcmpmumfooterlogo{
display:inline-block;
margin-bottom:25px;
}
.hcmpmumfooterlogo img{
width:280px;
display:block;
}
.hcmpmumfooter p{
color:rgba(255,255,255,.85);
line-height:1.9;
margin-bottom:30px;
font-size:15px;
}
/*=========================================
HEADING
=========================================*/
.hcmpmumfooter h3{
color:#fff;
font-size:24px;
font-weight:700;
margin-bottom:30px;
position:relative;
}
.hcmpmumfooter h3::after{
content:"";
position:absolute;
left:0;
bottom:-10px;
width:55px;
height:3px;
background:#e53935;
}
/*=========================================
LIST
=========================================*/
.hcmpmumfooter ul{
list-style:none;
padding:0;
margin:0;
}
.hcmpmumfooter ul li{
margin-bottom:15px;
}
.hcmpmumfooter ul li a{
color:rgba(255,255,255,.85);
text-decoration:none;
transition:.35s;
}
.hcmpmumfooter ul li a:hover{
color:#e53935;
padding-left:8px;
}
/*=========================================
CONTACT
=========================================*/
.hcmpmumfootercontact li{
display:flex;
align-items:flex-start;
gap:15px;
}
.hcmpmumfootercontact i{
color:#e53935;
font-size:18px;
margin-top:4px;
min-width:18px;
}
.hcmpmumfootercontact span,
.hcmpmumfootercontact a{
color:rgba(255,255,255,.85);
text-decoration:none;
line-height:1.7;
}
/*=========================================
GOOGLE RATING
=========================================*/
.hcmpmumfooterrating{
display:flex;
align-items:center;
gap:6px;
margin-bottom:25px;
flex-wrap:wrap;
}
.hcmpmumfooterrating i{
color:#ffc107;
}
.hcmpmumfooterrating span{
margin-left:8px;
font-weight:600;
}
/*=========================================
SOCIAL
=========================================*/
.hcmpmumfootersocial{
display:flex;
gap:12px;
}
.hcmpmumfootersocial a{
width:45px;
height:45px;
border-radius:50%;
background:rgba(255,255,255,.12);
color:#fff;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
transition:.35s;
}
.hcmpmumfootersocial a:hover{
background:#e53935;
color:#173d69;
transform:translateY(-5px);
}
/*=========================================
FOOTER BOTTOM
=========================================*/
.hcmpmumfooterbottom{
border-top:1px solid rgba(255,255,255,.15);
padding:25px 0;
}
.hcmpmumfooterbottomwrapper{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}
.hcmpmumfooterbottom p{
margin:0;
color:rgba(255,255,255,.80);
font-size:15px;
}
.hcmpmumfooterbottom a{
color:#e53935;
text-decoration:none;
font-weight:600;
}
.hcmpmumfooterbottom a:hover{
color:#fff;
}
/*=========================================
TABLET
=========================================*/
@media(max-width:991px){
.hcmpmumfooter{
padding:70px 0 0;
}
.hcmpmumfootergrid{
grid-template-columns:repeat(2,1fr);
gap:40px;
}
.hcmpmumfooterbottomwrapper{
flex-direction:column;
text-align:center;
}
}
/*=========================================
MOBILE
=========================================*/
@media(max-width:767px){
.hcmpmumfooter{
padding:60px 0 0;
}
.hcmpmumfootergrid{
grid-template-columns:1fr;
gap:40px;
}
.hcmpmumfooterlogo img{
width:160px;
}
.hcmpmumfooter h3{
font-size:22px;
}
.hcmpmumfootersocial{
justify-content:flex-start;
}
.hcmpmumfooterbottom{
padding:20px 0;
}
.hcmpmumfooterbottomwrapper{
flex-direction:column;
text-align:center;
}
.hcmpmumfooterbottom p{
font-size:14px;
}
}
/*=========================================
LARGE DESKTOP
=========================================*/
@media(min-width:1400px){
.hcmpmumfootergrid{
gap:60px;
}
}
/*=========================================
TESTIMONIAL SECTION
=========================================*/
.hcmpmumtestimonialsection{
padding:100px 0;
background:#f8f9fc;
overflow:hidden;
}
.hcmpmumtestimonialslider{
position:relative;
overflow:hidden;
padding-bottom:30px;
}
.hcmpmumtestimonialtrack{
display:flex;
align-items:stretch;
gap:30px;
transition:transform .5s ease;
}
/*=========================================
CARD
=========================================*/
.hcmpmumtestimonialcard{
min-width:calc(33.333% - 20px);
background:#fff;
border-radius:18px;
padding:35px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
border-top:5px solid #e53935;
position:relative;
height:auto;
min-height:420px; /* optional */
}
.hcmpmumtestimonialcard:hover{
transform:translateY(-10px);
box-shadow:0 25px 55px rgba(23,61,105,.18);
}
/*=========================================
STARS
=========================================*/
.hcmpmumtestimonialstars{
margin-bottom:20px;
}
.hcmpmumtestimonialstars i{
color:#e53935;
font-size:18px;
margin-right:3px;
}
/*=========================================
REVIEW
=========================================*/
.hcmpmumtestimonialcard p{
color:#555;
font-size:16px;
line-height:1.9;
margin-bottom:30px;
min-height:165px;
}
/*=========================================
USER
=========================================*/
.hcmpmumtestimonialuser{
display:flex;
align-items:center;
gap:18px;
}
.hcmpmumtestimonialuser img{
width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
border:4px solid #e53935;
}
.hcmpmumtestimonialuser h4{
color:#173d69;
font-size:20px;
margin-bottom:6px;
font-weight:700;
}
.hcmpmumtestimonialuser span{
color:#888;
font-size:14px;
}
.hcmpmumtestimonialwrapper{
background:#ffffff;
border-radius:25px;
padding:40px;
box-shadow:0 20px 50px rgba(0,0,0,.08);
margin-top:50px;
}
/*=========================================
NAVIGATION
=========================================*/
.hcmpmumtestimonialnav{
display:flex;
justify-content:center;
gap:15px;
margin-top:25px;
background:#ffffff;
width:max-content;
margin-left:auto;
margin-right:auto;
padding:15px 20px;
border-radius:60px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}
.hcmpmumtestimonialnav button{
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#173d69;
color:#fff;
font-size:20px;
cursor:pointer;
transition:.35s;
}
.hcmpmumtestimonialnav button:hover{
background:#e53935;
color:#fff;
transform:translateY(-5px);
}
/*=========================================
TABLET
=========================================*/
@media(max-width:991px){
.hcmpmumtestimonialsection{
padding:80px 0;
}
.hcmpmumtestimonialcard{
min-width:calc(50% - 15px);
padding:30px;
}
.hcmpmumtestimonialcard p{
min-height:auto;
}
}
/*=========================================
MOBILE
=========================================*/
@media(max-width:767px){
.hcmpmumtestimonialsection{
padding:60px 0;
}
.hcmpmumtestimonialslider{
margin-top:10px;
}
.hcmpmumtestimonialtrack{
gap:20px;
}
.hcmpmumtestimonialcard{
min-width:100%;
padding:25px;
}
.hcmpmumtestimonialcard p{
font-size:15px;
line-height:1.8;
margin-bottom:25px;
}
.hcmpmumtestimonialuser{
gap:12px;
}
.hcmpmumtestimonialuser img{
width:60px;
height:60px;
}
.hcmpmumtestimonialuser h4{
font-size:18px;
}
.hcmpmumtestimonialuser span{
font-size:13px;
}
.hcmpmumtestimonialnav{
margin-top:20px;
}
.contactsection{
background:#f8f9fc;
}
.hcmpmumtestimonialnav button{
width:48px;
height:48px;
font-size:18px;
}
}
/*=========================================
LARGE DESKTOP
=========================================*/
@media(min-width:1400px){
.hcmpmumtestimonialcard{
padding:40px;
}
.hcmpmumtestimonialcard p{
font-size:17px;
}
}
.hcmpmumtestimonialavatar{
width:70px;
height:70px;
border-radius:50%;
background:#173d69;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
border:4px solid #e53935;
}
/*==================================
TESTIMONIAL NAVIGATION
==================================*/
.hcmpmumtestimonialcontrols{
display:flex;
justify-content:center;
align-items:center;
gap:15px;
margin-top:45px;
}
.hcmpmumtestimonialcontrols button{
width:60px;
height:60px;
border:none;
border-radius:50%;
background:#173d69;
color:#fff;
font-size:20px;
cursor:pointer;
transition:.35s;
box-shadow:0 15px 35px rgba(23,61,105,.25);
}
.hcmpmumtestimonialcontrols button:hover{
background:#e53935;
color:#173d69;
transform:translateY(-5px);
}
/*=========================================
CONTACT INFORMATION
=========================================*/
.hcmpmumcontactsection{
padding:90px 0;
background:#f8f9fc;
}
.hcmpmumcontactgrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.hcmpmumcontactcard{
background:#fff;
padding:45px 30px;
text-align:center;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
border-bottom:4px solid transparent;
}
.hcmpmumcontactcard:hover{
transform:translateY(-8px);
border-color:#e53935;
box-shadow:0 25px 50px rgba(23,61,105,.15);
}
.hcmpmumcontacticon{
width:80px;
height:80px;
margin:0 auto 25px;
border-radius:50%;
background:#173d69;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
transition:.35s;
}
.hcmpmumcontactcard:hover .hcmpmumcontacticon{
background:#e53935;
color:#173d69;
}
.hcmpmumcontactcard h3{
font-size:26px;
color:#173d69;
margin-bottom:18px;
font-weight:700;
}
.hcmpmumcontactcard p{
color:#666;
line-height:1.8;
margin:0;
}
.hcmpmumcontactcard a{
color:#173d69;
font-size:18px;
font-weight:600;
text-decoration:none;
word-break:break-word;
}
.hcmpmumcontactcard a:hover{
color:#e53935;
}
.hcmpmumcontactcard span{
display:block;
margin-top:12px;
color:#888;
font-size:14px;
}
/*==========================
TABLET
==========================*/
@media(max-width:991px){
.hcmpmumcontactgrid{
grid-template-columns:repeat(2,1fr);
}
}
/*==========================
MOBILE
==========================*/
@media(max-width:767px){
.hcmpmumcontactsection{
padding:60px 0;
}
.hcmpmumcontactgrid{
grid-template-columns:1fr;
gap:20px;
}
.hcmpmumcontactcard{
padding:35px 25px;
}
.hcmpmumcontacticon{
width:70px;
height:70px;
font-size:26px;
}
.hcmpmumcontactcard h3{
font-size:22px;
}
.hcmpmumcontactcard a{
font-size:16px;
}
}
.hcmpmumgooglerating{
display:flex;
align-items:center;
justify-content:center;
gap:4px;
flex-wrap:wrap;
}
.hcmpmumgooglerating i{
color:#e53935;
font-size:18px;
}
.hcmpmumgooglerating span{
margin-left:8px;
color:#173d69;
font-weight:600;
font-size:16px;
}
.hcmpmumratingstars{
display:flex;
gap:3px;
margin:6px 0;
}
.hcmpmumratingstars i{
color:#e53935;
font-size:16px;
}
/*==================================================
FINAL BREADCRUMB FIX
ADD AT VERY END OF style.css
==================================================*/
.hcmpmumbreadcrumbsection{
position:relative !important;
width:100% !important;
height:auto !important;
min-height:330px !important;
margin:0 !important;
padding:0 !important;
display:block !important;
background:#173d69 !important;
overflow:hidden !important;
clear:both !important;
top:auto !important;
bottom:auto !important;
left:auto !important;
transform:none !important;
}
.hcmpmumbreadcrumboverlay{
position:absolute !important;
inset:0 !important;
width:100% !important;
height:100% !important;
background:linear-gradient(
90deg,
rgba(13,44,82,.98) 0%,
rgba(23,61,105,.90) 55%,
rgba(23,61,105,.65) 100%
) !important;
z-index:1 !important;
pointer-events:none;
}
.hcmpmumbreadcrumbsection > .hcmpmumcontainer{
position:relative !important;
width:100% !important;
z-index:5 !important;
margin-left:auto !important;
margin-right:auto !important;
}
.hcmpmumbreadcrumbcontent{
position:relative !important;
width:100% !important;
max-width:850px !important;
min-height:330px !important;
display:flex !important;
flex-direction:column !important;
align-items:flex-start !important;
justify-content:center !important;
margin:0 !important;
padding:50px 0 !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
transform:none !important;
z-index:10 !important;
text-align:left !important;
}
/*==================================================
BREADCRUMB TAG
==================================================*/
.hcmpmumbreadcrumbtag{
position:relative !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:auto !important;
margin:0 0 20px 0 !important;
padding:10px 22px !important;
background:#e53935 !important;
color:#000 !important;
border-radius:50px !important;
font-size:14px !important;
font-weight:700 !important;
line-height:1.4 !important;
top:auto !important;
bottom:auto !important;
transform:none !important;
z-index:10 !important;
}
/*==================================================
BREADCRUMB TITLE
==================================================*/
.hcmpmumbreadcrumbcontent h1{
position:relative !important;
display:block !important;
width:100% !important;
margin:0 0 28px 0 !important;
padding:0 !important;
color:#ffffff !important;
font-size:58px !important;
font-weight:800 !important;
line-height:1.15 !important;
top:auto !important;
transform:none !important;
z-index:10 !important;
}
/*==================================================
BREADCRUMB NAV
==================================================*/
.hcmpmumbreadcrumbnav{
position:relative !important;
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
flex-wrap:wrap !important;
gap:12px !important;
width:auto !important;
margin:0 !important;
padding:14px 22px !important;
background:rgba(255,255,255,.12) !important;
border:1px solid rgba(255,255,255,.18) !important;
border-radius:50px !important;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
top:auto !important;
transform:none !important;
z-index:10 !important;
}
.hcmpmumbreadcrumbnav a{
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
color:#ffffff !important;
text-decoration:none !important;
font-size:15px !important;
font-weight:600 !important;
}
.hcmpmumbreadcrumbnav a i{
color:#e53935 !important;
}
.hcmpmumbreadcrumbnav a:hover{
color:#e53935 !important;
}
.hcmpmumbreadcrumbdivider{
display:inline-flex !important;
align-items:center !important;
color:rgba(255,255,255,.55) !important;
font-size:11px !important;
}
.hcmpmumbreadcrumbactive{
color:#e53935 !important;
font-size:15px !important;
font-weight:700 !important;
}
/*==================================================
DECORATION
==================================================*/
.hcmpmumbreadcrumbsection::before{
content:"";
position:absolute;
width:300px;
height:300px;
top:-160px;
right:-60px;
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
z-index:2;
pointer-events:none;
}
.hcmpmumbreadcrumbsection::after{
content:"";
position:absolute;
width:260px;
height:260px;
right:80px;
bottom:-150px;
background:rgba(244,180,0,.08);
border-radius:50%;
z-index:2;
pointer-events:none;
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumbreadcrumbsection{
min-height:290px !important;
}
.hcmpmumbreadcrumbcontent{
min-height:290px !important;
padding:45px 0 !important;
}
.hcmpmumbreadcrumbcontent h1{
font-size:46px !important;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumbreadcrumbsection{
min-height:260px !important;
}
.hcmpmumbreadcrumbcontent{
min-height:260px !important;
align-items:center !important;
justify-content:center !important;
padding:40px 0 !important;
text-align:center !important;
}
.hcmpmumbreadcrumbtag{
margin-bottom:17px !important;
padding:8px 17px !important;
font-size:12px !important;
}
.hcmpmumbreadcrumbcontent h1{
margin-bottom:22px !important;
font-size:36px !important;
text-align:center !important;
}
.hcmpmumbreadcrumbnav{
justify-content:center !important;
padding:12px 18px !important;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumbreadcrumbsection{
min-height:240px !important;
}
.hcmpmumbreadcrumbcontent{
min-height:240px !important;
padding:35px 0 !important;
}
.hcmpmumbreadcrumbcontent h1{
font-size:31px !important;
}
.hcmpmumbreadcrumbnav{
border-radius:15px !important;
}
}
/*=========================================
ABOUT PAGE SECTION
=========================================*/
.hcmpmumaboutpagesection{
position:relative;
padding:100px 0;
background:#f8f9fc;
overflow:hidden;
}
.hcmpmumaboutpagesection::before{
content:"";
position:absolute;
width:350px;
height:350px;
border-radius:50%;
background:rgba(244,180,0,.07);
top:-170px;
right:-120px;
}
.hcmpmumaboutpagesection::after{
content:"";
position:absolute;
width:300px;
height:300px;
border-radius:50%;
background:rgba(23,61,105,.05);
bottom:-150px;
left:-120px;
}
.hcmpmumaboutpagegrid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr);
gap:65px;
align-items:center;
}
/*=========================================
LEFT CONTENT
=========================================*/
.hcmpmumaboutpagetag{
display:inline-flex;
align-items:center;
padding:10px 22px;
margin-bottom:22px;
border-radius:50px;
background:#e53935;
color:#fff;
font-size:14px;
font-weight:700;
letter-spacing:.3px;
}
.hcmpmumaboutpagecontent h1{
margin:0 0 25px;
color:#173d69;
font-size:52px;
font-weight:800;
line-height:1.2;
}
.hcmpmumaboutpagecontent h1 span{
color:#e53935;
}
.hcmpmumaboutpagecontent > p{
margin:0 0 20px;
color:#626262;
font-size:16px;
line-height:1.9;
}
.hcmpmumaboutpagecontent .hcmpmumaboutpageintro{
color:#444;
font-size:18px;
}
/*=========================================
FEATURES
=========================================*/
.hcmpmumaboutpagefeatures{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
margin-top:35px;
}
.hcmpmumaboutpagefeature{
display:flex;
align-items:flex-start;
gap:16px;
padding:22px;
background:#fff;
border:1px solid #eceff3;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,.05);
transition:transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
.hcmpmumaboutpagefeature:hover{
transform:translateY(-6px);
border-color:rgba(244,180,0,.6);
box-shadow:0 18px 40px rgba(23,61,105,.12);
}
.hcmpmumaboutpagefeatureicon{
width:55px;
height:55px;
min-width:55px;
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
background:#173d69;
color:#fff;
font-size:22px;
transition:.35s ease;
}
.hcmpmumaboutpagefeature:hover .hcmpmumaboutpagefeatureicon{
background:#e53935;
color:#ffc107;
transform:rotate(-6deg);
}
.hcmpmumaboutpagefeature h3{
margin:0 0 7px;
color:#173d69;
font-size:18px;
font-weight:700;
}
.hcmpmumaboutpagefeature p{
margin:0;
color:#6c6c6c;
font-size:14px;
line-height:1.7;
}
/*=========================================
BUTTONS
=========================================*/
.hcmpmumaboutpagebuttons{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:16px;
margin-top:38px;
}
.hcmpmumaboutpageprimarybtn,
.hcmpmumaboutpagesecondarybtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:56px;
padding:15px 28px;
border-radius:50px;
text-decoration:none;
font-size:15px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumaboutpageprimarybtn{
background:#173d69;
color:#fff;
box-shadow:0 12px 30px rgba(23,61,105,.20);
}
.hcmpmumaboutpageprimarybtn:hover{
background:#e53935;
color:#111;
transform:translateY(-3px);
}
.hcmpmumaboutpageprimarybtn i{
transition:.35s ease;
}
.hcmpmumaboutpageprimarybtn:hover i{
transform:translateX(5px);
}
.hcmpmumaboutpagesecondarybtn{
border:2px solid #173d69;
color:#173d69;
background:#fff;
}
.hcmpmumaboutpagesecondarybtn:hover{
background:#173d69;
color:#fff;
transform:translateY(-3px);
}
/*=========================================
RIGHT SIDE
=========================================*/
.hcmpmumaboutpageside{
display:flex;
flex-direction:column;
gap:25px;
}
.hcmpmumaboutpagetrustbox{
position:relative;
padding:45px 38px;
background:#173d69;
border-radius:25px;
box-shadow:0 25px 60px rgba(23,61,105,.25);
overflow:hidden;
}
.hcmpmumaboutpagetrustbox::before{
content:"";
position:absolute;
width:220px;
height:220px;
border-radius:50%;
background:rgba(255,255,255,.05);
top:-100px;
right:-90px;
}
.hcmpmumaboutpagetrusttag{
position:relative;
z-index:2;
display:inline-block;
margin-bottom:18px;
padding:8px 17px;
border-radius:40px;
background:#e53935;
color:#fff;
font-size:13px;
font-weight:700;
}
.hcmpmumaboutpagetrustbox h2{
position:relative;
z-index:2;
margin:0 0 18px;
color:#fff;
font-size:32px;
font-weight:800;
line-height:1.3;
}
.hcmpmumaboutpagetrustbox p{
position:relative;
z-index:2;
margin:0 0 28px;
color:rgba(255,255,255,.82);
font-size:15px;
line-height:1.8;
}
.hcmpmumaboutpagetrustbox ul{
position:relative;
z-index:2;
list-style:none;
margin:0;
padding:0;
}
.hcmpmumaboutpagetrustbox ul li{
display:flex;
align-items:center;
gap:12px;
margin-bottom:17px;
color:#fff;
font-size:15px;
font-weight:600;
}
.hcmpmumaboutpagetrustbox ul li:last-child{
margin-bottom:0;
}
.hcmpmumaboutpagetrustbox ul li i{
width:26px;
height:26px;
min-width:26px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#e53935;
color:#fff;
font-size:11px;
}
/*=========================================
COMMITMENT BOX
=========================================*/
.hcmpmumaboutpagequote{
display:flex;
align-items:center;
gap:20px;
padding:27px;
background:#fff;
border-radius:18px;
border-left:5px solid #e53935;
box-shadow:0 15px 40px rgba(0,0,0,.07);
}
.hcmpmumaboutpagequoteicon{
width:65px;
height:65px;
min-width:65px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(23,61,105,.08);
color:#173d69;
font-size:27px;
}
.hcmpmumaboutpagequote span{
display:block;
margin-bottom:5px;
color:#e53935;
font-size:13px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.8px;
}
.hcmpmumaboutpagequote h3{
margin:0;
color:#173d69;
font-size:19px;
line-height:1.5;
}
/*=========================================
TABLET
=========================================*/
@media(max-width:1199px){
.hcmpmumaboutpagegrid{
grid-template-columns:minmax(0,1fr) minmax(340px,.75fr);
gap:40px;
}
.hcmpmumaboutpagecontent h1{
font-size:44px;
}
.hcmpmumaboutpagefeatures{
grid-template-columns:1fr;
}
}
@media(max-width:991px){
.hcmpmumaboutpagesection{
padding:80px 0;
}
.hcmpmumaboutpagegrid{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumaboutpagecontent h1{
font-size:40px;
}
.hcmpmumaboutpagefeatures{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hcmpmumaboutpageside{
max-width:700px;
width:100%;
margin:0 auto;
}
}
/*=========================================
MOBILE
=========================================*/
@media(max-width:767px){
.hcmpmumaboutpagesection{
padding:60px 0;
}
.hcmpmumaboutpagetag{
padding:9px 17px;
font-size:12px;
}
.hcmpmumaboutpagecontent h1{
font-size:31px;
line-height:1.25;
}
.hcmpmumaboutpagecontent .hcmpmumaboutpageintro{
font-size:16px;
}
.hcmpmumaboutpagecontent > p{
font-size:15px;
line-height:1.8;
}
.hcmpmumaboutpagefeatures{
grid-template-columns:1fr;
gap:15px;
}
.hcmpmumaboutpagefeature{
padding:20px;
}
.hcmpmumaboutpagebuttons{
flex-direction:column;
align-items:stretch;
}
.hcmpmumaboutpageprimarybtn,
.hcmpmumaboutpagesecondarybtn{
width:100%;
}
.hcmpmumaboutpagetrustbox{
padding:35px 25px;
border-radius:20px;
}
.hcmpmumaboutpagetrustbox h2{
font-size:27px;
}
.hcmpmumaboutpagequote{
align-items:flex-start;
padding:22px;
}
.hcmpmumaboutpagequoteicon{
width:55px;
height:55px;
min-width:55px;
font-size:23px;
}
.hcmpmumaboutpagequote h3{
font-size:17px;
}
}
/*=========================================
SMALL MOBILE
=========================================*/
@media(max-width:480px){
.hcmpmumaboutpagecontent h1{
font-size:28px;
}
.hcmpmumaboutpagefeature{
flex-direction:column;
}
.hcmpmumaboutpagequote{
flex-direction:column;
}
}
/*==================================================
hcmpmum MOVING JOURNEY SECTION
==================================================*/
.hcmpmumjourneysection{
position:relative;
padding:100px 0;
background:#f7f9fc;
overflow:hidden;
}
.hcmpmumjourneysection::before{
content:"";
position:absolute;
width:420px;
height:420px;
top:-220px;
left:-220px;
border-radius:50%;
border:70px solid rgba(23,61,105,.035);
pointer-events:none;
}
.hcmpmumjourneysection::after{
content:"";
position:absolute;
width:300px;
height:300px;
right:-150px;
bottom:-150px;
border-radius:50%;
background:rgba(244,180,0,.06);
pointer-events:none;
}
.hcmpmumjourneygrid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
gap:80px;
align-items:center;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpmumjourneycontent{
position:relative;
}
.hcmpmumjourneysubtitle{
display:inline-flex;
align-items:center;
margin-bottom:20px;
padding:9px 20px;
background:rgba(244,180,0,.15);
border:1px solid rgba(244,180,0,.35);
border-radius:50px;
color:#173d69;
font-size:13px;
font-weight:700;
letter-spacing:.5px;
text-transform:uppercase;
}
.hcmpmumjourneycontent h2{
margin:0 0 25px;
color:#173d69;
font-size:48px;
font-weight:800;
line-height:1.2;
}
.hcmpmumjourneycontent h2 span{
color:#e53935;
}
.hcmpmumjourneycontent p{
margin:0 0 18px;
color:#626b77;
font-size:16px;
line-height:1.9;
}
.hcmpmumjourneycontent .hcmpmumjourneylead{
color:#3f4853;
font-size:17px;
}
/*==================================================
SERVICE PROMISE
==================================================*/
.hcmpmumjourneypromise{
display:flex;
align-items:center;
gap:18px;
margin:32px 0;
padding:22px 25px;
background:#fff;
border-left:5px solid #e53935;
border-radius:0 16px 16px 0;
box-shadow:0 15px 40px rgba(23,61,105,.08);
}
.hcmpmumjourneypromiseicon{
width:60px;
height:60px;
min-width:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#173d69;
color:#fff;
font-size:24px;
}
.hcmpmumjourneypromisetext span{
display:block;
margin-bottom:5px;
color:#e53935;
font-size:12px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumjourneypromisetext h3{
margin:0;
color:#173d69;
font-size:18px;
font-weight:700;
line-height:1.5;
}
/*==================================================
BUTTON
==================================================*/
.hcmpmumjourneybtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
min-height:56px;
padding:15px 30px;
background:#173d69;
color:#fff;
border-radius:50px;
text-decoration:none;
font-size:15px;
font-weight:700;
box-shadow:0 12px 30px rgba(23,61,105,.20);
transition:
transform .35s ease,
background .35s ease,
color .35s ease;
}
.hcmpmumjourneybtn i{
transition:transform .35s ease;
}
.hcmpmumjourneybtn:hover{
background:#e53935;
color:#173d69;
transform:translateY(-3px);
}
.hcmpmumjourneybtn:hover i{
transform:translateX(5px);
}
/*==================================================
RIGHT PROCESS
==================================================*/
.hcmpmumjourneyprocess{
position:relative;
display:flex;
flex-direction:column;
gap:22px;
}
.hcmpmumjourneyline{
position:absolute;
top:45px;
bottom:45px;
left:30px;
width:2px;
background:linear-gradient(
to bottom,
#e53935,
rgba(23,61,105,.20)
);
z-index:1;
}
.hcmpmumjourneyitem{
position:relative;
display:grid;
grid-template-columns:62px minmax(0,1fr);
gap:20px;
align-items:center;
z-index:2;
}
/*==================================================
NUMBER
==================================================*/
.hcmpmumjourneynumber{
position:relative;
width:62px;
height:62px;
display:flex;
align-items:center;
justify-content:center;
border:6px solid #f7f9fc;
border-radius:50%;
background:#e53935;
color:#173d69;
font-size:16px;
font-weight:800;
box-shadow:0 8px 25px rgba(244,180,0,.25);
z-index:3;
}
/*==================================================
PROCESS BOX
==================================================*/
.hcmpmumjourneybox{
display:flex;
align-items:flex-start;
gap:20px;
padding:26px 28px;
background:#fff;
border:1px solid #e9edf3;
border-radius:18px;
box-shadow:0 12px 35px rgba(23,61,105,.06);
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
.hcmpmumjourneyitem:hover .hcmpmumjourneybox{
transform:translateX(8px);
border-color:rgba(244,180,0,.55);
box-shadow:0 20px 45px rgba(23,61,105,.12);
}
.hcmpmumjourneyicon{
width:58px;
height:58px;
min-width:58px;
display:flex;
align-items:center;
justify-content:center;
border-radius:15px;
background:rgba(23,61,105,.08);
color:#173d69;
font-size:23px;
transition:.35s ease;
}
.hcmpmumjourneyitem:hover .hcmpmumjourneyicon{
background:#173d69;
color:#fff;
transform:rotate(-5deg);
}
.hcmpmumjourneyboxcontent span{
display:block;
margin-bottom:5px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumjourneyboxcontent h3{
margin:0 0 8px;
color:#173d69;
font-size:20px;
font-weight:700;
}
.hcmpmumjourneyboxcontent p{
margin:0;
color:#6b7280;
font-size:14px;
line-height:1.7;
}
/*==================================================
TABLET
==================================================*/
@media(max-width:1199px){
.hcmpmumjourneygrid{
gap:50px;
}
.hcmpmumjourneycontent h2{
font-size:42px;
}
.hcmpmumjourneybox{
padding:23px;
}
}
@media(max-width:991px){
.hcmpmumjourneysection{
padding:80px 0;
}
.hcmpmumjourneygrid{
grid-template-columns:1fr;
gap:55px;
}
.hcmpmumjourneycontent{
max-width:750px;
}
.hcmpmumjourneycontent h2{
font-size:40px;
}
.hcmpmumjourneyprocess{
max-width:800px;
width:100%;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumjourneysection{
padding:60px 0;
}
.hcmpmumjourneysubtitle{
margin-bottom:17px;
padding:8px 16px;
font-size:11px;
}
.hcmpmumjourneycontent h2{
font-size:31px;
line-height:1.3;
}
.hcmpmumjourneycontent p,
.hcmpmumjourneycontent .hcmpmumjourneylead{
font-size:15px;
line-height:1.8;
}
.hcmpmumjourneypromise{
padding:20px;
}
.hcmpmumjourneypromiseicon{
width:52px;
height:52px;
min-width:52px;
font-size:21px;
}
.hcmpmumjourneypromisetext h3{
font-size:16px;
}
.hcmpmumjourneybtn{
width:100%;
}
.hcmpmumjourneyprocess{
gap:18px;
}
.hcmpmumjourneyline{
left:25px;
}
.hcmpmumjourneyitem{
grid-template-columns:52px minmax(0,1fr);
gap:12px;
}
.hcmpmumjourneynumber{
width:52px;
height:52px;
border-width:5px;
font-size:14px;
}
.hcmpmumjourneybox{
gap:15px;
padding:20px;
}
.hcmpmumjourneyicon{
width:50px;
height:50px;
min-width:50px;
font-size:20px;
}
.hcmpmumjourneyboxcontent h3{
font-size:18px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumjourneycontent h2{
font-size:28px;
}
.hcmpmumjourneypromise{
align-items:flex-start;
}
.hcmpmumjourneyitem{
display:block;
padding-left:0;
}
.hcmpmumjourneyline{
display:none;
}
.hcmpmumjourneynumber{
margin:0 0 -13px 18px;
}
.hcmpmumjourneybox{
flex-direction:column;
padding:28px 20px 22px;
}
.hcmpmumjourneyitem:hover .hcmpmumjourneybox{
transform:translateY(-4px);
}
}
.hcmpmumsectiontitle{
max-width:800px;
margin:0 auto 60px;
text-align:center;
position:relative;
}
.hcmpmumsectionsubtitle{
display:inline-block;
padding:10px 24px;
background:#e53935;
color:#000;
font-size:15px;
font-weight:700;
border-radius:40px;
margin-bottom:18px;
}
.hcmpmumsectiontitle h2{
font-size:46px;
font-weight:800;
color:#173d69;
line-height:1.3;
margin-bottom:18px;
}
.hcmpmumsectiontitle h2 span{
color:#e53935;
}
.hcmpmumsectiontitle p{
font-size:17px;
color:#666;
line-height:1.9;
}
/*==================================================
hcmpmum WHY CHOOSE US - DIFFERENT DESIGN
==================================================*/
.hcmpmumreasonsection{
position:relative;
width:100%;
padding:100px 0;
background:#ffffff;
overflow:hidden;
}
/*==================================================
BACKGROUND
==================================================*/
.hcmpmumreasonsection::before{
content:"";
position:absolute;
width:500px;
height:500px;
left:-300px;
top:-250px;
border:80px solid rgba(23,61,105,.025);
border-radius:50%;
pointer-events:none;
}
.hcmpmumreasonsection::after{
content:"";
position:absolute;
width:280px;
height:280px;
right:-140px;
bottom:-140px;
background:rgba(244,180,0,.06);
border-radius:50%;
pointer-events:none;
}
/*==================================================
MAIN LAYOUT
==================================================*/
.hcmpmumreasonlayout{
position:relative;
z-index:2;
display:grid;
grid-template-columns:
minmax(0,.82fr)
minmax(0,1.18fr);
gap:80px;
align-items:center;
}
/*==================================================
LEFT INTRO
==================================================*/
.hcmpmumreasonintro{
position:relative;
width:100%;
text-align:left;
}
.hcmpmumreasonlabel{
display:inline-flex;
align-items:center;
justify-content:flex-start;
margin:0 0 20px;
padding:9px 19px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
border-radius:0 6px 6px 0;
color:#173d69;
font-size:13px;
font-weight:800;
letter-spacing:.7px;
line-height:1.4;
text-transform:uppercase;
}
.hcmpmumreasonintro h2{
margin:0 0 25px;
padding:0;
color:#173d69;
font-size:49px;
font-weight:800;
line-height:1.2;
text-align:left;
}
.hcmpmumreasonintro h2 span{
display:block;
color:#e53935;
}
.hcmpmumreasonintro p{
max-width:650px;
margin:0 0 18px;
padding:0;
color:#69717d;
font-size:16px;
font-weight:400;
line-height:1.9;
text-align:left;
}
.hcmpmumreasonintro .hcmpmumreasonlead{
color:#3f4854;
font-size:17px;
}
/*==================================================
PROMISE
==================================================*/
.hcmpmumreasonpromise{
position:relative;
display:flex;
align-items:center;
justify-content:flex-start;
gap:18px;
width:100%;
margin:32px 0;
padding:23px 25px;
background:#f7f9fc;
border:1px solid #e9edf3;
border-radius:16px;
text-align:left;
}
.hcmpmumreasonpromise::before{
content:"";
position:absolute;
top:0;
left:0;
width:5px;
height:100%;
background:#e53935;
border-radius:16px 0 0 16px;
}
.hcmpmumreasonpromiseicon{
width:62px;
height:62px;
min-width:62px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:14px;
font-size:25px;
}
.hcmpmumreasonpromisetext{
text-align:left;
}
.hcmpmumreasonpromisetext span{
display:block;
margin:0 0 5px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
text-align:left;
}
.hcmpmumreasonpromisetext h3{
margin:0;
padding:0;
color:#173d69;
font-size:18px;
font-weight:700;
line-height:1.5;
text-align:left;
}
/*==================================================
ACTIONS
==================================================*/
.hcmpmumreasonactions{
display:flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
gap:20px;
margin-top:35px;
text-align:left;
}
.hcmpmumreasonquote{
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
min-height:57px;
padding:15px 30px;
background:#173d69;
color:#ffffff;
border-radius:8px;
text-decoration:none;
font-size:15px;
font-weight:700;
box-shadow:0 12px 30px rgba(23,61,105,.18);
transition:.35s ease;
}
.hcmpmumreasonquote i{
transition:transform .35s ease;
}
.hcmpmumreasonquote:hover{
background:#e53935;
color:#173d69;
transform:translateY(-3px);
}
.hcmpmumreasonquote:hover i{
transform:translateX(5px);
}
/*==================================================
PHONE
==================================================*/
.hcmpmumreasonphone{
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:12px;
color:#173d69;
text-decoration:none;
text-align:left;
}
.hcmpmumreasonphoneicon{
width:50px;
height:50px;
min-width:50px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(244,180,0,.15);
color:#e53935;
border-radius:50%;
font-size:18px;
transition:.35s ease;
}
.hcmpmumreasonphone:hover .hcmpmumreasonphoneicon{
background:#e53935;
color:#173d69;
transform:rotate(-8deg);
}
.hcmpmumreasonphonetext{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
}
.hcmpmumreasonphonetext small{
margin-bottom:3px;
color:#7a828d;
font-size:11px;
font-weight:600;
}
.hcmpmumreasonphonetext strong{
color:#173d69;
font-size:16px;
font-weight:800;
}
/*==================================================
RIGHT LIST
==================================================*/
.hcmpmumreasonlist{
position:relative;
display:flex;
flex-direction:column;
align-items:stretch;
gap:14px;
width:100%;
text-align:left;
}
/*==================================================
REASON ITEM
==================================================*/
.hcmpmumreasonitem{
position:relative;
display:grid;
grid-template-columns:
68px
minmax(0,1fr)
42px;
gap:20px;
align-items:center;
width:100%;
min-height:130px;
padding:22px 22px;
background:#f8fafc;
border:1px solid #e8edf3;
border-radius:14px;
overflow:hidden;
text-align:left;
transition:
transform .35s ease,
background .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.hcmpmumreasonitem::before{
content:"";
position:absolute;
top:0;
left:0;
width:4px;
height:0;
background:#e53935;
transition:height .35s ease;
}
.hcmpmumreasonitem:hover{
background:#ffffff;
border-color:rgba(244,180,0,.50);
box-shadow:0 18px 45px rgba(23,61,105,.10);
transform:translateX(8px);
}
.hcmpmumreasonitem:hover::before{
height:100%;
}
/*==================================================
ITEM ICON
==================================================*/
.hcmpmumreasonitemicon{
position:relative;
z-index:2;
width:68px;
height:68px;
min-width:68px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:12px;
font-size:25px;
transition:
background .35s ease,
color .35s ease,
transform .35s ease;
}
.hcmpmumreasonitem:hover .hcmpmumreasonitemicon{
background:#e53935;
color:#173d69;
transform:rotate(-5deg);
}
/*==================================================
ITEM CONTENT
==================================================*/
.hcmpmumreasonitemcontent{
position:relative;
z-index:2;
min-width:0;
text-align:left;
}
.hcmpmumreasonnumber{
display:block;
margin:0 0 4px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-align:left;
}
.hcmpmumreasonitemcontent h3{
margin:0 0 7px;
padding:0;
color:#173d69;
font-size:19px;
font-weight:700;
line-height:1.4;
text-align:left;
}
.hcmpmumreasonitemcontent p{
margin:0;
padding:0;
color:#6b7280;
font-size:14px;
font-weight:400;
line-height:1.7;
text-align:left;
}
/*==================================================
ARROW
==================================================*/
.hcmpmumreasonarrow{
position:relative;
z-index:2;
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #dfe5ec;
border-radius:50%;
color:#173d69;
font-size:14px;
transition:.35s ease;
}
.hcmpmumreasonitem:hover .hcmpmumreasonarrow{
background:#173d69;
border-color:#173d69;
color:#ffffff;
transform:translateX(3px);
}
/*==================================================
TABLET LANDSCAPE
==================================================*/
@media(max-width:1199px){
.hcmpmumreasonlayout{
gap:50px;
grid-template-columns:
minmax(0,.8fr)
minmax(0,1.2fr);
}
.hcmpmumreasonintro h2{
font-size:42px;
}
.hcmpmumreasonitem{
grid-template-columns:
60px
minmax(0,1fr)
38px;
gap:16px;
padding:20px;
}
.hcmpmumreasonitemicon{
width:60px;
height:60px;
min-width:60px;
font-size:22px;
}
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumreasonsection{
padding:80px 0;
}
.hcmpmumreasonlayout{
grid-template-columns:1fr;
gap:55px;
}
.hcmpmumreasonintro{
max-width:800px;
text-align:left;
}
.hcmpmumreasonintro h2{
max-width:700px;
font-size:40px;
text-align:left;
}
.hcmpmumreasonintro p{
max-width:750px;
text-align:left;
}
.hcmpmumreasonlist{
max-width:850px;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumreasonsection{
padding:60px 0;
}
.hcmpmumreasonlabel{
margin-bottom:17px;
padding:8px 15px;
font-size:11px;
}
.hcmpmumreasonintro h2{
margin-bottom:20px;
font-size:31px;
line-height:1.3;
text-align:left;
}
.hcmpmumreasonintro h2 span{
display:inline;
}
.hcmpmumreasonintro p,
.hcmpmumreasonintro .hcmpmumreasonlead{
font-size:15px;
line-height:1.8;
text-align:left;
}
.hcmpmumreasonpromise{
align-items:flex-start;
padding:20px;
text-align:left;
}
.hcmpmumreasonpromiseicon{
width:54px;
height:54px;
min-width:54px;
font-size:21px;
}
.hcmpmumreasonpromisetext h3{
font-size:16px;
text-align:left;
}
.hcmpmumreasonactions{
flex-direction:column;
align-items:flex-start;
width:100%;
text-align:left;
}
.hcmpmumreasonquote{
width:100%;
}
.hcmpmumreasonphone{
width:100%;
}
.hcmpmumreasonlist{
gap:14px;
}
.hcmpmumreasonitem{
grid-template-columns:
55px
minmax(0,1fr);
gap:15px;
min-height:auto;
padding:20px;
text-align:left;
}
.hcmpmumreasonitemicon{
width:55px;
height:55px;
min-width:55px;
font-size:21px;
}
.hcmpmumreasonitemcontent h3{
font-size:18px;
text-align:left;
}
.hcmpmumreasonitemcontent p{
font-size:14px;
text-align:left;
}
.hcmpmumreasonarrow{
display:none;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumreasonintro h2{
font-size:28px;
text-align:left;
}
.hcmpmumreasonpromise{
flex-direction:column;
text-align:left;
}
.hcmpmumreasonitem{
grid-template-columns:1fr;
padding:22px 20px;
text-align:left;
}
.hcmpmumreasonitemicon{
width:54px;
height:54px;
min-width:54px;
}
.hcmpmumreasonitemcontent,
.hcmpmumreasonitemcontent h3,
.hcmpmumreasonitemcontent p,
.hcmpmumreasonnumber{
text-align:left;
}
.hcmpmumreasonitem:hover{
transform:translateY(-4px);
}
}
/*==================================================
REQUEST A QUOTE PAGE
==================================================*/
.hcmpmumquotepagesection{
position:relative;
width:100%;
padding:100px 0;
background:#f6f8fb;
overflow:hidden;
}
.hcmpmumquotepagesection::before{
content:"";
position:absolute;
width:420px;
height:420px;
left:-250px;
top:-220px;
border:70px solid rgba(23,61,105,.025);
border-radius:50%;
pointer-events:none;
}
.hcmpmumquotepagesection::after{
content:"";
position:absolute;
width:320px;
height:320px;
right:-160px;
bottom:-170px;
background:rgba(244,180,0,.07);
border-radius:50%;
pointer-events:none;
}
/*==================================================
MAIN LAYOUT
==================================================*/
.hcmpmumquotepagelayout{
position:relative;
z-index:2;
display:grid;
grid-template-columns:
minmax(0,.78fr)
minmax(0,1.22fr);
gap:75px;
align-items:center;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpmumquotepageinfo{
position:relative;
width:100%;
text-align:left;
}
.hcmpmumquotepagelabel{
display:inline-flex;
align-items:center;
margin:0 0 20px;
padding:9px 18px;
background:rgba(244,180,0,.15);
border-left:4px solid #e53935;
border-radius:0 6px 6px 0;
color:#173d69;
font-size:13px;
font-weight:800;
letter-spacing:.7px;
text-transform:uppercase;
}
.hcmpmumquotepageinfo h2{
margin:0 0 25px;
padding:0;
color:#173d69;
font-size:49px;
font-weight:800;
line-height:1.2;
text-align:left;
}
.hcmpmumquotepageinfo h2 span{
display:block;
color:#e53935;
}
.hcmpmumquotepageinfo > p{
max-width:620px;
margin:0 0 18px;
color:#68717d;
font-size:16px;
line-height:1.9;
text-align:left;
}
.hcmpmumquotepageinfo .hcmpmumquotepagelead{
color:#3f4854;
font-size:17px;
}
/*==================================================
TRUST POINTS
==================================================*/
.hcmpmumquotepagepoints{
display:flex;
flex-direction:column;
gap:18px;
margin:35px 0;
}
.hcmpmumquotepagepoint{
display:flex;
align-items:flex-start;
justify-content:flex-start;
gap:16px;
text-align:left;
}
.hcmpmumquotepagepointicon{
width:38px;
height:38px;
min-width:38px;
display:flex;
align-items:center;
justify-content:center;
margin-top:2px;
background:#173d69;
color:#ffffff;
border-radius:50%;
font-size:13px;
box-shadow:0 8px 20px rgba(23,61,105,.15);
}
.hcmpmumquotepagepoint h3{
margin:0 0 5px;
color:#173d69;
font-size:17px;
font-weight:700;
line-height:1.4;
text-align:left;
}
.hcmpmumquotepagepoint p{
margin:0;
color:#6b7280;
font-size:14px;
line-height:1.7;
text-align:left;
}
/*==================================================
CALL BOX
==================================================*/
.hcmpmumquotepagecall{
display:flex;
align-items:center;
justify-content:flex-start;
gap:17px;
max-width:430px;
padding:22px 24px;
background:#173d69;
border-radius:14px;
box-shadow:0 15px 35px rgba(23,61,105,.20);
text-align:left;
}
.hcmpmumquotepagecallicon{
width:58px;
height:58px;
min-width:58px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:12px;
font-size:23px;
}
.hcmpmumquotepagecallcontent{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
}
.hcmpmumquotepagecallcontent span{
margin-bottom:4px;
color:rgba(255,255,255,.75);
font-size:12px;
font-weight:600;
}
.hcmpmumquotepagecallcontent a{
color:#ffffff;
text-decoration:none;
font-size:21px;
font-weight:800;
}
/*==================================================
FORM WRAPPER
==================================================*/
.hcmpmumquoteformwrap{
position:relative;
width:100%;
padding:38px;
background:#ffffff;
border:1px solid #e5eaf0;
border-radius:22px;
box-shadow:0 25px 70px rgba(23,61,105,.12);
text-align:left;
}
.hcmpmumquoteformwrap::before{
content:"";
position:absolute;
top:0;
left:38px;
width:90px;
height:5px;
background:#e53935;
border-radius:0 0 6px 6px;
}
/*==================================================
FORM TOP
==================================================*/
.hcmpmumquoteformtop{
display:flex;
align-items:center;
justify-content:flex-start;
gap:18px;
margin-bottom:32px;
padding-bottom:25px;
border-bottom:1px solid #edf0f4;
text-align:left;
}
/* ICON BOX */
.hcmpmumquoteformicon{
width:64px !important;
height:64px !important;
min-width:64px !important;
min-height:64px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 !important;
background:#173d69;
color:#ffffff !important;
border-radius:15px;
line-height:1 !important;
flex-shrink:0;
}
/* ACTUAL ICON */
.hcmpmumquoteformicon i{
display:block;
margin:0;
padding:0;
color:#ffffff !important;
font-size:27px !important;
line-height:1 !important;
}
/* TEXT WRAPPER */
.hcmpmumquoteformtop > div{
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
min-width:0;
text-align:left;
}
/* SMALL LABEL */
/* IMPORTANT:
only target span inside text div
*/
.hcmpmumquoteformtop > div > span{
display:block;
margin:0 0 5px;
padding:0;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.4;
letter-spacing:.8px;
text-transform:uppercase;
text-align:left;
}
/* HEADING */
.hcmpmumquoteformtop h3{
margin:0;
padding:0;
color:#173d69;
font-size:27px;
font-weight:800;
line-height:1.3;
text-align:left;
}
*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumquoteformicon{
width:60px !important;
height:60px !important;
min-width:60px !important;
min-height:60px !important;
}
.hcmpmumquoteformicon i{
font-size:25px !important;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumquoteformtop{
gap:15px;
margin-bottom:27px;
padding-bottom:22px;
}
.hcmpmumquoteformicon{
width:56px !important;
height:56px !important;
min-width:56px !important;
min-height:56px !important;
border-radius:13px;
}
.hcmpmumquoteformicon i{
font-size:23px !important;
}
.hcmpmumquoteformtop h3{
font-size:23px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumquoteformtop{
align-items:center;
}
.hcmpmumquoteformicon{
width:52px !important;
height:52px !important;
min-width:52px !important;
min-height:52px !important;
}
.hcmpmumquoteformicon i{
font-size:21px !important;
}
.hcmpmumquoteformtop h3{
font-size:21px;
}
}
/*==================================================
FORM GRID
==================================================*/
.hcmpmumquoteform{
display:grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:22px 20px;
}
.hcmpmumquoteformfull{
grid-column:1 / -1;
}
/*==================================================
FORM GROUP
==================================================*/
.hcmpmumquoteformgroup{
width:100%;
text-align:left;
}
.hcmpmumquoteformgroup label{
display:block;
margin:0 0 9px;
color:#303946;
font-size:13px;
font-weight:700;
text-align:left;
}
.hcmpmumquoteformgroup label span{
color:#e53935;
}
/*==================================================
INPUT WRAPPER
==================================================*/
.hcmpmumquoteinput{
position:relative;
display:flex;
align-items:center;
width:100%;
}
.hcmpmumquoteinput > i{
position:absolute;
left:17px;
top:50%;
transform:translateY(-50%);
color:#8a939f;
font-size:15px;
z-index:2;
pointer-events:none;
}
.hcmpmumquoteinput input,
.hcmpmumquoteinput select,
.hcmpmumquoteinput textarea{
width:100%;
margin:0;
padding:15px 17px 15px 47px;
background:#f8fafc;
border:1px solid #dfe5ec;
border-radius:9px;
outline:none;
color:#303946;
font-family:"Poppins",sans-serif;
font-size:14px;
transition:
border-color .3s ease,
background .3s ease,
box-shadow .3s ease;
}
.hcmpmumquoteinput input,
.hcmpmumquoteinput select{
min-height:54px;
}
.hcmpmumquoteinput textarea{
min-height:130px;
resize:vertical;
line-height:1.7;
}
.hcmpmumquotetextarea{
align-items:flex-start;
}
.hcmpmumquotetextarea > i{
top:20px;
transform:none;
}
.hcmpmumquoteinput input:focus,
.hcmpmumquoteinput select:focus,
.hcmpmumquoteinput textarea:focus{
background:#ffffff;
border-color:#e53935;
box-shadow:0 0 0 4px rgba(244,180,0,.10);
}
.hcmpmumquoteinput input::placeholder,
.hcmpmumquoteinput textarea::placeholder{
color:#9aa2ad;
}
/*==================================================
PRIVACY
==================================================*/
.hcmpmumquoteprivacy{
display:flex;
align-items:flex-start;
justify-content:flex-start;
gap:10px;
padding:14px 16px;
background:rgba(23,61,105,.05);
border-radius:8px;
text-align:left;
}
.hcmpmumquoteprivacy i{
margin-top:4px;
color:#173d69;
font-size:13px;
}
.hcmpmumquoteprivacy p{
margin:0;
color:#6b7280;
font-size:12px;
line-height:1.6;
text-align:left;
}
/*==================================================
SUBMIT BUTTON
==================================================*/
.hcmpmumquoteformbtn{
width:100%;
min-height:58px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:15px 25px;
background:#173d69;
border:0;
border-radius:9px;
color:#ffffff;
font-family:"Poppins",sans-serif;
font-size:15px;
font-weight:700;
cursor:pointer;
box-shadow:0 12px 30px rgba(23,61,105,.20);
transition:.35s ease;
}
.hcmpmumquoteformbtn i{
transition:transform .35s ease;
}
.hcmpmumquoteformbtn:hover{
background:#e53935;
color:#173d69;
transform:translateY(-3px);
}
.hcmpmumquoteformbtn:hover i{
transform:translateX(5px);
}
/*==================================================
TABLET LANDSCAPE
==================================================*/
@media(max-width:1199px){
.hcmpmumquotepagelayout{
gap:45px;
grid-template-columns:
minmax(0,.75fr)
minmax(0,1.25fr);
}
.hcmpmumquotepageinfo h2{
font-size:42px;
}
.hcmpmumquoteformwrap{
padding:32px;
}
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumquotepagesection{
padding:80px 0;
}
.hcmpmumquotepagelayout{
grid-template-columns:1fr;
gap:55px;
align-items:start;
}
.hcmpmumquotepageinfo{
max-width:780px;
}
.hcmpmumquotepageinfo h2{
max-width:700px;
font-size:40px;
}
.hcmpmumquotepageinfo > p{
max-width:750px;
}
.hcmpmumquoteformwrap{
max-width:850px;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumquotepagesection{
padding:60px 0;
}
.hcmpmumquotepagelabel{
margin-bottom:17px;
padding:8px 15px;
font-size:11px;
}
.hcmpmumquotepageinfo h2{
margin-bottom:20px;
font-size:31px;
line-height:1.3;
}
.hcmpmumquotepageinfo h2 span{
display:inline;
}
.hcmpmumquotepageinfo > p,
.hcmpmumquotepageinfo .hcmpmumquotepagelead{
font-size:15px;
line-height:1.8;
}
.hcmpmumquotepagepoints{
margin:30px 0;
}
.hcmpmumquotepagecall{
max-width:100%;
}
.hcmpmumquoteformwrap{
padding:28px 22px;
border-radius:16px;
}
.hcmpmumquoteformwrap::before{
left:22px;
}
.hcmpmumquoteformtop{
margin-bottom:27px;
}
.hcmpmumquoteformicon{
width:55px;
height:55px;
min-width:55px;
font-size:22px;
}
.hcmpmumquoteformtop h3{
font-size:23px;
}
.hcmpmumquoteform{
grid-template-columns:1fr;
gap:19px;
}
.hcmpmumquoteformfull{
grid-column:auto;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumquotepageinfo h2{
font-size:28px;
}
.hcmpmumquotepagepoint{
gap:13px;
}
.hcmpmumquotepagepointicon{
width:34px;
height:34px;
min-width:34px;
}
.hcmpmumquotepagecall{
padding:19px;
}
.hcmpmumquotepagecallicon{
width:50px;
height:50px;
min-width:50px;
font-size:20px;
}
.hcmpmumquotepagecallcontent a{
font-size:18px;
}
.hcmpmumquoteformwrap{
padding:25px 18px;
}
.hcmpmumquoteformwrap::before{
left:18px;
}
.hcmpmumquoteformtop{
align-items:flex-start;
}
.hcmpmumquoteformtop h3{
font-size:21px;
}
.hcmpmumquoteinput input,
.hcmpmumquoteinput select,
.hcmpmumquoteinput textarea{
font-size:13px;
}
}
/*==================================================
QUOTE PAGE CONTACT INFORMATION
==================================================*/
.hcmpmumquotecontactsection{
position:relative;
width:100%;
padding:100px 0;
background:#ffffff;
overflow:hidden;
}
/*==================================================
BACKGROUND DECORATION
==================================================*/
.hcmpmumquotecontactsection::before{
content:"";
position:absolute;
width:350px;
height:350px;
top:-200px;
right:-170px;
border:60px solid rgba(23,61,105,.025);
border-radius:50%;
pointer-events:none;
}
.hcmpmumquotecontactsection::after{
content:"";
position:absolute;
width:260px;
height:260px;
left:-140px;
bottom:-150px;
background:rgba(244,180,0,.06);
border-radius:50%;
pointer-events:none;
}
/*==================================================
SECTION HEAD
==================================================*/
.hcmpmumquotecontacthead{
position:relative;
z-index:2;
max-width:760px;
margin:0 0 55px;
text-align:left;
}
.hcmpmumquotecontactlabel{
display:inline-flex;
align-items:center;
margin:0 0 20px;
padding:9px 18px;
background:rgba(244,180,0,.15);
border-left:4px solid #e53935;
border-radius:0 6px 6px 0;
color:#173d69;
font-size:13px;
font-weight:800;
letter-spacing:.7px;
text-transform:uppercase;
}
.hcmpmumquotecontacthead h2{
margin:0 0 20px;
padding:0;
color:#173d69;
font-size:46px;
font-weight:800;
line-height:1.2;
text-align:left;
}
.hcmpmumquotecontacthead h2 span{
color:#e53935;
}
.hcmpmumquotecontacthead p{
margin:0;
color:#68717d;
font-size:16px;
line-height:1.9;
text-align:left;
}
/*==================================================
CONTACT GRID
==================================================*/
.hcmpmumquotecontactgrid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:22px;
}
/*==================================================
CONTACT ITEM
==================================================*/
.hcmpmumquotecontactitem{
position:relative;
min-width:0;
min-height:300px;
padding:32px 26px;
background:#f8fafc;
border:1px solid #e7ecf2;
border-radius:16px;
overflow:hidden;
text-align:left;
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease,
background .35s ease;
}
.hcmpmumquotecontactitem::before{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:4px;
background:#e53935;
transform:scaleX(0);
transform-origin:left;
transition:transform .35s ease;
}
.hcmpmumquotecontactitem:hover{
background:#ffffff;
border-color:rgba(244,180,0,.55);
box-shadow:0 20px 50px rgba(23,61,105,.11);
transform:translateY(-7px);
}
.hcmpmumquotecontactitem:hover::before{
transform:scaleX(1);
}
/*==================================================
NUMBER
==================================================*/
.hcmpmumquotecontactnumber{
position:absolute;
top:20px;
right:22px;
color:rgba(23,61,105,.07);
font-size:55px;
font-weight:800;
line-height:1;
}
/*==================================================
ICON
==================================================*/
.hcmpmumquotecontacticon{
position:relative;
z-index:2;
width:65px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:28px;
background:#173d69;
color:#ffffff;
border-radius:14px;
font-size:25px;
transition:
background .35s ease,
color .35s ease,
transform .35s ease;
}
.hcmpmumquotecontactitem:hover .hcmpmumquotecontacticon{
background:#e53935;
color:#173d69;
transform:rotate(-6deg);
}
/*==================================================
CONTENT
==================================================*/
.hcmpmumquotecontactcontent{
position:relative;
z-index:2;
min-width:0;
text-align:left;
}
.hcmpmumquotecontactcontent > span{
display:block;
margin:0 0 7px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumquotecontactcontent h3{
margin:0 0 13px;
padding:0;
color:#173d69;
font-size:20px;
font-weight:700;
line-height:1.4;
text-align:left;
}
.hcmpmumquotecontactcontent p{
margin:0;
color:#6b7280;
font-size:14px;
line-height:1.8;
text-align:left;
}
.hcmpmumquotecontactcontent a{
display:block;
max-width:100%;
margin:0 0 8px;
color:#173d69;
text-decoration:none;
font-size:15px;
font-weight:700;
line-height:1.7;
overflow-wrap:anywhere;
word-break:break-word;
transition:color .3s ease;
}
.hcmpmumquotecontactcontent a:hover{
color:#e53935;
}
.hcmpmumquotecontactcontent strong{
display:block;
margin-bottom:8px;
color:#173d69;
font-size:17px;
font-weight:800;
}
.hcmpmumquotecontactcontent small{
display:block;
color:#7b8490;
font-size:12px;
line-height:1.6;
}
/*==================================================
BOTTOM CTA
==================================================*/
.hcmpmumquotecontactbottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
margin-top:55px;
padding:38px 42px;
background:#173d69;
border-radius:18px;
overflow:hidden;
}
.hcmpmumquotecontactbottom::after{
content:"";
position:absolute;
width:220px;
height:220px;
right:-80px;
bottom:-150px;
background:rgba(244,180,0,.10);
border-radius:50%;
pointer-events:none;
}
.hcmpmumquotecontactbottomcontent{
position:relative;
z-index:2;
max-width:680px;
text-align:left;
}
.hcmpmumquotecontactbottomcontent span{
display:block;
margin-bottom:7px;
color:#e53935;
font-size:12px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumquotecontactbottomcontent h3{
margin:0 0 10px;
color:#ffffff;
font-size:29px;
font-weight:800;
line-height:1.35;
text-align:left;
}
.hcmpmumquotecontactbottomcontent p{
margin:0;
color:rgba(255,255,255,.75);
font-size:14px;
line-height:1.8;
text-align:left;
}
/*==================================================
BOTTOM ACTIONS
==================================================*/
.hcmpmumquotecontactactions{
position:relative;
z-index:2;
display:flex;
align-items:center;
flex-wrap:wrap;
gap:13px;
min-width:max-content;
}
.hcmpmumquotecontactcall,
.hcmpmumquotecontactwhatsapp{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:54px;
padding:14px 24px;
border-radius:8px;
text-decoration:none;
font-size:14px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumquotecontactcall{
background:#e53935;
color:#fff;
}
.hcmpmumquotecontactcall:hover{
background:#ffffff;
color:#173d69;
transform:translateY(-3px);
}
.hcmpmumquotecontactwhatsapp{
background:#25d366;
color:#ffffff;
}
.hcmpmumquotecontactwhatsapp:hover{
background:#ffffff;
color:#173d69;
transform:translateY(-3px);
}
/*==================================================
TABLET LANDSCAPE
==================================================*/
@media(max-width:1199px){
.hcmpmumquotecontactgrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hcmpmumquotecontactitem{
min-height:270px;
}
.hcmpmumquotecontactbottom{
padding:35px;
}
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumquotecontactsection{
padding:80px 0;
}
.hcmpmumquotecontacthead h2{
font-size:40px;
}
.hcmpmumquotecontactbottom{
flex-direction:column;
align-items:flex-start;
}
.hcmpmumquotecontactactions{
min-width:0;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumquotecontactsection{
padding:60px 0;
}
.hcmpmumquotecontacthead{
margin-bottom:40px;
}
.hcmpmumquotecontactlabel{
margin-bottom:17px;
padding:8px 15px;
font-size:11px;
}
.hcmpmumquotecontacthead h2{
font-size:31px;
line-height:1.3;
}
.hcmpmumquotecontacthead p{
font-size:15px;
line-height:1.8;
}
.hcmpmumquotecontactgrid{
grid-template-columns:1fr;
gap:17px;
}
.hcmpmumquotecontactitem{
min-height:auto;
padding:27px 23px;
}
.hcmpmumquotecontacticon{
width:58px;
height:58px;
margin-bottom:23px;
font-size:22px;
}
.hcmpmumquotecontactbottom{
margin-top:40px;
padding:30px 25px;
border-radius:15px;
}
.hcmpmumquotecontactbottomcontent h3{
font-size:24px;
}
.hcmpmumquotecontactactions{
width:100%;
flex-direction:column;
align-items:stretch;
}
.hcmpmumquotecontactcall,
.hcmpmumquotecontactwhatsapp{
width:100%;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumquotecontacthead h2{
font-size:28px;
}
.hcmpmumquotecontactnumber{
font-size:46px;
}
.hcmpmumquotecontactcontent h3{
font-size:18px;
}
.hcmpmumquotecontactbottom{
padding:27px 20px;
}
.hcmpmumquotecontactbottomcontent h3{
font-size:21px;
}
}
/*==================================================
hcmpmum CONTACT PAGE
==================================================*/
.hcmpmumcontactpagesection{
position:relative;
width:100%;
padding:100px 0;
background:#f5f7fa;
overflow:hidden;
}
.hcmpmumcontactpagesection::before{
content:"";
position:absolute;
width:450px;
height:450px;
top:-270px;
right:-220px;
border:75px solid rgba(23,61,105,.025);
border-radius:50%;
pointer-events:none;
}
.hcmpmumcontactpagesection::after{
content:"";
position:absolute;
width:300px;
height:300px;
left:-170px;
bottom:-170px;
background:rgba(244,180,0,.07);
border-radius:50%;
pointer-events:none;
}
/*==================================================
SECTION HEAD
==================================================*/
.hcmpmumcontactpagehead{
position:relative;
z-index:2;
max-width:850px;
margin:0 0 60px;
text-align:left;
}
.hcmpmumcontactpagelabel{
display:inline-flex;
align-items:center;
margin:0 0 20px;
padding:9px 18px;
background:rgba(244,180,0,.15);
border-left:4px solid #e53935;
border-radius:0 6px 6px 0;
color:#173d69;
font-size:12px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumcontactpagehead h1{
margin:0 0 22px;
padding:0;
color:#173d69;
font-size:50px;
font-weight:800;
line-height:1.2;
text-align:left;
}
.hcmpmumcontactpagehead h1 span{
color:#e53935;
}
.hcmpmumcontactpagehead p{
max-width:800px;
margin:0;
color:#68717d;
font-size:16px;
line-height:1.9;
text-align:left;
}
/*==================================================
MAIN LAYOUT
==================================================*/
.hcmpmumcontactpagelayout{
position:relative;
z-index:2;
display:grid;
grid-template-columns:
minmax(0,.85fr)
minmax(0,1.15fr);
gap:35px;
align-items:stretch;
}
/*==================================================
LEFT INFORMATION PANEL
==================================================*/
.hcmpmumcontactpageinfo{
position:relative;
padding:45px 40px;
background:#173d69;
border-radius:20px;
overflow:hidden;
text-align:left;
}
.hcmpmumcontactpageinfo::before{
content:"";
position:absolute;
width:300px;
height:300px;
top:-190px;
right:-170px;
border:55px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumcontactpageinfo::after{
content:"";
position:absolute;
width:220px;
height:220px;
left:-140px;
bottom:-140px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
/*==================================================
INFO TOP
==================================================*/
.hcmpmumcontactpageinfotop{
position:relative;
z-index:2;
margin-bottom:32px;
text-align:left;
}
.hcmpmumcontactpageinfotop > span{
display:block;
margin:0 0 8px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumcontactpageinfotop h2{
margin:0 0 13px;
color:#ffffff;
font-size:31px;
font-weight:800;
line-height:1.35;
text-align:left;
}
.hcmpmumcontactpageinfotop p{
margin:0;
color:rgba(255,255,255,.70);
font-size:14px;
line-height:1.8;
text-align:left;
}
/*==================================================
CONTACT DETAIL ITEM
==================================================*/
.hcmpmumcontactdetailitem{
position:relative;
z-index:2;
display:grid;
grid-template-columns:58px minmax(0,1fr) 38px;
align-items:center;
gap:16px;
width:100%;
margin-bottom:13px;
padding:17px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
border-radius:11px;
color:inherit;
text-decoration:none;
text-align:left;
transition:
background .35s ease,
transform .35s ease,
border-color .35s ease;
}
div.hcmpmumcontactdetailitem{
grid-template-columns:58px minmax(0,1fr);
}
.hcmpmumcontactdetailitem:hover{
background:rgba(255,255,255,.12);
border-color:rgba(244,180,0,.35);
transform:translateX(5px);
}
.hcmpmumcontactdetailicon{
width:58px;
height:58px;
min-width:58px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:10px;
font-size:21px;
}
.hcmpmumcontactdetailicon i{
color:#fff;
font-size:21px;
line-height:1;
}
.hcmpmumcontactdetailcontent{
min-width:0;
text-align:left;
}
.hcmpmumcontactdetailcontent span{
display:block;
margin:0 0 4px;
color:rgba(255,255,255,.58);
font-size:10px;
font-weight:700;
letter-spacing:.7px;
text-transform:uppercase;
}
.hcmpmumcontactdetailcontent h3{
margin:0 0 4px;
padding:0;
color:#ffffff;
font-size:16px;
font-weight:700;
line-height:1.5;
text-align:left;
overflow-wrap:anywhere;
}
.hcmpmumcontactdetailcontent p{
margin:0;
color:rgba(255,255,255,.68);
font-size:12px;
line-height:1.7;
text-align:left;
}
.hcmpmumcontactdetailarrow{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.15);
border-radius:50%;
color:#ffffff;
font-size:12px;
transition:.35s ease;
}
.hcmpmumcontactdetailitem:hover .hcmpmumcontactdetailarrow{
background:#e53935;
border-color:#e53935;
color:#173d69;
}
/*==================================================
WHATSAPP QUICK BOX
==================================================*/
.hcmpmumcontactpagequick{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:30px;
padding-top:28px;
border-top:1px solid rgba(255,255,255,.14);
}
.hcmpmumcontactpagequickcontent{
text-align:left;
}
.hcmpmumcontactpagequickcontent span{
display:block;
margin-bottom:4px;
color:rgba(255,255,255,.58);
font-size:10px;
font-weight:700;
}
.hcmpmumcontactpagequickcontent h3{
margin:0;
color:#ffffff;
font-size:15px;
font-weight:700;
line-height:1.5;
text-align:left;
}
.hcmpmumcontactpagequick > a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-width:max-content;
padding:13px 18px;
background:#25d366;
color:#ffffff;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumcontactpagequick > a:hover{
background:#ffffff;
color:#173d69;
transform:translateY(-3px);
}
/*==================================================
FORM BOX
==================================================*/
.hcmpmumcontactformbox{
position:relative;
padding:45px;
background:#ffffff;
border:1px solid #e4e9ef;
border-radius:20px;
box-shadow:0 25px 65px rgba(23,61,105,.10);
text-align:left;
}
.hcmpmumcontactformbox::before{
content:"";
position:absolute;
top:0;
left:45px;
width:85px;
height:5px;
background:#e53935;
border-radius:0 0 5px 5px;
}
/*==================================================
FORM HEADER
==================================================*/
.hcmpmumcontactformhead{
max-width:600px;
margin:0 0 32px;
text-align:left;
}
.hcmpmumcontactformlabel{
display:block;
margin:0 0 7px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumcontactformhead h2{
margin:0 0 10px;
padding:0;
color:#173d69;
font-size:34px;
font-weight:800;
line-height:1.3;
text-align:left;
}
.hcmpmumcontactformhead p{
margin:0;
color:#707985;
font-size:14px;
line-height:1.8;
text-align:left;
}
/*==================================================
FORM GRID
==================================================*/
.hcmpmumcontactform{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:21px 19px;
}
.hcmpmumcontactfull{
grid-column:1 / -1;
}
/*==================================================
FORM FIELD
==================================================*/
.hcmpmumcontactfield{
width:100%;
min-width:0;
text-align:left;
}
.hcmpmumcontactfield label{
display:block;
margin:0 0 8px;
color:#303946;
font-size:13px;
font-weight:700;
text-align:left;
}
.hcmpmumcontactfield label span{
color:#e53935;
}
/*==================================================
INPUT
==================================================*/
.hcmpmumcontactinput{
position:relative;
width:100%;
}
.hcmpmumcontactinput input,
.hcmpmumcontactinput select,
.hcmpmumcontactinput textarea{
display:block;
width:100%;
margin:0;
padding:15px 47px 15px 16px;
background:#f7f9fb;
border:1px solid #dfe5eb;
border-radius:8px;
outline:none;
color:#303946;
font-family:"Poppins",sans-serif;
font-size:14px;
transition:
background .3s ease,
border-color .3s ease,
box-shadow .3s ease;
}
.hcmpmumcontactinput input,
.hcmpmumcontactinput select{
min-height:54px;
}
.hcmpmumcontactinput textarea{
min-height:145px;
resize:vertical;
line-height:1.7;
}
.hcmpmumcontactinput > i{
position:absolute;
top:50%;
right:17px;
transform:translateY(-50%);
color:#173d69;
font-size:15px;
line-height:1;
pointer-events:none;
}
.hcmpmumcontactmessage > i{
top:20px;
transform:none;
}
.hcmpmumcontactinput input:focus,
.hcmpmumcontactinput select:focus,
.hcmpmumcontactinput textarea:focus{
background:#ffffff;
border-color:#e53935;
box-shadow:0 0 0 4px rgba(244,180,0,.10);
}
.hcmpmumcontactinput input::placeholder,
.hcmpmumcontactinput textarea::placeholder{
color:#9aa2ad;
}
/*==================================================
PRIVACY
==================================================*/
.hcmpmumcontactprivacy{
display:flex;
align-items:flex-start;
justify-content:flex-start;
gap:11px;
padding:14px 16px;
background:rgba(23,61,105,.05);
border-left:3px solid #173d69;
text-align:left;
}
.hcmpmumcontactprivacy i{
margin-top:4px;
color:#173d69;
font-size:13px;
}
.hcmpmumcontactprivacy p{
margin:0;
color:#6b7280;
font-size:12px;
line-height:1.6;
text-align:left;
}
/*==================================================
SUBMIT BUTTON
==================================================*/
.hcmpmumcontactsubmit{
display:flex;
align-items:center;
justify-content:center;
gap:11px;
width:100%;
min-height:58px;
padding:15px 25px;
background:#173d69;
border:0;
border-radius:8px;
color:#ffffff;
font-family:"Poppins",sans-serif;
font-size:15px;
font-weight:700;
cursor:pointer;
box-shadow:0 12px 30px rgba(23,61,105,.18);
transition:.35s ease;
}
.hcmpmumcontactsubmit i{
transition:transform .35s ease;
}
.hcmpmumcontactsubmit:hover{
background:#e53935;
color:#173d69;
transform:translateY(-3px);
}
.hcmpmumcontactsubmit:hover i{
transform:translateX(5px);
}
/*==================================================
TABLET LANDSCAPE
==================================================*/
@media(max-width:1199px){
.hcmpmumcontactpagelayout{
grid-template-columns:
minmax(0,.9fr)
minmax(0,1.1fr);
gap:25px;
}
.hcmpmumcontactpageinfo{
padding:40px 30px;
}
.hcmpmumcontactformbox{
padding:40px 32px;
}
.hcmpmumcontactformbox::before{
left:32px;
}
.hcmpmumcontactpagehead h1{
font-size:44px;
}
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumcontactpagesection{
padding:80px 0;
}
.hcmpmumcontactpagehead{
margin-bottom:50px;
}
.hcmpmumcontactpagehead h1{
font-size:40px;
}
.hcmpmumcontactpagelayout{
grid-template-columns:1fr;
gap:30px;
}
.hcmpmumcontactpageinfo,
.hcmpmumcontactformbox{
max-width:850px;
}
.hcmpmumcontactpageinfo{
padding:45px;
}
.hcmpmumcontactformbox{
padding:45px;
}
.hcmpmumcontactformbox::before{
left:45px;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumcontactpagesection{
padding:60px 0;
}
.hcmpmumcontactpagehead{
margin-bottom:40px;
}
.hcmpmumcontactpagelabel{
margin-bottom:17px;
padding:8px 15px;
font-size:10px;
}
.hcmpmumcontactpagehead h1{
margin-bottom:18px;
font-size:31px;
line-height:1.3;
}
.hcmpmumcontactpagehead p{
font-size:15px;
line-height:1.8;
}
.hcmpmumcontactpageinfo{
padding:35px 23px;
border-radius:15px;
}
.hcmpmumcontactpageinfotop h2{
font-size:27px;
}
.hcmpmumcontactdetailitem,
div.hcmpmumcontactdetailitem{
grid-template-columns:52px minmax(0,1fr);
gap:13px;
padding:15px;
}
.hcmpmumcontactdetailicon{
width:52px;
height:52px;
min-width:52px;
font-size:19px;
}
.hcmpmumcontactdetailicon i{
font-size:19px;
}
.hcmpmumcontactdetailarrow{
display:none;
}
.hcmpmumcontactpagequick{
flex-direction:column;
align-items:flex-start;
}
.hcmpmumcontactpagequick > a{
width:100%;
}
.hcmpmumcontactformbox{
padding:38px 23px;
border-radius:15px;
}
.hcmpmumcontactformbox::before{
left:23px;
}
.hcmpmumcontactformhead h2{
font-size:28px;
}
.hcmpmumcontactform{
grid-template-columns:1fr;
gap:19px;
}
.hcmpmumcontactfull{
grid-column:auto;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumcontactpagehead h1{
font-size:28px;
}
.hcmpmumcontactpageinfo{
padding:32px 18px;
}
.hcmpmumcontactpageinfotop h2{
font-size:24px;
}
.hcmpmumcontactdetailitem,
div.hcmpmumcontactdetailitem{
grid-template-columns:46px minmax(0,1fr);
padding:14px 12px;
}
.hcmpmumcontactdetailicon{
width:46px;
height:46px;
min-width:46px;
}
.hcmpmumcontactdetailcontent h3{
font-size:14px;
}
.hcmpmumcontactformbox{
padding:35px 18px;
}
.hcmpmumcontactformbox::before{
left:18px;
}
.hcmpmumcontactformhead h2{
font-size:25px;
}
.hcmpmumcontactinput input,
.hcmpmumcontactinput select,
.hcmpmumcontactinput textarea{
font-size:13px;
}
}
/*==================================================
CONTACT PAGE BREADCRUMB
==================================================*/
.hcmpmumcontactbread{
position:relative;
width:100%;
padding:85px 0;
background:#173d69;
overflow:hidden;
}
/*==================================================
BACKGROUND DECORATION
==================================================*/
.hcmpmumcontactbread::before{
content:"";
position:absolute;
width:420px;
height:420px;
top:-280px;
right:-150px;
border:75px solid rgba(255,255,255,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpmumcontactbread::after{
content:"";
position:absolute;
width:280px;
height:280px;
left:-150px;
bottom:-190px;
background:rgba(244,180,0,.09);
border-radius:50%;
pointer-events:none;
}
/*==================================================
MAIN WRAPPER
==================================================*/
.hcmpmumcontactbreadwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
width:100%;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpmumcontactbreadcontent{
max-width:750px;
text-align:left;
}
.hcmpmumcontactbreadlabel{
display:inline-flex;
align-items:center;
margin:0 0 16px;
padding:8px 16px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
color:#fff;
border-radius:0 5px 5px 0;
font-size:11px;
font-weight:800;
letter-spacing:1px;
line-height:1.5;
text-transform:uppercase;
}
/*==================================================
HEADING
==================================================*/
.hcmpmumcontactbreadcontent h1{
margin:0 0 14px;
padding:0;
color:#ffffff;
font-size:50px;
font-weight:800;
line-height:1.2;
text-align:left;
}
/*==================================================
DESCRIPTION
==================================================*/
.hcmpmumcontactbreadcontent p{
max-width:650px;
margin:0 0 23px;
color:rgba(255,255,255,.72);
font-size:15px;
line-height:1.8;
text-align:left;
}
/*==================================================
BREADCRUMB NAV
==================================================*/
.hcmpmumcontactbreadcrumb{
display:flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
gap:12px;
text-align:left;
}
.hcmpmumcontactbreadcrumb a{
display:inline-flex;
align-items:center;
gap:8px;
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:600;
line-height:1.5;
transition:color .3s ease;
}
.hcmpmumcontactbreadcrumb a:hover{
color:#e53935;
}
.hcmpmumcontactbreadcrumb a i{
color:#e53935;
font-size:12px;
}
.hcmpmumcontactbreadarrow{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumcontactbreadcrumb > span{
color:#e53935;
font-size:13px;
font-weight:700;
}
/*==================================================
RIGHT CONTACT BOX
==================================================*/
.hcmpmumcontactbreadside{
position:relative;
display:flex;
align-items:center;
justify-content:flex-start;
gap:17px;
min-width:350px;
padding:23px 25px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
backdrop-filter:blur(8px);
text-align:left;
}
/*==================================================
RIGHT ICON
==================================================*/
.hcmpmumcontactbreadicon{
width:62px;
height:62px;
min-width:62px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:12px;
font-size:25px;
}
.hcmpmumcontactbreadicon i{
color:#fff;
font-size:25px;
line-height:1;
}
/*==================================================
RIGHT TEXT
==================================================*/
.hcmpmumcontactbreadsidetext{
display:flex;
flex-direction:column;
align-items:flex-start;
min-width:0;
text-align:left;
}
.hcmpmumcontactbreadsidetext span{
display:block;
margin:0 0 5px;
color:rgba(255,255,255,.65);
font-size:11px;
font-weight:600;
line-height:1.5;
}
.hcmpmumcontactbreadsidetext a{
color:#ffffff;
text-decoration:none;
font-size:20px;
font-weight:800;
line-height:1.4;
white-space:nowrap;
transition:color .3s ease;
}
.hcmpmumcontactbreadsidetext a:hover{
color:#e53935;
}
/*==================================================
TABLET LANDSCAPE
==================================================*/
@media(max-width:1199px){
.hcmpmumcontactbread{
padding:75px 0;
}
.hcmpmumcontactbreadcontent h1{
font-size:45px;
}
.hcmpmumcontactbreadside{
min-width:315px;
padding:21px;
}
.hcmpmumcontactbreadsidetext a{
font-size:18px;
}
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumcontactbread{
padding:65px 0;
}
.hcmpmumcontactbreadwrap{
align-items:flex-start;
gap:35px;
}
.hcmpmumcontactbreadcontent{
flex:1;
}
.hcmpmumcontactbreadcontent h1{
font-size:40px;
}
.hcmpmumcontactbreadside{
min-width:290px;
}
.hcmpmumcontactbreadicon{
width:55px;
height:55px;
min-width:55px;
font-size:21px;
}
.hcmpmumcontactbreadicon i{
font-size:21px;
}
.hcmpmumcontactbreadsidetext a{
font-size:16px;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumcontactbread{
padding:55px 0;
}
.hcmpmumcontactbreadwrap{
flex-direction:column;
align-items:stretch;
gap:30px;
}
.hcmpmumcontactbreadcontent{
width:100%;
max-width:100%;
text-align:left;
}
.hcmpmumcontactbreadlabel{
margin-bottom:14px;
padding:7px 14px;
font-size:10px;
}
.hcmpmumcontactbreadcontent h1{
margin-bottom:12px;
font-size:34px;
line-height:1.3;
}
.hcmpmumcontactbreadcontent p{
margin-bottom:20px;
font-size:14px;
line-height:1.8;
}
.hcmpmumcontactbreadside{
width:100%;
min-width:0;
padding:19px;
gap:14px;
}
.hcmpmumcontactbreadicon{
width:52px;
height:52px;
min-width:52px;
border-radius:10px;
}
.hcmpmumcontactbreadicon i{
font-size:20px;
}
.hcmpmumcontactbreadsidetext a{
font-size:17px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumcontactbread{
padding:45px 0;
}
.hcmpmumcontactbreadcontent h1{
font-size:30px;
}
.hcmpmumcontactbreadcontent p{
font-size:13px;
}
.hcmpmumcontactbreadcrumb{
gap:9px;
}
.hcmpmumcontactbreadcrumb a,
.hcmpmumcontactbreadcrumb > span{
font-size:12px;
}
.hcmpmumcontactbreadside{
padding:17px 15px;
}
.hcmpmumcontactbreadicon{
width:48px;
height:48px;
min-width:48px;
}
.hcmpmumcontactbreadsidetext span{
font-size:10px;
}
.hcmpmumcontactbreadsidetext a{
font-size:16px;
}
}
/*==================================================
REQUEST A QUOTE BREADCRUMB
==================================================*/
.hcmpmumquotebread{
position:relative;
width:100%;
padding:85px 0;
background:#173d69;
overflow:hidden;
}
/*==================================================
BACKGROUND DESIGN
==================================================*/
.hcmpmumquotebread::before{
content:"";
position:absolute;
width:450px;
height:450px;
top:-300px;
right:-170px;
border:75px solid rgba(255,255,255,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpmumquotebread::after{
content:"";
position:absolute;
width:300px;
height:300px;
left:-170px;
bottom:-210px;
background:rgba(244,180,0,.09);
border-radius:50%;
pointer-events:none;
}
/*==================================================
WRAPPER
==================================================*/
.hcmpmumquotebreadwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:55px;
width:100%;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpmumquotebreadcontent{
flex:1;
max-width:750px;
min-width:0;
text-align:left;
}
/*==================================================
LABEL
==================================================*/
.hcmpmumquotebreadlabel{
display:inline-flex;
align-items:center;
margin:0 0 16px;
padding:8px 16px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
border-radius:0 5px 5px 0;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
line-height:1.5;
text-transform:uppercase;
}
/*==================================================
HEADING
==================================================*/
.hcmpmumquotebreadcontent h1{
margin:0 0 14px;
padding:0;
color:#ffffff;
font-size:50px;
font-weight:800;
line-height:1.2;
text-align:left;
}
/*==================================================
DESCRIPTION
==================================================*/
.hcmpmumquotebreadcontent p{
max-width:680px;
margin:0 0 23px;
color:rgba(255,255,255,.72);
font-size:15px;
font-weight:400;
line-height:1.8;
text-align:left;
}
/*==================================================
BREADCRUMB
==================================================*/
.hcmpmumquotebreadcrumb{
display:flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
gap:12px;
text-align:left;
}
.hcmpmumquotebreadcrumb a{
display:inline-flex;
align-items:center;
gap:8px;
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:600;
line-height:1.5;
transition:color .3s ease;
}
.hcmpmumquotebreadcrumb a:hover{
color:#e53935;
}
.hcmpmumquotebreadcrumb a i{
color:#e53935;
font-size:12px;
line-height:1;
}
.hcmpmumquotebreadarrow{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumquotebreadcrumb > span{
color:#e53935;
font-size:13px;
font-weight:700;
line-height:1.5;
}
/*==================================================
RIGHT QUOTE BOX
==================================================*/
.hcmpmumquotebreadside{
position:relative;
display:flex;
align-items:center;
justify-content:flex-start;
gap:18px;
width:100%;
max-width:390px;
padding:24px 25px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:15px;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
text-align:left;
}
/*==================================================
RIGHT ICON
==================================================*/
.hcmpmumquotebreadicon{
width:68px;
height:68px;
min-width:68px;
display:flex;
align-items:center;
justify-content:center;
margin:0;
padding:0;
background:#e53935;
color:#173d69;
border-radius:13px;
font-size:27px;
line-height:1;
}
.hcmpmumquotebreadicon i{
display:block;
margin:0;
padding:0;
color:#173d69;
font-size:27px;
line-height:1;
}
/*==================================================
RIGHT TEXT
==================================================*/
.hcmpmumquotebreadsidetext{
display:flex;
flex-direction:column;
align-items:flex-start;
min-width:0;
text-align:left;
}
.hcmpmumquotebreadsidetext > span{
display:block;
margin:0 0 3px;
color:rgba(255,255,255,.60);
font-size:10px;
font-weight:700;
letter-spacing:.5px;
line-height:1.5;
text-transform:uppercase;
text-align:left;
}
.hcmpmumquotebreadsidetext h2{
margin:0 0 8px;
padding:0;
color:#ffffff;
font-size:18px;
font-weight:700;
line-height:1.4;
text-align:left;
}
.hcmpmumquotebreadsidetext a{
display:inline-flex;
align-items:center;
gap:8px;
color:#e53935;
text-decoration:none;
font-size:12px;
font-weight:700;
line-height:1.5;
transition:color .3s ease;
}
.hcmpmumquotebreadsidetext a i{
font-size:10px;
transition:transform .3s ease;
}
.hcmpmumquotebreadsidetext a:hover{
color:#ffffff;
}
.hcmpmumquotebreadsidetext a:hover i{
transform:translateX(5px);
}
/*==================================================
DESKTOP / SMALL LAPTOP
==================================================*/
@media(max-width:1199px){
.hcmpmumquotebread{
padding:75px 0;
}
.hcmpmumquotebreadcontent h1{
font-size:45px;
}
.hcmpmumquotebreadside{
max-width:350px;
padding:22px;
}
.hcmpmumquotebreadicon{
width:62px;
height:62px;
min-width:62px;
}
.hcmpmumquotebreadicon i{
font-size:24px;
}
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumquotebread{
padding:65px 0;
}
.hcmpmumquotebreadwrap{
align-items:flex-start;
gap:35px;
}
.hcmpmumquotebreadcontent h1{
font-size:40px;
}
.hcmpmumquotebreadcontent p{
font-size:14px;
}
.hcmpmumquotebreadside{
max-width:315px;
padding:20px;
}
.hcmpmumquotebreadicon{
width:56px;
height:56px;
min-width:56px;
border-radius:10px;
}
.hcmpmumquotebreadicon i{
font-size:21px;
}
.hcmpmumquotebreadsidetext h2{
font-size:16px;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumquotebread{
padding:55px 0;
}
.hcmpmumquotebreadwrap{
flex-direction:column;
align-items:stretch;
gap:30px;
}
.hcmpmumquotebreadcontent{
width:100%;
max-width:100%;
}
.hcmpmumquotebreadlabel{
margin-bottom:14px;
padding:7px 14px;
font-size:10px;
}
.hcmpmumquotebreadcontent h1{
margin-bottom:12px;
font-size:34px;
line-height:1.3;
}
.hcmpmumquotebreadcontent p{
margin-bottom:20px;
font-size:14px;
line-height:1.8;
}
.hcmpmumquotebreadside{
width:100%;
max-width:100%;
padding:19px;
gap:15px;
}
.hcmpmumquotebreadicon{
width:55px;
height:55px;
min-width:55px;
}
.hcmpmumquotebreadicon i{
font-size:21px;
}
.hcmpmumquotebreadsidetext h2{
font-size:16px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumquotebread{
padding:45px 0;
}
.hcmpmumquotebreadcontent h1{
font-size:30px;
}
.hcmpmumquotebreadcontent p{
font-size:13px;
}
.hcmpmumquotebreadcrumb{
gap:9px;
}
.hcmpmumquotebreadcrumb a,
.hcmpmumquotebreadcrumb > span{
font-size:12px;
}
.hcmpmumquotebreadside{
padding:17px 15px;
gap:13px;
}
.hcmpmumquotebreadicon{
width:50px;
height:50px;
min-width:50px;
}
.hcmpmumquotebreadicon i{
font-size:19px;
}
.hcmpmumquotebreadsidetext > span{
font-size:9px;
}
.hcmpmumquotebreadsidetext h2{
margin-bottom:5px;
font-size:15px;
}
.hcmpmumquotebreadsidetext a{
font-size:11px;
}
}
/*==================================================
HOUSE PAGE GLOBAL
==================================================*/
.hcmpmumhouseintro,
.hcmpmumhouseprocess,
.hcmpmumhouseitems,
.hcmpmumhousewhy,
.hcmpmumhousefaq,
.hcmpmumhousecta,
.hcmpmumhousebread{
font-family:"Poppins",sans-serif;
}
.hcmpmumhouseeyebrow{
display:inline-block;
margin:0 0 15px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
/*==================================================
BREADCRUMB
==================================================*/
.hcmpmumhousebread{
position:relative;
padding:85px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumhousebread::before{
content:"";
position:absolute;
width:450px;
height:450px;
top:-290px;
right:-170px;
border:75px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumhousebread::after{
content:"";
position:absolute;
width:300px;
height:300px;
left:-170px;
bottom:-210px;
background:rgba(244,180,0,.09);
border-radius:50%;
}
.hcmpmumhousebreadwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.hcmpmumhousebreadcontent{
max-width:760px;
text-align:left;
}
.hcmpmumhousebreadlabel{
display:inline-flex;
margin-bottom:16px;
padding:8px 16px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumhousebreadcontent h1{
margin:0 0 15px;
color:#fff;
font-size:48px;
font-weight:800;
line-height:1.2;
text-align:left;
}
.hcmpmumhousebreadcontent p{
max-width:650px;
margin:0 0 23px;
color:rgba(255,255,255,.72);
font-size:15px;
line-height:1.8;
}
.hcmpmumhousebreadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:11px;
}
.hcmpmumhousebreadcrumb a{
display:inline-flex;
align-items:center;
gap:7px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:600;
}
.hcmpmumhousebreadcrumb > i{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumhousebreadcrumb span{
color:#e53935;
font-size:13px;
font-weight:700;
}
.hcmpmumhousebreadbox{
display:flex;
align-items:center;
gap:17px;
width:100%;
max-width:370px;
padding:23px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
}
.hcmpmumhousebreadicon{
width:65px;
height:65px;
min-width:65px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:12px;
font-size:25px;
}
.hcmpmumhousebreadbox span{
display:block;
margin-bottom:3px;
color:rgba(255,255,255,.6);
font-size:10px;
font-weight:700;
text-transform:uppercase;
}
.hcmpmumhousebreadbox h2{
margin:0 0 6px;
color:#fff;
font-size:17px;
font-weight:700;
}
.hcmpmumhousebreadbox a{
display:inline-flex;
align-items:center;
gap:7px;
color:#e53935;
font-size:12px;
font-weight:700;
text-decoration:none;
}
/*==================================================
INTRO
==================================================*/
.hcmpmumhouseintro{
padding:100px 0;
background:#fff;
}
.hcmpmumhouseintrogrid{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:65px;
align-items:center;
}
.hcmpmumhouseintrocontent{
text-align:left;
}
.hcmpmumhouseintrocontent h2,
.hcmpmumhouseitemscontent h2,
.hcmpmumhousewhytitle h2,
.hcmpmumhousefaqintro h2{
margin:0 0 23px;
color:#173d69;
font-size:43px;
font-weight:800;
line-height:1.25;
text-align:left;
}
.hcmpmumhouseintrocontent h2 span,
.hcmpmumhouseitemscontent h2 span,
.hcmpmumhousewhytitle h2 span,
.hcmpmumhousefaqintro h2 span{
color:#e53935;
}
.hcmpmumhouseintrocontent p,
.hcmpmumhouseitemscontent p,
.hcmpmumhousewhytitle p,
.hcmpmumhousefaqintro p{
margin:0 0 17px;
color:#68717d;
font-size:15px;
line-height:1.9;
text-align:left;
}
.hcmpmumhouselead{
color:#46505c !important;
font-size:16px !important;
}
.hcmpmumhousefeatures{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin:30px 0;
}
.hcmpmumhousefeature{
display:flex;
align-items:center;
gap:10px;
color:#394451;
font-size:13px;
font-weight:600;
}
.hcmpmumhousefeature i{
width:25px;
height:25px;
min-width:25px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(244,180,0,.15);
color:#173d69;
border-radius:50%;
font-size:10px;
}
.hcmpmumhouseintroactions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:13px;
}
.hcmpmumhouseprimarybtn,
.hcmpmumhousecallbtn,
.hcmpmumhouseitemsbtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:54px;
padding:14px 23px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.3s ease;
}
.hcmpmumhouseprimarybtn{
background:#173d69;
color:#fff;
}
.hcmpmumhousecallbtn{
background:#e53935;
color:#fff;
}
.hcmpmumhouseprimarybtn:hover,
.hcmpmumhousecallbtn:hover,
.hcmpmumhouseitemsbtn:hover{
transform:translateY(-3px);
}
/*==================================================
SUMMARY
==================================================*/
.hcmpmumhousesummary{
padding:42px;
background:#173d69;
border-radius:20px;
box-shadow:0 25px 60px rgba(23,61,105,.18);
}
.hcmpmumhousesummarytag{
display:block;
margin-bottom:8px;
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumhousesummary > h3{
margin:0 0 27px;
color:#fff;
font-size:27px;
font-weight:800;
line-height:1.4;
}
.hcmpmumhousesummarylist{
display:flex;
flex-direction:column;
gap:12px;
}
.hcmpmumhousesummaryitem{
display:flex;
align-items:flex-start;
gap:15px;
padding:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
border-radius:9px;
}
.hcmpmumhousesummaryitem > span{
width:38px;
height:38px;
min-width:38px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:7px;
font-size:12px;
font-weight:800;
}
.hcmpmumhousesummaryitem h4{
margin:0 0 4px;
color:#fff;
font-size:14px;
}
.hcmpmumhousesummaryitem p{
margin:0;
color:rgba(255,255,255,.65);
font-size:12px;
line-height:1.6;
}
.hcmpmumhousesummarycall{
display:flex;
align-items:center;
gap:14px;
margin-top:25px;
padding-top:23px;
border-top:1px solid rgba(255,255,255,.14);
}
.hcmpmumhousesummarycall > i{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
background:#fff;
color:#173d69;
border-radius:50%;
}
.hcmpmumhousesummarycall span{
display:block;
color:rgba(255,255,255,.6);
font-size:10px;
}
.hcmpmumhousesummarycall a{
color:#e53935;
font-size:15px;
font-weight:700;
text-decoration:none;
}
/*==================================================
PROCESS
==================================================*/
.hcmpmumhouseprocess{
padding:95px 0;
background:#f5f7fa;
}
.hcmpmumhouseheading{
max-width:760px;
margin:0 auto 55px;
text-align:center;
}
.hcmpmumhouseheading > span{
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumhouseheading h2{
margin:10px 0 16px;
color:#173d69;
font-size:42px;
font-weight:800;
line-height:1.3;
}
.hcmpmumhouseheading h2 strong{
color:#e53935;
}
.hcmpmumhouseheading p{
margin:0;
color:#707985;
font-size:15px;
line-height:1.8;
}
.hcmpmumhouseprocessgrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}
.hcmpmumhouseprocesscard{
position:relative;
padding:35px 25px;
background:#fff;
border:1px solid #e5eaf0;
border-radius:14px;
text-align:left;
transition:.35s ease;
}
.hcmpmumhouseprocesscard:hover{
transform:translateY(-7px);
box-shadow:0 20px 45px rgba(23,61,105,.10);
}
.hcmpmumhouseprocessnumber{
position:absolute;
top:20px;
right:20px;
color:rgba(23,61,105,.08);
font-size:42px;
font-weight:800;
}
.hcmpmumhouseprocessicon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:23px;
background:#173d69;
color:#fff;
border-radius:11px;
font-size:21px;
}
.hcmpmumhouseprocesscard h3{
margin:0 0 10px;
color:#173d69;
font-size:18px;
}
.hcmpmumhouseprocesscard p{
margin:0;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
HOUSE ITEMS
==================================================*/
.hcmpmumhouseitems{
padding:100px 0;
background:#fff;
}
.hcmpmumhouseitemsgrid{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:65px;
align-items:center;
}
.hcmpmumhouseitemsbtn{
margin-top:10px;
background:#173d69;
color:#fff;
}
.hcmpmumhouseitemlist{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.hcmpmumhouseitembox{
display:flex;
align-items:flex-start;
gap:15px;
padding:22px;
background:#f7f9fb;
border:1px solid #e5eaf0;
border-radius:11px;
}
.hcmpmumhouseitembox > i{
width:47px;
height:47px;
min-width:47px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(244,180,0,.16);
color:#173d69;
border-radius:9px;
font-size:18px;
}
.hcmpmumhouseitembox h3{
margin:0 0 5px;
color:#173d69;
font-size:15px;
}
.hcmpmumhouseitembox p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.7;
}
/*==================================================
WHY CHOOSE
==================================================*/
.hcmpmumhousewhy{
padding:100px 0;
background:#f5f7fa;
}
.hcmpmumhousewhygrid{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:70px;
align-items:center;
}
.hcmpmumhousewhytitle .hcmpmumhouseprimarybtn{
margin-top:10px;
}
.hcmpmumhousewhylist{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.hcmpmumhousewhybox{
padding:27px;
background:#fff;
border:1px solid #e5eaf0;
border-radius:13px;
}
.hcmpmumhousewhyicon{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
background:#173d69;
color:#fff;
border-radius:10px;
font-size:19px;
}
.hcmpmumhousewhybox h3{
margin:0 0 9px;
color:#173d69;
font-size:17px;
}
.hcmpmumhousewhybox p{
margin:0;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
FAQ
==================================================*/
.hcmpmumhousefaq{
padding:100px 0;
background:#fff;
}
.hcmpmumhousefaqgrid{
display:grid;
grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
gap:70px;
align-items:start;
}
.hcmpmumhousefaqhelp{
display:flex;
align-items:center;
gap:14px;
margin-top:30px;
padding:20px;
background:#173d69;
border-radius:10px;
}
.hcmpmumhousefaqhelp > i{
width:48px;
height:48px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:50%;
}
.hcmpmumhousefaqhelp span{
display:block;
color:rgba(255,255,255,.65);
font-size:10px;
}
.hcmpmumhousefaqhelp a{
color:#fff;
font-size:18px;
font-weight:800;
text-decoration:none;
}
.hcmpmumhousefaqlist{
display:flex;
flex-direction:column;
gap:13px;
}
.hcmpmumhousefaqitem{
background:#f7f9fb;
border:1px solid #e4e9ef;
border-radius:9px;
overflow:hidden;
}
.hcmpmumhousefaqitem summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 22px;
color:#173d69;
font-size:14px;
font-weight:700;
cursor:pointer;
list-style:none;
}
.hcmpmumhousefaqitem summary::-webkit-details-marker{
display:none;
}
.hcmpmumhousefaqitem summary i{
font-size:12px;
transition:transform .3s ease;
}
.hcmpmumhousefaqitem[open] summary i{
transform:rotate(45deg);
}
.hcmpmumhousefaqitem p{
margin:0;
padding:0 22px 21px;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
CTA
==================================================*/
.hcmpmumhousecta{
padding:75px 0;
background:#173d69;
}
.hcmpmumhousectawrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:45px;
}
.hcmpmumhousectacontent{
max-width:720px;
text-align:left;
}
.hcmpmumhousectacontent > span{
display:block;
margin-bottom:7px;
color:#e53935;
font-size:11px;
font-weight:800;
text-transform:uppercase;
}
.hcmpmumhousectacontent h2{
margin:0 0 10px;
color:#fff;
font-size:35px;
font-weight:800;
line-height:1.3;
}
.hcmpmumhousectacontent p{
margin:0;
color:rgba(255,255,255,.7);
font-size:14px;
line-height:1.8;
}
.hcmpmumhousectaactions{
display:flex;
align-items:center;
gap:12px;
min-width:max-content;
}
.hcmpmumhousectaprimary,
.hcmpmumhousectacall{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:54px;
padding:14px 22px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
}
.hcmpmumhousectaprimary{
background:#e53935;
color:#173d69;
}
.hcmpmumhousectacall{
background:#fff;
color:#173d69;
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumhousebreadwrap,
.hcmpmumhousectawrap{
align-items:flex-start;
}
.hcmpmumhousebreadcontent h1{
font-size:40px;
}
.hcmpmumhousebreadbox{
max-width:310px;
}
.hcmpmumhouseintrogrid,
.hcmpmumhouseitemsgrid,
.hcmpmumhousewhygrid,
.hcmpmumhousefaqgrid{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumhouseprocessgrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hcmpmumhouseintrocontent h2,
.hcmpmumhouseitemscontent h2,
.hcmpmumhousewhytitle h2,
.hcmpmumhousefaqintro h2,
.hcmpmumhouseheading h2{
font-size:38px;
}
.hcmpmumhousectawrap{
flex-direction:column;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumhousebread{
padding:55px 0;
}
.hcmpmumhousebreadwrap{
flex-direction:column;
gap:30px;
}
.hcmpmumhousebreadcontent h1{
font-size:33px;
}
.hcmpmumhousebreadbox{
max-width:100%;
}
.hcmpmumhouseintro,
.hcmpmumhouseitems,
.hcmpmumhousewhy,
.hcmpmumhousefaq{
padding:65px 0;
}
.hcmpmumhouseprocess{
padding:65px 0;
}
.hcmpmumhouseintrocontent h2,
.hcmpmumhouseitemscontent h2,
.hcmpmumhousewhytitle h2,
.hcmpmumhousefaqintro h2,
.hcmpmumhouseheading h2{
font-size:30px;
}
.hcmpmumhousefeatures,
.hcmpmumhouseprocessgrid,
.hcmpmumhouseitemlist,
.hcmpmumhousewhylist{
grid-template-columns:1fr;
}
.hcmpmumhousesummary{
padding:32px 23px;
}
.hcmpmumhouseintroactions{
flex-direction:column;
align-items:stretch;
}
.hcmpmumhouseprimarybtn,
.hcmpmumhousecallbtn{
width:100%;
}
.hcmpmumhouseheading{
margin-bottom:40px;
text-align:left;
}
.hcmpmumhouseheading h2,
.hcmpmumhouseheading p{
text-align:left;
}
.hcmpmumhousecta{
padding:60px 0;
}
.hcmpmumhousectacontent h2{
font-size:28px;
}
.hcmpmumhousectaactions{
width:100%;
min-width:0;
flex-direction:column;
align-items:stretch;
}
.hcmpmumhousectaprimary,
.hcmpmumhousectacall{
width:100%;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumhousebreadcontent h1{
font-size:29px;
}
.hcmpmumhousebreadbox{
padding:18px 15px;
}
.hcmpmumhousebreadicon{
width:52px;
height:52px;
min-width:52px;
font-size:20px;
}
.hcmpmumhouseintrocontent h2,
.hcmpmumhouseitemscontent h2,
.hcmpmumhousewhytitle h2,
.hcmpmumhousefaqintro h2,
.hcmpmumhouseheading h2{
font-size:27px;
}
.hcmpmumhousesummary{
padding:28px 18px;
}
.hcmpmumhousesummary > h3{
font-size:23px;
}
.hcmpmumhouseprocesscard,
.hcmpmumhousewhybox{
padding:25px 20px;
}
.hcmpmumhouseitembox{
padding:18px;
}
.hcmpmumhousefaqitem summary{
padding:18px;
font-size:13px;
}
.hcmpmumhousefaqitem p{
padding:0 18px 19px;
}
}
/*==================================================
OFFICE PAGE GLOBAL
==================================================*/
.hcmpmumofficebread,
.hcmpmumofficeintro,
.hcmpmumofficegoods,
.hcmpmumofficeprocess,
.hcmpmumofficewhy,
.hcmpmumofficetypes,
.hcmpmumofficefaq,
.hcmpmumofficecta{
font-family:"Poppins",sans-serif;
}
.hcmpmumofficeeyebrow{
display:inline-block;
margin:0 0 15px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
line-height:1.5;
text-transform:uppercase;
}
/*==================================================
BREADCRUMB
==================================================*/
.hcmpmumofficebread{
position:relative;
width:100%;
padding:85px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumofficebread::before{
content:"";
position:absolute;
width:460px;
height:460px;
top:-310px;
right:-180px;
border:75px solid rgba(255,255,255,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpmumofficebread::after{
content:"";
position:absolute;
width:300px;
height:300px;
left:-170px;
bottom:-210px;
background:rgba(244,180,0,.09);
border-radius:50%;
pointer-events:none;
}
.hcmpmumofficebreadwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.hcmpmumofficebreadcontent{
flex:1;
max-width:760px;
min-width:0;
text-align:left;
}
.hcmpmumofficebreadlabel{
display:inline-flex;
align-items:center;
margin:0 0 16px;
padding:8px 16px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
border-radius:0 5px 5px 0;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:.8px;
line-height:1.5;
text-transform:uppercase;
}
.hcmpmumofficebreadcontent h1{
margin:0 0 15px;
padding:0;
color:#ffffff;
font-size:48px;
font-weight:800;
line-height:1.2;
text-align:left;
}
.hcmpmumofficebreadcontent p{
max-width:680px;
margin:0 0 23px;
color:rgba(255,255,255,.72);
font-size:15px;
line-height:1.8;
text-align:left;
}
.hcmpmumofficebreadcrumb{
display:flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
gap:11px;
}
.hcmpmumofficebreadcrumb a{
display:inline-flex;
align-items:center;
gap:7px;
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:600;
}
.hcmpmumofficebreadcrumb > i{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumofficebreadcrumb > span{
color:#e53935;
font-size:13px;
font-weight:700;
}
.hcmpmumofficebreadside{
display:flex;
align-items:center;
gap:17px;
width:100%;
max-width:385px;
padding:23px 24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
text-align:left;
}
.hcmpmumofficebreadicon{
width:66px;
height:66px;
min-width:66px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:12px;
font-size:25px;
}
.hcmpmumofficebreadsidetext{
min-width:0;
text-align:left;
}
.hcmpmumofficebreadsidetext > span{
display:block;
margin-bottom:3px;
color:rgba(255,255,255,.60);
font-size:10px;
font-weight:700;
text-transform:uppercase;
}
.hcmpmumofficebreadsidetext h2{
margin:0 0 7px;
color:#ffffff;
font-size:17px;
font-weight:700;
line-height:1.4;
}
.hcmpmumofficebreadsidetext a{
display:inline-flex;
align-items:center;
gap:7px;
color:#e53935;
text-decoration:none;
font-size:12px;
font-weight:700;
}
/*==================================================
INTRODUCTION
==================================================*/
.hcmpmumofficeintro{
padding:100px 0;
background:#ffffff;
}
.hcmpmumofficeintrogrid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:65px;
align-items:center;
}
.hcmpmumofficeintrocontent{
min-width:0;
text-align:left;
}
.hcmpmumofficeintrocontent h2,
.hcmpmumofficeprocessintro h2,
.hcmpmumofficewhyintro h2,
.hcmpmumofficefaqintro h2{
margin:0 0 23px;
color:#173d69;
font-size:43px;
font-weight:800;
line-height:1.25;
text-align:left;
}
.hcmpmumofficeintrocontent h2 span,
.hcmpmumofficeprocessintro h2 span,
.hcmpmumofficewhyintro h2 span,
.hcmpmumofficefaqintro h2 span{
color:#e53935;
}
.hcmpmumofficeintrocontent p,
.hcmpmumofficeprocessintro > p,
.hcmpmumofficewhyintro > p,
.hcmpmumofficefaqintro > p{
margin:0 0 17px;
color:#68717d;
font-size:15px;
line-height:1.9;
text-align:left;
}
.hcmpmumofficelead{
color:#46505c !important;
font-size:16px !important;
}
.hcmpmumofficehighlight{
display:flex;
align-items:flex-start;
gap:16px;
margin:28px 0;
padding:20px;
background:#f5f7fa;
border-left:4px solid #e53935;
border-radius:0 9px 9px 0;
}
.hcmpmumofficehighlighticon{
width:48px;
height:48px;
min-width:48px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:9px;
font-size:18px;
}
.hcmpmumofficehighlight span{
display:block;
margin-bottom:4px;
color:#173d69;
font-size:14px;
font-weight:700;
}
.hcmpmumofficehighlight p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.7;
}
.hcmpmumofficeintroactions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:13px;
}
.hcmpmumofficeprimarybtn,
.hcmpmumofficecallbtn,
.hcmpmumofficeplanbtn,
.hcmpmumofficefaqbtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:54px;
padding:14px 23px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumofficeprimarybtn{
background:#173d69;
color:#ffffff;
}
.hcmpmumofficecallbtn{
background:#e53935;
color:#173d69;
}
.hcmpmumofficeprimarybtn:hover,
.hcmpmumofficecallbtn:hover,
.hcmpmumofficeplanbtn:hover,
.hcmpmumofficefaqbtn:hover{
transform:translateY(-3px);
}
/*==================================================
OFFICE PLANNING BOX
==================================================*/
.hcmpmumofficeplan{
position:relative;
padding:42px;
background:#173d69;
border-radius:20px;
box-shadow:0 25px 60px rgba(23,61,105,.18);
overflow:hidden;
}
.hcmpmumofficeplan::before{
content:"";
position:absolute;
width:250px;
height:250px;
top:-160px;
right:-150px;
border:45px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumofficeplantop,
.hcmpmumofficeplanlist,
.hcmpmumofficeplanbtn{
position:relative;
z-index:2;
}
.hcmpmumofficeplantop{
margin-bottom:25px;
text-align:left;
}
.hcmpmumofficeplantop > span{
display:block;
margin-bottom:7px;
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumofficeplantop h3{
margin:0 0 10px;
color:#ffffff;
font-size:27px;
font-weight:800;
line-height:1.4;
text-align:left;
}
.hcmpmumofficeplantop p{
margin:0;
color:rgba(255,255,255,.65);
font-size:13px;
line-height:1.8;
}
.hcmpmumofficeplanlist{
display:flex;
flex-direction:column;
gap:12px;
}
.hcmpmumofficeplanitem{
display:flex;
align-items:flex-start;
gap:15px;
padding:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
border-radius:9px;
}
.hcmpmumofficeplannumber{
width:39px;
height:39px;
min-width:39px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:7px;
font-size:11px;
font-weight:800;
}
.hcmpmumofficeplanitem h4{
margin:0 0 4px;
color:#ffffff;
font-size:14px;
font-weight:700;
}
.hcmpmumofficeplanitem p{
margin:0;
color:rgba(255,255,255,.64);
font-size:12px;
line-height:1.6;
}
.hcmpmumofficeplanbtn{
width:100%;
margin-top:22px;
background:#e53935;
color:#173d69;
}
/*==================================================
COMMON SECTION HEAD
==================================================*/
.hcmpmumofficehead{
max-width:760px;
margin:0 auto 55px;
text-align:center;
}
.hcmpmumofficehead > span{
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumofficehead h2{
margin:10px 0 16px;
color:#173d69;
font-size:42px;
font-weight:800;
line-height:1.3;
}
.hcmpmumofficehead h2 strong{
color:#e53935;
}
.hcmpmumofficehead p{
margin:0;
color:#707985;
font-size:15px;
line-height:1.8;
}
/*==================================================
OFFICE GOODS
==================================================*/
.hcmpmumofficegoods{
padding:95px 0;
background:#f5f7fa;
}
.hcmpmumofficegoodsgrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}
.hcmpmumofficegoodscard{
position:relative;
padding:32px 25px;
background:#ffffff;
border:1px solid #e5eaf0;
border-radius:14px;
text-align:left;
overflow:hidden;
transition:.35s ease;
}
.hcmpmumofficegoodscard:hover{
transform:translateY(-7px);
box-shadow:0 20px 45px rgba(23,61,105,.10);
}
.hcmpmumofficegoodsicon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
background:#173d69;
color:#ffffff;
border-radius:11px;
font-size:21px;
}
.hcmpmumofficegoodscard h3{
margin:0 0 10px;
color:#173d69;
font-size:18px;
line-height:1.5;
}
.hcmpmumofficegoodscard p{
margin:0 0 20px;
color:#707985;
font-size:13px;
line-height:1.8;
}
.hcmpmumofficegoodscard > span{
display:inline-block;
padding:6px 11px;
background:rgba(244,180,0,.14);
color:#173d69;
border-radius:50px;
font-size:9px;
font-weight:800;
text-transform:uppercase;
}
/*==================================================
OFFICE PROCESS
==================================================*/
.hcmpmumofficeprocess{
padding:100px 0;
background:#ffffff;
}
.hcmpmumofficeprocessgrid{
display:grid;
grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
gap:70px;
align-items:center;
}
.hcmpmumofficeprocessintro{
text-align:left;
}
.hcmpmumofficeprocessnote{
display:flex;
align-items:flex-start;
gap:13px;
margin:28px 0;
padding:18px;
background:#f5f7fa;
border-left:4px solid #e53935;
}
.hcmpmumofficeprocessnote i{
margin-top:5px;
color:#173d69;
font-size:15px;
}
.hcmpmumofficeprocessnote p{
margin:0;
color:#68717d;
font-size:12px;
line-height:1.8;
}
.hcmpmumofficesteps{
position:relative;
display:flex;
flex-direction:column;
gap:17px;
}
.hcmpmumofficesteps::before{
content:"";
position:absolute;
top:45px;
bottom:45px;
left:34px;
width:2px;
background:#e2e7ed;
}
.hcmpmumofficestep{
position:relative;
z-index:2;
display:grid;
grid-template-columns:68px minmax(0,1fr);
gap:22px;
align-items:center;
}
.hcmpmumofficestepnumber{
width:68px;
height:68px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
border:7px solid #ffffff;
border-radius:50%;
box-shadow:0 7px 20px rgba(23,61,105,.15);
color:#ffffff;
font-size:14px;
font-weight:800;
}
.hcmpmumofficestepcontent{
padding:20px 23px;
background:#f7f9fb;
border:1px solid #e4e9ef;
border-radius:10px;
text-align:left;
}
.hcmpmumofficestepcontent > span{
display:block;
margin-bottom:4px;
color:#e53935;
font-size:9px;
font-weight:800;
letter-spacing:.8px;
}
.hcmpmumofficestepcontent h3{
margin:0 0 6px;
color:#173d69;
font-size:16px;
font-weight:700;
}
.hcmpmumofficestepcontent p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.7;
}
/*==================================================
WHY CHOOSE
==================================================*/
.hcmpmumofficewhy{
padding:100px 0;
background:#f5f7fa;
}
.hcmpmumofficewhygrid{
display:grid;
grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
gap:70px;
align-items:center;
}
.hcmpmumofficewhyintro{
text-align:left;
}
.hcmpmumofficewhycall{
display:flex;
align-items:center;
gap:14px;
margin-top:30px;
padding:20px;
background:#173d69;
border-radius:10px;
}
.hcmpmumofficewhycallicon{
width:50px;
height:50px;
min-width:50px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:50%;
font-size:18px;
}
.hcmpmumofficewhycall span{
display:block;
color:rgba(255,255,255,.6);
font-size:10px;
}
.hcmpmumofficewhycall a{
color:#ffffff;
text-decoration:none;
font-size:18px;
font-weight:800;
}
.hcmpmumofficewhyfeatures{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.hcmpmumofficewhybox{
position:relative;
padding:28px;
background:#ffffff;
border:1px solid #e5eaf0;
border-radius:13px;
text-align:left;
overflow:hidden;
}
.hcmpmumofficewhybox > span{
position:absolute;
top:18px;
right:20px;
color:rgba(23,61,105,.07);
font-size:38px;
font-weight:800;
}
.hcmpmumofficewhyicon{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
background:#173d69;
color:#ffffff;
border-radius:10px;
font-size:19px;
}
.hcmpmumofficewhybox h3{
margin:0 0 9px;
color:#173d69;
font-size:17px;
}
.hcmpmumofficewhybox p{
margin:0;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
OFFICE TYPES
==================================================*/
.hcmpmumofficetypes{
padding:95px 0;
background:#ffffff;
}
.hcmpmumofficetypesgrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}
.hcmpmumofficetypeitem{
padding:30px 24px;
background:#173d69;
border-bottom:5px solid #e53935;
border-radius:12px;
text-align:left;
transition:.35s ease;
}
.hcmpmumofficetypeitem:hover{
transform:translateY(-6px);
}
.hcmpmumofficetypeitem > i{
display:block;
margin-bottom:20px;
color:#e53935;
font-size:29px;
}
.hcmpmumofficetypeitem h3{
margin:0 0 9px;
color:#ffffff;
font-size:17px;
}
.hcmpmumofficetypeitem p{
margin:0;
color:rgba(255,255,255,.68);
font-size:12px;
line-height:1.8;
}
/*==================================================
FAQ
==================================================*/
.hcmpmumofficefaq{
padding:100px 0;
background:#f5f7fa;
}
.hcmpmumofficefaqgrid{
display:grid;
grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
gap:70px;
align-items:start;
}
.hcmpmumofficefaqintro{
text-align:left;
}
.hcmpmumofficefaqbtn{
margin-top:15px;
background:#173d69;
color:#ffffff;
}
.hcmpmumofficefaqlist{
display:flex;
flex-direction:column;
gap:13px;
}
.hcmpmumofficefaqitem{
background:#ffffff;
border:1px solid #e4e9ef;
border-radius:9px;
overflow:hidden;
}
.hcmpmumofficefaqitem summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 22px;
color:#173d69;
font-size:14px;
font-weight:700;
cursor:pointer;
list-style:none;
}
.hcmpmumofficefaqitem summary::-webkit-details-marker{
display:none;
}
.hcmpmumofficefaqitem summary i{
font-size:12px;
transition:transform .3s ease;
}
.hcmpmumofficefaqitem[open] summary i{
transform:rotate(45deg);
}
.hcmpmumofficefaqitem p{
margin:0;
padding:0 22px 21px;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
CTA
==================================================*/
.hcmpmumofficecta{
position:relative;
padding:75px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumofficecta::after{
content:"";
position:absolute;
width:280px;
height:280px;
right:-150px;
bottom:-190px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumofficectawrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:45px;
}
.hcmpmumofficectacontent{
max-width:730px;
text-align:left;
}
.hcmpmumofficectacontent > span{
display:block;
margin-bottom:7px;
color:#e53935;
font-size:11px;
font-weight:800;
text-transform:uppercase;
}
.hcmpmumofficectacontent h2{
margin:0 0 10px;
color:#ffffff;
font-size:35px;
font-weight:800;
line-height:1.3;
}
.hcmpmumofficectacontent p{
margin:0;
color:rgba(255,255,255,.70);
font-size:14px;
line-height:1.8;
}
.hcmpmumofficectaactions{
display:flex;
align-items:center;
gap:12px;
min-width:max-content;
}
.hcmpmumofficectaprimary,
.hcmpmumofficectacall{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:54px;
padding:14px 22px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumofficectaprimary{
background:#e53935;
color:#173d69;
}
.hcmpmumofficectacall{
background:#ffffff;
color:#173d69;
}
.hcmpmumofficectaprimary:hover,
.hcmpmumofficectacall:hover{
transform:translateY(-3px);
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumofficebreadwrap{
align-items:flex-start;
gap:35px;
}
.hcmpmumofficebreadcontent h1{
font-size:40px;
}
.hcmpmumofficebreadside{
max-width:310px;
}
.hcmpmumofficeintrogrid,
.hcmpmumofficeprocessgrid,
.hcmpmumofficewhygrid,
.hcmpmumofficefaqgrid{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumofficegoodsgrid,
.hcmpmumofficetypesgrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hcmpmumofficeintrocontent h2,
.hcmpmumofficeprocessintro h2,
.hcmpmumofficewhyintro h2,
.hcmpmumofficefaqintro h2,
.hcmpmumofficehead h2{
font-size:38px;
}
.hcmpmumofficectawrap{
flex-direction:column;
align-items:flex-start;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumofficebread{
padding:55px 0;
}
.hcmpmumofficebreadwrap{
flex-direction:column;
align-items:stretch;
gap:30px;
}
.hcmpmumofficebreadcontent h1{
font-size:33px;
}
.hcmpmumofficebreadside{
max-width:100%;
}
.hcmpmumofficeintro,
.hcmpmumofficeprocess,
.hcmpmumofficewhy,
.hcmpmumofficefaq{
padding:65px 0;
}
.hcmpmumofficegoods,
.hcmpmumofficetypes{
padding:65px 0;
}
.hcmpmumofficeintrocontent h2,
.hcmpmumofficeprocessintro h2,
.hcmpmumofficewhyintro h2,
.hcmpmumofficefaqintro h2,
.hcmpmumofficehead h2{
font-size:30px;
}
.hcmpmumofficeintroactions{
flex-direction:column;
align-items:stretch;
}
.hcmpmumofficeprimarybtn,
.hcmpmumofficecallbtn{
width:100%;
}
.hcmpmumofficeplan{
padding:32px 23px;
}
.hcmpmumofficegoodsgrid,
.hcmpmumofficewhyfeatures,
.hcmpmumofficetypesgrid{
grid-template-columns:1fr;
}
.hcmpmumofficehead{
margin-bottom:40px;
text-align:left;
}
.hcmpmumofficehead h2,
.hcmpmumofficehead p{
text-align:left;
}
.hcmpmumofficestep{
grid-template-columns:55px minmax(0,1fr);
gap:14px;
}
.hcmpmumofficesteps::before{
left:27px;
}
.hcmpmumofficestepnumber{
width:55px;
height:55px;
border-width:5px;
font-size:12px;
}
.hcmpmumofficestepcontent{
padding:18px;
}
.hcmpmumofficecta{
padding:60px 0;
}
.hcmpmumofficectacontent h2{
font-size:28px;
}
.hcmpmumofficectaactions{
width:100%;
min-width:0;
flex-direction:column;
align-items:stretch;
}
.hcmpmumofficectaprimary,
.hcmpmumofficectacall{
width:100%;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumofficebreadcontent h1{
font-size:29px;
}
.hcmpmumofficebreadside{
padding:18px 15px;
}
.hcmpmumofficebreadicon{
width:52px;
height:52px;
min-width:52px;
font-size:20px;
}
.hcmpmumofficeintrocontent h2,
.hcmpmumofficeprocessintro h2,
.hcmpmumofficewhyintro h2,
.hcmpmumofficefaqintro h2,
.hcmpmumofficehead h2{
font-size:27px;
}
.hcmpmumofficeplan{
padding:28px 18px;
}
.hcmpmumofficeplantop h3{
font-size:23px;
}
.hcmpmumofficegoodscard,
.hcmpmumofficewhybox,
.hcmpmumofficetypeitem{
padding:25px 20px;
}
.hcmpmumofficestep{
grid-template-columns:48px minmax(0,1fr);
gap:11px;
}
.hcmpmumofficesteps::before{
left:23px;
}
.hcmpmumofficestepnumber{
width:48px;
height:48px;
font-size:10px;
}
.hcmpmumofficestepcontent{
padding:16px 14px;
}
.hcmpmumofficestepcontent h3{
font-size:14px;
}
.hcmpmumofficefaqitem summary{
padding:18px;
font-size:13px;
}
.hcmpmumofficefaqitem p{
padding:0 18px 19px;
}
}
/*==================================================
VEHICLE PAGE GLOBAL
==================================================*/
.hcmpmumvehiclebread,
.hcmpmumvehicleintro,
.hcmpmumvehicleservices,
.hcmpmumvehicleprocess,
.hcmpmumvehicleprepare,
.hcmpmumvehiclewhy,
.hcmpmumvehiclefaq,
.hcmpmumvehiclecta{
font-family:"Poppins",sans-serif;
}
.hcmpmumvehicleeyebrow{
display:inline-block;
margin:0 0 15px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
line-height:1.5;
text-transform:uppercase;
}
/*==================================================
BREADCRUMB
==================================================*/
.hcmpmumvehiclebread{
position:relative;
width:100%;
padding:85px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumvehiclebread::before{
content:"";
position:absolute;
width:460px;
height:460px;
top:-310px;
right:-180px;
border:75px solid rgba(255,255,255,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpmumvehiclebread::after{
content:"";
position:absolute;
width:300px;
height:300px;
left:-170px;
bottom:-210px;
background:rgba(244,180,0,.09);
border-radius:50%;
pointer-events:none;
}
.hcmpmumvehiclebreadwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.hcmpmumvehiclebreadcontent{
flex:1;
max-width:760px;
min-width:0;
text-align:left;
}
.hcmpmumvehiclebreadlabel{
display:inline-flex;
align-items:center;
margin:0 0 16px;
padding:8px 16px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
border-radius:0 5px 5px 0;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumvehiclebreadcontent h1{
margin:0 0 15px;
color:#ffffff;
font-size:48px;
font-weight:800;
line-height:1.2;
text-align:left;
}
.hcmpmumvehiclebreadcontent p{
max-width:680px;
margin:0 0 23px;
color:rgba(255,255,255,.72);
font-size:15px;
line-height:1.8;
text-align:left;
}
.hcmpmumvehiclebreadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:11px;
}
.hcmpmumvehiclebreadcrumb a{
display:inline-flex;
align-items:center;
gap:7px;
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:600;
}
.hcmpmumvehiclebreadcrumb > i{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumvehiclebreadcrumb > span{
color:#e53935;
font-size:13px;
font-weight:700;
}
.hcmpmumvehiclebreadside{
display:flex;
align-items:center;
gap:17px;
width:100%;
max-width:385px;
padding:23px 24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
text-align:left;
}
.hcmpmumvehiclebreadicon{
width:66px;
height:66px;
min-width:66px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:12px;
font-size:25px;
}
.hcmpmumvehiclebreadsidetext{
min-width:0;
text-align:left;
}
.hcmpmumvehiclebreadsidetext > span{
display:block;
margin-bottom:3px;
color:rgba(255,255,255,.6);
font-size:10px;
font-weight:700;
text-transform:uppercase;
}
.hcmpmumvehiclebreadsidetext h2{
margin:0 0 7px;
color:#ffffff;
font-size:17px;
font-weight:700;
line-height:1.4;
}
.hcmpmumvehiclebreadsidetext a{
display:inline-flex;
align-items:center;
gap:7px;
color:#e53935;
text-decoration:none;
font-size:12px;
font-weight:700;
}
/*==================================================
INTRO
==================================================*/
.hcmpmumvehicleintro{
padding:100px 0;
background:#ffffff;
}
.hcmpmumvehicleintrogrid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:65px;
align-items:center;
}
.hcmpmumvehicleintrocontent{
text-align:left;
}
.hcmpmumvehicleintrocontent h2,
.hcmpmumvehicleprocessintro h2,
.hcmpmumvehiclepreparecontent h2,
.hcmpmumvehiclefaqintro h2{
margin:0 0 23px;
color:#173d69;
font-size:43px;
font-weight:800;
line-height:1.25;
text-align:left;
}
.hcmpmumvehicleintrocontent h2 span,
.hcmpmumvehicleprocessintro h2 span,
.hcmpmumvehiclepreparecontent h2 span,
.hcmpmumvehiclefaqintro h2 span{
color:#e53935;
}
.hcmpmumvehicleintrocontent p,
.hcmpmumvehicleprocessintro > p,
.hcmpmumvehiclepreparecontent p,
.hcmpmumvehiclefaqintro > p{
margin:0 0 17px;
color:#68717d;
font-size:15px;
line-height:1.9;
text-align:left;
}
.hcmpmumvehiclelead{
color:#46505c !important;
font-size:16px !important;
}
.hcmpmumvehicleintrofeatures{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin:29px 0;
}
.hcmpmumvehicleintrofeature{
display:flex;
align-items:center;
gap:10px;
color:#394451;
font-size:13px;
font-weight:600;
}
.hcmpmumvehicleintrofeature i{
width:25px;
height:25px;
min-width:25px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(244,180,0,.16);
color:#173d69;
border-radius:50%;
font-size:10px;
}
.hcmpmumvehicleintroactions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:13px;
}
.hcmpmumvehicleprimarybtn,
.hcmpmumvehiclecallbtn,
.hcmpmumvehiclequickbtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:54px;
padding:14px 23px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumvehicleprimarybtn{
background:#173d69;
color:#ffffff;
}
.hcmpmumvehiclecallbtn{
background:#e53935;
color:#173d69;
}
.hcmpmumvehicleprimarybtn:hover,
.hcmpmumvehiclecallbtn:hover,
.hcmpmumvehiclequickbtn:hover{
transform:translateY(-3px);
}
/*==================================================
QUICK BOX
==================================================*/
.hcmpmumvehiclequickbox{
position:relative;
padding:42px;
background:#173d69;
border-radius:20px;
box-shadow:0 25px 60px rgba(23,61,105,.18);
overflow:hidden;
}
.hcmpmumvehiclequickbox::before{
content:"";
position:absolute;
width:250px;
height:250px;
top:-160px;
right:-150px;
border:45px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumvehiclequicktop{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:16px;
margin-bottom:25px;
}
.hcmpmumvehiclequickicon{
width:60px;
height:60px;
min-width:60px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:11px;
font-size:22px;
}
.hcmpmumvehiclequicktop span{
display:block;
margin-bottom:4px;
color:#e53935;
font-size:9px;
font-weight:800;
text-transform:uppercase;
}
.hcmpmumvehiclequicktop h3{
margin:0;
color:#ffffff;
font-size:21px;
font-weight:800;
line-height:1.4;
}
.hcmpmumvehiclequicklist{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
gap:12px;
}
.hcmpmumvehiclequickitem{
display:flex;
align-items:flex-start;
gap:15px;
padding:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
border-radius:9px;
}
.hcmpmumvehiclequickitem > span{
width:39px;
height:39px;
min-width:39px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:7px;
font-size:11px;
font-weight:800;
}
.hcmpmumvehiclequickitem h4{
margin:0 0 4px;
color:#ffffff;
font-size:14px;
}
.hcmpmumvehiclequickitem p{
margin:0;
color:rgba(255,255,255,.64);
font-size:12px;
line-height:1.6;
}
.hcmpmumvehiclequickbtn{
position:relative;
z-index:2;
width:100%;
margin-top:22px;
background:#e53935;
color:#173d69;
}
/*==================================================
COMMON HEADING
==================================================*/
.hcmpmumvehicleheading{
max-width:760px;
margin:0 auto 55px;
text-align:center;
}
.hcmpmumvehicleheading > span{
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumvehicleheading h2{
margin:10px 0 16px;
color:#173d69;
font-size:42px;
font-weight:800;
line-height:1.3;
}
.hcmpmumvehicleheading h2 strong{
color:#e53935;
}
.hcmpmumvehicleheading p{
margin:0;
color:#707985;
font-size:15px;
line-height:1.8;
}
/*==================================================
CAR & BIKE SERVICES
==================================================*/
.hcmpmumvehicleservices{
padding:95px 0;
background:#f5f7fa;
}
.hcmpmumvehicleservicesgrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:25px;
}
.hcmpmumvehicleservicecard{
padding:42px;
background:#ffffff;
border:1px solid #e4e9ef;
border-top:5px solid #173d69;
border-radius:15px;
text-align:left;
transition:.35s ease;
}
.hcmpmumvehicleservicebike{
border-top-color:#e53935;
}
.hcmpmumvehicleservicecard:hover{
transform:translateY(-7px);
box-shadow:0 20px 50px rgba(23,61,105,.1);
}
.hcmpmumvehicleservicetop{
display:flex;
align-items:center;
gap:14px;
margin-bottom:25px;
}
.hcmpmumvehicleserviceicon{
width:62px;
height:62px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:11px;
font-size:24px;
}
.hcmpmumvehicleservicebike .hcmpmumvehicleserviceicon{
background:#e53935;
color:#173d69;
}
.hcmpmumvehicleservicetop > span{
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
}
.hcmpmumvehicleservicecard h3{
margin:0 0 14px;
color:#173d69;
font-size:25px;
font-weight:800;
line-height:1.4;
}
.hcmpmumvehicleservicecard > p{
margin:0 0 23px;
color:#707985;
font-size:14px;
line-height:1.9;
}
.hcmpmumvehicleservicecard ul{
display:flex;
flex-direction:column;
gap:12px;
margin:0 0 28px;
padding:0;
list-style:none;
}
.hcmpmumvehicleservicecard li{
display:flex;
align-items:center;
gap:10px;
color:#46505c;
font-size:13px;
font-weight:600;
}
.hcmpmumvehicleservicecard li i{
color:#e53935;
font-size:14px;
}
.hcmpmumvehicleservicecard > a{
display:inline-flex;
align-items:center;
gap:9px;
color:#173d69;
text-decoration:none;
font-size:13px;
font-weight:800;
}
/*==================================================
PROCESS
==================================================*/
.hcmpmumvehicleprocess{
padding:100px 0;
background:#ffffff;
}
.hcmpmumvehicleprocessgrid{
display:grid;
grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
gap:70px;
align-items:center;
}
.hcmpmumvehicleprocessintro{
text-align:left;
}
.hcmpmumvehicleprocesshelp{
display:flex;
align-items:center;
gap:14px;
margin-top:30px;
padding:20px;
background:#173d69;
border-radius:10px;
}
.hcmpmumvehicleprocesshelpicon{
width:50px;
height:50px;
min-width:50px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:50%;
font-size:18px;
}
.hcmpmumvehicleprocesshelp span{
display:block;
color:rgba(255,255,255,.6);
font-size:10px;
}
.hcmpmumvehicleprocesshelp a{
color:#ffffff;
text-decoration:none;
font-size:18px;
font-weight:800;
}
.hcmpmumvehicleprocesssteps{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.hcmpmumvehicleprocessstep{
position:relative;
padding:25px;
background:#f7f9fb;
border:1px solid #e4e9ef;
border-radius:13px;
overflow:hidden;
}
.hcmpmumvehicleprocessnumber{
position:absolute;
top:15px;
right:18px;
color:rgba(23,61,105,.07);
font-size:42px;
font-weight:800;
}
.hcmpmumvehicleprocesscontent{
position:relative;
z-index:2;
text-align:left;
}
.hcmpmumvehicleprocessicon{
width:53px;
height:53px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
background:#173d69;
color:#ffffff;
border-radius:10px;
font-size:19px;
}
.hcmpmumvehicleprocesscontent h3{
margin:0 0 8px;
color:#173d69;
font-size:17px;
}
.hcmpmumvehicleprocesscontent p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.8;
}
/*==================================================
PREPARATION
==================================================*/
.hcmpmumvehicleprepare{
padding:100px 0;
background:#f5f7fa;
}
.hcmpmumvehiclepreparegrid{
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:70px;
align-items:center;
}
.hcmpmumvehiclechecklist{
padding:38px;
background:#173d69;
border-radius:18px;
}
.hcmpmumvehiclecheckhead{
display:flex;
align-items:center;
gap:16px;
margin-bottom:25px;
}
.hcmpmumvehiclecheckhead > i{
width:58px;
height:58px;
min-width:58px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:11px;
font-size:21px;
}
.hcmpmumvehiclecheckhead span{
display:block;
margin-bottom:4px;
color:#e53935;
font-size:9px;
font-weight:800;
}
.hcmpmumvehiclecheckhead h3{
margin:0;
color:#ffffff;
font-size:22px;
}
.hcmpmumvehiclecheckitems{
display:flex;
flex-direction:column;
gap:12px;
}
.hcmpmumvehiclecheckitem{
display:flex;
align-items:flex-start;
gap:14px;
padding:17px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
border-radius:9px;
}
.hcmpmumvehiclecheckitem > i{
width:28px;
height:28px;
min-width:28px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:50%;
font-size:10px;
}
.hcmpmumvehiclecheckitem h4{
margin:0 0 4px;
color:#ffffff;
font-size:14px;
}
.hcmpmumvehiclecheckitem p{
margin:0;
color:rgba(255,255,255,.64);
font-size:12px;
line-height:1.7;
}
.hcmpmumvehiclepreparecontent{
text-align:left;
}
/*==================================================
WHY CHOOSE
==================================================*/
.hcmpmumvehiclewhy{
padding:95px 0;
background:#173d69;
}
.hcmpmumvehicleheadinglight h2{
color:#ffffff;
}
.hcmpmumvehicleheadinglight p{
color:rgba(255,255,255,.68);
}
.hcmpmumvehiclewhygrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}
.hcmpmumvehiclewhybox{
position:relative;
padding:30px 25px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.11);
border-radius:13px;
text-align:left;
overflow:hidden;
transition:.35s ease;
}
.hcmpmumvehiclewhybox:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.1);
}
.hcmpmumvehiclewhybox > span{
position:absolute;
top:18px;
right:20px;
color:rgba(255,255,255,.07);
font-size:39px;
font-weight:800;
}
.hcmpmumvehiclewhyicon{
width:54px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:21px;
background:#e53935;
color:#173d69;
border-radius:10px;
font-size:20px;
}
.hcmpmumvehiclewhybox h3{
margin:0 0 9px;
color:#ffffff;
font-size:17px;
}
.hcmpmumvehiclewhybox p{
margin:0;
color:rgba(255,255,255,.66);
font-size:13px;
line-height:1.8;
}
/*==================================================
FAQ
==================================================*/
.hcmpmumvehiclefaq{
padding:100px 0;
background:#ffffff;
}
.hcmpmumvehiclefaqgrid{
display:grid;
grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
gap:70px;
align-items:start;
}
.hcmpmumvehiclefaqintro{
text-align:left;
}
.hcmpmumvehiclefaqcall{
display:flex;
align-items:center;
gap:14px;
margin-top:30px;
padding:20px;
background:#173d69;
border-radius:10px;
}
.hcmpmumvehiclefaqcall > i{
width:48px;
height:48px;
min-width:48px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:50%;
}
.hcmpmumvehiclefaqcall span{
display:block;
color:rgba(255,255,255,.6);
font-size:10px;
}
.hcmpmumvehiclefaqcall a{
color:#ffffff;
text-decoration:none;
font-size:18px;
font-weight:800;
}
.hcmpmumvehiclefaqlist{
display:flex;
flex-direction:column;
gap:13px;
}
.hcmpmumvehiclefaqitem{
background:#f7f9fb;
border:1px solid #e4e9ef;
border-radius:9px;
overflow:hidden;
}
.hcmpmumvehiclefaqitem summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 22px;
color:#173d69;
font-size:14px;
font-weight:700;
cursor:pointer;
list-style:none;
}
.hcmpmumvehiclefaqitem summary::-webkit-details-marker{
display:none;
}
.hcmpmumvehiclefaqitem summary i{
font-size:12px;
transition:transform .3s ease;
}
.hcmpmumvehiclefaqitem[open] summary i{
transform:rotate(45deg);
}
.hcmpmumvehiclefaqitem p{
margin:0;
padding:0 22px 21px;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
FINAL CTA
==================================================*/
.hcmpmumvehiclecta{
position:relative;
padding:75px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumvehiclecta::after{
content:"";
position:absolute;
width:280px;
height:280px;
right:-150px;
bottom:-190px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumvehiclectawrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:45px;
}
.hcmpmumvehiclectacontent{
max-width:730px;
text-align:left;
}
.hcmpmumvehiclectacontent > span{
display:block;
margin-bottom:7px;
color:#e53935;
font-size:11px;
font-weight:800;
text-transform:uppercase;
}
.hcmpmumvehiclectacontent h2{
margin:0 0 10px;
color:#ffffff;
font-size:35px;
font-weight:800;
line-height:1.3;
}
.hcmpmumvehiclectacontent p{
margin:0;
color:rgba(255,255,255,.7);
font-size:14px;
line-height:1.8;
}
.hcmpmumvehiclectaactions{
display:flex;
align-items:center;
gap:12px;
min-width:max-content;
}
.hcmpmumvehiclectaprimary,
.hcmpmumvehiclectacall{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:54px;
padding:14px 22px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumvehiclectaprimary{
background:#e53935;
color:#173d69;
}
.hcmpmumvehiclectacall{
background:#ffffff;
color:#173d69;
}
.hcmpmumvehiclectaprimary:hover,
.hcmpmumvehiclectacall:hover{
transform:translateY(-3px);
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumvehiclebreadwrap{
align-items:flex-start;
gap:35px;
}
.hcmpmumvehiclebreadcontent h1{
font-size:40px;
}
.hcmpmumvehiclebreadside{
max-width:310px;
}
.hcmpmumvehicleintrogrid,
.hcmpmumvehicleprocessgrid,
.hcmpmumvehiclepreparegrid,
.hcmpmumvehiclefaqgrid{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumvehiclewhygrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hcmpmumvehicleintrocontent h2,
.hcmpmumvehicleprocessintro h2,
.hcmpmumvehiclepreparecontent h2,
.hcmpmumvehiclefaqintro h2,
.hcmpmumvehicleheading h2{
font-size:38px;
}
.hcmpmumvehiclectawrap{
flex-direction:column;
align-items:flex-start;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumvehiclebread{
padding:55px 0;
}
.hcmpmumvehiclebreadwrap{
flex-direction:column;
align-items:stretch;
gap:30px;
}
.hcmpmumvehiclebreadcontent h1{
font-size:33px;
}
.hcmpmumvehiclebreadside{
max-width:100%;
}
.hcmpmumvehicleintro,
.hcmpmumvehicleservices,
.hcmpmumvehicleprocess,
.hcmpmumvehicleprepare,
.hcmpmumvehiclewhy,
.hcmpmumvehiclefaq{
padding:65px 0;
}
.hcmpmumvehicleintrocontent h2,
.hcmpmumvehicleprocessintro h2,
.hcmpmumvehiclepreparecontent h2,
.hcmpmumvehiclefaqintro h2,
.hcmpmumvehicleheading h2{
font-size:30px;
}
.hcmpmumvehicleintrofeatures,
.hcmpmumvehicleservicesgrid,
.hcmpmumvehicleprocesssteps,
.hcmpmumvehiclewhygrid{
grid-template-columns:1fr;
}
.hcmpmumvehicleintroactions{
flex-direction:column;
align-items:stretch;
}
.hcmpmumvehicleprimarybtn,
.hcmpmumvehiclecallbtn{
width:100%;
}
.hcmpmumvehiclequickbox{
padding:32px 23px;
}
.hcmpmumvehicleheading{
margin-bottom:40px;
text-align:left;
}
.hcmpmumvehicleheading h2,
.hcmpmumvehicleheading p{
text-align:left;
}
.hcmpmumvehicleservicecard{
padding:32px 24px;
}
.hcmpmumvehiclechecklist{
padding:30px 22px;
}
.hcmpmumvehiclecta{
padding:60px 0;
}
.hcmpmumvehiclectacontent h2{
font-size:28px;
}
.hcmpmumvehiclectaactions{
width:100%;
min-width:0;
flex-direction:column;
align-items:stretch;
}
.hcmpmumvehiclectaprimary,
.hcmpmumvehiclectacall{
width:100%;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumvehiclebreadcontent h1{
font-size:29px;
}
.hcmpmumvehiclebreadside{
padding:18px 15px;
}
.hcmpmumvehiclebreadicon{
width:52px;
height:52px;
min-width:52px;
font-size:20px;
}
.hcmpmumvehicleintrocontent h2,
.hcmpmumvehicleprocessintro h2,
.hcmpmumvehiclepreparecontent h2,
.hcmpmumvehiclefaqintro h2,
.hcmpmumvehicleheading h2{
font-size:27px;
}
.hcmpmumvehiclequickbox{
padding:28px 18px;
}
.hcmpmumvehiclequicktop h3{
font-size:19px;
}
.hcmpmumvehicleservicecard{
padding:28px 20px;
}
.hcmpmumvehicleservicecard h3{
font-size:22px;
}
.hcmpmumvehicleprocessstep{
padding:22px 19px;
}
.hcmpmumvehiclechecklist{
padding:27px 18px;
}
.hcmpmumvehiclecheckhead h3{
font-size:19px;
}
.hcmpmumvehiclewhybox{
padding:26px 21px;
}
.hcmpmumvehiclefaqitem summary{
padding:18px;
font-size:13px;
}
.hcmpmumvehiclefaqitem p{
padding:0 18px 19px;
}
}
/*==================================================
STORAGE GLOBAL
==================================================*/
.hcmpmumstoragebread,
.hcmpmumstorageintro,
.hcmpmumstoragetypes,
.hcmpmumstoragesituations,
.hcmpmumstorageprocess,
.hcmpmumstorageprepare,
.hcmpmumstoragewhy,
.hcmpmumstoragefaq,
.hcmpmumstoragecta{
font-family:"Poppins",sans-serif;
}
.hcmpmumstorageeyebrow{
display:inline-block;
margin:0 0 15px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
line-height:1.5;
text-transform:uppercase;
}
/*==================================================
BREADCRUMB
==================================================*/
.hcmpmumstoragebread{
position:relative;
width:100%;
padding:85px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumstoragebread::before{
content:"";
position:absolute;
width:460px;
height:460px;
top:-310px;
right:-180px;
border:75px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumstoragebread::after{
content:"";
position:absolute;
width:300px;
height:300px;
left:-170px;
bottom:-210px;
background:rgba(244,180,0,.09);
border-radius:50%;
}
.hcmpmumstoragebreadwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.hcmpmumstoragebreadcontent{
flex:1;
max-width:760px;
min-width:0;
text-align:left;
}
.hcmpmumstoragebreadlabel{
display:inline-flex;
align-items:center;
margin-bottom:16px;
padding:8px 16px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
border-radius:0 5px 5px 0;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumstoragebreadcontent h1{
margin:0 0 15px;
color:#ffffff;
font-size:48px;
font-weight:800;
line-height:1.2;
}
.hcmpmumstoragebreadcontent p{
max-width:680px;
margin:0 0 23px;
color:rgba(255,255,255,.72);
font-size:15px;
line-height:1.8;
}
.hcmpmumstoragebreadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:11px;
}
.hcmpmumstoragebreadcrumb a{
display:inline-flex;
align-items:center;
gap:7px;
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:600;
}
.hcmpmumstoragebreadcrumb > i{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumstoragebreadcrumb > span{
color:#e53935;
font-size:13px;
font-weight:700;
}
.hcmpmumstoragebreadcard{
display:flex;
align-items:center;
gap:17px;
width:100%;
max-width:385px;
padding:23px 24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
}
.hcmpmumstoragebreadicon{
width:66px;
height:66px;
min-width:66px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:12px;
font-size:25px;
}
.hcmpmumstoragebreadcardtext span{
display:block;
margin-bottom:3px;
color:rgba(255,255,255,.6);
font-size:10px;
font-weight:700;
text-transform:uppercase;
}
.hcmpmumstoragebreadcardtext h2{
margin:0 0 7px;
color:#ffffff;
font-size:17px;
font-weight:700;
line-height:1.4;
}
.hcmpmumstoragebreadcardtext a{
display:inline-flex;
align-items:center;
gap:7px;
color:#e53935;
text-decoration:none;
font-size:12px;
font-weight:700;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpmumstoragesituationsintro{
width:100%;
min-width:0;
text-align:left;
}
.hcmpmumstoragesituationsintro .hcmpmumstorageeyebrow{
display:inline-block;
margin:0 0 15px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.5;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumstoragesituationsintro h2{
margin:0 0 22px;
color:#173d69;
font-size:43px;
font-weight:800;
line-height:1.25;
}
.hcmpmumstoragesituationsintro h2 span{
color:#e53935;
}
.hcmpmumstoragesituationsintro > p{
margin:0 0 17px;
color:#68717d;
font-size:15px;
font-weight:400;
line-height:1.9;
}
.hcmpmumstoragesituationsintro .hcmpmumstorageprimarybtn{
margin-top:15px;
}
/*==================================================
INTRO
==================================================*/
.hcmpmumstorageintro{
padding:100px 0;
background:#ffffff;
}
.hcmpmumstorageintrogrid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:65px;
align-items:center;
}
.hcmpmumstorageintrocontent,
.hcmpmumstoragesituationsintro,
.hcmpmumstoragepreparecontent,
.hcmpmumstoragewhyintro,
.hcmpmumstoragefaqintro{
text-align:left;
}
.hcmpmumstorageintrocontent h2,
.hcmpmumstoragesituationsintro h2,
.hcmpmumstoragepreparecontent h2,
.hcmpmumstoragewhyintro h2,
.hcmpmumstoragefaqintro h2{
margin:0 0 23px;
color:#173d69;
font-size:43px;
font-weight:800;
line-height:1.25;
}
.hcmpmumstorageintrocontent h2 span,
.hcmpmumstoragesituationsintro h2 span,
.hcmpmumstoragepreparecontent h2 span,
.hcmpmumstoragewhyintro h2 span,
.hcmpmumstoragefaqintro h2 span{
color:#e53935;
}
.hcmpmumstorageintrocontent p,
.hcmpmumstoragesituationsintro > p,
.hcmpmumstoragepreparecontent > p,
.hcmpmumstoragewhyintro > p,
.hcmpmumstoragefaqintro > p{
margin:0 0 17px;
color:#68717d;
font-size:15px;
line-height:1.9;
}
.hcmpmumstoragelead{
color:#46505c !important;
font-size:16px !important;
}
.hcmpmumstorageintroline{
display:flex;
align-items:flex-start;
gap:16px;
margin:28px 0;
padding:20px;
background:#f5f7fa;
border-left:4px solid #e53935;
border-radius:0 9px 9px 0;
}
.hcmpmumstorageintrolineicon{
width:48px;
height:48px;
min-width:48px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:9px;
}
.hcmpmumstorageintroline span{
display:block;
margin-bottom:4px;
color:#173d69;
font-size:14px;
font-weight:700;
}
.hcmpmumstorageintroline p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.7;
}
.hcmpmumstorageintroactions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:13px;
}
.hcmpmumstorageprimarybtn,
.hcmpmumstoragecallbtn,
.hcmpmumstoragerequirementbtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:54px;
padding:14px 23px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumstorageprimarybtn{
background:#173d69;
color:#ffffff;
}
.hcmpmumstoragecallbtn{
background:#e53935;
color:#173d69;
}
.hcmpmumstorageprimarybtn:hover,
.hcmpmumstoragecallbtn:hover,
.hcmpmumstoragerequirementbtn:hover{
transform:translateY(-3px);
}
/*==================================================
STORAGE REQUIREMENT
==================================================*/
.hcmpmumstoragerequirement{
position:relative;
padding:42px;
background:#173d69;
border-radius:20px;
box-shadow:0 25px 60px rgba(23,61,105,.18);
overflow:hidden;
}
.hcmpmumstoragerequirement::before{
content:"";
position:absolute;
width:260px;
height:260px;
top:-170px;
right:-150px;
border:45px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumstoragerequirementhead,
.hcmpmumstoragerequirementlist,
.hcmpmumstoragerequirementbtn{
position:relative;
z-index:2;
}
.hcmpmumstoragerequirementhead{
margin-bottom:25px;
}
.hcmpmumstoragerequirementhead span{
display:block;
margin-bottom:6px;
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
}
.hcmpmumstoragerequirementhead h3{
margin:0 0 9px;
color:#ffffff;
font-size:27px;
font-weight:800;
line-height:1.4;
}
.hcmpmumstoragerequirementhead p{
margin:0;
color:rgba(255,255,255,.64);
font-size:13px;
line-height:1.8;
}
.hcmpmumstoragerequirementlist{
display:flex;
flex-direction:column;
gap:12px;
}
.hcmpmumstoragerequirementitem{
display:flex;
align-items:flex-start;
gap:15px;
padding:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
border-radius:9px;
}
.hcmpmumstoragerequirementicon{
width:42px;
height:42px;
min-width:42px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:8px;
font-size:15px;
}
.hcmpmumstoragerequirementitem h4{
margin:0 0 4px;
color:#ffffff;
font-size:14px;
}
.hcmpmumstoragerequirementitem p{
margin:0;
color:rgba(255,255,255,.64);
font-size:12px;
line-height:1.6;
}
.hcmpmumstoragerequirementbtn{
width:100%;
margin-top:22px;
background:#e53935;
color:#173d69;
}
/*==================================================
COMMON HEADING
==================================================*/
.hcmpmumstorageheading{
max-width:760px;
margin:0 auto 55px;
text-align:center;
}
.hcmpmumstorageheading > span{
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumstorageheading h2{
margin:10px 0 16px;
color:#173d69;
font-size:42px;
font-weight:800;
line-height:1.3;
}
.hcmpmumstorageheading h2 strong{
color:#e53935;
}
.hcmpmumstorageheading p{
margin:0;
color:#707985;
font-size:15px;
line-height:1.8;
}
/*==================================================
STORAGE TYPES
==================================================*/
.hcmpmumstoragetypes{
padding:95px 0;
background:#f5f7fa;
}
.hcmpmumstoragetypesgrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}
.hcmpmumstoragetypecard{
position:relative;
padding:32px 25px;
background:#ffffff;
border:1px solid #e4e9ef;
border-radius:14px;
overflow:hidden;
transition:.35s ease;
}
.hcmpmumstoragetypecard:hover{
transform:translateY(-7px);
box-shadow:0 20px 45px rgba(23,61,105,.1);
}
.hcmpmumstoragetypenumber{
position:absolute;
top:15px;
right:18px;
color:rgba(23,61,105,.06);
font-size:42px;
font-weight:800;
}
.hcmpmumstoragetypeicon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
background:#173d69;
color:#ffffff;
border-radius:11px;
font-size:21px;
}
.hcmpmumstoragetypecard h3{
margin:0 0 11px;
color:#173d69;
font-size:18px;
line-height:1.5;
}
.hcmpmumstoragetypecard p{
margin:0 0 20px;
color:#707985;
font-size:13px;
line-height:1.8;
}
.hcmpmumstoragetypecard a{
display:inline-flex;
align-items:center;
gap:8px;
color:#173d69;
text-decoration:none;
font-size:12px;
font-weight:800;
}
/*==================================================
STORAGE SITUATIONS
==================================================*/
.hcmpmumstoragesituations{
position:relative;
width:100%;
padding:100px 0;
background:#ffffff;
overflow:hidden;;
}
.hcmpmumstoragesituationsgrid{
display:grid;
grid-template-columns:minmax(0, 0.80fr) minmax(0, 1.20fr);
gap:70px;
align-items:center;
}
.hcmpmumstoragesituationlist{
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:16px;
}
.hcmpmumstoragesituationitem{
position:relative;
/* IMPORTANT */
display:block;
width:100%;
min-width:0;
min-height:145px;
padding:28px 80px 28px 105px;
background:#f7f9fb;
border:1px solid #e1e7ee;
border-radius:14px;
overflow:hidden;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease,
background .35s ease;
}
.hcmpmumstoragesituationitem:hover{
transform:translateY(-4px);
background:#ffffff;
border-color:rgba(244,180,0,.45);
box-shadow:0 18px 40px rgba(23,61,105,.10);
}
.hcmpmumstoragesituationitem > span{
position:absolute;
top:16px;
right:24px;
color:rgba(23,61,105,.065);
font-size:44px;
font-weight:800;
line-height:1;
pointer-events:none;
}
.hcmpmumstoragesituationicon{
position:absolute;
left:28px;
top:50%;
transform:translateY(-50%);
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:12px;
font-size:21px;
transition:
background .35s ease,
color .35s ease,
transform .35s ease;
}
.hcmpmumstoragesituationitem:hover .hcmpmumstoragesituationicon{
background:#e53935;
color:#173d69;
transform:
translateY(-50%)
scale(1.05);
}
/*==================================================
CONTENT - IMPORTANT WIDTH FIX
==================================================*/
.hcmpmumstoragesituationitem > div:last-child{
display:block;
width:100%;
min-width:0;
text-align:left;
}
.hcmpmumstoragesituationitem h3{
width:100%;
margin:0 0 8px;
color:#173d69;
font-size:19px;
font-weight:700;
line-height:1.45;
word-break:normal;
overflow-wrap:normal;
white-space:normal;
}
.hcmpmumstoragesituationitem p{
width:100%;
max-width:600px;
margin:0;
color:#707985;
font-size:13px;
font-weight:400;
line-height:1.8;
word-break:normal;
overflow-wrap:normal;
white-space:normal;
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumstoragesituations{
padding:80px 0;
}
.hcmpmumstoragesituationsgrid{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumstoragesituationsintro{
max-width:750px;
}
.hcmpmumstoragesituationsintro h2{
font-size:38px;
}
.hcmpmumstoragesituationlist{
width:100%;
}
.hcmpmumstoragesituationitem{
min-height:135px;
padding:25px 75px 25px 100px;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumstoragesituations{
padding:65px 0;
}
.hcmpmumstoragesituationsgrid{
gap:40px;
}
.hcmpmumstoragesituationsintro h2{
font-size:30px;
line-height:1.3;
}
.hcmpmumstoragesituationsintro > p{
font-size:14px;
line-height:1.8;
}
.hcmpmumstoragesituationlist{
gap:14px;
}
.hcmpmumstoragesituationitem{
min-height:auto;
padding:
24px
55px
24px
88px;
border-radius:12px;
}
.hcmpmumstoragesituationicon{
left:20px;
width:52px;
height:52px;
font-size:18px;
}
.hcmpmumstoragesituationitem > span{
top:16px;
right:17px;
font-size:36px;
}
.hcmpmumstoragesituationitem h3{
font-size:17px;
}
.hcmpmumstoragesituationitem p{
font-size:12px;
line-height:1.75;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumstoragesituationsintro h2{
font-size:27px;
}
.hcmpmumstoragesituationitem{
padding:
82px
20px
24px
20px;
}
.hcmpmumstoragesituationicon{
top:20px;
left:20px;
transform:none;
width:48px;
height:48px;
font-size:17px;
}
.hcmpmumstoragesituationitem:hover .hcmpmumstoragesituationicon{
transform:scale(1.05);
}
.hcmpmumstoragesituationitem > span{
top:20px;
right:20px;
font-size:38px;
}
.hcmpmumstoragesituationitem h3{
padding-right:0;
font-size:17px;
line-height:1.45;
}
.hcmpmumstoragesituationitem p{
max-width:100%;
font-size:13px;
line-height:1.75;
}
}
/*==================================================
STORAGE PROCESS
==================================================*/
.hcmpmumstorageprocess{
padding:95px 0;
background:#173d69;
}
.hcmpmumstorageheadinglight h2{
color:#ffffff;
}
.hcmpmumstorageheadinglight p{
color:rgba(255,255,255,.67);
}
.hcmpmumstorageprocessgrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}
.hcmpmumstorageprocessbox{
position:relative;
padding:30px 25px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.11);
border-radius:13px;
overflow:hidden;
}
.hcmpmumstorageprocessnumber{
position:absolute;
top:17px;
right:20px;
color:rgba(255,255,255,.07);
font-size:40px;
font-weight:800;
}
.hcmpmumstorageprocessicon{
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:21px;
background:#e53935;
color:#173d69;
border-radius:10px;
font-size:20px;
}
.hcmpmumstorageprocessbox h3{
margin:0 0 9px;
color:#ffffff;
font-size:17px;
}
.hcmpmumstorageprocessbox p{
margin:0;
color:rgba(255,255,255,.66);
font-size:13px;
line-height:1.8;
}
/*==================================================
STORAGE PREPARATION
==================================================*/
.hcmpmumstorageprepare{
padding:100px 0;
background:#f5f7fa;
}
.hcmpmumstoragepreparegrid{
display:grid;
grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
gap:70px;
align-items:center;
}
.hcmpmumstoragepreparenote{
display:flex;
align-items:flex-start;
gap:13px;
margin:27px 0;
padding:18px;
background:#ffffff;
border-left:4px solid #e53935;
}
.hcmpmumstoragepreparenote i{
margin-top:5px;
color:#173d69;
}
.hcmpmumstoragepreparenote p{
margin:0;
color:#68717d;
font-size:12px;
line-height:1.8;
}
.hcmpmumstoragechecklist{
padding:38px;
background:#173d69;
border-radius:18px;
}
.hcmpmumstoragecheckhead{
margin-bottom:25px;
}
.hcmpmumstoragecheckhead span{
display:block;
margin-bottom:6px;
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
}
.hcmpmumstoragecheckhead h3{
margin:0;
color:#ffffff;
font-size:25px;
}
.hcmpmumstoragecheckitems{
display:flex;
flex-direction:column;
gap:12px;
}
.hcmpmumstoragecheckitem{
display:flex;
align-items:flex-start;
gap:14px;
padding:17px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
border-radius:9px;
}
.hcmpmumstoragecheckicon{
width:29px;
height:29px;
min-width:29px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:50%;
font-size:10px;
}
.hcmpmumstoragecheckitem h4{
margin:0 0 4px;
color:#ffffff;
font-size:14px;
}
.hcmpmumstoragecheckitem p{
margin:0;
color:rgba(255,255,255,.64);
font-size:12px;
line-height:1.7;
}
/*==================================================
WHY CHOOSE
==================================================*/
.hcmpmumstoragewhy{
padding:100px 0;
background:#ffffff;
}
.hcmpmumstoragewhygrid{
display:grid;
grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
gap:70px;
align-items:center;
}
.hcmpmumstoragewhycall{
display:flex;
align-items:center;
gap:14px;
margin-top:30px;
padding:20px;
background:#173d69;
border-radius:10px;
}
.hcmpmumstoragewhycallicon{
width:50px;
height:50px;
min-width:50px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:50%;
}
.hcmpmumstoragewhycall span{
display:block;
color:rgba(255,255,255,.6);
font-size:10px;
}
.hcmpmumstoragewhycall a{
color:#ffffff;
text-decoration:none;
font-size:18px;
font-weight:800;
}
.hcmpmumstoragewhyfeatures{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.hcmpmumstoragewhybox{
position:relative;
padding:28px;
background:#f7f9fb;
border:1px solid #e4e9ef;
border-radius:13px;
}
.hcmpmumstoragewhybox > span{
position:absolute;
top:18px;
right:20px;
color:rgba(23,61,105,.07);
font-size:38px;
font-weight:800;
}
.hcmpmumstoragewhybox > i{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
background:#173d69;
color:#ffffff;
border-radius:10px;
font-size:19px;
}
.hcmpmumstoragewhybox h3{
margin:0 0 9px;
color:#173d69;
font-size:17px;
}
.hcmpmumstoragewhybox p{
margin:0;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
FAQ
==================================================*/
.hcmpmumstoragefaq{
padding:100px 0;
background:#f5f7fa;
}
.hcmpmumstoragefaqgrid{
display:grid;
grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
gap:70px;
align-items:start;
}
.hcmpmumstoragefaqlist{
display:flex;
flex-direction:column;
gap:13px;
}
.hcmpmumstoragefaqitem{
background:#ffffff;
border:1px solid #e4e9ef;
border-radius:9px;
overflow:hidden;
}
.hcmpmumstoragefaqitem summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 22px;
color:#173d69;
font-size:14px;
font-weight:700;
cursor:pointer;
list-style:none;
}
.hcmpmumstoragefaqitem summary::-webkit-details-marker{
display:none;
}
.hcmpmumstoragefaqitem summary i{
font-size:12px;
transition:transform .3s ease;
}
.hcmpmumstoragefaqitem[open] summary i{
transform:rotate(45deg);
}
.hcmpmumstoragefaqitem p{
margin:0;
padding:0 22px 21px;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
CTA
==================================================*/
.hcmpmumstoragecta{
position:relative;
padding:75px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumstoragecta::after{
content:"";
position:absolute;
width:280px;
height:280px;
right:-150px;
bottom:-190px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumstoragectawrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:45px;
}
.hcmpmumstoragectacontent{
max-width:730px;
}
.hcmpmumstoragectacontent > span{
display:block;
margin-bottom:7px;
color:#e53935;
font-size:11px;
font-weight:800;
text-transform:uppercase;
}
.hcmpmumstoragectacontent h2{
margin:0 0 10px;
color:#ffffff;
font-size:35px;
font-weight:800;
line-height:1.3;
}
.hcmpmumstoragectacontent p{
margin:0;
color:rgba(255,255,255,.7);
font-size:14px;
line-height:1.8;
}
.hcmpmumstoragectaactions{
display:flex;
align-items:center;
gap:12px;
min-width:max-content;
}
.hcmpmumstoragectaprimary,
.hcmpmumstoragectacall{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:54px;
padding:14px 22px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumstoragectaprimary{
background:#e53935;
color:#173d69;
}
.hcmpmumstoragectacall{
background:#ffffff;
color:#173d69;
}
.hcmpmumstoragectaprimary:hover,
.hcmpmumstoragectacall:hover{
transform:translateY(-3px);
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumstoragebreadwrap{
align-items:flex-start;
gap:35px;
}
.hcmpmumstoragebreadcontent h1{
font-size:40px;
}
.hcmpmumstoragebreadcard{
max-width:310px;
}
.hcmpmumstorageintrogrid,
.hcmpmumstoragesituationsgrid,
.hcmpmumstoragepreparegrid,
.hcmpmumstoragewhygrid,
.hcmpmumstoragefaqgrid{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumstoragetypesgrid,
.hcmpmumstorageprocessgrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hcmpmumstorageintrocontent h2,
.hcmpmumstoragesituationsintro h2,
.hcmpmumstoragepreparecontent h2,
.hcmpmumstoragewhyintro h2,
.hcmpmumstoragefaqintro h2,
.hcmpmumstorageheading h2{
font-size:38px;
}
.hcmpmumstoragectawrap{
flex-direction:column;
align-items:flex-start;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumstoragebread{
padding:55px 0;
}
.hcmpmumstoragebreadwrap{
flex-direction:column;
align-items:stretch;
gap:30px;
}
.hcmpmumstoragebreadcontent h1{
font-size:33px;
}
.hcmpmumstoragebreadcard{
max-width:100%;
}
.hcmpmumstorageintro,
.hcmpmumstoragetypes,
.hcmpmumstoragesituations,
.hcmpmumstorageprocess,
.hcmpmumstorageprepare,
.hcmpmumstoragewhy,
.hcmpmumstoragefaq{
padding:65px 0;
}
.hcmpmumstorageintrocontent h2,
.hcmpmumstoragesituationsintro h2,
.hcmpmumstoragepreparecontent h2,
.hcmpmumstoragewhyintro h2,
.hcmpmumstoragefaqintro h2,
.hcmpmumstorageheading h2{
font-size:30px;
}
.hcmpmumstoragetypesgrid,
.hcmpmumstorageprocessgrid,
.hcmpmumstoragewhyfeatures{
grid-template-columns:1fr;
}
.hcmpmumstorageintroactions{
flex-direction:column;
align-items:stretch;
}
.hcmpmumstorageprimarybtn,
.hcmpmumstoragecallbtn{
width:100%;
}
.hcmpmumstoragerequirement{
padding:32px 23px;
}
.hcmpmumstorageheading{
margin-bottom:40px;
text-align:left;
}
.hcmpmumstorageheading h2,
.hcmpmumstorageheading p{
text-align:left;
}
.hcmpmumstoragesituationitem{
padding:22px 20px 22px 82px;
}
.hcmpmumstoragesituationicon{
left:18px;
}
.hcmpmumstoragechecklist{
padding:30px 22px;
}
.hcmpmumstoragecta{
padding:60px 0;
}
.hcmpmumstoragectacontent h2{
font-size:28px;
}
.hcmpmumstoragectaactions{
width:100%;
min-width:0;
flex-direction:column;
align-items:stretch;
}
.hcmpmumstoragectaprimary,
.hcmpmumstoragectacall{
width:100%;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumstoragebreadcontent h1{
font-size:29px;
}
.hcmpmumstoragebreadcard{
padding:18px 15px;
}
.hcmpmumstoragebreadicon{
width:52px;
height:52px;
min-width:52px;
font-size:20px;
}
.hcmpmumstorageintrocontent h2,
.hcmpmumstoragesituationsintro h2,
.hcmpmumstoragepreparecontent h2,
.hcmpmumstoragewhyintro h2,
.hcmpmumstoragefaqintro h2,
.hcmpmumstorageheading h2{
font-size:27px;
}
.hcmpmumstoragerequirement{
padding:28px 18px;
}
.hcmpmumstoragerequirementhead h3{
font-size:23px;
}
.hcmpmumstoragetypecard,
.hcmpmumstorageprocessbox,
.hcmpmumstoragewhybox{
padding:25px 20px;
}
.hcmpmumstoragesituationitem{
padding:75px 18px 20px;
}
.hcmpmumstoragesituationicon{
top:18px;
left:18px;
transform:none;
width:45px;
height:45px;
}
.hcmpmumstoragechecklist{
padding:27px 18px;
}
.hcmpmumstoragecheckhead h3{
font-size:21px;
}
.hcmpmumstoragefaqitem summary{
padding:18px;
font-size:13px;
}
.hcmpmumstoragefaqitem p{
padding:0 18px 19px;
}
}
/*==================================================
NETWORK GLOBAL
==================================================*/
.hcmpmumnetworkbread,
.hcmpmumnetworkintro,
.hcmpmumnetworkregions,
.hcmpmumnetworkroutes,
.hcmpmumnetworkservices,
.hcmpmumnetworkwhy,
.hcmpmumnetworkfaq,
.hcmpmumnetworkcta{
font-family:"Poppins",sans-serif;
}
.hcmpmumnetworkeyebrow{
display:inline-block;
margin:0 0 15px;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
line-height:1.5;
text-transform:uppercase;
}
/*==================================================
BREADCRUMB
==================================================*/
.hcmpmumnetworkbread{
position:relative;
width:100%;
padding:85px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumnetworkbread::before{
content:"";
position:absolute;
width:450px;
height:450px;
top:-310px;
right:-170px;
border:75px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumnetworkbread::after{
content:"";
position:absolute;
width:280px;
height:280px;
left:-160px;
bottom:-200px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumnetworkbreadwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.hcmpmumnetworkbreadcontent{
flex:1;
max-width:760px;
min-width:0;
text-align:left;
}
.hcmpmumnetworkbreadlabel{
display:inline-flex;
align-items:center;
margin-bottom:16px;
padding:8px 16px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
border-radius:0 5px 5px 0;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumnetworkbreadcontent h1{
margin:0 0 15px;
color:#ffffff;
font-size:48px;
font-weight:800;
line-height:1.2;
}
.hcmpmumnetworkbreadcontent p{
max-width:680px;
margin:0 0 23px;
color:rgba(255,255,255,.72);
font-size:15px;
line-height:1.8;
}
.hcmpmumnetworkbreadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:11px;
}
.hcmpmumnetworkbreadcrumb a{
display:inline-flex;
align-items:center;
gap:7px;
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:600;
}
.hcmpmumnetworkbreadcrumb > i{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumnetworkbreadcrumb > span{
color:#e53935;
font-size:13px;
font-weight:700;
}
.hcmpmumnetworkbreadpanel{
display:flex;
align-items:center;
gap:17px;
width:100%;
max-width:385px;
padding:23px 24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
}
.hcmpmumnetworkbreadicon{
width:66px;
height:66px;
min-width:66px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:12px;
font-size:25px;
}
.hcmpmumnetworkbreadpaneltext span{
display:block;
margin-bottom:3px;
color:rgba(255,255,255,.6);
font-size:10px;
font-weight:700;
text-transform:uppercase;
}
.hcmpmumnetworkbreadpaneltext h2{
margin:0 0 7px;
color:#ffffff;
font-size:17px;
font-weight:700;
line-height:1.4;
}
.hcmpmumnetworkbreadpaneltext a{
display:inline-flex;
align-items:center;
gap:7px;
color:#e53935;
text-decoration:none;
font-size:12px;
font-weight:700;
}
/*==================================================
INTRODUCTION
==================================================*/
.hcmpmumnetworkintro{
padding:100px 0;
background:#ffffff;
}
.hcmpmumnetworkintrogrid{
display:grid;
grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
gap:65px;
align-items:center;
}
.hcmpmumnetworkintrocontent,
.hcmpmumnetworkroutesintro,
.hcmpmumnetworkwhyintro,
.hcmpmumnetworkfaqintro{
min-width:0;
text-align:left;
}
.hcmpmumnetworkintrocontent h2,
.hcmpmumnetworkroutesintro h2,
.hcmpmumnetworkwhyintro h2,
.hcmpmumnetworkfaqintro h2{
margin:0 0 23px;
color:#173d69;
font-size:43px;
font-weight:800;
line-height:1.25;
}
.hcmpmumnetworkintrocontent h2 span,
.hcmpmumnetworkroutesintro h2 span,
.hcmpmumnetworkwhyintro h2 span,
.hcmpmumnetworkfaqintro h2 span{
color:#e53935;
}
.hcmpmumnetworkintrocontent p,
.hcmpmumnetworkroutesintro > p,
.hcmpmumnetworkwhyintro > p,
.hcmpmumnetworkfaqintro > p{
margin:0 0 17px;
color:#68717d;
font-size:15px;
line-height:1.9;
}
.hcmpmumnetworklead{
color:#46505c !important;
font-size:16px !important;
}
.hcmpmumnetworkintrohighlight{
display:flex;
align-items:flex-start;
gap:16px;
margin:28px 0;
padding:20px;
background:#f5f7fa;
border-left:4px solid #e53935;
border-radius:0 9px 9px 0;
}
.hcmpmumnetworkintrohighlighticon{
width:48px;
height:48px;
min-width:48px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:9px;
}
.hcmpmumnetworkintrohighlight span{
display:block;
margin-bottom:4px;
color:#173d69;
font-size:14px;
font-weight:700;
}
.hcmpmumnetworkintrohighlight p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.7;
}
.hcmpmumnetworkintroactions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:13px;
}
.hcmpmumnetworkprimarybtn,
.hcmpmumnetworkcallbtn,
.hcmpmumnetworkcoveragebtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-height:54px;
padding:14px 23px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumnetworkprimarybtn{
background:#173d69;
color:#ffffff;
}
.hcmpmumnetworkcallbtn{
background:#e53935;
color:#fff;
}
.hcmpmumnetworkprimarybtn:hover,
.hcmpmumnetworkcallbtn:hover,
.hcmpmumnetworkcoveragebtn:hover{
transform:translateY(-3px);
}
/*==================================================
NETWORK COVERAGE PANEL
==================================================*/
.hcmpmumnetworkcoverage{
position:relative;
padding:42px;
background:#173d69;
border-radius:20px;
box-shadow:0 25px 60px rgba(23,61,105,.18);
overflow:hidden;
}
.hcmpmumnetworkcoverage::before{
content:"";
position:absolute;
width:260px;
height:260px;
top:-170px;
right:-150px;
border:45px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumnetworkcoveragehead,
.hcmpmumnetworkcoveragelist,
.hcmpmumnetworkcoveragebtn{
position:relative;
z-index:2;
}
.hcmpmumnetworkcoveragehead{
margin-bottom:25px;
}
.hcmpmumnetworkcoveragehead span{
display:block;
margin-bottom:6px;
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
}
.hcmpmumnetworkcoveragehead h3{
margin:0 0 9px;
color:#ffffff;
font-size:27px;
font-weight:800;
line-height:1.4;
}
.hcmpmumnetworkcoveragehead p{
margin:0;
color:rgba(255,255,255,.64);
font-size:13px;
line-height:1.8;
}
.hcmpmumnetworkcoveragelist{
display:flex;
flex-direction:column;
gap:12px;
}
.hcmpmumnetworkcoverageitem{
display:flex;
align-items:flex-start;
gap:15px;
padding:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.09);
border-radius:9px;
}
.hcmpmumnetworkcoverageicon{
width:42px;
height:42px;
min-width:42px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#fff;
border-radius:8px;
font-size:15px;
}
.hcmpmumnetworkcoverageitem > div:last-child{
width:100%;
min-width:0;
}
.hcmpmumnetworkcoverageitem h4{
margin:0 0 4px;
color:#ffffff;
font-size:14px;
}
.hcmpmumnetworkcoverageitem p{
margin:0;
color:rgba(255,255,255,.64);
font-size:12px;
line-height:1.6;
}
.hcmpmumnetworkcoveragebtn{
width:100%;
margin-top:22px;
background:#e53935;
color:#fff;
}
/*==================================================
COMMON HEADING
==================================================*/
.hcmpmumnetworkheading{
max-width:760px;
margin:0 auto 55px;
text-align:center;
}
.hcmpmumnetworkheading > span{
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumnetworkheading h2{
margin:10px 0 16px;
color:#173d69;
font-size:42px;
font-weight:800;
line-height:1.3;
}
.hcmpmumnetworkheading h2 strong{
color:#e53935;
}
.hcmpmumnetworkheading p{
margin:0;
color:#707985;
font-size:15px;
line-height:1.8;
}
/*==================================================
REGIONS
==================================================*/
.hcmpmumnetworkregions{
padding:95px 0;
background:#f5f7fa;
}
.hcmpmumnetworkregionsgrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}
.hcmpmumnetworkregioncard{
position:relative;
padding:32px;
background:#ffffff;
border:1px solid #e3e8ee;
border-radius:15px;
overflow:hidden;
transition:.35s ease;
}
.hcmpmumnetworkregioncard:hover{
transform:translateY(-5px);
box-shadow:0 20px 45px rgba(23,61,105,.10);
}
.hcmpmumnetworkregiontop{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:22px;
}
.hcmpmumnetworkregionicon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:11px;
font-size:21px;
}
.hcmpmumnetworkregiontop > span{
color:rgba(23,61,105,.10);
font-size:31px;
font-weight:800;
letter-spacing:2px;
}
.hcmpmumnetworkregioncard h3{
margin:0 0 9px;
color:#173d69;
font-size:22px;
font-weight:800;
}
.hcmpmumnetworkregioncard > p{
margin:0 0 22px;
color:#707985;
font-size:13px;
line-height:1.8;
}
.hcmpmumnetworkcitylist{
display:flex;
flex-wrap:wrap;
gap:9px;
}
.hcmpmumnetworkcitylist span{
display:inline-flex;
align-items:center;
min-height:35px;
padding:8px 13px;
background:#f5f7fa;
border:1px solid #e1e7ed;
border-radius:5px;
color:#173d69;
font-size:11px;
font-weight:700;
transition:.3s ease;
}
.hcmpmumnetworkcitylist span:hover{
background:#e53935;
border-color:#e53935;
}
.hcmpmumnetworkregionwide{
min-height:100%;
}
/*==================================================
POPULAR ROUTES
==================================================*/
.hcmpmumnetworkroutes{
padding:100px 0;
background:#ffffff;
}
.hcmpmumnetworkroutesgrid{
display:grid;
grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
gap:70px;
align-items:center;
}
.hcmpmumnetworkroutelist{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.hcmpmumnetworkrouteitem{
display:grid;
grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr);
align-items:center;
gap:10px;
min-height:75px;
padding:17px 20px;
background:#f7f9fb;
border:1px solid #e2e8ee;
border-radius:10px;
transition:.35s ease;
}
.hcmpmumnetworkrouteitem:hover{
background:#173d69;
border-color:#173d69;
transform:translateY(-3px);
}
.hcmpmumnetworkroutefrom,
.hcmpmumnetworkrouteto{
color:#173d69;
font-size:14px;
font-weight:700;
}
.hcmpmumnetworkrouteto{
text-align:right;
}
.hcmpmumnetworkroutearrow{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#fff;
border-radius:50%;
font-size:13px;
}
.hcmpmumnetworkrouteitem:hover .hcmpmumnetworkroutefrom,
.hcmpmumnetworkrouteitem:hover .hcmpmumnetworkrouteto{
color:#ffffff;
}
/*==================================================
NETWORK SERVICES
==================================================*/
.hcmpmumnetworkservices{
padding:95px 0;
background:#173d69;
}
.hcmpmumnetworkheadinglight h2{
color:#ffffff;
}
.hcmpmumnetworkheadinglight p{
color:rgba(255,255,255,.67);
}
.hcmpmumnetworkservicesgrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.hcmpmumnetworkservicebox{
display:grid;
grid-template-columns:58px minmax(0,1fr) 40px;
align-items:center;
gap:18px;
padding:23px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.11);
border-radius:12px;
text-decoration:none;
transition:.35s ease;
}
.hcmpmumnetworkservicebox:hover{
background:rgba(255,255,255,.12);
transform:translateY(-4px);
}
.hcmpmumnetworkserviceicon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#fff;
border-radius:10px;
font-size:20px;
}
.hcmpmumnetworkservicebox h3{
margin:0 0 5px;
color:#ffffff;
font-size:17px;
}
.hcmpmumnetworkservicebox p{
margin:0;
color:rgba(255,255,255,.63);
font-size:12px;
line-height:1.7;
}
.hcmpmumnetworkservicebox > i{
color:#e53935;
}
/*==================================================
WHY NETWORK
==================================================*/
.hcmpmumnetworkwhy{
padding:100px 0;
background:#ffffff;
}
.hcmpmumnetworkwhygrid{
display:grid;
grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
gap:70px;
align-items:center;
}
.hcmpmumnetworkwhycontact{
display:flex;
align-items:center;
gap:14px;
margin-top:30px;
padding:20px;
background:#173d69;
border-radius:10px;
}
.hcmpmumnetworkwhycontacticon{
width:50px;
height:50px;
min-width:50px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:50%;
}
.hcmpmumnetworkwhycontact span{
display:block;
color:rgba(255,255,255,.6);
font-size:10px;
}
.hcmpmumnetworkwhycontact a{
color:#ffffff;
text-decoration:none;
font-size:18px;
font-weight:800;
}
.hcmpmumnetworkwhylist{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.hcmpmumnetworkwhyitem{
position:relative;
display:block;
min-width:0;
padding:28px;
background:#f7f9fb;
border:1px solid #e4e9ef;
border-radius:13px;
}
.hcmpmumnetworkwhyitem > span{
position:absolute;
top:18px;
right:20px;
color:rgba(23,61,105,.07);
font-size:38px;
font-weight:800;
}
.hcmpmumnetworkwhyicon{
width:52px;
height:52px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:20px;
background:#173d69;
color:#ffffff;
border-radius:10px;
font-size:19px;
}
.hcmpmumnetworkwhyitem > div:last-child{
width:100%;
min-width:0;
}
.hcmpmumnetworkwhyitem h3{
margin:0 0 9px;
color:#173d69;
font-size:17px;
}
.hcmpmumnetworkwhyitem p{
margin:0;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
FAQ
==================================================*/
.hcmpmumnetworkfaq{
padding:100px 0;
background:#f5f7fa;
}
.hcmpmumnetworkfaqgrid{
display:grid;
grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
gap:70px;
align-items:start;
}
.hcmpmumnetworkfaqlist{
display:flex;
flex-direction:column;
gap:13px;
}
.hcmpmumnetworkfaqitem{
background:#ffffff;
border:1px solid #e4e9ef;
border-radius:9px;
overflow:hidden;
}
.hcmpmumnetworkfaqitem summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 22px;
color:#173d69;
font-size:14px;
font-weight:700;
cursor:pointer;
list-style:none;
}
.hcmpmumnetworkfaqitem summary::-webkit-details-marker{
display:none;
}
.hcmpmumnetworkfaqitem summary i{
font-size:12px;
transition:transform .3s ease;
}
.hcmpmumnetworkfaqitem[open] summary i{
transform:rotate(45deg);
}
.hcmpmumnetworkfaqitem p{
margin:0;
padding:0 22px 21px;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
FINAL CTA
==================================================*/
.hcmpmumnetworkcta{
position:relative;
padding:75px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumnetworkcta::after{
content:"";
position:absolute;
width:280px;
height:280px;
right:-150px;
bottom:-190px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumnetworkctawrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:45px;
}
.hcmpmumnetworkctacontent{
max-width:730px;
text-align:left;
}
.hcmpmumnetworkctacontent > span{
display:block;
margin-bottom:7px;
color:#e53935;
font-size:11px;
font-weight:800;
text-transform:uppercase;
}
.hcmpmumnetworkctacontent h2{
margin:0 0 10px;
color:#ffffff;
font-size:35px;
font-weight:800;
line-height:1.3;
}
.hcmpmumnetworkctacontent p{
margin:0;
color:rgba(255,255,255,.7);
font-size:14px;
line-height:1.8;
}
.hcmpmumnetworkctaactions{
display:flex;
align-items:center;
gap:12px;
min-width:max-content;
}
.hcmpmumnetworkctaprimary,
.hcmpmumnetworkctacall{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:54px;
padding:14px 22px;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
transition:.35s ease;
}
.hcmpmumnetworkctaprimary{
background:#e53935;
color:#173d69;
}
.hcmpmumnetworkctacall{
background:#ffffff;
color:#173d69;
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumnetworkbreadwrap{
align-items:flex-start;
gap:35px;
}
.hcmpmumnetworkbreadcontent h1{
font-size:40px;
}
.hcmpmumnetworkbreadpanel{
max-width:320px;
}
.hcmpmumnetworkintrogrid,
.hcmpmumnetworkroutesgrid,
.hcmpmumnetworkwhygrid,
.hcmpmumnetworkfaqgrid{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumnetworkintrocontent h2,
.hcmpmumnetworkroutesintro h2,
.hcmpmumnetworkwhyintro h2,
.hcmpmumnetworkfaqintro h2,
.hcmpmumnetworkheading h2{
font-size:38px;
}
.hcmpmumnetworkctawrap{
flex-direction:column;
align-items:flex-start;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumnetworkbread{
padding:55px 0;
}
.hcmpmumnetworkbreadwrap{
flex-direction:column;
align-items:stretch;
gap:30px;
}
.hcmpmumnetworkbreadcontent h1{
font-size:33px;
}
.hcmpmumnetworkbreadpanel{
max-width:100%;
}
.hcmpmumnetworkintro,
.hcmpmumnetworkregions,
.hcmpmumnetworkroutes,
.hcmpmumnetworkservices,
.hcmpmumnetworkwhy,
.hcmpmumnetworkfaq{
padding:65px 0;
}
.hcmpmumnetworkintrocontent h2,
.hcmpmumnetworkroutesintro h2,
.hcmpmumnetworkwhyintro h2,
.hcmpmumnetworkfaqintro h2,
.hcmpmumnetworkheading h2{
font-size:30px;
}
.hcmpmumnetworkregionsgrid,
.hcmpmumnetworkroutelist,
.hcmpmumnetworkservicesgrid,
.hcmpmumnetworkwhylist{
grid-template-columns:1fr;
}
.hcmpmumnetworkintroactions{
flex-direction:column;
align-items:stretch;
}
.hcmpmumnetworkprimarybtn,
.hcmpmumnetworkcallbtn{
width:100%;
}
.hcmpmumnetworkcoverage{
padding:32px 23px;
}
.hcmpmumnetworkheading{
margin-bottom:40px;
text-align:left;
}
.hcmpmumnetworkheading h2,
.hcmpmumnetworkheading p{
text-align:left;
}
.hcmpmumnetworkregioncard{
padding:27px 22px;
}
.hcmpmumnetworkservicebox{
grid-template-columns:52px minmax(0,1fr) 25px;
gap:14px;
padding:19px;
}
.hcmpmumnetworkserviceicon{
width:52px;
height:52px;
}
.hcmpmumnetworkcta{
padding:60px 0;
}
.hcmpmumnetworkctacontent h2{
font-size:28px;
}
.hcmpmumnetworkctaactions{
width:100%;
min-width:0;
flex-direction:column;
align-items:stretch;
}
.hcmpmumnetworkctaprimary,
.hcmpmumnetworkctacall{
width:100%;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumnetworkbreadcontent h1{
font-size:29px;
}
.hcmpmumnetworkbreadpanel{
padding:18px 15px;
}
.hcmpmumnetworkbreadicon{
width:52px;
height:52px;
min-width:52px;
font-size:20px;
}
.hcmpmumnetworkintrocontent h2,
.hcmpmumnetworkroutesintro h2,
.hcmpmumnetworkwhyintro h2,
.hcmpmumnetworkfaqintro h2,
.hcmpmumnetworkheading h2{
font-size:27px;
}
.hcmpmumnetworkcoverage{
padding:28px 18px;
}
.hcmpmumnetworkcoveragehead h3{
font-size:23px;
}
.hcmpmumnetworkregiontop > span{
font-size:23px;
}
.hcmpmumnetworkcitylist{
gap:7px;
}
.hcmpmumnetworkcitylist span{
min-height:32px;
padding:7px 10px;
font-size:10px;
}
.hcmpmumnetworkrouteitem{
grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);
padding:15px;
}
.hcmpmumnetworkroutearrow{
width:36px;
height:36px;
}
.hcmpmumnetworkroutefrom,
.hcmpmumnetworkrouteto{
font-size:12px;
}
.hcmpmumnetworkservicebox{
grid-template-columns:48px minmax(0,1fr);
}
.hcmpmumnetworkservicebox > i{
display:none;
}
.hcmpmumnetworkserviceicon{
width:48px;
height:48px;
}
.hcmpmumnetworkwhyitem{
padding:25px 20px;
}
.hcmpmumnetworkfaqitem summary{
padding:18px;
font-size:13px;
}
.hcmpmumnetworkfaqitem p{
padding:0 18px 19px;
}
}
/*========================================
TRACK YOUR SHIPMENT BUTTON
========================================*/
.hcmpmumdesktoptrack{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
padding:9px 17px;
background:#e53935;
color:#173d69;
border:1px solid #e53935;
border-radius:6px;
font-size:13px;
font-weight:700;
line-height:1.2;
text-decoration:none;
white-space:nowrap;
transition:
background .3s ease,
color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.hcmpmumdesktoptrack i{
font-size:14px;
}
.hcmpmumdesktoptrack:hover{
background:#ffffff;
color:#173d69;
border-color:#ffffff;
transform:translateY(-2px);
box-shadow:0 7px 18px rgba(0,0,0,.15);
}
/*========================================
TABLET
========================================*/
@media(max-width:991px){
.hcmpmumdesktoptrack{
padding:8px 14px;
font-size:12px;
}
}
/*========================================
MOBILE
========================================*/
@media(max-width:767px){
.hcmpmumdesktoptrack{
padding:7px 11px;
gap:6px;
font-size:11px;
}
.hcmpmumdesktoptrack i{
font-size:12px;
}
}
/*========================================
SMALL MOBILE
========================================*/
@media(max-width:480px){
.hcmpmumdesktoptrack{
padding:7px 9px;
font-size:10px;
}
}
/*==================================================
SHIPMENT TRACKING SECTION
==================================================*/
.hcmpmumtracksection{
position:relative;
width:100%;
padding:100px 0;
background:#f5f7fa;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmpmumtracksection::before{
content:"";
position:absolute;
width:450px;
height:450px;
top:-280px;
left:-250px;
border:70px solid rgba(23,61,105,.025);
border-radius:50%;
}
.hcmpmumtracksection::after{
content:"";
position:absolute;
width:320px;
height:320px;
right:-210px;
bottom:-210px;
background:rgba(244,180,0,.06);
border-radius:50%;
}
.hcmpmumtrackwrap{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);
gap:75px;
align-items:center;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpmumtrackcontent{
width:100%;
min-width:0;
text-align:left;
}
.hcmpmumtrackeyebrow{
display:inline-flex;
align-items:center;
gap:8px;
margin:0 0 17px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.4;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumtrackeyebrow i{
font-size:14px;
}
.hcmpmumtrackcontent h2{
margin:0 0 22px;
color:#173d69;
font-size:45px;
font-weight:800;
line-height:1.22;
}
.hcmpmumtrackcontent h2 span{
display:block;
color:#e53935;
}
.hcmpmumtracklead{
max-width:570px;
margin:0 0 33px;
color:#68717d;
font-size:15px;
font-weight:400;
line-height:1.9;
}
/*==================================================
TRACK FEATURES
==================================================*/
.hcmpmumtrackfeatures{
display:flex;
flex-direction:column;
gap:14px;
max-width:570px;
}
.hcmpmumtrackfeature{
display:flex;
align-items:flex-start;
gap:16px;
padding:18px;
background:#ffffff;
border:1px solid #e1e7ed;
border-radius:10px;
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.hcmpmumtrackfeature:hover{
transform:translateX(5px);
border-color:rgba(244,180,0,.55);
box-shadow:0 12px 30px rgba(23,61,105,.07);
}
.hcmpmumtrackfeatureicon{
width:50px;
height:50px;
min-width:50px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:9px;
font-size:18px;
}
.hcmpmumtrackfeature > div:last-child{
width:100%;
min-width:0;
}
.hcmpmumtrackfeature h3{
margin:0 0 5px;
color:#173d69;
font-size:15px;
font-weight:700;
}
.hcmpmumtrackfeature p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.7;
}
/*==================================================
TRACKING BOX
==================================================*/
.hcmpmumtrackbox{
position:relative;
width:100%;
min-width:0;
padding:48px 43px 40px;
background:#ffffff;
border:1px solid #e0e6ed;
border-radius:18px;
box-shadow:0 25px 65px rgba(23,61,105,.12);
text-align:left;
overflow:hidden;
}
.hcmpmumtrackbox::before{
content:"";
position:absolute;
width:230px;
height:230px;
top:-150px;
right:-140px;
background:rgba(244,180,0,.07);
border-radius:50%;
}
.hcmpmumtrackboxicon{
position:relative;
z-index:2;
width:68px;
height:68px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:24px;
background:#173d69;
color:#ffffff;
border-radius:14px;
font-size:26px;
box-shadow:0 12px 25px rgba(23,61,105,.18);
}
.hcmpmumtrackboxtag{
position:relative;
z-index:2;
display:block;
margin-bottom:7px;
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
}
.hcmpmumtrackbox h3{
position:relative;
z-index:2;
margin:0 0 10px;
color:#173d69;
font-size:29px;
font-weight:800;
line-height:1.35;
}
.hcmpmumtrackbox > p{
position:relative;
z-index:2;
margin:0 0 28px;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
TRACKING FORM
==================================================*/
.hcmpmumtrackform{
position:relative;
z-index:2;
width:100%;
}
.hcmpmumtrackform label{
display:block;
margin-bottom:9px;
color:#173d69;
font-size:12px;
font-weight:700;
}
.hcmpmumtracksearch{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
width:100%;
}
.hcmpmumtrackinputwrap{
position:relative;
width:100%;
min-width:0;
}
.hcmpmumtrackinputwrap > i{
position:absolute;
top:50%;
left:18px;
transform:translateY(-50%);
color:#173d69;
font-size:15px;
pointer-events:none;
}
.hcmpmumtrackinputwrap input{
width:100%;
height:58px;
padding:0 18px 0 48px;
background:#f7f9fb;
border:1px solid #dce3ea;
border-radius:8px;
outline:none;
color:#173d69;
font-family:"Poppins",sans-serif;
font-size:13px;
font-weight:500;
transition:
border-color .3s ease,
box-shadow .3s ease,
background .3s ease;
}
.hcmpmumtrackinputwrap input::placeholder{
color:#929ba5;
}
.hcmpmumtrackinputwrap input:focus{
background:#ffffff;
border-color:#e53935;
box-shadow:0 0 0 4px rgba(244,180,0,.12);
}
.hcmpmumtracksearch button{
min-width:145px;
height:58px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
padding:0 23px;
background:#e53935;
color:#173d69;
border:none;
border-radius:8px;
cursor:pointer;
font-family:"Poppins",sans-serif;
font-size:13px;
font-weight:800;
white-space:nowrap;
transition:
background .3s ease,
color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.hcmpmumtracksearch button:hover{
background:#173d69;
color:#ffffff;
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(23,61,105,.18);
}
/*==================================================
HELP INFORMATION
==================================================*/
.hcmpmumtrackhelp{
position:relative;
z-index:2;
display:flex;
align-items:flex-start;
gap:10px;
margin-top:16px;
}
.hcmpmumtrackhelp i{
margin-top:4px;
color:#e53935;
font-size:13px;
}
.hcmpmumtrackhelp p{
margin:0;
color:#818a94;
font-size:11px;
line-height:1.7;
}
/*==================================================
TRACK CONTACT
==================================================*/
.hcmpmumtrackcontact{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:27px;
padding-top:22px;
border-top:1px solid #e6ebf0;
}
.hcmpmumtrackcontact span{
color:#707985;
font-size:11px;
font-weight:500;
}
.hcmpmumtrackcontact a{
display:inline-flex;
align-items:center;
gap:7px;
color:#173d69;
text-decoration:none;
font-size:13px;
font-weight:800;
white-space:nowrap;
}
.hcmpmumtrackcontact a i{
color:#e53935;
}
/*==================================================
TABLET RESPONSIVE
==================================================*/
@media(max-width:991px){
.hcmpmumtracksection{
padding:80px 0;
}
.hcmpmumtrackwrap{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumtrackcontent{
max-width:750px;
}
.hcmpmumtrackcontent h2{
font-size:39px;
}
.hcmpmumtracklead,
.hcmpmumtrackfeatures{
max-width:700px;
}
.hcmpmumtrackbox{
max-width:750px;
}
}
/*==================================================
MOBILE RESPONSIVE
==================================================*/
@media(max-width:767px){
.hcmpmumtracksection{
padding:65px 0;
}
.hcmpmumtrackwrap{
gap:40px;
}
.hcmpmumtrackcontent h2{
font-size:31px;
line-height:1.3;
}
.hcmpmumtracklead{
margin-bottom:25px;
font-size:14px;
line-height:1.8;
}
.hcmpmumtrackfeature{
padding:16px;
}
.hcmpmumtrackbox{
padding:35px 25px 30px;
border-radius:14px;
}
.hcmpmumtrackboxicon{
width:60px;
height:60px;
margin-bottom:20px;
font-size:22px;
}
.hcmpmumtrackbox h3{
font-size:25px;
}
.hcmpmumtracksearch{
grid-template-columns:1fr;
gap:11px;
}
.hcmpmumtracksearch button{
width:100%;
}
.hcmpmumtrackcontact{
align-items:flex-start;
flex-direction:column;
gap:8px;
}
}
/*==================================================
SMALL MOBILE RESPONSIVE
==================================================*/
@media(max-width:480px){
.hcmpmumtracksection{
padding:55px 0;
}
.hcmpmumtrackcontent h2{
font-size:27px;
}
.hcmpmumtrackeyebrow{
font-size:10px;
}
.hcmpmumtrackfeature{
gap:13px;
padding:14px;
}
.hcmpmumtrackfeatureicon{
width:45px;
height:45px;
min-width:45px;
font-size:16px;
}
.hcmpmumtrackfeature h3{
font-size:14px;
}
.hcmpmumtrackfeature p{
font-size:11px;
}
.hcmpmumtrackbox{
padding:30px 18px 27px;
}
.hcmpmumtrackboxicon{
width:55px;
height:55px;
font-size:20px;
}
.hcmpmumtrackbox h3{
font-size:22px;
}
.hcmpmumtrackinputwrap input{
height:55px;
padding-left:44px;
font-size:12px;
}
.hcmpmumtrackinputwrap > i{
left:16px;
}
.hcmpmumtracksearch button{
height:55px;
font-size:12px;
}
}
/*==================================================
TRACKING PAGE GLOBAL
==================================================*/
.hcmpmumtrackpagebread,
.hcmpmumtrackpagemain,
.hcmpmumtrackpagesteps,
.hcmpmumtrackpageservices,
.hcmpmumtrackpagehelp,
.hcmpmumtrackpagefaq{
font-family:"Poppins",sans-serif;
}
.hcmpmumtrackpageeyebrow{
display:inline-flex;
align-items:center;
gap:8px;
margin:0 0 15px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.5;
letter-spacing:1px;
text-transform:uppercase;
}
/*==================================================
BREADCRUMB
==================================================*/
.hcmpmumtrackpagebread{
position:relative;
width:100%;
padding:85px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumtrackpagebread::before{
content:"";
position:absolute;
width:430px;
height:430px;
top:-300px;
right:-160px;
border:70px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumtrackpagebread::after{
content:"";
position:absolute;
width:260px;
height:260px;
left:-160px;
bottom:-190px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumtrackpagebreadwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:50px;
}
.hcmpmumtrackpagebreadcontent{
flex:1;
min-width:0;
max-width:760px;
text-align:left;
}
.hcmpmumtrackpagebreadlabel{
display:inline-flex;
margin-bottom:16px;
padding:8px 15px;
background:rgba(244,180,0,.14);
border-left:4px solid #e53935;
border-radius:0 5px 5px 0;
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:.8px;
text-transform:uppercase;
}
.hcmpmumtrackpagebreadcontent h1{
margin:0 0 15px;
color:#ffffff;
font-size:48px;
font-weight:800;
line-height:1.2;
}
.hcmpmumtrackpagebreadcontent p{
max-width:680px;
margin:0 0 23px;
color:rgba(255,255,255,.72);
font-size:15px;
line-height:1.8;
}
.hcmpmumtrackpagebreadcrumb{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:11px;
}
.hcmpmumtrackpagebreadcrumb a{
display:inline-flex;
align-items:center;
gap:7px;
color:#ffffff;
text-decoration:none;
font-size:13px;
font-weight:600;
}
.hcmpmumtrackpagebreadcrumb > i{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumtrackpagebreadcrumb > span{
color:#e53935;
font-size:13px;
font-weight:700;
}
.hcmpmumtrackpagebreadcard{
display:flex;
align-items:center;
gap:17px;
width:100%;
max-width:365px;
padding:23px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:14px;
}
.hcmpmumtrackpagebreadicon{
width:65px;
height:65px;
min-width:65px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:12px;
font-size:24px;
}
.hcmpmumtrackpagebreadcard span{
display:block;
margin-bottom:3px;
color:rgba(255,255,255,.58);
font-size:10px;
font-weight:700;
text-transform:uppercase;
}
.hcmpmumtrackpagebreadcard h2{
margin:0 0 6px;
color:#ffffff;
font-size:17px;
font-weight:700;
}
.hcmpmumtrackpagebreadcard a{
display:inline-flex;
align-items:center;
gap:7px;
color:#e53935;
text-decoration:none;
font-size:13px;
font-weight:700;
}
/*==================================================
MAIN TRACKING
==================================================*/
.hcmpmumtrackpagemain{
position:relative;
padding:100px 0;
background:#f5f7fa;
overflow:hidden;
}
.hcmpmumtrackpagegrid{
display:grid;
grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);
gap:75px;
align-items:center;
}
.hcmpmumtrackpagecontent{
min-width:0;
text-align:left;
}
.hcmpmumtrackpagecontent h2,
.hcmpmumtrackpageservicesintro h2,
.hcmpmumtrackpagefaqintro h2{
margin:0 0 22px;
color:#173d69;
font-size:43px;
font-weight:800;
line-height:1.25;
}
.hcmpmumtrackpagecontent h2 span,
.hcmpmumtrackpageservicesintro h2 span,
.hcmpmumtrackpagefaqintro h2 span{
display:block;
color:#e53935;
}
.hcmpmumtrackpagecontent > p,
.hcmpmumtrackpageservicesintro > p,
.hcmpmumtrackpagefaqintro > p{
margin:0 0 17px;
color:#68717d;
font-size:15px;
line-height:1.9;
}
.hcmpmumtrackpagelead{
color:#46505c !important;
font-size:16px !important;
}
.hcmpmumtrackpagepoints{
display:flex;
flex-direction:column;
gap:13px;
margin-top:30px;
}
.hcmpmumtrackpagepoint{
display:flex;
align-items:flex-start;
gap:15px;
padding:17px;
background:#ffffff;
border:1px solid #e1e7ed;
border-radius:10px;
}
.hcmpmumtrackpagepointicon{
width:48px;
height:48px;
min-width:48px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:9px;
font-size:17px;
}
.hcmpmumtrackpagepoint > div:last-child{
width:100%;
min-width:0;
}
.hcmpmumtrackpagepoint h3{
margin:0 0 4px;
color:#173d69;
font-size:15px;
font-weight:700;
}
.hcmpmumtrackpagepoint p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.7;
}
/*==================================================
TRACKING CARD
==================================================*/
.hcmpmumtrackpagecard{
position:relative;
width:100%;
min-width:0;
padding:48px 43px 40px;
background:#ffffff;
border:1px solid #e0e6ed;
border-radius:18px;
box-shadow:0 25px 65px rgba(23,61,105,.12);
overflow:hidden;
}
.hcmpmumtrackpagecard::before{
content:"";
position:absolute;
width:240px;
height:240px;
top:-160px;
right:-140px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumtrackpagecardtop{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:15px;
margin-bottom:22px;
}
.hcmpmumtrackpagecardicon{
width:65px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:13px;
font-size:24px;
}
.hcmpmumtrackpagecardtop > span{
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
}
.hcmpmumtrackpagecard > h2{
position:relative;
z-index:2;
margin:0 0 9px;
color:#173d69;
font-size:29px;
font-weight:800;
}
.hcmpmumtrackpagecarddesc{
position:relative;
z-index:2;
margin:0 0 27px;
color:#707985;
font-size:13px;
line-height:1.8;
}
.hcmpmumtrackpageform{
position:relative;
z-index:2;
}
.hcmpmumtrackpageform label{
display:block;
margin-bottom:9px;
color:#173d69;
font-size:12px;
font-weight:700;
}
.hcmpmumtrackpageinput{
position:relative;
width:100%;
}
.hcmpmumtrackpageinput i{
position:absolute;
top:50%;
left:18px;
transform:translateY(-50%);
color:#173d69;
font-size:15px;
}
.hcmpmumtrackpageinput input{
width:100%;
height:59px;
padding:0 18px 0 48px;
background:#f7f9fb;
border:1px solid #dce3ea;
border-radius:8px;
outline:none;
color:#173d69;
font-family:"Poppins",sans-serif;
font-size:13px;
font-weight:500;
}
.hcmpmumtrackpageinput input:focus{
background:#ffffff;
border-color:#e53935;
box-shadow:0 0 0 4px rgba(244,180,0,.12);
}
.hcmpmumtrackpagebtn{
width:100%;
min-height:58px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:12px;
padding:14px 22px;
background:#e53935;
color:#173d69;
border:0;
border-radius:8px;
cursor:pointer;
font-family:"Poppins",sans-serif;
font-size:13px;
font-weight:800;
transition:.35s ease;
}
.hcmpmumtrackpagebtn:hover{
background:#173d69;
color:#ffffff;
transform:translateY(-2px);
}
.hcmpmumtrackpageinfo{
display:flex;
align-items:flex-start;
gap:9px;
margin-top:15px;
}
.hcmpmumtrackpageinfo i{
margin-top:4px;
color:#e53935;
font-size:13px;
}
.hcmpmumtrackpageinfo p{
margin:0;
color:#818a94;
font-size:11px;
line-height:1.7;
}
.hcmpmumtrackpagecardhelp{
display:flex;
align-items:center;
gap:13px;
margin-top:25px;
padding-top:21px;
border-top:1px solid #e5eaf0;
}
.hcmpmumtrackpagehelpicon{
width:45px;
height:45px;
min-width:45px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:50%;
}
.hcmpmumtrackpagecardhelp span{
display:block;
color:#7a838d;
font-size:10px;
}
.hcmpmumtrackpagecardhelp a{
color:#173d69;
text-decoration:none;
font-size:14px;
font-weight:800;
}
/*==================================================
STEPS
==================================================*/
.hcmpmumtrackpagesteps{
padding:95px 0;
background:#ffffff;
}
.hcmpmumtrackpageheading{
max-width:760px;
margin:0 auto 55px;
text-align:center;
}
.hcmpmumtrackpageheading > span{
color:#e53935;
font-size:11px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumtrackpageheading h2{
margin:10px 0 16px;
color:#173d69;
font-size:42px;
font-weight:800;
line-height:1.3;
}
.hcmpmumtrackpageheading h2 strong{
color:#e53935;
}
.hcmpmumtrackpageheading p{
margin:0;
color:#707985;
font-size:15px;
line-height:1.8;
}
.hcmpmumtrackpagestepsgrid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:22px;
}
.hcmpmumtrackpagestep{
position:relative;
min-width:0;
padding:35px 30px;
background:#f7f9fb;
border:1px solid #e2e8ee;
border-radius:14px;
text-align:left;
overflow:hidden;
transition:.35s ease;
}
.hcmpmumtrackpagestep:hover{
transform:translateY(-5px);
background:#ffffff;
box-shadow:0 18px 40px rgba(23,61,105,.09);
}
.hcmpmumtrackpagestepnumber{
position:absolute;
top:17px;
right:22px;
color:rgba(23,61,105,.07);
font-size:42px;
font-weight:800;
}
.hcmpmumtrackpagestepicon{
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:23px;
background:#173d69;
color:#ffffff;
border-radius:11px;
font-size:21px;
}
.hcmpmumtrackpagestep h3{
margin:0 0 9px;
color:#173d69;
font-size:18px;
font-weight:700;
}
.hcmpmumtrackpagestep p{
margin:0;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
TRACKABLE SERVICES
==================================================*/
.hcmpmumtrackpageservices{
padding:100px 0;
background:#f5f7fa;
}
.hcmpmumtrackpageservicesgrid{
display:grid;
grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
gap:70px;
align-items:center;
}
.hcmpmumtrackpageservicesintro{
min-width:0;
text-align:left;
}
.hcmpmumtrackpagecontactbtn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:53px;
margin-top:10px;
padding:14px 23px;
background:#173d69;
color:#ffffff;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
}
.hcmpmumtrackpageservicelist{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:17px;
}
.hcmpmumtrackpageserviceitem{
display:block;
min-width:0;
padding:27px;
background:#ffffff;
border:1px solid #e2e8ee;
border-radius:12px;
text-align:left;
}
.hcmpmumtrackpageserviceicon{
width:53px;
height:53px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
background:#173d69;
color:#ffffff;
border-radius:10px;
font-size:19px;
}
.hcmpmumtrackpageserviceitem h3{
margin:0 0 8px;
color:#173d69;
font-size:16px;
font-weight:700;
}
.hcmpmumtrackpageserviceitem p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.8;
}
/*==================================================
TRACKING HELP
==================================================*/
.hcmpmumtrackpagehelp{
position:relative;
padding:75px 0;
background:#173d69;
overflow:hidden;
}
.hcmpmumtrackpagehelp::after{
content:"";
position:absolute;
width:300px;
height:300px;
right:-180px;
bottom:-220px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
.hcmpmumtrackpagehelpwrap{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:45px;
}
.hcmpmumtrackpagehelpcontent{
max-width:720px;
text-align:left;
}
.hcmpmumtrackpagehelpcontent > span{
display:block;
margin-bottom:7px;
color:#e53935;
font-size:11px;
font-weight:800;
text-transform:uppercase;
}
.hcmpmumtrackpagehelpcontent h2{
margin:0 0 10px;
color:#ffffff;
font-size:34px;
font-weight:800;
line-height:1.3;
}
.hcmpmumtrackpagehelpcontent p{
margin:0;
color:rgba(255,255,255,.7);
font-size:14px;
line-height:1.8;
}
.hcmpmumtrackpagehelpactions{
display:flex;
align-items:center;
gap:11px;
min-width:max-content;
}
.hcmpmumtrackpagehelpcall,
.hcmpmumtrackpagehelpwhatsapp{
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-height:53px;
padding:14px 21px;
border-radius:7px;
text-decoration:none;
font-size:12px;
font-weight:700;
}
.hcmpmumtrackpagehelpcall{
background:#e53935;
color:#173d69;
}
.hcmpmumtrackpagehelpwhatsapp{
background:#ffffff;
color:#173d69;
}
/*==================================================
FAQ
==================================================*/
.hcmpmumtrackpagefaq{
padding:100px 0;
background:#ffffff;
}
.hcmpmumtrackpagefaqgrid{
display:grid;
grid-template-columns:minmax(0,.70fr) minmax(0,1.30fr);
gap:70px;
align-items:start;
}
.hcmpmumtrackpagefaqintro{
min-width:0;
text-align:left;
}
.hcmpmumtrackpagefaqlist{
display:flex;
flex-direction:column;
gap:13px;
}
.hcmpmumtrackpagefaqitem{
background:#f7f9fb;
border:1px solid #e2e8ee;
border-radius:9px;
overflow:hidden;
}
.hcmpmumtrackpagefaqitem summary{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:20px 22px;
color:#173d69;
cursor:pointer;
list-style:none;
font-size:14px;
font-weight:700;
}
.hcmpmumtrackpagefaqitem summary::-webkit-details-marker{
display:none;
}
.hcmpmumtrackpagefaqitem summary i{
font-size:12px;
transition:transform .3s ease;
}
.hcmpmumtrackpagefaqitem[open] summary i{
transform:rotate(45deg);
}
.hcmpmumtrackpagefaqitem p{
margin:0;
padding:0 22px 21px;
color:#707985;
font-size:13px;
line-height:1.8;
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumtrackpagebreadwrap{
align-items:flex-start;
gap:35px;
}
.hcmpmumtrackpagebreadcontent h1{
font-size:40px;
}
.hcmpmumtrackpagebreadcard{
max-width:320px;
}
.hcmpmumtrackpagegrid,
.hcmpmumtrackpageservicesgrid,
.hcmpmumtrackpagefaqgrid{
grid-template-columns:1fr;
gap:50px;
}
.hcmpmumtrackpagecontent h2,
.hcmpmumtrackpageservicesintro h2,
.hcmpmumtrackpagefaqintro h2,
.hcmpmumtrackpageheading h2{
font-size:38px;
}
.hcmpmumtrackpagecard{
max-width:760px;
}
.hcmpmumtrackpagehelpwrap{
flex-direction:column;
align-items:flex-start;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumtrackpagebread{
padding:55px 0;
}
.hcmpmumtrackpagebreadwrap{
flex-direction:column;
align-items:stretch;
gap:30px;
}
.hcmpmumtrackpagebreadcontent h1{
font-size:33px;
}
.hcmpmumtrackpagebreadcard{
max-width:100%;
}
.hcmpmumtrackpagemain,
.hcmpmumtrackpagesteps,
.hcmpmumtrackpageservices,
.hcmpmumtrackpagefaq{
padding:65px 0;
}
.hcmpmumtrackpagecontent h2,
.hcmpmumtrackpageservicesintro h2,
.hcmpmumtrackpagefaqintro h2,
.hcmpmumtrackpageheading h2{
font-size:30px;
}
.hcmpmumtrackpagestepsgrid,
.hcmpmumtrackpageservicelist{
grid-template-columns:1fr;
}
.hcmpmumtrackpagecard{
padding:35px 25px 30px;
border-radius:14px;
}
.hcmpmumtrackpagecard > h2{
font-size:25px;
}
.hcmpmumtrackpageheading{
margin-bottom:40px;
text-align:left;
}
.hcmpmumtrackpageheading h2,
.hcmpmumtrackpageheading p{
text-align:left;
}
.hcmpmumtrackpagehelp{
padding:60px 0;
}
.hcmpmumtrackpagehelpcontent h2{
font-size:28px;
}
.hcmpmumtrackpagehelpactions{
width:100%;
min-width:0;
flex-direction:column;
align-items:stretch;
}
.hcmpmumtrackpagehelpcall,
.hcmpmumtrackpagehelpwhatsapp{
width:100%;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumtrackpagebreadcontent h1{
font-size:29px;
}
.hcmpmumtrackpagebreadcard{
padding:18px 15px;
}
.hcmpmumtrackpagebreadicon{
width:52px;
height:52px;
min-width:52px;
font-size:19px;
}
.hcmpmumtrackpagecontent h2,
.hcmpmumtrackpageservicesintro h2,
.hcmpmumtrackpagefaqintro h2,
.hcmpmumtrackpageheading h2{
font-size:27px;
}
.hcmpmumtrackpagecard{
padding:30px 18px 27px;
}
.hcmpmumtrackpagecardicon{
width:55px;
height:55px;
font-size:20px;
}
.hcmpmumtrackpagecard > h2{
font-size:22px;
}
.hcmpmumtrackpageinput input{
height:55px;
padding-left:44px;
font-size:12px;
}
.hcmpmumtrackpagebtn{
min-height:55px;
font-size:12px;
}
.hcmpmumtrackpagestep{
padding:30px 22px;
}
.hcmpmumtrackpageserviceitem{
padding:24px 21px;
}
.hcmpmumtrackpagefaqitem summary{
padding:18px;
font-size:13px;
}
.hcmpmumtrackpagefaqitem p{
padding:0 18px 19px;
}
}
/*==================================================
PREMIUM SHIPMENT TRACKING
==================================================*/
.hcmpmumshiptrack{
position:relative;
width:100%;
padding:100px 0;
background:#f5f7fa;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmpmumshiptrack::before{
content:"";
position:absolute;
width:450px;
height:450px;
top:-310px;
left:-270px;
border:75px solid rgba(23,61,105,.025);
border-radius:50%;
}
.hcmpmumshiptrack::after{
content:"";
position:absolute;
width:300px;
height:300px;
right:-190px;
bottom:-210px;
background:rgba(244,180,0,.07);
border-radius:50%;
}
.hcmpmumshiptrackwrap{
position:relative;
z-index:2;
width:100%;
}
/*==================================================
SECTION HEADING
==================================================*/
.hcmpmumshiptrackheading{
width:100%;
max-width:760px;
margin:0 auto 45px;
text-align:center;
}
.hcmpmumshiptracktag{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
margin-bottom:14px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.5;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumshiptracktag i{
font-size:14px;
}
.hcmpmumshiptrackheading h2{
margin:0 0 17px;
color:#173d69;
font-size:44px;
font-weight:800;
line-height:1.25;
}
.hcmpmumshiptrackheading h2 span{
color:#e53935;
}
.hcmpmumshiptrackheading p{
max-width:650px;
margin:0 auto;
color:#68717d;
font-size:15px;
line-height:1.9;
}
/*==================================================
MAIN TRACKING PANEL
==================================================*/
.hcmpmumshiptrackpanel{
position:relative;
width:100%;
max-width:1180px;
margin:0 auto;
padding:42px 48px 38px;
background:#173d69;
border-radius:18px;
box-shadow:0 25px 60px rgba(23,61,105,.18);
overflow:hidden;
}
.hcmpmumshiptrackpanel::before{
content:"";
position:absolute;
width:250px;
height:250px;
top:-170px;
right:-140px;
border:45px solid rgba(255,255,255,.035);
border-radius:50%;
}
.hcmpmumshiptrackpanel::after{
content:"";
position:absolute;
width:160px;
height:160px;
left:-110px;
bottom:-110px;
background:rgba(244,180,0,.08);
border-radius:50%;
}
/*==================================================
PANEL HEADING
==================================================*/
.hcmpmumshiptrackpanelhead{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:16px;
margin-bottom:25px;
}
.hcmpmumshiptrackpanelicon{
width:58px;
height:58px;
min-width:58px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:11px;
font-size:21px;
}
.hcmpmumshiptrackpanelhead > div:last-child{
min-width:0;
}
.hcmpmumshiptrackpanelhead span{
display:block;
margin-bottom:3px;
color:#e53935;
font-size:10px;
font-weight:800;
letter-spacing:1px;
}
.hcmpmumshiptrackpanelhead h3{
margin:0;
color:#ffffff;
font-size:22px;
font-weight:700;
line-height:1.4;
}
/*==================================================
TRACKING FORM
==================================================*/
.hcmpmumshiptrackform{
position:relative;
z-index:2;
width:100%;
}
.hcmpmumshiptracksearch{
display:grid;
grid-template-columns:minmax(0,1fr) 200px;
gap:14px;
width:100%;
}
.hcmpmumshiptrackinput{
position:relative;
width:100%;
min-width:0;
}
.hcmpmumshiptrackinput > i{
position:absolute;
top:50%;
left:23px;
transform:translateY(-50%);
color:#173d69;
font-size:18px;
pointer-events:none;
}
.hcmpmumshiptrackinput input{
width:100%;
height:72px;
padding:0 25px 0 60px;
background:#ffffff;
border:2px solid transparent;
border-radius:10px;
outline:none;
color:#173d69;
font-family:"Poppins",sans-serif;
font-size:16px;
font-weight:600;
transition:
border-color .3s ease,
box-shadow .3s ease;
}
.hcmpmumshiptrackinput input::placeholder{
color:#8c96a1;
font-size:15px;
font-weight:500;
}
.hcmpmumshiptrackinput input:focus{
border-color:#e53935;
box-shadow:0 0 0 4px rgba(244,180,0,.15);
}
/*==================================================
TRACK BUTTON
==================================================*/
.hcmpmumshiptracksearch button{
width:200px;
height:72px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
padding:0 20px;
background:#e53935;
color:#173d69;
border:0;
border-radius:10px;
cursor:pointer;
font-family:"Poppins",sans-serif;
font-size:13px;
font-weight:800;
white-space:nowrap;
transition:
background .3s ease,
color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.hcmpmumshiptracksearch button:hover{
background:#ffffff;
color:#173d69;
transform:translateY(-2px);
box-shadow:0 12px 25px rgba(0,0,0,.15);
}
.hcmpmumshiptracksearch button i:last-child{
font-size:12px;
transition:transform .3s ease;
}
.hcmpmumshiptracksearch button:hover i:last-child{
transform:translateX(4px);
}
/*==================================================
TRACK NOTE
==================================================*/
.hcmpmumshiptracknote{
position:relative;
z-index:2;
display:flex;
align-items:flex-start;
gap:9px;
margin-top:14px;
}
.hcmpmumshiptracknote i{
margin-top:3px;
color:#e53935;
font-size:12px;
}
.hcmpmumshiptracknote span{
color:rgba(255,255,255,.63);
font-size:11px;
line-height:1.7;
}
/*==================================================
TRACKING CARDS
==================================================*/
.hcmpmumshiptrackcards{
position:relative;
z-index:3;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:20px;
width:calc(100% - 100px);
max-width:1280px;
margin:-1px auto 0;
padding-top:35px;
}
.hcmpmumshiptrackcard{
position:relative;
display:block;
min-width:0;
min-height:235px;
padding:30px 27px;
background:#ffffff;
border:1px solid #e1e7ed;
border-radius:13px;
overflow:hidden;
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.hcmpmumshiptrackcard:hover{
transform:translateY(-5px);
border-color:rgba(244,180,0,.55);
box-shadow:0 18px 40px rgba(23,61,105,.10);
}
.hcmpmumshiptracknumber{
position:absolute;
top:18px;
right:21px;
color:rgba(23,61,105,.07);
font-size:42px;
font-weight:800;
line-height:1;
}
.hcmpmumshiptrackcardicon{
width:58px;
height:58px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
background:#173d69;
color:#ffffff;
border-radius:11px;
font-size:20px;
transition:
background .35s ease,
color .35s ease;
}
.hcmpmumshiptrackcard:hover .hcmpmumshiptrackcardicon{
background:#e53935;
color:#173d69;
}
.hcmpmumshiptrackcardcontent{
width:100%;
min-width:0;
text-align:left;
}
.hcmpmumshiptrackcardcontent h3{
margin:0 0 9px;
color:#173d69;
font-size:17px;
font-weight:700;
line-height:1.45;
}
.hcmpmumshiptrackcardcontent p{
margin:0;
color:#707985;
font-size:12px;
line-height:1.8;
}
/*==================================================
SUPPORT STRIP
==================================================*/
.hcmpmumshiptracksupport{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
width:100%;
max-width:1250px;
margin:35px auto 0;
padding:23px 27px;
background:#ffffff;
border:1px solid #e1e7ed;
border-left:5px solid #e53935;
border-radius:10px;
box-shadow:0 10px 30px rgba(23,61,105,.06);
}
.hcmpmumshiptracksupportleft{
display:flex;
align-items:center;
gap:15px;
min-width:0;
}
.hcmpmumshiptracksupporticon{
width:52px;
height:52px;
min-width:52px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:50%;
font-size:18px;
}
.hcmpmumshiptracksupportleft > div:last-child{
min-width:0;
}
.hcmpmumshiptracksupportleft span{
display:block;
margin-bottom:3px;
color:#7a838d;
font-size:10px;
font-weight:600;
}
.hcmpmumshiptracksupportleft h3{
margin:0;
color:#173d69;
font-size:17px;
font-weight:700;
line-height:1.4;
}
.hcmpmumshiptracksupportactions{
display:flex;
align-items:center;
gap:10px;
min-width:max-content;
}
.hcmpmumshiptrackcall,
.hcmpmumshiptrackwhatsapp{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:47px;
padding:12px 18px;
border-radius:7px;
text-decoration:none;
font-size:12px;
font-weight:700;
transition:
transform .3s ease,
box-shadow .3s ease;
}
.hcmpmumshiptrackcall{
background:#173d69;
color:#ffffff;
}
.hcmpmumshiptrackwhatsapp{
background:#25d366;
color:#ffffff;
}
.hcmpmumshiptrackcall:hover,
.hcmpmumshiptrackwhatsapp:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(23,61,105,.15);
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpmumshiptrack{
padding:80px 0;
}
.hcmpmumshiptrackheading h2{
font-size:38px;
}
.hcmpmumshiptrackpanel{
padding:35px 32px 31px;
}
.hcmpmumshiptrackcards{
width:100%;
}
.hcmpmumshiptracksupport{
align-items:flex-start;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpmumshiptrack{
padding:65px 0;
}
.hcmpmumshiptrackheading{
margin-bottom:35px;
text-align:left;
}
.hcmpmumshiptracktag{
justify-content:flex-start;
}
.hcmpmumshiptrackheading h2{
font-size:30px;
line-height:1.3;
}
.hcmpmumshiptrackheading p{
margin:0;
font-size:14px;
line-height:1.8;
}
.hcmpmumshiptrackpanel{
padding:30px 24px 27px;
border-radius:14px;
}
.hcmpmumshiptrackpanelhead{
margin-bottom:22px;
}
.hcmpmumshiptrackpanelhead h3{
font-size:19px;
}
.hcmpmumshiptracksearch{
grid-template-columns:1fr;
gap:11px;
}
.hcmpmumshiptracksearch button{
width:100%;
min-width:0;
}
.hcmpmumshiptrackcards{
grid-template-columns:1fr;
gap:14px;
padding-top:25px;
}
.hcmpmumshiptrackcard{
min-height:auto;
padding:25px 23px;
}
.hcmpmumshiptracksupport{
flex-direction:column;
align-items:stretch;
gap:22px;
margin-top:25px;
padding:22px;
}
.hcmpmumshiptracksupportactions{
width:100%;
min-width:0;
}
.hcmpmumshiptrackcall,
.hcmpmumshiptrackwhatsapp{
flex:1;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpmumshiptrack{
padding:55px 0;
}
.hcmpmumshiptrackheading h2{
font-size:27px;
}
.hcmpmumshiptrackpanel{
padding:26px 18px 24px;
}
.hcmpmumshiptrackpanelhead{
align-items:flex-start;
gap:13px;
}
.hcmpmumshiptrackpanelicon{
width:50px;
height:50px;
min-width:50px;
font-size:18px;
}
.hcmpmumshiptrackpanelhead h3{
font-size:17px;
}
.hcmpmumshiptrackinput input{
height:57px;
padding-left:47px;
font-size:12px;
}
.hcmpmumshiptrackinput > i{
left:17px;
font-size:14px;
}
.hcmpmumshiptracksearch button{
height:57px;
font-size:12px;
}
.hcmpmumshiptrackcard{
padding:23px 20px;
}
.hcmpmumshiptrackcardicon{
width:52px;
height:52px;
margin-bottom:18px;
font-size:18px;
}
.hcmpmumshiptrackcardcontent h3{
font-size:16px;
}
.hcmpmumshiptrackcardcontent p{
font-size:12px;
}
.hcmpmumshiptracksupportleft{
align-items:flex-start;
}
.hcmpmumshiptracksupporticon{
width:46px;
height:46px;
min-width:46px;
font-size:16px;
}
.hcmpmumshiptracksupportleft h3{
font-size:15px;
}
.hcmpmumshiptracksupportactions{
flex-direction:column;
}
.hcmpmumshiptrackcall,
.hcmpmumshiptrackwhatsapp{
width:100%;
}
}
/*========================================
TABLET
========================================*/
@media(max-width:991px){
.hcmpmumshiptrackpanel{
max-width:100%;
padding:38px 35px 34px;
}
.hcmpmumshiptracksearch{
grid-template-columns:minmax(0,1fr) 190px;
}
.hcmpmumshiptracksearch button{
width:190px;
}
}
/*========================================
MOBILE
========================================*/
@media(max-width:767px){
.hcmpmumshiptrackpanel{
padding:30px 24px 27px;
}
.hcmpmumshiptracksearch{
grid-template-columns:1fr;
gap:12px;
}
.hcmpmumshiptrackinput input{
height:65px;
padding-left:54px;
font-size:14px;
}
.hcmpmumshiptrackinput input::placeholder{
font-size:13px;
}
.hcmpmumshiptrackinput > i{
left:20px;
font-size:16px;
}
.hcmpmumshiptracksearch button{
width:100%;
height:62px;
font-size:13px;
}
}
/*========================================
SMALL MOBILE
========================================*/
@media(max-width:480px){
.hcmpmumshiptrackpanel{
padding:27px 18px 24px;
}
.hcmpmumshiptrackinput input{
height:62px;
padding:0 18px 0 50px;
font-size:13px;
}
.hcmpmumshiptrackinput > i{
left:18px;
font-size:15px;
}
.hcmpmumshiptracksearch button{
height:60px;
}
}
/*==================================================
FIX TRACKING INPUT WIDTH - DESKTOP
==================================================*/
@media screen and (min-width: 992px){
.hcmpmumshiptrackpanel{
width:100% !important;
max-width:1280px !important;
box-sizing:border-box !important;
}
.hcmpmumshiptrackform{
display:block !important;
width:100% !important;
max-width:none !important;
}
.hcmpmumshiptracksearch{
display:flex !important;
align-items:center !important;
width:100% !important;
max-width:none !important;
gap:15px !important;
}
.hcmpmumshiptrackinput{
display:block !important;
flex:1 1 auto !important;
width:auto !important;
max-width:none !important;
min-width:0 !important;
}
.hcmpmumshiptrackinput input{
display:block !important;
width:100% !important;
max-width:none !important;
min-width:0 !important;
height:72px !important;
padding:0 25px 0 60px !important;
box-sizing:border-box !important;
}
.hcmpmumshiptracksearch button{
flex:0 0 215px !important;
width:215px !important;
min-width:215px !important;
height:72px !important;
}
}
.bipmarea{
position:relative;
width:100%;
padding:100px 0;
background:#f5f7fa;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.bipmarea,
.bipmarea *{
box-sizing:border-box;
}
.bipmarea::before{
content:"";
position:absolute;
width:420px;
height:420px;
top:-300px;
right:-260px;
border:70px solid rgba(23,61,105,.025);
border-radius:50%;
}
/*==================================================
SECTION TOP
==================================================*/
.bipmareatop{
position:relative;
z-index:2;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:55px;
width:100%;
margin-bottom:48px;
}
/*==================================================
SECTION HEADING
==================================================*/
.bipmareaheading{
width:100%;
max-width:720px;
text-align:left;
}
.bipmareatag{
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:8px;
margin-bottom:14px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.5;
letter-spacing:1px;
text-transform:uppercase;
}
.bipmareatag i{
font-size:13px;
}
.bipmareaheading h2{
margin:0 0 18px;
color:#173d69;
font-size:44px;
font-weight:800;
line-height:1.25;
}
.bipmareaheading h2 span{
color:#e53935;
}
.bipmareaheading p{
max-width:680px;
margin:0;
color:#68717d;
font-size:15px;
font-weight:400;
line-height:1.9;
}
/*==================================================
TOP INFORMATION BOX
==================================================*/
.bipmareatopinfo{
display:flex;
align-items:center;
gap:16px;
width:100%;
max-width:390px;
padding:21px;
background:#ffffff;
border:1px solid #e1e7ed;
border-radius:11px;
box-shadow:0 12px 32px rgba(23,61,105,.07);
}
.bipmareatopicon{
width:60px;
height:60px;
min-width:60px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:10px;
font-size:21px;
}
.bipmareatopcontent{
min-width:0;
}
.bipmareatopcontent span{
display:block;
margin-bottom:4px;
color:#e53935;
font-size:9px;
font-weight:800;
line-height:1.5;
letter-spacing:.7px;
text-transform:uppercase;
}
.bipmareatopcontent h3{
margin:0 0 5px;
color:#173d69;
font-size:15px;
font-weight:700;
line-height:1.5;
}
.bipmareatopcontent p{
margin:0;
color:#78818c;
font-size:11px;
font-weight:400;
line-height:1.65;
}
/*==================================================
SERVICE AREA GRID
==================================================*/
.bipmareagrid{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:15px;
width:100%;
}
/*==================================================
SERVICE AREA BOX
==================================================*/
.bipmareabox{
position:relative;
display:flex;
align-items:center;
gap:15px;
width:100%;
min-width:0;
min-height:82px;
padding:17px 18px;
background:#ffffff;
border:1px solid #e0e6ed;
border-radius:9px;
color:#173d69;
cursor:default;
overflow:hidden;
transition:
transform .35s ease,
border-color .35s ease,
box-shadow .35s ease,
background .35s ease;
}
.bipmareabox::before{
content:"";
position:absolute;
top:0;
left:0;
width:4px;
height:100%;
background:#e53935;
transform:scaleY(0);
transform-origin:bottom;
transition:transform .35s ease;
}
.bipmareabox:hover{
transform:translateY(-3px);
border-color:rgba(244,180,0,.60);
box-shadow:0 13px 30px rgba(23,61,105,.09);
}
.bipmareabox:hover::before{
transform:scaleY(1);
}
/*==================================================
SERVICE AREA ICON
==================================================*/
.bipmareaicon{
width:46px;
height:46px;
min-width:46px;
display:flex;
align-items:center;
justify-content:center;
background:#eef3f8;
color:#173d69;
border-radius:8px;
font-size:14px;
transition:
background .35s ease,
color .35s ease,
transform .35s ease;
}
.bipmareabox:hover .bipmareaicon{
background:#173d69;
color:#ffffff;
transform:rotate(-5deg);
}
/*==================================================
AREA NAME
==================================================*/
.bipmareaname{
display:block;
flex:1 1 auto;
min-width:0;
color:#66717c;
font-size:10px;
font-weight:500;
line-height:1.45;
text-align:left;
}
.bipmareaname strong{
display:block;
margin-top:2px;
color:#173d69;
font-size:14px;
font-weight:700;
line-height:1.5;
}
/*==================================================
RIGHT LOCATION ICON
==================================================*/
.bipmareaarrow{
flex:0 0 auto;
color:#c1c8d0;
font-size:12px;
transition:
color .35s ease,
transform .35s ease;
}
.bipmareabox:hover .bipmareaarrow{
color:#e53935;
transform:scale(1.15);
}
/*==================================================
BOTTOM CTA
==================================================*/
.bipmareabottom{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
width:100%;
margin-top:35px;
padding:25px 28px;
background:#173d69;
border-radius:11px;
overflow:hidden;
}
.bipmareabottom::after{
content:"";
position:absolute;
width:200px;
height:200px;
top:-120px;
right:-115px;
border:38px solid rgba(255,255,255,.035);
border-radius:50%;
}
.bipmareabottomcontent{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:16px;
min-width:0;
}
.bipmareabottomcontent > i{
width:55px;
height:55px;
min-width:55px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#173d69;
border-radius:10px;
font-size:19px;
}
.bipmareabottomcontent > div{
min-width:0;
}
.bipmareabottomcontent span{
display:block;
margin-bottom:4px;
color:#e53935;
font-size:10px;
font-weight:800;
line-height:1.5;
letter-spacing:.6px;
}
.bipmareabottomcontent h3{
margin:0;
color:#ffffff;
font-size:17px;
font-weight:700;
line-height:1.5;
}
/*==================================================
QUOTE BUTTON
==================================================*/
.bipmareaquote{
position:relative;
z-index:2;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
min-width:max-content;
min-height:51px;
padding:13px 22px;
background:#e53935;
color:#173d69;
border-radius:7px;
text-decoration:none;
font-size:12px;
font-weight:800;
line-height:1.5;
white-space:nowrap;
transition:
background .3s ease,
color .3s ease,
transform .3s ease,
box-shadow .3s ease;
}
.bipmareaquote:hover{
background:#ffffff;
color:#173d69;
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(0,0,0,.15);
}
.bipmareaquote i{
font-size:11px;
transition:transform .3s ease;
}
.bipmareaquote:hover i{
transform:translateX(4px);
}
/*==================================================
LARGE TABLET
==================================================*/
@media screen and (max-width:1100px){
.bipmareatop{
gap:35px;
}
.bipmareaheading{
max-width:620px;
}
.bipmareaheading h2{
font-size:40px;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.bipmarea{
padding:80px 0;
}
.bipmareatop{
align-items:flex-start;
gap:30px;
margin-bottom:40px;
}
.bipmareaheading h2{
font-size:37px;
}
.bipmareatopinfo{
max-width:330px;
padding:18px;
}
.bipmareatopicon{
width:54px;
height:54px;
min-width:54px;
font-size:19px;
}
.bipmareagrid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.bipmareabottom{
align-items:flex-start;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.bipmarea{
padding:65px 0;
}
.bipmareatop{
flex-direction:column;
align-items:stretch;
gap:27px;
margin-bottom:35px;
}
.bipmareaheading{
max-width:100%;
}
.bipmareaheading h2{
font-size:30px;
line-height:1.3;
}
.bipmareaheading p{
font-size:14px;
line-height:1.8;
}
.bipmareatopinfo{
max-width:100%;
}
.bipmareagrid{
grid-template-columns:1fr;
gap:11px;
}
.bipmareabox{
min-height:76px;
padding:15px 16px;
}
.bipmareaicon{
width:44px;
height:44px;
min-width:44px;
}
.bipmareabottom{
flex-direction:column;
align-items:stretch;
gap:22px;
margin-top:27px;
padding:23px;
}
.bipmareaquote{
width:100%;
min-width:0;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.bipmarea{
padding:55px 0;
}
.bipmareaheading h2{
font-size:27px;
}
.bipmareatopinfo{
align-items:flex-start;
padding:17px;
}
.bipmareatopicon{
width:50px;
height:50px;
min-width:50px;
font-size:17px;
}
.bipmareatopcontent h3{
font-size:14px;
}
.bipmareabox{
gap:12px;
min-height:72px;
padding:13px 14px;
}
.bipmareaicon{
width:42px;
height:42px;
min-width:42px;
font-size:13px;
}
.bipmareaname{
font-size:9px;
}
.bipmareaname strong{
font-size:13px;
}
.bipmareaarrow{
font-size:11px;
}
.bipmareabottom{
padding:20px 17px;
}
.bipmareabottomcontent{
align-items:flex-start;
gap:13px;
}
.bipmareabottomcontent > i{
width:48px;
height:48px;
min-width:48px;
font-size:17px;
}
.bipmareabottomcontent h3{
font-size:15px;
}
.bipmareaquote{
min-height:49px;
font-size:11px;
}
}
/*==================================================
ABOUT PAGE BREADCRUMB
==================================================*/
.hcmpmumaboutbreadcrumb{
position:relative;
width:100%;
min-height:390px;
display:flex;
align-items:center;
padding:80px 0;
background:
linear-gradient(
110deg,
#102f53 0%,
#173d69 55%,
#1d4c80 100%
);
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmpmumaboutbreadcrumb,
.hcmpmumaboutbreadcrumb *{
box-sizing:border-box;
}
/*==================================================
BACKGROUND PATTERN
==================================================*/
.hcmpmumaboutbreadcrumb::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image:
linear-gradient(
rgba(255,255,255,.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255,255,255,.025) 1px,
transparent 1px
);
background-size:45px 45px;
pointer-events:none;
}
.hcmpmumaboutbreadcrumb::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:5px;
background:#e53935;
}
/*==================================================
DECORATIVE SHAPES
==================================================*/
.hcmpmumaboutbreadshape{
position:absolute;
border-radius:50%;
pointer-events:none;
}
.hcmpmumaboutbreadshapeone{
width:420px;
height:420px;
top:-290px;
right:-170px;
border:65px solid rgba(255,255,255,.035);
}
.hcmpmumaboutbreadshapetwo{
width:250px;
height:250px;
left:-150px;
bottom:-180px;
background:rgba(244,180,0,.07);
}
/*==================================================
BREADCRUMB WRAPPER
==================================================*/
.hcmpmumaboutbreadwrap{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
align-items:center;
gap:70px;
width:100%;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpmumaboutbreadcontent{
width:100%;
max-width:750px;
text-align:left;
}
/*==================================================
TOP TAG
==================================================*/
.hcmpmumaboutbreadtag{
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:9px;
margin-bottom:17px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.5;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumaboutbreadtag i{
font-size:14px;
}
/*==================================================
TITLE
==================================================*/
.hcmpmumaboutbreadcontent h1{
margin:0 0 17px;
color:#ffffff;
font-size:55px;
font-weight:800;
line-height:1.15;
letter-spacing:-1px;
}
.hcmpmumaboutbreadcontent h1 span{
color:#e53935;
}
/*==================================================
DESCRIPTION
==================================================*/
.hcmpmumaboutbreadcontent > p{
max-width:650px;
margin:0 0 26px;
color:rgba(255,255,255,.75);
font-size:15px;
font-weight:400;
line-height:1.9;
}
/*==================================================
BREADCRUMB NAVIGATION
==================================================*/
.hcmpmumaboutbreadnav{
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:13px;
min-height:47px;
padding:11px 18px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:7px;
backdrop-filter:blur(5px);
-webkit-backdrop-filter:blur(5px);
}
.hcmpmumaboutbreadnav a{
display:inline-flex;
align-items:center;
gap:8px;
color:#ffffff;
text-decoration:none;
font-size:12px;
font-weight:600;
transition:color .3s ease;
}
.hcmpmumaboutbreadnav a:hover{
color:#e53935;
}
.hcmpmumaboutbreadnav a i{
color:#e53935;
font-size:11px;
}
.hcmpmumaboutbreadseparator{
color:rgba(255,255,255,.35);
font-size:9px;
}
.hcmpmumaboutbreadnav > span{
color:#e53935;
font-size:12px;
font-weight:700;
}
/*==================================================
RIGHT VISUAL
==================================================*/
.hcmpmumaboutbreadvisual{
display:flex;
align-items:center;
justify-content:flex-end;
width:100%;
}
/*==================================================
VISUAL BOX
==================================================*/
.hcmpmumaboutbreadiconbox{
position:relative;
width:100%;
max-width:330px;
padding:34px 28px;
background:rgba(255,255,255,.075);
border:1px solid rgba(255,255,255,.13);
border-radius:16px;
text-align:center;
backdrop-filter:blur(7px);
-webkit-backdrop-filter:blur(7px);
box-shadow:0 25px 50px rgba(0,0,0,.12);
overflow:hidden;
}
.hcmpmumaboutbreadiconbox::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#e53935;
}
.hcmpmumaboutbreadsmalltext{
display:block;
margin-bottom:22px;
color:#e53935;
font-size:9px;
font-weight:800;
letter-spacing:1.2px;
}
/*==================================================
MAIN ICON
==================================================*/
.hcmpmumaboutbreadmainicon{
width:90px;
height:90px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px;
background:#e53935;
color:#fff;
border-radius:50%;
font-size:34px;
box-shadow:
0 0 0 10px rgba(244,180,0,.08),
0 0 0 20px rgba(244,180,0,.04);
}
.hcmpmumaboutbreadiconbox strong{
display:block;
margin-bottom:8px;
color:#ffffff;
font-size:18px;
font-weight:700;
line-height:1.5;
}
.hcmpmumaboutbreadiconbox p{
margin:0;
color:rgba(255,255,255,.60);
font-size:11px;
line-height:1.7;
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmpmumaboutbreadcrumb{
min-height:auto;
padding:70px 0;
}
.hcmpmumaboutbreadwrap{
grid-template-columns:minmax(0,1fr) 280px;
gap:40px;
}
.hcmpmumaboutbreadcontent h1{
font-size:46px;
}
.hcmpmumaboutbreadiconbox{
padding:30px 22px;
}
.hcmpmumaboutbreadmainicon{
width:78px;
height:78px;
font-size:29px;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmpmumaboutbreadcrumb{
min-height:auto;
padding:60px 0 65px;
}
.hcmpmumaboutbreadwrap{
grid-template-columns:1fr;
gap:35px;
}
.hcmpmumaboutbreadcontent{
max-width:100%;
}
.hcmpmumaboutbreadtag{
margin-bottom:13px;
font-size:10px;
}
.hcmpmumaboutbreadcontent h1{
margin-bottom:14px;
font-size:38px;
line-height:1.2;
}
.hcmpmumaboutbreadcontent > p{
margin-bottom:22px;
font-size:14px;
line-height:1.8;
}
.hcmpmumaboutbreadvisual{
justify-content:flex-start;
}
.hcmpmumaboutbreadiconbox{
max-width:100%;
padding:29px 24px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.hcmpmumaboutbreadcrumb{
padding:50px 0 55px;
}
.hcmpmumaboutbreadcontent h1{
font-size:33px;
}
.hcmpmumaboutbreadcontent > p{
font-size:13px;
}
.hcmpmumaboutbreadnav{
gap:10px;
min-height:44px;
padding:10px 14px;
}
.hcmpmumaboutbreadnav a,
.hcmpmumaboutbreadnav > span{
font-size:11px;
}
.hcmpmumaboutbreadiconbox{
padding:27px 20px;
}
.hcmpmumaboutbreadmainicon{
width:72px;
height:72px;
margin-bottom:18px;
font-size:26px;
}
.hcmpmumaboutbreadiconbox strong{
font-size:16px;
}
}
/*==================================================
hcmp TOP BAR + HEADER
PRIMARY : #173d69
ACCENT : #e53935
==================================================*/
/*html{
overflow-x:hidden;
}
body{
margin:0;
overflow-x:hidden;
}*/
.hcmptopbar,
.hcmptopbar *,
.hcmpheader,
.hcmpheader *,
.hcmpheadermobile,
.hcmpheadermobile *{
box-sizing:border-box;
}
/*==================================================
TOP BAR
==================================================*/
.hcmptopbar{
position:relative;
z-index:1001;
width:100%;
min-height:68px;
display:flex;
align-items:center;
background:#173d69;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmptopbar::before{
content:"";
position:absolute;
top:0;
left:0;
width:36%;
height:100%;
background:linear-gradient(
115deg,
#e53935 0%,
#e53935 92%,
transparent 92%
);
}
.hcmptopbarcontainer{
position:relative;
z-index:2;
width:100%;
max-width:1450px;
margin:0 auto;
padding:0 30px;
}
.hcmptopbarwrap{
min-height:68px;
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
align-items:center;
gap:30px;
}
.hcmptopbarleft{
display:flex;
align-items:center;
gap:25px;
}
.hcmptopbarphone{
display:flex;
align-items:center;
gap:11px;
color:#ffffff;
text-decoration:none;
white-space:nowrap;
}
.hcmptopbarphoneicon{
width:38px;
height:38px;
min-width:38px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.17);
border:1px solid rgba(255,255,255,.25);
border-radius:50%;
color:#ffffff;
font-size:14px;
}
.hcmptopbarphonetext{
display:block;
color:#ffffff;
font-size:14px;
font-weight:700;
line-height:1.35;
}
.hcmptopbarphonetext small{
display:block;
margin-bottom:2px;
color:rgba(255,255,255,.78);
font-size:10px;
font-weight:500;
text-transform:uppercase;
letter-spacing:.5px;
}
.hcmptopbarcenter{
display:flex;
align-items:center;
justify-content:center;
gap:20px;
}
.hcmptopbarservice,
.hcmptopbaremail{
display:flex;
align-items:center;
gap:9px;
color:rgba(255,255,255,.92);
font-size:13px;
font-weight:500;
text-decoration:none;
white-space:nowrap;
}
.hcmptopbarservice i,
.hcmptopbaremail i{
color:#e53935;
font-size:14px;
}
.hcmptopbardivider{
width:1px;
height:23px;
background:rgba(255,255,255,.22);
}
.hcmptopbarright{
display:flex;
justify-content:flex-end;
}
.hcmptopbarquote{
min-height:45px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:11px 21px;
background:#e53935;
color:#ffffff;
border:1px solid #e53935;
border-radius:7px;
text-decoration:none;
font-size:13px;
font-weight:700;
white-space:nowrap;
transition:.3s ease;
}
.hcmptopbarquote:hover{
background:#ffffff;
color:#173d69;
border-color:#ffffff;
transform:translateY(-2px);
}
/*==================================================
HEADER
==================================================*/
.hcmpheaderspace{
width:100%;
height:0;
display:block;
}
.hcmpheader{
position:relative;
z-index:1000;
width:100%;
background:#ffffff;
border-bottom:1px solid #e5eaf0;
box-shadow:0 5px 22px rgba(23,61,105,.07);
font-family:"Poppins",sans-serif;
transition:
background .35s ease,
box-shadow .35s ease;
}
.hcmpheadercontainer{
width:100%;
max-width:1320px;
margin:0 auto;
padding:0 30px;
}
.hcmpheaderwrap{
width:100%;
min-height:94px;
display:grid;
grid-template-columns:250px minmax(0,1fr) auto;
align-items:center;
gap:30px;
}
/*==================================================
LOGO
==================================================*/
.hcmpheaderlogo{
width:230px;
height:75px;
display:flex;
align-items:center;
justify-content:flex-start;
text-decoration:none;
overflow:hidden;
}
.hcmpheaderlogo .hcmpheaderlogodark{
display:block !important;
width:auto;
max-width:220px;
max-height:70px;
object-fit:contain;
}
.hcmpheaderlogo .hcmpheaderlogowhite{
display:none !important;
width:auto;
max-width:220px;
max-height:70px;
object-fit:contain;
}
/*==================================================
DESKTOP NAV
==================================================*/
.hcmpheadernav{
display:flex;
align-items:center;
justify-content:center;
}
.hcmpheadernavlist{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
margin:0;
padding:0;
list-style:none;
}
.hcmpheadernavlist > li{
position:relative;
}
.hcmpheadernavlist > li > a{
position:relative;
min-height:94px;
display:flex;
align-items:center;
gap:8px;
padding:0 16px;
color:#173d69;
text-decoration:none;
font-size:16px;
font-weight:600;
white-space:nowrap;
transition:color .3s ease;
text-transform:uppercase;
}
.hcmpheadernavlist > li > a::after{
content:"";
position:absolute;
left:16px;
right:16px;
bottom:24px;
height:3px;
background:#e53935;
border-radius:10px;
transform:scaleX(0);
transition:transform .3s ease;
}
.hcmpheadernavlist > li > a:hover{
color:#e53935;
}
.hcmpheadernavlist > li > a:hover::after{
transform:scaleX(1);
}
.hcmpheadernavlist > li > a i{
font-size:11px;
transition:transform .3s ease;
}
.hcmpheaderhasdropdown:hover > a i{
transform:rotate(180deg);
}
/*==================================================
DESKTOP DROPDOWN
==================================================*/
.hcmpheaderdropdown{
position:absolute;
top:100%;
left:0;
z-index:3000;
width:285px;
margin:0;
padding:10px;
background:#ffffff;
border-top:4px solid #e53935;
border-radius:0 0 10px 10px;
box-shadow:0 20px 50px rgba(23,61,105,.18);
list-style:none;
opacity:0;
visibility:hidden;
transform:translateY(12px);
transition:.3s ease;
}
.hcmpheaderhasdropdown:hover > .hcmpheaderdropdown{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.hcmpheaderdropdown li a{
width:100%;
display:flex;
align-items:center;
gap:13px;
padding:14px 15px;
color:#173d69;
border-radius:7px;
text-decoration:none;
font-size:14px;
font-weight:500;
transition:.3s ease;
text-transform:uppercase;
}
.hcmpheaderdropdown li a i{
width:22px;
color:#e53935;
text-align:center;
}
.hcmpheaderdropdown li a:hover{
padding-left:20px;
background:rgba(221,116,54,.09);
color:#e53935;
}
/*==================================================
HEADER CALL
==================================================*/
.hcmpheaderright{
display:flex;
justify-content:flex-end;
}
.hcmpheadercall{
display:flex;
align-items:center;
gap:13px;
padding:9px 18px 9px 9px;
background:#f7f9fb;
border:1px solid #dce4ec;
border-radius:50px;
color:#173d69;
text-decoration:none;
white-space:nowrap;
transition:.3s ease;
}
.hcmpheadercallicon{
width:50px;
height:50px;
min-width:50px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:50%;
font-size:17px;
}
.hcmpheadercalltext{
color:#173d69;
font-size:15px;
font-weight:700;
line-height:1.35;
}
.hcmpheadercalltext small{
display:block;
margin-bottom:2px;
color:#758292;
font-size:11px;
font-weight:500;
}
.hcmpheadercall:hover{
border-color:#e53935;
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(23,61,105,.13);
}
/*==================================================
MOBILE TOGGLE
==================================================*/
.hcmpheadertoggle{
position:relative;
width:50px;
height:50px;
min-width:50px;
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
padding:0;
background:#173d69;
border:0;
border-radius:9px;
cursor:pointer;
}
.hcmpheadertoggle span{
display:block;
width:24px;
height:3px;
background:#ffffff;
border-radius:20px;
pointer-events:none;
transition:.3s ease;
}
.hcmpheadertoggle span:nth-child(2){
width:17px;
margin-left:7px;
background:#e53935;
}
/*==================================================
OVERLAY
==================================================*/
.hcmpheaderoverlay{
position:fixed !important;
inset:0;
z-index:99998 !important;
width:100%;
height:100vh;
height:100dvh;
background:rgba(9,27,48,.72);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:
opacity .35s ease,
visibility .35s ease;
}
.hcmpheaderoverlay.active{
opacity:1;
visibility:visible;
pointer-events:auto;
}
/*==================================================
MOBILE SLIDE MENU
==================================================*/
.hcmpheadermobile{
position:fixed !important;
top:0;
right:0;
z-index:99999 !important;
width:390px;
max-width:88%;
height:100vh;
height:100dvh;
display:flex !important;
flex-direction:column;
background:#ffffff;
font-family:"Poppins",sans-serif;
box-shadow:-20px 0 60px rgba(0,0,0,.25);
overflow-x:hidden;
overflow-y:auto;
transform:translate3d(110%,0,0);
pointer-events:none;
transition:transform .4s ease;
will-change:transform;
}
.hcmpheadermobile.active{
transform:translate3d(0,0,0);
pointer-events:auto;
}
/*==================================================
MOBILE MENU HEAD
==================================================*/
.hcmpheadermobilehead{
width:100%;
min-height:95px;
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
padding:15px 20px;
background:#ffffff;
border-bottom:1px solid #e5eaf0;
}
.hcmpheadermobilelogo{
display:flex;
align-items:center;
}
.hcmpheadermobilelogo img{
display:block !important;
width:auto;
max-width:185px;
max-height:65px;
object-fit:contain;
}
.hcmpheaderclose{
width:45px;
height:45px;
min-width:45px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
background:#173d69;
color:#ffffff;
border:0;
border-radius:50%;
font-size:18px;
cursor:pointer;
transition:.3s ease;
}
.hcmpheaderclose:hover{
background:#e53935;
transform:rotate(90deg);
}
/*==================================================
MOBILE NAV
==================================================*/
.hcmpheadermobilenav{
width:100%;
flex:1;
padding:20px;
}
.hcmpheadermobilenav > ul{
width:100%;
margin:0;
padding:0;
list-style:none;
}
.hcmpheadermobilenav > ul > li{
width:100%;
margin:0 0 8px;
}
.hcmpheadermobilenav > ul > li > a,
.hcmpheadermobileservicetoggle{
width:100%;
min-height:56px;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 16px;
background:#f7f9fb;
color:#173d69;
border:1px solid #e3e9ef;
border-radius:8px;
text-decoration:none;
font-family:"Poppins",sans-serif;
font-size:15px;
font-weight:600;
line-height:1.4;
text-align:left;
cursor:pointer;
transition:.3s ease;
}
.hcmpheadermobilenav > ul > li > a span,
.hcmpheadermobileservicetoggle span{
display:flex;
align-items:center;
gap:12px;
}
.hcmpheadermobilenav > ul > li > a span i,
.hcmpheadermobileservicetoggle span i{
width:24px;
color:#e53935;
font-size:16px;
text-align:center;
}
.hcmpheadermobilenav > ul > li > a:hover,
.hcmpheadermobileservicetoggle:hover,
.hcmpheadermobileservicetoggle.active{
background:#173d69;
color:#ffffff;
border-color:#173d69;
}
/*==================================================
MOBILE SUBMENU
==================================================*/
.hcmpheadermobilearrow{
margin-left:auto;
font-size:11px;
transition:transform .3s ease;
}
.hcmpheadermobileservicetoggle.active
.hcmpheadermobilearrow{
transform:rotate(180deg);
}
.hcmpheadermobilesubmenu{
width:100%;
max-height:0;
margin:0;
padding:0 12px;
list-style:none;
overflow:hidden;
opacity:0;
transition:
max-height .4s ease,
opacity .3s ease,
padding .4s ease;
}
.hcmpheadermobilesubmenu.active{
max-height:500px;
padding-top:9px;
padding-bottom:5px;
opacity:1;
}
.hcmpheadermobilesubmenu li{
margin:0 0 6px;
}
.hcmpheadermobilesubmenu li a{
display:block;
width:100%;
padding:13px 15px 13px 20px;
background:#f7f9fb;
color:#596979;
border-left:3px solid #e53935;
border-radius:0 7px 7px 0;
text-decoration:none;
font-size:13px;
font-weight:500;
text-transform:uppercase;
}
.hcmpheadermobilesubmenu li a:hover{
color:#e53935;
background:rgba(221,116,54,.10);
}
/*==================================================
MOBILE CONTACT
==================================================*/
.hcmpheadermobilecontact{
width:100%;
flex:0 0 auto;
margin-top:auto;
padding:25px 22px;
background:#173d69;
}
.hcmpheadermobilecontact span{
display:block;
margin-bottom:10px;
color:rgba(255,255,255,.72);
font-size:12px;
}
.hcmpheadermobilecontact a{
display:flex;
align-items:center;
gap:12px;
color:#ffffff;
text-decoration:none;
font-size:17px;
font-weight:700;
}
.hcmpheadermobilecontact a i{
width:42px;
height:42px;
min-width:42px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
border-radius:50%;
}
/*==================================================
STICKY HEADER
==================================================*/
.hcmpheader.hcmpheadersticky{
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
z-index:99990 !important;
width:100% !important;
background:#173d69 !important;
border-bottom:
1px solid rgba(255,255,255,.10) !important;
box-shadow:
0 10px 35px rgba(0,0,0,.20) !important;
animation:
hcmpStickyHeaderSlide .35s ease forwards;
}
.hcmpheader.hcmpheadersticky
.hcmpheaderlogo .hcmpheaderlogodark{
display:none !important;
}
.hcmpheader.hcmpheadersticky
.hcmpheaderlogo .hcmpheaderlogowhite{
display:block !important;
}
.hcmpheader.hcmpheadersticky
.hcmpheadernavlist > li > a{
color:#ffffff;
}
.hcmpheader.hcmpheadersticky
.hcmpheadernavlist > li > a:hover{
color:#e53935 !important;
}
.hcmpheader.hcmpheadersticky
.hcmpheadercall{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.20);
}
.hcmpheader.hcmpheadersticky
.hcmpheadercalltext{
color:#ffffff;
}
.hcmpheader.hcmpheadersticky
.hcmpheadercalltext small{
color:rgba(255,255,255,.70);
}
@keyframes hcmpheaderdrop{
from{
transform:translateY(-100%);
}
to{
transform:translateY(0);
}
}
/*==================================================
STICKY MOBILE TOGGLE
==================================================*/
.hcmpheader.hcmpheadersticky
.hcmpheadertoggle{
background:#e53935 !important;
box-shadow:
0 8px 22px rgba(0,0,0,.20) !important;
}
.hcmpheader.hcmpheadersticky
.hcmpheadertoggle span{
background:#ffffff !important;
}
.hcmpheader.hcmpheadersticky
.hcmpheadertoggle span:nth-child(2){
background:#173d69 !important;
}
/*==================================================
STICKY ANIMATION
==================================================*/
@keyframes hcmpStickyHeaderSlide{
from{
transform:translateY(-100%);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmptopbarcontainer,
.hcmpheadercontainer{
padding-left:22px;
padding-right:22px;
}
.hcmptopbarwrap{
gap:18px;
}
.hcmptopbarleft{
gap:15px;
}
.hcmptopbarphonetext{
font-size:12px;
}
.hcmptopbarservice,
.hcmptopbaremail{
font-size:11px;
}
.hcmpheaderwrap{
min-height:86px;
grid-template-columns:200px minmax(0,1fr) auto;
gap:18px;
}
.hcmpheaderlogo{
width:190px;
height:67px;
}
.hcmpheaderlogo .hcmpheaderlogodark,
.hcmpheaderlogo .hcmpheaderlogowhite{
max-width:185px;
max-height:63px;
}
.hcmpheadernavlist{
gap:0;
}
.hcmpheadernavlist > li > a{
min-height:86px;
padding:0 10px;
font-size:13px;
}
.hcmpheadercallicon{
width:44px;
height:44px;
min-width:44px;
}
.hcmpheadercalltext{
font-size:13px;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmptopbar{
min-height:62px;
}
.hcmptopbar::before{
width:52%;
}
.hcmptopbarwrap{
min-height:62px;
grid-template-columns:auto minmax(0,1fr) auto;
}
.hcmptopbaraltphone{
display:none;
}
.hcmptopbarservice{
display:none;
}
.hcmptopbardivider{
display:none;
}
.hcmptopbaremail{
font-size:11px;
}
.hcmpheadercontainer{
padding:0 20px;
}
.hcmpheaderwrap{
min-height:82px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}
.hcmpheaderlogo{
width:auto;
height:65px;
flex:1;
}
.hcmpheaderlogo .hcmpheaderlogodark,
.hcmpheaderlogo .hcmpheaderlogowhite{
max-width:200px;
max-height:62px;
}
.hcmpheadernav{
display:none !important;
}
.hcmpheaderright{
display:none !important;
}
.hcmpheadertoggle{
display:flex !important;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmptopbar{
min-height:64px;
}
.hcmptopbar::before{
display:none;
}
.hcmptopbarcontainer{
padding:0 14px;
}
.hcmptopbarwrap{
min-height:64px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
.hcmptopbarcenter{
display:none;
}
.hcmptopbarleft{
flex:1;
min-width:0;
}
.hcmptopbaraltphone{
display:none;
}
.hcmptopbarphoneicon{
width:38px;
height:38px;
min-width:38px;
color:#e53935;
background:rgba(221,116,54,.13);
border-color:rgba(221,116,54,.45);
}
.hcmptopbarphonetext{
font-size:14px;
}
.hcmptopbarphonetext small{
font-size:8px;
}
.hcmptopbarquote{
min-height:42px;
padding:10px 14px;
font-size:11px;
}
.hcmpheadercontainer{
padding:0 15px;
}
.hcmpheaderwrap{
min-height:75px;
gap:15px;
}
.hcmpheaderlogo{
height:58px;
}
.hcmpheaderlogo .hcmpheaderlogodark,
.hcmpheaderlogo .hcmpheaderlogowhite{
max-width:170px;
max-height:55px;
}
.hcmpheadertoggle{
width:46px;
height:46px;
min-width:46px;
}
.hcmpheadermobile{
width:350px;
max-width:90%;
}
.hcmpheadermobilehead{
min-height:88px;
padding:13px 17px;
}
.hcmpheadermobilelogo img{
max-width:160px;
max-height:58px;
}
.hcmpheadermobilenav{
padding:15px;
}
}
/*==================================================
VERY SMALL MOBILE
==================================================*/
@media screen and (max-width:380px){
.hcmptopbarcontainer{
padding:0 10px;
}
.hcmptopbarphoneicon{
width:33px;
height:33px;
min-width:33px;
font-size:11px;
}
.hcmptopbarphonetext{
font-size:12px;
}
.hcmptopbarquote{
padding:9px 10px;
font-size:10px;
}
.hcmpheaderlogo .hcmpheaderlogodark,
.hcmpheaderlogo .hcmpheaderlogowhite{
max-width:145px;
}
.hcmpheadertoggle{
width:43px;
height:43px;
min-width:43px;
}
.hcmpheadermobile{
width:100%;
max-width:94%;
}
}
/*==================================================
hcmp MOBILE MENU FINAL FIX
IMPORTANT - KEEP AT BOTTOM OF STYLE.CSS
==================================================*/
@media screen and (max-width:991px){
/* SHOW HAMBURGER */
.hcmpheadertoggle{
display:flex !important;
width:50px !important;
height:50px !important;
min-width:50px !important;
flex:0 0 50px !important;
align-items:center !important;
justify-content:center !important;
flex-direction:column !important;
gap:6px !important;
padding:0 !important;
margin:0 !important;
background:#173d69 !important;
border:0 !important;
border-radius:9px !important;
cursor:pointer !important;
position:relative !important;
z-index:99997 !important;
}
.hcmpheadertoggle span{
display:block !important;
width:24px !important;
height:3px !important;
margin:0 !important;
padding:0 !important;
background:#ffffff !important;
border-radius:50px !important;
}
.hcmpheadertoggle span:nth-child(2){
width:18px !important;
margin-left:6px !important;
background:#e53935 !important;
}
/* HIDE DESKTOP NAV */
.hcmpheadernav{
display:none !important;
}
.hcmpheaderright{
display:none !important;
}
/* MOBILE MENU */
.hcmpheadermobile{
position:fixed !important;
top:0 !important;
right:0 !important;
bottom:0 !important;
left:auto !important;
z-index:2147483646 !important;
width:380px !important;
max-width:90% !important;
height:100vh !important;
height:100dvh !important;
display:flex !important;
flex-direction:column !important;
background:#ffffff !important;
visibility:visible !important;
opacity:1 !important;
overflow-x:hidden !important;
overflow-y:auto !important;
transform:translate3d(110%,0,0) !important;
transition:transform .4s ease !important;
pointer-events:none !important;
box-shadow:-20px 0 60px rgba(0,0,0,.30) !important;
}
/* OPEN MOBILE MENU */
.hcmpheadermobile.active{
transform:translate3d(0,0,0) !important;
pointer-events:auto !important;
}
/* IMPORTANT - SHOW MOBILE NAV */
nav.hcmpheadermobilenav,
.hcmpheadermobilenav{
display:block !important;
width:100% !important;
visibility:visible !important;
opacity:1 !important;
position:relative !important;
flex:1 1 auto !important;
padding:20px !important;
}
.hcmpheadermobilenav > ul{
display:block !important;
width:100% !important;
margin:0 !important;
padding:0 !important;
list-style:none !important;
}
.hcmpheadermobilenav > ul > li{
display:block !important;
width:100% !important;
margin:0 0 8px !important;
padding:0 !important;
}
.hcmpheadermobilenav > ul > li > a{
display:flex !important;
width:100% !important;
min-height:56px !important;
align-items:center !important;
justify-content:space-between !important;
padding:14px 16px !important;
background:#f7f9fb !important;
color:#173d69 !important;
border:1px solid #e3e9ef !important;
border-radius:8px !important;
text-decoration:none !important;
font-family:"Poppins",sans-serif !important;
font-size:15px !important;
font-weight:600 !important;
text-transform:uppercase;
}
/* SERVICES BUTTON */
.hcmpheadermobileservicetoggle{
display:flex !important;
width:100% !important;
min-height:56px !important;
align-items:center !important;
justify-content:space-between !important;
padding:14px 16px !important;
background:#f7f9fb !important;
color:#173d69 !important;
border:1px solid #e3e9ef !important;
border-radius:8px !important;
font-family:"Poppins",sans-serif !important;
font-size:15px !important;
font-weight:600 !important;
cursor:pointer !important;
text-transform:uppercase;
}
/* OVERLAY */
.hcmpheaderoverlay{
position:fixed !important;
inset:0 !important;
z-index:2147483645 !important;
width:100% !important;
height:100vh !important;
height:100dvh !important;
display:block !important;
background:rgba(9,27,48,.75) !important;
opacity:0 !important;
visibility:hidden !important;
pointer-events:none !important;
transition:
opacity .35s ease,
visibility .35s ease !important;
}
.hcmpheaderoverlay.active{
opacity:1 !important;
visibility:visible !important;
pointer-events:auto !important;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:575px){
.hcmpheadermobile{
width:100% !important;
max-width:92% !important;
}
.hcmpheadertoggle{
width:46px !important;
height:46px !important;
min-width:46px !important;
flex-basis:46px !important;
}
.hcmpheadermobilenav{
padding:15px !important;
}
}
/*==================================================
hcmp NEW HOME SERVICES
==================================================*/
.hcmpnewservices,
.hcmpnewservices *{
box-sizing:border-box;
}
.hcmpnewservices{
position:relative;
width:100%;
padding:105px 0;
background:linear-gradient(
135deg,
#173d69 0%,
#1d4d86 55%,
#102f52 100%
);
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmpnewservices::before{
content:"";
position:absolute;
top:-250px;
right:-180px;
width:600px;
height:600px;
border:100px solid rgba(255,255,255,.025);
border-radius:50%;
}
.hcmpnewservices::after{
content:"";
position:absolute;
left:-100px;
bottom:-150px;
width:350px;
height:350px;
background:rgba(221,116,54,.05);
border-radius:50%;
}
/*==================================================
CONTAINER
==================================================*/
.hcmpnewservicescontainer{
position:relative;
z-index:2;
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/*==================================================
TOP
==================================================*/
.hcmpnewservicestop{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,.75fr);
align-items:end;
gap:90px;
margin-bottom:60px;
}
/*==================================================
TAG
==================================================*/
.hcmpnewservicestag{
display:inline-flex;
align-items:center;
gap:12px;
margin-bottom:20px;
color:#e53935;
font-size:15px;
font-weight:700;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1.2px;
}
.hcmpnewservicestag i{
width:43px;
height:43px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:7px;
font-size:17px;
}
/*==================================================
HEADING
==================================================*/
.hcmpnewservicesheading h2{
max-width:800px;
margin:0;
color:#ffffff;
font-size:50px;
font-weight:800;
line-height:1.18;
letter-spacing:-1.5px;
text-align:left;
}
.hcmpnewservicesheading h2 span{
display:block;
color:#ffc107;
}
/*==================================================
INTRO
==================================================*/
.hcmpnewservicesintro{
padding-left:25px;
border-left:3px solid #e53935;
text-align:left;
}
.hcmpnewservicesintro p{
margin:0 0 20px;
color:rgba(255,255,255,.72);
font-size:17px;
font-weight:400;
line-height:1.8;
}
.hcmpnewservicesintro > a{
display:inline-flex;
align-items:center;
gap:11px;
color:#ffffff;
text-decoration:none;
font-size:15px;
font-weight:700;
}
.hcmpnewservicesintro > a i{
color:#e53935;
transition:transform .3s ease;
}
.hcmpnewservicesintro > a:hover i{
transform:translateX(6px);
}
/*==================================================
GRID
==================================================*/
.hcmpnewservicesgrid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:20px;
}
/*==================================================
CARD
==================================================*/
.hcmpnewservicecard{
position:relative;
min-width:0;
min-height:530px;
display:flex;
flex-direction:column;
background:#ffffff;
border-radius:8px;
overflow:hidden;
transition:
transform .35s ease,
box-shadow .35s ease;
}
.hcmpnewservicecard:hover{
transform:translateY(-10px);
box-shadow:0 28px 60px rgba(0,0,0,.25);
}
/*==================================================
CARD TOP
==================================================*/
.hcmpnewservicehead{
position:relative;
min-height:125px;
display:flex;
align-items:flex-end;
padding:28px 27px 20px;
background:#f4f7fa;
border-bottom:1px solid #e5ebf0;
}
.hcmpnewservicehead::after{
content:"";
position:absolute;
top:0;
right:0;
width:70px;
height:5px;
background:#e53935;
transition:width .35s ease;
}
.hcmpnewservicecard:hover
.hcmpnewservicehead::after{
width:100%;
}
/*==================================================
NUMBER
==================================================*/
.hcmpnewservicenumber{
position:absolute;
top:16px;
right:22px;
color:rgba(23,61,105,.08);
font-size:55px;
font-weight:800;
line-height:1;
}
/*==================================================
ICON
==================================================*/
.hcmpnewserviceicon{
position:relative;
z-index:2;
width:72px;
height:72px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:8px;
font-size:28px;
box-shadow:0 12px 28px rgba(23,61,105,.22);
transition:
background .3s ease,
transform .3s ease;
}
.hcmpnewservicecard:hover
.hcmpnewserviceicon{
background:#e53935;
transform:rotate(-5deg);
}
/*==================================================
BODY
==================================================*/
.hcmpnewservicebody{
flex:1;
padding:27px;
text-align:left;
}
.hcmpnewservicebody h3{
margin:0 0 15px;
color:#173d69;
font-size:23px;
font-weight:750;
line-height:1.35;
}
.hcmpnewservicebody > p{
margin:0 0 24px;
color:#637586;
font-size:15px;
font-weight:400;
line-height:1.75;
}
/*==================================================
POINTS
==================================================*/
.hcmpnewservicepoints{
display:flex;
flex-direction:column;
gap:12px;
}
.hcmpnewservicepoints span{
display:flex;
align-items:flex-start;
gap:10px;
color:#344c63;
font-size:14px;
font-weight:600;
line-height:1.5;
}
.hcmpnewservicepoints span i{
width:22px;
height:22px;
min-width:22px;
display:flex;
align-items:center;
justify-content:center;
margin-top:0;
background:rgba(221,116,54,.12);
color:#e53935;
border-radius:50%;
font-size:9px;
}
/*==================================================
FOOTER
==================================================*/
.hcmpnewservicefooter{
padding:0 27px 27px;
}
.hcmpnewservicefooter > a{
width:100%;
min-height:52px;
display:flex;
align-items:center;
justify-content:space-between;
padding:11px 12px 11px 18px;
background:#f3f6f9;
color:#173d69;
border:1px solid #e3e9ef;
border-radius:6px;
text-decoration:none;
font-size:15px;
font-weight:700;
transition:.3s ease;
}
.hcmpnewservicefooter > a span{
width:35px;
height:35px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:5px;
font-size:13px;
transition:.3s ease;
}
.hcmpnewservicefooter > a:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
}
.hcmpnewservicefooter > a:hover span{
background:#e53935;
}
/*==================================================
BOTTOM CTA
==================================================*/
.hcmpnewservicescta{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:35px;
margin-top:35px;
padding:28px 32px;
background:#ffffff;
border-radius:8px;
overflow:hidden;
}
.hcmpnewservicescta::before{
content:"";
position:absolute;
top:0;
left:0;
width:6px;
height:100%;
background:#e53935;
}
.hcmpnewservicesctaleft{
display:flex;
align-items:center;
gap:18px;
}
.hcmpnewservicesctaicon{
width:65px;
height:65px;
min-width:65px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:8px;
font-size:25px;
}
.hcmpnewservicesctaleft span{
display:block;
margin-bottom:5px;
color:#173d69;
font-size:21px;
font-weight:750;
line-height:1.4;
}
.hcmpnewservicesctaleft p{
margin:0;
color:#687989;
font-size:15px;
line-height:1.6;
}
/*==================================================
CTA ACTIONS
==================================================*/
.hcmpnewservicesctaactions{
display:flex;
align-items:center;
gap:12px;
}
.hcmpnewservicescall,
.hcmpnewservicesquote{
min-height:55px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
padding:14px 22px;
border-radius:6px;
text-decoration:none;
white-space:nowrap;
font-size:15px;
font-weight:700;
transition:.3s ease;
}
.hcmpnewservicescall{
background:#eef3f7;
color:#173d69;
}
.hcmpnewservicescall:hover{
background:#173d69;
color:#ffffff;
}
.hcmpnewservicesquote{
background:#e53935;
color:#ffffff;
}
.hcmpnewservicesquote:hover{
background:#173d69;
color:#ffffff;
transform:translateY(-3px);
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmpnewservices{
padding:85px 0;
}
.hcmpnewservicestop{
gap:55px;
}
.hcmpnewservicesheading h2{
font-size:43px;
}
.hcmpnewservicesgrid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
}
.hcmpnewservicecard{
min-height:500px;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmpnewservices{
padding:75px 0;
}
.hcmpnewservicescontainer{
padding:0 30px;
}
.hcmpnewservicestop{
grid-template-columns:1fr;
gap:28px;
margin-bottom:45px;
}
.hcmpnewservicesheading h2{
max-width:720px;
font-size:43px;
}
.hcmpnewservicesintro{
max-width:750px;
}
.hcmpnewservicesgrid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hcmpnewservicecard{
min-height:510px;
}
.hcmpnewservicescta{
align-items:flex-start;
flex-direction:column;
}
.hcmpnewservicesctaactions{
padding-left:83px;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmpnewservices{
padding:60px 0;
}
.hcmpnewservicescontainer{
padding:0 18px;
}
.hcmpnewservicestop{
gap:22px;
margin-bottom:35px;
}
.hcmpnewservicestag{
margin-bottom:17px;
font-size:13px;
letter-spacing:.7px;
}
.hcmpnewservicesheading h2{
font-size:35px;
line-height:1.22;
letter-spacing:-.7px;
}
.hcmpnewservicesintro{
padding-left:18px;
}
.hcmpnewservicesintro p{
font-size:16px;
line-height:1.75;
}
.hcmpnewservicesgrid{
grid-template-columns:1fr;
gap:18px;
}
.hcmpnewservicecard{
min-height:auto;
}
.hcmpnewservicehead{
min-height:115px;
padding:25px 23px 18px;
}
.hcmpnewserviceicon{
width:65px;
height:65px;
font-size:24px;
}
.hcmpnewservicenumber{
font-size:48px;
}
.hcmpnewservicebody{
padding:24px 23px;
}
.hcmpnewservicebody h3{
font-size:23px;
}
.hcmpnewservicebody > p{
font-size:15px;
}
.hcmpnewservicefooter{
padding:0 23px 23px;
}
.hcmpnewservicescta{
gap:23px;
margin-top:25px;
padding:25px 23px;
}
.hcmpnewservicesctaleft{
align-items:flex-start;
}
.hcmpnewservicesctaleft span{
font-size:19px;
}
.hcmpnewservicesctaactions{
width:100%;
padding-left:0;
flex-direction:column;
}
.hcmpnewservicescall,
.hcmpnewservicesquote{
width:100%;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.hcmpnewservices{
padding:52px 0;
}
.hcmpnewservicescontainer{
padding:0 15px;
}
.hcmpnewservicestag{
font-size:12px;
}
.hcmpnewservicestag i{
width:39px;
height:39px;
font-size:15px;
}
.hcmpnewservicesheading h2{
font-size:30px;
line-height:1.25;
}
.hcmpnewservicesintro p{
font-size:15px;
}
.hcmpnewservicehead{
min-height:105px;
padding:22px 20px 17px;
}
.hcmpnewserviceicon{
width:60px;
height:60px;
font-size:22px;
}
.hcmpnewservicenumber{
top:17px;
right:19px;
font-size:44px;
}
.hcmpnewservicebody{
padding:22px 20px;
}
.hcmpnewservicebody h3{
font-size:21px;
}
.hcmpnewservicebody > p{
font-size:15px;
line-height:1.7;
}
.hcmpnewservicepoints span{
font-size:14px;
}
.hcmpnewservicefooter{
padding:0 20px 20px;
}
.hcmpnewservicescta{
padding:22px 20px;
}
.hcmpnewservicesctaleft{
gap:13px;
}
.hcmpnewservicesctaicon{
width:55px;
height:55px;
min-width:55px;
font-size:21px;
}
.hcmpnewservicesctaleft span{
font-size:18px;
}
.hcmpnewservicesctaleft p{
font-size:14px;
}
}
/*==================================================
hcmp HOME WHY CHOOSE US
PRIMARY : #173d69
ACCENT : #e53935
==================================================*/
.hcmpwhychoose,
.hcmpwhychoose *{
box-sizing:border-box;
}
.hcmpwhychoose{
position:relative;
width:100%;
padding:105px 0;
background:#ffffff;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmpwhychoose::before{
content:"";
position:absolute;
top:-180px;
left:-200px;
width:520px;
height:520px;
border:85px solid rgba(23,61,105,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpwhychoose::after{
content:"";
position:absolute;
right:-100px;
bottom:100px;
width:300px;
height:300px;
background:rgba(221,116,54,.04);
border-radius:50%;
pointer-events:none;
}
/*==================================================
CONTAINER
==================================================*/
.hcmpwhychoosecontainer{
position:relative;
z-index:2;
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/*==================================================
MAIN GRID
==================================================*/
.hcmpwhychoosegrid{
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
align-items:center;
gap:85px;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpwhychoosecontent{
width:100%;
text-align:left;
}
/*==================================================
TAG
==================================================*/
.hcmpwhychoosetag{
display:inline-flex;
align-items:center;
gap:12px;
margin-bottom:20px;
color:#e53935;
font-size:15px;
font-weight:700;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmpwhychoosetag i{
width:43px;
height:43px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(221,116,54,.12);
color:#e53935;
border-radius:7px;
font-size:18px;
}
/*==================================================
HEADING
==================================================*/
.hcmpwhychoosecontent h2{
max-width:650px;
margin:0 0 24px;
color:#173d69;
font-size:48px;
font-weight:800;
line-height:1.18;
letter-spacing:-1.4px;
text-align:left;
}
.hcmpwhychoosecontent h2 span{
display:block;
color:#e53935;
}
/*==================================================
CONTENT TEXT
==================================================*/
.hcmpwhychooselead{
max-width:670px;
margin:0 0 17px;
color:#3e5266;
font-size:18px;
font-weight:500;
line-height:1.8;
text-align:left;
}
.hcmpwhychoosedescription{
max-width:680px;
margin:0 0 32px;
color:#697a8a;
font-size:16px;
font-weight:400;
line-height:1.85;
text-align:left;
}
.hcmpwhychoosedescription strong{
color:#173d69;
font-weight:700;
}
/*==================================================
TRUST ROW
==================================================*/
.hcmpwhychoosetrust{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:15px;
margin-bottom:34px;
}
.hcmpwhychoosetrustitem{
display:flex;
align-items:center;
gap:14px;
min-width:0;
padding:17px;
background:#f6f8fa;
border:1px solid #e4eaf0;
border-radius:8px;
}
.hcmpwhychoosetrusticon{
width:49px;
height:49px;
min-width:49px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:7px;
font-size:19px;
}
.hcmpwhychoosetrustitem strong{
display:block;
margin-bottom:4px;
color:#173d69;
font-size:15px;
font-weight:700;
line-height:1.4;
}
.hcmpwhychoosetrustitem small{
display:block;
color:#748392;
font-size:12px;
font-weight:500;
line-height:1.5;
}
/*==================================================
ACTIONS
==================================================*/
.hcmpwhychooseactions{
display:flex;
align-items:center;
gap:25px;
}
/*==================================================
QUOTE BUTTON
==================================================*/
.hcmpwhychoosequote{
min-height:58px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:15px 25px;
background:#e53935;
color:#ffffff;
border:2px solid #e53935;
border-radius:7px;
text-decoration:none;
font-size:15px;
font-weight:700;
transition:.3s ease;
}
.hcmpwhychoosequote i{
transition:transform .3s ease;
}
.hcmpwhychoosequote:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
transform:translateY(-3px);
}
.hcmpwhychoosequote:hover i{
transform:translateX(5px);
}
/*==================================================
CALL
==================================================*/
.hcmpwhychoosecall{
display:flex;
align-items:center;
gap:12px;
color:#173d69;
text-decoration:none;
}
.hcmpwhychoosecall > span{
width:52px;
height:52px;
min-width:52px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(23,61,105,.08);
color:#173d69;
border-radius:50%;
font-size:18px;
}
.hcmpwhychoosecall small{
display:block;
margin-bottom:3px;
color:#788796;
font-size:12px;
font-weight:500;
}
.hcmpwhychoosecall strong{
display:block;
color:#173d69;
font-size:16px;
font-weight:700;
}
/*==================================================
BENEFIT GRID
==================================================*/
.hcmpwhychoosebenefits{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:20px;
}
/*==================================================
BENEFIT CARD
==================================================*/
.hcmpwhychoosecard{
position:relative;
min-height:275px;
padding:31px 28px;
background:#f6f8fa;
border:1px solid #e1e8ee;
border-radius:9px;
overflow:hidden;
text-align:left;
transition:
transform .35s ease,
background .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.hcmpwhychoosecard:nth-child(2),
.hcmpwhychoosecard:nth-child(4){
transform:translateY(35px);
}
.hcmpwhychoosecard:nth-child(2):hover,
.hcmpwhychoosecard:nth-child(4):hover{
transform:translateY(27px);
}
.hcmpwhychoosecard:hover{
transform:translateY(-8px);
background:#ffffff;
border-color:rgba(221,116,54,.45);
box-shadow:0 22px 50px rgba(23,61,105,.12);
}
.hcmpwhychoosecard::before{
content:"";
position:absolute;
left:0;
bottom:0;
width:0;
height:4px;
background:#e53935;
transition:width .4s ease;
}
.hcmpwhychoosecard:hover::before{
width:100%;
}
/*==================================================
CARD NUMBER
==================================================*/
.hcmpwhychoosenumber{
position:absolute;
top:20px;
right:22px;
color:rgba(23,61,105,.07);
font-size:52px;
font-weight:800;
line-height:1;
}
/*==================================================
CARD ICON
==================================================*/
.hcmpwhychoosecardicon{
position:relative;
z-index:2;
width:64px;
height:64px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:23px;
background:#173d69;
color:#ffffff;
border-radius:8px;
font-size:24px;
transition:
background .3s ease,
transform .3s ease;
}
.hcmpwhychoosecard:hover
.hcmpwhychoosecardicon{
background:#e53935;
transform:rotate(-5deg);
}
/*==================================================
CARD CONTENT
==================================================*/
.hcmpwhychoosecard h3{
position:relative;
z-index:2;
margin:0 0 12px;
color:#173d69;
font-size:20px;
font-weight:750;
line-height:1.4;
text-align:left;
}
.hcmpwhychoosecard p{
position:relative;
z-index:2;
margin:0;
color:#697989;
font-size:14px;
font-weight:400;
line-height:1.75;
text-align:left;
}
/*==================================================
PROCESS STRIP
==================================================*/
.hcmpwhychooseprocess{
position:relative;
display:grid;
grid-template-columns:1.25fr 1fr auto 1fr auto 1fr auto 1fr;
align-items:center;
gap:20px;
margin-top:95px;
padding:30px 32px;
background:#173d69;
border-radius:9px;
overflow:hidden;
}
.hcmpwhychooseprocess::after{
content:"";
position:absolute;
top:-100px;
right:-50px;
width:260px;
height:260px;
border:45px solid rgba(255,255,255,.035);
border-radius:50%;
}
/*==================================================
PROCESS INTRO
==================================================*/
.hcmpwhychooseprocessintro{
position:relative;
z-index:2;
padding-right:25px;
border-right:1px solid rgba(255,255,255,.18);
}
.hcmpwhychooseprocessintro span{
display:block;
margin-bottom:5px;
color:#e53935;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmpwhychooseprocessintro strong{
display:block;
color:#ffffff;
font-size:18px;
font-weight:700;
line-height:1.4;
}
/*==================================================
PROCESS STEP
==================================================*/
.hcmpwhychoosestep{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:11px;
}
.hcmpwhychoosestepnumber{
width:42px;
height:42px;
min-width:42px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:50%;
font-size:12px;
font-weight:800;
}
.hcmpwhychoosestep strong{
display:block;
margin-bottom:3px;
color:#ffffff;
font-size:14px;
font-weight:700;
}
.hcmpwhychoosestep small{
display:block;
color:rgba(255,255,255,.62);
font-size:11px;
line-height:1.4;
}
/*==================================================
ARROW
==================================================*/
.hcmpwhychoosearrow{
position:relative;
z-index:2;
color:#e53935;
font-size:15px;
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmpwhychoose{
padding:85px 0;
}
.hcmpwhychoosegrid{
gap:55px;
}
.hcmpwhychoosecontent h2{
font-size:41px;
}
.hcmpwhychoosetrust{
grid-template-columns:1fr;
}
.hcmpwhychooseactions{
align-items:flex-start;
flex-direction:column;
}
.hcmpwhychoosecard{
min-height:300px;
padding:27px 24px;
}
.hcmpwhychooseprocess{
grid-template-columns:1fr 1fr 1fr 1fr;
}
.hcmpwhychooseprocessintro{
grid-column:1 / -1;
padding:0 0 20px;
border-right:0;
border-bottom:1px solid rgba(255,255,255,.18);
}
.hcmpwhychoosearrow{
display:none;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmpwhychoose{
padding:75px 0;
}
.hcmpwhychoosecontainer{
padding:0 30px;
}
.hcmpwhychoosegrid{
grid-template-columns:1fr;
gap:60px;
}
.hcmpwhychoosecontent{
max-width:760px;
}
.hcmpwhychoosecontent h2{
max-width:700px;
font-size:43px;
}
.hcmpwhychoosetrust{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.hcmpwhychooseactions{
align-items:center;
flex-direction:row;
}
.hcmpwhychoosebenefits{
max-width:800px;
}
.hcmpwhychoosecard{
min-height:275px;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmpwhychoose{
padding:60px 0;
}
.hcmpwhychoosecontainer{
padding:0 18px;
}
.hcmpwhychoosegrid{
gap:42px;
}
.hcmpwhychoosetag{
margin-bottom:17px;
font-size:13px;
letter-spacing:.7px;
}
.hcmpwhychoosecontent h2{
margin-bottom:20px;
font-size:35px;
line-height:1.22;
letter-spacing:-.7px;
}
.hcmpwhychooselead{
font-size:17px;
line-height:1.75;
}
.hcmpwhychoosedescription{
margin-bottom:27px;
font-size:15px;
line-height:1.8;
}
.hcmpwhychoosetrust{
grid-template-columns:1fr;
gap:12px;
}
.hcmpwhychooseactions{
align-items:flex-start;
flex-direction:column;
gap:22px;
}
.hcmpwhychoosebenefits{
grid-template-columns:1fr;
gap:15px;
}
.hcmpwhychoosecard,
.hcmpwhychoosecard:nth-child(2),
.hcmpwhychoosecard:nth-child(4){
min-height:auto;
padding:26px 23px;
transform:none;
}
.hcmpwhychoosecard:hover,
.hcmpwhychoosecard:nth-child(2):hover,
.hcmpwhychoosecard:nth-child(4):hover{
transform:translateY(-5px);
}
.hcmpwhychoosecardicon{
width:60px;
height:60px;
margin-bottom:20px;
font-size:22px;
}
.hcmpwhychoosecard h3{
font-size:20px;
}
.hcmpwhychoosecard p{
font-size:14px;
}
.hcmpwhychooseprocess{
grid-template-columns:1fr 1fr;
gap:22px 15px;
margin-top:35px;
padding:25px 23px;
}
.hcmpwhychooseprocessintro{
grid-column:1 / -1;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.hcmpwhychoose{
padding:52px 0;
}
.hcmpwhychoosecontainer{
padding:0 15px;
}
.hcmpwhychoosetag{
font-size:12px;
}
.hcmpwhychoosetag i{
width:39px;
height:39px;
font-size:15px;
}
.hcmpwhychoosecontent h2{
font-size:30px;
line-height:1.25;
}
.hcmpwhychooselead{
font-size:16px;
}
.hcmpwhychoosedescription{
font-size:15px;
}
.hcmpwhychoosetrustitem{
padding:15px;
}
.hcmpwhychoosequote{
width:100%;
}
.hcmpwhychoosecard{
padding:23px 20px;
}
.hcmpwhychoosenumber{
top:18px;
right:18px;
font-size:44px;
}
.hcmpwhychoosecard h3{
font-size:19px;
}
.hcmpwhychooseprocess{
grid-template-columns:1fr;
padding:23px 20px;
}
.hcmpwhychooseprocessintro{
grid-column:auto;
}
.hcmpwhychoosestep{
padding:12px 0;
border-bottom:1px solid rgba(255,255,255,.10);
}
.hcmpwhychoosestep:last-child{
border-bottom:0;
}
.hcmpwhychoosestep strong{
font-size:15px;
}
.hcmpwhychoosestep small{
font-size:12px;
}
}
/*==================================================
hcmp HOME SURAT SERVICE AREAS
PRIMARY : #173d69
ACCENT : #e53935
==================================================*/
.hcmpsuratareas,
.hcmpsuratareas *{
box-sizing:border-box;
}
.hcmpsuratareas{
position:relative;
width:100%;
padding:105px 0;
background:#f5f7fa;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmpsuratareas::before{
content:"";
position:absolute;
top:-210px;
right:-180px;
width:520px;
height:520px;
border:85px solid rgba(23,61,105,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpsuratareas::after{
content:"";
position:absolute;
left:-100px;
bottom:-120px;
width:300px;
height:300px;
background:rgba(221,116,54,.045);
border-radius:50%;
pointer-events:none;
}
/*==================================================
CONTAINER
==================================================*/
.hcmpsuratareascontainer{
position:relative;
z-index:2;
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/*==================================================
MAIN LAYOUT
==================================================*/
.hcmpsuratareaslayout{
display:grid;
grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
align-items:center;
gap:80px;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpsuratareascontent{
width:100%;
text-align:left;
}
/*==================================================
SECTION TAG
==================================================*/
.hcmpsuratareastag{
display:inline-flex;
align-items:center;
gap:12px;
margin-bottom:20px;
color:#e53935;
font-size:15px;
font-weight:700;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmpsuratareastag i{
width:43px;
height:43px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(221,116,54,.12);
color:#e53935;
border-radius:7px;
font-size:18px;
}
/*==================================================
HEADING
==================================================*/
.hcmpsuratareascontent h2{
max-width:650px;
margin:0 0 24px;
color:#173d69;
font-size:49px;
font-weight:800;
line-height:1.18;
letter-spacing:-1.4px;
text-align:left;
}
.hcmpsuratareascontent h2 span{
display:block;
color:#e53935;
}
/*==================================================
CONTENT TEXT
==================================================*/
.hcmpsuratareaslead{
max-width:650px;
margin:0 0 17px;
color:#3f5367;
font-size:18px;
font-weight:500;
line-height:1.8;
text-align:left;
}
.hcmpsuratareasdescription{
max-width:650px;
margin:0 0 30px;
color:#697a8a;
font-size:16px;
font-weight:400;
line-height:1.85;
text-align:left;
}
/*==================================================
COVERAGE BOX
==================================================*/
.hcmpsuratareascoverage{
display:flex;
align-items:center;
gap:17px;
max-width:570px;
margin-bottom:32px;
padding:20px;
background:#ffffff;
border:1px solid #e1e8ee;
border-left:5px solid #e53935;
border-radius:8px;
box-shadow:0 14px 35px rgba(23,61,105,.07);
}
.hcmpsuratareascoverageicon{
width:60px;
height:60px;
min-width:60px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:8px;
font-size:23px;
}
.hcmpsuratareascoverage strong{
display:block;
margin-bottom:5px;
color:#173d69;
font-size:17px;
font-weight:700;
line-height:1.4;
}
.hcmpsuratareascoverage p{
margin:0;
color:#71808f;
font-size:14px;
font-weight:400;
line-height:1.6;
}
/*==================================================
ACTION BUTTONS
==================================================*/
.hcmpsuratareasactions{
display:flex;
align-items:center;
gap:14px;
}
.hcmpsuratareasquote,
.hcmpsuratareascall{
min-height:57px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
padding:14px 24px;
border-radius:7px;
text-decoration:none;
font-size:15px;
font-weight:700;
transition:.3s ease;
}
.hcmpsuratareasquote{
background:#e53935;
color:#ffffff;
border:2px solid #e53935;
}
.hcmpsuratareasquote i{
transition:transform .3s ease;
}
.hcmpsuratareasquote:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
text-decoration:none;
transform:translateY(-3px);
}
.hcmpsuratareasquote:hover i{
transform:translateX(5px);
}
.hcmpsuratareascall{
background:#ffffff;
color:#173d69;
border:2px solid #dce4eb;
}
.hcmpsuratareascall:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
text-decoration:none;
}
/*==================================================
RIGHT DIRECTORY
==================================================*/
.hcmpsuratareasdirectory{
position:relative;
width:100%;
padding:35px;
background:#173d69;
border-radius:12px;
box-shadow:0 25px 60px rgba(23,61,105,.22);
overflow:hidden;
}
.hcmpsuratareasdirectory::before{
content:"";
position:absolute;
top:-120px;
right:-100px;
width:300px;
height:300px;
border:50px solid rgba(255,255,255,.035);
border-radius:50%;
pointer-events:none;
}
/*==================================================
DIRECTORY HEADER
==================================================*/
.hcmpsuratareasdirectorytop{
position:relative;
z-index:2;
display:flex;
align-items:center;
gap:17px;
margin-bottom:28px;
padding-bottom:25px;
border-bottom:1px solid rgba(255,255,255,.14);
}
.hcmpsuratareasdirectoryicon{
width:64px;
height:64px;
min-width:64px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:9px;
font-size:25px;
}
.hcmpsuratareasdirectorytop span{
display:block;
margin-bottom:5px;
color:#e53935;
font-size:12px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmpsuratareasdirectorytop h3{
margin:0;
color:#ffffff;
font-size:25px;
font-weight:750;
line-height:1.4;
text-align:left;
}
/*==================================================
AREA LINKS GRID
==================================================*/
.hcmpsuratareaslist{
position:relative;
z-index:2;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:11px;
}
/*==================================================
AREA LINK
==================================================*/
.hcmpsuratareaitem{
min-width:0;
min-height:49px;
display:flex;
align-items:center;
gap:10px;
padding:11px 13px;
background:rgba(255,255,255,.07);
color:#ffffff;
border:1px solid rgba(255,255,255,.10);
border-radius:6px;
text-decoration:none;
font-size:14px;
font-weight:600;
line-height:1.4;
cursor:pointer;
transition:
background .3s ease,
border-color .3s ease,
color .3s ease,
transform .3s ease;
}
.hcmpsuratareaitem i{
color:#e53935;
font-size:12px;
transition:
color .3s ease,
transform .3s ease;
}
.hcmpsuratareaitem span{
min-width:0;
color:inherit;
}
/*==================================================
AREA LINK HOVER
==================================================*/
.hcmpsuratareaitem:hover{
background:#e53935;
border-color:#e53935;
color:#ffffff;
text-decoration:none;
transform:translateY(-3px);
}
.hcmpsuratareaitem:hover i{
color:#ffffff;
transform:translateX(3px);
}
/*==================================================
DIRECTORY BOTTOM
==================================================*/
.hcmpsuratareasdirectorybottom{
position:relative;
z-index:2;
display:flex;
align-items:flex-start;
gap:12px;
margin-top:25px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.14);
}
.hcmpsuratareasdirectorybottom i{
margin-top:4px;
color:#e53935;
font-size:17px;
}
.hcmpsuratareasdirectorybottom p{
margin:0;
color:rgba(255,255,255,.70);
font-size:14px;
font-weight:400;
line-height:1.7;
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmpsuratareas{
padding:85px 0;
}
.hcmpsuratareaslayout{
gap:55px;
}
.hcmpsuratareascontent h2{
font-size:42px;
}
.hcmpsuratareaslead{
font-size:17px;
}
.hcmpsuratareasdirectory{
padding:30px;
}
.hcmpsuratareaslist{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmpsuratareas{
padding:75px 0;
}
.hcmpsuratareascontainer{
padding:0 30px;
}
.hcmpsuratareaslayout{
grid-template-columns:1fr;
gap:55px;
}
.hcmpsuratareascontent{
max-width:760px;
}
.hcmpsuratareascontent h2{
max-width:700px;
font-size:43px;
}
.hcmpsuratareaslead{
font-size:18px;
}
.hcmpsuratareascoverage{
max-width:650px;
}
.hcmpsuratareasdirectory{
max-width:850px;
}
.hcmpsuratareaslist{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmpsuratareas{
padding:60px 0;
}
.hcmpsuratareascontainer{
padding:0 18px;
}
.hcmpsuratareaslayout{
gap:40px;
}
.hcmpsuratareastag{
margin-bottom:17px;
font-size:13px;
letter-spacing:.7px;
}
.hcmpsuratareascontent h2{
margin-bottom:20px;
font-size:35px;
line-height:1.22;
letter-spacing:-.7px;
}
.hcmpsuratareaslead{
font-size:17px;
line-height:1.75;
}
.hcmpsuratareasdescription{
margin-bottom:26px;
font-size:15px;
line-height:1.8;
}
.hcmpsuratareascoverage{
margin-bottom:27px;
padding:17px;
}
.hcmpsuratareascoverageicon{
width:55px;
height:55px;
min-width:55px;
font-size:21px;
}
.hcmpsuratareasactions{
align-items:stretch;
flex-direction:column;
}
.hcmpsuratareasquote,
.hcmpsuratareascall{
width:100%;
}
.hcmpsuratareasdirectory{
padding:27px 23px;
border-radius:9px;
}
.hcmpsuratareasdirectorytop{
align-items:flex-start;
}
.hcmpsuratareasdirectoryicon{
width:58px;
height:58px;
min-width:58px;
font-size:22px;
}
.hcmpsuratareasdirectorytop h3{
font-size:22px;
}
.hcmpsuratareaslist{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
.hcmpsuratareaitem{
min-height:48px;
padding:10px 11px;
font-size:13px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.hcmpsuratareas{
padding:52px 0;
}
.hcmpsuratareascontainer{
padding:0 15px;
}
.hcmpsuratareastag{
font-size:12px;
}
.hcmpsuratareastag i{
width:39px;
height:39px;
font-size:15px;
}
.hcmpsuratareascontent h2{
font-size:30px;
line-height:1.25;
}
.hcmpsuratareaslead{
font-size:16px;
}
.hcmpsuratareasdescription{
font-size:15px;
}
.hcmpsuratareascoverage{
align-items:flex-start;
gap:13px;
padding:15px;
}
.hcmpsuratareascoverageicon{
width:50px;
height:50px;
min-width:50px;
font-size:19px;
}
.hcmpsuratareascoverage strong{
font-size:15px;
}
.hcmpsuratareascoverage p{
font-size:13px;
}
.hcmpsuratareasdirectory{
padding:23px 18px;
}
.hcmpsuratareasdirectorytop{
gap:13px;
margin-bottom:22px;
padding-bottom:20px;
}
.hcmpsuratareasdirectoryicon{
width:52px;
height:52px;
min-width:52px;
font-size:20px;
}
.hcmpsuratareasdirectorytop span{
font-size:10px;
}
.hcmpsuratareasdirectorytop h3{
font-size:19px;
line-height:1.4;
}
.hcmpsuratareaslist{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.hcmpsuratareaitem{
min-height:46px;
gap:7px;
padding:9px;
font-size:12px;
}
.hcmpsuratareaitem i{
font-size:10px;
}
.hcmpsuratareasdirectorybottom p{
font-size:13px;
}
}
/*==================================================
VERY SMALL MOBILE
==================================================*/
@media screen and (max-width:360px){
.hcmpsuratareaslist{
grid-template-columns:1fr;
}
.hcmpsuratareaitem{
font-size:13px;
}
}
/*==================================================
hcmp HOME CTA SECTION
PRIMARY : #173d69
ACCENT : #e53935
==================================================*/
.hcmphomecta,
.hcmphomecta *{
box-sizing:border-box;
}
.hcmphomecta{
position:relative;
width:100%;
padding:95px 0;
background:#ffffff;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
/*==================================================
BACKGROUND DECORATION
==================================================*/
.hcmphomecta::before{
content:"";
position:absolute;
top:-220px;
left:-190px;
width:550px;
height:550px;
border:90px solid rgba(23,61,105,.035);
border-radius:50%;
pointer-events:none;
}
.hcmphomecta::after{
content:"";
position:absolute;
right:-100px;
bottom:-130px;
width:320px;
height:320px;
background:rgba(221,116,54,.05);
border-radius:50%;
pointer-events:none;
}
/*==================================================
CONTAINER
==================================================*/
.hcmphomectacontainer{
position:relative;
z-index:2;
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/*==================================================
CTA WRAPPER
==================================================*/
.hcmphomectawrap{
position:relative;
display:grid;
grid-template-columns:
minmax(0,1.1fr)
minmax(420px,.7fr);
align-items:center;
gap:70px;
padding:65px;
background:#173d69;
border-radius:14px;
overflow:hidden;
box-shadow:
0 30px 70px rgba(23,61,105,.22);
}
/*==================================================
WRAPPER DECORATION
==================================================*/
.hcmphomectawrap::before{
content:"";
position:absolute;
top:-190px;
right:280px;
width:500px;
height:500px;
border:80px solid rgba(255,255,255,.025);
border-radius:50%;
pointer-events:none;
}
.hcmphomectawrap::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:38%;
height:5px;
background:#e53935;
pointer-events:none;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmphomectacontent{
position:relative;
z-index:2;
width:100%;
text-align:left;
}
/*==================================================
TAG
==================================================*/
.hcmphomectatag{
display:inline-flex;
align-items:center;
gap:11px;
margin-bottom:20px;
color:#e53935;
font-size:15px;
font-weight:700;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmphomectatag i{
width:43px;
height:43px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:7px;
font-size:17px;
}
/*==================================================
HEADING
==================================================*/
.hcmphomectacontent h2{
max-width:720px;
margin:0 0 23px;
color:#ffffff;
font-size:52px;
font-weight:800;
line-height:1.16;
letter-spacing:-1.5px;
text-align:left;
}
.hcmphomectacontent h2 span{
display:block;
color:#ffc107;
}
/*==================================================
DESCRIPTION
==================================================*/
.hcmphomectacontent > p{
max-width:700px;
margin:0 0 29px;
color:rgba(255,255,255,.74);
font-size:17px;
font-weight:400;
line-height:1.8;
text-align:left;
}
/*==================================================
POINTS
==================================================*/
.hcmphomectapoints{
display:flex;
flex-direction:column;
gap:13px;
}
.hcmphomectapoints span{
display:flex;
align-items:center;
gap:11px;
color:#ffffff;
font-size:15px;
font-weight:600;
line-height:1.5;
}
.hcmphomectapoints span i{
color:#e53935;
font-size:17px;
}
/*==================================================
RIGHT ACTION PANEL
==================================================*/
.hcmphomectaaction{
position:relative;
z-index:3;
width:100%;
padding:37px 35px;
background:#ffffff;
border-radius:10px;
text-align:left;
box-shadow:
0 25px 55px rgba(0,0,0,.20);
}
/*==================================================
ACTION ICON
==================================================*/
.hcmphomectaactionicon{
width:68px;
height:68px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:22px;
background:#173d69;
color:#ffffff;
border-radius:9px;
font-size:26px;
box-shadow:
0 12px 28px rgba(23,61,105,.20);
}
/*==================================================
ACTION TAG
==================================================*/
.hcmphomectaactiontag{
display:block;
margin-bottom:8px;
color:#e53935;
font-size:12px;
font-weight:750;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1px;
}
/*==================================================
ACTION HEADING
==================================================*/
.hcmphomectaaction h3{
margin:0 0 14px;
color:#173d69;
font-size:28px;
font-weight:800;
line-height:1.35;
text-align:left;
}
/*==================================================
ACTION TEXT
==================================================*/
.hcmphomectaaction > p{
margin:0 0 25px;
color:#697a8a;
font-size:15px;
font-weight:400;
line-height:1.75;
text-align:left;
}
/*==================================================
BUTTONS
==================================================*/
.hcmphomectabuttons{
display:flex;
flex-direction:column;
gap:13px;
}
/*==================================================
QUOTE BUTTON
==================================================*/
.hcmphomectaquote{
width:100%;
min-height:58px;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
padding:14px 22px;
background:#e53935;
color:#ffffff;
border:2px solid #e53935;
border-radius:7px;
text-decoration:none;
font-size:16px;
font-weight:700;
transition:
background .3s ease,
border-color .3s ease,
transform .3s ease;
}
.hcmphomectaquote i{
transition:transform .3s ease;
}
.hcmphomectaquote:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
text-decoration:none;
transform:translateY(-3px);
}
.hcmphomectaquote:hover i{
transform:translateX(5px);
}
/*==================================================
CALL BUTTON
==================================================*/
.hcmphomectacall{
width:100%;
min-height:66px;
display:flex;
align-items:center;
gap:13px;
padding:10px 14px;
background:#f4f7fa;
color:#173d69;
border:1px solid #e0e7ed;
border-radius:7px;
text-decoration:none;
transition:
background .3s ease,
border-color .3s ease;
}
.hcmphomectacall > span{
width:45px;
height:45px;
min-width:45px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:7px;
font-size:17px;
transition:
background .3s ease,
transform .3s ease;
}
.hcmphomectacall small{
display:block;
margin-bottom:3px;
color:#7a8997;
font-size:11px;
font-weight:500;
line-height:1.3;
}
.hcmphomectacall strong{
display:block;
color:#173d69;
font-size:16px;
font-weight:750;
line-height:1.4;
}
.hcmphomectacall:hover{
background:#eef3f7;
border-color:#cdd8e2;
color:#173d69;
text-decoration:none;
}
.hcmphomectacall:hover > span{
background:#e53935;
transform:rotate(-5deg);
}
/*==================================================
HELP TEXT
==================================================*/
.hcmphomectahelp{
display:flex;
align-items:flex-start;
gap:9px;
margin-top:19px;
padding-top:17px;
border-top:1px solid #e2e8ed;
}
.hcmphomectahelp i{
margin-top:4px;
color:#e53935;
font-size:14px;
}
.hcmphomectahelp span{
color:#748493;
font-size:12px;
font-weight:400;
line-height:1.6;
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmphomecta{
padding:85px 0;
}
.hcmphomectawrap{
grid-template-columns:
minmax(0,1fr)
minmax(380px,.75fr);
gap:50px;
padding:52px;
}
.hcmphomectacontent h2{
font-size:44px;
}
.hcmphomectacontent > p{
font-size:16px;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmphomecta{
padding:75px 0;
}
.hcmphomectacontainer{
padding:0 30px;
}
.hcmphomectawrap{
grid-template-columns:1fr;
gap:45px;
padding:50px;
}
.hcmphomectacontent{
max-width:750px;
}
.hcmphomectacontent h2{
max-width:680px;
font-size:44px;
}
.hcmphomectacontent > p{
max-width:720px;
font-size:17px;
}
.hcmphomectaaction{
max-width:650px;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmphomecta{
padding:60px 0;
}
.hcmphomectacontainer{
padding:0 18px;
}
.hcmphomectawrap{
gap:37px;
padding:38px 25px;
border-radius:10px;
}
.hcmphomectatag{
margin-bottom:17px;
font-size:13px;
letter-spacing:.6px;
}
.hcmphomectatag i{
width:40px;
height:40px;
font-size:15px;
}
.hcmphomectacontent h2{
margin-bottom:20px;
font-size:36px;
line-height:1.22;
letter-spacing:-.7px;
}
.hcmphomectacontent > p{
margin-bottom:25px;
font-size:16px;
line-height:1.75;
}
.hcmphomectapoints span{
font-size:14px;
}
.hcmphomectaaction{
padding:30px 25px;
}
.hcmphomectaactionicon{
width:62px;
height:62px;
margin-bottom:20px;
font-size:23px;
}
.hcmphomectaaction h3{
font-size:25px;
}
.hcmphomectaaction > p{
font-size:15px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.hcmphomecta{
padding:52px 0;
}
.hcmphomectacontainer{
padding:0 15px;
}
.hcmphomectawrap{
padding:32px 18px;
}
.hcmphomectatag{
font-size:11px;
letter-spacing:.4px;
}
.hcmphomectatag i{
width:38px;
height:38px;
min-width:38px;
}
.hcmphomectacontent h2{
font-size:30px;
line-height:1.25;
}
.hcmphomectacontent > p{
font-size:15px;
}
.hcmphomectapoints{
gap:12px;
}
.hcmphomectapoints span{
align-items:flex-start;
font-size:14px;
}
.hcmphomectapoints span i{
margin-top:3px;
}
.hcmphomectaaction{
padding:25px 20px;
border-radius:8px;
}
.hcmphomectaactionicon{
width:57px;
height:57px;
font-size:21px;
}
.hcmphomectaactiontag{
font-size:11px;
}
.hcmphomectaaction h3{
font-size:22px;
line-height:1.4;
}
.hcmphomectaaction > p{
font-size:14px;
line-height:1.7;
}
.hcmphomectaquote{
min-height:55px;
font-size:15px;
}
.hcmphomectacall{
min-height:64px;
}
.hcmphomectacall strong{
font-size:15px;
}
}
/*==================================================
VERY SMALL MOBILE
==================================================*/
@media screen and (max-width:360px){
.hcmphomectawrap{
padding:28px 15px;
}
.hcmphomectacontent h2{
font-size:27px;
}
.hcmphomectaaction{
padding:22px 16px;
}
.hcmphomectacall{
padding:9px 10px;
}
.hcmphomectacall > span{
width:41px;
height:41px;
min-width:41px;
}
.hcmphomectacall strong{
font-size:14px;
}
}
/*==================================================
hcmp HOME MOVING APPROACH
PRIMARY : #173d69
ACCENT : #e53935
==================================================*/
.hcmpjourney,
.hcmpjourney *{
box-sizing:border-box;
}
.hcmpjourney{
position:relative;
width:100%;
padding:105px 0;
background:#f4f7fa;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
/*==================================================
BACKGROUND DESIGN
==================================================*/
.hcmpjourney::before{
content:"";
position:absolute;
top:-250px;
left:-280px;
width:650px;
height:650px;
border:80px solid rgba(23,61,105,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpjourney::after{
content:"";
position:absolute;
bottom:-170px;
right:-150px;
width:420px;
height:420px;
background:rgba(221,116,54,.045);
border-radius:50%;
pointer-events:none;
}
/*==================================================
CONTAINER
==================================================*/
.hcmpjourneycontainer{
position:relative;
z-index:2;
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/*==================================================
MAIN GRID
==================================================*/
.hcmpjourneygrid{
display:grid;
grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
align-items:start;
gap:145px;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmpjourneyleft{
position:sticky;
top:150px;
width:100%;
padding-top:5px;
text-align:left;
}
/*==================================================
TAG
==================================================*/
.hcmpjourneytag{
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px;
margin-bottom:25px;
padding:10px 19px;
background:#ffffff;
color:#173d69;
border:1px solid rgba(221,116,54,.45);
border-radius:50px;
font-size:14px;
font-weight:750;
line-height:1.4;
text-transform:uppercase;
letter-spacing:.6px;
}
.hcmpjourneytag i{
color:#e53935;
font-size:15px;
}
/*==================================================
HEADING
==================================================*/
.hcmpjourneyleft h2{
max-width:650px;
margin:0 0 30px;
color:#173d69;
font-size:52px;
font-weight:800;
line-height:1.18;
letter-spacing:-1.6px;
text-align:left;
}
.hcmpjourneyleft h2 span{
color:#e53935;
}
/*==================================================
CONTENT
==================================================*/
.hcmpjourneylead{
max-width:640px;
margin:0 0 20px;
color:#344b62;
font-size:18px;
font-weight:500;
line-height:1.9;
text-align:left;
}
.hcmpjourneytext{
max-width:640px;
margin:0 0 32px;
color:#687989;
font-size:16px;
font-weight:400;
line-height:1.9;
text-align:left;
}
/*==================================================
SERVICE PROMISE
==================================================*/
.hcmpjourneypromise{
position:relative;
display:flex;
align-items:flex-start;
gap:20px;
max-width:650px;
margin-bottom:31px;
padding:24px;
background:#ffffff;
border:1px solid #e1e7ed;
border-left:5px solid #e53935;
border-radius:9px;
box-shadow:0 15px 40px rgba(23,61,105,.07);
}
.hcmpjourneypromiseicon{
width:60px;
height:60px;
min-width:60px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:8px;
font-size:23px;
}
.hcmpjourneypromise span{
display:block;
margin-bottom:5px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmpjourneypromise h3{
margin:0 0 8px;
color:#173d69;
font-size:19px;
font-weight:750;
line-height:1.5;
}
.hcmpjourneypromise p{
margin:0;
color:#71808f;
font-size:14px;
font-weight:400;
line-height:1.7;
}
/*==================================================
LEFT BUTTONS
==================================================*/
.hcmpjourneyactions{
display:flex;
align-items:center;
gap:14px;
}
.hcmpjourneyquote,
.hcmpjourneycall{
min-height:57px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
padding:14px 24px;
border-radius:7px;
text-decoration:none;
font-size:15px;
font-weight:700;
transition:.3s ease;
}
.hcmpjourneyquote{
background:#e53935;
color:#ffffff;
border:2px solid #e53935;
}
.hcmpjourneyquote i{
transition:transform .3s ease;
}
.hcmpjourneyquote:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
text-decoration:none;
transform:translateY(-3px);
}
.hcmpjourneyquote:hover i{
transform:translateX(5px);
}
.hcmpjourneycall{
background:#ffffff;
color:#173d69;
border:2px solid #dce4eb;
}
.hcmpjourneycall:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
text-decoration:none;
}
/*==================================================
RIGHT STEPS
==================================================*/
.hcmpjourneyright{
position:relative;
width:100%;
display:flex;
flex-direction:column;
gap:25px;
}
/*==================================================
VERTICAL TIMELINE
==================================================*/
.hcmpjourneyright::before{
content:"";
position:absolute;
top:55px;
bottom:55px;
left:-59px;
width:2px;
background:rgba(221,116,54,.55);
}
/*==================================================
STEP
==================================================*/
.hcmpjourneystep{
position:relative;
width:100%;
}
/*==================================================
NUMBER
==================================================*/
.hcmpjourneynumber{
position:absolute;
top:50%;
left:-88px;
z-index:5;
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border:6px solid #f4f7fa;
border-radius:50%;
box-shadow:0 0 0 2px rgba(221,116,54,.18);
font-size:15px;
font-weight:800;
line-height:1;
transform:translateY(-50%);
}
/*==================================================
STEP CARD
==================================================*/
.hcmpjourneycard{
position:relative;
min-height:170px;
display:grid;
grid-template-columns:68px minmax(0,1fr);
align-items:start;
gap:22px;
padding:29px 31px;
background:#ffffff;
border:1px solid #e0e7ed;
border-radius:14px;
box-shadow:0 13px 35px rgba(23,61,105,.045);
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
.hcmpjourneycard::before{
content:"";
position:absolute;
top:0;
left:0;
width:4px;
height:0;
background:#e53935;
border-radius:14px 0 0 14px;
transition:height .35s ease;
}
.hcmpjourneystep:hover .hcmpjourneycard{
border-color:rgba(221,116,54,.32);
transform:translateX(8px);
box-shadow:0 20px 48px rgba(23,61,105,.10);
}
.hcmpjourneystep:hover .hcmpjourneycard::before{
height:100%;
}
/*==================================================
CARD ICON
==================================================*/
.hcmpjourneycardicon{
width:68px;
height:68px;
display:flex;
align-items:center;
justify-content:center;
background:#edf1f5;
color:#173d69;
border-radius:11px;
font-size:25px;
transition:
background .35s ease,
color .35s ease,
transform .35s ease;
}
.hcmpjourneystep:hover .hcmpjourneycardicon{
background:#173d69;
color:#ffffff;
transform:rotate(-4deg);
}
/*==================================================
CARD CONTENT
==================================================*/
.hcmpjourneycardcontent{
min-width:0;
padding-top:2px;
}
.hcmpjourneycardtag{
display:block;
margin-bottom:8px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmpjourneycardcontent h3{
margin:0 0 11px;
color:#173d69;
font-size:23px;
font-weight:750;
line-height:1.4;
text-align:left;
}
.hcmpjourneycardcontent p{
margin:0;
color:#697a8a;
font-size:15px;
font-weight:400;
line-height:1.75;
text-align:left;
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmpjourney{
padding:85px 0;
}
.hcmpjourneygrid{
gap:110px;
}
.hcmpjourneyleft h2{
font-size:44px;
}
.hcmpjourneylead{
font-size:17px;
}
.hcmpjourneyright::before{
left:-45px;
}
.hcmpjourneynumber{
left:-74px;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmpjourney{
padding:75px 0;
}
.hcmpjourneycontainer{
padding:0 30px;
}
.hcmpjourneygrid{
grid-template-columns:1fr;
gap:65px;
}
.hcmpjourneyleft{
position:relative;
top:auto;
max-width:800px;
}
.hcmpjourneyleft h2{
max-width:700px;
font-size:45px;
}
.hcmpjourneylead,
.hcmpjourneytext{
max-width:760px;
}
.hcmpjourneypromise{
max-width:760px;
}
.hcmpjourneyright{
padding-left:75px;
}
.hcmpjourneyright::before{
left:29px;
}
.hcmpjourneynumber{
left:-75px;
}
.hcmpjourneycard{
min-height:160px;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmpjourney{
padding:60px 0;
}
.hcmpjourneycontainer{
padding:0 18px;
}
.hcmpjourneygrid{
gap:48px;
}
.hcmpjourneytag{
min-height:41px;
margin-bottom:20px;
padding:9px 15px;
font-size:12px;
}
.hcmpjourneyleft h2{
margin-bottom:23px;
font-size:36px;
line-height:1.22;
letter-spacing:-.8px;
}
.hcmpjourneylead{
font-size:17px;
line-height:1.8;
}
.hcmpjourneytext{
font-size:15px;
line-height:1.8;
}
.hcmpjourneypromise{
gap:15px;
padding:20px;
}
.hcmpjourneypromiseicon{
width:55px;
height:55px;
min-width:55px;
font-size:21px;
}
.hcmpjourneyactions{
align-items:stretch;
flex-direction:column;
}
.hcmpjourneyquote,
.hcmpjourneycall{
width:100%;
}
/*==============================================
MOBILE TIMELINE
==============================================*/
.hcmpjourneyright{
gap:20px;
padding-left:0;
}
.hcmpjourneyright::before{
display:none;
}
.hcmpjourneystep{
padding-top:23px;
}
.hcmpjourneynumber{
top:0;
left:22px;
width:47px;
height:47px;
border:5px solid #f4f7fa;
font-size:12px;
transform:none;
}
.hcmpjourneycard{
min-height:0;
grid-template-columns:60px minmax(0,1fr);
gap:17px;
padding:35px 21px 24px;
border-radius:10px;
}
.hcmpjourneystep:hover .hcmpjourneycard{
transform:translateY(-4px);
}
.hcmpjourneycardicon{
width:60px;
height:60px;
border-radius:9px;
font-size:22px;
}
.hcmpjourneycardcontent h3{
font-size:21px;
}
.hcmpjourneycardcontent p{
font-size:14px;
line-height:1.7;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.hcmpjourney{
padding:52px 0;
}
.hcmpjourneycontainer{
padding:0 15px;
}
.hcmpjourneyleft h2{
font-size:30px;
line-height:1.25;
}
.hcmpjourneylead{
font-size:16px;
}
.hcmpjourneytext{
font-size:15px;
}
.hcmpjourneypromise{
align-items:flex-start;
padding:17px;
}
.hcmpjourneypromiseicon{
width:50px;
height:50px;
min-width:50px;
font-size:18px;
}
.hcmpjourneypromise h3{
font-size:16px;
}
.hcmpjourneypromise p{
font-size:13px;
}
.hcmpjourneystep{
padding-top:21px;
}
.hcmpjourneynumber{
left:18px;
width:43px;
height:43px;
font-size:11px;
}
.hcmpjourneycard{
display:block;
padding:35px 18px 22px;
}
.hcmpjourneycardicon{
width:57px;
height:57px;
margin-bottom:18px;
font-size:21px;
}
.hcmpjourneycardtag{
font-size:10px;
}
.hcmpjourneycardcontent h3{
font-size:20px;
}
.hcmpjourneycardcontent p{
font-size:14px;
}
}
/*==================================================
hcmp HOME TESTIMONIAL SLIDER
PRIMARY : #173d69
ACCENT : #e53935
==================================================*/
.hcmpreviews,
.hcmpreviews *{
box-sizing:border-box;
}
.hcmpreviews{
position:relative;
width:100%;
padding:105px 0;
background:#ffffff;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
.hcmpreviews::before{
content:"";
position:absolute;
top:-240px;
right:-220px;
width:600px;
height:600px;
border:90px solid rgba(23,61,105,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpreviews::after{
content:"";
position:absolute;
left:-100px;
bottom:-130px;
width:320px;
height:320px;
background:rgba(221,116,54,.045);
border-radius:50%;
pointer-events:none;
}
/*==================================================
CONTAINER
==================================================*/
.hcmpreviewscontainer{
position:relative;
z-index:2;
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/*==================================================
SECTION HEADING
==================================================*/
.hcmpreviewsheading{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(320px,.65fr);
align-items:end;
gap:70px;
margin-bottom:58px;
}
.hcmpreviewsheadingcontent{
min-width:0;
}
.hcmpreviewstag{
display:inline-flex;
align-items:center;
gap:11px;
margin-bottom:19px;
color:#e53935;
font-size:15px;
font-weight:700;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmpreviewstag i{
width:43px;
height:43px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(221,116,54,.12);
color:#e53935;
border-radius:7px;
font-size:17px;
}
.hcmpreviewsheading h2{
max-width:760px;
margin:0;
color:#173d69;
font-size:49px;
font-weight:800;
line-height:1.18;
letter-spacing:-1.4px;
text-align:left;
}
.hcmpreviewsheading h2 span{
display:block;
color:#e53935;
}
.hcmpreviewsheadingtext{
margin:0 0 5px;
color:#697a8a;
font-size:16px;
font-weight:400;
line-height:1.8;
text-align:left;
}
/*==================================================
SLIDER
==================================================*/
.hcmpreviewsslider{
width:100%;
overflow:hidden;
touch-action:pan-y;
}
.hcmpreviewstrack{
display:flex;
align-items:stretch;
gap:24px;
will-change:transform;
transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
/*==================================================
REVIEW CARD
==================================================*/
.hcmpreviewcard{
position:relative;
min-width:calc((100% - 48px) / 3);
flex:0 0 calc((100% - 48px) / 3);
min-height:360px;
display:flex;
flex-direction:column;
padding:32px;
background:#f5f7fa;
border:1px solid #e0e7ed;
border-radius:12px;
overflow:hidden;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;
}
.hcmpreviewcard::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#e53935;
transform:scaleX(0);
transform-origin:left;
transition:transform .35s ease;
}
.hcmpreviewcard::after{
content:"";
position:absolute;
right:-55px;
bottom:-65px;
width:160px;
height:160px;
border:30px solid rgba(23,61,105,.035);
border-radius:50%;
pointer-events:none;
}
.hcmpreviewcard:hover{
border-color:rgba(221,116,54,.30);
transform:translateY(-7px);
box-shadow:0 22px 50px rgba(23,61,105,.11);
}
.hcmpreviewcard:hover::before{
transform:scaleX(1);
}
/*==================================================
CARD TOP
==================================================*/
.hcmpreviewcardtop{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:26px;
}
.hcmpreviewquoteicon{
width:59px;
height:59px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:9px;
font-size:22px;
}
.hcmpreviewstars{
display:flex;
align-items:center;
gap:4px;
color:#e53935;
font-size:15px;
}
/*==================================================
REVIEW TEXT
==================================================*/
.hcmpreviewtext{
position:relative;
z-index:2;
flex:1 1 auto;
margin:0 0 30px;
color:#4f6274;
font-size:16px;
font-weight:400;
line-height:1.85;
text-align:left;
}
/*==================================================
CUSTOMER
==================================================*/
.hcmpreviewcustomer{
position:relative;
z-index:2;
display:grid;
grid-template-columns:55px minmax(0,1fr) auto;
align-items:center;
gap:14px;
padding-top:22px;
border-top:1px solid #dce4eb;
}
.hcmpreviewavatar{
width:55px;
height:55px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#ffffff;
border-radius:50%;
font-size:15px;
font-weight:800;
letter-spacing:.5px;
}
.hcmpreviewcustomerinfo{
min-width:0;
}
.hcmpreviewcustomerinfo h3{
margin:0 0 5px;
color:#173d69;
font-size:17px;
font-weight:750;
line-height:1.4;
text-align:left;
}
.hcmpreviewcustomerinfo span{
display:flex;
align-items:center;
gap:7px;
color:#758594;
font-size:12px;
font-weight:500;
line-height:1.5;
}
.hcmpreviewcustomerinfo span i{
color:#e53935;
}
.hcmpreviewverified{
color:#173d69;
font-size:20px;
}
/*==================================================
CONTROLS
==================================================*/
.hcmpreviewscontrols{
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
margin-top:38px;
}
/*==================================================
DOTS
==================================================*/
.hcmpreviewsdots{
display:flex;
align-items:center;
gap:8px;
}
.hcmpreviewsdot{
width:10px;
height:10px;
padding:0;
background:#cbd5de;
border:0;
border-radius:50px;
cursor:pointer;
transition:
width .3s ease,
background .3s ease;
}
.hcmpreviewsdot.active{
width:34px;
background:#e53935;
}
/*==================================================
ARROWS
==================================================*/
.hcmpreviewsarrows{
display:flex;
align-items:center;
gap:10px;
}
.hcmpreviewsprev,
.hcmpreviewsnext{
width:54px;
height:54px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
background:#ffffff;
color:#173d69;
border:2px solid #dce4eb;
border-radius:7px;
font-size:17px;
cursor:pointer;
transition:
background .3s ease,
border-color .3s ease,
color .3s ease,
transform .3s ease;
}
.hcmpreviewsprev:hover,
.hcmpreviewsnext:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
transform:translateY(-3px);
}
.hcmpreviewsnext{
background:#e53935;
border-color:#e53935;
color:#ffffff;
}
.hcmpreviewsnext:hover{
background:#173d69;
border-color:#173d69;
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmpreviews{
padding:85px 0;
}
.hcmpreviewsheading{
gap:50px;
}
.hcmpreviewsheading h2{
font-size:43px;
}
.hcmpreviewcard{
min-height:380px;
padding:27px;
}
.hcmpreviewtext{
font-size:15px;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmpreviews{
padding:75px 0;
}
.hcmpreviewscontainer{
padding:0 30px;
}
.hcmpreviewsheading{
grid-template-columns:1fr;
gap:20px;
margin-bottom:48px;
}
.hcmpreviewsheading h2{
max-width:700px;
font-size:43px;
}
.hcmpreviewsheadingtext{
max-width:720px;
font-size:16px;
}
.hcmpreviewcard{
min-width:calc((100% - 24px) / 2);
flex-basis:calc((100% - 24px) / 2);
min-height:365px;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmpreviews{
padding:60px 0;
}
.hcmpreviewscontainer{
padding:0 18px;
}
.hcmpreviewsheading{
margin-bottom:38px;
}
.hcmpreviewstag{
margin-bottom:17px;
font-size:13px;
letter-spacing:.7px;
}
.hcmpreviewsheading h2{
font-size:35px;
line-height:1.22;
letter-spacing:-.7px;
}
.hcmpreviewsheadingtext{
font-size:15px;
line-height:1.75;
}
.hcmpreviewstrack{
gap:16px;
}
.hcmpreviewcard{
min-width:100%;
flex-basis:100%;
min-height:350px;
padding:27px 24px;
border-radius:9px;
}
.hcmpreviewquoteicon{
width:55px;
height:55px;
font-size:20px;
}
.hcmpreviewtext{
font-size:15px;
line-height:1.8;
}
.hcmpreviewscontrols{
margin-top:28px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.hcmpreviews{
padding:52px 0;
}
.hcmpreviewscontainer{
padding:0 15px;
}
.hcmpreviewstag{
font-size:12px;
}
.hcmpreviewstag i{
width:39px;
height:39px;
font-size:15px;
}
.hcmpreviewsheading h2{
font-size:30px;
line-height:1.25;
}
.hcmpreviewcard{
min-height:365px;
padding:24px 20px;
}
.hcmpreviewcardtop{
margin-bottom:22px;
}
.hcmpreviewquoteicon{
width:50px;
height:50px;
font-size:18px;
}
.hcmpreviewstars{
gap:3px;
font-size:13px;
}
.hcmpreviewtext{
margin-bottom:25px;
font-size:14px;
}
.hcmpreviewcustomer{
grid-template-columns:50px minmax(0,1fr) auto;
gap:11px;
}
.hcmpreviewavatar{
width:50px;
height:50px;
font-size:13px;
}
.hcmpreviewcustomerinfo h3{
font-size:15px;
}
.hcmpreviewcustomerinfo span{
font-size:11px;
}
.hcmpreviewscontrols{
gap:15px;
}
.hcmpreviewsprev,
.hcmpreviewsnext{
width:48px;
height:48px;
}
}
/*==================================================
VERY SMALL MOBILE
==================================================*/
@media screen and (max-width:360px){
.hcmpreviewcustomer{
grid-template-columns:46px minmax(0,1fr);
}
.hcmpreviewverified{
display:none;
}
.hcmpreviewavatar{
width:46px;
height:46px;
}
}
/*==================================================
hcmp HOME CONTACT INFORMATION
PRIMARY COLOR : #173d69
ACCENT COLOR : #e53935
==================================================*/
.hcmphomecontact,
.hcmphomecontact *{
box-sizing:border-box;
}
.hcmphomecontact{
position:relative;
width:100%;
padding:105px 0;
background:#f4f7fa;
font-family:"Poppins",sans-serif;
overflow:hidden;
}
/*==================================================
BACKGROUND DESIGN
==================================================*/
.hcmphomecontact::before{
content:"";
position:absolute;
top:-240px;
left:-260px;
width:630px;
height:630px;
border:90px solid rgba(23,61,105,.035);
border-radius:50%;
pointer-events:none;
}
.hcmphomecontact::after{
content:"";
position:absolute;
right:-140px;
bottom:-160px;
width:390px;
height:390px;
background:rgba(221,116,54,.045);
border-radius:50%;
pointer-events:none;
}
/*==================================================
CONTAINER
==================================================*/
.hcmphomecontactcontainer{
position:relative;
z-index:2;
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/*==================================================
MAIN WRAPPER
==================================================*/
.hcmphomecontactwrap{
display:grid;
grid-template-columns:
minmax(0,.90fr)
minmax(0,1.10fr);
align-items:center;
gap:85px;
}
/*==================================================
LEFT CONTENT
==================================================*/
.hcmphomecontactleft{
width:100%;
min-width:0;
text-align:left;
}
/*==================================================
SECTION TAG
==================================================*/
.hcmphomecontacttag{
display:inline-flex;
align-items:center;
gap:10px;
min-height:44px;
margin-bottom:23px;
padding:10px 18px;
background:#ffffff;
color:#173d69;
border:1px solid rgba(221,116,54,.40);
border-radius:50px;
font-size:14px;
font-weight:700;
line-height:1.4;
text-transform:uppercase;
letter-spacing:.7px;
}
.hcmphomecontacttag i{
color:#e53935;
font-size:16px;
}
/*==================================================
MAIN HEADING
==================================================*/
.hcmphomecontactleft h2{
max-width:650px;
margin:0 0 25px;
color:#173d69;
font-size:50px;
font-weight:800;
line-height:1.18;
letter-spacing:-1.5px;
text-align:left;
}
.hcmphomecontactleft h2 span{
display:block;
color:#e53935;
}
/*==================================================
CONTENT
==================================================*/
.hcmphomecontactlead{
max-width:650px;
margin:0 0 18px;
color:#344c63;
font-size:18px;
font-weight:500;
line-height:1.85;
text-align:left;
}
.hcmphomecontacttext{
max-width:650px;
margin:0 0 30px;
color:#697a8a;
font-size:16px;
font-weight:400;
line-height:1.85;
text-align:left;
}
/*==================================================
MOVING SUPPORT BOX
==================================================*/
.hcmphomecontactsupport{
display:flex;
align-items:flex-start;
gap:19px;
max-width:650px;
margin-bottom:30px;
padding:24px;
background:#ffffff;
border:1px solid #dfe6ec;
border-left:5px solid #e53935;
border-radius:9px;
box-shadow:
0 15px 38px rgba(23,61,105,.065);
}
.hcmphomecontactsupporticon{
width:60px;
height:60px;
min-width:60px;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
color:#ffffff;
border-radius:8px;
font-size:23px;
}
.hcmphomecontactsupportcontent{
min-width:0;
}
.hcmphomecontactsupportcontent span{
display:block;
margin-bottom:5px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.4;
text-transform:uppercase;
letter-spacing:1px;
}
.hcmphomecontactsupportcontent h3{
margin:0 0 8px;
color:#173d69;
font-size:20px;
font-weight:700;
line-height:1.45;
}
.hcmphomecontactsupportcontent p{
margin:0;
color:#71818f;
font-size:14px;
font-weight:400;
line-height:1.7;
}
/*==================================================
ACTION BUTTONS
==================================================*/
.hcmphomecontactactions{
display:flex;
align-items:center;
gap:13px;
}
.hcmphomecontactcall,
.hcmphomecontactpage{
min-height:57px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:11px;
padding:14px 25px;
border-radius:7px;
text-decoration:none;
font-size:15px;
font-weight:700;
transition:
background .3s ease,
color .3s ease,
border-color .3s ease,
transform .3s ease;
}
/* CALL BUTTON */
.hcmphomecontactcall{
background:#e53935;
color:#ffffff;
border:2px solid #e53935;
}
.hcmphomecontactcall:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
text-decoration:none;
transform:translateY(-3px);
}
/* CONTACT BUTTON */
.hcmphomecontactpage{
background:#ffffff;
color:#173d69;
border:2px solid #dce4eb;
}
.hcmphomecontactpage i{
transition:transform .3s ease;
}
.hcmphomecontactpage:hover{
background:#173d69;
border-color:#173d69;
color:#ffffff;
text-decoration:none;
}
.hcmphomecontactpage:hover i{
transform:translateX(5px);
}
/*==================================================
RIGHT CONTACT PANEL
==================================================*/
.hcmphomecontactright{
position:relative;
width:100%;
min-width:0;
display:flex;
flex-direction:column;
gap:15px;
padding:27px;
background:#173d69;
border-radius:14px;
box-shadow:
0 30px 70px rgba(23,61,105,.20);
overflow:hidden;
}
.hcmphomecontactright::before{
content:"";
position:absolute;
top:-160px;
right:-130px;
width:400px;
height:400px;
border:65px solid rgba(255,255,255,.035);
border-radius:50%;
pointer-events:none;
}
/*==================================================
CONTACT ITEM
==================================================*/
.hcmphomecontactitem{
position:relative;
z-index:2;
width:100%;
min-width:0;
display:grid;
grid-template-columns:
64px
minmax(0,1fr)
43px;
align-items:center;
gap:18px;
min-height:128px;
padding:21px 23px;
background:#ffffff;
color:inherit;
border:1px solid rgba(255,255,255,.15);
border-radius:9px;
text-decoration:none;
transition:
transform .35s ease,
box-shadow .35s ease;
}
a.hcmphomecontactitem:hover{
color:inherit;
text-decoration:none;
transform:translateX(-7px);
box-shadow:
0 17px 38px rgba(0,0,0,.17);
}
/*==================================================
CONTACT ICON
==================================================*/
.hcmphomecontactitemicon{
width:64px;
height:64px;
min-width:64px;
display:flex;
align-items:center;
justify-content:center;
background:#edf2f6;
color:#173d69;
border-radius:9px;
font-size:23px;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}
a.hcmphomecontactitem:hover
.hcmphomecontactitemicon{
background:#e53935;
color:#ffffff;
transform:rotate(-5deg);
}
/*==================================================
CONTACT CONTENT
==================================================*/
.hcmphomecontactitemcontent{
width:100%;
min-width:0;
}
.hcmphomecontactitemcontent span{
display:block;
margin-bottom:5px;
color:#e53935;
font-size:11px;
font-weight:800;
line-height:1.4;
text-transform:uppercase;
letter-spacing:.8px;
}
.hcmphomecontactitemcontent h3{
width:100%;
min-width:0;
margin:0 0 7px;
color:#173d69;
font-size:21px;
font-weight:700;
line-height:1.4;
text-align:left;
overflow-wrap:anywhere;
}
.hcmphomecontactitemcontent p{
width:100%;
margin:0;
color:#6e7f8e;
font-size:14px;
font-weight:400;
line-height:1.65;
text-align:left;
overflow-wrap:anywhere;
}
/*==================================================
EMAIL
==================================================*/
.hcmphomecontactemail{
font-size:19px !important;
word-break:break-word;
overflow-wrap:anywhere;
}
/*==================================================
ADDRESS CARD
==================================================*/
.hcmphomecontactaddress{
min-height:155px;
}
/*==================================================
CONTACT ARROW
==================================================*/
.hcmphomecontactarrow{
width:43px;
height:43px;
min-width:43px;
display:flex;
align-items:center;
justify-content:center;
background:#f3f6f8;
color:#173d69;
border-radius:50%;
font-size:14px;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}
a.hcmphomecontactitem:hover
.hcmphomecontactarrow{
background:#173d69;
color:#ffffff;
transform:rotate(8deg);
}
/*==================================================
SERVICE HOURS
==================================================*/
.hcmphomecontacthours{
position:relative;
z-index:2;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:19px 23px;
background:#e53935;
border-radius:8px;
}
.hcmphomecontacthoursleft{
display:flex;
align-items:center;
gap:10px;
}
.hcmphomecontacthours i{
color:#ffffff;
font-size:18px;
}
.hcmphomecontacthours span{
color:#ffffff;
font-size:14px;
font-weight:600;
}
.hcmphomecontacthours strong{
color:#ffffff;
font-size:16px;
font-weight:700;
}
/*==================================================
SMALL DESKTOP
==================================================*/
@media screen and (max-width:1199px){
.hcmphomecontact{
padding:85px 0;
}
.hcmphomecontactwrap{
gap:55px;
}
.hcmphomecontactleft h2{
font-size:44px;
}
.hcmphomecontactright{
padding:22px;
}
.hcmphomecontactitem{
grid-template-columns:
60px
minmax(0,1fr)
40px;
gap:15px;
padding:20px;
}
.hcmphomecontactitemicon{
width:60px;
height:60px;
min-width:60px;
}
.hcmphomecontactemail{
font-size:17px !important;
}
}
/*==================================================
TABLET
==================================================*/
@media screen and (max-width:991px){
.hcmphomecontact{
padding:75px 0;
}
.hcmphomecontactcontainer{
padding:0 30px;
}
.hcmphomecontactwrap{
grid-template-columns:1fr;
gap:55px;
}
.hcmphomecontactleft{
max-width:800px;
}
.hcmphomecontactleft h2{
max-width:700px;
font-size:44px;
}
.hcmphomecontactlead,
.hcmphomecontacttext,
.hcmphomecontactsupport{
max-width:760px;
}
.hcmphomecontactright{
max-width:850px;
}
.hcmphomecontactemail{
font-size:20px !important;
}
}
/*==================================================
MOBILE
==================================================*/
@media screen and (max-width:767px){
.hcmphomecontact{
padding:60px 0;
}
.hcmphomecontactcontainer{
padding:0 18px;
}
.hcmphomecontactwrap{
gap:43px;
}
.hcmphomecontacttag{
min-height:41px;
margin-bottom:20px;
padding:9px 15px;
font-size:12px;
}
.hcmphomecontactleft h2{
margin-bottom:21px;
font-size:35px;
line-height:1.22;
letter-spacing:-.7px;
}
.hcmphomecontactlead{
font-size:17px;
line-height:1.8;
}
.hcmphomecontacttext{
font-size:15px;
line-height:1.8;
}
/* SUPPORT */
.hcmphomecontactsupport{
gap:15px;
padding:20px;
}
.hcmphomecontactsupporticon{
width:55px;
height:55px;
min-width:55px;
font-size:20px;
}
/* BUTTONS */
.hcmphomecontactactions{
align-items:stretch;
flex-direction:column;
}
.hcmphomecontactcall,
.hcmphomecontactpage{
width:100%;
}
/* RIGHT PANEL */
.hcmphomecontactright{
gap:13px;
padding:18px;
border-radius:10px;
}
.hcmphomecontactitem{
grid-template-columns:
57px
minmax(0,1fr)
40px;
gap:14px;
min-height:120px;
padding:19px;
}
.hcmphomecontactitemicon{
width:57px;
height:57px;
min-width:57px;
font-size:21px;
}
.hcmphomecontactitemcontent h3{
font-size:19px;
}
.hcmphomecontactemail{
font-size:17px !important;
}
.hcmphomecontactitemcontent p{
font-size:13px;
}
.hcmphomecontactaddress{
min-height:150px;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media screen and (max-width:480px){
.hcmphomecontact{
padding:52px 0;
}
.hcmphomecontactcontainer{
padding:0 15px;
}
.hcmphomecontactleft h2{
font-size:30px;
line-height:1.25;
}
.hcmphomecontactlead{
font-size:16px;
}
.hcmphomecontacttext{
font-size:15px;
}
/* SUPPORT BOX */
.hcmphomecontactsupport{
align-items:flex-start;
padding:17px;
}
.hcmphomecontactsupporticon{
width:50px;
height:50px;
min-width:50px;
font-size:18px;
}
.hcmphomecontactsupportcontent h3{
font-size:17px;
}
.hcmphomecontactsupportcontent p{
font-size:13px;
}
/* RIGHT PANEL */
.hcmphomecontactright{
padding:14px;
}
.hcmphomecontactitem{
grid-template-columns:
52px
minmax(0,1fr);
gap:13px;
min-height:0;
padding:18px 16px;
}
.hcmphomecontactitemicon{
width:52px;
height:52px;
min-width:52px;
font-size:19px;
}
.hcmphomecontactarrow{
display:none;
}
.hcmphomecontactitemcontent span{
font-size:10px;
}
.hcmphomecontactitemcontent h3{
font-size:17px;
line-height:1.5;
}
.hcmphomecontactemail{
font-size:15px !important;
line-height:1.6 !important;
}
.hcmphomecontactitemcontent p{
font-size:13px;
line-height:1.7;
}
.hcmphomecontactaddress{
min-height:0;
}
/* SERVICE HOURS */
.hcmphomecontacthours{
align-items:flex-start;
flex-direction:column;
gap:7px;
padding:17px;
}
.hcmphomecontacthours strong{
padding-left:28px;
font-size:15px;
}
}
/*==================================================
VERY SMALL MOBILE
==================================================*/
@media screen and (max-width:360px){
.hcmphomecontactsupport{
display:block;
}
.hcmphomecontactsupporticon{
margin-bottom:15px;
}
.hcmphomecontactitem{
display:block;
}
.hcmphomecontactitemicon{
margin-bottom:15px;
}
.hcmphomecontactemail{
font-size:14px !important;
}
}
/*==================================================
hcmp FLOATING CALL & WHATSAPP
==================================================*/
.hcmpfloatcontact{
position:fixed;
right:22px;
bottom:22px;
z-index:9999;
display:flex;
flex-direction:column;
gap:14px;
}
/* COMMON */
.hcmpfloatcall,
.hcmpfloatwhatsapp{
display:flex;
align-items:center;
min-width:235px;
padding:10px 18px 10px 10px;
border-radius:60px;
text-decoration:none;
font-family:Poppins,sans-serif;
box-shadow:
0 15px 35px rgba(0,0,0,.20);
transition:.35s;
overflow:hidden;
}
/* CALL */
.hcmpfloatcall{
background:#173d69;
color:#fff;
}
/* WHATSAPP */
.hcmpfloatwhatsapp{
background:#25D366;
color:#fff;
}
/* ICON */
.hcmpfloaticon{
width:52px;
height:52px;
min-width:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.18);
font-size:22px;
}
/* TEXT */
.hcmpfloattext{
margin-left:15px;
display:flex;
flex-direction:column;
}
.hcmpfloattext small{
font-size:12px;
font-weight:500;
opacity:.85;
line-height:1.3;
}
.hcmpfloattext strong{
font-size:17px;
font-weight:700;
line-height:1.4;
}
/* HOVER */
.hcmpfloatcall:hover{
background:#e53935;
color:#fff;
transform:translateX(-6px);
}
.hcmpfloatwhatsapp:hover{
background:#1fb857;
color:#fff;
transform:translateX(-6px);
}
.hcmpfloatcall:hover .hcmpfloaticon,
.hcmpfloatwhatsapp:hover .hcmpfloaticon{
transform:rotate(-12deg) scale(1.08);
transition:.3s;
}
/*==================================================
PHONE ANIMATION
==================================================*/
.hcmpfloatcall .hcmpfloaticon{
animation:hcmpcallpulse 1.5s infinite;
}
@keyframes hcmpcallpulse{
0%{
box-shadow:0 0 0 0 rgba(255,255,255,.45);
}
70%{
box-shadow:0 0 0 15px rgba(255,255,255,0);
}
100%{
box-shadow:0 0 0 0 rgba(255,255,255,0);
}
}
/*==================================================
WHATSAPP ANIMATION
==================================================*/
.hcmpfloatwhatsapp .hcmpfloaticon{
animation:hcmpwhatsapppulse 1.8s infinite;
}
@keyframes hcmpwhatsapppulse{
0%{
transform:scale(1);
}
50%{
transform:scale(1.12);
}
100%{
transform:scale(1);
}
}
/*==================================================
TABLET
==================================================*/
@media(max-width:991px){
.hcmpfloatcall,
.hcmpfloatwhatsapp{
min-width:200px;
}
.hcmpfloattext strong{
font-size:15px;
}
}
/*==================================================
MOBILE
==================================================*/
@media(max-width:767px){
.hcmpfloatcontact{
right:14px;
bottom:14px;
gap:10px;
}
.hcmpfloatcall,
.hcmpfloatwhatsapp{
min-width:auto;
width:58px;
height:58px;
padding:0;
justify-content:center;
border-radius:50%;
}
.hcmpfloaticon{
width:58px;
height:58px;
margin:0;
background:none;
font-size:24px;
}
.hcmpfloattext{
display:none;
}
}
/*==================================================
SMALL MOBILE
==================================================*/
@media(max-width:480px){
.hcmpfloatcall,
.hcmpfloatwhatsapp{
width:54px;
height:54px;
}
.hcmpfloaticon{
width:54px;
height:54px;
font-size:22px;
}
}
/*==================================================
hcmp MAP SECTION
==================================================*/
.hcmpmapsection{
padding:100px 0;
background:#f7f9fc;
font-family:Poppins,sans-serif;
}
.hcmpmapcontainer{
width:100%;
max-width:1400px;
margin:auto;
padding:0 20px;
}
/* HEADING */
.hcmpmapheading{
max-width:800px;
margin:auto;
text-align:center;
margin-bottom:60px;
}
.hcmpmaptag{
display:inline-flex;
align-items:center;
gap:10px;
background:#fff;
color:#e53935;
border:1px solid rgba(221,116,54,.3);
padding:10px 18px;
border-radius:40px;
font-weight:600;
margin-bottom:20px;
}
.hcmpmapheading h2{
font-size:48px;
color:#173d69;
font-weight:800;
margin-bottom:20px;
}
.hcmpmapheading h2 span{
color:#e53935;
}
.hcmpmapheading p{
font-size:17px;
line-height:1.9;
color:#687889;
}
/* GRID */
.hcmpmapwrapper{
display:grid;
grid-template-columns:380px 1fr;
gap:35px;
align-items:stretch;
}
/* INFO */
.hcmpmapinfo{
display:flex;
flex-direction:column;
gap:18px;
}
/* CARD */
.hcmpmapcard{
display:flex;
gap:18px;
padding:25px;
background:#fff;
border-radius:14px;
border-left:5px solid #e53935;
box-shadow:0 15px 35px rgba(0,0,0,.06);
transition:.35s;
}
.hcmpmapcard:hover{
transform:translateY(-6px);
}
.hcmpmapicon{
width:62px;
height:62px;
min-width:62px;
border-radius:12px;
background:#173d69;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
}
.hcmpmapcard h3{
font-size:22px;
color:#173d69;
margin-bottom:8px;
}
.hcmpmapcard p{
color:#667788;
line-height:1.8;
font-size:15px;
}
/* BUTTONS */
.hcmpmapbuttons{
display:flex;
gap:15px;
margin-top:10px;
}
.hcmpmapbuttons a{
flex:1;
text-align:center;
padding:16px;
border-radius:8px;
text-decoration:none;
font-weight:600;
transition:.35s;
}
.hcmpmapbuttons a:first-child{
background:#173d69;
color:#fff;
}
.hcmpmapbuttons a:last-child{
background:#e53935;
color:#fff;
}
.hcmpmapbuttons a:hover{
transform:translateY(-4px);
}
/* MAP */
.hcmpmapbox{
overflow:hidden;
border-radius:18px;
box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.hcmpmapbox iframe{
width:100%;
height:100%;
min-height:620px;
border:0;
display:block;
}
/*==========================
TABLET
==========================*/
@media(max-width:991px){
.hcmpmapsection{
padding:80px 0;
}
.hcmpmapwrapper{
grid-template-columns:1fr;
}
.hcmpmapheading h2{
font-size:40px;
}
.hcmpmapbox iframe{
min-height:500px;
}
}
/*==========================
MOBILE
==========================*/
@media(max-width:767px){
.hcmpmapsection{
padding:60px 0;
}
.hcmpmapcontainer{
padding:0 15px;
}
.hcmpmapheading{
margin-bottom:40px;
}
.hcmpmapheading h2{
font-size:32px;
}
.hcmpmapheading p{
font-size:15px;
}
.hcmpmapcard{
padding:18px;
}
.hcmpmapicon{
width:52px;
height:52px;
min-width:52px;
font-size:20px;
}
.hcmpmapcard h3{
font-size:18px;
}
.hcmpmapcard p{
font-size:14px;
}
.hcmpmapbuttons{
flex-direction:column;
}
.hcmpmapbox iframe{
min-height:350px;
}
}
/*==================================================
hcmp OFFICE MAP
==================================================*/
.hcmpofficemap{
position:relative;
width:100%;
padding:100px 0;
background:#ffffff;
}
.hcmpofficemapcontainer{
width:100%;
max-width:1400px;
margin:auto;
padding:0 25px;
}
.hcmpofficemapwrapper{
position:relative;
overflow:hidden;
border-radius:22px;
border:6px solid #fff;
background:#fff;
box-shadow:0 25px 60px rgba(23,61,105,.15);
}
/* Badge */
.hcmpofficemapbadge{
position:absolute;
top:25px;
left:25px;
z-index:5;
display:inline-flex;
align-items:center;
gap:12px;
padding:14px 22px;
background:#173d69;
color:#fff;
border-radius:50px;
font-family:Poppins,sans-serif;
font-size:15px;
font-weight:600;
box-shadow:0 15px 35px rgba(0,0,0,.20);
}
.hcmpofficemapbadge i{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
background:#e53935;
color:#fff;
border-radius:50%;
font-size:18px;
}
/* Map */
.hcmpofficemapwrapper iframe{
display:block;
width:100%;
height:620px;
border:0;
}
/*======================
Large Desktop
======================*/
@media(max-width:1199px){
.hcmpofficemapwrapper iframe{
height:560px;
}
}
/*======================
Tablet
======================*/
@media(max-width:991px){
.hcmpofficemap{
padding:80px 0;
}
.hcmpofficemapcontainer{
padding:0 20px;
}
.hcmpofficemapwrapper{
border-radius:16px;
}
.hcmpofficemapbadge{
top:18px;
left:18px;
padding:12px 18px;
font-size:14px;
}
.hcmpofficemapbadge i{
width:38px;
height:38px;
font-size:16px;
}
.hcmpofficemapwrapper iframe{
height:480px;
}
}
/*======================
Mobile
======================*/
@media(max-width:767px){
.hcmpofficemap{
padding:60px 0;
}
.hcmpofficemapcontainer{
padding:0 15px;
}
.hcmpofficemapwrapper{
border-radius:12px;
}
.hcmpofficemapbadge{
top:12px;
left:12px;
right:12px;
justify-content:center;
padding:10px 14px;
font-size:12px;
border-radius:8px;
}
.hcmpofficemapbadge i{
width:34px;
height:34px;
font-size:15px;
}
.hcmpofficemapwrapper iframe{
height:340px;
}
}
/*======================
Small Mobile
======================*/
@media(max-width:480px){
.hcmpofficemap{
padding:50px 0;
}
.hcmpofficemapbadge{
gap:8px;
font-size:11px;
}
.hcmpofficemapbadge i{
width:30px;
height:30px;
font-size:13px;
}
.hcmpofficemapwrapper iframe{
height:300px;
}
}
/*=========================================
EAGLE TRUST SECTION
=========================================*/
.eagletrust{
position:relative;
padding:100px 0;
background:#f7f9fc;
overflow:hidden;
}
.eagletrust::before{
content:"";
position:absolute;
width:320px;
height:320px;
border-radius:50%;
background:rgba(229,57,53,.05);
top:-150px;
left:-120px;
}
.eagletrust::after{
content:"";
position:absolute;
width:280px;
height:280px;
border-radius:50%;
background:rgba(255,193,7,.08);
bottom:-120px;
right:-120px;
}
.eaglecontainer{
max-width:1320px;
margin:auto;
padding:0 15px;
position:relative;
z-index:2;
}
/*=========================================
HEADING
=========================================*/
.eagletrustheading{
max-width:820px;
margin:0 auto 70px;
text-align:center;
}
.eagletrusttag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 30px;
background:#ffffff;
border:1px solid rgba(229,57,53,.15);
border-radius:50px;
color:#e53935;
font-size:14px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
box-shadow:0 8px 25px rgba(0,0,0,.05);
}
.eagletrustheading h2{
margin:25px 0 20px;
font-size:50px;
line-height:1.2;
font-weight:800;
color:#0e0f48;
}
.eagletrustheading h2 span{
display:block;
color:#e53935;
}
.eagletrustheading p{
font-size:17px;
line-height:1.9;
color:#666;
}
/*=========================================
GRID
=========================================*/
.eagletrustgrid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
/*=========================================
CARD
=========================================*/
.eagletrustcard{
background:#ffffff;
border-radius:22px;
padding:35px 30px;
text-align:center;
border:1px solid #eceff5;
box-shadow:0 15px 45px rgba(14,15,72,.06);
transition:.35s;
position:relative;
overflow:hidden;
}
.eagletrustcard::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:#e53935;
transform:scaleX(0);
transition:.35s;
}
.eagletrustcard:hover{
transform:translateY(-10px);
box-shadow:0 25px 60px rgba(14,15,72,.12);
}
.eagletrustcard:hover::before{
transform:scaleX(1);
}
/*=========================================
ICON
=========================================*/
.eagletrusticon{
width:90px;
height:90px;
margin:0 auto 25px;
border-radius:50%;
background:linear-gradient(135deg,#0e0f48,#24359d);
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
transition:.35s;
}
.eagletrustcard:hover .eagletrusticon{
background:#e53935;
transform:rotate(-10deg) scale(1.05);
}
/*=========================================
CONTENT
=========================================*/
.eagletrustcontent h3{
font-size:26px;
color:#0e0f48;
margin-bottom:18px;
font-weight:700;
line-height:1.3;
}
.eagletrustcontent p{
color:#666;
font-size:16px;
line-height:1.9;
margin:0;
}
.eagletrustcontent strong{
display:block;
margin-top:10px;
color:#e53935;
font-size:17px;
font-weight:700;
letter-spacing:1px;
}
/*=========================================
RESPONSIVE
=========================================*/
@media(max-width:1200px){
.eagletrustheading h2{
font-size:42px;
}
.eagletrustgrid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:991px){
.eagletrust{
padding:80px 0;
}
.eagletrustheading{
margin-bottom:50px;
}
.eagletrustheading h2{
font-size:36px;
}
}
@media(max-width:767px){
.eagletrust{
padding:70px 0;
}
.eagletrustheading{
text-align:center;
}
.eagletrustheading h2{
font-size:30px;
}
.eagletrustheading p{
font-size:15px;
}
.eagletrustgrid{
grid-template-columns:1fr;
gap:20px;
}
.eagletrustcard{
padding:30px 25px;
}
.eagletrusticon{
width:75px;
height:75px;
font-size:28px;
}
.eagletrustcontent h3{
font-size:22px;
}
}
@media(max-width:480px){
.eagletrust{
padding:60px 0;
}
.eagletrusttag{
width:100%;
font-size:12px;
letter-spacing:1px;
padding:10px 15px;
}
.eagletrustheading h2{
font-size:26px;
}
.eagletrustcontent h3{
font-size:20px;
}
.eagletrustcontent p{
font-size:14px;
}
.eagletrustcontent strong{
font-size:16px;
}
}
/*====================================================
Eagle International Packers & Movers - BREADCRUMB
====================================================*/
.hcmpmumbreadcrumb{
position:relative;
overflow:hidden;
padding:65px 0;
background:linear-gradient(135deg,#0a2d57 0%,#1d4d87 100%);
border-bottom:4px solid #ff3b30;
}
.hcmpmumbreadcrumb::before{
content:"";
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:55px 55px;
}
.hcmpmumbreadcrumb::after{
content:"";
position:absolute;
width:420px;
height:420px;
border-radius:50%;
background:rgba(255,255,255,.04);
top:-220px;
right:-180px;
}
.hcmpmumcontainer{
max-width:1320px;
margin:auto;
padding:0 15px;
position:relative;
z-index:2;
}
/*====================================================
WRAPPER
====================================================*/
.hcmpmumbreadcrumbwrapper{
display:grid;
grid-template-columns:1.45fr .75fr;
gap:45px;
align-items:center;
}
/*====================================================
LEFT
====================================================*/
.hcmpmumbreadtag{
display:inline-flex;
align-items:center;
gap:10px;
color:#ff3b30;
font-size:13px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:16px;
}
.hcmpmumbreadtag i{
font-size:15px;
}
.hcmpmumbreadleft h1{
font-size:52px;
font-weight:800;
color:#ffffff;
line-height:1.15;
margin-bottom:18px;
}
.hcmpmumbreadleft h1 span{
color:#ff3b30;
}
.hcmpmumbreadleft p{
max-width:650px;
color:rgba(255,255,255,.88);
font-size:17px;
line-height:1.8;
margin-bottom:28px;
}
/*====================================================
BREADCRUMB
====================================================*/
.hcmpmumbreadcrumbnav{
display:inline-flex;
align-items:center;
gap:15px;
list-style:none;
margin:0;
padding:14px 22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
border-radius:12px;
backdrop-filter:blur(10px);
}
.hcmpmumbreadcrumbnav li{
color:#ffffff;
font-size:15px;
font-weight:500;
}
.hcmpmumbreadcrumbnav li:last-child{
color:#ff3b30;
font-weight:700;
}
.hcmpmumbreadcrumbnav a{
color:#ffffff;
text-decoration:none;
display:flex;
align-items:center;
gap:8px;
transition:.3s;
}
.hcmpmumbreadcrumbnav a:hover{
color:#ff3b30;
}
/*====================================================
RIGHT CARD
====================================================*/
.hcmpmumbreadcard{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
border-top:4px solid #ff3b30;
border-radius:20px;
backdrop-filter:blur(18px);
padding:28px;
text-align:center;
transition:.35s;
}
.hcmpmumbreadcard:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.18);
}
.hcmpmumbreadcard span{
display:block;
color:#ff3b30;
font-size:12px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}
.hcmpmumbreadicon{
width:90px;
height:90px;
margin:18px auto;
border-radius:50%;
background:#ff3b30;
color:#ffffff;
display:flex;
align-items:center;
justify-content:center;
font-size:36px;
box-shadow:0 0 0 10px rgba(255,59,48,.18);
}
.hcmpmumbreadcard h3{
color:#ffffff;
font-size:28px;
font-weight:700;
margin-bottom:12px;
line-height:1.3;
}
.hcmpmumbreadcard p{
color:rgba(255,255,255,.82);
font-size:15px;
line-height:1.8;
margin:0;
}
/*====================================================
LAPTOP
====================================================*/
@media(max-width:1200px){
.hcmpmumbreadcrumb{
padding:60px 0;
}
.hcmpmumbreadcrumbwrapper{
gap:35px;
}
.hcmpmumbreadleft h1{
font-size:46px;
}
.hcmpmumbreadleft p{
font-size:16px;
}
.hcmpmumbreadcard{
padding:25px;
}
}
/*====================================================
TABLET
====================================================*/
@media(max-width:991px){
.hcmpmumbreadcrumb{
padding:55px 0;
}
.hcmpmumbreadcrumbwrapper{
grid-template-columns:1fr;
gap:35px;
}
.hcmpmumbreadleft{
text-align:center;
}
.hcmpmumbreadleft p{
margin:0 auto 25px;
}
.hcmpmumbreadcrumbnav{
justify-content:center;
}
.hcmpmumbreadright{
max-width:480px;
margin:auto;
width:100%;
}
.hcmpmumbreadleft h1{
font-size:40px;
}
}
/*====================================================
MOBILE
====================================================*/
@media(max-width:767px){
.hcmpmumbreadcrumb{
padding:45px 0;
}
.hcmpmumbreadtag{
font-size:12px;
letter-spacing:1px;
}
.hcmpmumbreadleft h1{
font-size:34px;
}
.hcmpmumbreadleft p{
font-size:15px;
line-height:1.7;
}
.hcmpmumbreadcrumbnav{
width:100%;
justify-content:center;
flex-wrap:wrap;
padding:12px 15px;
gap:12px;
}
.hcmpmumbreadcard{
padding:22px;
}
.hcmpmumbreadicon{
width:75px;
height:75px;
font-size:30px;
box-shadow:0 0 0 8px rgba(255,59,48,.18);
}
.hcmpmumbreadcard h3{
font-size:22px;
}
.hcmpmumbreadcard p{
font-size:14px;
}
}
/*====================================================
SMALL MOBILE
====================================================*/
@media(max-width:480px){
.hcmpmumbreadcrumb{
padding:38px 0;
}
.hcmpmumbreadleft h1{
font-size:30px;
}
.hcmpmumbreadleft p{
font-size:14px;
}
.hcmpmumbreadcard{
padding:20px 16px;
border-radius:16px;
}
.hcmpmumbreadicon{
width:65px;
height:65px;
font-size:26px;
}
.hcmpmumbreadcard h3{
font-size:20px;
}
.hcmpmumbreadcard p{
font-size:13px;
}
}
/*=========================================================
hcmp MUM GALLERY
=========================================================*/
.hcmpmumgallery{
padding:100px 0;
background:#f8f9fc;
}
.hcmpmumgallerycontainer{
width:100%;
max-width:1320px;
margin:auto;
padding:0 15px;
}
/*=========================================================
HEADING
=========================================================*/
.hcmpmumgalleryheading{
max-width:750px;
margin:0 auto 60px;
text-align:center;
}
.hcmpmumgallerytag{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 22px;
background:#ffe9e8;
color:#e53935;
border-radius:50px;
font-size:14px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
}
.hcmpmumgallerytitle{
margin-top:22px;
font-size:46px;
font-weight:800;
line-height:1.2;
color:#0e0f48;
}
.hcmpmumgallerytitle span{
color:#e53935;
}
.hcmpmumgallerydesc{
margin-top:18px;
font-size:17px;
line-height:1.8;
color:#666;
}
/*=========================================================
GRID
=========================================================*/
.hcmpmumgallerygrid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}
/*=========================================================
ITEM
=========================================================*/
.hcmpmumgalleryitem{
position:relative;
overflow:hidden;
border-radius:18px;
cursor:pointer;
background:#fff;
box-shadow:0 12px 35px rgba(0,0,0,.08);
}
.hcmpmumgalleryitem img{
width:100%;
height:280px;
object-fit:cover;
display:block;
transition:.6s;
}
/*=========================================================
OVERLAY
=========================================================*/
.hcmpmumgalleryoverlay{
position:absolute;
inset:0;
background:linear-gradient(to top,
rgba(14,15,72,.95),
rgba(14,15,72,.20));
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
padding:30px;
opacity:0;
transition:.45s;
}
.hcmpmumgalleryitem:hover .hcmpmumgalleryoverlay{
opacity:1;
}
.hcmpmumgalleryitem:hover img{
transform:scale(1.12);
}
.hcmpmumgalleryitem:hover{
transform:translateY(-8px);
transition:.4s;
}
/*=========================================================
ICON
=========================================================*/
.hcmpmumgalleryicon{
position:absolute;
top:22px;
right:22px;
width:58px;
height:58px;
border-radius:50%;
background:#e53935;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
transform:scale(.5);
transition:.35s;
}
.hcmpmumgalleryitem:hover .hcmpmumgalleryicon{
transform:scale(1);
}
/*=========================================================
TITLE
=========================================================*/
.hcmpmumgalleryoverlay h4{
color:#fff;
font-size:22px;
font-weight:700;
text-align:center;
margin:0;
}
/*=========================================================
POPUP
=========================================================*/
.hcmpmumgallerypopup{
position:fixed;
inset:0;
background:rgba(0,0,0,.94);
display:none;
justify-content:center;
align-items:center;
z-index:99999;
padding:30px;
}
.hcmpmumgallerypopup.active{
display:flex;
}
.hcmpmumgallerypopupimg{
max-width:90%;
max-height:85vh;
border-radius:12px;
box-shadow:0 20px 60px rgba(0,0,0,.35);
animation:hcmpmzoom .35s ease;
}
@keyframes hcmpmzoom{
from{
opacity:0;
transform:scale(.85);
}
to{
opacity:1;
transform:scale(1);
}
}
/*=========================================================
BUTTONS
=========================================================*/
.hcmpmumgalleryclose,
.hcmpmumgalleryprev,
.hcmpmumgallerynext{
position:absolute;
width:58px;
height:58px;
border:none;
border-radius:50%;
background:#ffffff;
color:#0e0f48;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
font-size:22px;
transition:.3s;
}
.hcmpmumgalleryclose:hover,
.hcmpmumgalleryprev:hover,
.hcmpmumgallerynext:hover{
background:#e53935;
color:#fff;
}
.hcmpmumgalleryclose{
top:35px;
right:35px;
}
.hcmpmumgalleryprev{
left:35px;
top:50%;
transform:translateY(-50%);
}
.hcmpmumgallerynext{
right:35px;
top:50%;
transform:translateY(-50%);
}
/*=========================================================
COUNTER
=========================================================*/
.hcmpmumgallerycounter{
position:absolute;
bottom:35px;
left:50%;
transform:translateX(-50%);
background:#ffffff;
padding:10px 24px;
border-radius:50px;
font-size:15px;
font-weight:700;
color:#0e0f48;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media(max-width:1199px){
.hcmpmumgallerygrid{
grid-template-columns:repeat(3,1fr);
}
.hcmpmumgallerytitle{
font-size:40px;
}
}
@media(max-width:991px){
.hcmpmumgallery{
padding:80px 0;
}
.hcmpmumgallerygrid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}
.hcmpmumgallerytitle{
font-size:36px;
}
.hcmpmumgalleryitem img{
height:250px;
}
}
@media(max-width:767px){
.hcmpmumgallery{
padding:70px 0;
}
.hcmpmumgalleryheading{
margin-bottom:40px;
}
.hcmpmumgallerytitle{
font-size:30px;
}
.hcmpmumgallerydesc{
font-size:15px;
}
.hcmpmumgallerygrid{
grid-template-columns:1fr;
}
.hcmpmumgalleryitem img{
height:260px;
}
.hcmpmumgalleryprev,
.hcmpmumgallerynext{
width:48px;
height:48px;
font-size:18px;
}
.hcmpmumgalleryclose{
top:20px;
right:20px;
}
.hcmpmumgalleryprev{
left:15px;
}
.hcmpmumgallerynext{
right:15px;
}
.hcmpmumgallerycounter{
bottom:20px;
font-size:14px;
}
}
/*==================================================
hcmp PREMIUM CTA
==================================================*/
.hcmpctasection{
position:relative;
padding:80px 0;
background:#f6f8fb;
}
.hcmpctawrapper{
max-width:980px;
margin:auto;
}
/*========================*/
.hcmpctabox{
position:relative;
display:flex;
align-items:center;
gap:28px;
padding:20px 25px;
background:linear-gradient(135deg,#26395d,#304f83);
border-radius:20px;
overflow:hidden;
text-decoration:none;
color:#fff;
box-shadow:0 18px 45px rgba(0,0,0,.18);
transition:.4s;
}
.hcmpctabox:hover{
transform:translateY(-8px);
box-shadow:0 25px 55px rgba(0,0,0,.25);
}
/* Shine */
.hcmpctabox::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:50%;
height:100%;
background:linear-gradient(120deg,transparent,rgba(255,255,255,.20),transparent);
transform:skewX(-25deg);
animation:hcmpshine 6s linear infinite;
}
/*========================*/
.hcmpctacall{
width:110px;
height:110px;
background:#fff;
border-radius:18px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
flex:none;
animation:hcmppulse 2s infinite;
}
.hcmpctacall span{
color:#ea1e00;
font-size:24px;
font-weight:800;
}
.hcmpctacall strong{
color:#111;
font-size:32px;
font-weight:800;
}
/*========================*/
.hcmpctacontent{
flex:1;
}
.hcmpctatitle{
margin:0 0 6px;
font-size:18px;
color:#ffd84d;
font-weight:600;
}
.hcmpctanumber{
font-size: 35px;
font-weight: 800;
letter-spacing: 0px;
margin: 0 0 0px;
/* animation: glow 1.5s infinite; */
color: #fff;
line-height: 45px;
font-family: 'Jost';
}
.hcmpctaline{
width:100%;
height:2px;
margin:10px 0;
background:rgba(255,255,255,.20);
}
.hcmpctatext{
margin:0;
color:#eef3ff;
font-size:15px;
line-height:1.8;
}
/*========================*/
.hcmpctaicon{
width:70px;
height:70px;
background:#f58220;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:28px;
flex:none;
animation:hcmppulse 2s infinite;
}
/*==================================================
PHONE NUMBER EFFECT
==================================================*/
.hcmpctanumber span{
display: inline-block;
color: #fff;
animation: popLoop 3s ease-in-out infinite;
}
/* Delay */
.hcmpctanumber span:nth-child(1) { animation-delay: 0.4s; }
.hcmpctanumber span:nth-child(2) { animation-delay: 0.5s; }
.hcmpctanumber span:nth-child(3) { animation-delay: 0.6s; }
.hcmpctanumber span:nth-child(4) { animation-delay: 0.7s; }
.hcmpctanumber span:nth-child(5) { animation-delay: 0.8s; }
.hcmpctanumber span:nth-child(6) { animation-delay: 0.9s; }
.hcmpctanumber span:nth-child(7) { animation-delay: 1s; }
.hcmpctanumber span:nth-child(8) { animation-delay: 1.1s; }
.hcmpctanumber span:nth-child(9) { animation-delay: 1.2s; }
.hcmpctanumber span:nth-child(10){ animation-delay: 1.3s; }
.hcmpctanumber span:nth-child(11){ animation-delay: 1.4s; }
.hcmpctanumber span:nth-child(12){ animation-delay: 1.5s; }
.hcmpctanumber span:nth-child(13){ animation-delay: 1.6s; }
/*==================================================
ANIMATIONS
==================================================*/
/* animation + 2s pause included */
@keyframes popLoop {
0% {
transform: scale(1);
}
15% {
transform: scale(1.5);
}
30% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
/*==================================================
RESPONSIVE
==================================================*/
@media(max-width:991px){
.hcmpctabox{
flex-direction:column;
text-align:center;
}
.hcmpctanumber{
justify-content:center;
font-size:36px;
}
}
@media(max-width:767px){
.hcmpctasection{
padding:60px 0;
}
.hcmpctabox{
padding:18px;
gap:18px;
}
.hcmpctacall{
width:85px;
height:85px;
}
.hcmpctacall span{
font-size:18px;
}
.hcmpctacall strong{
font-size:24px;
}
.hcmpctanumber{
font-size:26px;
justify-content:center;
}
.hcmpctatitle{
font-size:15px;
}
.hcmpctatext{
font-size:13px;
}
.hcmpctaicon{
width:55px;
height:55px;
font-size:20px;
}
}
/*=========================================
SOFT WHITE GLOW (NO COLOR CHANGE)
=========================================*/
@keyframes hcmpglow{
0%,
100%{
color:#fff;
text-shadow:none;
}
50%{
color:#fff;
text-shadow:
0 0 6px rgba(255,255,255,.45),
0 0 12px rgba(255,255,255,.30),
0 0 20px rgba(255,255,255,.18);
}
}
/*=====================================
CTA NUMBER
=====================================*/
/* Right content */
/*.cta-number {
font-size: 35px;
font-weight: 800;
letter-spacing: 0px;
margin: 0 0 0px;
color: #fff;
line-height: 45px;
font-family: 'Jost';
}*/
/* Animations */
/* @keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
@keyframes glow {
0% { text-shadow: 0 0 0 #fff; }
50% { text-shadow: 0 0 20px rgba(255,255,255,0.9); }
100% { text-shadow: 0 0 0 #fff; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}*/
/* Mobile responsive */
/*@media (max-width: 768px) {
.cta-number {
font-size: 20px;
letter-spacing: -1px;
line-height: 28px;
}
}
.cta-number span {
display: inline-block;
color: #fff;
animation: popLoop 3s ease-in-out infinite;
}*/
/* stagger delay (same as tumne diya) */
/*.cta-number span:nth-child(1) { animation-delay: 0.4s; }
.cta-number span:nth-child(2) { animation-delay: 0.5s; }
.cta-number span:nth-child(3) { animation-delay: 0.6s; }
.cta-number span:nth-child(4) { animation-delay: 0.7s; }
.cta-number span:nth-child(5) { animation-delay: 0.8s; }
.cta-number span:nth-child(6) { animation-delay: 0.9s; }
.cta-number span:nth-child(7) { animation-delay: 1s; }
.cta-number span:nth-child(8) { animation-delay: 1.1s; }
.cta-number span:nth-child(9) { animation-delay: 1.2s; }
.cta-number span:nth-child(10){ animation-delay: 1.3s; }
.cta-number span:nth-child(11){ animation-delay: 1.4s; }
.cta-number span:nth-child(12){ animation-delay: 1.5s; }
.cta-number span:nth-child(13){ animation-delay: 1.6s; }*/
/* animation + 2s pause included */
/* @keyframes popLoop {
0% {
transform: scale(1);
}
15% {
transform: scale(1.5);
}
30% {
transform: scale(1);
}
100% {
transform: scale(1);
}
}
*/
/*=========================================
SERVICES HERO SECTION
=========================================*/
.srvhero{
position:relative;
overflow:hidden;
padding:100px 0 90px;
background:linear-gradient(135deg,#163c6c 0%,#214f89 100%);
border-bottom:4px solid #ff432e;
}
/*=========================================
GRID EFFECT
=========================================*/
.srvhero-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
background-size:68px 68px;
pointer-events:none;
z-index:1;
}
/*=========================================
DECORATIVE SHAPES
=========================================*/
.srvhero::before{
content:"";
position:absolute;
width:380px;
height:380px;
border-radius:50%;
right:-170px;
top:-170px;
background:rgba(255,255,255,.05);
}
.srvhero::after{
content:"";
position:absolute;
width:260px;
height:260px;
border-radius:50%;
left:-120px;
bottom:-120px;
background:rgba(255,255,255,.03);
}
/*=========================================
LEFT CONTENT
=========================================*/
.srvhero-left{
position:relative;
z-index:5;
}
.srvhero-subtitle{
display:inline-flex;
align-items:center;
gap:10px;
color:#ff432e;
font-size:17px;
font-weight:700;
text-transform:uppercase;
letter-spacing:2px;
margin-bottom:25px;
}
.srvhero-subtitle i{
font-size:18px;
}
.srvhero-left h1{
font-size:72px;
line-height:1.05;
color:#fff;
margin:0;
font-weight:800;
font-family:'Jost',sans-serif;
}
.srvhero-left h1 span{
color:#ff432e;
}
.srvhero-left p{
margin:35px 0;
max-width:700px;
font-size:25px;
line-height:1.8;
color:rgba(255,255,255,.88);
}
/*=========================================
BREADCRUMB
=========================================*/
.srvhero-breadcrumb{
display:inline-flex;
align-items:center;
gap:18px;
list-style:none;
margin:0;
padding:18px 30px;
border-radius:60px;
background:rgba(255,255,255,.10);
backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.12);
}
.srvhero-breadcrumb li{
color:#fff;
font-size:18px;
font-weight:600;
}
.srvhero-breadcrumb a{
display:flex;
align-items:center;
gap:10px;
color:#fff;
text-decoration:none;
transition:.35s;
}
.srvhero-breadcrumb a:hover{
color:#ff432e;
}
.srvhero-breadcrumb li:last-child{
color:#ff432e;
}
/*=========================================
RIGHT CARD
=========================================*/
.srvhero-card{
position:relative;
z-index:5;
max-width:480px;
margin-left:auto;
text-align:center;
padding:45px;
border-radius:28px;
background:rgba(255,255,255,.10);
backdrop-filter:blur(18px);
border-top:4px solid #ff432e;
border-left:1px solid rgba(255,255,255,.10);
border-right:1px solid rgba(255,255,255,.10);
border-bottom:1px solid rgba(255,255,255,.10);
transition:.45s;
}
.srvhero-card:hover{
transform:translateY(-10px);
}
.srvhero-cardtop{
display:block;
color:#ff432e;
font-size:16px;
letter-spacing:3px;
font-weight:700;
margin-bottom:22px;
}
.srvhero-icon{
width:130px;
height:130px;
margin:auto;
border-radius:50%;
background:#ff432e;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 0 0 14px rgba(255,67,46,.15);
}
.srvhero-icon i{
color:#fff;
font-size:58px;
}
.srvhero-card h3{
margin:35px 0 18px;
color:#fff;
font-size:46px;
font-weight:700;
line-height:1.2;
}
.srvhero-card p{
margin:0;
color:rgba(255,255,255,.82);
font-size:23px;
line-height:1.8;
}
/*=========================================
CALL BOX
=========================================*/
.srvhero-call{
position:absolute;
right:80px;
bottom:-35px;
z-index:10;
display:flex;
align-items:center;
gap:16px;
padding:14px 28px 14px 14px;
border-radius:60px;
text-decoration:none;
background:#1d4373;
box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.srvhero-callicon{
width:74px;
height:74px;
border-radius:50%;
background:rgba(255,255,255,.12);
display:flex;
justify-content:center;
align-items:center;
}
.srvhero-callicon i{
color:#fff;
font-size:30px;
}
.srvhero-call small{
display:block;
color:#fff;
font-size:15px;
margin-bottom:4px;
}
.srvhero-call strong{
color:#fff;
font-size:34px;
font-weight:700;
}
/*=========================================
SERVICES SECTION
=========================================*/
.hcmpmumservicepagew{
padding:110px 0;
background:#f8fbff;
}
.hcmpmumservicepagewcontainer{
position:relative;
z-index:2;
max-width:1320px;
margin:auto;
padding:0 15px;
}
/*=========================================
HEADING
=========================================*/
.hcmpmumservicepagewheading{
width:100%;
max-width:100%;
margin:0 0 60px;
text-align:left;
}
.hcmpmumservicepagewheading span{
display:inline-block;
padding:10px 22px;
border-radius:40px;
background:rgba(229,57,53,.10);
color:#e53935;
font-size:14px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:18px;
}
.hcmpmumservicepagewheading h2{
width:100%;
margin:0 0 18px;
font-size:40px;
line-height:1.3;
color:#173d69;
font-weight:700;
}
.hcmpmumservicepagewheading strong{
display:block;
margin-top:8px;
color:#e53935;
font-weight:700;
}
.hcmpmumservicepagewheading p{
width:100%;
max-width:100%;
margin:0;
font-size:17px;
line-height:1.9;
color:#333;
}
/*=========================================
GRID
=========================================*/
.hcmpmumservicepagewgrid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
}
/*=========================================
CARD
=========================================*/
.hcmpmumservicepagewcard{
background:#fff;
border-radius:22px;
padding:40px;
border-top:4px solid #dd7436;
box-shadow:0 12px 40px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
transition:.45s;
height:100%;
}
/*=========================================
ICON
=========================================*/
.hcmpmumservicepagewicon{
width:90px;
height:90px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#173d69;
transition:.4s;
}
.hcmpmumservicepagewicon i{
color:#ffc107;
font-size:36px;
}
/*=========================================
TITLE
=========================================*/
.hcmpmumservicepagewcard h3{
font-size:25px;
color:#173d69;
margin-bottom:18px;
font-weight:700;
}
/*=========================================
DESCRIPTION
=========================================*/
.hcmpmumservicepagewcard p{
font-size:16px;
color:#666;
line-height:1.9;
margin-bottom:28px;
}
/*=========================================
FEATURE BADGES
=========================================*/
.hcmpmumservicepagewbadgebox{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:auto;
margin-bottom:28px;
}
.hcmpmumservicepagewbadgebox span{
padding:9px 16px;
border-radius:30px;
background:#fff8e1;
color:#173d69;
border:1px solid rgba(255,193,7,.45);
font-size:13px;
font-weight:600;
}
/*=========================================
BUTTON
=========================================*/
.hcmpmumservicepagewbtn{
display:inline-flex;
align-items:center;
gap:10px;
color:#173d69;
font-size:15px;
font-weight:700;
text-decoration:none;
transition:.4s;
}
.hcmpmumservicepagewbtn i{
transition:.4s;
}
/*=========================================
PREMIUM HOVER EFFECTS
=========================================*/
.hcmpmumservicepagewcard{
position:relative;
overflow:hidden;
}
.hcmpmumservicepagewcard::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:4px;
background:#173d69;
transform:scaleX(0);
transform-origin:left;
transition:.45s;
}
.hcmpmumservicepagewcard:hover{
transform:translateY(-12px);
border-top-color:#ffc107;
box-shadow:0 25px 55px rgba(23,61,105,.15);
}
.hcmpmumservicepagewcard:hover::before{
transform:scaleX(1);
}
.hcmpmumservicepagewcard:hover .hcmpmumservicepagewicon{
background:#e53935;
transform:rotate(-10deg) scale(1.08);
}
.hcmpmumservicepagewcard:hover .hcmpmumservicepagewicon i{
color:#fff;
}
.hcmpmumservicepagewicon{
transition:.45s;
}
.hcmpmumservicepagewbadgebox span{
transition:.35s;
}
.hcmpmumservicepagewbadgebox span:hover{
background:#ffc107;
color:#173d69;
}
.hcmpmumservicepagewbtn:hover{
color:#e53935;
}
.hcmpmumservicepagewbtn:hover i{
transform:translateX(8px);
}
/*=========================================
FADE-UP ANIMATION
=========================================*/
.hcmpmumservicepagewcard{
animation:hcmpmumservicepagewfade .8s ease;
}
@keyframes hcmpmumservicepagewfade{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/*=========================================
TABLET
=========================================*/
@media(max-width:991px){
.hcmpmumservicepagew{
padding:80px 0;
}
.hcmpmumservicepagewheading{
margin-bottom:50px;
}
.hcmpmumservicepagewheading h2{
font-size:34px;
}
.hcmpmumservicepagewheading p{
font-size:16px;
}
.hcmpmumservicepagewgrid{
grid-template-columns:repeat(2,1fr);
gap:25px;
}
.hcmpmumservicepagewcard{
padding:30px;
}
.hcmpmumservicepagewicon{
width:78px;
height:78px;
}
.hcmpmumservicepagewicon i{
font-size:30px;
}
.hcmpmumservicepagewcard h3{
font-size:22px;
}
.hcmpmumservicepagewcard p{
font-size:15px;
}
}
/*=========================================
MOBILE
=========================================*/
@media(max-width:767px){
.hcmpmumservicepagew{
padding:70px 0;
}
.hcmpmumservicepagewheading{
margin-bottom:40px;
}
.hcmpmumservicepagewheading span{
font-size:12px;
padding:8px 18px;
}
.hcmpmumservicepagewheading h2{
font-size:28px;
line-height:1.4;
}
.hcmpmumservicepagewheading p{
font-size:15px;
line-height:1.8;
}
.hcmpmumservicepagewgrid{
grid-template-columns:1fr;
gap:22px;
}
.hcmpmumservicepagewcard{
padding:28px;
}
.hcmpmumservicepagewicon{
width:72px;
height:72px;
margin-bottom:22px;
}
.hcmpmumservicepagewicon i{
font-size:28px;
}
.hcmpmumservicepagewcard h3{
font-size:22px;
}
.hcmpmumservicepagewcard p{
font-size:15px;
margin-bottom:22px;
}
.hcmpmumservicepagewbadgebox{
gap:10px;
margin-bottom:22px;
}
.hcmpmumservicepagewbadgebox span{
font-size:12px;
padding:8px 14px;
}
.hcmpmumservicepagewbtn{
font-size:15px;
}
}
/*=========================================
SMALL MOBILE
=========================================*/
@media(max-width:480px){
.hcmpmumservicepagew{
padding:60px 0;
}
.hcmpmumservicepagewheading h2{
font-size:24px;
}
.hcmpmumservicepagewheading p{
font-size:14px;
}
.hcmpmumservicepagewcard{
padding:24px;
border-radius:18px;
}
.hcmpmumservicepagewicon{
width:65px;
height:65px;
}
.hcmpmumservicepagewicon i{
font-size:24px;
}
.hcmpmumservicepagewcard h3{
font-size:20px;
}
.hcmpmumservicepagewcard p{
font-size:14px;
line-height:1.8;
}
.hcmpmumservicepagewbadgebox{
justify-content:center;
}
.hcmpmumservicepagewbtn{
justify-content:center;
}
}
/* =========================================
HINDUSTAN CARGO - ABOUT HERO / BREADCRUMB
Container: 1320px
========================================= */
.hcargo-about-hero {
position: relative;
overflow: hidden;
padding: 48px 0 45px;
background: linear-gradient(
135deg,
#081d46 0%,
#0d2b5c 55%,
#12396f 100%
);
color: #fff;
}
/* =========================================
CONTAINER
========================================= */
.hcargo-container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 20px;
position: relative;
z-index: 3;
}
/* =========================================
BACKGROUND DECORATION
========================================= */
.hcargo-about-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
}
.hcargo-about-orb-left {
width: 260px;
height: 260px;
left: -150px;
bottom: -160px;
border: 35px solid rgba(255, 255, 255, 0.035);
}
.hcargo-about-orb-right {
width: 360px;
height: 360px;
right: -190px;
top: -200px;
border: 55px solid rgba(229, 57, 53, 0.07);
}
/* =========================================
MAIN GRID
========================================= */
.hcargo-about-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 350px;
align-items: center;
gap: 75px;
}
/* =========================================
LEFT CONTENT
========================================= */
.hcargo-about-info {
width: 100%;
max-width: 780px;
}
.hcargo-about-label {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border-radius: 50px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.92);
font-size: 12px;
font-weight: 600;
line-height: 1.2;
}
.hcargo-about-label i {
color: #e53935;
font-size: 14px;
}
/* =========================================
HEADING
========================================= */
.hcargo-about-info h1 {
margin: 16px 0 10px;
color: #fff;
font-size: clamp(40px, 5vw, 58px);
line-height: 1.05;
letter-spacing: -1.5px;
font-weight: 800;
}
.hcargo-about-info h1 span {
color: #e53935;
}
/* =========================================
DESCRIPTION
========================================= */
.hcargo-about-info > p {
max-width: 650px;
margin: 0;
color: rgba(255, 255, 255, 0.76);
font-size: 15px;
line-height: 1.6;
}
/* =========================================
BREADCRUMB
========================================= */
.hcargo-about-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
font-size: 13px;
}
.hcargo-about-breadcrumb a {
display: inline-flex;
align-items: center;
gap: 6px;
color: #fff;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.hcargo-about-breadcrumb a:hover {
color: #e53935;
}
.hcargo-about-breadcrumb a i {
font-size: 12px;
}
.hcargo-about-breadcrumb > i {
color: rgba(255, 255, 255, 0.35);
font-size: 10px;
}
.hcargo-about-breadcrumb span {
color: rgba(255, 255, 255, 0.62);
font-weight: 500;
}
/* =========================================
RIGHT INFORMATION CARD
========================================= */
.hcargo-about-card {
width: 100%;
padding: 25px 24px;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 20px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}
/* =========================================
CARD ICON
========================================= */
.hcargo-about-card-icon {
width: 58px;
height: 58px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
border-radius: 15px;
background: #e53935;
box-shadow: 0 10px 25px rgba(229, 57, 53, 0.22);
}
.hcargo-about-card-icon i {
color: #fff;
font-size: 24px;
}
/* =========================================
CARD LABEL
========================================= */
.hcargo-about-card > span {
display: block;
margin-bottom: 7px;
color: rgba(255, 255, 255, 0.5);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.7px;
line-height: 1.3;
}
/* =========================================
CARD HEADING
========================================= */
.hcargo-about-card h3 {
margin: 0 0 8px;
color: #fff;
font-size: 21px;
line-height: 1.25;
font-weight: 750;
}
/* =========================================
CARD DESCRIPTION
========================================= */
.hcargo-about-card > p {
margin: 0 0 17px;
color: rgba(255, 255, 255, 0.68);
font-size: 13px;
line-height: 1.55;
}
/* =========================================
CARD POINTS
========================================= */
.hcargo-about-card-points {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.hcargo-about-card-points div {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.88);
font-size: 12px;
line-height: 1.4;
font-weight: 600;
}
.hcargo-about-card-points i {
flex-shrink: 0;
color: #e53935;
font-size: 12px;
}
/* =========================================
LARGE DESKTOP
========================================= */
@media (min-width: 1400px) {
.hcargo-about-hero {
padding: 52px 0 48px;
}
.hcargo-about-grid {
grid-template-columns: minmax(0, 1fr) 365px;
gap: 90px;
}
.hcargo-about-info h1 {
font-size: 60px;
}
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1050px) {
.hcargo-about-hero {
padding: 45px 0;
}
.hcargo-about-grid {
grid-template-columns: minmax(0, 1fr) 320px;
gap: 45px;
}
.hcargo-about-info h1 {
font-size: 48px;
}
.hcargo-about-info > p {
font-size: 14px;
}
.hcargo-about-card {
padding: 23px 21px;
}
}
/* =========================================
TABLET / SMALL LAPTOP
========================================= */
@media (max-width: 850px) {
.hcargo-about-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.hcargo-about-info {
max-width: 800px;
}
.hcargo-about-card {
max-width: 380px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.hcargo-about-hero {
padding: 38px 0 42px;
}
.hcargo-container {
padding: 0 18px;
}
.hcargo-about-grid {
display: block;
}
.hcargo-about-info {
max-width: 100%;
}
.hcargo-about-label {
padding: 7px 12px;
font-size: 11px;
}
.hcargo-about-label i {
font-size: 13px;
}
.hcargo-about-info h1 {
margin: 15px 0 9px;
font-size: 40px;
line-height: 1.05;
letter-spacing: -1px;
}
.hcargo-about-info > p {
font-size: 14px;
line-height: 1.6;
}
.hcargo-about-breadcrumb {
margin-top: 17px;
gap: 8px;
font-size: 12px;
}
.hcargo-about-card {
max-width: 100%;
margin-top: 30px;
padding: 23px 20px;
border-radius: 18px;
}
.hcargo-about-card-icon {
width: 54px;
height: 54px;
margin-bottom: 14px;
border-radius: 14px;
}
.hcargo-about-card-icon i {
font-size: 22px;
}
.hcargo-about-card h3 {
font-size: 20px;
}
.hcargo-about-card > p {
font-size: 12px;
}
.hcargo-about-orb-left {
width: 190px;
height: 190px;
left: -130px;
bottom: -130px;
border-width: 28px;
}
.hcargo-about-orb-right {
width: 240px;
height: 240px;
right: -150px;
top: -150px;
border-width: 40px;
}
}
/* =========================================
EXTRA SMALL MOBILE
========================================= */
@media (max-width: 400px) {
.hcargo-about-hero {
padding: 34px 0 38px;
}
.hcargo-container {
padding: 0 15px;
}
.hcargo-about-info h1 {
font-size: 36px;
}
.hcargo-about-label {
max-width: 100%;
font-size: 10px;
}
.hcargo-about-card {
margin-top: 26px;
padding: 21px 18px;
}
}