/* =================================================================
HIREKEY.IN — MAIN STYLESHEET (style.css)
Cleaned: duplicate & unused CSS removed.
Contains: Site CSS + Employer + Contact + Thank-You +
Navbar + Policy + About + Process + Packages + Jobs
================================================================= */
/* ── FONT IMPORTS (all fonts declared once, at top) ───────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');
/* ── CSS CUSTOM PROPERTIES (unified :root) ────────────────────── */
/* Variables for Employer / Contact / Thank-You pages */
/* Prefixed --ty- variables are Thank-You page specific */
:root {
/* ── Hirekey Brand Colours ── */
--primary: #0f3460;
--primary-light: #1a4f8a;
--accent: #e8580c;
--accent-light: #ff7a3d;
--gold: #f5a623;
--success: #16a34a;
/* ── Surface & Text ── */
--bg: #f4f7fb;
--bg-alt: #eef2f9;
--white: #ffffff;
--text: #1c2b42;
--muted: #5a6a82;
--border: #d6e0ef;
/* ── Shape & Elevation ── */
--radius: 12px;
--radius-lg: 20px;
--shadow-sm: 0 2px 12px rgba(15, 52, 96, .08);
--shadow-md: 0 6px 28px rgba(15, 52, 96, .13);
--shadow-lg: 0 16px 48px rgba(15, 52, 96, .18);
/* ── Typography ── */
--font-head: 'Sora', sans-serif;
--font-body: 'DM Sans', sans-serif;
/* ── Transition ── */
--tr: 0.28s cubic-bezier(.4, 0, .2, 1);
/* ── Thank-You Page Variables (--ty- prefix) ────────────── */
--ty-primary: #0f3460;
--ty-accent: #e8580c;
--ty-gold: #f5a623;
--ty-ok: #16a34a;
--ty-bg: #f4f7fb;
--ty-bg2: #eef2f9;
--ty-white: #ffffff;
--ty-text: #1c2b42;
--ty-muted: #5a6a82;
--ty-border: #d6e0ef;
--ty-r: 12px;
--ty-rl: 20px;
--ty-s1: 0 2px 12px rgba(15, 52, 96, .08);
--ty-s2: 0 6px 28px rgba(15, 52, 96, .13);
--ty-s3: 0 16px 48px rgba(15, 52, 96, .18);
--ty-fh: 'Sora', sans-serif;
--ty-fb: 'DM Sans', sans-serif;
--ty-tr: 0.26s cubic-bezier(.4, 0, .2, 1);
}
/* ================================================================= */
/* ── ORIGINAL SITE CSS ──────────────────────────────────────────── */
/* ================================================================= */
* {
padding: 0;
margin: 0;
}
body {
font-family: "Poppins", sans-serif !important;
background: #FFFDFC;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 0px;
}
a {
text-decoration: none;
}
.text-offblue {
color: #3C4D6B !important;
}
.form-control:focus,
.form-select:focus {
box-shadow: unset !important;
border-color: rgba(117, 123, 151, 0.50) !important;
}
.content-gap {
padding: 0px 56px;
}
.main-content {
background: #EEE;
padding: 24px 14px 22px 25px;
border-radius: 20px;
width: 100%;
}
.w-28 {
width: 100%;
max-width: 28%;
}
.w-72 {
width: 100%;
max-width: 72%;
}
#mobile-view,
.tab-view {
display: none;
}
/*------------------- Navigation style -------------------*/
.custom-navbar {
padding: 5px 56px;
}
.custom-navbar .nav-item .nav-link {
color: #303030;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.custom-navbar .dropdown-toggle::after {
border: 0px;
height: 7px;
width: 10px;
vertical-align: middle;
background: url("../img/down-arrow.webp");
}
.custom-navbar .navbar-brand {
margin-right: 92px;
}
.custom-navbar {
border-bottom: 1px solid #F3F3F3;
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
display: inline-block;
width: 100%;
}
.number {
color: #000;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-left: 12px;
}
.custom-btn {
display: inline-flex;
padding: 8px 20px;
align-items: center;
gap: 10px;
border: 1px solid #0060B4;
background: #FFF;
color: #0060B4;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.custom-btn-two {
display: inline-flex;
padding: 8px 20px;
align-items: center;
gap: 10px;
background: #0060B4;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
border: 1px solid #0060B4;
}
.right-navbar {
column-gap: 46px;
align-items: center;
}
.custom-navbar .dropdown-item {
padding: 13px 20px;
font-size: 14px;
font-weight: 500;
}
.custom-navbar .dropdown-item:focus,
.custom-navbar .dropdown-item:hover {
color: #0060B4;
background-color: #fff;
}
.custom-navbar .dropdown-menu {
border: 0;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}
.custom-navbar .nav-item .nav-link:hover {
color: #0060B4;
}
.other-info .custom-btn:hover {
background: #0060B4;
color: #FFF;
}
.other-info .custom-btn:hover svg path {
fill: #fff;
}
.other-info .custom-btn-two:hover {
background: #fff;
color: #0060B4;
border: 1px solid #0060B4;
}
.other-info .custom-btn-two:hover svg path {
stroke: #0060B4;
}
.other-info .custom-btn-two:hover svg path:last-child {
fill: #0060B4;
}
.other-info .custom-btn-two:hover svg line {
stroke: #0060B4;
}
/*------------------- Home Banner style -------------------*/
.banner {
background-image: url("../img/banner.webp");
background-position: center;
background-size: cover;
height: 82vh;
width: 100%;
background-repeat: no-repeat;
}
.banner-inner {
padding: 0px 56px;
}
.banner-inner .top-content {
height: 39px;
background-color: rgba(255, 75, 43, 0.10);
color: #FF4B2B;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
border-radius: 8px;
margin-bottom: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
}
.banner-title {
color: #3C4D6B;
font-size: 42px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-right: 6.5rem;
margin-bottom: 24px;
}
.banner-title span{
font-size: 36px;
display: block;
border-bottom: 4px dotted;
}
.banner-desc {
color: #778191;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-right: 3.5rem;
margin-bottom: 20px;
}
.banner-form {
border-radius: 10px;
border: 1px solid #0060B4;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 357px;
height: fit-content;
background-color: #fff;
padding: 24px;
}
.form-desc {
color: #03202E;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.21px;
margin-bottom: 21px;
}
.form-title {
color: #03202E;
font-size: 21px;
font-style: normal;
font-weight: 700;
line-height: 22px;
letter-spacing: 0.315px;
}
.banner-form .form-control {
height: 40px;
border-radius: 3px;
border: 1px solid #DDD;
background: #FCFCFC;
}
.banner-form .form-control::placeholder {
color: #A9A9A9;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 15px;
letter-spacing: 0.21px;
}
.banner-form .btn {
color: #03202E;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 15px;
letter-spacing: 0.21px;
border-radius: 3px 0px 0px 3px;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
border-left: 1px solid #DDD;
border-right: none;
background: #EAEAEA;
}
.banner-form .form-check label {
color: #03202E;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 24px;
letter-spacing: 0.21px;
cursor: pointer;
}
.banner-form .form-check-input:checked {
background-color: #0d6efd !important;
border-color: #fff !important;
outline: 2px solid #0d6efd !important;
border: 3.2px solid #fff !important;
}
.banner-form .form-check-input:checked[type=radio] {
--bs-form-check-bg-image: none !important;
}
.banner-form .form-check .form-check-input {
background-color: #a9a9a9;
border-color: #fff;
outline: 2px solid #a9a9a9;
border: 3.2px solid #fff;
cursor: pointer;
}
.banner-form .form-check-input:focus {
box-shadow: none !important;
}
.banner-form .custom-btn-two {
border-radius: 5px;
padding: 10px 36px;
border: none;
font-size: 16px;
font-style: normal;
font-weight: 600;
margin-top: 25px;
margin-bottom: 3px;
}
.banner-info {
margin-bottom: 35px;
}
.banner-button.btn-style-2.btn-size-md {
height: 45px;
}
.banner-btn .banner-button.btn-style-2 {
width: 200px;
}
.banner-button.btn-style-2 {
border-radius: 50px;
transform: translateZ(0);
overflow: hidden;
position: relative;
background: 0 0;
width: 265px;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border: none;
}
.banner-button.btn-style-2 .button__text {
background-color: #FF4B2B;
}
.banner-button.btn-style-2 .button__text {
background: #FF4B2B;
flex: 0 0 100%;
padding: 0 0 0 15px;
border-radius: 50px;
transition: 0.15s;
height: 100%;
display: flex;
align-items: center;
}
.banner-button.btn-style-2 .button__content {
background-color: #FF4B2B;
}
.banner-button.btn-style-2.btn-size-md .button__content {
width: 45px;
}
.banner-button.btn-style-2 .button__content {
background: #FF4B2B;
border-radius: 50px;
transition: 0.15s;
display: flex;
flex: 1;
align-items: center;
height: inherit;
justify-content: center;
position: absolute;
top: 0;
right: 0;
}
.banner-button.btn-style-2 .button__content .media-wrapper.icon-wrapper {
padding: 0 20px 0 0;
transition-duration: 100ms;
}
.banner-icon {
display: inline-block;
transition: 0.4s;
}
.banner-button.btn-style-2.btn-size-md:hover .button__text {
transform: translate(calc(-55px));
}
.banner-button.btn-style-2:hover .button__content .media-wrapper.icon-wrapper {
transform: translateX(10px);
}
.banner-button.btn-style-2.btn-size-md:hover .button__text span {
transform: translate(55px, 0);
}
.banner-button.btn-style-2 .button__text span {
display: block;
transition: 0.15s;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
.banner-form .btn:first-child:active,
:not(.btn-check)+.btn:active {
color: #000;
background-color: #EAEAEA;
border-color: unset;
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
border-left: 1px solid #DDD;
}
.banner-form .dropdown-toggle::after {
display: inline-block;
margin-left: .8em;
vertical-align: middle;
content: "";
border-top: .4em solid;
border-right: .4em solid transparent;
border-bottom: 0;
border-left: .4em solid transparent;
}
/*------------------- Home Our Client -------------------*/
.section-title h2 {
color: #3C4D6B;
text-align: center;
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 58px;
letter-spacing: 0.57px;
}
.section-desc p {
color: #778191;
text-align: center;
font-style: normal;
}
.client-logo {
margin-top: 25px;
}
.section-gap {
margin: 70px 0px;
}
.section-gap2 {
margin: 40px 0px;
}
/*------------------- Home About Section -------------------*/
.count-item {
width: 183px;
height: 174px;
border-radius: 5px;
background: #f2f2f2;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-bottom: 32px;
position: relative;
z-index: 9;
}
.about-us {
padding: 50px 56px 20px 56px;
position: relative;
}
.count-item img {
margin-bottom: 0px;
}
.count-item .count-title {
margin-bottom: 12px;
color: #3C4D6B;
text-align: center;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.count-item .count-desc {
color: #3C4D6B;
text-align: center;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.about-inner .about-title {
color: #3C4D6B;
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.57px;
margin-bottom: 27px;
}
.about-inner .about-desc {
color: #778191;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 13px;
text-align: justify;
}
.about-btn {
margin-top: 27px;
}
.about-us::after {
background-image: url("../img/about-bgIcon.webp");
content: "";
position: absolute;
top: 105px;
left: 0;
width: 269.343px;
height: 307.505px;
background-repeat: no-repeat;
}
/*------------------- Home Service Section -------------------*/
.service-btn .banner-button.btn-style-2 {
width: 161px;
}
.our-service .section-title h2,
.our-service .section-desc p {
text-align: start;
margin-right: 32px;
}
.our-service .banner-button.btn-style-2 .button__text {
background-color: #0060B4;
}
.our-service .banner-button.btn-style-2 .button__content {
background-color: #0060B4;
}
.service-slider {
padding-left: 65px;
}
.service-item {
position: relative;
perspective: 1000px;
width: 100%;
height: 350px!important;
cursor: pointer;
}
.service-wapper {
position: relative;
overflow: hidden;
z-index: 1;
transition: 0.7s;
width: 100%;
height: 100%
}
.service-inner {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
/*justify-content: space-between; */
border-radius: 10px;
padding: 32px 25px 32px 25px;
position: relative;
background-size: cover;
background-position: center;
background: #E0E8F0;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(255 255 255);
opacity: 0.8;
}
.service-title h2 {
color: #3C4D6B;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 26px;
transition-timing-function: cubic-bezier(.684, .007, .076, .995);
transition-property: font-size, color, background, width;
transition-duration: 1s;
padding:12px;
}
/* .service-icon-wapper {
margin-bottom: 50px;
} */
.service-icon {
display: inline-block;
transition: 0.4s;
}
.service-icon .icon {
transition-timing-function: cubic-bezier(.684, .007, .076, .995);
transition-property: font-size, color, background, width;
transition-duration: 1s;
}
.service-content p {
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.service-content {
position: relative;
width: 100%;
max-height: 0em;
transition: max-height 0.6s;
transition-timing-function: cubic-bezier(.684, .007, .076, .995);
}
.service-icon-wapper,
.servicebox-wrapper {
z-index: 1;
}
.servicebox-hover-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
overflow: hidden;
border-radius: 10px;
}
.servicebox-hover-bg {
background-color: #0060B4;
width: 100%;
height: 100%;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
transform: translate3d(0, 110%, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d;
transition: transform .8s cubic-bezier(.684, .007, .076, .995), clip-path .8s cubic-bezier(.684, .007, .076, .995);
will-change: transform;
opacity: 0.8;
}
.service-item:hover .servicebox-hover-wrapper .servicebox-hover-bg {
transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
border-radius: 10px;
}
.service-item:hover .service-inner .overlay {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.service-item:hover .service-content {
max-height: 30em;
transition: max-height 0.7s;
transition-timing-function: cubic-bezier(.684, .007, .076, .995);
border-radius: 10px;
}
.service-item:hover .service-icon .icon {
font-size: 55px;
color: #fff;
}
.service-item .service-icon .icon {
font-size: 60px;
color: #3C4D6B;
}
/* .service-item:hover .service-icon svg {
width: 45px;
} */
.service-item:hover .servicebox-wrapper .service-title h2 {
color: #fff;
}
.service-item:hover .servicebox-wrapper .service-title h2 a {
color: #fff;
}
.service-slider .owl-carousel .owl-nav button.owl-next,
.service-slider .owl-carousel .owl-nav button.owl-prev {
width: 46px;
height: 46px;
background: #0060B4 !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50px;
}
.service-slider .owl-carousel .owl-nav button.owl-next span,
.service-slider .owl-carousel .owl-nav button.owl-prev span {
font-size: 45px;
color: #fff;
height: 72px;
}
.service-slider .owl-theme .owl-nav {
margin-top: 24px !important;
text-align: start !important;
}
.our-service::after {
background-image: url("../img/service-bg.webp");
content: "";
position: absolute;
top: 12px;
left: 0;
width: 557.965px;
height: 620.042px;
background-repeat: no-repeat;
}
/*------------------- Home Our Success -------------------*/
.our-success {
background-image: url("../img/succes-bg.webp");
background-position: center;
background-size: cover;
padding: 60px 0px 40px 0px;
}
.our-success .section-title h2 {
color: #FFF;
}
.our-success .section-desc p {
color: #FFF;
}
.success-content h2 {
color: #FFF;
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 24px;
margin-bottom: 13px;
}
.success-content p {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.success-item {
display: flex;
align-items: center;
column-gap: 46px;
border-right: 1px solid #fff;
}
hr.division {
border-bottom: 0.2px solid #6e6e6e;
margin: 63px 70px;
color: #fff;
}
.success-btn {
margin-top: 60px;
}
.success-btn .banner-button.btn-style-2 {
width: 223px;
}
/*------------------- Home Our Process -------------------*/
.our-process {
position: relative;
}
.process-inner {
margin-top: 100px;
}
.process-item {
width: 100%;
max-width: 270px;
text-align: center;
display: block;
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
}
.process-item {
width: 100%;
max-width: 300px;
text-align: center;
display: block;
position: absolute;
top: -85px;
left: 50%;
transform: translateX(-50%);
}
.process-item.secound-box {
width: 100%;
max-width: 260px;
text-align: center;
display: block;
position: absolute;
top: 20%;
left: 19%;
transform: translateX(-50%);
}
.process-item.third-box {
width: 100%;
max-width: 280px;
text-align: center;
display: block;
position: absolute;
top: 20%;
left: 81%;
transform: translateX(-50%);
}
.process-item.fourth-box {
width: 100%;
max-width: 280px;
text-align: center;
display: block;
position: absolute;
top: 61%;
left: 12%;
transform: translateX(-50%);
}
.process-item.fifth-box {
width: 100%;
max-width: 260px;
text-align: center;
display: block;
position: absolute;
top: 61%;
left: 88%;
transform: translateX(-50%);
}
.process-item .process-title {
color: #3C4D6B;
font-size: 18px;
font-style: normal;
font-weight: 800;
line-height: 24px;
}
.process-item .process-title span{
color: #FF4B2B;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
}
.process-item .process-desc {
color: #778191;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
}
/*------------------- Home Why Choose -------------------*/
.why-choose {
padding: 5rem 0px 6rem 0;
background: #0060B4;
text-align: center;
}
.why-choose .top-content {
background: rgba(255, 255, 255, 0.80);
color: #0060B4;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 18px;
text-transform: capitalize;
display: inline-block;
padding: 11px;
margin-bottom: 12px;
border-radius: 5px;
}
.why-choose .section-title h2 {
margin-bottom: 12px;
color: #fff;
}
.why-choose .section-desc p {
margin-bottom: 28px;
color: #fff;
}
.whyUs-inner {
align-items: center;
}
.whyUs-box {
border-radius: 25.5px;
background: rgba(255, 255, 255, 0.80);
display: inline-block;
padding: 13px 15px;
margin:0px 5px 10px 0px;
width:32%;
}
.whyUs-item {
display: flex;
align-items: center;
column-gap: 12px;
row-gap: 20px;
}
.whyUs-item img{
position:absolute;
top:12px;
}
.whyUs-item p {
color: #0060B4;
font-size: 14px;
font-style: normal;
line-height: 24px;
text-align:left;
}
.whyUs-item p strong{
color: #0060B4;
text-align: center;
font-size: 18px;
font-weight:700;
font-style: normal;
line-height: 24px;
margin: 0 0 0 30px;
}
.whyUs-btn .banner-button.btn-style-2 {
width: 161px;
margin-top: 32px;
}
.whyUs-btn .banner-button.btn-style-2 .button__text {
background-color: #fff;
}
.whyUs-btn .banner-button.btn-style-2 .button__content {
background-color: #fff;
}
.whyUs-btn .banner-button.btn-style-2 .button__text span {
color: #0060B4;
}
.whyUs-btn .banner-icon svg path {
fill: #0060B4;
}
/*------------------- Home Sales Enquiry -------------------*/
.sales-inquery .section-title h2 {
text-align: start;
margin-bottom: 12px;
}
.sales-inquery .section-desc p {
text-align: start;
margin-bottom: 38px;
}
.sales-img {
border-radius: 0px 20px 20px 0px;
background: url("../img/contact-image.jpg");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
width: 100%;
}
.error-msg {
color: #ff0000;
font-size: 13px;
font-weight: 400;
display: none;
margin-top: 5px;
display: none;
}
.form-wapper .mb-3 {
margin-bottom: 0 !important;
}
.form-wapper .field-wrapper {
display: block;
position: relative;
outline: none;
}
.form-wapper .field-wrapper.focused label {
transition: all .2s linear;
top: -15px;
left: 8px;
padding: 0px 10px !important;
background: #EEE;
color: #778191;
font-size: 10px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.form-wapper .field-wrapper .form-control {
height: 36px;
border-radius: 5px;
border: 1px solid #ddd;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.form-wapper .field-wrapper .form-control#inputPname {
height: 86px;
}
.sales-form {
padding: 38px 42px 48px 35px;
}
.inquery-wapper {
background: #EEE;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.form-wapper .form-select {
height: 49px;
border-radius: 5px;
border: none;
background: #fff;
position: relative;
}
.form-wapper .form-select {
background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" %3E%3Cpath d="M12 15L7 10H17L12 15Z" fill="%23778191"/%3E%3C/svg%3E') !important;
background-repeat: no-repeat !important;
background-position: right 1rem center !important;
background-size: 1.5rem !important;
color: #3C4D6B;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.review-btn .banner-button.btn-style-2 {
width: 162px;
margin-top: 16px;
}
.inquery-btn .banner-button.btn-style-2 {
width: 234px;
margin-top: 16px;
}
.img-content {
padding: 0px 24px 0px 45px;
position: absolute;
bottom: 38px;
}
.img-content p {
color: #F6F9FF;
font-size: 24px;
font-style: normal;
font-weight: 500;
line-height: normal;
border-bottom: 1px solid #fff;
padding-bottom: 25px;
}
.img-content span {
color: #F6F9FF;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: normal;
display: block;
margin-top: 20px;
}
.form-wapper .field-wrapper textarea.form-control {
height: auto;
}
/*------------------- Home Testimonial -------------------*/
.review-content .top-content {
background: #FFE4E0;
display: inline-block;
color: #FF4B2B;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
text-transform: capitalize;
padding: 6px 13px;
margin-bottom: 12px;
}
.review-content .section-title h2 {
text-align: start;
margin-right: 47px;
margin-bottom: 41px;
}
.top-rating {
display: flex;
gap: 24px;
align-items: center;
margin-bottom: 36px;
margin-top: 45px;
}
.start h4 {
color: #3C4D6B;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.four-start {
border-radius: 24px;
background: #FFF8F7;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 9px 24px;
height: 43px;
}
.four-start h3 {
color: #3C4D6B;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.review-count {
border-radius: 24px;
background: rgba(0, 0, 0, 0.10);
display: inline-flex;
align-items: center;
gap: 24px;
padding: 9px 24px;
height: 43px;
}
.review-count span {
color: #FFF;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
border-right: 2px solid #fff;
padding-right: 24px;
}
.review-sec {
background: url("../img/review-bg.webp") #EEE 50% / cover no-repeat;
background-position: center;
padding: 70px 56px;
}
.review-content p {
color: #778191;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-right: 115px;
margin-bottom: 38px;
}
.user-info {
display: inline-flex;
align-items: center;
gap: 22px;
}
.user-info img {
width: auto !important;
}
.user-name h3 {
color: #778191;
font-size: 22px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.user-name p {
color: #778191;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.review-slider .owl-nav button.owl-next,
.review-slider .owl-nav button.owl-prev {
width: 40px;
height: 40px;
background: #FF4B2B !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50px;
}
.review-slider .owl-nav button.owl-next span,
.review-slider .owl-nav button.owl-prev span {
font-size: 40px;
color: #fff;
height: 65px;
}
.review-slider.owl-theme .owl-nav {
position: absolute;
bottom: 20px;
right: 115px;
}
/*------------------- Home Footer Section -------------------*/
.footer-bg {
background-image: url("../img/footer-bg.webp");
background-position: center;
background-size: cover;
}
.top-content {
display: flex;
align-items: center;
gap: 14px;
}
.top-content p,
.footer-logo p {
color: #FCEBFF;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.footer-logo {
display: flex;
align-items: end;
gap: 11px;
}
.left-side {
position: relative;
}
.left-side:after {
position: absolute;
width: 1px;
height: 57px;
background-color: #fff;
content: "";
right: 0px;
top: 8px;
}
.right-side p {
color: #FFF;
font-size: 14px!important;
font-style: normal;
font-weight: 400;
line-height: 22px;
letter-spacing: 0.27px;
padding-top:10px !important;
}
.footer-top {
border-bottom: 1px dashed #fff;
padding: 22px 56px 10px 56px;
}
.contact-detail .icon svg {
max-width: 30px;
}
.location .icon svg {
max-width: 30px;
}
.contact-detail,
.location {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 26px;
}
.contact-detail .content span {
color: #FCEBFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
display: block;
}
.contact-detail .content span a{
color: #FCEBFF;
}
.location .content span {
color: #FCEBFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 24px;
display: inline-block;
}
.footer-info {
margin-top: 40px;
margin-bottom: 30px;
padding: 0px 0px;
}
.footer-social .social-icon {
margin-right: 12px;
}
.footer-social .social-icon:hover svg rect {
fill: #ff4b2b;
fill-opacity: 1;
}
.footer-menu .menu-title h3 {
color: #FFF!important;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 30px;
letter-spacing: 0.33px;
margin:0;
}
.footer-menu .menu-link {
padding-left: 0px;
list-style: none;
}
.footer-menu .menu-link a {
color: #FFF;
display: block;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.21px;
padding-bottom: 8px;
}
.footer-menu .menu-link a:hover {
color: #FF4B2B;
}
.quick-reply {
border-radius: 20px;
background: #ffffff1c;
padding: 20px 17px;
}
.quick-reply-send {
position: relative;
margin-top: 27px;
}
.quick-reply-send button {
border: 0;
padding: 0px;
display: block;
}
.quick-reply-send .btn:first-child:active,
:not(.btn-check)+.btn:active {
border: 0px;
}
.quick-reply-send svg {
position: absolute;
top: 9px;
right: 10px;
}
.quick-reply-content h2 {
color: #FFF;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 24px;
letter-spacing: 0.39px;
}
.quick-reply-send .form-control {
color: #000 !important;
font-size: 14px !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: 24px !important;
letter-spacing: 0.21px !important;
border: none !important;
}
.policy-link ul {
display: inline-flex;
align-items: center;
column-gap: 3rem;
padding-left: 0rem;
margin-bottom: 0px;
list-style: none;
}
.policy-link ul li::before {
width: 1px;
height: 16px;
border-radius: 50px;
background: #fff;
position: absolute;
content: "";
top: 5px;
left: -25px;
}
.policy-link ul li:first-child::before {
display: none;
}
.policy-link ul li {
position: relative;
}
.policy-link li a {
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.24px;
}
.copy-text p {
color: #FCEBFF;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-align: end!important;
padding-right:30px;
padding-top:10px;
}
.footer-bottom {
background: #453547;
padding: 18px 56px;
}
.policy-link{ margin-top:7px; font-size:12px;}
/*------------------- Service Page ---------------*/
.sercvice-banner {
position: relative;
}
.sercvice-banner::after {
background-image: url(../img/service-banner-bg.webp);
content: "";
position: absolute;
left: 0;
width: 473px;
height: 494px;
background-repeat: no-repeat;
bottom: 0px;
}
.sercvice-banner .banner-content {
margin-bottom: 45px;
}
.sercvice-banner .banner-inner .top-content {
margin-top: 0px;
}
.sercvice-banner .banner-btn,
.feature-btn {
z-index: 9;
position: relative;
}
.service-title {
color: #3C4D6B;
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 24px;
}
.list-item {
display: flex;
align-items: center;
gap: 13px;
margin-bottom:20px;
}
.list-item .content {
color: #3C4D6B;
font-style: normal;
font-weight: 700;
line-height: 24px;
text-transform: capitalize;
}
/*------------------- Service Page Feature Section ---------------*/
.feature-title h2 {
color: #FFF;
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: 34px;
letter-spacing: 0.51px;
margin-bottom: 18px;
}
.service-feature {
background: #0060B4;
position: relative;
padding-top: 66px;
padding-bottom: 24px;
}
.service-feature::after {
background-image: url(../img/service-feature.webp);
content: "";
position: absolute;
left: 0;
width: 712.706px;
height: 813.677px;
background-repeat: no-repeat;
bottom: 0px;
}
.feature-info {
display: inline-flex;
align-items: center;
gap: 20px;
margin-bottom: 42px;
}
.feature-desc p {
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
margin-bottom: 24px;
margin-right: 58px;
}
.feature-desc p a{ text-decoration:none;}
.feature-info .content p {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 32.4px;
}
.feature-btn .banner-button.btn-style-2 .button__text,
.feature-btn .banner-button.btn-style-2 .button__content {
background-color: #fff;
}
.feature-btn .banner-button.btn-style-2 .button__text span {
color: #0060B4;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 35px;
margin-bottom: 25px;
}
.feature-item .icon {
min-width: 56px;
height: 56px;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50px;
}
.feature-item .content p {
color: #FFF;
font-size: 13px;
font-style: normal;
font-weight: 300;
line-height: 20px;
letter-spacing: 0.24px;
margin-right: 3rem;
}
.feature-item .content h3 {
color: #FFF!important;
font-size: 18px;
font-style: normal;
font-weight: 700;
letter-spacing: 0.27px;
margin-top: 10px!important;
margin-bottom: 0px!important;
}
.feature-item .content {
position: relative;
}
.feature-item .content::after {
content: " ";
position: absolute;
height: calc(100% - 25px);
border-style: dashed;
border-color: #fff;
border-width: 1px;
top: 3.9rem;
left: -4rem;
}
.feature-item .content.last-child::after {
border: 0px;
position: unset;
}
.detail-inner .title {
font-size: 30px;
font-weight: 800;
color: #1a2540;
margin: 0 0 16px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.detail-inner h3 {
font-size: 20px;
font-weight: 600;
color: #1a2540;
margin: 20px 0 6px 0px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.detail-inner .desc {
color: #778191;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 30px;
}
.detail-inner .sub-desc {
color: #778191;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin: 25px 0px;
}
.detail-inner .detail-item {
display: inline-flex;
align-items: center;
gap: 15px;
}
.detail-inner .detail-item .content {
color: #3C4D6B;
font-size: 26px;
font-style: normal;
font-weight: 600;
line-height: 48px;
letter-spacing: 0.42px;
}
.detai-term {
border-radius: 10px;
background: #FFF;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);
padding: 40px;
}
.detai-term h2{
margin:20px 0px 10px 0px;
font-size:24px;
font-weight:600;
}
.detai-term p{
margin-bottom:15px;
}
.detai-term a{
color:#000;
}
.detai-term ul{
margin: 0px 0px 0px 0px!important;
list-style: none;
}
.detai-term ul li {
background-image: url(https://hirekey.in/assets/img/li-img.png);
background-repeat: no-repeat;
background-position: left top;
margin: 10px 0px 10px -30px;
padding: 0px 0px 0px 30px;
list-style: none;
}
.cta-box {
border-radius: 10px;
background: #FFE9E5;
padding: 21px 40px;
position: relative;
margin: 20px 0px 40px 0px;
}
.cta-box::after {
background-image: url(../img/icon/cta-icon.webp);
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 153.283px;
height: 174.999px;
background-repeat: no-repeat;
}
.cta-inner h2 {
color: #3C4D6B;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 48px;
letter-spacing: 0.3px;
}
.cta-box .btn-whatsapp {
color: #ffffff!important;
}
.cta-box .btn-hire {
color: #ffffff!important;
}
.cta-inner p {
color: #778191;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin-bottom: 20px;
}
.cta-btn .banner-button.btn-style-2 {
width: 164px;
margin-top: 25px;
}
.highlight-item {
display: inline-flex;
gap: 22px;
}
.highlight-item .icon {
border-radius: 15px;
border: 1px solid #FF9987;
background: #FFF;
display: flex;
min-width: 30px;
height: 30px;
padding: 7px 11px 7px 10px;
justify-content: center;
align-items: center;
position: relative;
top:15px;
}
.highlight-item .icon span {
color: #FF9987;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 16px;
}
.highlight-item .content {
position: relative;
}
.highlight-item .content::after {
content: " ";
position: absolute;
height: 100%;
border-style: dashed;
border-color: #D1D5DB;
border-width: 1px;
top: 30px;
left: -2.3rem;
}
.highlight-item .content.last-child::after {
border: none;
}
.highlight-item .content h3 {
color: #3C4D6B;
font-size: 26px;
font-style: normal;
font-weight: 600;
letter-spacing: 0.42px;
margin-bottom: 13px;
}
.feature-content a, .feature-item a {
color: #ffffff;
text-decoration: underline;
}
.detail-inner .highlight-item .sub-desc {
margin-top: 0px;
margin-right: 10px;
}
.detail-inner {
border-radius: 10px;
background: #FFF;
z-index: 2;
box-shadow: 0 24px 32px 0 #0000000F;
border: 1px solid #c4c4c4;
border-radius: 5px;
padding: 20px;
line-height: 30px;
}
.detail-inner a{
color: #343a40;
}
.service-detail .banner-form {
position: sticky;
top: 100px;
}
/*------------------- Contact Us Page ---------------*/
.contact-us .top-content {
display: inline-block;
background: #FFE4E0;
padding: 7px 10px;
color: #FF4B2B;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
text-transform: capitalize;
margin-top:40px;
}
.contact-us .title {
color: #3C4D6B;
text-align: center;
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 58px;
letter-spacing: 0.57px;
margin-bottom: 40px;
}
.contact-wapper {
background: #0060B4;
height: 516px;
}
.email-info,
.phone-info,
.location-info {
border-radius: 0px 0px 10px 10px;
background: rgba(255, 255, 255, 0.10);
text-align: center;
height: 100%;
padding:0px 20px 20px 20px;
}
.email-info img,
.phone-info img,
.location-info img {
text-align: center;
margin-top: -64px;
}
.email-info h3,
.phone-info h3,
.location-info h3 {
color: #FFF;
text-align: left;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 30px;
margin-bottom: 18px;
}
.email-info p,
.phone-info p{
color: #FFF;
text-align: left;
font-size: 14px;
font-style: normal;
line-height: 24px;
}
.location-info p {
color: #FFF;
text-align: center;
font-size: 14px;
font-style: normal;
line-height: 24px;
}
.email-info p strong,
.phone-info p strong,
.location-info p strong{
border-radius: 5px 5px 5px 5px;
background: rgba(255, 255, 255, 0.10);
padding:8px;
}
.email-info p span,
.phone-info p span,
.location-info p span{
border-radius: 5px 5px 5px 5px;
background: #0060B4;
padding:8px;
display:inline-block;
font-weight:700;
margin-top:8px;
}
.email-info p italic,
.phone-info p italic,
.location-info p italic{
border-radius: 5px 5px 5px 5px;
background: #FF4B2B;
padding:8px;
display:inline-block;
font-weight:700;
margin-top:8px;
}
.page-banner-con {
background-image: url("../img/Hiring Consultancy Near Me.png");
background-size: cover;
padding: 100px 0px 0px 5%;
background-position: left;
height:450px!important;
}
.contact-newsletter {
border-radius: 10px;
background: rgba(255, 255, 255, 0.10);
height: 140px;
margin-top: 68px;
padding: 17px 40px 30px 40px;
display: flex;
align-items: center;
}
.contact-newsletter .content h2 {
color: #FFF;
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 58px;
letter-spacing: 0.57px;
}
.contact-newsletter .content p {
color: #FFF;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.contact-newsletter {
display: flex;
align-items: center;
justify-content: space-between;
}
.newsletter-btn .banner-button.btn-style-2 .button__text,
.newsletter-btn .banner-button.btn-style-2 .button__content {
background-color: #fff;
}
.newsletter-btn .banner-button.btn-style-2 .button__text span {
color: #0060B4;
}
.newsletter-btn .banner-button {
width: 204px;
}
.contact-form-btn .banner-button.btn-style-2 {
width: 140px;
margin-top: 16px;
}
/*------------------- Contact Us Page Sidebar---------------*/
.side-bar {
margin-left: 20px;
}
.search-input {
position: relative;
}
.search-input button {
background: transparent;
border: 0;
position: absolute;
top: 65%;
right: 20px;
}
.search-input .form-control {
border: 1px solid #D9D9D9;
height: 48px;
width: 268px;
}
.search-input label {
color: #3C4D6B;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.33px;
margin-bottom: 27px;
}
.category-item .icon {
margin-right: 12px;
}
.category-item a {
color: #3C4D6B;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.category-item,
.recent-item {
margin-bottom: 16px;
}
.category-sec h3,
.recent-post h3 {
color: #3C4D6B;
font-size: 22px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.33px;
margin-bottom: 27px;
}
.search-bar {
margin-bottom: 52px;
}
.recent-item a {
display: inline-flex;
padding: 5px 10px;
justify-content: center;
align-items: center;
color: #3C4D6B;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
border-radius: 5px;
background: #F2F5FA;
}
/*------------------- Blog Detail Page ---------------*/
.banner-caption.blog-detail .title {
border-bottom: none;
text-align: start;
line-height: 58px;
letter-spacing: 0.72px;
margin-right: 5px;
}
.banner-caption.blog-detail .top-content {
display: inline-block;
border-radius: 5px 5px 0px 0px;
background: #FF4B2B;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
padding: 10px 20px;
color: #ffffff;
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
text-transform: capitalize;
margin:50% 0px 0px 0px;
}
.blog-author {
display: flex;
align-items: center;
gap: 30px;
margin-top: 10px;
}
.blog-author .content {
color: rgba(255, 255, 255, 0.80);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 24px;
letter-spacing: 0.21px;
}
.blog-author .list-item {
margin-bottom: 0px;
}
.blog-detailContent {
border-radius: 10px;
background: #FFF;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
padding: 35px 40px 35px 35px;
}
.blog-detailContent a{
color: #778191;
}
.blog-detailContent h1{
font-size: 30px;
color:#FF4B2B;
font-style: bold;
font-weight: 700;
line-height: 36px;
border-bottom:3px solid #ccc;
margin-bottom: 20px;
padding-bottom:20px;
}
.blog-detailContent h2,h3,h4,h5{
margin: 15px 0px 0px 0px;
}
.blog-detailContent ul{
list-style-image:none!important;
}
.blog-detailContent ul{
margin: 10px 0px 10px 0px;
padding: 0px;
}
.blog-detailContent ul li{
background-image: url(https://hirekey.in/assets/img/li-img.png);
background-repeat: no-repeat;
background-position: left top;
margin: 10px 0px 10px 0px;
padding: 0px 0px 0px 30px;
list-style: none;
}
.blog-title {
color: #3C4D6B;
font-size: 22px;
font-style: normal;
font-weight: 700;
line-height: 36px;
letter-spacing: 0.51px;
margin-bottom: 30px;
margin-right: 3rem;
Border-bottom: 2px #ccc;
}
.blog-desc {
color: #778191;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 10px;
}
.blog-category {
display: inline-flex;
padding: 5px 10px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 5px;
border: 1px solid #3C4D6B;
background: #FFF;
position: absolute;
top: 24px;
right: 24px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.blog-category span {
color: #3C4D6B;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.blog-contentGap {
margin-bottom: 40px;
}
.comment-box {
border-radius: 10px;
background: #FFE9E5;
padding: 8px 62px 17px 25px;
}
.blog-listing .icon {
border-radius: 15px;
border: 1px solid #FF4B2B;
background: #FFF;
display: flex;
min-width: 21px;
min-height: 21px;
padding: 2px 6px 2px 5px;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.blog-listing .icon span {
color: #FF4B2B;
text-align: center;
font-size: 9px;
font-style: normal;
font-weight: 600;
line-height: 16px;
}
.blog-listing .content {
color: #3C4D6B;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.blog-listing ul {
list-style: none;
}
.blog-listing li {
color: #778191;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 6px;
}
.blog-listing {
margin-bottom: 23px;
}
.blog-listing .list-item {
margin-bottom: 11px;
}
.blog-listing .list-item {
align-items: start;
}
.blog-listing .list-item .content h3 {
color: #3C4D6B;
font-size: 28px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin-bottom: 10px;
}
/*------------------- Contact Us Page Related Slider---------------*/
.related-slider .owl-nav button.owl-next,
.related-slider .owl-nav button.owl-prev {
width: 40px;
height: 40px;
background: #3C4D6B !important;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.related-slider .owl-nav button.owl-next span,
.related-slider .owl-nav button.owl-prev span {
font-size: 40px;
color: #fff;
height: 65px;
}
.related-slider .owl-nav button.owl-next {
position: absolute;
top: 40%;
right: -27px;
}
.related-slider .owl-nav button.owl-prev {
position: absolute;
top: 40%;
left: -27px;
}
.related-blog::after {
background-image: url(../img/related-line.webp);
content: "";
position: absolute;
left: 0;
top: 50px;
width: 417.59px;
height: 476.75px;
background-repeat: no-repeat;
z-index: -9;
}
.custom-navbar .dropdown-toggle:hover::after {
background: url(../img/down-arrow-hover.webp);
/* Replace with your hover SVG */
}
.sub-content .content {
color: #FFF;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.24px;
}
.sub-content {
border-radius: 10px;
border: 1px solid #797979;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(7.5px);
padding: 19px 23px;
margin-top: 24px;
margin-bottom: 35px;
}
.page-banner .banner-button {
display: inline-flex;
justify-content: center;
}
/* Customizing the navbar-toggler button */
.navbar-toggler {
border: none;
/* Remove the border */
}
.navbar-toggler.collapsed .navbar-toggler-icon::before {
content: "\f550";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 24px;
color: #000;
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
}
.navbar-toggler.collapsed .navbar-toggler-icon {
background-image: none;
}
.navbar-toggler .navbar-toggler-icon {
background-image: url('../img/close.webp');
background-size: contain;
background-repeat: no-repeat;
width: 20px;
height: 20px;
transition: 0.5s;
}
.navbar-toggler .navbar-toggler-icon::before {
display: none;
}
.navbar-toggler:focus {
text-decoration: none;
outline: 0;
box-shadow: none !important;
}
#mbile-view {
display: none;
}
#desktop-view {
display: block;
}
.whats-btn {
position: fixed;
bottom: 20px;
right: 25px;
z-index: 999
}
.whatsapp {
background: #45c456;
padding: 1px;
width: 60px;
display: flex;
border-radius: 57px;
height: 60px;
justify-content: center;
align-items: center;
}
.fa-whatsapp {
color: #fff
}
.feature-btn .banner-button.btn-style-2 {
width: 200px;
}
.success-msg {
color: green;
font-size: 14px;
}
.error-msg {
color: red;
font-size: 14px;
}
.error-message {
color: red;
font-size: 13px;
}
.hightlight-line {
border: 3px solid #C5C5C5;
border-radius: 20px;
margin: 8px 0px 24px 0px;
position: relative;
}
.hightlight-line::after {
content: "";
position: absolute;
width: 50%;
background: #0060B4;
top: -2px;
left: -2px;
height: 4px;
border-radius: 20px;
transition: width 0.5s ease;
}
.hightlight-line.expanded::after {
width: 102%;
}
.form-scrren {
height: 225px;
}
.input-wapper {
margin-bottom: 23px;
}
.iti__selected-flag {
background-color: #EAEAEA;
}
.form-scrren .form-check {
border-radius: 3px;
border: 1px solid #A9A9A9;
background: #FCFCFC;
height: 40px;
padding: 8px 0px 8px 35px;
margin-bottom: 24px;
}
.page-banner-blog{ background-size:cover;
background-position:center;
height:650px;
}
.form-label{margin-bottom:0px;}
.page-banner-career {
background-position: center;
background-size: cover;
padding: 100px 0px;
background-color:#000;
height:550px;
}
.desc{text-align:center!important;}
.agreement-box {
border-radius: 20px;
background: #FFF;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.15);
padding: 30px;
margin: 0px 80px;
}
.agreement-box h2{
padding:20px 0px 20px 0px!important;
font-weight:700;
}
.contact-section {
background: #f8f8f8;
padding: 100px 50px;
margin:50px 50px;
border-radius:10px;
}
.contact-section .section-title h2 {
font-size: 36px;
font-weight: 400;
line-height: 1.1;
margin-bottom: 25px;
text-align:left;
}
.contact-section .section-title h2 span{
font-size: 48px;
font-weight: 600;
line-height: 1.1;
margin-bottom: 25px;
text-align:left;
}
.contact-section .section-title .dash-and-paragraph {
margin-top: 40px;
}
.section-title .dash-and-paragraph {
display: flex;
gap: 24px;
margin-top: -45px;
}
.contact-section .section-title .dash-and-paragraph .social-area {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 20px;
padding-top: 30px;
}
.contact-section .section-title .dash-and-paragraph .social-area h6 {
margin-bottom: 0;
color: var(--title-color);
font-family: var(--font-unbounded);
font-size: 20px;
font-weight: 600;
}
.contact-section .section-title .dash-and-paragraph .social-area > svg {
fill: var(--primary-color1);
width: unset;
}
.contact-section .section-title .dash-and-paragraph .social-area ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 15px;
}
.contact-section .section-title .dash-and-paragraph .social-area ul li a {
height: 26px;
width: 26px;
border-radius: 50%;
border: 1px solid rgba(86, 96, 100, 0.2);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: 0.35s;
}
.contact-section .circle-btn {
height: 160px;
width: 160px;
border-radius: 50%;
background-color: #000;
border: 1px solid #fff;
text-align: center;
color: #fff;
font-size: 17px;
font-weight: 500;
line-height: 25px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
gap: 12px;
position: relative;
z-index: 1;
transition: 0.8s;
}
.contact-section .circle-btn {
text-align: center;
color: #fff;
font-size: 17px;
font-weight: 500;
line-height: 25px;
}
.kye-features-section {
padding: 60px 0px 0px 0px;
background-color:#fff;
}
.kye-features-section h2 {
font-size: 36px;
font-weight: 400;
line-height: 1.1;
margin-bottom: 25px;
text-align:left;
}
.kye-features-section h2 span{
font-size: 48px;
font-weight: 600;
line-height: 1.1;
margin-bottom: 25px;
text-align:left;
}
.kye-features-section h3 {
font-size: 24px;
font-weight: 400;
line-height: 1.1;
margin-bottom: 20px;
text-align:left;
}
.single-kye-features {
background-color: #ECE8E5;
padding: 40px 30px 0;
border-radius: 5px 5px 0 0;
}
.single-kye-features.two {
background-color: #F7E3EF;
}
.single-kye-features.three {
background-color: #EFE8FF;
}
.single-kye-features .kye-features-img img {
border-radius: 5px 5px 0 0;
border-color:#fff;
border-width:10px;
width:100%;
}
.single-kye-features .kye-features-img{
border-radius: 5px 5px 0 0;
background:#fff;
padding:10px;
width:100%;
margin-top:20px;
}
.hd{
float:left;
}
.hd p{
margin-top:30px;
}
.hd p img{ width:30px;
margin-right:20px;
}
.detail-inner ul {
margin: 0px 0px 0px 0px !important;
list-style: none;
}
.detail-inner ul li {
position: relative;
margin: 10px 0 10px -30px;
padding: 0 0 0 30px;
list-style: none;
}
.detail-inner ul li::before {
content: "";
position: absolute;
left: 0;
top: 3px; /* align with first line of text */
width: 20px;
height: 20px;
border-radius: 50%; /* makes it a circle */
background-color: #e8580c; /* orange circle (or use var(--accent)) */
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpolyline%20points='20%206%209%2017%204%2012'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px; /* white tick, smaller than the circle */
}
.hire-industry-section .list-item {
display: flex;
align-items: center;
margin-bottom: 0px;
gap: 10px;
}
.hire-industry-section .list-item .content {
color: #3C4D6B;
font-size: 1rem;
font-style: normal;
font-weight: 700;
text-transform: capitalize;
}
.hire-industry-section .icon img {
width: 20px;
height: 20px;
}
.btn-crystal {
display: inline-flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
position: relative;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
overflow: hidden;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
line-height: 1.25rem !important;
}
.btn-hike::before,
.btn-crystal::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
animation: crystalSwipe 2s linear infinite;
pointer-events: none;
}
@keyframes crystalSwipe {
0% {
left: -100%;
transform: scaleX(0.4);
}
50% {
left: 100%;
transform: scaleX(0.6);
}
100% {
left: 100%;
transform: scaleX(0.4);
}
}
.icon-box-1 {
top: 16rem;
position: absolute;
left: -8rem;
width: 210px;
background: #ebeff7 !important;
}
.icon-box-2 {
bottom: 23rem;
position:absolute;
right: -8rem;
width: 210px;
background: #f0f5e4 !important;
}
.icon-box-3 {
bottom: 2rem;
position: absolute;
right: 0;
width: 230px;
background: #ede4fc !important;
}
.btn-primary-new {
background-color: #FF4B2B;
}
.btn-secondary-new {
background-color: #301f33;
color:#fff;
}
.btn-secondary-new:hover {
background-color: #301f33;
color:#fff;
}
.text-primary-color {
color: #FF4B2B;
}
.text-secondary-color {
color: #301f33;
}
.background-primary-color {
background-color: #FF4B2B !important;
}
.wel h4 {color: #000;}
.wel p { margin-top:20px;}
.background-primary-color-700 {
background-color: #ffd9d278 !important;
border:1px solid #ffd9d278;
}
.background-primary-color-800 {
background-color: #def1f2 !important;
border:1px solid #def1f2;
}
.background-secondary-color {
background-color: #301f33 !important;
}
.bg-gradient-green {
background-image: linear-gradient(89.86deg, #20d812 .11%, #108d07 99.84%) !important;
}
.section-heading-underline {
margin-top: -.35rem;
width: auto;
}
.rounded-xl {
border-radius: .75rem !important;
}
.bg-light-green-A400 {
--tw-bg-opacity: 1;
background-color: rgb(225 244 242 / 1);
}
.bg-blue-300 {
--tw-bg-opacity: 1;
background-color: rgb(237 228 252 /1);
}
.bg-blue-400 {
--tw-bg-opacity: 1;
background-color: rgb(225 237 245 / 1);
}
.services-section .accordion-button::after {
display:none;
}
.services-section .accordion-body {
padding: 20px;
}
.logo-section {
background: #fafafc;
padding: 50px 0;
}
.industry-expertise-section {
background: #fff0ed !important;
position: relative;
padding: 70px 0;
}
.industry-expertise-section button {
background: transparent;
}
.industry-expertise-section .accordion-button::after {
display:none;
}
.industry-expertise-section .accordion-body {
padding: 20px;
}
.industry-expertise-section .carousel .carousel-item {
transition: transform 0.8s ease-in-out, opacity 0.10s ease-in-out;
cursor: pointer;
}
/* Hover scale effect */
.industry-expertise-section .industry-hover {
transition: transform 0.7s ease, box-shadow 0.3s ease;
}
.industry-expertise-section .industry-hover:hover {
transform: scale(1.05);
}
.services-section {
padding: 80px 0;
}
.testimonial-section {
/* background: #fafafd; */
padding: 50px 0px 0px 0px;
position:relative;
}
.testimonial-section .testimonial-nav {
display: flex;
gap: 8px;
}
.testimonial-section .nav-btn {
background: #d2c5e6;
border: none;
border-radius: 6px;
width: 32px;
height: 32px;
font-size: 1.3rem;
color: #fff;
cursor: pointer;
transition: background 0.2s;
}
.testimonial-section .nav-btn.active,
.testimonial-section .nav-btn:hover {
background: #3d2176;
}
.testimonial-section .testimonial-wrapper {
position: relative;
max-width: 1100px;
margin: 0 auto 32px auto;
}
.testimonial-section .testimonial-content {
display: none;
justify-content: center;
align-items: flex-start;
gap: 48px;
}
.testimonial-section .testimonial-content.active {
display: grid;
}
.testimonial-section .testimonial-content {
grid-template-columns: 25% 1fr;
-webkit-box-align: center;
align-items: center;
margin-top: 70px;
gap: 100px;
}
.testimonial-section .testimonial-profile {
position: relative;
}
.testimonial-section .testimonial-profile::before {
content: "";
width: 100%;
height: 20px;
position: absolute;
transform: rotate(90deg);
top: 40%;
left: 65%;
z-index: 1;
clip-path: polygon(0px 0px, 64px 0px, 59px calc(100% - 1px), 96px 0px, 100% 0px, 100% 1px, 96px 1px, 59px 100%, 58px 100%, 63px 1px, 0px 1px);
background: rgb(0, 0, 0);
}
.testimonial-section .testimonial-profile > div {
max-width: 170px;
margin: 0px auto 20px;
}
.testimonial-section .testimonial-profile > div img {
border-radius: 30px;
}
.testimonial-section .profile-info {
text-align: center;
max-width: 230px !important;
}
.testimonial-section .profile-name {
font-weight: 700;
color: #7d4bb7;
font-size: 1.1rem;
margin-bottom: 2px;
}
.testimonial-section .profile-title {
color: #181028;
font-size: 1rem;
}
.testimonial-section .testimonial-quote {
background: none;
text-align: left;
position: relative;
max-width: 800px;
}
.testimonial-section .testimonial-quote blockquote {
font-size: 1rem;
color: #181028;
font-weight: 500;
margin: 0 0 18px 0;
line-height: 1.5;
}
.testimonial-section .read-more {
color: #1976f7;
font-weight: 600;
text-decoration: underline;
font-size: 1rem;
}
.testimonial-section .testimonial-demo-btn {
margin-top: 24px;
}
@media (max-width: 900px) {
.testimonial-section .testimonial-content {
flex-direction: column;
align-items: center;
gap: 24px;
}
.testimonial-section .testimonial-quote {
margin-top: 0;
max-width: 90vw;
}
}
.our-client-section {
padding: 70px 0px;
margin:0px;
background: #ffe9e5 !important;
}
.our-client-section .section-title {
display: block;
text-align: center;
position: relative;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
}
.our-client-section .section-title>h4::before, .our-client-section .section-title>h4:after {
content: "";
position: absolute;
height: 1px;
width: 100px;
background: #c3c3c3;
top: 12px;
}
.our-client-section .section-title>h4::after {
right: -25%;
}
.our-client-section .section-title>h4::before {
left: -25%;
}
.client-logo .item {
background: #fff;
padding: 10px;
border-radius: 5px;
}
.btn-hire {
background: linear-gradient(90deg, #ff6a00, #ee0979);
color: #fff;
border: none;
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transition: transform 0.3s, box-shadow 0.3s;
}
.btn-hire:hover {
transform: translateY(-3px);
color: #fff;
box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}
/* WhatsApp Button */
.btn-whatsapp {
background: #25D366;
color: #fff;
border: none;
box-shadow: 0 6px 12px rgba(0,0,0,0.15);
transition: transform 0.3s, box-shadow 0.3s;
}
.btn-whatsapp:hover {
background: #179144ff;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}
/* Icon inside button scaling on hover */
.btn-hire svg, .btn-whatsapp svg {
transition: transform 0.3s;
}
.btn-hire:hover svg, .btn-whatsapp:hover svg {
transform: translateX(3px);
}
.bg-gradient-green {
background: linear-gradient(90deg, #28a745, #20c997);
color: #fff;
}
/* Ensure both buttons have same height */
.d-flex.align-items-stretch > a > button {
height: 60px; /* adjust height as needed */
}
.hire-industry-form-banner .banner-form {
border-radius: 10px;
border: 1px solid #0060B4;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 80%;
height: fit-content;
background-color: #fff;
padding: 24px;
}
.hire-industry-form-banner .banner-form input, .hire-industry-form-banner .banner-form select {
border-radius: 3px;
border: 1px solid #DDD;
background: #FCFCFC;
padding: 12px 10px;
margin-top: 5px;
height: auto !important;
}
.hire-industry-form-banner .banner-form label {
display: none;
}
.hire-industry-form-banner {
/* background-image: url(../img/banner-background.png);
background-position: right bottom;
background-size: cover; */
/* background: #ffe9e5 url(../img/banner-background.png);; */
background: #ffe9e5;
padding: 2rem 0 0rem 0;
}
.hire-industry-form-banner.why-choose-us-slider {
/* background-image: url(../img/banner-background.png);
background-position: right bottom;
background-size: cover; */
/* background: #ffe9e5 url(../img/banner-background.png);; */
/* background: #ffe9e5; */
background:#d5c7f4;
padding: 4rem 0;
}
.hire-industry-form-banner.employer {
/* background-image: url(../img/banner-background.png);
background-position: right bottom;
background-size: cover; */
/* background: #ffe9e5 url(../img/banner-background.png);; */
/* background: #ffe9e5; */
background:#caddff;
padding: 4rem 0;
}
.hire-industry-form-banner.home-slider {
/* background-image: url(../img/banner-background.png);
background-position: right bottom;
background-size: cover; */
/* background: #ffe9e5 url(../img/banner-background.png);; */
/* background: #ffe9e5; */
background:#f3eace;
padding: 4rem 0;
}
.hire-industry-form-banner .banner-form input:hover {
border: 1px solid #000;
}
.hire-industry-form-banner .banner-form input:focus {
border: 1px solid #ff7256 !important;
}
.hire-industry-form-banner .banner-form {
z-index: 2;
box-shadow: 0 24px 32px 0 #0000000F;
border: 1px solid #c4c4c4;
border-radius: 5px;
}
.recommended-services ul li a:hover {
background: #002A48;
color: #fff;
}
.recommended-services ul li:nth-child(3n) a {
background: #0060b4;
color: #fff;
}
/* Even numbers that are not multiples of 3 */
.recommended-services ul li:nth-child(2n):not(:nth-child(3n)) a {
background: #ff4b2b;
color: #fff;
}
/* All others (odd numbers that are not multiples of 3) */
.recommended-services ul li:nth-child(odd):not(:nth-child(3n)) a {
background: #e5e7eb;
}
.recommended-services ul li a {
padding: 8px 10px;
margin-top: 10px;
display: block;
font-weight: 500;
text-decoration: none;
border-radius: 4px;
font-weight: 500;
font-size: 12px;
line-height: 15px;
text-align: center;
color: #000;
}
.recommended-services ul li:hover a {
background-color: #301f33 !important;
color: #fff;
}
.process-form .form-label {
margin-bottom: 0px;
font-size: 1rem;
font-weight: 500;
}
.process-form input, select {
border-radius: 3px;
border: 1px solid #DDD;
background: #FCFCFC;
padding: 15px 10px !important;
}
.process-form input:hover {
border: 1px solid #000;
}
.process-form input:focus {
border: 1px solid #000 !important;
}
.process-form input::placeholder {
color: #999;
opacity: 0.7;
font-size: 0.9rem;
}
.services-section {
background-color: #8162631f;
}
.services-box {
color: rgb(255, 255, 255);
background: linear-gradient(180deg, #866666 -2.65%, #301f33 110.65%);
padding: 50px;
border-radius: 30px;
}
.services-box .nav-pills .nav-link.active, .services-box .nav-pills .show>.nav-link {
color: var(--bs-nav-pills-link-active-color);
background-color: #301f33;
}
.services-box .nav-pills .nav-link {
color: rgb(255, 255, 255);
}
.services-box .video-outline {
position: relative;
width: 100%;
padding: 10px;
background: #301f337d;
border-radius: 10px;
height: 100%;
}
.our-client-slider-section .section-title {
display: block;
text-align: center;
position: relative;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
}
.our-client-slider-section .section-title h4{
font-size: 18px!important;
}
.our-client-slider-section .section-title>h4::before, .our-client-slider-section .section-title>h4:after {
content: "";
position: absolute;
height: 1px;
width: 100px;
background: #c3c3c3;
top: 12px;
}
.our-client-slider-section .section-title>h4::after {
right: -25%;
}
.our-client-slider-section .section-title>h4::before {
left: -25%;
}
/*------------------- Choose Us Page ---------------*/
.resource-section {
font-family: 'Inter', Arial, sans-serif;
}
.resource-card {
display: flex;
color: rgb(0, 0, 0);
flex-direction: column;
gap: 5px;
padding: 25px 30px;
transition: background-color 20ms ease-in;
border-width: 1px;
border-style: solid;
border-color: rgb(200, 194, 183);
border-image: initial;
border-radius: 20px;
}
.resource-card:hover {
background-color: rgb(249, 237, 215);
}
.resource-img-container {
margin: 20px 0px 40px;
}
.resource-img {
width: 150px;
height: 97px;
object-fit: contain;
}
.resource-btn {
display: inline-block;
margin-top: auto;
padding: 10px 28px;
border: 2px solid #ff4b2b;
border-radius: 30px;
color: #ff4b2b;
font-weight: 600;
background: #fff;
text-decoration: none;
transition: background 0.2s, color 0.2s;
position: relative;
width: 190px;
}
.resource-btn::after {
content: '';
display: inline-block;
margin-left: 8px;
width: 18px;
height: 18px;
background: url('data:image/svg+xml;utf8,') no-repeat center center;
vertical-align: middle;
}
.resource-btn:hover {
background: #ff4b2b;
color: #fff;
}
.resource-btn:hover::after {
background: url('data:image/svg+xml;utf8,') no-repeat center
}
@media (max-width: 991px) {
.resource-card { min-height: 440px; }
}
@media (max-width: 767px) {
.resource-card { min-height: 0; }
}
.grid-logos {
grid-template-columns: repeat(6, 1fr); gap: 1rem; @media(min-width: 1024px){ gap: 1.75rem; }
}
.market-btn {
border: 2px solid #181028;
border-radius: 30px;
padding: 10px 28px;
background: #fff;
color: #181028;
font-weight: 500;
font-size: 1rem;
text-decoration: none;
transition: background 0.2s, color 0.2s, border-color 0.2s;
display: inline-block;
}
.market-btn:hover {
background: #ff4b2b;
color: #fff;
border-color: #ff4b2b;
}
.market-card {
border-radius: 16px;
background: #fff;
box-shadow: 0 2px 12px rgba(60, 40, 100, 0.04);
transition: box-shadow 0.2s, border-color 0.2s;
border: 1px solid transparent;
position: relative;
overflow: hidden;
padding: 50px 40px;
max-height: 360px;
height: 360px;
}
.market-card.border {
border: 1.5px solid #d9d9d9;
background: #fff;
}
.market-card-label {
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.hire-banner-section {
background: #fafafa;
padding: 200px 0 100px;
}
.hire-banner-container {
max-width: 1400px;
margin: 0px auto;
padding-top:100px;
margin-bottom:3rem;
}
.hire-banner-card {
background: #0060b4;
border-radius: 32px;
position: relative;
min-height: 420px;
display: flex; /* side by side */
flex-direction: row; /* image left, content right */
align-items: stretch;
}
/* Image column */
.hire-banner-img-col {
flex: 0 0 500px;
max-width: 500px;
z-index: 1;
display: flex;
justify-content: center; /* center horizontally */
flex-direction: row;
}
/* Content column */
.hire-banner-content-col {
flex: 1;
padding: 80px;
color: #fff;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
}
.hire-banner-title {
font-family: 'Inter', Arial, sans-serif;
font-size: 2rem;
font-weight: 700;
line-height: 1.15;
margin-bottom: 20px;
color: #fff;
}
.hire-banner-subtitle {
font-size: 1.2rem;
font-weight: 400;
color: #e6e0f3;
margin-bottom: 20px;
}
.hire-banner-btns {
display: flex;
gap: 18px;
margin-top: 32px;
}
.hire-banner-btn {
display: inline-flex;
align-items: center;
font-size: 1.1rem;
font-weight: 600;
border-radius: 14px;
padding: 12px 28px;
text-decoration: none;
transition: background 0.2s, color 0.2s, border 0.2s;
border: none;
outline: none;
cursor: pointer;
}
.hire-banner-btn-primary {
background: #fff;
color: #2d1756;
border: 2px solid #fff;
}
.hire-banner-btn-primary .icon {
margin-right: 10px;
font-size: 1.2em;
color: #2d1756;
}
.hire-banner-btn-primary:hover {
background: #e6e0f3;
color: #2d1756;
}
.hire-banner-btn-whatsapp {
background: #25d366;
color: #fff;
border: 2px solid #25d366;
}
.hire-banner-btn-whatsapp .icon {
margin-right: 6px;
display: inline-block;
vertical-align: middle;
}
.hire-banner-btn-whatsapp:hover {
background: #1da851;
border-color: #1da851;
color: #fff;
}
/* Responsive (mobile: stacked) */
@media (max-width: 991.98px) {
.hire-banner-card {
flex-direction: column; /* stack instead of side by side */
text-align: center;
}
.hire-banner-img-col {
flex: none;
max-width: 100%;
margin: 0px !important;
justify-content: center;
}
.hire-banner-content-col {
padding: 40px 20px;
}
.hire-banner-btns {
justify-content: center;
flex-wrap: wrap;
}
.hire-banner-title {
font-size: 2rem;
}
.hire-banner-subtitle {
font-size: 1.2rem;
}
}
@media (min-width: 991.99px) {
.hire-banner-img-col img {
position: absolute;
bottom:0;
left: 0;
height: auto;
}
}
.enquiry-form .banner-form {
border-radius: 10px;
border: 1px solid #0060B4;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 100%;
height: fit-content;
background-color: #fff;
padding: 24px;
}
.enquiry-form .banner-form input, .enquiry-form .banner-form select {
border-radius: 3px;
border: 1px solid #DDD;
background: #FCFCFC;
padding: 12px 10px;
margin-top: 5px;
height: auto !important;
}
.enquiry-form .banner-form label {
display: none;
}
.enquiry-form .banner-form input:hover {
border: 1px solid #000;
}
.enquiry-form .banner-form input:focus {
border: 1px solid #ff7256 !important;
}
.enquiry-form .banner-form {
z-index: 2;
box-shadow: 0 24px 32px 0 #0000000F;
border: 1px solid #c4c4c4;
border-radius: 5px;
}
.mtp{margin-top:80px;}
.cr{border-radius:8px;}
.question-box2 {
border-radius: 10px;
background: #301F33;
padding: 22px 23px 0px 27px;
position: relative;
margin-top:15%;
}
.question-box2 h3 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.question-box2 p {
color: #FFF;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 24px;
}
.question-box2 img{ width:200px; height:auto;
}
.question-box3 {
border-radius: 10px;
background: #301F33;
padding: 22px;
position: relative;
}
.question-box3 h3 {
color: #FFF;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.question-box3 p {
color: #FFF;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 18px;
}
.question-box3 p a{
color: #FFF;
}
.question-box3.mg{margin-top:10%;
}
.question-box3 img{ width:80px; height:auto;
}
.main-content2 {
background: #f0d8c0;
padding: 2.64em;
width: 100%;
}
.form-title{width:90%;}
.form-title h2 {
font-size: 2rem;
color: #301f33;
font-weight: 700;
padding: 40px 0px 20px 0px;
}
.form-title h3 {
font-size: 1.4rem;
color: #301f33;
font-weight: 700;
padding: 0px 0px 10px 0px;
}
.form-title p {
color: #301f33;
font-size: 16px;
font-style: normal;
font-weight: 400;
margin-bottom:30px;
}
.form-title ul li {
color: #301f33;
font-size: 16px;
font-weight: 400;
margin-bottom:10px;
}
.proposal-form {
padding: 2rem;
background:#fff0ed;
border-radius:6px;
}
.proposal-form .mb-3{margin: 0px 0px 10px 0px!important;}
.proposal-form h5 {
margin: 0px 0px 15px 0px !important;
background: #301f33;
padding: 10PX;
border-radius: 8px;
font-size: 1.2rem;
font-weight: 600;
color:#fff!important;
}
.proposal-form h6 {
margin: 20px 0px 15px 0px !important;
font-size: 1.2rem;
font-weight: 600;
color:#0060B4;
}
.proposal-form2 {
padding: 0 0 0 2rem;
}
.proposal-form2 .mb-3{margin: 0px 0px 10px 0px!important;}
.proposal-form2 h5 {
margin: 0px 0px 15px 0px !important;
background: #f2f2f2;
padding: 10PX;
border-radius: 8px;
font-size: 1.2rem;
font-weight: 600;
}
.proposal-form2 h6 {
margin: 0px 0px 15px 0px !important;
font-size: 1.2rem;
font-weight: 600;
color:#0060B4;
}
.contact-banner-caption{ font-size: 1.5rem;
color: #fff;
font-weight: 600;
}
.contact-banner-caption h1{ font-size: 2.5rem;
color: #fff;
font-weight: 800;
padding: 0px 0px 20px 0px;
}
.lft{float:left; height:200px;}
.lft img{ width:100px!important; height:auto;}
.proposal-form .inp {
height: 46px;
border-radius: 5px;
border: 1px solid #C6CED6;
color: #3C4D6B;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.mp{
border-radius: 5px;
padding: 10px 36px;
border: none;
font-size: 16px;
font-style: normal;
font-weight: 600;
margin-top: 25px;
margin-bottom: 3px;
}
.disc{color:#999; font-size:13px;}
.faq-top{ margin-bottom:20px;}
.faq-top h3{font-weight:700; padding:20px 0px;}
.testi-design{position:absolute; left:45%;}
.testi-arrow{position:absolute; right:15%;}
/***********pricing table**********/
.pricing-section {
background: #fff;
padding: 60px 0px 0px 0px;
}
.pricing-price-wrapper1
{
background-color: #5c9ee5;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
padding-top: 45px;
padding-bottom: 34px;
text-align: center;
box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.13), -20px -20px 60px rgba(29, 29, 29, 0.01);
margin-top:30px;
}
.pricing-price-wrapper2
{
background-color: #4cccac;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
padding-top: 45px;
padding-bottom: 34px;
text-align: center;
box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.13), -20px -20px 60px rgba(29, 29, 29, 0.01);
margin-top:30px;
}
.pricing-price-wrapper3
{
background-color: #fdca5e;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
padding-top: 45px;
padding-bottom: 34px;
text-align: center;
box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.13), -20px -20px 60px rgba(29, 29, 29, 0.01);
margin-top:30px;
}
.pricing-price-wrapper4
{
background-color: #ea5462;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
padding-top: 45px;
padding-bottom: 34px;
text-align: center;
box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.13), -20px -20px 60px rgba(29, 29, 29, 0.01);
margin-top:30px;
}
.pricing-price
{
background-color: #fff;
color: #000;
border-radius: 50%;
height: 180px;
width: 180px;
display: inline-block;
padding-top: 46px;
}
.pricing-row-title
{
background-color: #303241;
padding: 26px 10px;
text-align: center;
}
.pricing_row_title {
color: #5c9ee5;
line-height: 38px;
font-size: 18px;
font-weight: 600;
margin-bottom:20px;
}
.pricing-table.pricing-table-style-4 .pricing-row
{
background-color: #393b4a;
}
.pricing-table-style-4 figure.pricing-row:first-of-type {
padding-top: 15px;
}
.pricing-table-style-4 .pricing-row {
padding: 5px 10px;
}
.pricing-column
{
float: left;
display: inline-block;
text-align: left;
vertical-align: top;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.pricing-column-wrapper {
min-width: 241px;
text-align: center;
float:left;
margin:1%;
width:23%;
}
.pricing-row-title {
background-color: rgba(48, 50, 65, 0.2);
}
.margin-body
{
position: relative;
width: 90%;
box-sizing: border-box;
margin: auto;
}
.pricing-row1
{
border: 2px solid #5c9ee5;
padding:40px 20px;
text-align:center;
Font-size:15px;
background:#fff;
}
.pricing-row2
{
border: 2px solid #4cccac;
padding:40px 20px;
text-align:center;
Font-size:15px;
background:#fff;
}
.pricing-row3
{
border: 2px solid #fdca5e;
padding:40px 20px;
text-align:center;
Font-size:15px;
background:#fff;
}
.pricing-row4
{
border: 2px solid #ea5462;
padding:40px 20px;
text-align:center;
Font-size:15px;
background:#fff;
}
.pricing-price-wrapper
{
border-top-right-radius: 50%;
border-top-left-radius: 50%;
padding-top: 45px;
}
.pricing-column-wrapper + .pricing-column-wrapper .pricing-price {
background-color: #fff;
}
.strike
{
text-decoration: line-through;
color: #99a9b5;
}
.pricing-column-wrapper + .pricing-column-wrapper .pricing_row_title {
color: #4cccac;
}
.pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing_row_title {
color: #fdca5e;
}
.pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-price {
background-color: #fff;
}
.pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing_row_title {
color: #ea5462;
}
.pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-price {
background-color: #fff;
}
.pricing-column-wrapper + .pricing-column-wrapper .pricing-row:before{
color: #a637ec;
}
.pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-row:before
{
color: #ee417c;
}
.pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper + .pricing-column-wrapper .pricing-row:before
{
color: #ff994e;
}
.gem-button
{
cursor: pointer;
border-width: 2px;
line-height: 36px;
border-style: solid;
background: transparent;
height: 40px;
line-height: 40px;
padding: 0 37px;
font-size: 14px;
margin: 25px;
position: relative;
display: inline-block;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
border-radius:20px;
}
.gem-green
{
background-color: #5c9ee5;
color: rgb(255, 255, 255) !important;
font-weight:700;
}
.gem-green:hover
{
background-color: #0060b4;
color: rgb(255, 255, 255) !important;
}
.gem-purpel{
background-color: #4cccac;
color: rgb(255, 255, 255) !important;
font-weight:700;
}
.gem-purpel:hover
{
background-color: #33e9e5;
color: rgb(255, 255, 255) !important;
}
.gem-orange
{
background-color: #fdca5e;
color: rgb(255, 255, 255) !important;
font-weight:700;
}
.gem-orange:hover
{
background-color: #301f33;
color: rgb(255, 255, 255) !important;
}
.gem-yellow
{
background-color: #ea5462;
color: rgb(255, 255, 255) !important;
font-weight:700;
}
.gem-yellow:hover
{
background-color: #ff4b2b;
color: rgb(255, 255, 255) !important;
}
.gem-button-position-center {
text-align: center;
display: block;
}
.pricing-column:hover .pricing-price-wrapper
{
box-shadow: 0px 35px 80px rgba(4, 255, 236, 0.25), 0px 0px 0px rgba(10, 197, 173, 0.33);
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.pricing-column:hover
{
overflow:hidden;
}
.profiles {margin-top:30px;
}
.profiles ul li {
padding: 8px 10px;
display: block;
font-weight: 500;
text-decoration: none;
border-radius: 4px;
font-size: 12px;
line-height: 15px;
text-align: center;
color: #000;
background:#f5f5f5; float:left; margin:5px;
}
.profiles ul li.head {
color: #fff;
background:#FF4B2B; margin:0px auto!; float:left; width: 100%;
font-size: 18px;
font-weight: 600;
padding: 12px;
}
.profiles ul li.head2 {
color: #fff;
background:#0060B4; margin:0px auto!; float:left; width: 100%;
font-size: 18px;
font-weight: 600;
padding: 12px;
}
.profiles ul li.head3 {
color: #fff;
background:#301F33; margin:0px auto!; float:left; width: 100%;
font-size: 18px;
font-weight: 600;
padding: 12px;
}
.profiles ul li.head4 {
color: #fff;
background:#25d366; margin:0px auto!; float:left; width: 100%;
font-size: 18px;
font-weight: 600;
padding: 12px;
}
.profiles ul li.head5 {
color: #fff;
background:#ea5462; margin:0px auto!; float:left; width: 100%;
font-size: 18px;
font-weight: 600;
padding: 12px;
}
.profiles ul li.head6 {
color: #fff;
background:#fdca5e; margin:0px auto!; float:left; width: 100%;
font-size: 18px;
font-weight: 600;
padding: 12px;
}
.profiles ul li.head7 {
color: #fff;
background:#4cccac; margin:0px auto!; float:left; width: 100%;
font-size: 18px;
font-weight: 600;
padding: 12px;
}
.pmp{float: left;
margin-top: 20px;
margin-left: 40%;
font-size: 17px;
font-weight: 600;
}
ul.product-plans {
margin-inline: auto;
display: flex;
row-gap: 2rem;
flex-wrap: wrap;
justify-content: center;
list-style: none;
}
ul.product-plans li.product-plan:nth-child(1) { --accent-color: #fa0038 }
ul.product-plans li.product-plan:nth-child(2) { --accent-color: #164fa9 }
ul.product-plans li.product-plan:nth-child(3) { --accent-color: #1a9b8b }
ul.product-plans li.product-plan:nth-child(4) { --accent-color: #fdca5e }
ul.product-plans li.product-plan:nth-child(5) { --accent-color: #301f33 }
ul.product-plans li.product-plan:nth-child(6) { --accent-color: #FF4B2B }
ul.product-plans li.product-plan {
--overlap-size: 1.5rem;
--border-radius: 5rem;
width: min(15rem, 100%);
margin-inline: var(--overlap-size);
padding-block: 2rem;
display: grid;
grid-template-rows: max-content max-content 1fr max-content;
gap: 0.5rem;
border-radius: var(--border-radius) 0 var(--border-radius) 0;
box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
width:29%;
font-size:14px;
}
ul.product-plans li.product-plan .title {
font-size: 1.4rem;
color: var(--accent-color);
text-align: center;
font-weight: 600;
}ul.product-plans li.product-plan .title span {
font-size: 1.2rem;
color: var(--accent-color);
font-weight: 600;
color:#000;
}
ul.product-plans li.product-plan .title2 {
font-size: 14px;
color: var(--accent-color);
text-align: center;
font-weight: 600;
color:#000;
margin:5px 20px;
border:2px solid #301f33;
border-radius: 6px;
padding:8px 0px;
}
ul.product-plans li.product-plan .price {
margin-right: calc(var(--overlap-size) * -1);
justify-self: end;
padding-block: 0.25rem;
padding-inline: var(--overlap-size);
background-color: var(--accent-color);
color: white;
position: relative;
}
ul.product-plans li.product-plan .price::after {
content: "";
position: absolute;
height: var(--overlap-size);
width: var(--overlap-size);
right: 0;
top: 100%;
background-color: inherit;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
clip-path: polygon(0 0, 100% 0, 0 100%);
}
ul.product-plans li.product-plan .btn {
justify-self: start;
margin-left: calc(var(--overlap-size) * -1);
padding-block: 0.5rem;
padding-inline: 2.5rem;
border: none;
font-family: inherit;
color: white;
font-size: 1.1rem;
background-color: var(--accent-color);
background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.25) 0);
background-size: 100% 200%;
transition: background-position 100ms ease;
position: relative;
cursor: pointer;
}
ul.product-plans li.product-plan .btn:focus-visible {
outline-offset: 5px;
outline: 2px solid var(--accent-color);
background-position: 0 100%;
}
ul.product-plans li.product-plan .btn:hover {
background-position: 0 100%;
}
ul.product-plans li.product-plan .btn::after {
content: "";
position: absolute;
height: var(--overlap-size);
width: var(--overlap-size);
left: 0;
bottom: 100%;
background-color: inherit;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
ul.product-plans li.product-plan .btn:active {
transform: scale(0.95);
}
ul.product-plans li.product-plan .btn:active::after {
transform-origin: left bottom;
transform: scale(0.9);
}
ul.product-plans li.product-plan .features {
align-self: flex-start;
list-style: none;
padding-inline: 2rem;
display: grid;
}
ul.product-plans li.product-plan .features li:not(:first-child) {
border-top: 1px solid rgb(200, 200, 200);
}
ul.product-plans li.product-plan .features li {
padding: 0.5rem;
display: grid;
gap: 1rem;
grid-template-columns: 1rem 1fr;
}
ul.product-plans li.product-plan .features li::before {
font-family: "Font Awesome 6 Pro";
font-weight: 900;
display: grid;
place-items: center;
}
ul.product-plans li.product-plan .features li.check::before {
content: "\2713";
color: green;
}
ul.product-plans li.product-plan .features li.cross::before {
content: "\d7";
color: red;
}
.sb {
margin: 0.5rem 0 2rem 0;
}
.pbm {
margin-top: 3rem;
}
ul.process-plans {
margin-inline: auto;
display: flex;
row-gap: 2rem;
flex-wrap: wrap;
justify-content: center;
list-style: none;
}
ul.process-plans li.process-plan:nth-child(1) { --accent-color: #7878ed }
ul.process-plans li.process-plan:nth-child(2) { --accent-color: #02b2e4 }
ul.process-plans li.process-plan:nth-child(3) { --accent-color: #00ccbc }
ul.process-plans li.process-plan:nth-child(4) { --accent-color: #5ddb79 }
ul.process-plans li.process-plan {
--overlap-size: 1.5rem;
--border-radius:20px;
padding-block: 1rem;
display: grid;
gap: 0.5rem;
border-radius: 0 var(--border-radius) 0 var(--border-radius);
box-shadow: 0.10rem 0.10rem 0.0rem rgba(0, 0, 0, 0.1);
width:100%;
font-size:14px;
background:#fff;
}
ul.process-plans li.process-plan p {
font-size: 0.8rem;
color: var(--accent-color);
color:#000;
padding:0px 20px 0px 20px;
}
ul.process-plans li.process-plan .price {
margin-left: calc(var(--overlap-size) * -4);
padding-block: 0.80rem;
padding-inline: var(--overlap-size);
background-color: var(--accent-color);
color: white;
position: absolute;
border-radius:50%;
font-weight:700;
}
ul.process-plans li.process-plan .btn {
justify-self: start;
margin-left: calc(var(--overlap-size) * -1);
padding-block: 0.5rem;
border: none;
font-family: inherit;
color: white;
font-size: 15px;
font-weight:700;
background-color: var(--accent-color);
background-image: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.25) 0);
background-size: 100% 200%;
transition: background-position 100ms ease;
position: relative;
cursor: pointer;
}
ul.process-plans li.process-plan .btn:focus-visible {
outline-offset: 5px;
outline: 2px solid var(--accent-color);
background-position: 0 100%;
}
ul.process-plans li.process-plan .btn:hover {
background-position: 0 100%;
}
ul.process-plans li.process-plan .btn::after {
content: "";
position: absolute;
height: var(--overlap-size);
width: var(--overlap-size);
left: 4px;
top: -45%;
background-color: inherit;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
clip-path: polygon(80% 0, 80% 80%, 0 80%);
}
ul.process-plans li.process-plan .btn:active {
transform: scale(0.95);
}
ul.process-plans li.process-plan .btn:active::after {
transform-origin: left bottom;
transform: scale(0.9);
}
.proccess-banner{
padding: 4rem 0px;
background-color: #f0d8c0;
}
.proccess-banner h1{
text-align:left;
}
.proccess-banner .me-3 {
margin-right: 0rem !important;
}
.proccess-banner .mb-4 {
text-align: left;
}
.hdn{ background-image: url(../img/strip.png);
background-repeat: no-repeat;
background-position: center bottom;
color: #301f33;
z-index: 1 !important;
font-weight: 700 !important;
position: relative !important;
padding-bottom: 20px;
}
.hdn2{ background-image: url(../img/strip3.png);
background-repeat: no-repeat;
background-position: center bottom;
color: #301f33;
z-index: 1 !important;
font-weight: 700 !important;
position: relative !important;
padding-bottom: 20px;
}
.hdn3{ background-image: url(../img/strip3.png);
background-repeat: no-repeat;
background-position: left bottom;
color: #301f33;
z-index: 1 !important;
font-weight: 700 !important;
position: relative !important;
padding-bottom: 20px;
}
.hdn4{ background-image: url(../img/strip4.png);
background-repeat: no-repeat;
background-position: left bottom;
color: #301f33;
z-index: 1 !important;
font-weight: 700 !important;
position: relative !important;
padding-bottom: 20px;
}
.hdn5{ background-image: url(../img/strip5.png);
background-repeat: no-repeat;
background-position: center bottom;
color: #301f33;
z-index: 1 !important;
font-weight: 700 !important;
position: relative !important;
padding-bottom: 20px;
}
.hdn6{ background-image: url(../img/strip6.png);
background-repeat: no-repeat;
background-position: left bottom;
color: #301f33;
z-index: 1 !important;
font-weight: 700 !important;
position: relative !important;
padding-bottom: 20px;
}
.Payment-Clause{
background-image: url(../img/payment-strip2.png);
background-repeat: no-repeat;
background-position: center bottom;
padding: 20px 20px 70px 20px;
}
.Payment-Clause h3{
font-weight:700;
font-size:22px;
background-image: url(../img/heading-strip.png);
background-repeat: no-repeat;
background-position: left top;
padding:20px;
}
.Payment-Clause p{ margin-top:20px;}
.mgm30{margin:0px auto 30px auto;}
.mgm50{margin:50px auto;}
.faq-sec{margin:0px 0 50px 0; padding:50px 0px; background:#eee;}
.btn-txt{ margin-top:20px;}
.img-top{ margin-top:70px;}
.mb-2 {text-align: left;}
.plans{padding: 12px;
font-size: 16px;
font-weight: 600;
border-radius:8px;
line-height:30px;
}
.plans ul{margin:0px; padding:0px;
list-style:none;
}
.plans ul li {
font-size: 12px;
font-weight: 600;
margin: 5px 0px;
border: 1px solid #301f33;
border-radius: 6px;
padding: 8px;
line-height:18px;
}
.plans input:checked ~ .checkmark {
background-color: #2196F3;
height: 25px!important;
width: 25px!important;
}
.plans input {
height: 25px!important;
width: 25px!important;
background-color: #eee!important;
margin:0px 5px 5px 0px;
float:left;
}
.plans.c1{ background:#FFA9B5;}
.plans.c2{ background:#ADD8E6;}
.plans.c3{ background:#fff0ed;}
/* ==============================
BRAND VARIABLES (OPTIONAL)
============================== */
:root {
--hk-blue: #0060B4;
--hk-blue-dark: #0b3a63;
--hk-orange: #ff4b2b;
--hk-light: #f6f8fb;
--hk-text: #222;
}
/* ==============================
BASE STRUCTURE
============================== */
.hk-section {
padding: 40px 0;
}
.hk-container {
width: 90%;
max-width: 1200px;
margin: auto;
}
.hk-section h1 {
font-size: 40px;
font-weight: 700;
color: var(--hk-text);
}
.hk-section h2 {
font-size: 32px;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
}
.hk-section p {
font-size: 16px;
line-height: 1.7;
margin-bottom: 15px;
}
.lt{text-align:left;}
.ft{float:left;}
/* ==============================
GRID SYSTEM
============================== */
.hk-grid-2,
.hk-grid-3,
.hk-grid-4,
.hk-grid-5 {
display: grid;
gap: 35px;
align-items: center;
}
.hk-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hk-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hk-grid-4 { grid-template-columns: repeat(4, 1fr); }
.hk-grid-5 { grid-template-columns: repeat(5, 1fr); }
/* ==============================
HERO
============================== */
.hk-hero {
background: linear-gradient(120deg, #fdfdfd, var(--hk-light));
}
.hk-hero h1 span.hk-orange {
color: var(--hk-orange);
}
.hk-image img {
width: 100%;
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}
/* ==============================
ICON LIST
============================== */
.hk-icon-list {
list-style: none;
padding-left: 0;
margin: 25px 0;
}
.hk-icon-list li {
display: flex;
align-items: center;
margin-bottom: 14px;
font-size: 15px;
}
.hk-icon-list li i {
color: var(--hk-orange);
font-size: 18px;
margin-right: 12px;
}
.hk-icon-list.white li i {
color: #fff;
}
/* ==============================
BUTTON
============================== */
.hk-btn {
display: inline-block;
padding: 14px 32px;
background: var(--hk-orange);
color: #fff;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.3s ease;
}
.hk-btn:hover {
background: #e68900;
transform: translateY(-3px);
}
.hk-btn-light {
background: #fff;
color: var(--hk-blue);
}
.hk-btn-light:hover {
background: #f2f2f2;
}
/* ==============================
CARDS
============================== */
.hk-card {
background: #fff;
padding: 32px;
border-radius: 14px;
text-align: center;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
transition: all 0.3s ease;
}
.hk-card:hover {
transform: translateY(-8px);
}
.hk-card h3 {
margin-top: 15px;
font-size: 20px;
}
.hk-icon {
font-size: 40px;
color: var(--hk-blue);
}
/* ==============================
HIGHLIGHT SECTION
============================== */
.hk-highlight {
background: linear-gradient(135deg, var(--hk-blue), var(--hk-blue-dark));
color: #fff;
}
.hk-highlight h2,
.hk-highlight p {
color: #fff;
text-align:left;
}
/* ==============================
LIGHT SECTION
============================== */
.hk-light {
background: var(--hk-light);
}
/* ==============================
PROCESS STEPS
============================== */
.hk-step {
background: #fff;
padding: 25px 15px;
text-align: center;
border-radius: 12px;
font-weight: 600;
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.hk-step i {
font-size: 28px;
color: var(--hk-orange);
margin-bottom: 10px;
}
/* ==============================
TESTIMONIAL
============================== */
.hk-testimonial {
background: #fff;
padding: 35px;
border-left: 6px solid var(--hk-orange);
font-style: italic;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* ==============================
CTA
============================== */
.hk-cta {
background: var(--hk-blue);
color: #fff;
text-align: center;
}
.hk-cta h2,
.hk-cta p {
color: #fff;
}
/* ==============================
RESPONSIVE
============================== */
@media (max-width: 992px) {
.hk-grid-4,
.hk-grid-5 {
grid-template-columns: repeat(2, 1fr);
}
.hk-section h1 {
font-size: 34px;
}
}
@media (max-width: 600px) {
.hk-grid-2,
.hk-grid-3,
.hk-grid-4,
.hk-grid-5 {
grid-template-columns: 1fr;
}
.hk-section {
padding: 60px 0;
}
.hk-section h1 {
font-size: 28px;
}
.hk-section h2 {
font-size: 26px;
}
}
.hk-profiles-advanced {
}
.hk-profiles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
}
.hk-profile-card {
background: #fff;
padding: 30px 25px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0,0,0,.08);
text-align: center;
}
.hk-icon svg {
width: 42px;
height: 42px;
stroke: #ff4b2b;
fill: none;
stroke-width: 2;
margin-bottom: 15px;
}
.hk-count {
display: inline-block;
margin: 8px 0 12px;
padding: 6px 14px;
font-size: 13px;
border-radius: 20px;
background: rgba(15,76,129,.1);
color: #ff4b2b;
}
.hk-toggle {
background: none;
border: none;
color: #ff4b2b;
font-weight: 600;
cursor: pointer;
margin-top: 10px;
}
.hk-roles {
display: none;
margin-top: 15px;
text-align: left;
font-size: 14px;
color: #444;
}
.hk-roles li {
margin-bottom: 6px;
}
.hk-highlight {
border: 2px solid #0060B4;
}
.journey-section {
padding: 90px 0;
background: #f8fafc;
}
.section-header {
text-align: center;
max-width: 760px;
margin: 0 auto 60px;
}
.section-tag {
color: #2563eb;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-header h2 {
font-size: 40px;
font-weight: 700;
margin: 12px 0;
}
.section-header p {
font-size: 16px;
}
.journey-timeline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 30px;
}
.journey-card {
background: #fff;
padding: 32px 26px;
border-radius: 18px;
text-align: center;
box-shadow: 0 12px 35px rgba(0,0,0,0.06);
transition: all 0.3s ease;
}
.journey-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}
.journey-icon {
width: 68px;
height: 68px;
margin: 0 auto 18px;
border-radius: 50%;
background: #eef2ff;
display: flex;
align-items: center;
justify-content: center;
}
.journey-icon svg {
width: 32px;
height: 32px;
stroke: #2563eb;
fill: none;
stroke-width: 1.8;
}
.journey-card h4 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.journey-card p {
font-size: 15px;
color: #555;
line-height: 1.6;
}
.journey-card.highlight {
border: 2px solid #2563eb;
background: linear-gradient(180deg, #f0f6ff, #ffffff);
}
/* ============================
CULTURE FIT / PROCESS SECTION
============================ */
.culture-fit {
padding: 90px 0;
background: #f9fbfd;
}
.section-header {
text-align: center;
max-width: 720px;
margin: 0 auto 50px;
}
.section-title {
font-size: 36px;
font-weight: 700;
margin: 12px 0;
}
.section-desc2 {
color: #fff;
font-size: 16px;
}
.culture-steps {
display: grid;
gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.step-card {
background: #fff;
padding: 32px 25px;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0,0,0,0.06);
text-align: left;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 45px rgba(0,0,0,0.09);
}
.icon-wrap {
width: 66px;
height: 66px;
margin-bottom: 18px;
background: #eef4ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrap svg {
width: 30px;
height: 30px;
stroke: #2563eb;
fill: none;
stroke-width: 1.8;
}
.step-card h4 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
color: #1d2636;
}
.step-card p {
font-size: 15px;
line-height: 1.65;
color: #555;
}
.purpose-principles {
padding: 90px 0;
background: #1e3a8a; /* Dark Blue Background */
color: #fff;
}
.section-header {
max-width: 750px;
margin: 0 auto 60px;
}
.section-tag {
color: #93c5fd;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-desc {
font-size: 16px;
color: #555;
}
.principles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 30px;
}
.principle-card {
background: #2563eb; /* Slightly lighter blue */
padding: 28px 24px;
border-radius: 18px;
box-shadow: 0 12px 32px rgba(0,0,0,0.12);
transition: all 0.3s ease;
}
.principle-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 48px rgba(0,0,0,0.15);
}
.icon-wrap {
width: 60px;
height: 60px;
margin-bottom: 18px;
background: #3b82f6; /* Lighter Blue Circle */
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.icon-wrap svg {
width: 28px;
height: 28px;
stroke: #fff;
fill: #fff;
stroke-width: 1.5;
}
.principle-card h4 {
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.principle-card p {
font-size: 15px;
line-height: 1.65;
color: #e0e7ff;
}
.company-inner p{ margin-bottom:25px;}
.hirekey-section {
background: #f8fafc;
}
/* LEFT PANEL */
.left-panel {
background: #301f33;
color: #fff;
display: flex;
align-items: center;
padding: 3rem 5rem;
}
.left-content {
width: 100%;
margin: auto;
}
.left-content h3 {
font-size: 26px;
font-weight: 700;
margin-bottom: 15px;
color:#fff!important;
}
.left-content p {
font-size: 15px;
line-height: 1.6;
margin-bottom: 20px;
}
.benefits-list {
list-style: none;
padding: 0;
margin: 25px 0;
}
.benefits-list li {
position: relative;
padding-left: 38px;
margin-bottom: 16px;
font-size: 15px;
color: #e6e6e6;
line-height: 1.6;
font-weight: 400;
}
/* Tick Circle */
.benefits-list li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #ff4d4d, #ff7a18); /* matches your logo tone */
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* Tick Icon */
.benefits-list li::after {
content: "✓";
position: absolute;
left: 5px;
top: 4px;
font-size: 14px;
color: #fff;
font-weight: bold;
}
/* Hover Effect (optional but premium feel) */
.benefits-list li:hover {
transform: translateX(5px);
transition: 0.3s ease;
color: #ffffff;
}
/* RIGHT PANEL */
.right-panel {
background: #ffffff;
padding: 1rem 2rem;
margin-left:5rem;
box-shadow: rgba(0, 0, 0, 0.06) 0px 24px 32px 0px;
border-width: 1px;
border-style: solid;
border-color: rgb(196, 196, 196);
border-image: initial;
border-radius: 5px;
}
.right-panel .mb-3 {
margin-bottom: 0rem !important; */
}
.form-container {
max-width: 900px;
margin: auto;
}
.right-panel .form-title {
width: 100%;
}
.form-title h3 {
font-size: 20px;
font-weight: 800;
}
.form-title p {
font-size: 14px;
color: #6c757d;
}
.right-panel .inquery-btn .banner-button.btn-style-2 {
width: 234px;
margin-top: 0px !important;
}
/* FORM STYLING */
.right-panel .text-field-input {
border-radius: 8px;
padding: 12px;
border: 1px solid #ddd!important;
font-size: 14px;
}
.right-panel .text-field-input:focus {
border-color: #0d6efd;
box-shadow: none;
}
/* RESPONSIVE */
@media (max-width: 640px) {
.right-panel {
padding: 1rem;
margin-left:0rem;
}
}
/* ========================================
PARENT CONTAINER
Required: parent must be position: relative
so the phone block can anchor to top-right
======================================== */
.col-lg-6 {
position: relative;
}
/* ========================================
PHONE BLOCK (top-right corner)
======================================== */
.hero-phone-link {
position: absolute;
top: 48px;
right: -100px;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
background: #ffffff;
border: 1.5px solid #e5e7eb;
border-radius: 12px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
z-index: 10;
}
.hero-phone-link:hover {
border-color: #0d3b6b;
box-shadow: 0 4px 12px rgba(13, 59, 107, 0.15);
transform: translateY(-1px);
text-decoration: none;
}
.hero-phone-link .phone-icon {
width: 22px;
height: 22px;
color: #0d3b6b;
flex-shrink: 0;
}
.hero-phone-link .phone-content {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.hero-phone-link .phone-number {
font-size: 16px;
font-weight: 600;
color: #1a1a1a;
letter-spacing: 0.2px;
}
.hero-phone-link .phone-hours {
font-size: 11px;
color: #6b7280;
font-weight: 400;
margin-top: 2px;
}
/* ========================================
HEADING & SUBHEADING
======================================== */
.hero-heading {
font-size: 36px;
font-weight: 800;
line-height: 1.2;
color: #1a2540;
margin-bottom: 16px;
letter-spacing: -0.5px;
}
.hero-subheading {
font-size: 14px;
line-height: 1.6;
color: #333;
margin-bottom: 24px;
max-width: 90%;
}
/* ========================================
USP BULLETS
======================================== */
.hero-bullets {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
}
.hero-bullets li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 500;
color: #1a1a1a;
}
.hero-bullets .bullet-icon {
width: 20px;
height: 20px;
color: #FF4B2B;
flex-shrink: 0;
}
/* ========================================
CTA BUTTONS
======================================== */
.hero-ctas {
display: flex;
gap: 12px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.btn-hire,
.btn-whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 18px;
font-size: 15px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: all 0.2s ease;
flex: 1;
min-width: 200px;
}
.btn-hire {
background: #FF4B2B;
color: #ffffff;
border: 1.5px solid #FF4B2B;
}
.btn-hire:hover {
background: #0a2d52;
border-color: #0a2d52;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13, 59, 107, 0.25);
}
.btn-whatsapp {
background: #25d366;
color: #ffffff;
border: 1.5px solid #25d366;
}
.btn-whatsapp:hover {
background: #1da851;
border-color: #1da851;
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25);
}
/* ========================================
TRUST LINE
======================================== */
.hero-trust-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 16px;
padding: 12px 0;
font-size: 14px;
color: #4b5563;
line-height: 1.5;
}
.hero-trust-line .trust-text strong {
color: #1a1a1a;
font-weight: 600;
}
.hero-trust-line .trust-divider {
color: #9ca3af;
font-weight: 600;
font-size: 16px;
}
.hero-trust-line .trust-rating {
display: inline-flex;
align-items: center;
gap: 6px;
}
.hero-trust-line .trust-star-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.hero-trust-line .trust-rating-value {
color: #FF4B2B;
font-weight: 600;
}
.hero-trust-line .trust-reviews {
color: #6b7280;
font-size: 13px;
}
/* ========================================
STAT BAND
======================================== */
.stat-band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0px 0;
}
.stat-card {
flex: 1;
text-align: center;
padding: 0 8px;
position: relative;
}
.stat-value {
font-size: 30px;
font-weight: 700;
color: #1a1a1a;
line-height: 1.1;
margin-bottom: 6px;
letter-spacing: -0.5px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 2px;
}
.stat-value .stat-accent {
color: #0d3b6b;
font-weight: 700;
}
.stat-value .stat-star {
width: 22px;
height: 22px;
margin-left: 4px;
}
.stat-label {
font-size: 12px;
color: #6b7280;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.2px;
}
/* ========================================
RESPONSIVE — TABLET
======================================== */
@media (max-width: 1024px) {
.hero-heading {
font-size: 36px;
}
.hero-phone-link {
padding: 8px 14px;
}
.hero-phone-link .phone-icon {
width: 20px;
height: 20px;
}
.hero-phone-link .phone-number {
font-size: 14px;
}
.stat-value {
font-size: 26px;
}
.stat-value .stat-star {
width: 20px;
height: 20px;
}
}
/* ========================================
RESPONSIVE — MOBILE
======================================== */
@media (max-width: 768px) {
/* Phone block becomes inline on mobile */
.hero-phone-link {
position: static;
margin-bottom: 24px;
display: inline-flex;
}
.hero-heading {
font-size: 28px;
line-height: 1.25;
}
.hero-subheading {
font-size: 15px;
max-width: 100%;
}
.hero-bullets {
flex-direction: column;
gap: 10px;
}
.hero-bullets li {
font-size: 14px;
}
.hero-ctas {
flex-direction: column;
}
.btn-hire,
.btn-whatsapp {
width: 100%;
flex: none;
}
/* Trust line stacks vertically */
.hero-trust-line {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.hero-trust-line .trust-divider {
display: none;
}
/* Stat band becomes 2x2 grid */
.stat-band {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 24px 0;
}
.stat-card {
padding: 16px 8px;
}
.stat-card::after {
display: none;
}
.stat-card:nth-child(odd) {
border-right: 2px dotted #d1d5db;
}
.stat-card:nth-child(1),
.stat-card:nth-child(2) {
border-bottom: 2px dotted #d1d5db;
}
.stat-value {
font-size: 24px;
}
.stat-label {
font-size: 11px;
}
}
/* ========================================
RESPONSIVE — SMALL MOBILE
======================================== */
@media (max-width: 480px) {
.hero-heading {
font-size: 24px;
}
.stat-value {
font-size: 22px;
}
.stat-value .stat-star {
width: 18px;
height: 18px;
}
}
.form-trust-line {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px 10px;
margin-top: 12px;
font-size: 12px;
color: #6b7280;
line-height: 1.5;
text-align: center;
}
.form-trust-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.form-trust-item svg {
flex-shrink: 0;
opacity: 0.75;
}
.form-trust-divider {
color: #9ca3af;
font-weight: 600;
}
@media (max-width: 480px) {
.form-trust-divider {
display: none;
}
.form-trust-line {
flex-direction: column;
gap: 6px;
}
}
.comparison-section {
padding: 40px 20px;
background: var(--bg);
}
.comparison-container {
max-width: 1180px;
margin: 0 auto;
}
.comparison-header {
text-align: center;
margin-bottom: 48px;
}
.comparison-eyebrow {
display: inline-block;
padding: 6px 14px;
background: #e6f0ff;
color: #0d3b6b;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: 20px;
margin-bottom: 16px;
}
.comparison-title {
font-size: 30px;
font-weight: 800;
color: #1a2540;
margin: 0 0 16px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.comparison-subtitle {
font-size: 16px;
color: #6b7280;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.comparison-table-wrap {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 24px rgba(13, 59, 107, 0.06);
overflow-x: auto;
border: 1px solid #eaedf2;
}
.comparison-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
.comparison-table thead tr {
background: #f7f9fc;
border-bottom: 2px solid #eaedf2;
}
.comparison-table th {
padding: 22px 20px;
text-align: left;
font-size: 14px;
font-weight: 600;
color: #4b5563;
vertical-align: bottom;
}
.comparison-table .th-feature {
width: 28%;
}
.comparison-table .th-hirekey {
background: linear-gradient(180deg, #0d3b6b 0%, #134881 100%);
color: #ffffff;
position: relative;
text-align: center;
width: 24%;
border-radius: 12px 12px 0 0;
}
.comparison-table .th-hirekey .th-badge {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: #f59e0b;
color: #ffffff;
padding: 4px 14px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: 20px;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}
.comparison-table .th-hirekey .th-name {
display: block;
font-size: 20px;
font-weight: 700;
margin-top: 6px;
}
.comparison-table .th-other {
text-align: center;
width: 24%;
font-weight: 600;
color: #1a2540;
}
.comparison-table .th-other .th-sub {
display: block;
font-size: 12px;
font-weight: 400;
color: #6b7280;
margin-top: 4px;
}
.comparison-table tbody tr {
border-bottom: 1px solid #eaedf2;
transition: background 0.15s ease;
}
.comparison-table tbody tr:last-child {
border-bottom: none;
}
.comparison-table tbody tr:hover {
background: #fafbfc;
}
.comparison-table td {
padding: 18px 20px;
font-size: 14px;
color: #1a2540;
vertical-align: middle;
}
.cell-feature {
font-weight: 600;
color: #1a2540;
}
.cell-hirekey {
background: rgba(13, 59, 107, 0.03);
text-align: center;
font-weight: 600;
color: #0d3b6b;
border-left: 1px solid #eaedf2;
border-right: 1px solid #eaedf2;
}
.cell-other {
text-align: center;
color: #4b5563;
}
.cell-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
font-size: 12px;
font-weight: 700;
margin-right: 6px;
vertical-align: middle;
}
.cell-icon.yes {
background: #dcfce7;
color: #16a34a;
}
.cell-icon.no {
background: #fee2e2;
color: #dc2626;
}
.comparison-cta {
text-align: center;
margin-top: 40px;
}
.comparison-cta-text {
font-size: 16px;
color: #4b5563;
margin-bottom: 16px;
}
.comparison-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 16px 32px;
background: #0d3b6b;
color: #ffffff!important;
font-size: 15px;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(13, 59, 107, 0.2);
}
.comparison-cta-btn:hover {
background: #0a2d52;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(13, 59, 107, 0.3);
text-decoration: none;
}
/* Tablet */
@media (max-width: 900px) {
.comparison-section {
padding: 60px 16px;
background: var(--bg);
}
.comparison-title {
font-size: 28px;
}
.comparison-table th,
.comparison-table td {
padding: 14px 12px;
font-size: 13px;
}
.comparison-table .th-hirekey .th-name {
font-size: 16px;
}
}
/* Mobile */
@media (max-width: 640px) {
.comparison-section {
padding: 48px 12px;
background: var(--bg);
}
.comparison-header {
margin-bottom: 32px;
}
.comparison-title {
font-size: 24px;
}
.comparison-subtitle {
font-size: 14px;
}
.comparison-table {
font-size: 12px;
}
.comparison-table th,
.comparison-table td {
padding: 12px 10px;
font-size: 12px;
}
}
.roles-section {
padding: 20px 20px;
background: #ffffff;
}
.roles-container {
max-width: 1180px;
margin: 0 auto;
}
.roles-header {
text-align: center;
margin-bottom: 56px;
}
.roles-eyebrow {
display: inline-block;
padding: 6px 14px;
background: #e6f0ff;
color: #0d3b6b;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: 20px;
margin-bottom: 16px;
}
.roles-title {
font-size: 30px;
font-weight: 800;
color: #1a2540;
margin: 0 0 16px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.roles-subtitle {
font-size: 16px;
color: #6b7280;
max-width: 660px;
margin: 0 auto;
line-height: 1.6;
}
.roles-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 48px;
}
.role-card {
background: #ffffff;
border: 1px solid #eaedf2;
border-radius: 14px;
padding: 28px 22px;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
}
.role-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #0d3b6b, #2563eb);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.role-card:hover {
border-color: #0d3b6b;
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(13, 59, 107, 0.1);
}
.role-card:hover::before {
transform: scaleX(1);
}
.role-icon {
width: 52px;
height: 52px;
border-radius: 12px;
background: #e6f0ff;
color: #0d3b6b;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
transition: all 0.25s ease;
}
.role-icon svg {
width: 26px;
height: 26px;
}
.role-card:hover .role-icon {
background: #0d3b6b;
color: #ffffff;
}
.role-name {
font-size: 17px;
font-weight: 700;
color: #1a2540;
margin: 0 0 10px;
line-height: 1.3;
}
.role-desc {
font-size: 13px;
color: #6b7280;
line-height: 1.55;
margin: 0;
}
.roles-cta {
text-align: center;
padding: 32px;
background: #f7f9fc;
border-radius: 14px;
border: 1px dashed #cbd5e0;
}
.roles-cta-text {
font-size: 15px;
color: #4b5563;
margin: 0 0 12px;
}
.roles-cta-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #0d3b6b;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: gap 0.2s ease;
}
.roles-cta-link:hover {
gap: 10px;
color: #0a2d52;
text-decoration: none;
}
/* Laptop */
@media (max-width: 1024px) {
.roles-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Tablet */
@media (max-width: 768px) {
.roles-section {
padding: 60px 16px;
}
.roles-title {
font-size: 28px;
}
.roles-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.role-card {
padding: 22px 18px;
}
.role-name {
font-size: 15px;
}
.role-desc {
font-size: 12px;
}
}
/* Mobile */
@media (max-width: 480px) {
.roles-section {
padding: 48px 12px;
}
.roles-title {
font-size: 24px;
}
.roles-grid {
grid-template-columns: 1fr;
}
.roles-cta {
padding: 24px 16px;
}
}
.pricing-section {
padding: 20px 20px;
}
.pricing-container {
max-width: 1100px;
margin: 0 auto;
}
.pricing-header {
text-align: center;
margin-bottom: 56px;
}
.pricing-eyebrow {
display: inline-block;
padding: 6px 14px;
background: #e6f0ff;
color: #0d3b6b;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.8px;
text-transform: uppercase;
border-radius: 20px;
margin-bottom: 16px;
}
.pricing-title {
font-size: 30px;
font-weight: 800;
color: #1a2540;
margin: 0 0 16px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.pricing-subtitle {
font-size: 16px;
color: #6b7280;
max-width: 680px;
margin: 0 auto;
line-height: 1.6;
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 40px;
}
.pricing-section {
overflow-x: hidden;
}
.pricing-card {
background: #ffffff;
border: 1px solid #eaedf2;
border-radius: 18px;
padding: 36px 32px;
position: relative;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px rgba(13, 59, 107, 0.1);
border-color: #cbd5e0;
}
.pricing-card-featured {
background: linear-gradient(180deg, #0d3b6b 0%, #134881 100%);
color: #ffffff;
border-color: #0d3b6b;
box-shadow: 0 12px 32px rgba(13, 59, 107, 0.18);
transform: scale(1.02);
}
.pricing-card-featured:hover {
transform: scale(1.02) translateY(-4px);
box-shadow: 0 20px 48px rgba(13, 59, 107, 0.25);
}
.pricing-card-featured h3{
color: #ffffff!important;
}
.pricing-card-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: #f59e0b;
color: #ffffff;
padding: 6px 18px;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
border-radius: 20px;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
.pricing-card-head {
margin-bottom: 28px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pricing-card:not(.pricing-card-featured) .pricing-card-head {
border-bottom-color: #eaedf2;
}
.pricing-card-name {
font-size: 22px;
font-weight: 700;
margin: 0 0 8px;
color: #1a2540;
line-height: 1.3;
}
.pricing-card-featured .pricing-card-name {
color: #ffffff;
}
.pricing-card-tagline {
font-size: 14px;
color: #6b7280;
margin: 0;
line-height: 1.5;
}
.pricing-card-featured .pricing-card-tagline {
color: rgba(255, 255, 255, 0.85);
}
.pricing-features {
flex: 1;
margin-bottom: 28px;
}
.pricing-feature {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: #1a2540;
margin-bottom: 14px;
line-height: 1.5;
}
.pricing-card-featured .pricing-feature {
color: rgba(255, 255, 255, 0.95);
}
.feature-tick {
width: 22px;
height: 22px;
border-radius: 50%;
background: #dcfce7;
color: #16a34a;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 1px;
}
.feature-tick svg {
width: 12px;
height: 12px;
}
.pricing-card-featured .feature-tick {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.pricing-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 24px;
background: #ffffff;
color: #0d3b6b;
border: 1.5px solid #0d3b6b;
border-radius: 10px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
width: 100%;
}
.pricing-cta:hover {
background: #0d3b6b;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 59, 107, 0.2);
text-decoration: none;
}
.pricing-cta-featured {
background: #ffffff;
color: #0d3b6b;
border-color: #ffffff;
}
.pricing-cta-featured:hover {
background: #f59e0b;
border-color: #f59e0b;
color: #ffffff;
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3);
}
.pricing-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 24px;
background: #f7f9fc;
border-radius: 12px;
border: 1px solid #eaedf2;
text-align: center;
}
.pricing-footer-icon {
width: 22px;
height: 22px;
color: #0d3b6b;
flex-shrink: 0;
}
.pricing-footer-text {
font-size: 14px;
color: #4b5563;
margin: 0;
line-height: 1.5;
}
.pricing-footer-text a {
color: #0d3b6b;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: opacity 0.2s ease;
}
.pricing-footer-text a:hover {
opacity: 0.7;
}
/* Tablet */
@media (max-width: 900px) {
.pricing-section {
padding: 60px 16px;
}
.pricing-title {
font-size: 28px;
}
.pricing-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.pricing-card {
padding: 28px 22px;
}
.pricing-card-featured {
transform: scale(1);
}
.pricing-card-featured:hover {
transform: translateY(-4px);
}
.pricing-card-name {
font-size: 20px;
}
}
/* Mobile */
@media (max-width: 640px) {
.pricing-section {
padding: 48px 12px;
}
.pricing-title {
font-size: 24px;
}
.pricing-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.pricing-card-featured {
transform: scale(1);
}
.pricing-card-featured:hover {
transform: translateY(-4px);
}
.pricing-footer {
flex-direction: column;
gap: 8px;
padding: 16px;
}
}
.enquiry-form .form-right {
z-index: 2;
border: 1px solid #c4c4c4;
border-radius: 5px;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
width: 100%;
max-width: 100%;
height: fit-content;
padding: 16px;
position: sticky;
top: 100px;
}
.enquiry-form .form-right input, .enquiry-form .form-right select{
border-radius: 3px;
border: 1px solid #DDD;
background: #FCFCFC;
padding: 6px 8px;
margin-top: -8px;
font-size:12px;
/* height: auto !important; */
}
.form-right .form-control {
display: block;
width: 100%;
padding: 6px 8px;
font-size:12px;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--bs-body-bg);
background-clip: padding-box;
border: var(--bs-border-width) solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
/* ================================================================= */
/* ── EMPLOYER & CONTACT PAGE CSS ────────────────────────────────── */
/* ================================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
svg{display:inline-block;vertical-align:middle;flex-shrink:0}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section2{padding:0px 0px 72px 0px}
.section3{padding:72px 0px 0px 0px}
.section-alt{background:var(--bg)}
.section-dark{background:var(--primary)}
.text-center{text-align:center}
.section-title{margin-bottom:14px}
.section-sub{max-width:660px;margin:0 auto;font-size:1rem; padding-bottom:20px;}
/* ── TAGS ── */
.tag{display:inline-flex;align-items:center;gap:6px;background:rgba(232,88,12,.12);color:var(--accent);font-family:var(--font-head);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px;border-radius:50px;margin-bottom:14px}
.tag-blue{background:rgba(15,52,96,.1);color:var(--primary)}
.tag-gold{background:rgba(245,166,35,.18);color:var(--gold)}
/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:var(--radius);font-family:var(--font-head);font-size:.95rem;font-weight:700;cursor:pointer;border:none;transition:var(--tr);white-space:nowrap;text-decoration:none}
.btn-primary{background:var(--accent);color:var(--white);box-shadow:0 4px 20px rgba(232,88,12,.35)}
.btn-primary:hover{background:var(--accent-light);transform:translateY(-2px)}
.btn-white{background:var(--white);color:var(--primary)}
.btn-white2{background: var(--white);
color: var(--primary);
border: 1px solid #d6e0ef;
display: inline-flex;
margin: 6px 0px;}
.btn-white2:hover{background:var(--bg)}
.btn-white:hover{background:var(--bg)}
.btn-outline-w{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.5)}
.btn-outline-w:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn-wa{background:#25D366;color:var(--white);box-shadow:0 4px 18px rgba(37,211,102,.3)}
.btn-wa:hover{background:#1fba5a}
.btn-lg{padding:17px 36px;font-size:1.05rem}
/* ── HERO ── */
.hero{background:linear-gradient(135deg,var(--primary) 0%,#1a4f8a 55%,#0d2b52 100%);padding:72px 0 50px 0;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-100px;right:-100px;width:550px;height:550px;background:radial-gradient(circle,rgba(232,88,12,.16) 0%,transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:start;position:relative;z-index:1}
.hero-content{padding-bottom:0px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--gold);font-family:var(--font-head);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;border-radius:50px;margin-bottom:22px}
.hero h1{color:var(--white);margin-bottom:18px; font-weight:800;}
.hero h1 span{color:var(--gold)}
.hero-sub{color:rgba(255,255,255,.82);font-size:1.05rem;margin-bottom:30px}
.hero-checks{display:flex;flex-wrap:wrap;gap:9px 22px;margin-bottom:34px}
.hero-check{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);font-size:.88rem;font-family:var(--font-head);font-weight:500}
.hc-icon{width:20px;height:20px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero-btns{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:40px}
.hero-stats{display:flex;gap:28px;border-top:1px solid rgba(255,255,255,.15);padding-top:26px;flex-wrap:wrap}
.hs-val{font-family:var(--font-head);font-size:1.55rem;font-weight:800;color:var(--gold);display:block}
.hs-lbl{font-size:.78rem;color:rgba(255,255,255,.6);font-family:var(--font-head)}
/* Hero form */
.hero-form-card{background:var(--white);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow-lg);position:relative;z-index:2}
/* ── TRUST BAR ── */
.trust-bar{background:var(--white);border-bottom:1px solid var(--border);padding:40px 0}
.trust-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px 32px}
.trust-item{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-size:.86rem;font-weight:600;color:var(--primary)}
.ti-icon{width:36px;height:36px;background:var(--bg-alt);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.trust-div{width:1px;height:28px;background:var(--border)}
/* ── HOW IT WORKS ── */
.steps-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:48px}
.steps-grid::before{content:'';position:absolute;top:31px;left:10%;right:10%;height:2px;background:linear-gradient(to right,var(--primary),var(--accent));z-index:0}
.step-item{text-align:center;padding:0 10px;position:relative;z-index:1}
.step-num{width:62px;height:62px;background:var(--primary);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.25rem;font-weight:800;margin:0 auto 16px;border:4px solid var(--white);box-shadow:var(--shadow-md);transition:var(--tr)}
.step-item:hover .step-num{background:var(--accent);transform:scale(1.08)}
.step-item h4{font-size:.92rem;margin-bottom:6px}
.step-item p{font-size:.8rem;color:var(--muted)}
/* ── STATS ── */
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.stat-card{background:var(--white);border-radius:var(--radius-lg);padding:26px 18px;text-align:center;box-shadow:var(--shadow-sm);border:1.5px solid var(--border);transition:var(--tr)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:var(--primary)}
.stat-icon{width:48px;height:48px;background:var(--bg-alt);border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.stat-val{font-family:var(--font-head);font-size:1.9rem;font-weight:800;color:var(--primary);display:block}
.stat-lbl{font-size:.8rem;color:var(--muted);font-family:var(--font-head)}
/* ── ROLES ── */
.roles-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.role-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;transition:var(--tr);position:relative;overflow:hidden}
.role-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--primary),var(--accent));transform:scaleX(0);transition:var(--tr);transform-origin:left}
.role-card:hover{border-color:var(--primary);box-shadow:var(--shadow-md);transform:translateY(-4px)}
.role-card:hover::after{transform:scaleX(1)}
.role-icon{width:46px;height:46px;background:var(--bg-alt);border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.role-card h3{font-size:.96rem;margin-bottom:6px}
.role-count{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--accent);display:block;margin-bottom:6px}
.role-sub{font-size:.78rem;color:var(--muted);margin-bottom:12px}
.role-tags{display:flex;flex-wrap:wrap;gap:4px}
.role-pill{background:var(--bg-alt);color:var(--primary);font-size:.7rem;font-family:var(--font-head);font-weight:600;padding:3px 9px;border-radius:50px}
/* ── PAY PER HIRE ── */
.pph-banner{background:linear-gradient(135deg,var(--primary) 0%,#1a4f8a 100%);border-radius:var(--radius-lg);padding:52px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;position:relative;overflow:hidden}
.pph-banner::before{content:'';position:absolute;right:-80px;top:-80px;width:340px;height:340px;background:radial-gradient(circle,rgba(245,166,35,.16) 0%,transparent 70%)}
.pph-text{flex:1;position:relative;z-index:1}
.pph-text h2{color:var(--white);margin-bottom:10px}
.pph-text p{color:rgba(255,255,255,.8);max-width:490px;margin-bottom:18px}
.pph-feats{display:flex;flex-wrap:wrap;gap:8px 20px}
.pph-feat{display:flex;align-items:center;gap:6px;color:rgba(255,255,255,.88);font-size:.82rem;font-family:var(--font-head);font-weight:500}
.pph-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;flex-shrink:0}
.pph-cta{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap}
/* ── COMPARE TABLE ── */
.compare-wrap{overflow-x:auto;margin-top:40px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
table.compare{width:100%;border-collapse:collapse}
.compare thead tr{background:var(--primary)}
.compare th{padding:18px 20px;text-align:center;font-family:var(--font-head);font-size:.88rem;font-weight:700;color:var(--white)}
.compare th:first-child{text-align:left}
.compare th.hl{background:var(--accent)}
.compare tbody tr:nth-child(even){background:var(--bg)}
.compare tbody tr:nth-child(odd){background:var(--white)}
.compare td{padding:14px 20px;font-size:.86rem;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
.compare td:first-child{text-align:left;font-weight:600;color:var(--text);font-family:var(--font-head);font-size:.84rem}
.compare td.hl{background:rgba(232,88,12,.05)}
.c-yes{display:inline-flex;align-items:center;gap:5px;color:#16a34a;font-family:var(--font-head);font-size:.84rem;font-weight:700}
.c-no{display:inline-flex;align-items:center;gap:5px;color:#dc2626;font-family:var(--font-head);font-size:.84rem;font-weight:700}
.c-partial{color:var(--gold);font-size:.82rem;font-weight:600}
/* ── INDUSTRIES ── */
.industries-grid{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;justify-content:center}
.industry-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:20px 18px;text-align:center;width:calc(20% - 14px);transition:var(--tr)}
.industry-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.industry-card img{width:68px;height:68px;object-fit:contain;margin:0 auto 10px;border-radius:9px}
.industry-card span{display:block;font-family:var(--font-head);font-size:.82rem;font-weight:600;color:var(--primary)}
/* ── TESTIMONIALS ── */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tcard{background:var(--white);border-radius:var(--radius-lg);padding:26px 22px;box-shadow:var(--shadow-sm);border:1.5px solid var(--border);transition:var(--tr);position:relative}
.tcard::before{content:'"';position:absolute;top:16px;right:20px;font-size:3.5rem;line-height:1;color:var(--bg-alt);font-family:Georgia,serif}
.tcard:hover{box-shadow:var(--shadow-md);border-color:var(--primary)}
.stars{display:flex;gap:3px;margin-bottom:10px}
.ttext{font-size:.88rem;color:var(--muted);line-height:1.72;margin-bottom:18px}
.tauthor{display:flex;align-items:center;gap:11px}
.tavatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--border)}
.tname{font-family:var(--font-head);font-size:.88rem;font-weight:700;color:var(--primary)}
.trole{font-size:.75rem;color:var(--muted)}
/* Google badge */
.google-badge{display:flex;align-items:center;gap:10px;background:var(--white);border-radius:var(--radius);padding:12px 18px;box-shadow:var(--shadow-sm);border:1.5px solid var(--border);width:fit-content;margin:32px auto 0}
.g-word{font-family:Arial,sans-serif;font-size:1.2rem;font-weight:700}
.g-word span:nth-child(1){color:#4285F4}.g-word span:nth-child(2){color:#EA4335}
.g-word span:nth-child(3){color:#FBBC05}.g-word span:nth-child(4){color:#4285F4}
.g-word span:nth-child(5){color:#34A853}.g-word span:nth-child(6){color:#EA4335}
.g-stars{display:flex;gap:2px}
.g-score{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:var(--text)}
.g-count{font-size:.74rem;color:var(--muted)}
/* ── WHY HIREKEY ── */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.why-feats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wf{background:var(--bg);border-radius:var(--radius);padding:18px 16px;border-left:4px solid var(--accent);transition:var(--tr)}
.wf:hover{background:rgba(232,88,12,.05)}
.wf-icon{width:36px;height:36px;background:rgba(232,88,12,.1);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.wf h4{font-size:.9rem;margin-bottom:5px}
.wf p{font-size:.8rem}
/* ── GUARANTEE ── */
.guarantee-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.gcard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-lg);padding:28px 22px;text-align:center;transition:var(--tr)}
.gcard:hover{background:rgba(255,255,255,.14);transform:translateY(-4px)}
.gcard-icon{width:58px;height:58px;background:rgba(245,166,35,.15);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.gcard h3{font-size:1rem;color:var(--white)!important;margin-bottom:8px}
.gcard p{font-size:.83rem;color:rgba(255,255,255,.7)}
/* ── LOCATIONS ── */
.locations-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:34px}
.loc-chip{display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);padding:15px 10px;font-family:var(--font-head);font-size:.81rem;font-weight:600;color:var(--primary);text-align:center;transition:var(--tr)}
.loc-chip:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-sm)}
.loc-chip svg{opacity:.7}
.loc-chip:hover svg{opacity:1}
/* ── FAQ ── */
.faq-list{max-width:760px;margin:38px auto 0}
.faq-item{border:1.5px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden}
.faq-item:hover{box-shadow:var(--shadow-sm)}
.faq-q{width:100%;background:var(--white);border:none;padding:17px 20px;text-align:left;font-family:var(--font-head);font-size:.94rem;font-weight:700;color:var(--primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq-arrow{width:26px;height:26px;background:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--tr)}
.faq-item.open .faq-arrow{transform:rotate(180deg);background:rgba(22, 163, 74, .6);}
.faq-item.open .faq-arrow svg path{stroke:#fff}
.faq-a{padding:0 20px 16px;font-size:.88rem;color:var(--muted);line-height:1.74;display:none}
.faq-item.open .faq-a{display:block}
/* ── CLIENTS ── */
.clients-track{overflow:hidden;margin-top:34px;padding:10px 0;max-width:100%}
.clients-strip{display:flex;align-items:center;gap:40px;animation:marquee 28s linear infinite;white-space:nowrap;will-change:transform}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.clients-track:hover .clients-strip{animation-play-state:paused}
.client-logo{height:34px;max-width: none;filter:grayscale(100%);opacity:.5;transition:var(--tr);object-fit:contain;flex-shrink:0}
.client-logo:hover{filter:none;opacity:1}
/* ── FINAL CTA ── */
.final-cta{background:linear-gradient(135deg,var(--accent) 0%,#c94500 100%);border-radius:var(--radius-lg);padding:58px 46px;text-align:center;position:relative;overflow:hidden}
.final-cta::before{content:'';position:absolute;top:-60px;right:-60px;width:280px;height:280px;background:rgba(255,255,255,.08);border-radius:50%}
.final-cta h2{color:var(--white);margin-bottom:12px}
.final-cta p{color:rgba(255,255,255,.85);max-width:500px;margin:0 auto 28px}
.final-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* ── FOOTER ── */
.footer{background:#071428}
.footer-top{padding:58px 0 38px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:38px}
.footer-brand img{height:38px;margin-bottom:14px;filter:brightness(5)}
.footer-brand p{font-size:.84rem;color:rgba(255,255,255,.6);line-height:1.7;margin-bottom:18px}
.footer-contact a{color:rgba(255,255,255,.65);font-size:.83rem;align-items:center;gap:8px;margin-bottom:8px;transition:color .2s}
.footer-contact a:hover{color:var(--gold)}
.footer-socials{display:flex;gap:9px;margin-top:14px}
.f-social{width:36px;height:36px;background:rgba(255,255,255,.08);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.f-social:hover{background:var(--accent)}
.footer-col h4{font-family:var(--font-head);font-size:.9rem;font-weight:700;color:var(--white);margin-bottom:16px;padding-bottom:9px;border-bottom:2px solid var(--accent);display:inline-block}
.footer-col ul{display:flex;flex-direction:column;gap:8px}
.footer-col a{font-size:.83rem;color:rgba(255,255,255,.6);transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{background:rgba(0,0,0,.28);padding:16px 0}
.footer-bottom-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:.79rem;color:rgba(255,255,255,.4)}
.footer-bottom a{color:rgba(255,255,255,.4);transition:color .2s}
.footer-bottom a:hover{color:var(--gold)}
.fb-links{display:flex;gap:18px}
/* Float WA */
.float-wa{position:fixed;bottom:26px;right:26px;z-index:999;background:#25D366;color:white;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 22px rgba(37,211,102,.4);transition:var(--tr)}
.float-wa:hover{transform:scale(1.1)}
/* ── RESPONSIVE ── */
@media(max-width:1024px){
.hero-grid{grid-template-columns:1fr}.hero-form-card{max-width:520px}
.roles-grid{grid-template-columns:repeat(2,1fr)}
.steps-grid{grid-template-columns:repeat(3,1fr);gap:24px}.steps-grid::before{display:none}
.stats-grid{grid-template-columns:repeat(3,1fr)}
.testimonials-grid{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.locations-grid{grid-template-columns:repeat(4,1fr)}
.why-grid{grid-template-columns:1fr;gap:30px}
.pph-banner{flex-direction:column;padding:36px 28px}
}
@media(max-width:768px){
.section{padding:52px 0}
.nav-menu,.navbar-cta{display:none}
.hamburger{display:flex}
.hero{padding:44px 0 30px 0}
.roles-grid{grid-template-columns:1fr 1fr}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.steps-grid{grid-template-columns:1fr 1fr}
.testimonials-grid{grid-template-columns:1fr}
.guarantee-grid{grid-template-columns:1fr}
.locations-grid{grid-template-columns:repeat(3,1fr)}
.footer-grid{grid-template-columns:1fr}
.industry-card{width:calc(33% - 14px)}
.compare th,.compare td{padding:10px 12px;font-size:.78rem}
.final-cta{padding:40px 22px}
}
@media(max-width:480px){
.roles-grid{grid-template-columns:1fr}
.steps-grid{grid-template-columns:1fr}
.industry-card{width:calc(50% - 14px)}
.locations-grid{grid-template-columns:repeat(2,1fr)}
.stats-grid{grid-template-columns:1fr 1fr}
.hero-stats{gap:16px}
}
/* ══ EMAIL CONTACT CARDS ══════════════════════════════ */
.email-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.email-card { background: var(--white); border-radius: var(--radius-lg); padding: 30px 26px; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); transition: var(--tr); display: flex; flex-direction: column; }
.email-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.email-card-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.email-card-icon.employers { background: rgba(15,52,96,.1); }
.email-card-icon.jobseeker { background: rgba(22,163,74,.1); }
.email-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.email-card p { font-size: .86rem; margin-bottom: 16px; flex: 1; }
.email-address { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: .88rem; font-weight: 700; color: var(--accent); padding: 8px 14px; background: rgba(232,88,12,.07); border-radius: 8px; margin-bottom: 14px; transition: var(--tr); word-break: break-all; overflow-wrap: break-word; max-width: 100%; }
.email-address:hover { background: rgba(232,88,12,.14); }
/* ══ MAIN CONTACT SECTION ════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 440px; gap: 48px; align-items: start; }
/* ── Contact Form Card ── */
.contact-form-card { background: var(--white); border-radius: var(--radius-lg); padding: 38px 34px; box-shadow: var(--shadow-md); border: 1.5px solid var(--border); }
.contact-form-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.contact-form-card > p { font-size: .9rem; color: var(--muted); margin-bottom: 28px; }
/* Tab switcher */
.tab-bar { display: flex; background: var(--bg); border-radius: 10px; padding: 4px; gap: 4px; margin-bottom: 26px; }
.tab-btn { flex: 1; padding: 10px 14px; border: none; background: transparent; border-radius: 8px; font-family: var(--font-head); font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer; transition: var(--tr); display: flex; align-items: center; justify-content: center; gap: 7px; }
.tab-btn.active { background: var(--white); color: var(--primary); box-shadow: var(--shadow-sm); }
.tab-btn:hover:not(.active) { color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.form-group { margin-bottom: 0px; margin-top: 0px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px;margin-top: 0px; }
.form-group label { display: block; font-size: .8rem; font-weight: 700; color: var(--text); margin-bottom: 5px; font-family: var(--font-head); }
.form-control { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 9px; font-size: .9rem; font-family: var(--font-body); color: var(--text); background: var(--white); transition: border .2s, box-shadow .2s; outline: none; }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,52,96,.08); }
.form-control::placeholder { color: #9aa5b8; }
textarea.form-control { resize: vertical; min-height: 100px; }
.form-submit { width: 100%; justify-content: center; font-size: 1rem; padding: 15px; margin-top: 6px; }
.form-disclaimer { font-size: .74rem; color: var(--muted); margin-top: 10px; line-height: 1.5; display: flex; align-items: flex-start; gap: 6px; }
/* ── Info Sidebar ── */
.info-sidebar { display: flex; flex-direction: column; gap: 18px; overflow: hidden; }
.info-card { background: var(--white); border-radius: var(--radius-lg); padding: 24px 22px; border: 1.5px solid var(--border); box-shadow: var(--shadow-sm); transition: var(--tr); overflow: hidden; }
.info-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); }
.info-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.info-card-icon { width: 42px; height: 42px; background: var(--bg-alt); border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.info-card-head h4 { font-size: .96rem; font-weight: 700; }
.info-card-head span { font-size: .77rem; color: var(--muted); display: block; margin-top: 1px; }
.info-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.info-row:last-child { margin-bottom: 0; }
.info-row svg { margin-top: 2px; flex-shrink: 0; }
.info-row-text { font-size: .86rem; color: var(--text); line-height: 1.55; }
.info-row-text a { color: var(--primary); font-weight: 600; transition: color .2s; }
.info-row-text a:hover { color: var(--accent); }
.info-row-label { font-size: .72rem; color: var(--muted); font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 2px; }
/* Hours card */
.hours-list { display: flex; flex-direction: column; gap: 8px; }
.hours-row { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; }
.hours-day { color: var(--muted); font-family: var(--font-head); font-weight: 500; }
.hours-time { font-weight: 700; color: var(--text); font-family: var(--font-head); font-size: .82rem; }
.hours-time.closed { color: #dc2626; font-weight: 600; }
.hours-divider { height: 1px; background: var(--border); margin: 4px 0; }
.open-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(22,163,74,.1); color: var(--success); font-family: var(--font-head); font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; }
.open-dot { width: 6px; height: 6px; background: var(--success); border-radius: 50%; animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* Social connect card */
.social-links { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.soc-btn { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; font-family: var(--font-head); font-size: .8rem; font-weight: 700; transition: var(--tr); border: 1.5px solid var(--border); color: var(--text); }
.soc-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(232,88,12,.04); }
/* ══ BREADCRUMB / PAGE HERO ══════════════════════════ */
.page-hero { background: linear-gradient(135deg, var(--primary) 0%, #1a4f8a 55%, #0d2b52 100%); padding: 52px 0 58px; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(232,88,12,.14) 0%, transparent 70%); pointer-events: none; }
.page-hero::after { content: ''; position: absolute; bottom: -40px; left: -40px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(245,166,35,.08) 0%, transparent 70%); pointer-events: none; }
.page-hero-inner { position: relative; z-index: 1; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-family: var(--font-head); color: rgba(255,255,255,.6); margin-bottom: 18px; }
.breadcrumb a { color: rgba(255,255,255,.7); transition: color .2s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb-sep { color: rgba(255,255,255,.35); }
.breadcrumb-current { color: var(--gold); font-weight: 600; }
.page-hero h1 { color: var(--white); margin-bottom: 14px; font-weight: 800; }
.page-hero h1 span { color: var(--gold); }
.page-hero p { color: rgba(255,255,255,.78); font-size: 1.05rem; margin-bottom: 28px; }
.hero-contact-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom:20px; }
.hero-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.92); font-family: var(--font-head); font-size: .84rem; font-weight: 500; padding: 8px 16px; border-radius: 50px; transition: var(--tr); }
.hero-pill:hover { background: rgba(255,255,255,.2); color: var(--gold); }
.map-detail { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.map-detail svg { margin-top: 2px; flex-shrink: 0; }
.map-detail-text { font-size: .86rem; color: var(--muted); line-height: 1.55; }
.map-detail-label { font-size: .72rem; color: var(--muted); font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 1px; }
/* ── buttons ── */
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: var(--white); }
/* ================================================================= */
/* ── THANK-YOU PAGE CSS (.ty- prefix — no site conflicts) ────────── */
/* ================================================================= */
/* ── Wrapper reset ── */
.ty-page *, .ty-page *::before, .ty-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ty-page { font-family: var(--ty-fb); color: var(--ty-text); font-size: 16px; line-height: 1.65; }
.ty-page a { color: inherit; text-decoration: none; }
.ty-page svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.ty-page h1, .ty-page h2, .ty-page h3 { font-family: var(--ty-fh); color: var(--ty-primary); line-height: 1.25; }
.ty-page p { }
.ty-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.ty-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 13px 26px; border-radius: var(--ty-r);
font-family: var(--ty-fh); font-size: .94rem; font-weight: 700;
cursor: pointer; border: none; transition: var(--ty-tr);
white-space: nowrap; text-decoration: none;
}
.ty-btn-p { background: var(--ty-accent); color: #fff!important; box-shadow: 0 4px 20px rgba(232,88,12,.3); }
.ty-btn-p:hover { background: #ff7a3d; transform: translateY(-2px); }
.ty-btn-o { background: transparent; color: var(--ty-primary); border: 2px solid var(--ty-primary); }
.ty-btn-o:hover { background: var(--ty-primary); color: #fff; }
.ty-btn-wa { background: #25D366; color: #fff!important; box-shadow: 0 4px 16px rgba(37,211,102,.28); }
.ty-btn-wa:hover { background: #1fba5a; }
.ty-btn-g { background: var(--ty-bg); color: var(--ty-primary); border: 1.5px solid var(--ty-border); }
.ty-btn-g:hover { border-color: var(--ty-accent); color: var(--ty-accent); }
/* ── HERO ── */
.ty-hero {
background: linear-gradient(135deg, var(--ty-primary) 0%, #1a4f8a 55%, #0d2b52 100%);
padding: 64px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.ty-hero::before {
content: ''; position: absolute; top: -80px; right: -80px;
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(232,88,12,.14) 0%, transparent 70%);
pointer-events: none;
}
.ty-hero::after {
content: ''; position: absolute; bottom: -40px; left: -60px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(245,166,35,.1) 0%, transparent 70%);
pointer-events: none;
}
.ty-hero-inner { position: relative; z-index: 1; }
/* Animated check circle */
.ty-check-wrap {
width: 90px; height: 90px;
background: rgba(22,163,74,.15);
border: 3px solid rgba(22,163,74,.4);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 28px;
animation: ty-pop .5s cubic-bezier(.175,.885,.32,1.275) both;
}
.ty-check-wrap svg { animation: ty-draw .4s .3s ease-out both; opacity: 0; }
@keyframes ty-draw { to { opacity: 1; } }
.ty-hero h1 { color: #fff; font-size: clamp(1.8rem,4vw,2.8rem); font-weight: 800; margin-bottom: 14px; }
.ty-hero h1 span { color: var(--ty-gold); }
.ty-hero-sub { color: rgba(255,255,255,.8); font-size: 1.05rem; max-width: 520px; margin: 0 auto 32px; }
.ty-hero-pills {
display: flex; flex-wrap: wrap; gap: 10px;
justify-content: center; margin-bottom: 36px;
}
.ty-pill {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
color: rgba(255,255,255,.9); font-family: var(--ty-fh); font-size: .83rem; font-weight: 500;
padding: 7px 16px; border-radius: 50px;
}
.ty-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* ── WHAT HAPPENS NEXT ── */
.ty-next { padding: 72px 0; background: var(--ty-white); }
.ty-sec-tag {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(232,88,12,.1); color: var(--ty-accent);
font-family: var(--ty-fh); font-size: .74rem; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
padding: 5px 14px; border-radius: 50px; margin-bottom: 14px;
}
.ty-next-title { font-size: clamp(1.5rem,3vw,2.1rem); margin-bottom: 10px; text-align: center; }
.ty-next-sub { text-align: center; max-width: 520px; margin: 0 auto 48px; font-size: .98rem; }
.ty-steps-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.ty-step-card {
background: var(--ty-bg); border-radius: var(--ty-rl);
padding: 32px 26px; text-align: center;
border: 1.5px solid var(--ty-border); transition: var(--ty-tr);
position: relative; overflow: hidden;
}
.ty-step-card::before {
content: ''; position: absolute; bottom: 0; left: 0; right: 0;
height: 3px; background: linear-gradient(to right, var(--ty-primary), var(--ty-accent));
transform: scaleX(0); transition: var(--ty-tr); transform-origin: left;
}
.ty-step-card:hover { box-shadow: var(--ty-s2); transform: translateY(-4px); border-color: var(--ty-primary); }
.ty-step-card:hover::before { transform: scaleX(1); }
.ty-step-num {
width: 52px; height: 52px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
font-family: var(--ty-fh); font-size: 1.1rem; font-weight: 800; color: #fff;
}
.ty-step-num.s1 { background: var(--ty-primary); }
.ty-step-num.s2 { background: var(--ty-accent); }
.ty-step-num.s3 { background: var(--ty-ok); }
.ty-step-ico {
width: 52px; height: 52px;
background: var(--ty-bg2); border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px;
}
.ty-step-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.ty-step-card p { font-size: .86rem; color: var(--ty-muted); line-height: 1.65; }
.ty-step-time {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(15,52,96,.07); color: var(--ty-primary);
font-family: var(--ty-fh); font-size: .72rem; font-weight: 700;
padding: 3px 10px; border-radius: 50px; margin-top: 12px;
}
/* ── CONTACT QUICK BAR ── */
.ty-contact-bar {
background: var(--ty-bg);
border-top: 1px solid var(--ty-border);
border-bottom: 1px solid var(--ty-border);
padding: 28px 0;
}
.ty-contact-inner {
display: flex; flex-wrap: wrap; align-items: center;
justify-content: center; gap: 16px 32px;
}
.ty-contact-item {
display: flex; align-items: center; gap: 10px;
font-family: var(--ty-fh); font-size: .88rem; font-weight: 600; color: var(--ty-primary);
}
.ty-contact-item a { color: var(--ty-accent); transition: color .2s; }
.ty-contact-item a:hover { color: var(--ty-primary); }
.ty-contact-ico {
width: 36px; height: 36px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ty-contact-ico.orange { background: rgba(232,88,12,.1); }
.ty-contact-ico.green { background: rgba(37,211,102,.1); }
.ty-contact-ico.blue { background: rgba(15,52,96,.1); }
.ty-divider { width: 1px; height: 28px; background: var(--ty-border); }
/* ── EXPLORE SECTION ── */
.ty-explore { padding: 72px 0; background: var(--ty-white); }
.ty-explore-grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px;
}
.ty-exp-card {
border: 1.5px solid var(--ty-border); border-radius: var(--ty-rl);
padding: 28px 24px; transition: var(--ty-tr); display: flex; flex-direction: column;
}
.ty-exp-card:hover { border-color: var(--ty-accent); box-shadow: var(--ty-s2); transform: translateY(-3px); }
.ty-exp-ico {
width: 48px; height: 48px; border-radius: 13px;
display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.ty-exp-ico.primary { background: rgba(15,52,96,.1); }
.ty-exp-ico.accent { background: rgba(232,88,12,.1); }
.ty-exp-ico.ok { background: rgba(22,163,74,.1); }
.ty-exp-card h3 { font-size: 1rem; margin-bottom: 8px; }
.ty-exp-card p { font-size: .84rem; color: var(--ty-muted); margin-bottom: 18px; flex: 1; }
/* ── STATS BAND ── */
.ty-stats-band {
background: var(--ty-primary); padding: 52px 0;
}
.ty-stats-inner {
display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
}
.ty-stat {
text-align: center; padding: 0 20px;
border-right: 1px solid rgba(255,255,255,.12);
}
.ty-stat:last-child { border-right: none; }
.ty-stat-val {
font-family: var(--ty-fh); font-size: 2.2rem; font-weight: 800;
color: var(--ty-gold); display: block; margin-bottom: 4px;
}
.ty-stat-lbl { font-size: .82rem; color: rgba(255,255,255,.65); font-family: var(--ty-fh); }
/* ── SOCIAL PROOF STRIP ── */
.ty-social-strip { padding: 36px 0; background: var(--ty-bg); border-top: 1px solid var(--ty-border); }
.ty-social-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; }
.ty-rating-badge {
display: flex; align-items: center; gap: 10px;
background: var(--ty-white); border-radius: var(--ty-r);
padding: 10px 18px; box-shadow: var(--ty-s1); border: 1.5px solid var(--ty-border);
}
.ty-g-word { font-family: Arial,sans-serif; font-size: 1.1rem; font-weight: 700; }
.ty-g-word span:nth-child(1){color:#4285F4} .ty-g-word span:nth-child(2){color:#EA4335}
.ty-g-word span:nth-child(3){color:#FBBC05} .ty-g-word span:nth-child(4){color:#4285F4}
.ty-g-word span:nth-child(5){color:#34A853} .ty-g-word span:nth-child(6){color:#EA4335}
.ty-g-stars { display: flex; gap: 2px; }
.ty-g-score { font-family: var(--ty-fh); font-size: .95rem; font-weight: 800; color: var(--ty-text); }
.ty-g-count { font-size: .72rem; color: var(--ty-muted); }
.ty-social-link {
display: flex; align-items: center; gap: 8px;
font-family: var(--ty-fh); font-size: .86rem; font-weight: 600;
color: var(--ty-primary); padding: 8px 16px;
background: var(--ty-white); border-radius: 9px;
border: 1.5px solid var(--ty-border); transition: var(--ty-tr);
}
.ty-social-link:hover { border-color: var(--ty-accent); color: var(--ty-accent); }
/* ── RESPONSIVE ── */
@media(max-width:768px){
.ty-hero { padding: 48px 0 60px; }
.ty-steps-grid { grid-template-columns: 1fr; }
.ty-explore-grid { grid-template-columns: 1fr; }
.ty-stats-inner { grid-template-columns: repeat(2,1fr); gap: 28px; }
.ty-stat { border-right: none; }
.ty-next,.ty-explore { padding: 52px 0; }
.ty-divider { display: none; }
.ty-hero-btns { flex-direction: column; align-items: center; }
}
@media(max-width:480px){
.ty-stats-inner { grid-template-columns: 1fr 1fr; }
.ty-contact-inner { flex-direction: column; gap: 14px; }
.email-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.email-card { margin-bottom: 0; padding: 20px 16px; }
}
/* ================================================================= */
/* ── NEW SITE-WIDE TOPBAR + NAVBAR (matches employer page design) ─ */
/* ================================================================= */
/* ── Reset Bootstrap .navbar interference ── */
.hk-site-nav.navbar {
display: block;
flex-wrap: unset;
padding: 0;
position: sticky;
top: 0;
z-index: 1000;
background: var(--white);
box-shadow: var(--shadow-sm);
}
/* ─────────────────────────────────────────
TOPBAR (dark blue strip above navbar)
───────────────────────────────────────── */
.hk-topbar {
background: var(--primary);
color: var(--white);
font-size: .82rem;
padding: 8px 0;
font-family: var(--font-head);
line-height: 1.4;
}
.hk-topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
flex-wrap: wrap;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
.hk-topbar-left {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
}
.hk-topbar a,
.hk-topbar span {
color: rgba(255,255,255,.9);
display: flex;
align-items: center;
gap: 6px;
transition: color .2s;
text-decoration: none;
}
.hk-topbar a:hover { color: var(--gold); }
.hk-topbar-right { display: flex; gap: 10px; flex-wrap: wrap; }
.hk-topbar-right a {
background: rgba(255,255,255,.12);
padding: 4px 14px;
border-radius: 20px;
font-size: .78rem;
font-weight: 600;
color: rgba(255,255,255,.9);
text-decoration: none;
transition: background .2s, color .2s;
}
.hk-topbar-right a:hover { background: rgba(255,255,255,.22); color: var(--white); }
.hk-topbar-right a.hk-tb-active { background: var(--accent); color: var(--white); }
/* ─────────────────────────────────────────
NAVBAR (white sticky bar)
───────────────────────────────────────── */
.hk-navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 13px 24px;
max-width: 1180px;
margin: 0 auto;
}
.hk-nav-logo img { height: 42px; display: block; }
/* ── Nav menu list ── */
.hk-nav-menu {
display: flex;
align-items: center;
gap: 4px;
list-style: none;
margin: 0;
padding: 0;
}
.hk-nav-item { position: relative; list-style: none; }
.hk-nav-link {
font-family: var(--font-head);
font-size: .86rem;
font-weight: 600;
color: var(--text);
padding: 8px 13px;
border-radius: 8px;
display: flex;
align-items: center;
gap: 5px;
transition: var(--tr);
text-decoration: none;
white-space: nowrap;
}
.hk-nav-link:hover,
.hk-nav-link:focus { color: var(--accent); background: rgba(232,88,12,.06); }
.hk-nav-link.hk-active { color: var(--accent); }
.hk-nav-chevron {
width: 10px;
height: 10px;
opacity: .55;
flex-shrink: 0;
transition: transform var(--tr);
}
/* ── Dropdown ── */
.hk-nav-dropdown {
position: absolute;
top: calc(100% + 0px);
left: 0;
min-width: 240px;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 10px 0;
opacity: 0;
pointer-events: none;
transform: translateY(8px);
transition: var(--tr);
z-index: 200;
list-style: none;
margin: 0;
}
.hk-nav-item:hover .hk-nav-dropdown {
opacity: 1;
pointer-events: all;
transform: translateY(0);
}
.hk-nav-item:hover .hk-nav-chevron { transform: rotate(180deg); opacity: .8; }
.hk-nav-dropdown a {
display: block;
padding: 5px 20px;
font-size: .85rem;
color: var(--text);
transition: color .2s, background .2s;
text-decoration: none;
font-family: var(--font-body);
}
.hk-nav-dropdown a:hover { color: var(--accent); background: var(--bg); }
/* ── CTA buttons ── */
.hk-navbar-cta { display: flex; gap: 10px; align-items: center; }
/* ── Hamburger (mobile only) ── */
.hk-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 6px;
background: none;
border: none;
flex-shrink: 0;
}
.hk-hamburger span {
width: 24px;
height: 2px;
background: var(--primary);
border-radius: 2px;
display: block;
transition: var(--tr);
}
/* Hamburger → X when open */
.hk-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hk-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hk-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Mobile slide-down menu */
.hk-nav-menu.hk-open {
display: flex !important;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
padding: 16px 20px 20px;
box-shadow: var(--shadow-md);
z-index: 999;
gap: 2px;
border-top: 1px solid var(--border);
}
.hk-nav-menu.hk-open .hk-nav-dropdown {
position: static;
opacity: 1;
transform: none;
pointer-events: all;
box-shadow: none;
padding: 4px 0 4px 16px;
border-left: 2px solid var(--border);
border-radius: 0;
margin: 4px 0 8px;
}
/* Scroll shadow on scroll */
.hk-site-nav.scrolled { box-shadow: 0 4px 24px rgba(15,52,96,.16); }
/* ─────────────────────────────────────────
RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 992px) {
.hk-nav-menu { display: none; }
.hk-navbar-cta .btn-wa { display: none; } /* hide WhatsApp on mobile — Hire Talent stays visible */
.hk-hamburger { display: flex; }
}
@media (max-width: 768px) {
.hk-topbar-left { gap: 12px; }
.hk-topbar-left .hk-topbar-addr { display: none; }
}
@media (max-width: 480px) {
.hk-topbar-right { gap: 6px; }
.hk-topbar-right a { padding: 3px 10px; font-size: .72rem; }
.hk-topbar-left{display:none;}
}
.testi-design {
position: absolute;
left: 39%;
top:40%;
}
.white{background: var(--white); border-top:1px solid #f4f7fb; border-bottom:1px solid #f4f7fb;}
/* Hero form */
.hero-form-card{background:var(--white);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:var(--shadow-lg);position:relative;z-index:2}
.hero-form-card h3{font-size:1.1rem;margin-bottom:5px;display:flex;align-items:center;gap:8px}
.hero-form-card>p{font-size:.83rem;color:var(--muted);margin-bottom:20px}
.form-group{margin-bottom:0px}
.form-group label{display:block;font-size:.78rem;font-weight:700;color:var(--text);margin-bottom:4px;font-family:var(--font-head)}
.form-control{width:100%;padding:11px 13px;border:1.5px solid var(--border);border-radius:8px;font-size:.88rem;font-family:var(--font-body);color:var(--text);background:var(--white);transition:border .2s;outline:none}
.form-control:focus{border-color:var(--primary)}
.form-control::placeholder{color:#9aa5b8}
.form-trust{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.74rem;color:var(--muted)}
.mg{margin:0px;}
/* ── Process Timeline ── */
.process-timeline { position: relative; margin-top: 56px; }
.process-timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0; bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--primary), var(--accent));
transform: translateX(-50%);
z-index: 0;
}
.pt-row {
display: grid;
grid-template-columns: 1fr 80px 1fr;
gap: 0;
align-items: start;
margin-bottom: 56px;
position: relative;
z-index: 1;
}
.pt-row:last-child { margin-bottom: 0; }
/* Content side */
.pt-content {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 26px;
box-shadow: var(--shadow-sm);
transition: var(--tr);
}
.pt-content:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
/* Left-side content aligns right */
.pt-left { text-align: right; padding-right: 24px; }
.pt-right { padding-left: 24px; }
/* Empty spacer on opposite side */
.pt-empty { }
/* Centre node */
.pt-node {
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 24px;
}
.pt-node-inner {
width: 56px; height: 56px;
background: var(--primary);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-head);
font-size: 1.2rem;
font-weight: 800;
border: 4px solid var(--white);
box-shadow: var(--shadow-md);
flex-shrink: 0;
transition: var(--tr);
}
.pt-row:hover .pt-node-inner { background: var(--accent); transform: scale(1.1); }
.pt-content-tag {
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(232,88,12,.1);
color: var(--accent);
font-family: var(--font-head);
font-size: .72rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 50px;
margin-bottom: 10px;
}
.pt-content h3 { font-size: 1.1rem; margin-bottom: 10px; }
.pt-content p { font-size: .88rem; color: var(--muted); line-height: 1.72; margin-bottom: 14px; }
.pt-deliverables { display: flex; flex-direction: column; gap: 6px; }
.pt-del {
display: flex;
align-items: center;
gap: 7px;
font-size: .82rem;
color: var(--text);
font-family: var(--font-head);
font-weight: 500;
}
.pt-del svg { flex-shrink: 0; }
/* Flip odd rows: right side content, left side empty */
.pt-row.flip .pt-content { text-align: left; }
/* ── 4 Quick Step Cards ── */
.quick-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 44px;
position: relative;
}
.quick-steps::before {
content: '';
position: absolute;
top: 34px; left: 8%; right: 8%;
height: 2px;
background: linear-gradient(to right, var(--primary), var(--accent));
z-index: 0;
}
.qs-card {
background: var(--white);
border: 1.5px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px 20px 24px;
text-align: center;
transition: var(--tr);
position: relative;
z-index: 1;
}
.qs-card:hover { box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-4px); }
.qs-num {
width: 56px; height: 56px;
background: var(--primary);
color: var(--white);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-head);
font-size: 1.2rem; font-weight: 800;
margin: 0 auto 16px;
border: 4px solid var(--white);
box-shadow: var(--shadow-md);
transition: var(--tr);
}
.qs-card:hover .qs-num { background: var(--accent); }
.qs-ico {
width: 42px; height: 42px;
background: var(--bg-alt);
border-radius: 11px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 12px;
}
.qs-card h4 { font-size: .96rem; margin-bottom: 8px; }
.qs-card p { font-size: .82rem; color: var(--muted); margin-bottom: 14px; line-height: 1.6; }
.qs-link {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-head);
font-size: .78rem;
font-weight: 700;
color: var(--accent);
text-decoration: none;
}
.qs-link:hover { color: var(--primary); }
/* ── Package Highlight Cards ── */
.pkg-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 44px;
}
.pkg-card {
border-radius: var(--radius-lg);
padding: 34px 30px;
position: relative;
overflow: hidden;
transition: var(--tr);
}
.pkg-card.standard {
background: var(--white);
border: 2px solid var(--border);
}
.pkg-card.featured {
background: var(--primary);
border: 2px solid var(--primary);
}
.pkg-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.pkg-badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-head);
font-size: .72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .08em;
padding: 4px 12px;
border-radius: 50px;
margin-bottom: 16px;
}
.pkg-badge.orange { background: rgba(232,88,12,.12); color: var(--accent); }
.pkg-badge.white { background: rgba(255,255,255,.15); color: var(--gold); }
.pkg-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.pkg-card.featured h3 { color: var(--white); }
.pkg-desc { font-size: .9rem; margin-bottom: 22px; line-height: 1.65; }
.pkg-card.featured .pkg-desc { color: rgba(255,255,255,.78); }
.pkg-features { display: flex; flex-direction: column; gap: 9px; margin-bottom: 26px; }
.pkg-feat {
display: flex; align-items: center; gap: 9px;
font-size: .87rem;
font-family: var(--font-head);
font-weight: 500;
}
.pkg-card.standard .pkg-feat { color: var(--text); }
.pkg-card.featured .pkg-feat { color: rgba(255,255,255,.9); }
.pkg-feat-dot {
width: 18px; height: 18px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.pkg-card.standard .pkg-feat-dot { background: rgba(22,163,74,.12); }
.pkg-card.featured .pkg-feat-dot { background: rgba(245,166,35,.2); }
/* ── Responsive ── */
@media(max-width: 1024px) {
.process-timeline::before { display: none; }
.pt-row { grid-template-columns: 1fr; gap: 0; }
.pt-left, .pt-right { text-align: left; padding: 0; }
.pt-empty { display: none; }
.pt-node { justify-content: flex-start; padding: 20px 0 12px; }
.quick-steps { grid-template-columns: repeat(2,1fr); }
.quick-steps::before { display: none; }
}
@media(max-width: 768px) {
.quick-steps { grid-template-columns: 1fr; }
.pkg-grid { grid-template-columns: 1fr; }
}
/* ── Policy section cards ── */
.pp-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:32px 30px;margin-bottom:20px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:72px 1fr;gap:24px;align-items:start;transition:var(--tr)}
.pp-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary)}
.pp-num-block{display:flex;flex-direction:column;align-items:center;gap:10px}
.pp-num{width:52px;height:52px;background:var(--primary);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:1.1rem;font-weight:800;flex-shrink:0}
.pp-ico{width:38px;height:38px;background:var(--bg-alt);border-radius:10px;display:flex;align-items:center;justify-content:center}
.pp-body h3{font-size:1.05rem;margin-bottom:10px;color:var(--primary)}
.pp-body p{font-size:.9rem;color:var(--muted);line-height:1.8;margin-bottom:10px}
.pp-body p:last-child{margin-bottom:0}
.pp-note{margin-top:14px;padding:12px 16px;border-radius:8px;font-size:.86rem}
.pp-note-blue{background:rgba(15,52,96,.05);border-left:3px solid var(--primary)}
.pp-note-green{background:rgba(22,163,74,.06);border-left:3px solid var(--success);color:var(--muted)}
/* ── Bullet list ── */
.pp-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pp-list li{display:flex;align-items:flex-start;gap:9px;font-size:.88rem;color:var(--text);line-height:1.65}
.pp-list li svg{margin-top:2px;flex-shrink:0}
/* ── Rights grid ── */
.pp-rights-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.pp-right-item{background:var(--bg);border-radius:var(--radius);padding:16px 14px;border-left:4px solid var(--accent);display:flex;align-items:flex-start;gap:10px}
.pp-right-item svg{flex-shrink:0;margin-top:2px}
.pp-right-item h5{font-family:var(--font-head);font-size:.84rem;font-weight:700;color:var(--primary);margin-bottom:3px}
.pp-right-item p{font-size:.78rem;color:var(--muted);margin:0}
/* ── TOC ── */
.pp-toc{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.pp-toc-item{display:flex;align-items:center;gap:9px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);padding:12px 14px;font-family:var(--font-head);font-size:.82rem;font-weight:600;color:var(--primary);text-decoration:none;transition:var(--tr)}
.pp-toc-item:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.pp-toc-num{width:22px;height:22px;background:var(--primary);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;flex-shrink:0;transition:var(--tr)}
.pp-toc-item:hover .pp-toc-num{background:var(--accent)}
/* ── Updated badge ── */
.pp-updated{display:inline-flex;align-items:center;gap:6px;background:rgba(15,52,96,.08);color:var(--primary);font-family:var(--font-head);font-size:.78rem;font-weight:600;padding:5px 14px;border-radius:50px;margin-bottom:20px}
/* ── Contact cards ── */
.pp-contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px}
.pp-contact-card{background:var(--bg);border-radius:var(--radius);padding:18px 16px;border:1.5px solid var(--border);display:flex;align-items:center;gap:12px;transition:var(--tr)}
.pp-contact-card:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.pp-contact-card-ico{width:38px;height:38px;background:rgba(15,52,96,.1);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pp-contact-card label{font-family:var(--font-head);font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:2px}
.pp-contact-card a,.pp-contact-card span{font-family:var(--font-head);font-size:.86rem;font-weight:700;color:var(--primary);text-decoration:none;transition:color .2s}
.pp-contact-card a:hover{color:var(--accent)}
/* ── Promise pills ── */
.pp-promise-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pp-promise{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.92);font-family:var(--font-head);font-size:.83rem;font-weight:500;padding:7px 16px;border-radius:50px}
/* ── Social strip ── */
.pp-social-link{display:flex;align-items:center;gap:7px;font-family:var(--font-head);font-size:.84rem;font-weight:600;color:var(--primary);padding:8px 14px;background:var(--white);border-radius:8px;border:1.5px solid var(--border);text-decoration:none;transition:var(--tr)}
.pp-social-link:hover{border-color:var(--accent);color:var(--accent)}
/* ── Responsive ── */
@media(max-width:1024px){.pp-toc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
.pp-card{grid-template-columns:1fr;gap:16px;padding:24px 20px}
.pp-num-block{flex-direction:row}
.pp-rights-grid{grid-template-columns:1fr}
.pp-contact-grid{grid-template-columns:1fr}
.pp-toc{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.pp-toc{grid-template-columns:1fr}}
/* ── Company intro split layout ── */
.about-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about-intro-img{position:relative;border-radius:var(--radius-lg);overflow:hidden}
.about-intro-img img{width:100%;height:420px;object-fit:cover;border-radius:var(--radius-lg);display:block}
.about-img-badge{position:absolute;bottom:20px;left:20px;background:var(--white);border-radius:var(--radius-lg);padding:16px 20px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px}
.about-img-badge-ico{width:44px;height:44px;background:var(--primary);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.about-img-badge h4{font-family:var(--font-head);font-size:1.1rem;font-weight:800;color:var(--primary);line-height:1.1;margin-bottom:2px}
.about-img-badge span{font-size:.76rem;color:var(--muted);font-family:var(--font-head);font-weight:600}
.about-intro-text .sec-tag{margin-bottom:14px}
.about-intro-text h2{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:16px}
.about-intro-text p{font-size:.94rem;line-height:1.82;color:var(--muted);margin-bottom:14px}
.about-intro-text p:last-of-type{margin-bottom:24px}
.about-quote{font-style:italic;font-size:.95rem;color:var(--primary);padding:16px 20px;border-left:4px solid var(--accent);background:rgba(232,88,12,.05);border-radius:0 var(--radius) var(--radius) 0;margin:24px 0;font-family:var(--font-head);font-weight:600;line-height:1.6}
/* ── Growth timeline ── */
.timeline{position:relative;margin-top:48px}
.timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:3px;background:linear-gradient(to bottom,var(--primary),var(--accent));transform:translateX(-50%)}
.tl-row{display:grid;grid-template-columns:1fr 80px 1fr;gap:0;margin-bottom:40px;position:relative}
.tl-row:last-child{margin-bottom:0}
.tl-content{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm);transition:var(--tr)}
.tl-content:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-3px)}
.tl-left{padding-right:28px;text-align:right}
.tl-right{padding-left:28px}
.tl-empty{}
.tl-node{display:flex;align-items:flex-start;justify-content:center;padding-top:18px}
.tl-node-inner{width:52px;height:52px;background:var(--primary);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:.88rem;font-weight:800;border:4px solid var(--white);box-shadow:var(--shadow-md);flex-shrink:0;transition:var(--tr);line-height:1.1;text-align:center}
.tl-row:hover .tl-node-inner{background:var(--accent);transform:scale(1.1)}
.tl-year{font-family:var(--font-head);font-size:1.4rem;font-weight:800;color:var(--accent);display:block;margin-bottom:6px}
.tl-content h4{font-size:.96rem;margin-bottom:6px;color:var(--primary)}
.tl-content p{font-size:.86rem;color:var(--muted);line-height:1.65;margin:0}
.tl-content .tl-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(232,88,12,.1);color:var(--accent);font-family:var(--font-head);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 9px;border-radius:50px;margin-bottom:10px}
/* ── Mission / Vision / Values cards ── */
.mvv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.mvv-card{border-radius:var(--radius-lg);padding:30px 26px;transition:var(--tr);border:1.5px solid var(--border);position:relative;overflow:hidden}
.mvv-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.mvv-card.mission{background:linear-gradient(135deg,var(--primary) 0%,#1a4f8a 100%)}
.mvv-card.vision{background:linear-gradient(135deg,#1a4f8a 0%,#0d2b52 100%)}
.mvv-card.values{background:var(--white);border-color:var(--border)}
.mvv-card.purpose{background:linear-gradient(135deg,rgba(232,88,12,.08) 0%,rgba(245,166,35,.08) 100%);border-color:rgba(232,88,12,.2)}
.mvv-card::before{content:'';position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;opacity:.08}
.mvv-card.mission::before,.mvv-card.vision::before{background:var(--white)}
.mvv-card.values::before{background:var(--primary)}
.mvv-card.purpose::before{background:var(--accent)}
.mvv-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.mvv-card.mission .mvv-ico,.mvv-card.vision .mvv-ico{background:rgba(255,255,255,.15)}
.mvv-card.values .mvv-ico{background:rgba(15,52,96,.1)}
.mvv-card.purpose .mvv-ico{background:rgba(232,88,12,.12)}
.mvv-card h3{font-size:1.1rem;margin-bottom:10px}
.mvv-card.mission h3,.mvv-card.vision h3{color:var(--white)}
.mvv-card.values h3{color:var(--primary)}
.mvv-card.purpose h3{color:var(--primary)}
.mvv-card p{font-size:.88rem;line-height:1.75;margin:0}
.mvv-card.mission p,.mvv-card.vision p{color:rgba(255,255,255,.82)}
.mvv-card.values p,.mvv-card.purpose p{color:var(--muted)}
.mvv-values-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.mvv-val-tag{display:inline-flex;align-items:center;gap:5px;background:rgba(15,52,96,.08);color:var(--primary);font-family:var(--font-head);font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:50px}
/* ── Methodology steps ── */
.method-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;position:relative}
.method-grid::before{content:'';position:absolute;top:36px;left:12%;right:12%;height:2px;background:linear-gradient(to right,var(--primary),var(--accent));z-index:0}
.method-card{text-align:center;padding:0 16px;position:relative;z-index:1}
.method-num{width:72px;height:72px;background:var(--white);border:3px solid var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-family:var(--font-head);font-size:1.3rem;font-weight:800;color:var(--primary);box-shadow:var(--shadow-md);transition:var(--tr);position:relative}
.method-card:nth-child(2) .method-num{background:var(--bg-alt);border-color:var(--primary)}
.method-card:nth-child(3) .method-num{background:var(--primary);color:var(--white)}
.method-card:nth-child(4) .method-num{background:var(--accent);border-color:var(--accent);color:var(--white)}
.method-card:hover .method-num{transform:scale(1.1);box-shadow:var(--shadow-lg)}
.method-ico{width:40px;height:40px;background:var(--bg-alt);border-radius:10px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.method-card h4{font-size:.96rem;margin-bottom:8px}
.method-card p{font-size:.83rem;color:var(--muted);line-height:1.65}
/* ── Responsive ── */
@media(max-width:1024px){
.about-intro-grid{grid-template-columns:1fr;gap:40px}
.about-intro-img img{height:300px}
.timeline::before{display:none}
.tl-row{grid-template-columns:1fr;gap:0}
.tl-left,.tl-right{text-align:left;padding:0}
.tl-empty{display:none}
.tl-node{justify-content:flex-start;padding:16px 0 10px}
.mvv-grid{grid-template-columns:1fr}
.method-grid{grid-template-columns:repeat(2,1fr);gap:24px}
.method-grid::before{display:none}
}
@media(max-width:768px){
.method-grid{grid-template-columns:1fr;gap:20px}
.mvv-grid{grid-template-columns:1fr}
}
/* ── Pricing Cards ── */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;align-items:start}
.price-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:34px 28px;position:relative;transition:var(--tr);display:flex;flex-direction:column}
.price-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-5px)}
.price-card.featured{background:var(--primary);border-color:var(--primary);box-shadow:var(--shadow-lg);transform:translateY(-8px)}
.price-card.featured:hover{transform:translateY(-12px)}
.price-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-head);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:5px 13px;border-radius:50px;margin-bottom:20px}
.price-card:not(.featured) .price-badge{background:rgba(232,88,12,.1);color:var(--accent)}
.price-card.featured .price-badge{background:var(--gold);color:var(--primary)}
.price-label{font-family:var(--font-head);font-size:1rem;font-weight:700;margin-bottom:6px}
.price-card:not(.featured) .price-label{color:var(--primary)}
.price-card.featured .price-label{color:rgba(255,255,255,.85)}
.price-amount{font-family:var(--font-head);font-size:2rem;font-weight:800;line-height:1;margin-bottom:4px}
.price-card:not(.featured) .price-amount{color:var(--accent)}
.price-card.featured .price-amount{color:var(--gold)}
.price-unit{font-size:.85rem;font-family:var(--font-head);font-weight:600}
.price-card:not(.featured) .price-unit{color:var(--muted)}
.price-card.featured .price-unit{color:rgba(255,255,255,.7)}
.price-equiv{display:flex;flex-direction:column;gap:5px;margin:16px 0;padding:14px 16px;border-radius:var(--radius);font-size:.82rem;font-family:var(--font-head)}
.price-card:not(.featured) .price-equiv{background:var(--bg);color:var(--muted)}
.price-card.featured .price-equiv{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.price-equiv span{display:flex;align-items:center;gap:7px;font-weight:600}
.price-equiv span strong{color:var(--text)}
.price-card.featured .price-equiv span strong{color:var(--white)}
.price-divider{height:1px;margin:20px 0}
.price-card:not(.featured) .price-divider{background:var(--border)}
.price-card.featured .price-divider{background:rgba(255,255,255,.15)}
.price-features{display:flex;flex-direction:column;gap:9px;flex:1}
.price-feat{display:flex;align-items:flex-start;gap:9px;font-size:.84rem;font-family:var(--font-head);font-weight:500}
.price-card:not(.featured) .price-feat{color:var(--text)}
.price-card.featured .price-feat{color:rgba(255,255,255,.9)}
.price-feat svg{flex-shrink:0;margin-top:1px}
.price-feat .feat-note{font-size:.75rem;font-weight:400;margin-left:auto;padding:1px 7px;border-radius:50px}
.price-card:not(.featured) .feat-note{background:var(--bg-alt);color:var(--muted)}
.price-card.featured .feat-note{background:rgba(255,255,255,.15);color:rgba(255,255,255,.8)}
.price-cta{margin-top:26px;width:100%;justify-content:center;font-size:.9rem;padding:13px 0}
.price-card:not(.featured) .price-cta{background:var(--primary);color:var(--white);box-shadow:0 4px 16px rgba(15,52,96,.25)}
.price-card.featured .price-cta{background:var(--gold);color:var(--primary)}
.price-cta:hover{filter:brightness(1.08);transform:translateY(-2px)}
/* ── Payment clause boxes ── */
.clause-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px}
.clause-card{border-radius:var(--radius-lg);padding:28px 26px;border:1.5px solid var(--border)}
.clause-card.warn{background:linear-gradient(135deg,rgba(232,88,12,.06) 0%,rgba(245,166,35,.04) 100%);border-color:rgba(232,88,12,.25)}
.clause-card.ok{background:linear-gradient(135deg,rgba(22,163,74,.06) 0%,rgba(15,52,96,.03) 100%);border-color:rgba(22,163,74,.25)}
.clause-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.clause-card.warn .clause-ico{background:rgba(232,88,12,.12)}
.clause-card.ok .clause-ico{background:rgba(22,163,74,.12)}
.clause-card h4{font-size:1rem;margin-bottom:10px}
.clause-card.warn h4{color:var(--accent)}
.clause-card.ok h4{color:var(--success)}
.clause-card p{font-size:.87rem;color:var(--muted);line-height:1.75}
.clause-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.clause-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-head);font-size:.75rem;font-weight:600;padding:4px 11px;border-radius:50px}
.clause-card.warn .clause-tag{background:rgba(232,88,12,.1);color:var(--accent)}
.clause-card.ok .clause-tag{background:rgba(22,163,74,.1);color:var(--success)}
.clause-refund-note{margin-top:20px;padding:14px 16px;border-radius:var(--radius);font-size:.83rem;background:rgba(15,52,96,.05);border-left:3px solid var(--primary);color:var(--muted)}
/* ── Who is it for ── */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.who-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:22px 18px;text-align:center;transition:var(--tr)}
.who-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.who-ico{width:44px;height:44px;background:var(--bg-alt);border-radius:11px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.who-card h4{font-size:.92rem;margin-bottom:7px}
.who-card p{font-size:.82rem;color:var(--muted)}
/* ── Responsive ── */
@media(max-width:1024px){.price-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.price-card.featured:hover{transform:translateY(-5px)}.clause-grid{grid-template-columns:1fr}.who-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.who-grid{grid-template-columns:1fr}.dhr-compare-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:36px}.dhr-compare{font-size:.78rem;margin-top:0}.dhr-compare th,.dhr-compare td{padding:10px 12px}}
/* ── Pricing Cards (reuse from single-hire if on same site) ── */
.price-amount{font-family:var(--font-head);font-size:2.2rem;font-weight:800;line-height:1;margin-bottom:4px}
.price-feat .feat-note{font-size:.75rem;font-weight:400;margin-left:auto;padding:1px 7px;border-radius:50px;white-space:nowrap}
/* ── Problem-Solution grid ── */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.prob-card{border-radius:var(--radius-lg);padding:26px 22px;border:1.5px solid var(--border);background:var(--white);transition:var(--tr)}
.prob-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-3px)}
.prob-tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-head);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:3px 9px;border-radius:50px;margin-bottom:14px}
.prob-tag.problem{background:rgba(220,38,38,.1);color:#dc2626}
.prob-tag.solved{background:rgba(22,163,74,.1);color:var(--success)}
.prob-card h4{font-size:.96rem;margin-bottom:8px}
.prob-card p{font-size:.84rem;color:var(--muted);line-height:1.7}
/* ── Comparison table ── */
.dhr-compare{width:100%;border-collapse:collapse;margin-top:36px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.dhr-compare th{padding:14px 18px;font-family:var(--font-head);font-size:.82rem;font-weight:700;text-align:left;background:var(--primary);color:var(--white)}
.dhr-compare th:first-child{width:38%}
.dhr-compare th.hl{background:var(--accent);color:var(--white)}
.dhr-compare td{padding:13px 18px;font-size:.85rem;border-bottom:1px solid var(--border);color:var(--text)}
.dhr-compare td:first-child{font-family:var(--font-head);font-weight:600;color:var(--primary);background:var(--bg)}
.dhr-compare td.hl{background:rgba(232,88,12,.05);font-family:var(--font-head);font-weight:600}
.dhr-compare tr:last-child td{border-bottom:none}
.dhr-compare tr:hover td{background:rgba(15,52,96,.03)}
.dhr-compare tr:hover td.hl{background:rgba(232,88,12,.08)}
.dhr-compare tr:hover td:first-child{background:var(--bg-alt)}
.dhr-yes{color:var(--success);font-weight:700}
.dhr-no{color:#dc2626;font-weight:700}
.dhr-partial{color:var(--gold);font-weight:600}
/* ── Who-grid ── */
/* ── Savings highlight ── */
.savings-band{background:linear-gradient(135deg,var(--primary) 0%,#1a4f8a 100%);border-radius:var(--radius-lg);padding:36px 40px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;margin-top:36px}
.savings-text h3{color:var(--white);font-size:1.4rem;margin-bottom:10px}
.savings-text p{color:rgba(255,255,255,.78);font-size:.92rem;line-height:1.7;margin:0}
.savings-val{text-align:center;flex-shrink:0}
.savings-amount{font-family:var(--font-head);font-size:2.4rem;font-weight:800;color:var(--gold);display:block;line-height:1}
.savings-lbl{font-family:var(--font-head);font-size:.8rem;font-weight:600;color:rgba(255,255,255,.7);display:block;margin-top:4px}
@media(max-width:1024px){.price-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.price-card.featured:hover{transform:translateY(-5px)}.prob-grid{grid-template-columns:1fr}.who-grid{grid-template-columns:repeat(2,1fr)}.savings-band{grid-template-columns:1fr;text-align:center}.savings-val{margin-top:20px}}
@media(max-width:768px){.who-grid{grid-template-columns:1fr}.dhr-compare{font-size:.78rem}.dhr-compare th,.dhr-compare td{padding:10px 12px}}
.ct{justify-content: center!important; text-align:center;}
.job-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px;display:flex;flex-direction:column;transition:var(--tr);height:100%;position:relative;overflow:hidden}
.job-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--primary),var(--accent));transform:scaleX(0);transition:var(--tr);transform-origin:left}
.job-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary);transform:translateY(-4px)}
.job-card:hover::before{transform:scaleX(1)}
.job-card-icon{width:48px;height:48px;background:rgba(15,52,96,.08);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.job-card h3{font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--primary);margin-bottom:10px;line-height:1.35}
.job-card p{font-size:.86rem;color:var(--muted);line-height:1.7;margin-bottom:18px;flex:1}
.job-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.job-meta-item{display:inline-flex;align-items:center;gap:5px;background:var(--bg);border:1px solid var(--border);border-radius:50px;padding:4px 12px;font-family:var(--font-head);font-size:.76rem;font-weight:600;color:var(--primary)}
.job-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--border);margin-top:auto}
.job-view-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-size:.84rem;font-weight:700;color:var(--accent);text-decoration:none;transition:var(--tr)}
.job-view-btn:hover{color:var(--primary);gap:10px}
.job-verified-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(22,163,74,.1);color:var(--success);font-family:var(--font-head);font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:50px}
.jobs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.hk-pagination{display:flex;justify-content:center;margin-top:40px}
.jobs-empty{text-align:center;padding:64px 32px;background:var(--bg);border-radius:var(--radius-lg);border:2px dashed var(--border)}
.jobs-empty-ico{width:72px;height:72px;background:var(--white);border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.jobs-empty h3{font-size:1.2rem;margin-bottom:8px}
.jobs-empty p{color:var(--muted);font-size:.9rem;margin-bottom:22px;max-width:440px;margin-left:auto;margin-right:auto}
@media(max-width:1024px){.jobs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.jobs-grid{grid-template-columns:1fr}}
/* ── Job Detail Layout ── */
.jd-layout{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start}
.jd-content-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:36px 32px;box-shadow:var(--shadow-sm)}
.jd-content-card h1,.jd-content-card h2,.jd-content-card h3{color:var(--primary);font-family:var(--font-head);margin-top:24px;margin-bottom:10px}
.jd-content-card h1:first-child,.jd-content-card h2:first-child{margin-top:0}
.jd-content-card p{font-size:.9rem;color:var(--muted);line-height:1.8;margin-bottom:12px}
.jd-content-card ul,.jd-content-card ol{padding-left:20px;margin-bottom:16px}
.jd-content-card li{font-size:.9rem;color:var(--muted);line-height:1.75;margin-bottom:6px}
.jd-content-card strong{color:var(--text)}
/* ── Job Meta pills at top ── */
.jd-meta-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px;padding-bottom:24px;border-bottom:1.5px solid var(--border)}
.jd-meta-pill{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border:1.5px solid var(--border);border-radius:50px;padding:7px 16px;font-family:var(--font-head);font-size:.82rem;font-weight:600;color:var(--primary)}
.jd-meta-pill.accent{background:rgba(232,88,12,.08);border-color:rgba(232,88,12,.2);color:var(--accent)}
.jd-meta-pill.success{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.2);color:var(--success)}
/* ── Application Form Card ── */
.apply-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm);position:sticky;top:100px}
.apply-card h3{font-family:var(--font-head);font-size:1.1rem;font-weight:700;color:var(--primary);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.apply-card p.apply-sub{font-size:.84rem;color:var(--muted);margin-bottom:20px;line-height:1.6}
.apply-card .form-group{margin-bottom:14px}
.apply-card .form-control{width:100%;border:1.5px solid var(--border);border-radius:var(--radius);padding:11px 14px;font-family:var(--font-body);font-size:.88rem;color:var(--text);background:var(--white);transition:var(--tr);outline:none}
.apply-card .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,52,96,.08)}
.apply-card textarea.form-control{resize:vertical;min-height:90px}
/* ── Custom file upload ── */
.file-upload-wrap{position:relative}
.file-upload-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.file-upload-box{padding:10px 14px;border:1.5px dashed var(--border);border-radius:var(--radius);font-size:.84rem;color:var(--muted);display:flex;align-items:center;gap:8px;cursor:pointer;transition:var(--tr);background:var(--bg)}
.file-upload-box:hover{border-color:var(--primary);color:var(--primary)}
.file-upload-box.has-file{border-color:var(--success);color:var(--success);background:rgba(22,163,74,.05)}
/* ── Session message ── */
.apply-msg-success{padding:12px 14px;background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.25);border-radius:var(--radius);color:var(--success);font-family:var(--font-head);font-size:.84rem;font-weight:600;margin-bottom:16px}
.apply-msg-error{padding:12px 14px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.2);border-radius:var(--radius);color:#dc2626;font-family:var(--font-head);font-size:.84rem;font-weight:600;margin-bottom:16px}
/* ── Apply submit button ── */
.apply-btn{width:100%;padding:13px;background:var(--success);color:var(--white);border:none;border-radius:var(--radius);font-family:var(--font-head);font-size:.94rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:var(--tr);box-shadow:0 4px 18px rgba(22,163,74,.28)}
.apply-btn:hover{background:#15803d;transform:translateY(-2px)}
/* ── Back button row ── */
.jd-back-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px}
/* ── Responsive ── */
@media(max-width:1100px){.jd-layout{grid-template-columns:1fr;gap:28px}.apply-card{position:static}}
@media(max-width:768px){.jd-content-card{padding:24px 18px}.apply-card{padding:22px 18px}}
/* ── HERO ── */
.hk-home-hero{background:linear-gradient(135deg,var(--primary) 0%,#1a4f8a 55%,#0d2b52 100%);padding:64px 0 0;overflow:hidden;position:relative}
.hk-home-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:520px;height:520px;background:radial-gradient(circle,rgba(232,88,12,.14) 0%,transparent 70%);pointer-events:none}
.hk-home-hero::after{content:'';position:absolute;bottom:-60px;left:-60px;width:360px;height:360px;background:radial-gradient(circle,rgba(245,166,35,.08) 0%,transparent 70%);pointer-events:none}
.hk-home-hero-inner{display:grid;grid-template-columns:1fr 440px;gap:52px;align-items:center;position:relative;z-index:1}
.hk-home-hero-text h1{color:#fff;font-size:clamp(2rem,4vw,3rem);font-family:var(--font-head);font-weight:800;line-height:1.2;margin-bottom:18px}
.hk-home-hero-text h1 span{color:var(--gold)}
.hk-home-hero-text p{color:rgba(255,255,255,.8);font-size:1.04rem;line-height:1.75;margin-bottom:24px}
.hk-home-hero-text .tag{margin-bottom:18px}
.hk-home-hero-form .hero-form-card{background:var(--white);border-radius:var(--radius-lg);padding:30px 26px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.hk-home-hero-form .hero-form-card h3{font-family:var(--font-head);font-size:1.05rem;font-weight:700;color:var(--primary);margin-bottom:6px;display:flex;align-items:center;gap:8px}
.hk-home-hero-form .hero-form-card p{font-size:.84rem;color:var(--muted);margin-bottom:18px}
/* Client strip under hero */
.hk-home-clients{background:rgba(0,0,0,.22);padding:18px 0;margin-top:52px}
.hk-home-clients .clients-strip img{filter:brightness(0) invert(1);opacity:.65}
.hk-home-clients .clients-strip img:hover{opacity:1}
/* ── ABOUT / WELCOME ── */
.hk-about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hk-about-img{position:relative;border-radius:var(--radius-lg);overflow:hidden}
.hk-about-img img{width:100%;height:460px;object-fit:cover;border-radius:var(--radius-lg);display:block}
.hk-about-badge{position:absolute;bottom:20px;left:20px;background:var(--white);border-radius:var(--radius-lg);padding:14px 18px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px}
.hk-about-badge-ico{width:40px;height:40px;background:var(--primary);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hk-about-badge h4{font-family:var(--font-head);font-size:1rem;font-weight:800;color:var(--primary);line-height:1.1;margin-bottom:2px}
.hk-about-badge span{font-size:.72rem;color:var(--muted);font-family:var(--font-head);font-weight:600}
.hk-about-text h2{font-size:clamp(1.7rem,3vw,2.2rem);margin-bottom:16px}
.hk-about-text p{font-size:.94rem;line-height:1.82;color:var(--muted);margin-bottom:14px}
.hk-about-mini-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px;margin-bottom:28px}
.hk-mini-stat{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-align:center;transition:var(--tr)}
.hk-mini-stat:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.hk-mini-stat-val{font-family:var(--font-head);font-size:1.6rem;font-weight:800;color:var(--accent);display:block;line-height:1;margin-bottom:3px}
.hk-mini-stat-lbl{font-size:.75rem;color:var(--muted);font-family:var(--font-head);font-weight:600}
/* ── INDUSTRY EXPERTISE (keep Bootstrap carousel working) ── */
.hk-industry-section{padding:72px 0;background:var(--white)}
.hk-industry-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:40px;flex-wrap:wrap}
.hk-industry-header h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:0}
.hk-ind-nav{display:flex;gap:10px;flex-shrink:0}
.hk-ind-btn{width:44px;height:44px;background:var(--primary);border:none;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr)}
.hk-ind-btn:hover{background:var(--accent)}
.hk-ind-card{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:24px 20px;text-align:center;transition:var(--tr);height:100%}
.hk-ind-card:hover{box-shadow:var(--shadow-md);border-color:var(--accent);transform:translateY(-4px)}
.hk-ind-card img{width:60px;height:60px;object-fit:contain;margin:0 auto 14px;display:block}
.hk-ind-card a{font-family:var(--font-head);font-size:.94rem;font-weight:700;color:var(--primary);text-decoration:none;transition:color .2s}
.hk-ind-card a:hover{color:var(--accent)}
/* ── PROCESS QUICK STEPS ── */
.hk-process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;position:relative}
.hk-process-steps::before{content:'';position:absolute;top:32px;left:8%;right:8%;height:2px;background:linear-gradient(to right,var(--primary),var(--accent));z-index:0}
.hk-proc-card{text-align:center;padding:0 16px;position:relative;z-index:1}
.hk-proc-num{width:64px;height:64px;background:var(--white);border:3px solid var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-family:var(--font-head);font-size:1.2rem;font-weight:800;color:var(--primary);box-shadow:var(--shadow-md);transition:var(--tr)}
.hk-proc-card:hover .hk-proc-num{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.1)}
.hk-proc-card h4{font-size:.96rem;margin-bottom:8px}
.hk-proc-card p{font-size:.83rem;color:var(--muted);line-height:1.65}
/* ── Responsive ── */
@media(max-width:1100px){.hk-home-hero-inner{grid-template-columns:1fr}.hk-home-hero{padding:48px 0 0}.hk-about-grid{grid-template-columns:1fr;gap:40px}.hk-about-img img{height:320px}.hk-process-steps{grid-template-columns:repeat(2,1fr);gap:24px}.hk-process-steps::before{display:none}}
@media(max-width:768px){.hk-home-hero-form{}.hk-process-steps{grid-template-columns:1fr}.hk-about-mini-stats{grid-template-columns:repeat(2,1fr)}}
/* =================================================================
MOBILE RESPONSIVE FIXES
Covers all new design system components.
Breakpoints used consistently:
1200px Large desktop → small desktop
1024px Desktop → tablet
768px Tablet → mobile
640px Mobile → small mobile
480px Small mobile → extra small
================================================================= */
/* ─────────────────────────────────────────────────────────────────
1200px — Large desktop adjustments
───────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
/* Contact page: stack form + sidebar earlier */
.contact-grid {
grid-template-columns: 1fr 380px;
gap: 36px;
}
/* Homepage hero: tighten form column */
.hk-home-hero-inner {
grid-template-columns: 1fr 380px;
gap: 36px;
}
/* Roles grid: 4→3 cols */
.roles-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ─────────────────────────────────────────────────────────────────
1024px — Tablet breakpoint (major layout changes)
───────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
/* ── Global section padding ── */
.section { padding: 52px 0; }
.section-dark { padding: 52px 0; }
.section-alt { padding: 52px 0; }
/* ── Typography ── */
.section-title { font-size: clamp(1.4rem, 3.5vw, 2rem); }
.section-sub { font-size: .94rem; }
/* ── Trust bar: wrap to 2 per row ── */
.trust-inner {
gap: 12px 24px;
justify-content: center;
}
.trust-div {
display: none;
}
.trust-item {
flex: 0 0 calc(50% - 24px);
justify-content: center;
}
/* ── Page hero ── */
.page-hero { padding: 40px 0 48px; }
.page-hero-inner { text-align: center; }
.page-hero-inner h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.hero-contact-pills { justify-content: center; }
/* ── Stats grid: 5→3→2 cols ── */
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
/* ── Why feats: 2→2 (already 2-col, reduce gap) ── */
.why-feats { gap: 14px; }
.wf { padding: 22px 18px; }
/* ── Roles grid: 4→2 cols ── */
.roles-grid { grid-template-columns: repeat(2, 1fr); }
/* ── Guarantee grid: 3→2 cols ── */
.guarantee-grid {
grid-template-columns: repeat(2, 1fr);
}
/* ── Compare table: enable horizontal scroll ── */
.compare-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.compare {
min-width: 640px;
font-size: .82rem;
}
.compare th,
.compare td { padding: 10px 14px; }
/* ── PPH Banner: flex row→column ── */
.pph-banner {
flex-direction: column;
padding: 40px 32px;
gap: 28px;
text-align: center;
}
.pph-feats { justify-content: center; }
.pph-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.pph-cta .btn { width: 100%; justify-content: center; }
/* ── Testimonials: 3→2 cols ── */
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
/* ── Google badge: center ── */
.google-badge {
margin: 0 auto;
width: fit-content;
}
/* ── Final CTA ── */
.final-cta { padding: 44px 32px; }
.final-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.final-cta-btns {
flex-direction: column;
align-items: center;
gap: 12px;
}
.final-cta-btns .btn {
width: 100%;
max-width: 340px;
justify-content: center;
}
/* ── Contact page ── */
.contact-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.tab-bar {
flex-direction: column;
gap: 6px;
}
.tab-btn { justify-content: center; }
/* ── Form row: 2→1 col on mobile ── */
.form-row { grid-template-columns: 1fr; gap: 12px; }
/* ── Info sidebar ── */
.info-sidebar { order: -1; }
/* ── About intro grid: 2→1 col ── */
.about-intro-grid {
grid-template-columns: 1fr;
gap: 36px;
}
.about-intro-img img { height: 320px; }
/* ── About page MVV grid: 2→2 (keep, reduce gap) ── */
.mvv-grid { gap: 16px; }
/* ── Growth timeline: remove center line, stack ── */
.timeline::before { display: none; }
.tl-row {
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 28px;
}
.tl-left,
.tl-right {
text-align: left;
padding: 20px;
}
.tl-empty { display: none; }
.tl-node {
justify-content: flex-start;
padding: 16px 0 10px;
}
/* ── Method grid: 4→2 cols ── */
.method-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.method-grid::before { display: none; }
/* ── PP policy cards ── */
.pp-card {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 20px;
}
.pp-num-block { flex-direction: row; gap: 12px; }
.pp-rights-grid { grid-template-columns: repeat(2, 1fr); }
.pp-contact-grid { grid-template-columns: 1fr; }
.pp-guarantee-box { grid-template-columns: repeat(2, 1fr); }
/* ── Thank-you page ty- components ── */
.ty-steps-grid { grid-template-columns: 1fr; }
.ty-explore-grid { grid-template-columns: 1fr; }
.ty-contact-inner {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.ty-divider { display: none; }
/* ── Homepage ── */
.hk-about-mini-stats { grid-template-columns: repeat(2, 1fr); }
}
/* ─────────────────────────────────────────────────────────────────
768px — Mobile breakpoint
───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* ── Global ── */
.section { padding: 44px 0; }
.section-dark { padding: 44px 0; }
.section-alt { padding: 44px 0; }
.container { padding: 0 16px; }
/* ── Typography scale ── */
.section-title { font-size: clamp(1.3rem, 5vw, 1.75rem); }
.section-sub { font-size: .88rem; padding-bottom: 10px; }
/* ── Trust bar: 1 per row ── */
.trust-inner { gap: 10px; flex-direction: column; align-items: center; }
.trust-item { flex: 0 0 auto; width: 100%; max-width: 280px; }
/* ── Page hero ── */
.page-hero { padding: 32px 0 40px; }
.page-hero-inner h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
.hero-pill { font-size: .76rem; padding: 5px 12px; }
.hero-contact-pills { gap: 7px; }
/* ── Stats: 5→2 cols ── */
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.stat-card { padding: 20px 14px; }
.stat-val { font-size: 1.6rem; }
/* ── Why feats: 2→1 col ── */
.why-feats { grid-template-columns: 1fr; }
.wf { padding: 20px 18px; }
/* ── Roles grid: 2→1 col ── */
.roles-grid { grid-template-columns: 1fr; }
/* ── Guarantee: 2→1 col ── */
.guarantee-grid { grid-template-columns: 1fr; }
.gcard { padding: 26px 20px; }
/* ── Testimonials: 2→1 col ── */
.testimonials-grid { grid-template-columns: 1fr; }
/* ── FAQ ── */
.faq-q { font-size: .9rem; padding: 14px 16px; }
.faq-a { font-size: .86rem; padding: 0 16px 16px; }
/* ── PPH banner ── */
.pph-banner { padding: 32px 20px; border-radius: var(--radius); }
.pph-banner h2 { font-size: 1.4rem; }
.pph-feats { flex-direction: column; gap: 8px; }
/* ── Final CTA ── */
.final-cta { padding: 36px 20px; border-radius: var(--radius); }
.final-cta h2 { font-size: 1.35rem; }
.final-cta p { font-size: .88rem; }
.final-cta-btns .btn { max-width: 100%; }
/* ── Contact ── */
.contact-form-card { padding: 24px 18px; }
.form-group { margin-bottom: 12px; }
.info-card { padding: 18px 16px; }
/* ── Clients strip ── */
.clients-track { overflow: hidden; }
.client-logo { height: 36px; }
/* ── About page ── */
.mvv-grid { grid-template-columns: 1fr; }
.mvv-card { padding: 26px 20px; }
.method-grid { grid-template-columns: 1fr; gap: 20px; }
/* ── Process page ── */
.process-timeline::before { display: none; }
.pt-row {
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 24px;
}
.pt-left,
.pt-right { text-align: left; padding: 0; }
.pt-empty { display: none; }
.pt-node { justify-content: flex-start; padding: 14px 0 8px; }
.pt-content { padding: 20px 18px; }
/* Quick steps: 2→1 col */
.quick-steps { grid-template-columns: 1fr; }
.quick-steps::before { display: none; }
/* Package cards */
.pkg-grid { grid-template-columns: 1fr; }
.pkg-card { padding: 28px 22px; }
/* ── PP policy pages ── */
.pp-toc { grid-template-columns: repeat(2, 1fr); }
.pp-rights-grid { grid-template-columns: 1fr; }
.pp-guarantee-box { grid-template-columns: 1fr; }
/* ── Topbar on mobile ── */
.hk-topbar-inner { flex-direction: column; gap: 8px; align-items: flex-start; }
.hk-topbar-addr { display: none; }
.hk-topbar-right { flex-wrap: wrap; gap: 6px; }
/* ── Navbar ── */
.hk-navbar-inner { padding: 12px 16px; }
.hk-nav-logo img { height: 36px; }
/* ── Homepage ── */
.hk-home-hero { padding: 36px 0px 36px 0px; }
.hk-home-hero-inner { grid-template-columns: 1fr; gap: 24px; }
.hk-home-hero-text h1 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.hk-about-grid { grid-template-columns: 1fr; gap: 28px; }
.hk-about-img img { height: 260px; }
.hk-about-mini-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hk-mini-stat-val { font-size: 1.4rem; }
.hk-industry-section { padding: 44px 0; }
.hk-ind-card { padding: 18px 14px; }
.hk-process-steps { grid-template-columns: 1fr; gap: 20px; }
.hk-process-steps::before { display: none; }
.hk-proc-num { width: 56px; height: 56px; font-size: 1.1rem; }
/* ── Thank-you page ── */
.ty-hero { padding: 40px 0 52px; }
.ty-check-wrap { width: 72px; height: 72px; }
.ty-stats-band { padding: 40px 0; }
.ty-stats-inner {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.ty-stat { border-right: none; padding: 0 12px; }
.ty-stat-val { font-size: 1.8rem; }
.ty-contact-bar { padding: 20px 0; }
.ty-contact-inner { gap: 12px; }
.ty-rating-badge { flex-wrap: wrap; }
/* ── Job pages ── */
.jobs-grid { grid-template-columns: 1fr; }
.job-card { padding: 22px 18px; }
.jd-layout { grid-template-columns: 1fr; }
.apply-card { position: static; padding: 22px 18px; }
.jd-content-card { padding: 22px 18px; }
.jd-meta-bar { gap: 8px; }
/* ── Package plan pages ── */
.price-grid { grid-template-columns: 1fr; }
.price-card.featured { transform: none; }
.price-card.featured:hover { transform: translateY(-5px); }
.clause-grid { grid-template-columns: 1fr; }
.who-grid { grid-template-columns: 1fr; }
.prob-grid { grid-template-columns: 1fr; }
.savings-band { padding: 28px 20px; flex-direction: column; gap: 20px; text-align: center; }
}
/* ─────────────────────────────────────────────────────────────────
640px — Small mobile
───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* ── Global ── */
.section { padding: 36px 0; }
.container { padding: 0 14px; }
/* ── Stats: 2-col keep, reduce size ── */
.stat-card { padding: 16px 10px; }
.stat-val { font-size: 1.4rem; }
.stat-lbl { font-size: .72rem; }
/* ── Page hero ── */
.page-hero { padding: 28px 0 36px; }
.page-hero-inner h1 { font-size: clamp(1.4rem, 7vw, 1.8rem); }
/* ── Tags ── */
.tag { font-size: .7rem; padding: 4px 10px; }
/* ── Buttons ── */
.btn-lg { padding: 12px 20px; font-size: .9rem; }
.btn { font-size: .84rem; padding: 10px 16px; }
/* ── Final CTA btns ── */
.final-cta-btns .btn { font-size: .88rem; padding: 12px 18px; }
/* ── Compare table full scroll ── */
.compare { min-width: 560px; font-size: .78rem; }
.compare th { font-size: .78rem; padding: 10px 12px; }
.compare td { font-size: .8rem; padding: 9px 12px; }
/* ── Testimonials ── */
.tcard { padding: 20px 16px; }
.ttext { font-size: .86rem; }
/* ── PPH banner ── */
.pph-banner h2 { font-size: 1.25rem; }
/* ── Google badge compact ── */
.google-badge { flex-direction: column; text-align: center; gap: 6px; padding: 12px; }
/* ── FAQ ── */
.faq-q { font-size: .86rem; }
/* ── Thank-you ── */
.ty-stats-inner { grid-template-columns: 1fr 1fr; }
.ty-hero-btns { flex-direction: column; align-items: center; }
.ty-btn { width: 100%; max-width: 300px; justify-content: center; }
/* ── PP toc ── */
.pp-toc { grid-template-columns: 1fr; }
.pp-card { padding: 20px 16px; }
.pp-toc-item { font-size: .78rem; padding: 10px 12px; }
/* ── Contact form ── */
.contact-form-card h2 { font-size: 1.2rem; }
.tab-btn { font-size: .82rem; padding: 9px 14px; }
.form-control { font-size: .86rem; padding: 10px 12px; }
/* ── Topbar ── */
.hk-topbar { padding: 6px 0; font-size: .76rem; }
.hk-topbar-right a { font-size: .72rem; padding: 3px 10px; }
/* ── Homepage ── */
.hk-home-hero-text h1 { font-size: clamp(1.5rem, 7vw, 2rem); }
.hk-about-mini-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.hk-mini-stat-val { font-size: 1.3rem; }
.hk-mini-stat-lbl { font-size: .7rem; }
/* ── Job pages ── */
.jd-meta-pill { font-size: .76rem; }
.apply-btn { font-size: .88rem; }
}
/* ─────────────────────────────────────────────────────────────────
480px — Extra small (compact all elements)
───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
/* ── Global ── */
.section { padding: 32px 0; }
.container { padding: 0 12px; }
/* ── Topbar ── */
.hk-topbar { padding: 10px 0; font-size: .76rem; }
.hk-topbar-right a { font-size: .72rem; padding: 6px 10px; }
/* ── Stats: 2→2 but tighter ── */
.stats-grid { gap: 10px; }
.stat-val { font-size: 1.3rem; }
/* ── Trust bar items: inline flex ── */
.trust-item { max-width: none; font-size: .8rem; }
/* ── Hero pills ── */
.hero-pill { font-size: .72rem; padding: 4px 10px; }
/* ── Page hero ── */
.page-hero-inner h1 { font-size: 1.4rem; }
.page-hero { padding: 24px 0 32px; }
/* ── Section title ── */
.section-title { font-size: 1.3rem; }
.section-sub { font-size: .84rem; }
/* ── Buttons ── */
.btn-lg { padding: 11px 18px; font-size: .86rem; }
/* ── Final CTA ── */
.final-cta { padding: 28px 14px; }
.final-cta h2 { font-size: 1.2rem; }
/* ── PPH banner ── */
.pph-banner { padding: 26px 14px; }
.pph-banner h2 { font-size: 1.15rem; }
/* ── Testimonials ── */
.tcard { padding: 18px 14px; }
/* ── FAQ ── */
.faq-q { font-size: .84rem; padding: 13px 14px; gap: 8px; }
.faq-a { padding: 0 14px 14px; font-size: .84rem; }
/* ── PP toc items ── */
.pp-toc-item { font-size: .76rem; gap: 7px; padding: 9px 10px; }
/* ── Thank-you stats ── */
.ty-stat-val { font-size: 1.6rem; }
.ty-hero { padding: 32px 0 44px; }
.ty-pill { font-size: .76rem; padding: 5px 12px; }
.ty-contact-inner { flex-direction: column; gap: 10px; }
/* ── Topbar: minimal on very small screens ── */
.hk-topbar-inner { padding: 0 12px; }
/* ── Pricing tables ── */
.dhr-compare { font-size: .74rem; }
.dhr-compare th,
.dhr-compare td { padding: 8px 10px; }
/* ── Homepage ── */
.hk-about-badge { padding: 12px 14px; gap: 8px; }
.hk-about-badge h4 { font-size: .9rem; }
.hk-ind-card { padding: 16px 12px; }
.hk-proc-card h4 { font-size: .88rem; }
/* ── Job pages ── */
.job-card { padding: 18px 14px; }
.jobs-empty { padding: 40px 16px; }
/* ── Package pages ── */
.price-card { padding: 26px 18px; }
.price-amount { font-size: 1.8rem; }
/* ── Contact page ── */
.tab-btn { font-size: .78rem; }
.form-control { font-size: .84rem; }
}
/* ─────────────────────────────────────────────────────────────────
360px — Very small (some phones)
───────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
.container { padding: 0 10px; }
.page-hero-inner h1 { font-size: 1.25rem; }
.section-title { font-size: 1.2rem; }
.btn-lg { padding: 10px 14px; font-size: .82rem; }
.hk-nav-logo img { height: 30px; }
.ty-stat-val { font-size: 1.4rem; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.stat-val { font-size: 1.2rem; }
}
/* ─────────────────────────────────────────────────────────────────
PRINT — hide decorative/interactive elements
───────────────────────────────────────────────────────────────── */
@media print {
.hk-topbar,
.hk-site-nav,
.footer,
.pph-banner,
.final-cta,
.clients-track,
.testimonials-grid,
.faq-list + div { display: none !important; }
.section { padding: 24px 0; }
body { font-size: 12pt; }
}
.accordion-button{font-size:14px;}
.accordion-body{font-size:14px;}
.bd{border:1px solid #ccc;}
@media (min-width: 992px) {
.enquiry-form .enquiry-sticky {
position: -webkit-sticky;
position: sticky;
top: 100px; /* clears your fixed navbar — adjust to navbar height + ~20px */
width: 100%;
}
}