/* ============================================================
SUVARNA TECHNOSOFT – PRODUCT PAGE STYLESHEET
Cleaned · Deduplicated · Fully Responsive
============================================================ */
/* ── FONT: INTER ── */
/* For best performance also add these tags to the page :
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
/* ── CSS VARIABLES ── */
:root {
--brand-teal: #0B5C6D;
--brand-orange: #ff8c00;
--brand-light-bg: #EAF8F9;
--text-dark: #1F2933;
--white: #ffffff;
--font: 'Inter', sans-serif;
--shadow-sm: 0 4px 14px rgba(11, 92, 109, 0.08);
--shadow-md: 0 10px 30px rgba(11, 92, 109, 0.12);
--shadow-lg: 0 20px 45px rgba(11, 92, 109, 0.16);
--radius: 16px;
}
/* ── RESET ── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
scroll-behavior: smooth;
}
/* ── BASE ── */
body {
font-family: var(--font);
-webkit-font-smoothing: antialiased;
}
/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font);
letter-spacing: -.02em;
margin-bottom: 18px;
}
h1 {
font-size: 40px;
font-weight: 800;
line-height: 1.25;
color: var(--brand-orange);
margin-bottom: 20px;
}
h2 {
font-size: 32px;
font-weight: 800;
color: var(--brand-teal);
position: relative;
display: inline-block;
padding: 2px 6px;
margin-bottom: 24px;
}
/* h2::after {
content: '';
display: block;
width: 46px;
height: 4px;
margin-top: 10px;
background: linear-gradient(90deg, var(--brand-orange), var(--brand-teal));
border-radius: 4px;
}*/
/*.text-center h2::after {
margin: 10px auto 0;
}*/
h3, h4, h5 {
font-size: 19px;
font-weight: 700;
color: var(--brand-teal);
margin-bottom: 14px;
}
/* Orange left-border accent on headings (exclude centered/card headings) */
h3, h5, h6 {
border-left: 3px solid var(--brand-orange);
padding-left: 8px;
}
.text-center h3,
.text-center h5,
.text-center h6,
.why-card h5,
.industry-card h4,
.config-card h6,
.how-card h5,
.impact-title,
.hrview-mobile-title {
border-left: none;
padding-left: 0;
}
p {
font-size: 15.5px;
line-height: 1.8;
text-align: left;
}
small {
font-size: 13px;
color: rgb(218, 93, 3) !important;
}
mark.brand-mark {
background: linear-gradient(90deg, #ff8c0022, #09859f22);
color: var(--brand-orange);
padding: 0 4px;
border-radius: 4px;
font-weight: 700;
}
/* ── NAVBAR ── */
.navbar {
background-color: var(--white);
box-shadow: 0 2px 16px rgba(11, 92, 109, 0.08);
position: sticky;
top: 0;
z-index: 1000;
}
.navbar-brand span:first-child {
color: var(--brand-teal);
font-weight: 700;
}
.navbar-brand span:last-child {
color: var(--brand-orange);
font-weight: 700;
}
.nav-link {
font-size: 14px;
font-weight: 600;
color: var(--text-dark);
padding: 8px 14px !important;
}
.nav-link:hover {
color: var(--brand-teal);
}
/* ── BUTTONS ── */
.btn {
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}
.Request_div {
border-radius: 10px !important;
background-image: linear-gradient(to right, #0A5D6F, #09859F) !important;
color: white !important;
}
.Request_div:hover {
background-image: linear-gradient(to right, #ffffff, #ececec) !important;
color: #0A5D6F !important;
border: 1px solid #0A5D6F !important;
}
.Request_div2 {
background-image: linear-gradient(to right, #ffffff9f, #ffffff) !important;
color: #00b0c4 !important;
border-radius: 10px !important;
border: 1px solid #0A5D6F !important;
}
.Request_div2:hover {
background-image: linear-gradient(to right, #58828fa3, #325997) !important;
color: white !important;
}
/* ── HERO ── */
.heroo {
min-height: 78vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second-hero {
color: rgba(255, 255, 255, 0.88) !important;
text-align: left;
}
/* Logo row */
.hero-logo-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.hero-logo-wrap img {
width: 64px;
height: auto;
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.hero-title-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
/* Pill badge */
.hero-pill {
display: inline-flex;
align-items: center;
gap: 10px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 30px;
padding: 8px 18px;
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 22px;
}
.hero-pill .pulse {
color: var(--brand-orange);
font-size: 14px;
}
.hero-pill p {
color: #fff !important;
margin-bottom:0;
}
/* Heading */
.hero-heading {
font-size: 44px;
line-height: 1.35;
color: #fff;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}
.hero-heading sup {
font-size: 18px;
top: -1.2em;
}
.hero-heading .accent {
color: var(--brand-orange);
background: linear-gradient(90deg, rgba(255,140,0,0.22), rgba(255,140,0,0.02));
padding: 2px 10px;
border-radius: 6px;
box-shadow: inset 0 -3px 0 rgba(255, 140, 0, 0.5);
font-weight: 700;
}
/* Breadcrumb */
.hero-breadcrumb {
font-size: 14px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
margin-top: 18px;
text-align: left;
}
.hero-breadcrumb span.sep {
color: var(--brand-orange);
margin: 0 6px;
}
/* Social rail */
.hero-social-rail {
position: absolute;
left: 40px;
bottom: 36px;
z-index: 3;
display: flex;
flex-direction: column;
gap: 12px;
}
.hero-social-rail a {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
text-decoration: none;
transition: transform 0.25s ease;
}
.hero-social-rail a:hover {
transform: translateY(-3px);
}
.hero-social-rail a.ig {
background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}
.hero-social-rail a.fb {
background: #1877F2;
}
.hero-social-rail a.wa {
background: #25D366;
}
/* Floating cert badge */
.hero-floating-badge {
position: absolute;
right: 14%;
top: 46%;
z-index: 3;
width: 92px;
text-align: center;
background: linear-gradient(160deg, #ff8c00, #e0700a);
border-radius: 12px;
padding: 10px 8px 12px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.4;
}
.hero-floating-badge img {
width: 38px;
height: 38px;
border-radius: 50%;
background: #fff;
padding: 4px;
margin: 4px auto;
display: block;
}
.hero-floating-badge .badge-top,
.hero-floating-badge .badge-bottom {
font-size: 8px;
opacity: 0.85;
}
.hero-floating-badge .badge-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin-top: 4px;
padding-top: 3px;
}
/* Hero right-side logo */
.hero-logo-side {
display: flex;
align-items: center;
height: 100%;
background: #ffffff;
padding: 10px;
width: 140px;
border-radius: 8px;
}
.hero-logo-side img {
width: 120px;
height: auto;
filter: drop-shadow(0 16px 34px rgba(0, 0, 0, 0.5));
}
.title-flex {
display: flex;
flex-direction: column;
}
/* ── CARDS ── */
.card {
border: none;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg) !important;
}
.card-title {
font-size: 18px;
font-weight: 700;
color: var(--brand-teal);
margin-bottom: 10px;
}
/* Why cards */
.why-card {
background: #fff;
border-radius: var(--radius);
padding: 20px 10px;
box-shadow: var(--shadow-sm);
text-align: center;
border-top: 4px solid var(--brand-teal);
transition: 0.35s ease;
height: 100%;
}
/* .why-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
}*/
.why-card h5 {
color: var(--brand-teal);
font-size: 17px;
font-weight: 700;
margin-bottom: 8px;
text-align: center;
}
.why-card p {
font-size: 14px;
color: #666 !important;
text-align: center;
}
.why-card-orange {
border-top-color: var(--brand-orange);
}
.why-card-teal {
border-top-color: #083F4A;
}
.why-icon {
width: 60px;
height: 60px;
min-width: 36px;
border-radius: 50%;
background-image: linear-gradient(135deg, #0B5C6D, #09859F);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 25px;
margin-top: 2px;
margin: 10px auto;
}
.why-icon-orange {
background-image: linear-gradient(135deg, #ff8c00, #ffb347);
}
.why-icon-teal {
background-image: linear-gradient(135deg, #083F4A, #0B5C6D);
}
/* Feature cards */
.feature-card, .payroll-highlight {
background: #fff;
border-radius: 16px;
padding: 20px 15px;
box-shadow: 0 4px 18px rgba(11, 92, 109, 0.08);
height: 100%;
border-left: 4px solid var(--brand-teal);
transition: 0.3s;
}
.feature-card h5 {
color: var(--brand-teal);
font-size: 20px;
font-weight: 700;
margin: 14px 0 8px;
text-align: left;
}
.feature-card p {
font-size: 14px;
color: #666 !important;
text-align: justify;
}
.feature-card i,
.feature-card .f-icon {
font-size: 30px;
color: var(--brand-teal);
}
.feature-card.orange-border,
.feature-card-orange {
border-left: 4px solid var(--brand-teal)
}
.feature-card.orange-border .f-icon {
color: var(--brand-orange);
}
/* Impact cards */
.impact-card {
background: #fff;
border-radius: 16px;
padding: 15px 0;
box-shadow: var(--shadow-sm);
text-align: center;
border-bottom: 4px solid var(--brand-teal);
transition: 0.3s;
}
.impact-card:hover {
transform: translateY(-6px);
}
.impact-number {
font-size: 35px;
font-weight: 700;
color: var(--brand-teal);
}
.impact-title {
color: var(--brand-orange) !important;
font-weight: 600;
font-size: 15px;
text-align: center;
padding-bottom: 0;
}
.impact-desc {
font-size: 13px;
color: #888 !important;
text-align: center;
}
/* Industry cards */
.industry-card {
border-radius: 20px;
padding: 20px 10px;
text-align: center;
position: relative;
overflow: hidden;
transition: 0.3s;
}
/*
.industry-card:hover {
transform: translateY(-6px);
}*/
.industry-card.teal-grad {
background: linear-gradient(135deg, #0B5C6D, #0d7a8f);
}
.industry-card.orange-grad {
background: linear-gradient(135deg, #ff8c00, #ffb347);
}
.industry-card.dark-grad {
background: linear-gradient(135deg, #083F4A, #0B5C6D);
}
.industry-card.teal2-grad {
background: linear-gradient(135deg, #09859F, #0B5C6D);
}
.industry-card i,
.industry-card .bi {
font-size: 30px;
margin-bottom: 16px;
color: #fff !important;
opacity: 0.9;
}
.industry-card h4 {
font-size: 18px;
font-weight: 700;
color: #fff;
margin-bottom: 8px;
text-align: center;
}
.industry-card p {
font-size: 14px;
color: rgba(255, 255, 255, 0.88) !important;
text-align: center;
}
/* Config cards */
.config-card {
background: linear-gradient(135deg, #EAF8F9, #ffffff);
border-radius: 16px;
padding: 28px;
border: 1px solid #c8eef4;
box-shadow: 0 4px 14px rgba(11, 92, 109, 0.06);
height: 100%;
transition: 0.3s;
}
/* .config-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(11, 92, 109, 0.12);
}*/
.config-card i,
.config-card .cfg-icon {
font-size: 28px;
color: var(--brand-teal);
}
.config-card h6 {
font-size: 15px;
font-weight: 700;
color: var(--brand-teal);
margin: 12px 0 6px;
text-align: center;
}
.config-card p {
font-size: 13px;
color: #666 !important;
text-align: center;
}
/* How cards */
.how-card {
background: #fff;
border-radius: 16px;
padding: 30px 20px;
box-shadow: var(--shadow-sm);
height: 100%;
border-top: 4px solid var(--brand-teal);
}
.how-card-orange {
border-top-color: var(--brand-orange);
}
.how-card-dark {
border-top-color: #083F4A;
}
.how-card h5 {
color: var(--brand-teal);
}
.how-card-text {
font-size: 14px;
color: #666 !important;
text-align: center;
}
.how-step-number {
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
font-size: 20px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
background: linear-gradient(135deg, #0B5C6D, #09859F);
}
.how-step-number-orange {
background: linear-gradient(135deg, #ff8c00, #ffb347);
}
.how-step-number-dark {
background: linear-gradient(135deg, #083F4A, #0B5C6D);
}
/* ── TRANSFORM ITEMS ── */
.transform-item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid #e0f0f3;
}
.transform-item:last-child {
border-bottom: none;
}
.transform-dot {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background-image: linear-gradient(135deg, #0B5C6D, #09859F);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 15px;
margin-top: 2px;
}
.transform-item h6 {
font-size: 15px;
font-weight: 700;
color: var(--brand-teal);
margin-bottom: 3px;
text-align: left;
}
.transform-item p {
font-size: 13px;
color: #666 !important;
margin: 0;
text-align: justify;
}
/* ── ESS PORTAL ── */
.ess-box {
background: #fff;
border-radius: 16px;
padding: 30px;
box-shadow: 0 4px 18px rgba(11, 92, 109, 0.08);
border-top: 4px solid var(--brand-teal);
height: 100%;
}
.ess-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid #e0f0f3;
font-size: 14px;
color: rgb(70, 69, 69);
text-align: left;
}
.ess-item:last-child {
border-bottom: none;
}
.ess-item i,
.ess-item .bi {
color: var(--brand-teal);
font-size: 18px !important;
flex-shrink: 0;
}
/* ── APP FEATURE ── */
.app-feature-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #e0f0f3;
}
.app-feature-item:last-child {
border-bottom: none;
}
.app-dot {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
background-image: linear-gradient(135deg, #ff8c00, #ffb347);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 14px;
}
.app-feature-item p {
font-size: 14px;
color: #555 !important;
margin: 0;
text-align: justify;
}
.app-feature-item strong {
font-size: 14px;
color: var(--brand-teal);
display: block;
text-align: left;
}
/* ── MULTILOCATION ── */
.multiloc-card {
background: #fff;
border-radius: var(--radius);
padding: 22px 26px;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--brand-orange);
display: flex;
align-items: center;
gap: 14px;
transition: 0.3s ease;
}
/* .multiloc-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
}*/
.multiloc-card i {
font-size: 26px;
color: var(--brand-orange);
flex-shrink: 0;
}
.multiloc-card span {
font-size: 14px;
font-weight: 600;
color: var(--brand-teal);
}
.payroll-highlight h3 {
color: var(--brand-teal);
font-size: 22px;
text-align: left;
margin-bottom: 1rem;
}
.animate.show h5 {
font-size: 20px;
}
.payroll-highlight p {
font-size: 14px;
color: #666 !important;
text-align: justify;
padding-bottom: 1rem;
}
.payroll-highlight ul {
padding-left: 0;
}
.payroll-highlight li {
color: var(--brand-teal);
font-size: 14px;
padding: 6px 0;
list-style: none;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
}
.payroll-highlight li i {
color: var(--brand-orange);
}
/* ── HRVIEW MOBILE BOX ── */
.hrview-mobile-box {
background: linear-gradient(135deg, #083F4A, #09859F);
border-radius: 24px;
padding: 40px;
text-align: center;
color: #fff;
}
.hrview-mobile-box h4 {
color: var(--brand-orange);
font-size: 24px;
}
.hrview-mobile-box p {
color: #fff !important;
}
.hrview-mobile-box .solution-pill {
width: auto;
}
.hrview-mobile-icon {
font-size: 80px;
color: rgba(255, 255, 255, 0.85);
}
.hrview-mobile-title {
color: var(--brand-orange);
margin-top: 20px;
}
.hrview-mobile-description {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 14px;
text-align: center;
}
/* ── EDUKARES MOBILE BOX ── */
.edukares-mobile-box {
background: linear-gradient(135deg, #083F4A, #09859F);
border-radius: 24px;
padding: 10px 10px;
text-align: center;
color: #fff;
}
.edukares-mobile-icon {
font-size: 80px;
color: rgba(255, 255, 255, 0.85);
}
.edukares-mobile-title {
color: var(--brand-orange);
margin-top: 20px;
}
.edukares-mobile-description {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 14px;
text-align: center;
}
/* ── MOBILE PLATFORM PILLS ── */
.mobile-platform-pill {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
}
/* ── STORE BADGES ── */
.store-badge-btn {
display: inline-block;
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.store-badge-btn:hover {
color:#fff;
}
/*
.store-badge-inner {
display: flex;
align-items: center;
gap: 10px;
background: rgba(0, 0, 0, 0.55);
border: 1.5px solid rgba(255, 255, 255, 0.35);
border-radius: 12px;
padding: 10px 18px;
width: 100%;
backdrop-filter: blur(6px);
}*/
.store-badge-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding:5px;
}
.store-badge-text {
text-align: left;
}
.store-badge-sub {
font-size: 9px;
font-weight: 600;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
line-height: 1;
margin-bottom: 3px;
}
.store-badge-name {
font-size: 16px;
font-weight: 700;
color: #ffffff;
line-height: 1;
white-space: nowrap;
}
/* ── PILL TAGS ── */
.solution-pill {
display: inline-block;
background: linear-gradient(90deg, #0A5D6F22, #09859F22);
border: 1px solid #0B5C6D44;
border-radius: 30px;
padding: 5px 14px;
font-size: 13px;
font-weight: 600;
color: var(--brand-teal);
margin: 3px;
}
/* Grid layout for pill lists */
.d-flex.flex-wrap.gap-2 {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 5px !important;
align-items: stretch;
width: 100px;
}
.solution-pill {
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
justify-content: flex-start;
white-space: nowrap;
}
.solution-pill .bi {
font-size: 18px !important;
}
/* ── MONOGRAPH GRID ── */
.monograph-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.monograph-item {
display: flex;
align-items: flex-start;
gap: 6px;
background: linear-gradient(90deg, #EAF8F9, #fff);
border: 1px solid #c8eef4;
border-radius: 8px;
padding: 7px 10px;
font-size: 12px;
font-weight: 600;
color: var(--brand-teal);
line-height: 1.3;
}
.monograph-item .bi {
color: var(--brand-orange);
font-size: 13px;
flex-shrink: 0;
margin-top: 2px;
}
.monograph-item span {
word-break: break-word;
font-size: 14px;
}
/* ── SUCCESS BAND ── */
.success-band {
background: linear-gradient(90deg, #0A5D6F, #09859F);
border-radius: 20px;
padding: 50px 40px;
color: #fff;
text-align: center;
}
.success-band h3 {
color: #fff;
font-size: 26px;
}
.success-band p {
color: rgba(255, 255, 255, 0.88) !important;
font-size: 16px;
max-width: 620px;
margin: 12px auto 28px;
text-align: center;
}
/* ── SECTIONS ── */
.section-light {
background-color: var(--brand-light-bg);
}
.ctcc {
background-image: linear-gradient(90deg, #aadde8, #f7b47df5) !important;
}
.ora {
color: rgb(218, 93, 3) !important;
}
.nuedoc-banner {
background-color: #062b4f;
border-radius: 16px;
overflow: hidden;
padding: 12px;
}
.ovrcrd {
padding: 20px;
}
.ovrH {
font-size: 26px;
color: var(--brand-teal);
font-weight: 700;
}
.ovrP {
font-size: 15px;
color: rgb(70, 69, 69);
text-align: justify;
}
.overview-container {
padding-top: 2%;
}
#features {
padding-top: 2%
}
/* ── SECTION LABEL ── */
.section-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff;
display: inline-block;
background: linear-gradient(90deg, var(--brand-orange), #ffb347);
padding: 4px 14px;
border-radius: 20px;
/* width: 250px;*/
margin: 0 auto;
text-align: center;
}
/* ── DESCRIPTION HELPERS ── */
.payroll-section-description,
.industry-section-description,
.benefits-description,
.how-description,
.dashboard-section-description {
max-width: 560px;
margin: 0 auto;
text-align: center;
}
.dashboard-section-description {
max-width: 580px;
}
.how-description {
max-width: 540px;
}
.industry-section-description {
text-align: center;
}
/* ── ICON UTILITIES ── */
.icon-orange {
color: var(--brand-orange);
}
.icon-teal {
color: var(--brand-teal);
}
.payroll-main-icon {
font-size: 38px;
color: var(--brand-orange);
}
.payroll-feature-icon {
font-size: 34px;
color: var(--brand-orange);
}
.payroll-feature-icon-orange {
font-size: 34px;
color: var(--brand-orange);
}
.mobile-feature-icon {
font-size: 26px;
}
.dashboard-icon {
display: block;
}
/* Bootstrap Icons sizing by section */
/*.section-light .bi,
.why-icon .bi {
font-size: 20px;
text-align: center;
margin: 0;
}*/
#features .bi {
font-size: 30px;
color: var(--brand-teal);
}
.footer .bi-printer-fill,
.footer .bi-telephone-fill,
.footer .bi-envelope-fill,
.footer .bi-geo-alt-fill {
font-size: 18px;
}
/* Configurable variants */
.configurable-orange-card {
border-top-color: var(--brand-orange);
}
.configurable-orange-icon {
background-image: linear-gradient(135deg, #ff8c00, #ffb347);
}
.configurable-dark-card {
border-top-color: #083F4A;
}
.configurable-dark-icon {
background-image: linear-gradient(135deg, #083F4A, #0B5C6D);
}
/* ── LIST STYLE ── */
ul li {
display: flex;
align-items: flex-start;
gap: 8px;
}
/* ── MODAL ── */
.modal-content {
border-radius: 16px;
}
.modal-header {
background: linear-gradient(90deg, #083F4A, #0B5C6D);
border-radius: 16px 16px 0 0;
}
.modal-title {
color: #fff !important;
font-weight: 600;
}
.btn-close {
filter: invert(1);
}
.form-label {
font-weight: 500;
}
.mandatory {
color: red;
}
/* ── FOOTER ── */
footer {
background-color: #083F4A;
color: var(--white);
}
footer p, footer a {
color: rgba(255, 255, 255, 0.75) !important;
font-size: 14px;
text-align: left;
}
footer a:hover {
color: var(--white) !important;
}
footer h6 {
color: #fff;
}
/* ── IMAGES ── */
.img-fluid {
width: 25rem;
height: 25rem;
padding: 20px;
background-image: linear-gradient(45deg, #09869f82, #ed7d2186);
border: 1px solid orangered;
border-radius: 10px;
transition: transform 0.7s ease;
}
.img-fluid:hover {
transform: scale(1.06);
}
/* ── ANIMATIONS ── */
.animate {
opacity: 0;
transform: translateY(40px);
transition: all 0.9s ease;
}
.animate.show {
opacity: 1;
transform: translateY(0);
}
.fade-up {
transform: translateY(40px);
}
.fade-left {
transform: translateX(-60px);
}
.fade-right {
transform: translateX(60px);
}
.zoom-in {
transform: scale(0.92);
}
.delay-1 {
transition-delay: 0.15s;
}
.delay-2 {
transition-delay: 0.30s;
}
.delay-3 {
transition-delay: 0.45s;
}
.delay-4 {
transition-delay: 0.60s;
}
/* Section-specific tweaks */
#features p {
padding-bottom: 2rem;
}
.para {
padding-bottom: 2rem;
}
/*#payroll p {
text-align: center;
}*/
.col-lg-6 p {
margin-bottom: 20px;
}
.col-lg-6 p:last-of-type {
margin-bottom: 10px;
margin-top: 10px;
}
.product-overview-section .col-lg-6 p {
margin-bottom: 20px;
}
/* ── RESPONSIVE : TABLET (≤ 991px) ── */
@media (max-width: 991.98px) {
h1, .hero-heading {
font-size: 32px;
}
h2 {
font-size: 22px;
}
.hero-floating-badge {
display: none;
}
.hero-social-rail {
left: 18px;
bottom: 18px;
}
.hero-logo-side img {
width: 130px;
margin: 0 auto 20px;
}
.heroo {
min-height: 100vh;
}
p {
font-size: 14px !important;
}
.payroll-highlight {
padding: 24px;
}
.success-band {
padding: 36px 24px;
}
.hrview-mobile-box,
.edukares-mobile-box {
padding: 28px 20px;
}
}
/* ── RESPONSIVE : MOBILE (≤ 767px) ── */
@media (max-width: 767.98px) {
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
h3, h4, h5 {
font-size: 16px;
}
.hero-heading {
font-size: 22px;
}
.hero-heading sup {
font-size: 14px !important;
}
.hero-heading .accent {
font-size: 14px !important;
}
p {
font-size: 14px !important;
}
.heroo {
min-height: 100vh;
}
/* Impact numbers */
.impact-number {
font-size: 25px !important;
}
/* Payroll section */
.payroll-highlight {
padding: 10px !important;
}
.ctcc {
padding: 10px !important;
}
.cntOvr {
padding: 0 !important;
}
/* Img */
.img-fluid {
width: 100%;
height: auto;
}
/* Monograph 2-col → 1-col */
.monograph-grid {
grid-template-columns: 1fr;
}
/* Pill grid 2-col → 1-col */
.d-flex.flex-wrap.gap-2 {
grid-template-columns: 1fr;
}
/* Success / CTA band */
.success-band {
padding: 28px 16px;
border-radius: 12px;
}
.success-band h3 {
font-size: 18px;
}
/* Mobile boxes */
.hrview-mobile-box,
.edukares-mobile-box {
padding: 24px 16px;
}
.hrview-mobile-icon,
.edukares-mobile-icon {
font-size: 56px;
}
/* Stacked row inside fade-right */
.animate.fade-right .row.g-3 > .col-6 {
flex: 0 0 100% !important;
max-width: 100% !important;
}
/* Approach / how cards */
.how-card {
padding: 20px 14px;
}
.feature-card {
padding: 16px 12px;
}
.why-card {
padding: 20px 14px;
}
.config-card {
padding: 20px 14px;
}
/* Store badges — stack vertically */
.store-badge-btn {
display: block;
width: fit-content;
margin: 0 auto 10px;
}
}
/* ── RESPONSIVE : SMALL MOBILE (≤ 576px) ── */
@media (max-width: 576px) {
.d-flex.flex-wrap.gap-2 {
grid-template-columns: 1fr;
}
.hero-pill {
font-size: 11px;
padding: 6px 12px;
}
.section-label {
width: auto;
font-size: 11px;
padding: 4px 10px;
}
.multiloc-card {
flex-direction: column;
align-items: flex-start;
}
.payroll-highlight h3 {
font-size: 18px;
}
}
.industry-card .industry-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.9;
color: #fff;
}
.multiloc-card .multiloc-text {
font-size: 14px;
font-weight: 600;
color: var(--brand-teal);
}
.multiloc-card .multiloc-icon {
font-size: 26px;
color: var(--brand-orange);
flex-shrink: 0;
}
.multiloc-card {
background: #fff;
border-radius: var(--radius);
padding: 22px 26px;
box-shadow: var(--shadow-sm);
border-left: 4px solid var(--brand-orange);
display: flex;
align-items: center;
gap: 14px;
transition: 0.3s ease;
}
.section-label {
margin-bottom: 10px;
}
.section-light .align-items-center .animate.show {
margin-bottom: 2rem !important;
}
/*.Dashboards .bi {
font-size: 30px;
color: var(--brand-teal);
}*/
/* OVERVIEW STAT CARDS (compact grid) */
.ovr-stat-card {
background: #fff;
border-radius: 14px;
padding: 18px 14px;
box-shadow: var(--shadow-sm);
text-align: center;
border-top: 4px solid var(--brand-teal);
transition: 0.3s;
height: 100%;
}
.ovr-stat-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.ovr-stat-number {
font-size: 30px;
font-weight: 700;
color: var(--brand-teal);
line-height: 1.1;
}
.ovr-stat-title {
color: var(--brand-teal) !important;
font-weight: 600;
font-size: 13px;
text-align: center;
margin-top: 4px;
}
.ovr-stat-desc {
font-size: 11.5px;
color: #888 !important;
text-align: center;
margin-top: 2px;
}
.ovr-stat-card.orange {
border-top-color: var(--brand-orange);
}
.ovr-stat-card.orange .ovr-stat-number {
color: var(--brand-orange);
}
.ovr-stat-card.dark {
border-top-color: #083F4A;
}
.ovr-stat-card.dark .ovr-stat-number {
color: #083F4A;
}
/* CLINICIAN COMPACT CARDS */
.clin-card {
background: #fff;
border-radius: 14px;
padding: 18px 16px;
box-shadow: var(--shadow-sm);
height: 100%;
border-left: 4px solid var(--brand-teal);
transition: 0.3s;
display: flex;
align-items: flex-start;
gap: 12px;
}
.clin-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.clin-card .clin-icon {
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 50%;
background-image: linear-gradient(135deg, #0B5C6D, #09859F);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
}
.clin-card p {
font-size: 13.5px;
color: rgb(70,69,69) !important;
text-align: left;
margin: 0;
}
.clin-card.orange {
border-left-color: var(--brand-orange);
}
.clin-card.orange .clin-icon {
background-image: linear-gradient(135deg, #ff8c00, #ffb347);
}
/* OVERVIEW SPLIT PANEL (new design) */
.ovr-split {
border-radius: 22px;
overflow: hidden;
box-shadow: var(--shadow-lg);
display: flex;
flex-wrap: wrap;
}
.ovr-split-left {
background: linear-gradient(150deg, #083F4A, #0B5C6D 55%, #09859F);
color: #fff;
padding: 46px 42px;
flex: 1 1 480px;
position: relative;
}
.ovr-split-left::after {
content: '';
position: absolute;
right: -60px;
top: -60px;
width: 220px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,140,0,0.16), transparent 70%);
}
.ovr-split-left .section-label {
background: rgba(255,255,255,0.12);
color: var(--brand-orange);
}
.ovr-split-left h2 {
color: #fff;
}
.ovr-split-left h2 mark.brand-mark {
background: rgba(255,140,0,0.18);
color: #ffb347;
}
.ovr-split-left h2::before {
display: none;
}
/* .ovr-split-left h2::after {
background: linear-gradient(90deg, var(--brand-orange), #ffffff60);
}*/
.ovr-split-left p {
color: rgba(255,255,255,0.82) !important;
text-align: left;
}
.ovr-split-left .solution-pill {
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.25);
color: #fff;
}
.ovr-split-right {
background: #EAF8F9;
padding: 42px 36px;
flex: 1 1 380px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-content: center;
}
.ovr-tile {
background: #fff;
border-radius: 16px;
padding: 22px 18px;
box-shadow: var(--shadow-sm);
transition: 0.3s;
text-align: left;
}
/* .ovr-tile:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}*/
.ovr-tile .ovr-tile-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 19px;
color: #fff;
margin-bottom: 12px;
background: linear-gradient(135deg, var(--brand-teal), #09859F);
}
.ovr-tile.orange .ovr-tile-icon {
background: linear-gradient(135deg, #083F4A, var(--brand-teal));
}
.ovr-tile.dark .ovr-tile-icon {
background: linear-gradient(135deg, #083F4A, var(--brand-teal));
}
.ovr-tile-num {
font-size: 22px;
font-weight: 700;
color: var(--brand-teal);
}
.ovr-tile-label {
font-size: 12.5px;
font-weight: 600;
color: #555;
margin-top: 2px;
}
@media (max-width: 767px) {
.ovr-split-right {
grid-template-columns: 1fr 1fr;
}
.ovr-split-left, .ovr-split-right {
padding: 32px 24px;
}
}
/* TOUCHPOINT LIST ITEM TEXT (no span/strong) */
.ess-item .ess-title {
font-size: 14px;
font-weight: 700;
color: var(--brand-teal);
}
.ess-item .ess-desc {
font-size: 13px;
color: #666 !important;
margin: 0;
}
.ess-icon-orange {
color: var(--brand-orange);
}
.Dashboards .animate.show p {
padding-bottom: 2rem
}
/*.HR-section .animate.show p {
padding-bottom: 2rem
}*/
.industry-card .industry-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.9;
color: #fff;
}
.payroll-main-icon {
font-size: 38px !important;
color: var(--brand-orange);
}
.store-badge-icon img {
width: 150px;
}
/* CLOUD BENTO GRID */
.cloud-grid {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 22px;
align-items: stretch;
}
.cloud-main {
background: linear-gradient(150deg, #083F4A, #0B5C6D 55%, #09859F);
border-radius: 24px;
padding: 44px;
color: #fff;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
.cloud-main::after {
content: '';
position: absolute;
right: -70px;
bottom: -70px;
width: 240px;
height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,140,0,0.16), transparent 70%);
}
.cloud-main-icon {
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(255,255,255,0.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
color: var(--brand-orange);
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.cloud-main h3 {
color: #fff;
font-size: 24px;
text-align: left;
border-left: none;
padding-left: 0;
position: relative;
z-index: 1;
}
.cloud-main p {
color: rgba(255,255,255,0.85) !important;
text-align: left;
position: relative;
z-index: 1;
}
.cloud-main .btn {
align-self: flex-start;
position: relative;
z-index: 1;
}
.cloud-side {
display: flex;
flex-direction: column;
gap: 18px;
}
.cloud-side-item {
background: #fff;
border-radius: 18px;
padding: 24px;
box-shadow: var(--shadow-sm);
display: flex;
gap: 16px;
align-items: flex-start;
flex: 1;
border-left: 4px solid var(--brand-teal);
transition: 0.3s;
}
/* .cloud-side-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 26px rgba(11, 92, 109, 0.16);
}*/
.cloud-side-item .cloud-side-icon {
width: 46px;
height: 46px;
min-width: 46px;
border-radius: 12px;
background: linear-gradient(135deg, var(--brand-teal), #09859F);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 20px;
}
.cloud-side-item.orange {
border-left-color: var(--brand-orange);
}
.cloud-side-item.orange .cloud-side-icon {
background: linear-gradient(135deg, var(--brand-orange), #ffb347);
}
.cloud-side-item.dark {
border-left-color: #083F4A;
}
.cloud-side-item.dark .cloud-side-icon {
background: linear-gradient(135deg, #083F4A, var(--brand-teal));
}
.cloud-side-item h6 {
margin-bottom: 4px;
}
.cloud-side-item p {
font-size: 13px;
margin: 0;
}
@media (max-width: 991px) {
.cloud-grid {
grid-template-columns: 1fr;
}
.cloud-main {
padding: 34px 26px;
}
}
.edukares-mobile-box h4 {
color: var(--brand-orange);
font-size: 25px;
}
.edukares-mobile-box p {
color: #fff !important;
}
store-badge-name .store-badge-btn {
color: #fff !important;
}
#features{
padding-bottom:50px;
}
.store-badge-text .store-badge-sub a{
font-size: 9px;
font-weight: 600;
letter-spacing: 1px;
color: rgba(255, 255, 255, 0.75);
text-transform: uppercase;
line-height: 1;
margin-bottom: 3px;
}
.store-badge-btn{
color:#fff;
}
.overview-title {
grid-column: 1 / -1;
color: var(--brand-teal);
font-size: 2rem;
font-weight: 700;
margin-bottom: 6px;
text-align: left;
}
.monograph-grid-col {
display: flex;
flex-direction: column;
gap: 6px;
}
.monograph-grid-col .monograph-item {
width: 100%;
}
.hrview-mobile-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
.store-badge-icon {
background: #fff;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* .store-badge-icon img {
height: 32px;
width: auto;
display: block;
}*/
.overview-title {
grid-column: 1 / -1;
color: var(--brand-teal);
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
text-align: left;
}