:root{
--nav-bg:#0b2a4a;
--btn:#1b75bc;
--btn-hover:#155d95;
--text:#0f172a;
--shadow: 0 10px 25px rgba(0,0,0,.12);
}
html, body { height:100%; }
body{
margin:0;
font-family:'Poppins', sans-serif;
color:var(--text);
background: linear-gradient(180deg,#f8fbff 0%,#eef6ff 100%);
}
/* ===== FIXED HEADER + NAV ===== */
#siteHeader{
position:fixed;
top:0; left:0; right:0;
z-index:9999;
background:var(--nav-bg);
box-shadow: var(--shadow);
}
/* ===== QR Code Grid (modal) ===== */
.qr-grid {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 18px;
padding: 20px;
}
.qr-cell {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
padding: 10px 5px;
border: 1px solid rgba(255,152,0,.25);
border-radius: 16px;
background: linear-gradient(145deg,#fff8ed,#ffffff);
transition: .25s ease;
}
.qr-cell:hover {
transform: translateY(-4px);
border-color: #ff9800;
box-shadow: 0 14px 34px rgba(255,152,0,.25);
}
.qr-lang {
font-size: 20px;
font-weight: 700;
color: #a84300;
margin-bottom: 12px;
text-align: center;
}
.qr-cell img {
width: 100%;
max-width: 200px;
height: auto;
display: block;
}
@media(max-width:768px) {
.qr-grid {
grid-template-columns: repeat(2,1fr);
gap: 12px;
padding: 12px;
}
.qr-lang {
font-size: 17px;
}
}
@media(max-width:420px) {
.qr-grid {
grid-template-columns: 1fr;
}
}
.footer-bottom .small a {
color: inherit;
text-decoration: none;
}
.footer-bottom .small a:hover {
text-decoration: underline;
}
/* ===== Four Ways In - extras (eyebrow, tagline, pills) ===== */
.jh-card .jh-eyebrow {
margin-bottom: 2px;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--bkr-saffron, #e87722);
}
.jh-card .bkr-step-title {
margin-bottom: 8px;
}
.jh-card .jh-tagline {
margin: 0 0 10px;
font-size: 15px;
font-style: italic;
font-weight: 600;
color: var(--bkr-saffron, #e87722);
}
.jh-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.jh-tag {
padding: 5px 14px;
font-size: 15px;
font-weight: 600;
color: var(--bkr-maroon, #9a3412);
background: #fff;
border: 1px solid rgba(232, 119, 34, .35);
border-radius: 999px;
}
.kumbh-points {
list-style: none;
padding: 0;
margin: 30px 0;
}
/* ===== BHARAT "What Your Family Gets" list ===== */
.opex-feature-list.bkr-gets {
background: none;
border: none;
box-shadow: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.opex-feature-list.bkr-gets li {
position: relative;
padding: 16px 18px 16px 52px;
margin: 0;
background: linear-gradient(180deg, #fffdf9 0%, #fff7ed 100%);
border: 1px solid rgba(232, 119, 34, .18);
border-radius: 14px;
color: #4a3728;
font-size: 15.5px;
line-height: 1.6;
box-shadow: 0 10px 26px rgba(232, 119, 34, .08);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* saffron check badge */
.opex-feature-list.bkr-gets li::before {
content: "\f00c"; /* Font Awesome check */
font-family: "FontAwesome";
position: absolute;
left: 16px;
top: 16px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #fff;
background: linear-gradient(135deg, #e87722, #f4a83a);
border-radius: 50%;
box-shadow: 0 4px 10px rgba(232, 119, 34, .35);
}
.opex-feature-list.bkr-gets li:hover {
transform: translateY(-4px);
border-color: rgba(232, 119, 34, .4);
box-shadow: 0 18px 38px rgba(232, 119, 34, .16);
}
.opex-feature-list.bkr-gets li strong {
color: var(--bkr-maroon, #9a3412);
font-weight: 700;
}
/* Responsive: single column on mobile */
@media (max-width: 767px) {
.opex-feature-list.bkr-gets {
grid-template-columns: 1fr;
}
.jh-tag {
padding: 5px 14px;
font-size: 13.5px;
}
}
.kumbh-points li {
position: relative;
padding: 15px 20px 15px 55px;
margin-bottom: 15px;
background: #fffaf3;
border-left: 4px solid #ff9800;
border-radius: 12px;
color: #444;
font-size: 17px;
line-height: 1.6;
box-shadow: 0 6px 18px rgba(0,0,0,.06);
transition: .3s ease;
}
/* Icon */
.kumbh-points li::before {
content: "\2713";
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: #ff9800;
color: white;
border-radius: 50%;
font-weight: bold;
}
/* Hover */
.kumbh-points li:hover {
transform: translateX(8px);
background: #fff3df;
border-left-color: #e65100;
}
/* circular icon → orange gradient like the design */
.jh-card .bkr-step-icon {
background: linear-gradient(135deg, #e87722, #f4a83a) !important;
color: #fff;
font-size: 22px;
}
/* ===== Family Heritage Plan pricing ===== */
.fhp-card {
height: 100%;
background: linear-gradient(180deg, #fffdf9 0%, #fff7ed 100%);
border: 1px solid var(--bkr-border, rgba(232,119,34,.2));
border-left: 5px solid var(--bkr-saffron, #e87722);
padding: 20px;
}
.fhp-plan-title {
margin-bottom: 16px;
font-size: 20px;
font-weight: 700;
color: var(--bkr-maroon, #9a3412);
}
.fhp-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
gap: 8px;
padding: 12px 0;
border-bottom: 1px dashed rgba(232, 119, 34, .25);
}
.fhp-label {
flex: 1 1 60%;
font-size: 15px;
color: #33415c;
line-height: 1.5;
}
.fhp-label em {
display: block;
font-size: 13px;
color: #8a6d52;
font-style: italic;
}
.fhp-price {
flex: 0 0 auto;
font-size: 18px;
font-weight: 700;
color: var(--bkr-saffron, #e87722);
white-space: nowrap;
}
.fhp-price small {
display: block;
font-size: 13px;
font-weight: 500;
color: #6b7280;
}
.fhp-actions {
margin-top: 18px;
text-align: center;
}
@media (max-width: 575px) {
.fhp-row {
flex-direction: column;
}
.fhp-price {
font-size: 16px;
}
}
/* push page content below fixed bars */
#pageContent {
padding-top: 132px; /* 72 header + ~60 nav */
min-height: calc(100vh - 132px);
}
/* header alignment */
#siteHeader .header-row {
min-height: 92px;
align-items: center;
}
.logo-item a {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.logo-item img {
height: 55px !important;
width: auto !important;
object-fit: contain;
}
/* button */
.btn-opex {
background: var(--btn) !important;
color: #fff !important;
border: none !important;
padding: 10px 18px !important;
border-radius: 6px !important;
font-weight: 600 !important;
box-shadow: 0 8px 18px rgba(27,117,188,.25);
}
.btn-opex:hover {
background: var(--btn-hover) !important;
color: #fff !important;
}
.navbar-toggler {
border: 1px solid rgba(255,255,255,.25) !important;
}
.dropdown-menu {
border: none !important;
border-radius: 12px !important;
box-shadow: var(--shadow);
padding: 10px !important;
min-width: 260px !important;
}
/* open to LEFT when needed */
.dropdown-menu.dropdown-menu-left {
right: 0 !important;
left: auto !important;
}
.dropdown-item {
border-radius: 10px !important;
padding: 10px 12px !important;
font-weight: 500;
}
.dropdown-item:hover {
background: #eef6ff !important;
color: #0b2a4a !important;
}
/* CTA */
.footer-cta {
background: linear-gradient(90deg, #0ea5b7, #0b2a4a);
color: #fff;
padding: 44px 0;
margin-top: 32px;
}
.footer-cta h3 {
font-weight: 700;
font-size: 23px;
letter-spacing: .2px;
}
.footer-cta p {
opacity: .9;
font-size: 14px;
margin-top: 6px;
}
.btn-cta {
padding: 10px 18px !important;
border-radius: 10px !important;
}
/* Footer bg */
.footer-main {
background: #071d33;
color: rgba(255,255,255,.9);
padding: 38px 0 0;
}
/* cards equal height */
.footer-card {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
padding: 22px;
height: 100%;
min-height: 420px;
display: flex;
flex-direction: column;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.footer-card:hover {
transform: translateY(-3px);
border-color: rgba(255,255,255,.18);
box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
/* headings */
.footer-title {
color: #fff;
font-weight: 700;
font-size: 18px;
margin-bottom: 14px;
}
/* brand */
.footer-brand {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
/* Logo container */
.footer-brand img {
width: 75px;
height: 58px;
object-fit: contain;
background: #ffffff;
padding: 0px;
border-radius: 0px;
box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
/* Brand name */
.footer-brand-name {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 800;
color: #ffffff;
line-height: 1.5;
display: block;
letter-spacing: 0.5px;
}
.brand-tagline {
font-family: 'Poppins', sans-serif;
font-size: 16px;
font-weight: 400;
color: #cce2ff;
display: block;
line-height: 1.5;
margin-top: 2px;
}
/* Optional subtle tagline if you add later */
.footer-brand-tagline {
font-size: 15px;
font-weight: 400;
letter-spacing: 0.5px;
color: rgba(255,255,255,.7);
margin-top: 3px;
}
/* Hover polish */
.footer-brand:hover img {
transform: translateY(-2px);
box-shadow: 0 2px 10px rgba(0,0,0,.35);
transition: all .25s ease;
}
.footer-desc {
color: rgba(255,255,255,.78);
font-size: 14px;
line-height: 1.75;
margin: 12px 0 0;
}
/* social */
.footer-social {
display: flex;
gap: 10px;
margin-top: 16px;
}
.footer-social a {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
color: #fff !important;
text-decoration: none;
}
.footer-social a i {
font-size: 18px;
}
.footer-social a:hover {
background: rgba(27,117,188,.25);
border-color: rgba(27,117,188,.45);
}
/* contact list */
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-list li {
display: flex;
gap: 10px;
margin-bottom: 12px;
color: rgba(255,255,255,.82);
}
.footer-list i {
font-size: 20px;
margin-top: 2px;
color: #7dd3fc;
}
.footer-list a {
color: #fff !important;
text-decoration: none;
}
.footer-list a:hover {
color: #7dd3fc !important;
text-decoration: none;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links a {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.86) !important;
text-decoration: none;
font-size: 14px;
line-height: 1.5;
transition: all 0.25s ease;
}
.footer-links a i {
font-size: 14px;
color: #7dd3fc;
min-width: 18px;
}
.footer-links a:hover {
color: #7dd3fc !important;
transform: translateX(4px);
}
.footer-links a:hover i {
color: #38bdf8;
}
/* =========================================================
FOOTER ARROW ICON (Chevron)
========================================================= */
/* =========================================================
FOOTER SMALL WHITE BULLET
========================================================= */
.footer-icon {
width: 8px; /* ⬅ adjusted width */
height: 4px;
display: inline-block;
/*margin-right: 6px;*/
vertical-align: middle;
background: rgba(255, 255, 255, .86);
border-radius: 4px;
box-shadow: 0 0 6px rgba(27,117,188,.6);
}
/* hover */
.footer-links a:hover .footer-icon {
color: #7dd3fc !important;
transform: translateX(4px)
}
/* map */
.footer-map {
margin-top: auto; /* pushes map to bottom of card */
overflow: hidden;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.12);
}
.footer-map iframe {
display: block;
width: 100%;
height: 190px;
border: 0;
}
/* bottom bar */
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.10);
margin-top: 22px;
padding: 14px 0;
background: #06182a;
}
.footer-bottom .small {
color: rgba(255,255,255,.75);
}
.footer-bottom-links a {
color: rgba(255,255,255,.85) !important;
text-decoration: none;
}
.footer-bottom-links a:hover {
color: #fff !important;
}
.footer-bottom-links .sep {
margin: 0 10px;
opacity: .5;
}
/* Mobile */
@media(max-width:768px) {
.footer-cta {
text-align: center;
}
.footer-cta .text-md-right {
text-align: center !important;
}
.footer-cta .btn {
margin-top: 10px;
}
.footer-card {
min-height: auto;
}
}
.brand-name {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 0.4px;
color: #ffffff;
line-height: 1.5;
}
/* Optional hover polish */
.brand-name:hover {
color: #7dd3fc;
transition: color .25s ease;
}
/* ===============================
MOBILE ADJUSTMENT
================================ */
@media (max-width: 768px) {
.brand-name {
font-size: 16px;
text-align: left !important;
}
.brand-tagline {
font-size: 13px;
text-align: left !important;
}
}
/* ===== Responsive (Mobile) ===== */
@media (max-width: 767.98px) {
/* header becomes 2 lines like screenshot */
#siteHeader {
padding: 10px 0;
}
#siteHeader .header-row {
min-height: auto !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
row-gap: 0px;
}
#siteHeader .header-row > .col-md-6 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;
}
.logo-item a {
justify-content: center !important;
}
.logo-item img {
height: 38px !important;
}
.brand-name {
text-align: left !important;
font-size: 18px !important;
}
.btn-opex {
font-size: 13px !important;
border-radius: 8px !important;
}
/* nav moves below expanded header */
#siteNav {
top: 132px !important; /* because header now taller */
}
/* hamburger button look like screenshot */
#siteNav .navbar-toggler {
text-align: left !important;
border: 1px solid rgba(11,42,74,.25) !important;
border-radius: 3px !important;
background: #bfe3ff !important;
}
/* icon dark */
#siteNav .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(11,42,74,0.95)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}
/* collapse menu panel (white, clean, not grey) */
#siteNav .navbar-collapse {
margin-top: 10px;
border: 1px solid rgba(11,42,74,.10);
border-radius: 14px;
padding: 10px;
box-shadow: var(--shadow);
}
#siteNav {
position: fixed;
left: 0;
right: 0;
top: 72px; /* header height */
z-index: 9998;
background: var(--nav-bg);
border-top: 1px solid rgba(255,255,255,.08);
}
/* navbar look */
#siteNav .navbar {
padding: 10px 0 !important;
}
#siteNav .navbar-nav .nav-link {
color: rgba(255,255,255,.90) !important;
font-weight: 500 !important;
padding: 10px 14px !important;
border-radius: 8px;
}
#siteNav .navbar-nav .nav-link:hover {
color: #fff !important;
background: rgba(255,255,255,.08);
}
@media (max-width: 767.98px) {
.dropdown-menu .dropdown-item {
padding: 12px 12px !important; /* bigger tap area */
font-size: 14px !important;
font-size: 14px !important;
line-height: 1.35 !important;
white-space: normal !important; /* wrap text */
}
.text-right {
text-align: right !important;
}
}
/* Extra small phones */
@media (max-width: 400px) {
.dropdown-menu .dropdown-item {
font-size: 13px !important;
padding: 11px 10px !important;
}
}
#siteNav .navbar-nav {
width: 100%;
}
#siteNav .nav-item {
width: 100%;
}
#siteNav .navbar-nav .nav-link {
width: 100%;
padding: 12px 14px !important;
border-radius: 12px;
}
/* dropdown inside collapse */
#siteNav .dropdown-menu {
position: static !important;
float: none !important;
width: 100% !important;
margin-top: 6px !important;
box-shadow: none !important;
border: 1px solid rgba(11,42,74,.08) !important;
}
/* push content correctly on mobile */
#pageContent {
padding-top: 210px !important; /* header expanded + nav */
}
}
/* ===== ULTRA PREMIUM CORPORATE BACKGROUND ===== */
body {
background: radial-gradient(1100px 520px at 50% -160px, rgba(27,117,188,.14), rgba(255,255,255,0) 65%), radial-gradient(900px 420px at 90% 10%, rgba(14,165,233,.08), rgba(255,255,255,0) 60%), linear-gradient(180deg, #f8fbff 0%, #ffffff 45%, #ffffff 100%);
background-attachment: fixed;
color: var(--opex-text);
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
/* -----------------------------
HERO BANNER
----------------------------- */
/* =========================================================
HERO / BANNER (Corporate)
Use with:
...
(optional)
========================================================= */
/* ==========================================
LEARIDGE EDUCATION HERO BANNER
========================================== */
/* ============================================================
BANNER - clean premium card, full image visible
============================================================ */
.banner {
margin: 14px auto 6px;
border-radius: 28px;
overflow: hidden;
position: relative;
background: #fff;
box-shadow: 0 20px 60px rgba(11, 42, 74, .16);
isolation: isolate;
}
/* subtle life on hover */
.banner:hover .slider img {
transform: scale(1.02);
}
/* thin brand border instead of the old glow */
.banner::before {
content: "";
position: absolute;
inset: 0;
border-radius: 28px;
border: 1px solid rgba(27, 117, 188, .22);
z-index: 3;
pointer-events: none;
}
/* ---- Text-over-image support (only if .banner-content is used) ---- */
.banner .banner-content {
position: absolute;
left: 60px;
top: 50%;
transform: translateY(-50%);
max-width: 650px;
color: #0b2a4a;
z-index: 4;
padding: 22px 26px;
border-radius: 18px;
background: rgba(255, 255, 255, .82); /* readable panel, not a full wash */
backdrop-filter: blur(4px);
}
.banner .banner-title {
font-size: 44px;
line-height: 1.15;
font-weight: 800;
color: #0b2a4a;
margin-bottom: 12px;
}
.banner .banner-subtitle {
font-size: 18px;
line-height: 1.6;
color: #33415c;
max-width: 560px;
}
.banner .banner-actions {
display: flex;
gap: 15px;
margin-top: 22px;
}
.banner .banner-actions a {
padding: 13px 30px;
border-radius: 30px;
background: linear-gradient(135deg, #0b2a4a, #1b75bc);
color: #fff;
font-weight: 600;
text-decoration: none;
box-shadow: 0 10px 25px rgba(27, 117, 188, .30);
transition: transform .2s ease;
}
.banner .banner-actions a:hover {
transform: translateY(-3px);
}
/* ============================================================
FINAL BANNER OVERRIDE - must stay at the END of this file.
Neutralizes all older duplicate .banner rules above.
============================================================ */
/* kill all old overlays/washes at every breakpoint */
.banner .slider::after,
.banner::after {
display: none !important;
content: none !important;
}
/* the slider div must never have a forced height - it wraps the img */
.banner .slider {
height: auto !important;
min-height: 0 !important;
}
/* desktop: your approved look */
.banner .slider img {
display: block;
width: 100% !important;
height: 480px !important;
object-fit: cover !important;
object-position: center !important;
}
/* laptop */
@media (max-width: 1199px) {
.banner .slider img {
height: 400px !important;
}
}
/* tablet */
@media (max-width: 991px) {
.banner .slider img {
height: 400px !important;
}
}
/* phone: full designed image, no cropping, no distortion */
@media (max-width: 767px) {
.banner .slider img {
height: auto !important;
object-fit: contain !important;
}
}
body .container {
max-width: 1200px;
width: 100%;
}
/* -----------------------------
HEADLINE BELOW BANNER
----------------------------- */
.fancy-title {
position: relative;
max-width: 1200px;
margin: 14px auto 22px;
padding-bottom: 16px;
font-size: 36px;
line-height: 1.3;
font-weight: 800;
text-align: center;
letter-spacing: -0.6px;
color: #0b2a4a; /* fallback if clip unsupported */
background: linear-gradient(90deg, #0b2a4a 0%, #1b75bc 55%, #1d4ed8 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.fancy-title span {
color: #123B73;
-webkit-text-fill-color: #123B73; /* span keeps solid color inside gradient text */
}
/* Responsive */
@media (max-width: 991px) {
.fancy-title {
font-size: 30px;
padding-bottom: 14px;
}
}
@media (max-width: 767px) {
.fancy-title {
font-size: 25px;
letter-spacing: -0.3px;
padding: 0 14px 12px;
}
.fancy-title::after {
width: 64px;
height: 3px;
}
}
@media (max-width: 420px) {
.fancy-title {
font-size: 21px;
}
}
/* -----------------------------
TWO SOLUTION CARDS (ENTERPRISE)
----------------------------- */
.solutions-preview {
position: relative;
padding: 16px 12px;
margin-top: 2px;
border-radius: 24px;
background: linear-gradient(180deg,#ffffff,#f7faff);
box-shadow: 0 22px 50px rgba(2,6,23,.10);
}
.solution-card {
background: #ffffff;
border-radius: 18px;
padding: 18px;
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 16px 36px rgba(2,6,23,.10);
height: 100%;
transition: transform .25s ease, box-shadow .25s ease;
}
.solution-card:hover {
transform: translateY(-6px);
box-shadow: 0 30px 70px rgba(2,6,23,.18);
}
.solution-title {
font-size: 17px;
font-weight: 800;
color: #0b2a4a;
line-height: 1.35;
margin-bottom: 14px;
}
.solution-image {
border-radius: 14px;
overflow: hidden;
}
.solution-image img {
width: 100%;
height: 210px;
object-fit: cover;
transition: transform .35s ease;
}
.solution-card:hover img {
transform: scale(1.05);
}
/* -----------------------------
RESPONSIVE – MOBILE FIRST
----------------------------- */
@media (max-width: 991.98px) {
.banner .slider {
height: 360px;
}
.fancy-title {
font-size: 30px;
}
}
@media (max-width: 767.98px) {
.banner {
border-radius: 16px;
margin: 0 auto 0px;
}
.banner .slider {
height: 28vh;
}
.fancy-title {
font-size: 24px;
padding: 0 12px;
}
.solutions-preview {
padding: 8px 7px;
}
.solution-image img {
height: 180px;
}
}
@media (max-width: 420px) {
.banner .slider {
height: 28vh;
}
.fancy-title {
font-size: 21px;
}
}
/* ================================
CUSTOMER LOGOS – 2 ROW SCROLL
================================ */
.customer-logos.logo-marquee {
position: relative;
overflow: hidden;
}
/* Fade edges (premium look) */
.customer-logos.logo-marquee::before,
.customer-logos.logo-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 90px;
z-index: 2;
pointer-events: none;
}
.customer-logos.logo-marquee::before {
left: 0;
background: linear-gradient(90deg,#ffffff,transparent);
}
.customer-logos.logo-marquee::after {
right: 0;
background: linear-gradient(270deg,#ffffff,transparent);
}
/* Each scrolling row */
.logo-row {
display: flex;
align-items: center;
white-space: nowrap;
will-change: transform;
}
/* Row 1 – Left to Right */
.rows-3 .logo-row:nth-child(1) {
animation: scrollLeft 45s linear infinite;
padding-bottom: 20px;
}
/* Row 2 – Right to Left */
.rows-3 .logo-row:nth-child(2) {
animation: scrollRight 50s linear infinite;
padding-bottom: 20px;
}
/* Row 3 – Left to Right (slower for depth) */
.rows-3 .logo-row:nth-child(3) {
animation: scrollLeft 55s linear infinite;
padding-bottom: 20px;
}
.logo-row .slide {
display: flex;
gap: 26px;
margin-right: 26px;
}
/* Logo card */
.logo-row a {
width: 160px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 10px 22px rgba(2,6,23,.06);
flex: 0 0 auto;
padding: 12px;
pointer-events: none; /* 🔒 disables click */
cursor: default;
}
/* Logo image */
.logo-row img {
max-width: 100%;
max-height: 100%;
display: block;
margin: auto;
opacity: 1;
transition: all .25s ease;
}
/* Hover polish */
.logo-row a:hover img {
filter: none;
opacity: 1;
}
/* Hover effect */
.logo-row a:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(2,6,23,.14);
}
/* Pause animation on hover */
.customer-logos:hover .logo-row {
animation-play-state: paused;
}
/* Animations */
@keyframes scrollLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes scrollRight {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
/* Mobile */
@media (max-width: 768px) {
.logo-row a {
width: 140px;
height: 72px;
}
}
/* ================================
GLOBAL SECTION HEADER STYLES
(Reusable across entire website)
================================ */
.section-header {
text-align: center; /* CENTER ALL TEXT */
}
.section-divider {
width: 90px;
height: 4px;
background: #ff9800;
border-radius: 999px;
margin: 60px auto 40px; /* CENTER DIVIDER */
}
/* Title */
.section-title {
margin-bottom: 25px;
font-size: 30px;
font-weight: 700;
line-height: 1.5;
color: #0b2a4a;
letter-spacing: -0.3px;
}
.section-title1 {
font-size: 30px;
font-weight: 700;
line-height: 1.5;
color: #0b2a4a;
letter-spacing: -0.3px;
}
/* Highlight span */
.section-title span {
font-weight: 600;
color: #111827;
}
.section-title1 span {
font-weight: 600;
color: #111827;
}
/* Subtitle */
.section-subtitle {
max-width: 1200px;
margin: 0 auto;
font-size: 20px;
line-height: 1.75;
color: #475569;
font-weight: 500;
padding: 0px 8px 20px; /* top:5px | left-right:8px | bottom:10px */
text-align: left
}
/* Responsive */
@media (max-width: 992px) {
.section-title {
font-size: 26px;
}
.section-title1 {
font-size: 26px;
}
.section-subtitle {
font-size: 15px;
}
}
@media (max-width: 576px) {
.section-title {
font-size: 22px;
margin-bottom: 30px;
}
.section-divider {
width: 90px;
margin: 60px auto 30px; /* CENTER DIVIDER */
}
}
/* =========================
GLOBAL TOKENS (ALL PAGES)
========================= */
:root {
--opex-navy: #0b2a4a;
--opex-navy2: #0a223a;
--opex-blue: #1b75bc;
--opex-sky: #35b8ff;
--opex-text: #0f172a;
--opex-muted: #5b6b7b;
--opex-border: rgba(15,23,42,.10);
--opex-radius: 18px;
--opex-shadow: 0 18px 40px rgba(2,6,23,.10);
--opex-shadow2: 0 10px 22px rgba(2,6,23,.08);
}
/* ===== ULTRA PREMIUM CORPORATE BACKGROUND ===== */
body {
background: radial-gradient(1100px 520px at 50% -160px, rgba(27,117,188,.14), rgba(255,255,255,0) 65%), radial-gradient(900px 420px at 90% 10%, rgba(14,165,233,.08), rgba(255,255,255,0) 60%), linear-gradient(180deg, #f8fbff 0%, #ffffff 45%, #ffffff 100%);
background-attachment: fixed;
color: var(--opex-text);
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
.impact-text {
color: #c3443a; /* Saffron */
font-size: 16px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0.5px;
text-shadow: 0 2px 8px rgba(245, 124, 0, 0.25);
}
/* Section spacing */
.opex-section {
padding: 6px 0;
}
/* Generic card */
.opex-card {
background: #fff;
border: 1px solid var(--opex-border);
border-radius: var(--opex-radius);
box-shadow: var(--opex-shadow2);
padding: 22px;
}
/* Titles */
.opex-h3 {
font-size: 22px;
font-weight: 800;
margin: 0 0 6px;
letter-spacing: -0.2px;
}
.opex-subtitle {
margin: 0 0 12px;
color: var(--opex-muted);
font-weight: 600;
font-size: 15px;
max-width: 820px;
margin: 0 auto;
font-size: 18px;
line-height: 1.75;
color: #475569;
font-weight: 500;
}
.opex-text {
color: #334155;
line-height: 1.7;
font-size: 14px;
}
/* Media image */
.opex-media {
width: 100%;
height: 220px;
object-fit: cover;
border-radius: 14px;
border: 1px solid rgba(15,23,42,.06);
}
/* =========================
LEFT TABS (BUTTON LIST)
========================= */
.opex-panel {
background: linear-gradient(180deg, #ffffff, #f8fbff);
border: 1px solid var(--opex-border);
border-radius: var(--opex-radius);
box-shadow: var(--opex-shadow2);
padding: 15px;
}
.opex-tab-btn {
width: 100%;
text-align: left;
border: 1px solid rgba(15,23,42,.08);
background: #fff;
border-radius: 14px;
padding: 14px 14px;
margin: 10px 0;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
box-shadow: 0 8px 18px rgba(2,6,23,.06);
position: relative;
}
.opex-tab-title {
display: block;
font-weight: 800;
font-size: 16px;
color: var(--opex-text);
}
.opex-tab-sub {
display: block;
margin-top: 2px;
font-size: 13px;
color: var(--opex-muted);
font-weight: 600;
}
.opex-tab-btn:hover {
transform: translateY(-1px);
border-color: rgba(27,117,188,.22);
box-shadow: 0 12px 26px rgba(2,6,23,.10);
}
.opex-tab-btn.is-active {
border-color: rgba(27,117,188,.35);
box-shadow: 0 18px 34px rgba(27,117,188,.18);
}
.opex-tab-btn.is-active::before {
content: "";
position: absolute;
left: 0;
top: 12px;
bottom: 12px;
width: 4px;
border-radius: 6px;
background: linear-gradient(180deg, var(--opex-blue), var(--opex-sky));
}
/* =========================
RIGHT CONTENT TOGGLE
========================= */
.opex-tab-content {
display: none;
}
.opex-tab-content.is-active {
display: block;
}
.opex-section {
padding: 2px 0;
}
/* Responsive */
@media (max-width: 767.98px) {
.opex-section {
padding: 0px 0;
}
.opex-media {
height: 200px;
}
}
.opex-media {
height: 260px;
}
/* TOP: title always stays on top */
/* =========================
FIXED HEADER & FOOTER
INSIDE RIGHT CONTENT CARD
========================= */
/* Make the text column a vertical layout */
.opex-feature-text {
display: flex;
flex-direction: column;
height: 260px; /* fixed stable height */
}
/* TOP: title always visible */
.opex-feature-top {
flex: 0 0 auto;
padding-bottom: 6px;
}
/* MIDDLE: scrollable content */
.opex-feature-body {
flex: 1 1 auto;
padding: 0px 0px 0px;
}
/* Smooth scrollbar (optional, professional) */
.opex-feature-body::-webkit-scrollbar {
width: 5px;
}
.opex-feature-body::-webkit-scrollbar-thumb {
background: rgba(27,117,188,.35);
border-radius: 10px;
}
/* BOTTOM: button fixed */
.opex-feature-footer {
flex: 0 0 auto;
padding-top: 2px;
border-top: 1px solid rgba(15,23,42,.08);
}
/* Button polish */
.opex-feature-footer .btn {
padding: 8px 18px;
font-size: 13px;
border-radius: 999px;
}
/* =========================
CARD HEIGHT STABILITY
========================= */
.opex-card {
min-height: 320px;
}
/* =========================
RESPONSIVE FIX
========================= */
@media (max-width: 767.98px) {
.opex-feature-text {
height: auto;
}
}
.text-right {
text-align: right !important;
}
/* button */
/* =========================
OPEX PRIMARY CTA BUTTON
========================= */
/* Small variant */
.btn-opex-sm {
min-width: 120px;
width: 30%;
height: 36px;
font-size: 13px !important;
}
/* =========================
SOLUTION PILLARS (3 CARDS)
========================= */
.opex-pillar-section {
background: #ffffff;
}
.opex-pillar-card {
height: 100%;
background: #fff;
border: 1px solid rgba(15,23,42,.10);
border-radius: 18px;
padding: 26px 22px 20px;
box-shadow: 0 14px 34px rgba(2,6,23,.08);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
display: flex;
flex-direction: column; /* important for bottom button */
}
/* top accent glow */
.opex-pillar-card:hover {
transform: translateY(-3px);
border-color: rgba(27,117,188,.22);
box-shadow: 0 22px 50px rgba(2,6,23,.12);
}
/* Icon */
.opex-pillar-icon {
width: 82px;
height: 82px;
margin: 0 auto 14px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(27,117,188,.08), rgba(255,255,255,.0));
display: flex;
align-items: center;
justify-content: center;
}
.opex-pillar-icon img {
max-width: 125px;
max-height: 125px;
display: block;
}
.opex-pillar-title {
text-align: center;
font-size: 18px;
font-weight: 800;
margin: 20px 0 6px;
color: #0f172a;
}
.opex-pillar-tag {
text-align: center;
font-size: 14px;
font-weight: 700;
color: #1b75bc;
margin-bottom: 14px;
}
/* Content box (replacing your black border box) */
.opex-pillar-box {
background: linear-gradient(180deg, #ffffff, #f8fbff);
border: 1px solid rgba(15,23,42,.10);
border-radius: 14px;
padding: 16px 16px;
color: #334155;
line-height: 1.65;
font-size: 14.5px;
flex: 1 1 auto; /* makes button stick at bottom */
}
.opex-pillar-box p {
margin: 0 0 10px;
}
.opex-pillar-box p:last-child {
margin-bottom: 0;
}
/* Button always at bottom + centered */
.opex-pillar-btn {
margin-top: 16px;
align-self: center;
min-width: 250px;
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 992px) {
.opex-title {
font-size: 26px;
}
.opex-desc {
font-size: 15px;
}
}
@media (max-width: 576px) {
.opex-title {
font-size: 22px;
}
.opex-divider {
width: 80px;
}
.opex-pillar-btn {
min-width: 210px;
}
}
/* Left image frame */
.opex-why-media {
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(15,23,42,.10);
box-shadow: 0 18px 40px rgba(2,6,23,.12);
}
.opex-why-media img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
}
/* Right card */
.opex-why-card {
background: #fff;
border: 1px solid rgba(15,23,42,.10);
border-radius: 18px;
box-shadow: 0 18px 40px rgba(2,6,23,.10);
padding: 5px 5px 5px;
position: relative;
}
/* List styling */
.opex-why-list {
list-style: none;
padding: 0;
margin: 0;
}
.opex-why-list li {
display: flex;
gap: 14px;
padding: 10px 6px 10px 10px;
border-radius: 14px;
transition: background .15s ease, transform .15s ease;
}
.opex-why-list li + li {
border-top: 1px dashed rgba(15,23,42,.12);
}
.opex-why-list li:hover {
background: rgba(27,117,188,.06);
transform: translateY(-1px);
}
/* Dot */
.opex-why-dot {
width: 10px;
height: 10px;
border-radius: 999px;
margin-top: 7px;
flex: 0 0 auto;
background: linear-gradient(180deg, #1b75bc, #35b8ff);
box-shadow: 0 8px 18px rgba(27,117,188,.25);
}
/* Text */
.opex-why-head {
font-weight: 800;
font-size: 16px;
color: #0f172a;
margin-bottom: 4px;
}
.opex-why-text1 {
color: #475569;
font-size: 14.5px;
line-height: 1.65;
}
/* CTA */
.opex-why-cta {
padding-top: 14px;
display: flex;
justify-content: flex-start;
}
/* button look (common) */
.opex-pill-btn {
min-width: 190px;
border-radius: 12px !important;
padding: 10px 16px !important;
font-weight: 700 !important;
}
/* Responsive */
@media (max-width: 992px) {
.opex-why-media img {
height: 320px;
}
}
@media (max-width: 576px) {
.opex-why-media img {
height: 260px;
}
.opex-why-card {
padding: 18px 16px 14px;
}
}
/* Wrapper */
.main-subtitle {
max-width: 1200px;
margin: 0 10px auto;
letter-spacing: -0.4px;
line-height: 1.75;
}
/* =========================================================
MODULAR SEQUENCE SECTIONS (as per your HTML)
Works with:
.opex-section .opex-modular-block .opex-modular-alt
========================================================= */
/* Section wrapper */
.opex-modular-block {
padding: 44px 0; /* nice spacing */
}
/* Alternate background so sections look in sequence */
.opex-modular-alt {
background: radial-gradient(900px 420px at 50% 0%, rgba(27,117,188,.10), rgba(255,255,255,0) 62%), linear-gradient(180deg, #f6faff 0%, #ffffff 55%, #f6faff 100%);
border-top: 1px solid rgba(15,23,42,.06);
border-bottom: 1px solid rgba(15,23,42,.06);
}
/* Tighten header inside this section only */
.opex-modular-block {
padding: 0 0 18px;
margin: 0 auto 10px;
}
.opex-modular-block {
margin-bottom: 24px;
}
.opex-modular-block {
margin: 0 auto 6px;
}
.opex-modular-block .section-subtitle {
margin-top: 8px;
max-width: 900px;
}
/* Row alignment */
.opex-modular-row {
margin-top: 8px;
}
/* Image card look */
.opex-modular-image {
background: #fff;
border-radius: 18px;
padding: 14px;
border: 1px solid rgba(15,23,42,.10);
box-shadow: 0 18px 40px rgba(2,6,23,.10);
display: inline-block;
transition: transform .25s ease, box-shadow .25s ease;
}
.opex-modular-image:hover {
transform: translateY(-4px);
box-shadow: 0 26px 58px rgba(2,6,23,.14);
}
.opex-modular-image img {
width: 100%;
height: auto;
display: block;
border-radius: 14px;
}
/* Text block (like Canva) */
.opex-modular-text {
font-size: 16px;
line-height: 1.8;
color: #334155;
font-weight: 500;
margin: 0;
max-width: 760px;
}
/* Better spacing between image and text on desktop */
@media (min-width: 992px) {
.opex-modular-row .col-lg-7 {
padding-left: 28px;
}
/* second section where image is right */
.opex-modular-row .order-lg-1 {
padding-right: 28px;
padding-left: 0;
}
}
/* Mobile polish */
@media (max-width: 991.98px) {
.opex-modular-block {
padding: 32px 0;
}
.opex-modular-text {
font-size: 15px;
}
.opex-modular-image {
padding: 12px;
}
}
/* WHY CHOOSE - Canva Style Layout */
.opex-why-block {
padding: 5px 0;
background: #ffffff;
}
.opex-why-row {
margin-top: 10px;
margin-bottom: 10px;
}
.opex-why-text1 {
font-size: 16px;
line-height: 1.85;
color: #2b3645;
margin: 0;
}
/* Image card */
/* Highlight paragraph */
.opex-highlight {
background: #1b75bc;
color: #fff;
padding: 4px 8px;
border-radius: 10px;
font-size: 16px;
line-height: 1.75;
font-weight: 600;
margin: 1px auto 1px;
}
/* Bottom blue text */
.opex-why-bottom {
text-align: center;
padding-top: 6px;
}
.opex-why-bottom-line {
color: #1b75bc;
font-size: 18px;
font-weight: 800;
margin-bottom: 4px;
}
.opex-why-bottom-sub {
color: #1b75bc;
font-size: 16px;
font-weight: 700;
}
/* Mobile adjustments */
@media (max-width: 991px) {
.opex-highlight {
font-size: 15px;
}
.opex-why-bottom-line {
font-size: 16px;
}
.opex-why-bottom-sub {
font-size: 14px;
}
}
/* =========================================================
MODULAR SEQUENCE SECTIONS (as per your HTML)
Works with:
.opex-section .opex-modular-block .opex-modular-alt
========================================================= */
/* Section wrapper */
.opex-modular-block {
padding: 44px 0; /* nice spacing */
}
/* Alternate background so sections look in sequence */
.opex-modular-alt {
background: radial-gradient(900px 420px at 50% 0%, rgba(27,117,188,.10), rgba(255,255,255,0) 62%), linear-gradient(180deg, #f6faff 0%, #ffffff 55%, #f6faff 100%);
border-top: 1px solid rgba(15,23,42,.06);
border-bottom: 1px solid rgba(15,23,42,.06);
}
/* Tighten header inside this section only */
.opex-modular-block {
padding: 0 0 18px;
margin: 0 auto 10px;
}
.opex-modular-block {
margin-bottom: 28px;
}
.opex-modular-block {
margin: 0 auto 6px;
}
.opex-modular-block .section-subtitle {
margin-top: 8px;
max-width: 900px;
}
/* Row alignment */
.opex-modular-row {
margin-top: 8px;
}
/* Text block (like Canva) */
.opex-modular-text {
font-size: 16px;
line-height: 1.8;
color: #334155;
font-weight: 500;
margin: 0;
max-width: 760px;
}
/* Better spacing between image and text on desktop */
@media (min-width: 992px) {
.opex-modular-row .col-lg-7 {
padding-left: 28px;
}
/* second section where image is right */
.opex-modular-row .order-lg-1 {
padding-right: 28px;
padding-left: 0;
}
}
/* Mobile polish */
@media (max-width: 991.98px) {
.opex-modular-block {
padding: 32px 0;
}
.opex-modular-text {
font-size: 15px;
}
.opex-modular-image {
padding: 12px;
}
}
/* =========================================
OPEX – WHY / MODULAR BLOCK (two sections)
Works with: .opex-why-block, .opex-why-row,
.opex-why-text, .opex-why-image
========================================= */
/* Block background + spacing */
.opex-why-block {
padding: 0 10px;
position: relative;
}
/* alternate background for sequence (1st white, 2nd light) */
.opex-why-block:nth-of-type(even) {
background: linear-gradient(180deg,#f6fbff 0%, #ffffff 100%);
}
/* Row spacing */
.opex-why-row {
margin-top: 10px;
}
/* Text style */
.opex-why-text {
font-size: 17px;
line-height: 1.75;
color: #1f2a37;
margin: 0;
padding: 2px 0;
max-width: 960px;
}
/* Make text look premium (left border accent) */
.opex-why-text {
padding-left: 18px;
border-left: 4px solid rgba(27,117,188,.35);
}
/* Modular image card (re-use your image box style) */
.opex-modular-image,
.opex-why-image {
background: transparent; /* remove the white background */
box-shadow: none; /* remove shadow */
border-radius: 0; /* remove rounding if not needed */
display: inline-block;
text-align: center;
}
/* hover lift */
.opex-modular-image:hover,
.opex-why-image:hover {
transform: translateY(-6px);
}
/* image sizing */
.opex-modular-image img,
.opex-why-image img {
width: 100%;
height: 100%;
display: block;
border-radius: 12px;
max-width: 420px;
max-height: 270px;
margin: 0 auto;
object-fit: contain;
}
/* Header alignment consistency */
.opex-why-block .section-header {
margin-bottom: 0px;
}
/* Remove extra big gap if any default */
.opex-why-block {
margin-bottom: 1px;
}
/* Responsive */
@media (max-width: 991px) {
.opex-why-text {
max-width: 100%;
font-size: 16px;
padding-left: 14px;
}
.opex-modular-image img,
.opex-why-image img {
max-width: 340px;
margin-top: 10px;
margin-bottom: 10px;
}
}
@media (max-width: 576px) {
.opex-why-block {
padding: 0px 0;
}
.opex-why-text {
font-size: 15px;
}
}
/* List container spacing */
.opex-why-text ul {
margin-top: 14px;
padding-left: 0; /* remove default bullets */
list-style: none;
}
/* Individual list items */
.opex-why-text li {
position: relative;
padding-left: 20px;
margin-bottom: 14px;
font-size: 16px;
line-height: 1.6;
color: #334155; /* soft professional gray */
}
/* Custom bullet (corporate check mark) */
.opex-why-text li::before {
content: "•";
position: absolute;
left: 0;
top: 2px;
font-size: 22px;
line-height: 1;
color: #1b75bc; /* OpExWorks blue */
}
/* Emphasis for L1 / L2 / L3 */
.opex-why-text li strong {
color: #0b2a4a;
font-weight: 600;
}
/* =========================================
MOBILE INTERFACE SECTION (Highlight + List)
Uses your HTML:
.opex-highlight, .opex-why-bottom, .opex-feature-list
========================================= */
/* Section spacing + soft background */
.opex-modular-block {
padding: 5px 0;
background: linear-gradient(180deg,#f6fbff 0%, #ffffff 65%, #ffffff 100%);
}
/* Highlight message (top box) */
.opex-highlight {
max-width: 980px;
margin: 10px auto 26px; /* CENTER + LIMIT WIDTH */
padding: 18px 22px;
background: #ffffff;
border: 1px solid rgba(15,23,42,.08);
border-left: 6px solid rgba(27,117,188,.95);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(2,6,23,.10);
color: #0f172a;
font-size: 15.5px;
line-height: 1.75;
text-align: center;
}
/* Blue statement lines */
.opex-why-bottom {
text-align: center;
margin: 0 auto 22px;
padding: 0 10px;
}
.opex-why-bottom-line {
font-weight: 700;
color: #1b75bc;
letter-spacing: .2px;
line-height: 1.35;
margin: 6px 0;
font-size: 16px;
}
/* Section header tightening */
.opex-modular-block {
margin-top: 18px;
margin-bottom: 28px;
}
/* Row spacing */
.opex-modular-row {
margin-top: 10px;
}
/* Improve the image card */
.opex-modular-image {
background: #fff;
border-radius: 16px;
padding: 18px;
border: 1px solid rgba(15,23,42,.08);
box-shadow: 0 18px 45px rgba(2,6,23,.10);
transition: transform .35s ease, box-shadow .35s ease;
display: inline-block;
}
.opex-modular-image:hover {
transform: translateY(-6px);
box-shadow: 0 30px 70px rgba(2,6,23,.18);
}
.opex-modular-image img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
max-width: 420px;
margin: 0 auto;
}
/* Feature list = modern bullets + card feel */
.opex-feature-list {
list-style: none;
margin: 0;
padding: 18px 18px 18px 20px;
background: #ffffff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(2,6,23,.08);
}
.opex-feature-list li {
position: relative;
padding: 10px 10px 10px 34px;
margin: 6px 0;
color: #0f172a;
font-size: 15.5px;
line-height: 1.55;
border-radius: 10px;
transition: background .25s ease, transform .25s ease;
}
/* Blue check-dot */
.opex-feature-list li:before {
content: "";
position: absolute;
left: 12px;
top: 16px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #343a40;
}
.opex-feature-list li:hover {
background: rgba(27,117,188,.06);
transform: translateX(3px);
}
/* Responsive */
@media (max-width: 991px) {
.opex-modular-block {
padding: 5px 0;
}
.opex-highlight {
margin: 10px 12px 22px;
font-size: 15px;
}
.opex-feature-list {
margin-top: 10px;
}
}
@media (max-width: 576px) {
.opex-highlight {
padding: 14px 14px;
}
.opex-why-bottom-line {
font-size: 14.5px;
}
.opex-feature-list li {
font-size: 14.7px;
}
}
img, .no-save {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-touch-callout: none; /* iOS long-press menu */
pointer-events: none; /* stops right click on img */
}
.no-save-wrap {
pointer-events: auto;
}
.opex-why-media1 {
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(15,23,42,.10);
box-shadow: 0 18px 40px rgba(2,6,23,.12);
}
.opex-why-media1 img {
width: 100%;
height: 440px;
object-fit: cover;
display: block;
}
@media (max-width: 992px) {
.opex-why-media1 img {
height: 400px;
}
}
@media (max-width: 576px) {
.opex-why-media1 img {
height: 360px;
}
}
.opex-autonomy-wrap {
max-width: 980px; /* keeps Canva look */
}
/* two items */
.opex-autonomy-grid {
display: grid;
grid-template-columns: 1fr;
gap: 18px;
margin-top: 10px;
text-align: left;
}
/* card row */
.opex-autonomy-item {
display: flex;
gap: 10px;
padding: 8px 8px;
background: #fff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
box-shadow: 0 16px 40px rgba(2,6,23,.08);
position: relative;
overflow: hidden;
}
/* left accent line */
.opex-autonomy-item::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 4px;
border-radius: 10px;
opacity: .9;
}
.opex-autonomy-item:hover {
transform: translateY(-3px);
border-color: rgba(27,117,188,.22);
box-shadow: 0 26px 60px rgba(2,6,23,.14);
}
.opex-autonomy-icon {
border-radius: 18px;
display: flex;
align-items: inherit;
justify-content: center;
}
.opex-autonomy-icon img {
width: 66px;
height: 66px;
display: block;
}
.opex-autonomy-head {
font-size: 18px;
font-weight: 800;
color: #0f172a;
margin: 2px 0 6px;
}
.opex-autonomy-text {
font-size: 15.5px;
line-height: 1.7;
color: #475569;
font-weight: 500;
}
/* responsive */
@media (max-width: 991px) {
.opex-autonomy {
padding: 5px 0;
}
.opex-autonomy-title {
font-size: 28px;
}
.opex-autonomy-sub {
font-size: 15.5px;
}
}
@media (max-width: 576px) {
.opex-autonomy-title {
font-size: 22px;
}
.opex-autonomy-item {
padding: 16px 14px;
}
.opex-autonomy-icon {
width: 64px;
height: 64px;
flex-basis: 64px;
}
.opex-autonomy-icon img {
width: 64px;
height: 64px;
}
.opex-autonomy-head {
font-size: 16px;
}
.opex-autonomy-text {
font-size: 14.5px;
}
}
/* ==============================
DIVERSIFIED DOMAINS (NEW)
============================== */
.opex-domains-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 10px;
}
.opex-domains-tag {
font-size: 13px;
font-weight: 800;
color: #0b2a4a;
background: rgba(27,117,188,.08);
border: 1px solid rgba(27,117,188,.18);
padding: 8px 12px;
border-radius: 999px;
}
/* Grid */
.opex-domains-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-top: 30px;
}
/* Card */
.opex-domain-card {
background: #fff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 18px;
padding: 18px 18px 16px;
box-shadow: 0 16px 40px rgba(2,6,23,.08);
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
position: relative;
overflow: hidden;
min-height: 240px;
}
/* top accent glow */
.opex-domain-card::before {
content: "";
position: absolute;
left: -40px;
top: -60px;
width: 180px;
height: 180px;
pointer-events: none;
}
.opex-domain-card:hover {
transform: translateY(-4px);
border-color: rgba(27,117,188,.22);
box-shadow: 0 26px 60px rgba(2,6,23,.14);
}
.opex-domain-top {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.opex-domain-icon {
width: 82px;
height: 82px;
margin: 0 auto 14px;
border-radius: 18px;
background: linear-gradient(180deg, rgba(27,117,188,.08), rgba(255,255,255,.0));
display: flex;
align-items: center;
justify-content: center;
}
.opex-domain-icon img {
max-width: 125px;
max-height: 125px;
display: block;
}
.opex-domain-mini {
font-size: 12.5px;
font-weight: 800;
color: rgba(11,42,74,.80);
letter-spacing: .2px;
}
.opex-domain-name {
font-size: 16.5px;
font-weight: 900;
color: #1b75bc; /* your blue like screenshot */
margin: 6px 0 8px;
line-height: 1.5;
}
.opex-domain-text {
font-size: 14.8px;
line-height: 1.7;
color: #475569;
font-weight: 500;
margin: 0;
}
/* Responsive */
@media (max-width: 1200px) {
.opex-domains-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 992px) {
.opex-domains {
padding: 5px 0;
}
.opex-domains-title {
font-size: 30px;
}
.opex-domains-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 576px) {
.opex-domains-title {
font-size: 22px;
}
.opex-domains-sub {
font-size: 15px;
}
.opex-domains-grid {
grid-template-columns: 1fr;
}
.opex-domain-card {
min-height: auto;
}
}
.process-diagram {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
/* Label Row */
.process-labels {
display: flex;
justify-content: space-around;
text-align: center;
margin-top: -12px; /* Adjusts upward to align close to image */
padding: 0 30px;
}
/* Each Label */
.process-step {
font-size: 16px;
font-weight: 600;
min-width: 100px;
padding: 6px 0;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
/* Hover effect (optional) */
.process-step:hover {
background-color: rgba(0, 123, 255, 0.05);
transform: scale(1.05);
}
/* Card Layout */
.feature-block {
border: 1px solid #e1e8f0;
border-left: 5px solid #2c6ed5;
border-radius: 12px;
padding: 20px 24px;
margin-bottom: 30px;
box-shadow: 0 8px 20px rgba(2, 6, 23, 0.05);
transition: all 0.3s ease;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}
.feature-block:hover {
box-shadow: 0 10px 30px rgba(2, 6, 23, 0.15);
transform: translateY(-4px);
}
/* Main Heading */
.feature-heading {
font-size: 20px;
font-weight: 700;
color: #1d3557;
margin-bottom: 12px;
position: relative;
padding-left: 20px;
}
.feature-heading::before {
content: '✓';
color: #22c55e;
position: absolute;
left: 0;
top: 0;
}
/* Subheadings like CAPA, 4M etc. */
.feature-subheading {
font-size: 16px;
font-weight: 600;
color: #2c6ed5;
margin-top: 16px;
margin-bottom: 6px;
}
/* Text Content */
.feature-block p {
font-size: 15px;
line-height: 1.5;
color: #4b5563;
margin-bottom: 16px;
}
/* Optional Icon Layout (for grid-style sections) */
.feature-item {
display: flex;
align-items: flex-start;
gap: 20px;
margin-bottom: 40px;
}
.feature-icon img {
width: 70px;
height: 70px;
object-fit: contain;
}
.feature-content h5 {
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
color: #111827;
}
.feature-content p {
margin: 0;
font-size: 15px;
color: #4b5563;
line-height: 1.5;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.feature-block {
padding: 13px;
}
.feature-heading {
font-size: 18px;
}
.feature-subheading {
font-size: 15px;
}
.feature-item {
flex-direction: column;
text-align: center;
align-items: center;
}
.feature-icon img {
margin-bottom: 5px;
}
}
/* =========================================================
ECOSYSTEM PARTNERS SECTION
========================================================= */
.opex-partnersx {
padding: 10px 0 10px;
background: #fff;
}
.opex-partnersx-wrap {
max-width: 1100px;
}
/* two cards layout */
.opex-partnersx-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 18px;
margin-top: 14px;
}
/* partner card */
.opex-partner-card {
background: #fff;
border: 1px solid rgba(15,23,42,.10);
border-radius: 18px;
padding: 20px 20px 18px;
box-shadow: 0 14px 34px rgba(2,6,23,.08);
position: relative;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.opex-partner-card::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 4px;
border-radius: 10px;
background: linear-gradient(180deg, var(--opex-blue), var(--opex-sky));
opacity: .95;
}
.opex-partner-card:hover {
transform: translateY(-3px);
border-color: rgba(27,117,188,.22);
box-shadow: 0 26px 60px rgba(2,6,23,.14);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
line-height: 1.5 !important;
}
.opex-partner-title {
margin: 0 0 10px;
padding-left: 14px;
font-size: 22px;
font-weight: 900;
color: var(--opex-blue);
letter-spacing: -0.2px;
}
.opex-partner-text {
margin: 0 0 12px;
padding-left: 14px;
font-size: 15.5px;
line-height: 1.5;
color: #334155;
font-weight: 500;
}
/* highlight paragraph (blue strip) */
.opex-partner-highlight {
margin-top: 8px;
margin-left: 14px;
padding: 12px 14px;
border-radius: 12px;
background: var(--opex-blue);
color: #fff;
font-size: 15px;
line-height: 1.75;
font-weight: 700;
box-shadow: 0 18px 40px rgba(27,117,188,.18);
}
/* Optional logo strip */
.opex-partnersx-logos {
margin-top: 22px;
padding-top: 14px;
border-top: 1px solid rgba(15,23,42,.10);
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 14px;
align-items: center;
}
.opex-logo-item {
text-align: center;
background: #fff;
border: 1px solid rgba(15,23,42,.08);
border-radius: 16px;
padding: 14px 12px;
box-shadow: 0 12px 30px rgba(2,6,23,.06);
}
.opex-logo-item img {
max-width: 220px;
height: 64px;
object-fit: contain;
display: block;
margin: 0 auto 10px;
}
.opex-logo-item a {
font-weight: 800;
color: var(--opex-blue);
text-decoration: none;
}
.opex-logo-item a:hover {
text-decoration: underline;
}
/* Responsive */
@media (max-width: 991.98px) {
.opex-hdr-title {
font-size: 24px;
}
.opex-partnersx-grid {
grid-template-columns: 1fr;
}
.opex-partnersx-logos {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.opex-winwin-media {
padding: 10px;
}
.opex-partner-card {
padding: 16px 14px;
}
.opex-partner-title {
font-size: 19px;
}
.opex-partner-text {
font-size: 14.7px;
}
}
/* =========================================================
PARTNERS CONTACT ROW (Phone / Email) — FINAL (matches your HTML)
========================================================= */
/* full bar look */
.opex-partnersx-contact {
margin-top: 14px;
padding: 2px 6px;
border: 0px solid rgba(15,23,42,.10);
align-items: center; /* bootstrap row supports this */
}
/* remove extra space from */
.opex-partnersx-contact .section-subtitle {
margin: 0 !important;
font-size: 15px;
font-weight: 800;
color: #0b2a4a;
display: inline-flex;
align-items: center;
gap: 8px;
line-height: 1.5;
}
/* icons */
.opex-partnersx-contact .col-md-6:first-child .section-subtitle::before {
content: "📞";
font-size: 16px;
}
.opex-partnersx-contact .col-md-6:last-child .section-subtitle::before {
content: "✉️";
font-size: 16px;
}
/* RIGHT ALIGN FIX for your existing .text-right */
.opex-partnersx-contact .text-right {
text-align: right;
}
.opex-partnersx-contact .text-right .section-subtitle {
justify-content: flex-end;
}
/* small hover polish */
.opex-partnersx-contact .section-subtitle:hover {
color: #1b75bc;
}
/* Mobile: stack + center */
@media (max-width: 767.98px) {
.opex-partnersx-contact {
padding: 2px 4px;
text-align: center;
}
.opex-partnersx-contact .col-md-6 {
text-align: center !important;
}
.opex-partnersx-contact .col-md-6 + .col-md-6 {
margin-top: 8px;
}
.opex-partnersx-contact .section-subtitle {
justify-content: center !important;
font-size: 14.5px;
}
}
.opex-pillar-row {
padding-bottom: 12px;
}
.clickable-image {
cursor: pointer;
transition: transform .25s ease, box-shadow .25s ease;
}
.clickable-image:hover {
transform: scale(1.02);
box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
/* Premium highlighted quote – corporate & modern */
.quote-5 {
max-width: 880px;
margin: 20px auto 10px;
padding: 10px 20px;
text-align: center;
font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
font-style: italic;
font-weight: 400;
font-size: 25px;
line-height: 1.65;
color: #0f172a; /* deep corporate navy */
/* subtle premium feel */
background: linear-gradient( 180deg, rgba(27,117,188,0.05), rgba(255,255,255,0) );
border-radius: 10px;
/* soft focus */
box-shadow: 0 10px 28px rgba(2,6,23,.08);
/* 5-line clamp */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
}
/* Emphasis for key phrase */
.quote-5 b,
.quote-5 strong {
font-weight: 700;
font-style: italic;
color: #1b75bc;
}
/* ============================
Responsive adjustments
============================ */
/* Tablets (≤ 991px) */
@media (max-width: 991px) {
.quote-5 {
max-width: 92%;
font-size: 22px;
line-height: 1.6;
padding: 14px 18px;
-webkit-line-clamp: 6; /* allow slightly more lines */
}
}
/* Small tablets & large phones (≤ 768px) */
@media (max-width: 768px) {
.quote-5 {
max-width: 95%;
font-size: 20px;
line-height: 1.55;
padding: 12px 16px;
border-radius: 8px;
box-shadow: 0 8px 22px rgba(2,6,23,.07);
}
}
/* Mobile phones (≤ 576px) */
@media (max-width: 576px) {
.quote-5 {
font-size: 18px;
line-height: 1.5;
padding: 10px 14px;
margin: 14px auto 8px;
-webkit-line-clamp: 7; /* readability on small screens */
}
}
/* Extra small phones (≤ 360px) */
@media (max-width: 360px) {
.quote-5 {
font-size: 16.5px;
line-height: 1.45;
}
}
/* ============================================================
LEARIDGE - ADAPTIVE COACH PAGE (additional styles only)
Append this block to the END of css/Matser_style.css
Uses existing tokens: --opex-blue, --opex-navy, --opex-text
============================================================ */
/* Top lead line (bold, centered, dark) */
.lrn-lead {
max-width: 1100px;
margin: 0 auto;
padding: 10px 8px 0;
font-size: 20px;
line-height: 1.6;
font-weight: 700;
color: var(--opex-text);
text-align: center;
}
/* Section spacing */
/* Blue section title (left aligned, like the design) */
.lrn-coach-title {
margin-bottom: 22px;
font-size: 30px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.3px;
color: var(--opex-blue);
}
/* Intro paragraph (justified, like the design) */
.lrn-coach-intro {
margin-bottom: 34px;
font-size: 17px;
line-height: 1.8;
color: var(--opex-text);
text-align: justify;
}
/* Feature row: icon left, text right */
.lrn-feature {
align-items: flex-start;
gap: 24px;
margin-bottom: 30px;
margin-top: 40px;
}
.lrn-feature-icon {
text-align: center;
}
.lrn-feature-icon img {
width: 240px;
height: auto;
}
.lrn-feature-title {
margin: 0 0 12px;
font-size: 19px;
font-weight: 700;
color: var(--opex-blue);
}
.lrn-feature-sub {
margin: 0 0 18px;
font-size: 15px;
font-weight: 600;
color: var(--opex-blue);
}
.lrn-feature-text {
font-size: 16px;
line-height: 1.85;
color: #2b3645;
margin: 0;
text-align: left;
}
/* Phone mockup on the right */
.lrn-phone {
text-align: center;
padding-top: 10px;
}
.lrn-phone img {
max-width: 300px;
width: 100%;
height: 500px;
filter: drop-shadow(0 18px 40px rgba(2, 6, 23, .18));
}
/* Bottom split section */
.lrn-split-section {
padding: 5px 0 60px;
}
.lrn-split-title {
margin-bottom: 26px;
font-size: 26px;
font-weight: 700;
text-align: center;
color: var(--opex-blue);
}
/* ================= SPLIT SECTION ================= */
.lrn-split-title {
margin-bottom: 25px;
font-size: 30px;
font-weight: 700;
line-height: 1.5;
color: #0b2a4a;
letter-spacing: -0.3px;
}
.lrn-split-title:after {
content: "";
width: 70px;
height: 4px;
display: block;
margin-top: 12px;
border-radius: 30px;
}
/* ================= MOBILE FIRST ================= */
.lrn-mobile-list {
max-width: 500px;
}
.lrn-mobile-item {
display: flex;
align-items: center;
gap: 20px;
padding: 12px;
margin-bottom: 20px;
background: #fff;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(47,128,237,.08);
transition: all .35s ease;
border: 1px solid rgba(47,128,237,.08);
}
.lrn-mobile-item:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(47,128,237,.15);
}
.lrn-mobile-item img {
width: 76px;
height: 76px;
object-fit: contain;
background: #f3f8ff;
padding: 3px;
border-radius: 16px;
}
.lrn-mobile-item span {
font-size: 24px;
font-weight: 700;
color: var(--opex-blue);
line-height: 1.4;
}
/* ================= LANGUAGE CARD ================= */
/* Image showcase card */
.lrn-lang-img {
position: relative;
max-width: 860px;
margin: 0 auto;
text-align: center;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border-radius: 24px;
}
.lrn-lang-img img {
max-width: 100%;
width: 680px;
height: auto;
display: block;
margin: 0 auto;
}
/* Responsive */
@media (max-width: 991px) {
.lrn-lang-img {
border-radius: 20px;
}
}
@media (max-width: 767px) {
.lrn-lang-img {
border-radius: 16px;
margin: 20px 6px;
}
.lrn-lang-img::before {
width: 80px;
height: 3px;
}
}
/* ================= RESPONSIVE ================= */
@media (max-width: 991px) {
.lrn-split-section {
padding: 10px 0;
}
.lrn-split-title {
text-align: center;
font-size: 28px;
}
.lrn-split-title:after {
margin: 12px auto 0;
}
.lrn-mobile-list {
margin: auto;
}
}
@media (max-width: 576px) {
.lrn-mobile-item {
padding: 16px;
gap: 15px;
}
.lrn-mobile-item img {
width: 58px;
height: 58px;
}
.lrn-mobile-item span {
font-size: 18px;
}
.lrn-split-title {
font-size: 24px;
}
}
/* ===== Responsive ===== */
@media (max-width: 992px) {
.lrn-coach-title {
font-size: 26px;
text-align: center;
}
.lrn-lead {
font-size: 17px;
}
.lrn-phone {
margin-top: 30px;
}
.lrn-phone img {
width: 70%;
height: 380px;
}
}
@media (max-width: 576px) {
.lrn-coach-title {
font-size: 22px;
}
.lrn-feature {
gap: 16px;
}
.lrn-feature-icon {
padding-right: 4px;
padding-bottom: 19px;
}
.lrn-split-title {
font-size: 22px;
}
}
/* ============================================================
MEET VIDYA SECTION (additional styles only)
============================================================ */
.lrn-vidya-section {
padding: 10px 0 60px;
}
/* Blue sub-heading (AI-Powered Content Engine / Ask Vidya) */
.lrn-vidya-subtitle {
margin: 0 0 12px;
font-size: 21px;
font-weight: 700;
color: var(--opex-blue);
}
/* Ask Vidya mascot image */
.lrn-vidya-media {
text-align: center;
}
.lrn-vidya-media img {
max-width: 420px;
width: 100%;
height: auto;
}
/* Ask Vidya text block */
.lrn-vidya-block {
margin-top: 28px;
}
/* Three capability columns */
.lrn-vidya-grid {
margin-top: 44px;
}
/* Capability cards */
.lrn-vidya-item {
height: 100%;
max-width: none;
margin: 0 0 24px;
padding: 30px 22px 26px;
text-align: center;
background: #fff;
border: 1px solid rgba(27, 117, 188, .14);
border-radius: 16px;
box-shadow: 0 6px 18px rgba(11, 42, 74, .06);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lrn-vidya-item:hover {
transform: translateY(-5px);
border-color: rgba(27, 117, 188, .35);
box-shadow: 0 16px 34px rgba(11, 42, 74, .12);
}
.lrn-vidya-head {
margin-bottom: 6px;
font-size: 17px;
font-weight: 700;
color: var(--opex-text);
}
/* keep the three cards equal height in the row */
.lrn-vidya-grid > [class*="col-"] {
display: flex;
}
.lrn-vidya-grid > [class*="col-"] > .lrn-vidya-item {
width: 100%;
}
.opex-feature-list {
list-style: none;
margin: 0;
padding: 18px 18px 18px 20px;
background: #ffffff;
border: 1px solid rgba(15, 23, 42, .08);
border-radius: 14px;
box-shadow: 0 16px 40px rgba(2, 6, 23, .08);
}
.opex-feature-list li {
position: relative;
padding: 10px 10px 10px 34px;
margin: 6px 0;
color: #0f172a;
font-size: 16.5px;
line-height: 1.55;
border-radius: 10px;
transition: background .25s ease, transform .25s ease;
}
/* ===== Topics Covered cards - polished ===== */
.topics-grid .lrn-vidya-item {
height: 100%;
padding: 28px 22px 26px;
text-align: center;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid rgba(27, 117, 188, .14);
border-radius: 18px;
box-shadow: 0 10px 28px rgba(11, 42, 74, .06);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.topics-grid .lrn-vidya-item:hover {
transform: translateY(-6px);
border-color: rgba(27, 117, 188, .35);
box-shadow: 0 20px 44px rgba(11, 42, 74, .13);
}
/* image - uniform square, framed, same size for all */
.topics-grid .lrn-vidya-icon {
display: flex !important;
align-items: center;
justify-content: center;
width: 120px !important;
height: 120px !important;
margin: 0 auto 18px !important;
padding: 0 !important;
border-radius: 16px !important;
border: 1px solid rgba(27, 117, 188, .15) !important;
background: #fff !important;
overflow: hidden;
box-shadow: 0 8px 20px rgba(11, 42, 74, .08);
}
/* ===== What We Offer ===== */
/* image rows - card-framed images, vertically centered with title */
.wwo .row {
margin-top: 26px !important;
padding: 26px 24px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid rgba(27, 117, 188, .12);
border-radius: 18px;
box-shadow: 0 10px 28px rgba(11, 42, 74, .06);
transition: transform .25s ease, box-shadow .25s ease;
}
.wwo .row:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(11, 42, 74, .12);
}
/* the blue title with an accent bar */
.wwo .lrn-split-title {
position: relative;
margin: 0;
padding-left: 18px;
font-size: 26px;
font-weight: 700;
color: var(--opex-blue);
}
.wwo .lrn-split-title::before {
content: "";
position: absolute;
left: 0;
top: 4px;
bottom: 4px;
width: 5px;
border-radius: 6px;
background: linear-gradient(180deg, #1b75bc, #35b8ff);
}
/* images */
.wwo .row img {
max-width: 80%;
height: auto;
transition: transform .35s ease;
}
.wwo .row:hover img {
transform: scale(1.03);
}
/* ===== Know More form ===== */
.know-more .lrn-coach-title {
text-align: center;
}
.know-more .lrn-feature-text {
max-width: 760px;
margin: 0 auto 28px;
text-align: center;
color: #475569;
}
/* form card */
.know-more .reg-card {
max-width: 620px;
margin: 0 auto;
padding: 34px 32px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid rgba(27, 117, 188, .14);
border-radius: 18px;
box-shadow: 0 16px 40px rgba(11, 42, 74, .08);
}
.know-more .reg-card .form-group {
margin-bottom: 18px;
}
.know-more .reg-card label {
display: block;
margin-bottom: 6px;
font-size: 14.5px;
font-weight: 600;
color: var(--opex-navy);
}
.know-more .reg-card .form-control {
width: 100%;
height: 46px;
border: 1px solid rgba(15, 23, 42, .15);
border-radius: 10px;
padding: 8px 14px;
font-size: 15px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.know-more .reg-card .form-control:focus {
border-color: var(--opex-blue);
box-shadow: 0 0 0 3px rgba(27, 117, 188, .15);
outline: none;
}
/* submit centered + gradient */
.know-more .reg-actions {
display: flex;
justify-content: center;
margin-top: 24px;
}
.know-more .reg-actions .btn-opex {
min-width: 180px;
background: linear-gradient(135deg, #1b75bc, #0b3a5e) !important;
border: none !important;
border-radius: 10px !important;
transition: transform .2s ease, box-shadow .2s ease;
}
.know-more .reg-actions .btn-opex:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(27, 117, 188, .35);
}
/* Responsive */
@media (max-width: 576px) {
.know-more .reg-card {
padding: 24px 18px;
}
.know-more .reg-actions .btn-opex {
width: 100%;
}
}
/* Responsive: stack and center on mobile */
@media (max-width: 767px) {
.wwo .row {
text-align: center;
padding: 22px 16px;
}
.wwo .lrn-split-title {
display: inline-block;
margin-bottom: 18px;
padding-left: 0;
}
.wwo .lrn-split-title::before {
display: none;
}
.wwo .row img {
max-width: 90%;
}
}
.topics-grid img {
width: 150px !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
border-radius: 0 !important;
transition: transform .35s ease;
padding-bottom: 20px;
}
.topics-grid .lrn-vidya-item:hover .lrn-vidya-icon {
transform: none !important;
box-shadow: 0 8px 20px rgba(11, 42, 74, .08) !important;
}
.topics-grid .lrn-vidya-item:hover .lrn-vidya-icon img {
transform: scale(1.08);
}
/* title + text */
.topics-grid .lrn-vidya-head {
margin-bottom: 8px;
font-size: 19px;
font-weight: 700;
color: var(--opex-blue);
}
.topics-grid .lrn-vidya-text {
font-size: 15px;
line-height: 1.6;
color: #475569;
}
/* equal card heights across the row */
.topics-grid > [class*="col-"] {
display: flex;
margin-bottom: 24px;
}
.topics-grid > [class*="col-"] > .lrn-vidya-item {
width: 100%;
}
/* Responsive */
@media (max-width: 576px) {
.topics-grid .lrn-vidya-icon {
width: 100px !important;
height: 100px !important;
}
}
/* dark dot marker */
.opex-feature-list li:before {
content: "";
position: absolute;
left: 12px;
top: 16px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #343a40;
}
.opex-feature-list li:hover {
background: rgba(27, 117, 188, .06);
transform: translateX(3px);
}
/* Capability grid icons - soft circular badge, matches .lrn-sub-icon */
.lrn-vidya-icon {
display: flex;
align-items: center;
justify-content: center;
width: 110px;
height: 110px;
margin: 0 auto 6px;
border-radius: 50%;
background: rgba(27, 117, 188, .10);
border: 1px solid rgba(27, 117, 188, .18);
transition: transform .25s ease, box-shadow .25s ease;
}
.lrn-vidya-icon img {
max-height: 86px;
max-width: 86px;
width: auto;
}
/* if a Font Awesome icon is used instead of an image */
.lrn-vidya-icon i {
font-size: 44px;
line-height: 1;
color: var(--opex-blue);
}
/* gentle lift when hovering the column */
.lrn-vidya-item:hover .lrn-vidya-icon {
transform: translateY(-4px);
box-shadow: 0 12px 26px rgba(27, 117, 188, .18);
}
/* Icon badge before subtitles */
.lrn-vidya-subtitle {
display: flex;
align-items: center;
gap: 12px;
}
.lrn-sub-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(27, 117, 188, .12);
color: var(--opex-blue);
font-size: 18px;
}
.lrn-vidya-icon img {
max-height: 86px;
width: auto;
}
.lrn-vidya-text {
margin: 0;
font-size: 14.5px;
line-height: 1.6;
color: var(--opex-text);
}
/* Responsive */
@media (max-width: 992px) {
.lrn-vidya-media {
margin-top: 24px;
}
}
@media (max-width: 576px) {
.lrn-vidya-subtitle {
font-size: 19px;
}
.lrn-vidya-grid {
margin-top: 30px;
}
}
/* ============================================================
PAGE 2 (Learning Bridge) - only ONE small rule added.
Everything else reuses the lrn- classes above.
Sizes/colors the Font Awesome icons used in the
Course Structure / Modules grids.
============================================================ */
.lrn-vidya-icon i {
font-size: 58px;
line-height: 1;
color: var(--opex-text);
}
/* ============================================================
PAGE 3 (Deployment Scenarios) - small additions only.
Reuses .lrn-feature / .lrn-feature-icon / .lrn-feature-title /
.lrn-feature-text / .lrn-coach-title / .lrn-coach-intro
============================================================ */
/* Font Awesome icon variant inside the feature rows */
.lrn-feature-icon i {
font-size: 62px;
line-height: 1;
color: var(--opex-text);
}
/* "Learn More" pill button (matches the PDF: outline pill + dark arrow circle) */
.lrn-learn-btn {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 14px;
padding: 6px 18px 6px 6px;
border: 2px solid var(--opex-text);
border-radius: 999px;
background: #fff;
font-size: 13px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
text-decoration: none;
color: var(--opex-text);
transition: background .2s ease, color .2s ease;
}
.lrn-learn-btn:hover {
background: var(--opex-blue);
border-color: var(--opex-blue);
color: #fff;
text-decoration: none;
}
.lrn-learn-arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--opex-text);
color: #fff;
font-size: 11px;
}
.lrn-learn-btn:hover .lrn-learn-arrow {
background: #fff;
color: var(--opex-blue);
}
/* ============================================================
PAGE 4 (BHARAT - Know Your Roots)
Orange / saffron colour combination requested.
Reuses lrn- classes; adds a small bkr- (Bharat) set on top.
============================================================ */
:root {
--bkr-saffron: #e87722; /* primary orange */
--bkr-saffron-2: #f4a83a; /* light orange */
--bkr-maroon: #9a3412; /* deep maroon-orange for titles */
--bkr-red: #d1342f; /* program-title red */
--bkr-bg: #fff7ed; /* warm card background */
--bkr-border: #f3e2cd; /* warm border */
}
/* Red/orange sub-heading under the blue section title */
.bkr-sub {
margin: 0 0 22px;
font-size: 21px;
font-weight: 700;
color: #e3750d;
}
.bkr-strong {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
max-width: 1120px;
margin: 10px auto 36px;
color: var(--bkr-maroon);
font-size: 24px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.3px;
text-align: center;
}
.bkr-strong::before,
.bkr-strong::after {
content: "";
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, var(--bkr-saffron, #e87722));
}
.bkr-strong::after {
background: linear-gradient(90deg, var(--bkr-saffron, #e87722), transparent);
}
.bkr-learn-btn {
display: flex;
width: fit-content;
margin: 16px 0 0 auto; /* top:16px, right:0, bottom:0, left:auto -> pushes right */
align-items: center;
gap: 10px;
padding: 11px 14px 11px 26px;
border-radius: 999px;
background: linear-gradient(135deg, #e87722, #f4a83a);
color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 24px rgba(232, 119, 34, .32);
transition: transform .22s ease, box-shadow .22s ease;
}
.bkr-learn-btn:hover {
transform: translateY(-3px);
box-shadow: 0 16px 30px rgba(232, 119, 34, .42);
color: #fff;
}
/* "Crafted for all Indians..." callout */
.bkr-callout {
max-width: 300px;
margin: 20px auto;
padding: 22px 18px;
text-align: center;
font-size: 19px;
font-weight: 700;
line-height: 1.45;
color: var(--opex-text);
background: var(--bkr-bg);
border: 1px solid var(--bkr-border);
border-radius: 16px;
}
/* ---- Transformation Journey step cards ---- */
.bkr-step-grid {
margin-top: 30px;
}
.bkr-step-card {
display: flex;
align-items: flex-start;
gap: 18px;
height: calc(100% - 24px);
margin-bottom: 24px;
padding: 22px 20px;
background: #fffdf9;
border: 1px solid var(--bkr-border);
border-radius: 12px;
}
.bkr-step-icon {
flex: 0 0 62px;
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bkr-bg);
border: 1px solid var(--bkr-border);
color: var(--bkr-saffron);
font-size: 24px;
}
.bkr-step-icon1 {
flex: 0 0 72px;
width: 72px;
height: 72px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--bkr-bg);
border: 1px solid var(--bkr-border);
color: var(--bkr-saffron);
font-size: 24px;
}
.bkr-step-glyph {
font-size: 26px;
font-weight: 700;
line-height: 1;
color: var(--bkr-saffron);
}
.bkr-step-label {
margin-bottom: 2px;
font-size: 14px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--bkr-saffron);
}
.bkr-step-title {
margin-bottom: 6px;
font-size: 18px;
font-weight: 700;
color: var(--bkr-maroon);
}
.bkr-step-title span {
font-weight: 600;
color: var(--opex-text);
}
.bkr-step-text {
margin: 0;
font-size: 16px;
line-height: 1.6;
color: #475569;
}
/* ---- Quote block (orange left border, serif) ---- */
.bkr-quote {
margin-top: 10px;
padding: 6px 10px 6px 26px;
border-left: 4px solid var(--bkr-saffron);
}
.bkr-quote p {
max-width: 1200px;
margin: 0 auto;
font-size: 17px;
line-height: 1.75;
color: #475569;
font-weight: 500;
padding: 0px 20px 20px;
text-align: left;
}
.bkr-quote-line {
font-size: 19px !important;
font-weight: 700;
font-style: italic;
color: var(--bkr-maroon) !important;
}
/* Pin program text block to the top of the card */
.lrn-coach-section .row.mb-5 {
align-items: flex-start !important;
}
.lrn-coach-section .row.mb-5 .lrn-feature-body {
padding-top: 6px; /* small nudge so title aligns with image top */
}
/* keep your title styling, just ensure no top gap */
.bkr-program-title {
margin: 0 0 32px;
font-family: Georgia, 'Times New Roman', serif;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--bkr-red);
}
/* Responsive */
@media (max-width: 992px) {
.bkr-step-card {
height: auto;
}
.bkr-strong {
max-width: 620px;
}
.bkr-strong::before,
.bkr-strong::after {
content: "";
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, var(--bkr-saffron, #e87722));
}
.bkr-strong::after {
background: linear-gradient(90deg, var(--bkr-saffron, #e87722), transparent);
}
}
/* "Deep Dive into BHARAT..." gradient saffron heading */
.bkr-deep-dive {
max-width: 1100px;
margin: 6px auto 20px;
font-size: 30px;
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.4px;
text-align: center;
color: #e87722; /* fallback if clip unsupported */
background: linear-gradient(135deg, #e87722 0%, #f4a83a 60%, #f6b54a 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Responsive */
@media (max-width: 991px) {
.bkr-deep-dive {
font-size: 28px;
}
}
@media (max-width: 576px) {
.bkr-deep-dive {
font-size: 22px;
padding: 0 12px;
}
}
@media (max-width: 576px) {
.bkr-sub {
font-size: 17px;
}
.bkr-strong {
max-width: 620px;
}
.bkr-callout {
font-size: 16px;
}
.bkr-step-text {
font-size: 14px;
}
.bkr-step-label {
margin-bottom: 2px;
font-size: 12px;
}
.bkr-program-title {
text-align: center;
}
.bkr-strong::before,
.bkr-strong::after {
content: "";
flex: 1;
height: 2px;
background: linear-gradient(90deg, transparent, var(--bkr-saffron, #e87722));
}
.bkr-strong::after {
background: linear-gradient(90deg, var(--bkr-saffron, #e87722), transparent);
}
}
/* ============================================================
GAMIFIED ASSESSMENTS - attractive layout
============================================================ */
/* Quote block - saffron accent bar + soft warm card */
.lrn-coach-section .bkr-quote {
position: relative;
margin-bottom: 26px;
padding: 16px 0px;
background: linear-gradient(180deg, #fff8f0 0%, #fffdfa 100%);
border-left: 5px solid var(--bkr-saffron, #e87722);
border-radius: 0 16px 16px 0;
box-shadow: 0 8px 24px rgba(11, 42, 74, .06);
}
.lrn-coach-section .bkr-quote .lrn-feature-text {
margin-bottom: 1px;
font-size: 16px;
line-height: 1.75;
color: #33415c;
}
.lrn-coach-section .bkr-quote .lrn-feature-text:last-child {
margin-bottom: 0;
}
/* People image - rounded showcase card */
.lrn-coach-section .lrn-lang-img {
margin-top: 6px;
padding: 0;
background: none;
box-shadow: none;
border-radius: 20px;
overflow: hidden;
}
.lrn-coach-section .lrn-lang-img img {
width: 100%;
border-radius: 20px;
box-shadow: 0 14px 36px rgba(11, 42, 74, .12);
transition: transform .35s ease;
}
.lrn-coach-section .lrn-lang-img:hover img {
transform: scale(1.015);
}
/* Phone mockup - centered, lifted, gentle float */
.lrn-phone {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
padding: 10px;
}
/* ============================================================
BHARAT program cards - boxed, balanced, attractive
============================================================ */
.lrn-coach-section .row.mb-5 {
margin: 0 6px 16px !important;
padding: 20px 26px;
background: linear-gradient(180deg, #fffdfa 0%, #fff8f0 100%);
border: 1px solid rgba(232, 119, 34, .22);
border-left: 5px solid var(--bkr-saffron, #e87722);
border-radius: 18px;
box-shadow: 0 10px 30px rgba(11, 42, 74, .07);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lrn-coach-section .row.mb-5:hover {
transform: translateY(-4px);
border-color: rgba(232, 119, 34, .45);
box-shadow: 0 18px 40px rgba(11, 42, 74, .13);
}
/* icon */
.lrn-coach-section .row.mb-5 .lrn-feature-icon img {
max-width: 240px;
width: 100%;
height: auto;
transition: transform .3s ease;
}
.lrn-coach-section .row.mb-5:hover .lrn-feature-icon img {
transform: translateY(-4px);
}
/* text */
.lrn-coach-section .row.mb-5 .lrn-feature-text {
margin: 0 0 6px;
font-size: 16px;
line-height: 1.8;
color: #2b3645;
}
/* Responsive: stack and center on tablet/mobile */
@media (max-width: 991px) {
.lrn-coach-section .row.mb-5 {
padding: 24px 18px;
text-align: center;
}
.lrn-coach-section .row.mb-5 .bkr-learn-btn {
margin: 18px auto 0; /* center button when stacked */
}
}
@media (max-width: 576px) {
.lrn-coach-section .row.mb-5 {
padding: 20px 14px;
margin: 0 4px 20px !important;
}
.lrn-coach-section {
padding: 0px 0px;
}
}
/* BHARAT program card image - framed + polished */
/* BHARAT program card image - framed + polished */
.lrn-coach-section .row.mb-5 .lrn-feature-icon {
display: flex;
justify-content: center;
align-items: center;
}
.lrn-coach-section .row.mb-5 .lrn-feature-icon img {
max-width: 240px;
width: 100%;
height: auto;
padding: 16px;
background: #ffffff;
border: 1px solid rgba(232, 119, 34, .18);
border-radius: 18px;
box-shadow: 0 10px 26px rgba(11, 42, 74, .10);
transition: transform .3s ease, box-shadow .3s ease;
}
/* lift on card hover */
.lrn-coach-section .row.mb-5:hover .lrn-feature-icon img {
transform: translateY(-5px);
box-shadow: 0 18px 38px rgba(232, 119, 34, .22);
}
/* Responsive */
@media (max-width: 991px) {
.lrn-coach-section .row.mb-5 .lrn-feature-icon img {
max-width: 210px;
margin-bottom: 16px;
}
}
@media (max-width: 576px) {
.lrn-coach-section .row.mb-5 .lrn-feature-icon img {
max-width: 210px;
padding: 12px;
}
}
/* lift on card hover */
.lrn-coach-section .row.mb-5:hover .lrn-feature-icon img {
transform: translateY(-5px);
box-shadow: 0 18px 38px rgba(232, 119, 34, .22);
}
}
/* ============================================================
PAGE 5 (Programs) - small additions only.
Reuses: .lrn-coach-title, .lrn-vidya-subtitle, .lrn-feature-text,
.lrn-mobile-item, .lrn-lang-img, .lrn-phone, .lrn-learn-btn
============================================================ */
/* "Built on Learidge / Mobile First..." stacked blue lines */
.lrn-built-line {
margin: 0 0 10px;
font-size: 24px;
font-weight: 700;
line-height: 1.35;
color: var(--opex-blue);
}
/* ============================================================
PROGRAM CARD - attractive
============================================================ */
.lrn-program {
margin: 0 0 45px;
padding: 30px 32px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border: 1px solid rgba(27, 117, 188, .14);
border-left: 5px solid var(--opex-blue);
border-radius: 18px;
box-shadow: 0 12px 34px rgba(11, 42, 74, .07);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lrn-program:hover {
transform: translateY(-4px);
border-color: rgba(27, 117, 188, .30);
box-shadow: 0 20px 44px rgba(11, 42, 74, .13);
}
/* image frame */
.lrn-program .lrn-lang-img {
padding: 16px;
background: #fff;
text-align: center;
}
.lrn-sub-btn {
display: flex;
width: fit-content;
margin: 16px 0 0 auto; /* pushes right, same as bkr-learn-btn */
align-items: center;
gap: 10px;
padding: 11px 26px;
border-radius: 999px;
background: #155d95; color: #fff;
font-size: 14px;
font-weight: 700;
text-decoration: none;
box-shadow: 0 10px 24px rgba(232, 119, 34, .32);
transition: transform .22s ease, box-shadow .22s ease;
}
.lrn-sub-btn:hover {
transform: translateY(-3px);
box-shadow: 0 16px 30px rgba(232, 119, 34, .42);
color: #fff;
}
.lrn-sub-btn i {
font-size: 11px;
}
.lrn-program .lrn-lang-img img {
max-width: 100%;
max-height: 180px;
width: auto;
height: auto;
display: inline-block;
}
/* text */
.lrn-program .lrn-feature-text {
margin: 0 0 14px;
font-size: 16px;
line-height: 1.8;
color: #2b3645;
}
.lrn-program .lrn-feature-text:last-child {
margin-bottom: 0;
}
/* Responsive */
@media (max-width: 991px) {
.lrn-program {
padding: 24px 18px;
margin: 0 0 35px;
}
.lrn-program .lrn-lang-img {
margin-bottom: 20px;
}
}
/* container puts both buttons on one row, right-aligned */
.lrn-program-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 16px;
margin-top: 16px;
}
/* buttons must NOT push themselves right - let the container do it */
.lrn-program-actions .bkr-learn-btn,
.lrn-program-actions .lrn-sub-btn {
margin: 0; /* removes the margin-left:auto that breaks the row */
width: auto; /* removes width:fit-content stacking */
display: inline-flex;
}
/* Responsive: center on mobile */
.lrn-sub-btnBHARAT {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 21px;
border: 2px solid var(--bkr-saffron, #e87722);
border-radius: 999px;
background: #fff;
color: var(--bkr-saffron, #e87722);
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.lrn-sub-btnBHARAT:hover {
background: linear-gradient(135deg, #e87722, #f4a83a);
color: #fff;
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(232, 119, 34, .35);
text-decoration: none;
}
/* ============================================================
PAGE 6 (Use Cases) - card pattern.
Reuses: .btn-opex (Connect with us), tokens, Poppins.
============================================================ */
.reg-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end; /* both buttons grouped on the right */
gap: 14px;
margin-top: 18px;
}
/* kill the margin-left:auto + fit-content that breaks the row */
.reg-actions .lrn-sub-btn,
.reg-actions .lrn-sub-btnBHARAT {
display: inline-flex !important;
width: auto !important;
margin: 0 !important;
align-items: center;
gap: 10px;
}
/* mobile: stack full-width */
@media (max-width: 575px) {
.reg-actions {
justify-content: center;
}
.reg-actions .lrn-sub-btn,
.reg-actions .lrn-sub-btnBHARAT {
width: 100% !important;
justify-content: center;
}
}
/* Card container - one per use case, like the boxed PDF sections */
.lrn-case-card {
margin-bottom: 40px;
padding: 44px 40px 38px;
background: #fff;
border: 1px solid var(--opex-border);
border-radius: var(--opex-radius);
box-shadow: var(--opex-shadow2);
}
/* Big centered line-art icon(s) */
.lrn-case-icon {
display: flex;
justify-content: center;
align-items: flex-end;
gap: 8px;
margin-bottom: 18px;
color: var(--opex-text);
}
.lrn-case-icon i {
font-size: 64px;
line-height: 1;
}
/* Centered dark title + bold tagline */
.lrn-case-title {
margin: 0 0 8px;
font-size: 26px;
font-weight: 700;
text-align: center;
color: var(--opex-text);
}
.lrn-case-tag {
margin: 0 0 30px;
font-size: 16.5px;
font-weight: 700;
text-align: center;
color: var(--opex-text);
}
/* Label / content definition rows */
.lrn-case-row {
display: flex;
gap: 24px;
margin-bottom: 16px;
}
.lrn-case-label {
flex: 0 0 170px;
font-size: 15px;
font-weight: 700;
color: var(--opex-text);
}
.lrn-case-body {
flex: 1;
}
.lrn-case-body p {
margin: 0 0 14px;
font-size: 15px;
line-height: 1.65;
color: var(--opex-text);
}
.lrn-case-body p:last-child {
margin-bottom: 0;
}
/* Responsive */
@media (max-width: 768px) {
.lrn-case-card {
padding: 30px 20px;
}
.lrn-case-row {
flex-direction: column;
gap: 4px;
}
.lrn-case-label {
flex: 0 0 auto;
}
.lrn-case-icon i {
font-size: 52px;
}
.lrn-case-title {
font-size: 22px;
}
}
/* ============================================================
BHARAT page banner only - show full image, no cropping
============================================================ */d
.banner-bharat {
max-width: 1180px;
background: linear-gradient(180deg, #fff8f0 0%, #fdfbf7 100%);
}
/* let the image keep its natural height at every screen size */
.banner-bharat .slider img {
height: auto !important;
max-height: 620px;
width: auto;
max-width: 100%;
margin: 0 auto;
object-fit: contain !important;
}
/* Responsive */
@media (max-width: 991px) {
.banner-bharat .slider img {
max-height: 480px;
}
}
@media (max-width: 767px) {
.banner-bharat .slider img {
max-height: none; /* full image on phones */
}
}
/* ============================================================
ADAPTIVE COACH - feature row (icon left, text right)
============================================================ */
.coach-feature {
display: flex;
align-items: flex-start;
gap: 22px;
margin-bottom: 28px;
padding: 18px 20px;
background: #fff;
border: 1px solid rgba(27, 117, 188, .12);
border-radius: 16px;
box-shadow: 0 8px 24px rgba(11, 42, 74, .06);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.coach-feature:hover {
transform: translateY(-4px);
border-color: rgba(27, 117, 188, .3);
box-shadow: 0 16px 34px rgba(11, 42, 74, .12);
}
/* icon */
.coach-feature-icon {
flex: 0 0 72px;
display: flex;
align-items: center;
justify-content: center;
}
.coach-feature-icon img {
width: 100px;
height: auto;
}
/* text */
.coach-feature-title {
margin: 0 0 4px;
font-size: 19px;
font-weight: 700;
color: var(--opex-blue);
}
.coach-feature-sub {
margin: 0 0 8px;
font-size: 15px;
font-weight: 600;
color: var(--opex-blue);
}
.coach-feature-text {
margin: 0;
font-size: 15.5px;
line-height: 1.75;
color: #2b3645;
}
/* Responsive */
@media (max-width: 576px) {
.coach-feature {
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
padding: 18px 16px;
}
.coach-feature-icon {
flex: 0 0 auto;
}
.coach-feature-icon img {
width: 98px;padding-bottom:20px
}
}
/* ===== Modal popup ===== */
.lrn-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(11, 42, 74, .55);
backdrop-filter: blur(3px);
padding: 20px;
overflow-y: auto;
}
.lrn-modal-overlay.is-open {
display: flex;
align-items: flex-start;
justify-content: center;
}
.lrn-modal {
position: relative;
width: 100%;
max-width: 840px;
margin: 20px auto;
background: #fff;
border-radius: 20px;
box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
padding: 26px 24px 20px;
animation: lrnModalIn .3s ease;
}
@keyframes lrnModalIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.lrn-modal-close {
position: absolute;
top: 14px;
right: 18px;
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: #f1f5f9;
color: #0b2a4a;
font-size: 22px;
line-height: 1;
cursor: pointer;
transition: background .2s ease;
}
.lrn-modal-close:hover {
background: #e2e8f0;
}
.lrn-modal-head {
text-align: center;
margin-bottom: 24px;
}
.lrn-modal-icon {
max-width: 90px;
height: auto;
margin-bottom: 12px;
}
.lrn-modal-title {
margin: 0 0 6px;
font-size: 24px;
font-weight: 700;
color: var(--opex-text);
}
.lrn-modal-tag {
margin: 0;
font-size: 15.5px;
font-weight: 700;
color: var(--opex-text);
}
.lrn-modal-row {
display: flex;
gap: 22px;
margin-bottom: 16px;
}
.lrn-modal-label {
flex: 0 0 150px;
font-size: 14.5px;
font-weight: 700;
color: var(--opex-blue);
}
.lrn-modal-text {
flex: 1;
font-size: 14.5px;
line-height: 1.65;
color: #334155;
}
.lrn-modal-text p {
margin: 0 0 12px;
}
.lrn-modal-text p:last-child {
margin-bottom: 0;
}
.lrn-modal-foot {
text-align: center;
margin-top: 24px;
padding-top: 18px;
border-radius: 999px;
border-top: 1px solid rgba(15, 23, 42, .1);
}
.btn-opex.btn-contact {
padding: 9px 14px !important;
font-size: 13px !important;
border-radius: 8px !important;
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg,#1f78d1,#0b5fa8);
color: #fff;
font-weight: 500;
box-shadow: 0 6px 16px rgba(15,23,42,.25);
transition: all .25s ease;
}
.btn-opex.btn-contact i {
font-size: 14px;
opacity: .95;
}
/* Hover */
.btn-opex.btn-contact:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(15,23,42,.35);
color: #fff;
}
/* Responsive */
@media (max-width: 600px) {
.lrn-modal {
padding: 28px 18px 22px;
margin: 20px auto;
}
.lrn-modal-row {
flex-direction: column;
gap: 4px;
}
.lrn-modal-label {
flex: 0 0 auto;
}
}/* ===== Program action buttons - responsive ===== */
.lrn-program-actions {
display: flex;
flex-wrap: wrap; /* allow buttons to wrap to next line */
align-items: center;
justify-content: right; /* center them */
gap: 12px;
margin-top: 20px;
}
/* all three buttons share consistent sizing + can shrink */
.lrn-program-actions > a {
flex: 0 1 auto;
max-width: 100%;
white-space: nowrap;
text-align: center;
}
/* Tablet and below */
@media (max-width: 991px) {
.lrn-program-actions {
justify-content: center;
}
}
/* Phones - stack buttons full width */
@media (max-width: 575px) {
.lrn-program-actions {
flex-direction: column;
align-items: stretch;
gap: 10px;
}
.lrn-program-actions > a {
width: 100%;
justify-content: center; /* center icon + text inside each button */
}
}
.pdf-modal-body {
max-height: 95vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* smooth scrolling on iOS */
}
.pdf-modal-body iframe,
.pdf-modal-body object {
width: 100%;
height: 100%;
border: 0;
display: block;
}
.pdf-modal {
max-height: 90vh;
display: flex;
flex-direction: column;
}
.pdf-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 54px 16px 22px;
border-bottom: 1px solid #eee;
background: #fffdfa;
}
.pdf-modal-head .lrn-modal-title {
margin: 0;
font-size: 18px;
color: #123B73;
}
.pdf-open-new {
font-size: 13px;
font-weight: 600;
color: #e87722;
text-decoration: none;
white-space: nowrap;
}
.pdf-open-new:hover {
text-decoration: underline;
}
.pdf-modal-body {
background: #525659;
}
.pdf-modal-body iframe {
width: 100%;
height: 78vh;
border: 0;
display: block;
}
@media (max-width: 600px) {
.pdf-modal-body iframe {
height: 70vh;
}
}