.hero {
background:url(../image/hrms_dash.png) center center / cover no-repeat;
align-items:flex-start;
min-height:0;
padding-top:70px;
padding-bottom:30px
}

.hero .hero-content {
text-align:left;
margin-left:6%;
max-width:620px
}

.hero .hero-content h1{

color:#074b88
}
.hero .hero-content h1 span {
    color: #fca918;
}
.hero .hero-content h1 {
font-size:32px
}

.hero .hero-content p {
color:#e6ecf2;
margin-left:0
}

.hero .hero-buttons {
justify-content:flex-start
}

.hero .secondary-btn {
border-color:#fff;
color:#fff
}

@media (max-width: 768px) {
.hero .hero-content {
margin-left:0;
text-align:center;
max-width:none
}

.hero .hero-content h1 {
font-size:32px
}

.hero .hero-buttons {
justify-content:center
}
}

@media (max-width: 480px) {
.hero .hero-content h1 {
font-size:26px
}
}

.journey-section {
width:90%;
max-width:1400px;
margin:100px auto;
text-align:center
}

.journey-badge {
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 18px;
border:1px solid #E6EDF5;
border-radius:30px;
background:#fff;
color:#234F6D;
font-size:14px;
font-weight:600
}

.journey-badge i {
color:#234F6D
}

.journey-section h2 {
margin:22px 0 15px;
font-size:54px;
font-weight:700;
color:#111
}

.journey-desc {
max-width:850px;
margin:0 auto 60px;
font-size:18px;
line-height:1.7;
color:#777
}

.journey-image {
width:100%;
display:flex;
justify-content:center
}

.journey-image img {
width:100%;
max-width:1200px;
height:auto;
display:block
}

@media (max-width:992px) {
.journey-section {
margin:70px auto
}

.journey-section h2 {
font-size:38px
}

.journey-desc {
font-size:16px;
margin-bottom:40px
}

.journey-image img {
max-width:100%
}
}

.section {
width:90%;
max-width:1500px;
margin:auto;
box-sizing:border-box;
display:grid;
grid-template-columns:38% 1fr;
align-items:start;
gap:70px;
padding:60px 24px
}

.left {
position:sticky;
top:100px
}

.left h2 {
font-size:42px;
line-height:1.1;
color:#1b1b1b;
margin-top:20px;
margin-bottom:30px
}

.left p {
color:#5b6d82;
font-size:16px;
line-height:26px;
margin-bottom:30px
}

.btn {
display:inline-block;
padding:18px 40px;
background:#16b65a;
color:#fff;
text-decoration:none;
font-weight:600;
border-radius:10px;
transition:.3s
}

.btn:hover {
background:#0e9d4b
}

.right {
padding-right:10px
}

.hr-card {
display:flex;
gap:20px;
padding:25px 0;
border-top:1px solid #e6e6e6
}

.hr-card:last-child {
border-bottom:1px solid #e6e6e6
}

.icon {
width:48px;
height:48px;
min-width:48px;
background:#45A9FF;
border-radius:12px;
display:flex;
justify-content:center;
align-items:center;
color:#fff;
font-size:18px
}

.text h3 {
font-size:20px;
color:#111;
margin-bottom:8px
}

.text p {
color:#5b6d82;
font-size:15px;
line-height:24px
}

@media(max-width:991px) {
.section {
grid-template-columns:1fr
}

.left {
position:relative;
top:0
}

.left h2 {
font-size:32px
}

.text h3 {
font-size:18px
}

.text p {
font-size:14px;
line-height:22px
}
}

@media(max-width:480px) {
.journey-section h2 {
font-size:28px
}

.journey-desc {
font-size:14px
}

.section {
padding:40px 16px;
gap:40px
}

.left h2 {
font-size:26px;
margin-top:12px;
margin-bottom:16px
}

.left p {
font-size:14px;
margin-bottom:20px
}

.btn {
padding:14px 28px
}
}