/* =====================================================================
ROYAL CARE TECHNOLOGIES — HEADER CSS
(Topbar + Navbar + Mega Menu + Mobile Menu)
===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; }
:root {
--rc-navy: #070b2a;
--rc-primary: #4f6bff;
--rc-violet: #7b5cff;
--rc-grad: linear-gradient(135deg, #4f6bff 0%, #7b5cff 100%);
--rc-teal: #2fe0c0;
--rc-text: #1f2547;
--rc-muted: #7a80a0;
--rc-line: #e5e8f4;
--rc-soft: #eef1ff;
--rc-topbar-h: 42px;
--rc-ease: cubic-bezier(.22, 1, .36, 1);
}
.rc-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
/* ---------- Wrapper (banner ke upar fixed rehta hai) ---------- */
.rc-header-wrap {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
transition: transform .5s var(--rc-ease);
}
/* Scroll par topbar upar chala jata hai, nav sticky rehta hai */
.rc-header-wrap.is-scrolled { transform: translateY(calc(var(--rc-topbar-h) * -1)); }
/* ---------- TOPBAR ---------- */
.rc-topbar {
height: var(--rc-topbar-h);
display: flex;
align-items: center;
background: var(--rc-navy);
color: #d6dafa;
font-size: 13px;
font-weight: 500;
border-bottom: 1px solid rgba(255,255,255,.05);
}
.rc-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rc-topbar-left { display: flex; align-items: center; gap: 28px; }
.rc-topbar a,
.rc-topbar-right {
display: inline-flex; align-items: center; gap: 8px;
color: inherit; text-decoration: none; white-space: nowrap;
transition: color .25s;
}
.rc-topbar a:hover { color: #fff; }
.rc-topbar svg { width: 15px; height: 15px; color: var(--rc-teal); flex: none; }
/* ---------- NAVBAR ---------- */
.rc-header-main { padding-top: 10px; }
.rc-nav {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
height: 76px;
padding: 0 16px 0 24px;
background: rgba(243, 244, 251, .96);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.7);
border-radius: 20px;
box-shadow: 0 10px 40px rgba(5, 10, 40, .18);
transition: background .4s, box-shadow .4s;
animation: rcNavIn .9s var(--rc-ease) both;
}
.is-scrolled .rc-nav { background: rgba(255,255,255,.98); box-shadow: 0 16px 44px rgba(10, 15, 60, .25); }
@keyframes rcNavIn { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
.rc-logo { display: inline-flex; align-items: center; flex: none; }
.rc-logo img { height: 48px; width: auto; display: block; }
/* Menu links */
.rc-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.rc-menu > li { animation: rcFadeDown .7s var(--rc-ease) both; }
.rc-menu > li:nth-child(1) { animation-delay: .25s; }
.rc-menu > li:nth-child(2) { animation-delay: .32s; }
.rc-menu > li:nth-child(3) { animation-delay: .39s; }
.rc-menu > li:nth-child(4) { animation-delay: .46s; }
.rc-menu > li:nth-child(5) { animation-delay: .53s; }
.rc-menu > li:nth-child(6) { animation-delay: .60s; }
@keyframes rcFadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.rc-link {
position: relative;
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 15px;
border: 0; border-radius: 13px;
background: transparent;
color: #2b3157;
font: 600 15px/1 'Plus Jakarta Sans', sans-serif;
text-decoration: none;
cursor: pointer;
transition: color .3s, background .3s, box-shadow .3s, transform .3s;
}
.rc-link svg { width: 17px; height: 17px; color: var(--rc-primary); transition: color .3s, transform .35s var(--rc-ease); }
.rc-link:hover { background: #e7eafb; color: var(--rc-primary); }
.rc-link:hover svg:first-child { transform: translateY(-2px); }
.rc-link.is-active {
background: var(--rc-grad);
color: #fff;
box-shadow: 0 8px 22px rgba(79, 107, 255, .38);
}
.rc-link.is-active svg { color: #fff; }
.rc-link .rc-chev { width: 15px; height: 15px; transition: transform .35s var(--rc-ease); }
.rc-has-mega.is-open > .rc-link { background: #e7eafb; color: var(--rc-primary); }
.rc-has-mega.is-open .rc-chev { transform: rotate(180deg); }
/* Get A Quote */
.rc-nav-actions { display: flex; align-items: center; gap: 10px; flex: none; animation: rcFadeDown .7s .65s var(--rc-ease) both; }
.rc-quote {
position: relative;
overflow: hidden;
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 22px;
border-radius: 14px;
background: var(--rc-grad);
color: #fff;
font-size: 15px; font-weight: 700;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 10px 24px rgba(79, 107, 255, .42);
transition: transform .3s, box-shadow .3s;
}
.rc-quote svg { width: 17px; height: 17px; transition: transform .3s; }
.rc-quote:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(79, 107, 255, .55); }
.rc-quote:hover svg { transform: translateX(4px); }
.rc-quote::after {
content: '';
position: absolute; top: 0; left: -80%;
width: 50%; height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
transform: skewX(-20deg);
animation: rcShine 4s ease-in-out infinite;
}
@keyframes rcShine { 0%, 65% { left: -80%; } 100% { left: 140%; } }
/* Burger */
.rc-burger {
display: none;
width: 46px; height: 46px;
border: 0; border-radius: 13px;
background: var(--rc-grad);
cursor: pointer;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
box-shadow: 0 8px 20px rgba(79, 107, 255, .38);
transition: transform .3s;
}
.rc-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: width .3s; }
.rc-burger span:nth-child(2) { width: 14px; margin-left: 6px; }
.rc-burger:hover span:nth-child(2) { width: 20px; margin-left: 0; }
.rc-burger:active { transform: scale(.94); }
/* =====================================================================
MEGA MENU
===================================================================== */
/* Keep mega menu relative to the full navbar, not the Services .
IMPORTANT: the nav items use a transform animation above. A transformed
ancestor can become the containing block for an absolutely-positioned child,
which is why the mega menu could collapse to the Services item's width.
Disable that transform animation only on the Services . */
.rc-menu { position: static; }
.rc-nav > .rc-menu > .rc-has-mega {
position: static !important;
animation: none !important;
transform: none !important;
filter: none !important;
perspective: none !important;
}
.rc-mega {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 14px);
width: auto;
min-width: 0;
max-width: none;
z-index: 100;
margin: 0;
padding: 20px;
background: #fff;
border-radius: 24px;
box-shadow: 0 30px 70px rgba(8, 12, 50, .3);
opacity: 0;
visibility: hidden;
transform: translateY(18px) scale(.985);
transform-origin: top center;
transition: opacity .35s var(--rc-ease), transform .5s var(--rc-ease), visibility .35s;
box-sizing: border-box;
}
/* hover gap bridge */
.rc-mega::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.rc-has-mega.is-open .rc-mega { opacity: 1; visibility: visible; transform: none; }
.rc-mega-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; width: 100%; }
.rc-mega-col {
min-width: 0;
padding: 18px 14px 14px;
background: #fff;
border: 1px solid var(--rc-line);
border-radius: 18px;
opacity: 0;
transform: translateY(16px);
transition: border-color .3s, box-shadow .3s;
}
.rc-has-mega.is-open .rc-mega-col { animation: rcColIn .6s var(--rc-ease) forwards; }
.rc-has-mega.is-open .rc-mega-col:nth-child(1) { animation-delay: .05s; }
.rc-has-mega.is-open .rc-mega-col:nth-child(2) { animation-delay: .10s; }
.rc-has-mega.is-open .rc-mega-col:nth-child(3) { animation-delay: .15s; }
.rc-has-mega.is-open .rc-mega-col:nth-child(4) { animation-delay: .20s; }
.rc-has-mega.is-open .rc-mega-col:nth-child(5) { animation-delay: .25s; }
@keyframes rcColIn { to { opacity: 1; transform: none; } }
.rc-mega-col:hover { border-color: #cfd6ff; box-shadow: 0 14px 30px rgba(79, 107, 255, .12); }
.rc-mega-head {
display: flex; align-items: center; gap: 12px;
padding: 0 4px 16px;
margin-bottom: 10px;
border-bottom: 1px dashed #dde1f2;
}
.rc-mega-icon {
flex: none;
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 13px;
background: var(--rc-grad);
color: #fff;
box-shadow: 0 8px 18px rgba(79, 107, 255, .35);
transition: transform .4s var(--rc-ease);
}
.rc-mega-col:hover .rc-mega-icon { transform: rotate(-8deg) scale(1.06); }
.rc-mega-icon svg { width: 21px; height: 21px; }
.rc-mega-head small {
display: block; margin-bottom: 3px;
font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
color: #8a90ad;
}
.rc-mega-head strong { display: block; font-size: 15.5px; font-weight: 800; color: #141a3d; }
.rc-mega-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rc-mega-list a {
display: flex; align-items: center; gap: 12px;
padding: 6px;
border-radius: 12px;
color: #2b3157;
font-size: 13.5px; font-weight: 600; line-height: 1.3;
text-decoration: none;
transition: background .25s, color .25s, transform .3s var(--rc-ease);
}
.rc-mega-list .ic {
flex: none;
width: 32px; height: 32px;
display: grid; place-items: center;
border-radius: 10px;
background: #eef1fb;
color: var(--rc-primary);
transition: background .25s, color .25s;
}
.rc-mega-list .ic svg { width: 16px; height: 16px; }
.rc-mega-list a:hover { background: #f3f5ff; color: var(--rc-primary); transform: translateX(4px); }
.rc-mega-list a:hover .ic { background: var(--rc-grad); color: #fff; }
.rc-mega-list a.is-active {
background: #edf0ff;
color: var(--rc-primary);
font-weight: 700;
box-shadow: 0 4px 14px rgba(79, 107, 255, .15);
}
.rc-mega-list a.is-active .ic {
background: var(--rc-grad);
color: #fff;
}
/* Mega bottom strip */
.rc-mega-cta {
position: relative;
overflow: hidden;
margin-top: 14px;
padding: 22px 26px;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
border-radius: 20px;
background: linear-gradient(100deg, #0b1038 0%, #16205a 55%, #2d2380 100%);
color: #fff;
opacity: 0;
transform: translateY(16px);
}
.rc-has-mega.is-open .rc-mega-cta { animation: rcColIn .6s .3s var(--rc-ease) forwards; }
.rc-mega-cta::before {
content: '';
position: absolute; right: -60px; top: -80px;
width: 260px; height: 260px; border-radius: 50%;
background: radial-gradient(circle, rgba(123, 92, 255, .45), transparent 70%);
pointer-events: none;
}
.rc-pill {
display: inline-block;
padding: 5px 12px;
border-radius: 30px;
background: rgba(47, 224, 192, .1);
border: 1px solid rgba(47, 224, 192, .3);
color: var(--rc-teal);
font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
}
.rc-mega-cta h4 { margin: 10px 0 6px; font-size: 20px; font-weight: 800; }
.rc-mega-cta p { margin: 0; font-size: 14px; color: #b8bee6; }
.rc-cta-right { position: relative; display: flex; align-items: center; gap: 36px; flex: none; }
.rc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.rc-checks li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.rc-checks svg { width: 17px; height: 17px; fill: var(--rc-teal); color: #0b1038; stroke-width: 2.6; }
.rc-btn-white {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px;
border-radius: 12px;
background: #fff;
color: #11163d;
font-size: 14.5px; font-weight: 800;
text-decoration: none; white-space: nowrap;
transition: transform .3s, box-shadow .3s;
}
.rc-btn-white svg { width: 17px; height: 17px; transition: transform .3s; }
.rc-btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.3); }
.rc-btn-white:hover svg { transform: translateX(4px); }
/* =====================================================================
MOBILE MENU
===================================================================== */
.rc-overlay {
position: fixed; inset: 0;
z-index: 1090;
background: rgba(5, 8, 30, .55);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0; visibility: hidden;
transition: opacity .4s, visibility .4s;
}
.rc-overlay.is-open { opacity: 1; visibility: visible; }
.rc-mobile {
position: fixed;
top: 0; right: 0;
z-index: 1100;
width: min(410px, 100%);
height: 100%;
height: 100dvh;
display: flex; flex-direction: column;
background: #f5f7ff;
box-shadow: -20px 0 60px rgba(5, 10, 40, .25);
transform: translateX(105%);
transition: transform .55s var(--rc-ease);
}
.rc-mobile.is-open { transform: none; }
.rc-m-head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 16px 14px;
border-bottom: 1px solid var(--rc-line);
}
.rc-m-head .rc-logo img { height: 42px; }
.rc-m-close {
width: 44px; height: 44px;
display: grid; place-items: center;
border: 0; border-radius: 12px;
background: var(--rc-grad);
color: #fff;
cursor: pointer;
box-shadow: 0 8px 20px rgba(79, 107, 255, .38);
transition: transform .4s var(--rc-ease);
}
.rc-m-close:hover { transform: rotate(90deg); }
.rc-m-close svg { width: 22px; height: 22px; }
.rc-m-body { flex: 1; overflow-y: auto; padding: 18px 12px 24px; }
.rc-m-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rc-m-list > li { opacity: 0; transform: translateX(30px); }
.rc-mobile.is-open .rc-m-list > li { animation: rcSlideIn .55s var(--rc-ease) forwards; }
.rc-mobile.is-open .rc-m-list > li:nth-child(1) { animation-delay: .12s; }
.rc-mobile.is-open .rc-m-list > li:nth-child(2) { animation-delay: .18s; }
.rc-mobile.is-open .rc-m-list > li:nth-child(3) { animation-delay: .24s; }
.rc-mobile.is-open .rc-m-list > li:nth-child(4) { animation-delay: .30s; }
.rc-mobile.is-open .rc-m-list > li:nth-child(5) { animation-delay: .36s; }
.rc-mobile.is-open .rc-m-list > li:nth-child(6) { animation-delay: .42s; }
@keyframes rcSlideIn { to { opacity: 1; transform: none; } }
.rc-m-link {
width: 100%;
display: flex; align-items: center; gap: 14px;
padding: 7px 14px 7px 8px;
background: #fff;
border: 1px solid var(--rc-line);
border-radius: 14px;
color: #1c2247;
font: 700 15px/1.2 'Plus Jakarta Sans', sans-serif;
text-align: left; text-decoration: none;
cursor: pointer;
transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.rc-m-link:hover { border-color: #cfd6ff; transform: translateX(3px); }
.rc-m-ic {
flex: none;
width: 38px; height: 38px;
display: grid; place-items: center;
border-radius: 10px;
background: var(--rc-soft);
color: var(--rc-primary);
transition: background .3s, color .3s;
}
.rc-m-ic svg { width: 18px; height: 18px; }
.rc-m-arrow { margin-left: auto; width: 18px; height: 18px; transition: transform .4s var(--rc-ease); }
.rc-m-link.is-active,
.rc-m-services.open > .rc-m-link {
background: var(--rc-grad);
color: #fff;
border-color: transparent;
box-shadow: 0 10px 22px rgba(79, 107, 255, .35);
}
.rc-m-link.is-active .rc-m-ic,
.rc-m-services.open > .rc-m-link .rc-m-ic { background: rgba(255,255,255,.18); color: #fff; }
.rc-m-services.open > .rc-m-link .rc-m-arrow { transform: rotate(180deg); }
/* Smooth accordion (grid trick) */
.rc-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--rc-ease); }
.open > .rc-collapse { grid-template-rows: 1fr; }
.rc-collapse-inner { min-height: 0; overflow: hidden; }
.rc-m-cats { display: grid; gap: 8px; padding: 10px 0 2px; }
.rc-m-cat { background: #eef1ff; border: 1px solid #dfe4fb; border-radius: 14px; transition: border-color .3s; }
.rc-m-cat.open { border-color: #c9d1ff; }
.rc-m-cat-btn {
width: 100%;
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
background: none; border: 0;
font-family: inherit; text-align: left;
cursor: pointer;
}
.rc-m-cat-ic {
flex: none;
width: 36px; height: 36px;
display: grid; place-items: center;
border-radius: 10px;
background: var(--rc-grad);
color: #fff;
}
.rc-m-cat-ic svg { width: 18px; height: 18px; }
.rc-m-cat-txt strong { display: block; font-size: 14.5px; font-weight: 800; color: #141a3d; }
.rc-m-cat-txt small { font-size: 12px; font-weight: 600; color: var(--rc-muted); }
.rc-m-cat-chev { margin-left: auto; display: grid; color: var(--rc-primary); transition: transform .4s var(--rc-ease); }
.rc-m-cat-chev svg { width: 18px; height: 18px; }
.rc-m-cat.open .rc-m-cat-chev { transform: rotate(180deg); }
.rc-m-sublist { display: grid; gap: 4px; padding: 0 10px 10px; }
.rc-m-sublink {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px;
border-radius: 10px;
background: #fff;
color: #2b3157;
font-size: 13.5px; font-weight: 600;
text-decoration: none;
transition: color .25s, transform .3s;
}
.rc-m-sublink:hover { color: var(--rc-primary); transform: translateX(4px); }
.rc-m-sublink .ic {
flex: none;
width: 28px; height: 28px;
display: grid; place-items: center;
border-radius: 8px;
background: var(--rc-soft);
color: var(--rc-primary);
}
.rc-m-sublink .ic svg { width: 15px; height: 15px; }
.rc-m-quote {
margin-top: 20px;
display: flex; align-items: center; justify-content: space-between;
padding: 16px 18px;
border-radius: 14px;
background: var(--rc-grad);
color: #fff;
font-size: 15px; font-weight: 800;
text-decoration: none;
box-shadow: 0 12px 26px rgba(79, 107, 255, .4);
transition: transform .3s;
}
.rc-m-quote svg { width: 18px; height: 18px; transition: transform .3s; }
.rc-m-quote:hover svg { transform: translateX(4px); }
.rc-m-contact {
margin-top: 20px; padding-top: 18px;
border-top: 1px solid var(--rc-line);
display: grid; gap: 12px;
}
.rc-m-contact a {
display: flex; align-items: center; gap: 10px;
color: #5b6185;
font-size: 13.5px; font-weight: 600;
text-decoration: none;
word-break: break-word;
}
.rc-m-contact svg { width: 16px; height: 16px; color: var(--rc-primary); flex: none; }
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width: 1240px) {
.rc-link { padding: 11px 11px; font-size: 14.5px; gap: 7px; }
.rc-menu { gap: 2px; }
.rc-quote { padding: 13px 18px; }
.rc-mega-list a { font-size: 13px; }
}
@media (max-width: 1100px) {
.rc-menu { display: none; }
.rc-burger { display: flex; }
.rc-nav { height: 70px; }
}
@media (max-width: 991px) {
.rc-topbar-right { display: none; }
}
@media (max-width: 767px) {
:root { --rc-topbar-h: 0px; }
.rc-topbar { display: none; }
.rc-header-main { padding-top: 12px; padding-left: 12px; padding-right: 12px; }
.rc-nav { height: 64px; padding: 0 9px 0 14px; border-radius: 16px; }
.rc-logo img { height: 40px; }
.rc-nav-actions .rc-quote { display: none; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}
/* =====================================================================
ROYAL CARE TECHNOLOGIES — BANNER SLIDER CSS
===================================================================== */
:root {
--rb-navy: #070b2a;
--rb-grad: linear-gradient(135deg, #4f6bff 0%, #7b5cff 100%);
--rb-blue: #2d55e6;
--rb-ease: cubic-bezier(.22, 1, .36, 1);
--rb-delay: 6s; /* autoplay time (JS ke DELAY ke saath same rakho) */
}
.rc-banner {
position: relative;
overflow: hidden;
background: var(--rb-navy);
color: #fff;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Saare slides ek hi jagah stack (height tallest slide jitni) */
.rc-slides { display: grid; }
.rc-slide {
grid-area: 1 / 1;
position: relative;
display: flex;
min-height: 100vh;
min-height: max(720px, 100vh);
opacity: 0;
visibility: hidden;
transition: opacity 1s ease, visibility 1s;
}
.rc-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }
.rc-slide.is-leaving { z-index: 1; }
/* Background image + overlay */
.rc-slide-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
filter: blur(3px);
transform: scale(1.12);
}
.rc-slide.is-active .rc-slide-bg { animation: rcKen 9s ease-out forwards; }
@keyframes rcKen { from { transform: scale(1.2); } to { transform: scale(1.06); } }
.rc-slide-overlay {
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 60%, rgba(40, 90, 200, .25), transparent 55%),
linear-gradient(95deg, rgba(7, 11, 45, .96) 0%, rgba(12, 18, 72, .9) 45%, rgba(14, 22, 82, .8) 100%);
}
/* ---------- Decorative shapes ---------- */
.rc-shapes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.rc-shape-bar {
position: absolute; left: 0; top: 26%;
width: 95px; height: 180px;
background: var(--rb-blue);
opacity: .9;
animation: rcBarIn 1.2s .3s var(--rb-ease) both, rcFloatY 7s 1.5s ease-in-out infinite;
}
@keyframes rcBarIn { from { transform: translateX(-100%); } to { transform: none; } }
.rc-shape-blob {
position: absolute; right: -50px; bottom: -60px;
width: 260px; height: 280px;
border-radius: 64px;
background: var(--rb-blue);
opacity: .85;
animation: rcFloatY 8s ease-in-out infinite;
}
@keyframes rcFloatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -16px; } }
.rc-dot-deco {
position: absolute;
width: 10px; height: 10px; border-radius: 50%;
background: rgba(255,255,255,.55);
animation: rcPulse 3s ease-in-out infinite;
}
.rc-dot-deco.d1 { left: 13.5%; top: 35%; }
.rc-dot-deco.d2 { left: 32.5%; bottom: 16%; animation-delay: 1s; }
.rc-dot-deco.d3 { right: 16%; top: 25%; animation-delay: 2s; }
@keyframes rcPulse { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }
/* ---------- Layout ---------- */
.rc-slide-inner {
position: relative; z-index: 4;
width: 100%; max-width: 1240px;
margin: 0 auto;
padding: 180px 20px 110px;
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: center;
gap: 60px;
}
/* ---------- Left content ---------- */
.rc-badge {
display: inline-block;
padding: 9px 16px;
border: 1px solid rgba(255,255,255,.35);
border-radius: 40px;
background: rgba(255,255,255,.06);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
font-size: 13px; font-weight: 800;
letter-spacing: 1.2px; text-transform: uppercase;
}
.rc-title {
margin: 22px 0;
font-size: clamp(32px, 4.6vw, 47px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -1.8px;
}
.rc-text {
max-width: 570px;
margin: 0 0 34px;
color: #c5cae8;
font-size: 17px;
line-height: 1.85;
}
.rc-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.rc-btn {
position: relative;
display: inline-flex; align-items: center; gap: 10px;
padding: 15px 26px;
border-radius: 14px;
font-size: 15px; font-weight: 700;
text-decoration: none;
transition: transform .3s, box-shadow .3s, background .3s, border-color .3s;
}
.rc-btn-primary { background: var(--rb-grad); color: #fff; box-shadow: 0 12px 28px rgba(79, 107, 255, .45); }
.rc-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(79, 107, 255, .6); }
.rc-arr { display: inline-block; transition: transform .3s; }
.rc-btn-primary:hover .rc-arr { transform: translateX(5px); }
.rc-btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
.rc-btn-ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.6); }
/* ---------- Right image card ---------- */
.rc-visual { position: relative; z-index: 1; }
.rc-visual::before { /* blue shape behind card (top-right) */
content: '';
position: absolute; top: -16px; right: -16px; z-index: -1;
width: 120px; height: 130px;
border-radius: 24px;
background: var(--rb-blue);
opacity: .75;
}
.rc-img-card {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3.1;
border-radius: 30px;
border: 2px solid rgba(255,255,255,.18);
box-shadow: 0 40px 80px rgba(0, 0, 0, .45);
}
.rc-img-card img {
width: 100%; height: 100%;
display: block;
object-fit: cover;
transform: scale(1.18);
transition: transform 1.8s var(--rb-ease);
}
.rc-slide.is-active .rc-img-card img { transform: scale(1); }
.rc-img-card::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(7, 11, 45, .55), transparent 45%);
}
.rc-ring {
position: absolute; left: -22px; bottom: 6%;
width: 92px; height: 92px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,.35);
animation: rcRing 4s ease-in-out infinite;
}
@keyframes rcRing { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.12); opacity: .4; } }
.rc-caption {
position: absolute; left: 24px; bottom: 7%; z-index: 2;
padding: 14px 20px;
border-radius: 16px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.22);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.rc-caption strong { display: block; font-size: 19px; font-weight: 800; }
.rc-caption span { display: block; margin-top: 2px; font-size: 13px; color: #d6daf5; }
/* =====================================================================
SLIDE ANIMATIONS
===================================================================== */
.rc-anim { opacity: 0; }
/* Text niche se upar */
.rc-slide.is-active .rc-content .rc-anim { animation: rcUp .9s var(--rb-ease) var(--d, 0s) both; }
@keyframes rcUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
/* Heading word-by-word reveal (JS words split karta hai) */
.rc-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.rc-w > span { display: inline-block; transform: translateY(110%); }
.rc-slide.is-active .rc-w > span { animation: rcWord .9s var(--rb-ease) calc(.3s + var(--i) * .06s) both; }
@keyframes rcWord { from { transform: translateY(110%); } to { transform: none; } }
/* Image card RIGHT side se slide hokar aata hai */
.rc-slide.is-active .rc-visual { animation: rcFromRight 1.3s var(--rb-ease) .25s both; }
@keyframes rcFromRight {
from { opacity: 0; transform: translateX(160px) rotate(2deg); }
to { opacity: 1; transform: none; }
}
.rc-slide.is-active .rc-caption { animation: rcPop .8s var(--rb-ease) 1s both; }
@keyframes rcPop { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
/* Jaate hue slide ka content visible rahe aur image left ki taraf fade ho */
.rc-slide.is-leaving .rc-anim,
.rc-slide.is-leaving .rc-w > span { opacity: 1; transform: none; }
.rc-slide.is-leaving .rc-visual { opacity: 0; transform: translateX(-60px); transition: opacity .8s, transform .9s var(--rb-ease); }
/* =====================================================================
ARROWS + DOTS
===================================================================== */
.rc-arrow {
position: absolute; top: calc(50% + 40px); z-index: 6;
width: 54px; height: 54px;
margin-top: -27px;
display: grid; place-items: center;
border-radius: 50%;
border: 1px solid rgba(255,255,255,.3);
background: rgba(255,255,255,.06);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
color: #fff;
cursor: pointer;
transition: background .3s, border-color .3s, transform .3s, box-shadow .3s;
}
.rc-arrow svg { width: 22px; height: 22px; }
.rc-arrow:hover {
background: var(--rb-grad);
border-color: transparent;
transform: scale(1.08);
box-shadow: 0 10px 24px rgba(79, 107, 255, .5);
}
.rc-prev { left: 24px; }
.rc-next { right: 24px; }
.rc-dots {
position: absolute; left: 50%; bottom: 36px; z-index: 6;
display: flex; gap: 10px;
transform: translateX(-50%);
}
.rc-dot {
position: relative;
overflow: hidden;
width: 10px; height: 10px;
padding: 0; border: 0; border-radius: 20px;
background: rgba(255,255,255,.35);
cursor: pointer;
transition: width .45s var(--rb-ease), background .3s;
}
.rc-dot:hover { background: rgba(255,255,255,.6); }
.rc-dot.is-active { width: 44px; background: rgba(255,255,255,.22); }
.rc-dot.is-active::after {
content: '';
position: absolute; inset: 0;
background: #fff;
transform-origin: left;
animation: rcProgress var(--rb-delay) linear forwards;
}
.rc-banner.is-paused .rc-dot.is-active::after { animation-play-state: paused; }
@keyframes rcProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* =====================================================================
RESPONSIVE
===================================================================== */
@media (max-width: 1100px) {
.rc-slide-inner { gap: 40px; padding-top: 160px; }
.rc-prev { left: 12px; }
.rc-next { right: 12px; }
}
@media (max-width: 991px) {
.rc-slide { min-height: auto; }
.rc-slide-inner {
grid-template-columns: 1fr;
gap: 50px;
padding: 160px 24px 130px;
}
.rc-visual { max-width: 620px; width: 100%; }
.rc-arrow { top: auto; bottom: 24px; margin-top: 0; }
.rc-prev { left: 24px; }
.rc-next { right: 24px; }
.rc-dots { bottom: 46px; }
.rc-shape-blob { width: 180px; height: 200px; border-radius: 48px; }
}
@media (max-width: 767px) {
.rc-slide-inner { padding: 115px 16px 120px; gap: 40px; }
.rc-badge { font-size: 11.5px; padding: 8px 14px; }
.rc-title { letter-spacing: -1px; margin: 18px 0; }
.rc-text { font-size: 15.5px; line-height: 1.75; margin-bottom: 28px; }
.rc-btn { padding: 13px 20px; font-size: 14px; }
.rc-shape-bar { width: 46px; height: 110px; top: 18%; }
.rc-shape-blob { width: 130px; height: 150px; border-radius: 36px; right: -40px; bottom: -50px; }
.rc-visual::before { width: 80px; height: 90px; top: -10px; right: -8px; }
.rc-img-card { border-radius: 22px; }
.rc-ring { width: 64px; height: 64px; left: -12px; }
.rc-caption { left: 14px; padding: 10px 14px; border-radius: 12px; }
.rc-caption strong { font-size: 15px; }
.rc-caption span { font-size: 12px; }
.rc-arrow { width: 46px; height: 46px; bottom: 22px; }
.rc-prev { left: 16px; }
.rc-next { right: 16px; }
.rc-dots { bottom: 40px; }
}
@media (max-width: 400px) {
.rc-btns { flex-direction: column; align-items: stretch; }
.rc-btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.rc-slide *, .rc-shapes * { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}
/* =====================================================================
3D AURORA BACKGROUND + CURSOR LIGHT
- JS .rc-aurora layer daalta hai: har banner slide, light blue page, footer
- Layer position:fixed hai, section ka clip-path use clip karta hai
=> background ruka rehta hai, sirf content scroll hota hai
- Mouse par blobs alag depth se move (3D) + cursor ke peeche light/dots
- Colors har section ke apne theme jaise hi rakhe hain
===================================================================== */
/* Sections jinke andar fixed layer clip hoti hai */
.rc-banner .rc-slide,
.rc-page-blue-bg,
.rc-footer { clip-path: inset(0); }
/* Banner ki image + overlay bhi fixed (scroll par background ruka rahe) */
.rc-banner .rc-slide-bg,
.rc-banner .rc-slide-overlay { position: fixed; }
/* Footer bottom ko layer ke upar rakho */
.rc-footer .rc-footer-bottom { position: relative; z-index: 2; }
/* ---------- Layer ---------- */
.rc-aurora {
position: fixed; inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.rc-aurora > span { position: absolute; display: block; will-change: transform; }
/* Drifting glow blobs — --z = depth (zyada = paas = zyada move) */
.rc-aurora .rc-aurora-blob {
border-radius: 50%;
translate: calc(var(--rc-mx, 0) * var(--z) * 1px) calc(var(--rc-my, 0) * var(--z) * 1px);
}
.rc-aurora .rc-aurora-blob.b1 {
--z: 60;
width: 62vw; height: 62vw; max-width: 900px; max-height: 900px;
top: -22%; left: -12%;
background: radial-gradient(circle, var(--au-1), transparent 68%);
animation: rcAuroraA 34s ease-in-out infinite alternate;
}
.rc-aurora .rc-aurora-blob.b2 {
--z: 35;
width: 54vw; height: 54vw; max-width: 800px; max-height: 800px;
top: 6%; right: -16%;
background: radial-gradient(circle, var(--au-2), transparent 68%);
animation: rcAuroraB 42s ease-in-out infinite alternate;
}
.rc-aurora .rc-aurora-blob.b3 {
--z: 80;
width: 58vw; height: 58vw; max-width: 860px; max-height: 860px;
bottom: -26%; left: 14%;
background: radial-gradient(circle, var(--au-3), transparent 68%);
animation: rcAuroraC 38s ease-in-out infinite alternate;
}
.rc-aurora .rc-aurora-blob.b4 {
--z: 110;
width: 40vw; height: 40vw; max-width: 600px; max-height: 600px;
bottom: 6%; right: -6%;
background: radial-gradient(circle, var(--au-4), transparent 68%);
animation: rcAuroraA 46s ease-in-out infinite alternate-reverse;
}
/* Top light beam */
.rc-aurora .rc-aurora-beam {
top: -30%; left: 50%;
width: 90vw; height: 70%;
margin-left: -45vw;
background: radial-gradient(ellipse 50% 60% at 50% 100%, var(--au-beam), transparent 70%);
translate: calc(var(--rc-mx, 0) * 20px) 0;
}
/* Dotted grid (viewport par fixed) */
.rc-aurora .rc-aurora-dots {
inset: 0;
background-image: radial-gradient(circle, var(--au-dot) 1.2px, transparent 1.6px);
background-size: 28px 28px;
-webkit-mask-image: radial-gradient(95% 85% at 50% 35%, #000 25%, transparent 95%);
mask-image: radial-gradient(95% 85% at 50% 35%, #000 25%, transparent 95%);
}
/* Cursor ke peeche roshan dots + halo */
.rc-aurora .rc-aurora-lit,
.rc-aurora .rc-aurora-halo {
top: 0; left: 0;
display: none;
transform: translate3d(var(--rc-cx, -999px), var(--rc-cy, -999px), 0);
}
html.rc-has-cursor .rc-aurora .rc-aurora-lit,
html.rc-has-cursor .rc-aurora .rc-aurora-halo { display: block; }
.rc-aurora .rc-aurora-lit {
width: 480px; height: 480px;
margin: -240px 0 0 -240px;
background-image: radial-gradient(circle, var(--au-dot-lit) 1.6px, transparent 2.2px);
background-size: 28px 28px;
/* grid ke saath align */
background-position: calc(240px - var(--rc-cx, 0px)) calc(240px - var(--rc-cy, 0px));
-webkit-mask-image: radial-gradient(circle, #000 0, transparent 70%);
mask-image: radial-gradient(circle, #000 0, transparent 70%);
}
.rc-aurora .rc-aurora-halo {
width: 920px; height: 920px;
margin: -460px 0 0 -460px;
border-radius: 50%;
background: radial-gradient(circle, var(--au-halo), transparent 70%);
}
.rc-aurora .rc-aurora-vignette {
inset: 0;
background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, var(--au-vignette) 100%);
}
/* ---------- Section colors (site ke apne colors) ---------- */
/* Dark navy: banner + footer */
.rc-banner .rc-aurora,
.rc-footer .rc-aurora {
--au-1: rgba(79, 107, 255, .34);
--au-2: rgba(123, 92, 255, .3);
--au-3: rgba(47, 224, 192, .16);
--au-4: rgba(56, 189, 248, .14);
--au-beam: rgba(170, 190, 255, .18);
--au-dot: rgba(255, 255, 255, .16);
--au-dot-lit: rgba(140, 165, 255, .95);
--au-halo: rgba(79, 107, 255, .16);
--au-vignette: rgba(0, 0, 0, .45);
mix-blend-mode: screen;
}
.rc-footer .rc-aurora { --au-beam: transparent; }
/* Light blue page */
.rc-page-blue-bg .rc-aurora {
--au-1: rgba(79, 107, 255, .16);
--au-2: rgba(123, 92, 255, .14);
--au-3: rgba(47, 224, 192, .12);
--au-4: rgba(56, 189, 248, .14);
--au-beam: transparent;
--au-dot: rgba(45, 85, 230, .16);
--au-dot-lit: rgba(79, 107, 255, .75);
--au-halo: rgba(79, 107, 255, .12);
--au-vignette: transparent;
}
@keyframes rcAuroraA {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(8vw, 6vh, 0) scale(1.12); }
100% { transform: translate3d(-4vw, 12vh, 0) scale(.96); }
}
@keyframes rcAuroraB {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(-10vw, 8vh, 0) scale(1.1); }
100% { transform: translate3d(4vw, -6vh, 0) scale(1.04); }
}
@keyframes rcAuroraC {
0% { transform: translate3d(0, 0, 0) scale(1.05); }
50% { transform: translate3d(10vw, -8vh, 0) scale(.95); }
100% { transform: translate3d(-8vw, -4vh, 0) scale(1.1); }
}
/* ---------- Custom cursor (dot + ring) ---------- */
.rc-cursor { display: none; }
html.rc-has-cursor .rc-cursor { display: block; }
html.rc-has-cursor,
html.rc-has-cursor a,
html.rc-has-cursor button,
html.rc-has-cursor [role="button"],
html.rc-has-cursor label { cursor: none; }
.rc-cursor .rc-cursor-dot,
.rc-cursor .rc-cursor-ring {
position: fixed; top: 0; left: 0;
z-index: 100000;
border-radius: 50%;
pointer-events: none;
transform: translate3d(-200px, -200px, 0) translate(-50%, -50%);
}
.rc-cursor .rc-cursor-dot {
width: 6px; height: 6px;
background: #4f6bff;
transition: opacity .25s;
}
.rc-cursor .rc-cursor-ring {
width: 38px; height: 38px;
border: 1.5px solid #4f6bff;
transition: width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1), background-color .3s, opacity .25s;
}
.rc-cursor.is-hover .rc-cursor-ring { width: 74px; height: 74px; background-color: rgba(79, 107, 255, .18); }
.rc-cursor.is-down .rc-cursor-ring { width: 28px; height: 28px; }
.rc-cursor.is-text .rc-cursor-dot,
.rc-cursor.is-text .rc-cursor-ring,
.rc-cursor.is-out .rc-cursor-dot,
.rc-cursor.is-out .rc-cursor-ring { opacity: 0; }
@media (max-width: 768px) {
.rc-aurora .rc-aurora-blob { width: 110vw; height: 110vw; }
.rc-aurora .rc-aurora-dots { background-size: 22px 22px; }
}
@media (prefers-reduced-motion: reduce) {
.rc-aurora * { animation: none !important; }
}
/* =========================================================
STRONGER LIGHT BLUE COMMON BACKGROUND
========================================================= */
.rc-page-blue-bg {
position: relative;
width: 100%;
overflow: hidden;
isolation: isolate;
background:
radial-gradient(
circle at 7% 8%,
rgba(75, 125, 255, .24),
transparent 26%
),
radial-gradient(
circle at 94% 15%,
rgba(125, 92, 255, .18),
transparent 24%
),
radial-gradient(
circle at 10% 78%,
rgba(49, 160, 255, .16),
transparent 28%
),
radial-gradient(
circle at 90% 86%,
rgba(118, 89, 255, .13),
transparent 25%
),
linear-gradient(
180deg,
#edf4ff 0%,
#e9f1ff 45%,
#e5efff 100%
);
}
/* slight transition from dark hero */
.rc-page-blue-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 120px;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(11,20,58,.11),
transparent
);
}
/* content */
.rc-blue-content {
position: relative;
z-index: 3;
}
/* =========================================================
BACKGROUND ART
========================================================= */
.rc-blue-art {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
/* =========================================================
LARGE VISIBLE SHAPES
========================================================= */
.rc-blue-shape {
position: absolute;
display: block;
border-radius: 50%;
will-change: transform;
}
/* stronger top left shape */
.shape-1 {
width: 480px;
height: 480px;
top: -250px;
left: -210px;
background:
radial-gradient(
circle at 55% 55%,
rgba(65, 115, 255, .34) 0%,
rgba(88, 135, 255, .18) 42%,
rgba(94, 144, 255, .08) 65%,
transparent 76%
);
animation:
rcShape1 24s ease-in-out infinite;
}
/* right middle */
.shape-2 {
width: 540px;
height: 540px;
top: 650px;
right: -310px;
background:
radial-gradient(
circle,
rgba(107, 80, 255, .25) 0%,
rgba(112, 97, 255, .13) 45%,
transparent 72%
);
animation:
rcShape2 28s ease-in-out infinite;
}
/* lower left */
.shape-3 {
width: 430px;
height: 430px;
top: 1500px;
left: -230px;
background:
radial-gradient(
circle,
rgba(45, 164, 255, .22) 0%,
rgba(74, 174, 255, .10) 48%,
transparent 73%
);
animation:
rcShape3 27s ease-in-out infinite;
}
@keyframes rcShape1 {
0%,
100% {
transform:
translate3d(0,0,0)
scale(1);
}
50% {
transform:
translate3d(35px,26px,0)
scale(1.06);
}
}
@keyframes rcShape2 {
0%,
100% {
transform:
translate3d(0,0,0);
}
50% {
transform:
translate3d(-38px,25px,0);
}
}
@keyframes rcShape3 {
0%,
100% {
transform:
translate3d(0,0,0);
}
50% {
transform:
translate3d(34px,-23px,0);
}
}
/* =========================================================
ARCS
========================================================= */
.rc-blue-arc {
position: absolute;
display: block;
border-radius: 50%;
border:
1.5px solid rgba(76, 112, 255, .28);
will-change: transform;
}
.arc-1 {
width: 500px;
height: 500px;
top: -210px;
left: -245px;
box-shadow:
0 0 0 35px rgba(78, 113, 255, .055),
0 0 0 76px rgba(78, 113, 255, .028);
animation:
rcArc1 30s ease-in-out infinite;
}
.arc-2 {
width: 560px;
height: 560px;
top: 800px;
right: -355px;
box-shadow:
0 0 0 40px rgba(113, 91, 255, .05),
0 0 0 82px rgba(113, 91, 255, .025);
animation:
rcArc2 34s ease-in-out infinite;
}
.arc-3 {
width: 410px;
height: 410px;
top: 1650px;
left: -230px;
box-shadow:
0 0 0 30px rgba(50, 153, 255, .045),
0 0 0 65px rgba(50, 153, 255, .022);
animation:
rcArc3 31s ease-in-out infinite;
}
@keyframes rcArc1 {
0%,
100% {
transform:
translate3d(0,0,0);
}
50% {
transform:
translate3d(25px,18px,0);
}
}
@keyframes rcArc2 {
0%,
100% {
transform:
translate3d(0,0,0);
}
50% {
transform:
translate3d(-28px,-18px,0);
}
}
@keyframes rcArc3 {
0%,
100% {
transform:
translate3d(0,0,0);
}
50% {
transform:
translate3d(22px,-16px,0);
}
}
/* =========================================================
GLOWS
========================================================= */
.rc-blue-glow {
position: absolute;
display: block;
border-radius: 50%;
filter: blur(40px);
opacity: .75;
will-change: transform;
}
.glow-1 {
width: 300px;
height: 300px;
top: 200px;
left: 3%;
background:
rgba(77, 126, 255, .18);
animation:
rcGlow1 20s ease-in-out infinite;
}
.glow-2 {
width: 320px;
height: 320px;
top: 720px;
right: 4%;
background:
rgba(129, 91, 255, .15);
animation:
rcGlow2 24s ease-in-out infinite;
}
.glow-3 {
width: 260px;
height: 260px;
top: 1350px;
left: 17%;
background:
rgba(62, 171, 255, .13);
animation:
rcGlow3 22s ease-in-out infinite;
}
@keyframes rcGlow1 {
0%,
100% {
transform:
translate3d(0,0,0);
}
50% {
transform:
translate3d(28px,-18px,0);
}
}
@keyframes rcGlow2 {
0%,
100% {
transform:
translate3d(0,0,0);
}
50% {
transform:
translate3d(-30px,20px,0);
}
}
@keyframes rcGlow3 {
0%,
100% {
transform:
translate3d(0,0,0);
}
50% {
transform:
translate3d(20px,-15px,0);
}
}
/* =========================================================
DOT PATTERNS
========================================================= */
.rc-blue-dots {
position: absolute;
width: 100px;
height: 100px;
background-image:
radial-gradient(
rgba(69, 108, 255, .40) 1.2px,
transparent 1.2px
);
background-size:
15px 15px;
opacity:
.7;
}
.dots-1 {
top:
260px;
left:
4%;
}
.dots-2 {
top:
930px;
right:
5%;
}
/* =========================================================
BUBBLES
========================================================= */
.rc-blue-bubble {
position: absolute;
display: block;
border-radius: 50%;
background:
linear-gradient(
145deg,
rgba(255,255,255,.96),
rgba(82, 126, 255, .36)
);
border:
1px solid rgba(70, 115, 255, .22);
box-shadow:
inset 0 0 16px rgba(255,255,255,.9),
0 10px 28px rgba(66,95,190,.12);
animation:
rcBubbleMove
var(--speed,14s)
ease-in-out
infinite;
animation-delay:
var(--delay,0s);
}
.bubble-1 {
width: 20px;
height: 20px;
top: 145px;
left: 17%;
}
.bubble-2 {
width: 38px;
height: 38px;
top: 430px;
left: 7%;
--speed: 17s;
--delay: -4s;
}
.bubble-3 {
width: 16px;
height: 16px;
top: 180px;
right: 14%;
--speed: 11s;
--delay: -5s;
}
.bubble-4 {
width: 32px;
height: 32px;
top: 690px;
right: 8%;
--speed: 16s;
--delay: -3s;
}
.bubble-5 {
width: 15px;
height: 15px;
top: 1010px;
left: 21%;
--speed: 10s;
--delay: -6s;
}
.bubble-6 {
width: 26px;
height: 26px;
top: 1290px;
right: 18%;
--speed: 15s;
--delay: -4s;
}
@keyframes rcBubbleMove {
0%,
100% {
transform:
translate3d(0,0,0)
scale(1);
}
25% {
transform:
translate3d(7px,-10px,0)
scale(1.05);
}
50% {
transform:
translate3d(-7px,-22px,0)
scale(.96);
}
75% {
transform:
translate3d(8px,-9px,0)
scale(1.03);
}
}
/* =========================================================
SERVICES
========================================================= */
.rc-services-section {
position: relative;
padding:
105px 20px
115px;
}
.rc-services-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.rc-services-heading {
max-width: 760px;
margin:
0 auto
56px;
text-align: center;
}
.rc-services-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding:
8px 17px;
border-radius:
999px;
background:
rgba(255,255,255,.82);
border:
1px solid rgba(87,120,255,.22);
color:
#526bf0;
box-shadow:
0 8px 24px rgba(56,78,160,.09);
font-size:
11px;
font-weight:
800;
letter-spacing:
1.4px;
}
.rc-services-title {
margin:
18px 0
13px;
color:
#10193d;
font-size:
clamp(38px,5vw,58px);
font-weight:
800;
line-height:
1.06;
letter-spacing:
-1.8px;
}
.rc-services-title span {
background:
linear-gradient(
90deg,
#1f56f4,
#5338ea
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
.rc-services-subtitle {
max-width:
650px;
margin:
0 auto;
color:
#5f6b8d;
font-size:
15px;
line-height:
1.8;
}
.rc-title-line {
display: block;
width: 82px;
height: 4px;
margin:
17px auto 0;
border-radius:
20px;
background:
linear-gradient(
90deg,
#2db9ff,
#3f6bff,
#7545f5
);
}
/* =========================================================
GRID
========================================================= */
.rc-services-grid {
display: grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap:
20px;
}
/* =========================================================
CARDS
========================================================= */
.rc-service-card {
position: relative;
min-height:
305px;
overflow:
hidden;
padding:
29px 29px 25px;
border-radius:
26px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.94),
rgba(239,245,255,.88)
);
border:
1px solid rgba(160,185,255,.85);
box-shadow:
0 20px 50px rgba(44,69,150,.10);
transition:
transform .5s cubic-bezier(.22,1,.36,1),
box-shadow .45s ease,
border-color .35s ease;
}
.rc-service-card:hover {
transform:
translateY(-10px)
scale(1.015);
border-color:
rgba(58,95,255,.55);
box-shadow:
0 32px 70px rgba(42,67,155,.18);
}
/* hover light sweep */
.rc-service-card::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
120deg,
transparent 20%,
rgba(255,255,255,.55) 47%,
transparent 75%
);
transform:
translateX(-135%);
transition:
transform .9s ease;
}
.rc-service-card:hover::before {
transform:
translateX(135%);
}
/* number */
.rc-card-number {
position:
absolute;
right:
24px;
top:
21px;
color:
#aabef8;
font-size:
24px;
font-weight:
800;
}
/* icon */
.rc-card-icon {
position: relative;
z-index: 2;
width:
72px;
height:
72px;
margin-bottom:
28px;
display:
grid;
place-items:
center;
border-radius:
22px;
color:
#ffffff;
background:
linear-gradient(
145deg,
#1eaaff,
#386aff 58%,
#644ff5
);
box-shadow:
0 15px 32px rgba(47,87,235,.28);
transition:
transform .5s cubic-bezier(.22,1,.36,1),
box-shadow .4s ease;
}
.rc-card-icon svg {
width:
31px;
height:
31px;
}
.rc-service-card:hover
.rc-card-icon {
transform:
translateY(-5px)
rotate(-5deg)
scale(1.07);
box-shadow:
0 22px 40px rgba(47,87,235,.35);
}
.rc-icon-purple {
background:
linear-gradient(
145deg,
#536dff,
#7b42f0
);
}
.rc-icon-cyan {
background:
linear-gradient(
145deg,
#16b6ff,
#2f72ef
);
}
/* text */
.rc-service-card h3 {
position:
relative;
z-index:
2;
margin:
0 0
11px;
color:
#11193c;
font-size:
20px;
font-weight:
800;
line-height:
1.25;
}
.rc-service-card p {
position:
relative;
z-index:
2;
margin:
0;
color:
#606b8a;
font-size:
14px;
line-height:
1.7;
}
/* link */
.rc-card-link {
position:
absolute;
z-index:
2;
left:
29px;
bottom:
25px;
display:
inline-flex;
align-items:
center;
gap:
12px;
color:
#2758ec;
font-size:
14px;
font-weight:
800;
text-decoration:
none;
}
.rc-card-link span {
width:
36px;
height:
36px;
display:
grid;
place-items:
center;
border-radius:
50%;
background:
rgba(255,255,255,.9);
border:
1px solid rgba(60,95,240,.28);
box-shadow:
0 8px 18px rgba(54,78,160,.10);
transition:
transform .3s ease,
background .3s ease,
color .3s ease;
}
.rc-card-link:hover span {
transform:
translateX(5px);
background:
#3962ef;
color:
#ffffff;
}
/* corner */
.rc-card-corner {
position: absolute;
width:
160px;
height:
160px;
right:
-88px;
bottom:
-88px;
border-radius:
50%;
background:
rgba(73,119,255,.08);
transition:
transform .65s cubic-bezier(.22,1,.36,1);
}
.rc-service-card:hover
.rc-card-corner {
transform:
scale(1.4);
}
/* =========================================================
FEATURED CARD
========================================================= */
.rc-featured-card {
background:
linear-gradient(
145deg,
#2f74f6 0%,
#315ee8 48%,
#593af0 100%
);
border-color:
transparent;
box-shadow:
0 30px 70px rgba(48,74,210,.30);
}
.rc-featured-card
.rc-card-number {
color:
rgba(255,255,255,.66);
}
.rc-featured-card
.rc-card-icon {
background:
rgba(255,255,255,.14);
border:
1px solid rgba(255,255,255,.22);
box-shadow:
0 15px 30px rgba(16,31,120,.18);
}
.rc-featured-card h3 {
color:
#ffffff;
}
.rc-featured-card p {
color:
rgba(255,255,255,.85);
}
.rc-featured-card
.rc-card-link {
color:
#ffffff;
}
.rc-featured-card
.rc-card-link span {
background:
#ffffff;
color:
#315cf2;
border:
0;
}
.rc-featured-card
.rc-card-corner {
background:
rgba(255,255,255,.06);
}
.rc-feature-glow {
position:
absolute;
width:
190px;
height:
190px;
top:
-90px;
right:
-60px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.23),
transparent 68%
);
animation:
rcFeaturePulse 5s ease-in-out infinite;
}
@keyframes rcFeaturePulse {
0%,
100% {
transform:
scale(1);
}
50% {
transform:
scale(1.18);
}
}
/* =========================================================
BUTTON
========================================================= */
.rc-services-button-wrap {
margin-top:
31px;
text-align:
center;
}
.rc-services-button {
display:
inline-flex;
align-items:
center;
gap:
10px;
padding:
14px 27px;
border-radius:
999px;
background:
linear-gradient(
135deg,
#3768f3,
#7047f3
);
color:
#ffffff;
text-decoration:
none;
font-size:
14px;
font-weight:
800;
box-shadow:
0 16px 36px rgba(56,82,215,.25);
transition:
transform .3s ease,
box-shadow .3s ease;
}
.rc-services-button:hover {
transform:
translateY(-3px);
box-shadow:
0 22px 44px rgba(56,82,215,.34);
}
.rc-services-button span {
transition:
transform .3s ease;
}
.rc-services-button:hover span {
transform:
translateX(5px);
}
/* =========================================================
REVEAL ANIMATION
========================================================= */
.rc-reveal {
opacity:
0;
filter:
blur(7px);
will-change:
transform,
opacity,
filter;
}
.rc-reveal[data-anim="badge"] {
transform:
translateY(20px)
scale(.92);
}
.rc-reveal[data-anim="title"] {
transform:
translateY(42px);
}
.rc-reveal[data-anim="desc"] {
transform:
translateY(30px);
}
.rc-reveal[data-anim="line"] {
transform:
scaleX(.18);
transform-origin:
center;
}
.rc-reveal[data-anim="card"] {
transform:
translateY(72px)
scale(.955);
}
.rc-reveal[data-anim="button"] {
transform:
translateY(28px)
scale(.94);
}
.rc-reveal.rc-show {
opacity:
1;
filter:
blur(0);
transform:
translate3d(0,0,0)
scale(1);
transition:
opacity .8s cubic-bezier(.22,1,.36,1),
transform 1s cubic-bezier(.22,1,.36,1),
filter .8s ease;
}
.rc-reveal[data-anim="title"].rc-show {
transition-delay:
.08s;
}
.rc-reveal[data-anim="desc"].rc-show {
transition-delay:
.16s;
}
.rc-reveal[data-anim="line"].rc-show {
transition-delay:
.22s;
}
.rc-reveal[data-anim="card"].rc-show {
transition-delay:
var(--delay,0s);
}
.rc-reveal[data-anim="button"].rc-show {
transition-delay:
.50s;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-services-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
@media (max-width: 650px) {
.rc-services-section {
padding:
75px 15px
85px;
}
.rc-services-grid {
grid-template-columns:
1fr;
}
.rc-service-card {
min-height:
290px;
padding:
24px;
border-radius:
21px;
}
.rc-card-link {
left:
24px;
bottom:
22px;
}
.rc-card-icon {
width:
62px;
height:
62px;
border-radius:
18px;
}
.rc-card-icon svg {
width:
27px;
height:
27px;
}
.rc-services-title {
letter-spacing:
-1px;
}
.arc-1 {
width:
300px;
height:
300px;
left:
-180px;
top:
-120px;
}
.arc-2 {
width:
330px;
height:
330px;
right:
-210px;
}
.arc-3 {
width:
260px;
height:
260px;
left:
-150px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rc-blue-shape,
.rc-blue-arc,
.rc-blue-glow,
.rc-blue-bubble,
.rc-feature-glow {
animation:
none !important;
}
.rc-reveal {
opacity:
1 !important;
filter:
none !important;
transform:
none !important;
transition:
none !important;
}
}
/* =========================================================
ABOUT / SMART BUSINESS SOLUTIONS
Common page background hi use hoga
========================================================= */
.rc-about-smart {
position: relative;
overflow: hidden;
}
.rc-about-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, .95fr)
minmax(0, 1.05fr);
align-items: center;
gap: 78px;
}
/* =========================================================
LEFT IMAGE AREA
========================================================= */
.rc-about-visual {
position: relative;
min-height: 560px;
display: flex;
align-items: center;
}
/* main image */
.rc-about-main-image {
position: relative;
width: 90%;
height: 470px;
overflow: hidden;
border-radius:
34px;
border:
1px solid rgba(255,255,255,.85);
box-shadow:
0 32px 80px rgba(47,69,135,.16);
}
.rc-about-main-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 1.1s cubic-bezier(.22,1,.36,1);
}
.rc-about-main-image:hover img {
transform:
scale(1.045);
}
/* soft image light */
.rc-about-image-shine {
position: absolute;
inset: 0;
background:
linear-gradient(
135deg,
rgba(255,255,255,.18),
transparent 45%,
rgba(72,107,255,.08)
);
pointer-events: none;
}
/* =========================================================
FLOATING INFO CARD
========================================================= */
.rc-about-floating-card {
position: absolute;
right:
-8px;
bottom:
30px;
width:
280px;
padding:
19px 20px;
display: flex;
align-items: center;
gap:
14px;
border-radius:
20px;
background:
rgba(255,255,255,.88);
border:
1px solid rgba(170,191,255,.75);
box-shadow:
0 22px 55px rgba(43,64,135,.16);
-webkit-backdrop-filter:
blur(16px);
backdrop-filter:
blur(16px);
z-index:
4;
animation:
rcAboutFloatCard
5.8s ease-in-out infinite;
}
@keyframes rcAboutFloatCard {
0%,
100% {
translate:
0 0;
}
50% {
translate:
0 -8px;
}
}
.rc-about-float-icon {
flex:
none;
width:
50px;
height:
50px;
display:
grid;
place-items:
center;
border-radius:
15px;
color:
#ffffff;
background:
linear-gradient(
145deg,
#3476f7,
#6351ef
);
box-shadow:
0 12px 25px rgba(58,88,220,.22);
}
.rc-about-float-icon svg {
width:
22px;
height:
22px;
}
.rc-about-floating-card strong {
display:
block;
margin-bottom:
4px;
color:
#121b3e;
font-size:
14px;
font-weight:
800;
}
.rc-about-floating-card span {
display:
block;
color:
#6c7593;
font-size:
11.5px;
line-height:
1.5;
}
/* =========================================================
SMALL EXPERIENCE BADGE
========================================================= */
.rc-about-experience {
position: absolute;
left:
-20px;
top:
48px;
width:
112px;
height:
112px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
border-radius:
50%;
background:
linear-gradient(
145deg,
#355ff1,
#6550ef
);
color:
#ffffff;
box-shadow:
0 18px 40px rgba(57,82,210,.26);
border:
7px solid rgba(255,255,255,.72);
z-index:
3;
animation:
rcAboutBadgeFloat
6s ease-in-out infinite;
}
@keyframes rcAboutBadgeFloat {
0%,
100% {
transform:
rotate(-5deg)
translateY(0);
}
50% {
transform:
rotate(2deg)
translateY(-7px);
}
}
.rc-about-experience strong {
font-size:
17px;
font-weight:
800;
}
.rc-about-experience span {
margin-top:
2px;
font-size:
10px;
opacity:
.82;
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.rc-about-content {
position:
relative;
}
/* badge */
.rc-about-label {
display:
inline-flex;
align-items:
center;
justify-content:
center;
padding:
8px 16px;
margin-bottom:
20px;
border-radius:
999px;
background:
rgba(255,255,255,.72);
border:
1px solid rgba(105,133,255,.18);
color:
#5b70f4;
font-size:
10.5px;
font-weight:
800;
letter-spacing:
1.35px;
box-shadow:
0 8px 24px rgba(55,77,150,.07);
}
/* title */
.rc-about-title {
max-width:
690px;
margin:
0 0
23px;
color:
#10183b;
font-size:
clamp(
40px,
4.3vw,
43px
);
font-weight:
800;
line-height:
1.04;
letter-spacing:
-2.6px;
}
.rc-about-title span {
display:
block;
background:
linear-gradient(
90deg,
#1e58ed,
#543ce9
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
/* description */
.rc-about-description {
max-width:
650px;
margin:
0 0
34px;
color:
#626e8f;
font-size:
15px;
line-height:
1.9;
}
/* =========================================================
FEATURES
========================================================= */
.rc-about-features {
display:
grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:
16px;
}
.rc-about-feature {
position:
relative;
min-height:
148px;
padding:
22px;
display:
flex;
align-items:
flex-start;
gap:
14px;
overflow:
hidden;
border-radius:
22px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.91),
rgba(239,245,255,.82)
);
border:
1px solid rgba(167,189,255,.72);
box-shadow:
0 15px 40px rgba(45,68,140,.07);
transition:
transform .45s cubic-bezier(.22,1,.36,1),
border-color .35s ease,
box-shadow .4s ease;
}
.rc-about-feature::after {
content: '';
position:
absolute;
width:
120px;
height:
120px;
right:
-70px;
bottom:
-70px;
border-radius:
50%;
background:
rgba(73,112,255,.07);
transition:
transform .6s cubic-bezier(.22,1,.36,1);
}
.rc-about-feature:hover {
transform:
translateY(-6px);
border-color:
rgba(73,105,255,.42);
box-shadow:
0 23px 48px rgba(45,68,145,.12);
}
.rc-about-feature:hover::after {
transform:
scale(1.45);
}
/* feature icon */
.rc-about-feature-icon {
flex:
none;
width:
48px;
height:
48px;
display:
grid;
place-items:
center;
border-radius:
14px;
color:
#ffffff;
background:
linear-gradient(
145deg,
#3880f8,
#6152ef
);
box-shadow:
0 11px 24px rgba(62,89,220,.20);
transition:
transform .4s cubic-bezier(.22,1,.36,1);
}
.rc-about-feature:hover
.rc-about-feature-icon {
transform:
rotate(-6deg)
scale(1.07);
}
.rc-about-feature-icon svg {
width:
21px;
height:
21px;
}
.rc-about-feature h3 {
margin:
2px 0
7px;
color:
#141d3e;
font-size:
15px;
font-weight:
800;
}
.rc-about-feature p {
margin:
0;
color:
#697390;
font-size:
12.5px;
line-height:
1.65;
}
/* =========================================================
BUTTON
========================================================= */
.rc-about-cta-wrap {
margin-top:
26px;
}
.rc-about-btn {
display:
inline-flex;
align-items:
center;
gap:
10px;
padding:
14px 25px;
border-radius:
14px;
color:
#ffffff;
background:
linear-gradient(
135deg,
#376bf4,
#704ef3
);
text-decoration:
none;
font-size:
14px;
font-weight:
800;
box-shadow:
0 15px 32px rgba(57,82,215,.23);
transition:
transform .3s ease,
box-shadow .3s ease;
}
.rc-about-btn:hover {
transform:
translateY(-3px);
box-shadow:
0 21px 40px rgba(57,82,215,.31);
}
.rc-about-btn span {
transition:
transform .3s ease;
}
.rc-about-btn:hover span {
transform:
translateX(5px);
}
/* =========================================================
NEW ANIMATIONS FOR THIS SECTION
SAME JS handles these
========================================================= */
.rc-scroll-reveal {
opacity:
0;
filter:
blur(8px);
will-change:
transform,
opacity,
filter;
}
/* left image cinematic reveal */
.rc-scroll-reveal[data-reveal-effect="image-left"] {
transform:
translate3d(-90px,45px,0)
rotateY(7deg)
scale(.94);
transform-origin:
left center;
}
/* floating card */
.rc-scroll-reveal[data-reveal-effect="float-card"] {
transform:
translate3d(45px,50px,0)
scale(.88);
}
/* badge */
.rc-scroll-reveal[data-reveal-effect="badge"] {
transform:
translateY(18px)
scale(.92);
}
/* title from right */
.rc-scroll-reveal[data-reveal-effect="title-right"] {
transform:
translate3d(75px,25px,0);
}
/* text */
.rc-scroll-reveal[data-reveal-effect="text"] {
transform:
translateY(34px);
}
/* feature 1 */
.rc-scroll-reveal[data-reveal-effect="feature-left"] {
transform:
translate3d(-45px,42px,0)
scale(.96);
}
/* feature 2 */
.rc-scroll-reveal[data-reveal-effect="feature-right"] {
transform:
translate3d(45px,42px,0)
scale(.96);
}
/* scale */
.rc-scroll-reveal[data-reveal-effect="scale"] {
transform:
scale(.75)
rotate(-8deg);
}
/* button */
.rc-scroll-reveal[data-reveal-effect="button"] {
transform:
translateY(30px)
scale(.92);
}
/* Visible */
/* .rc-scroll-reveal.rc-visible {
opacity:
1;
filter:
blur(0);
transform:
translate3d(0,0,0)
rotate(0)
rotateY(0)
scale(1);
transition:
opacity .85s cubic-bezier(.22,1,.36,1),
transform 1.1s cubic-bezier(.22,1,.36,1),
filter .85s ease;
transition-delay:
var(--reveal-delay,0s);
} */
/* heading timings */
.rc-about-label.rc-visible {
transition-delay:
.04s;
}
.rc-about-title.rc-visible {
transition-delay:
.11s;
}
.rc-about-description.rc-visible {
transition-delay:
.20s;
}
.rc-about-cta-wrap.rc-visible {
transition-delay:
.24s;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-about-container {
grid-template-columns:
1fr;
gap:
65px;
}
.rc-about-visual {
max-width:
650px;
width:
100%;
min-height:
520px;
}
.rc-about-main-image {
width:
88%;
}
.rc-about-content {
max-width:
760px;
}
}
@media (max-width: 650px) {
.rc-about-smart {
padding:
80px 15px
90px;
}
.rc-about-visual {
min-height:
440px;
}
.rc-about-main-image {
width:
100%;
height:
390px;
border-radius:
25px;
}
.rc-about-floating-card {
right:
10px;
bottom:
-10px;
width:
calc(100% - 45px);
}
.rc-about-experience {
width:
90px;
height:
90px;
left:
-5px;
top:
-25px;
}
.rc-about-features {
grid-template-columns:
1fr;
}
.rc-about-title {
letter-spacing:
-1.5px;
}
}
/* =========================================================
STATS SECTION
Common background wrapper ke andar use karo
========================================================= */
.rc-stats-section {
position: relative;
padding:
25px 20px
105px;
}
.rc-stats-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
OUTER DARK PANEL
========================================================= */
.rc-stats-box {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 16px;
padding:
28px;
border-radius:
32px;
background:
linear-gradient(
110deg,
#111a4a 0%,
#19245d 42%,
#30216f 100%
);
border:
1px solid rgba(255,255,255,.08);
box-shadow:
0 28px 65px rgba(32, 43, 113, .18);
}
/* subtle glow */
.rc-stats-box::before {
content: '';
position: absolute;
width: 280px;
height: 280px;
left: 18%;
top: -190px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.10),
transparent 70%
);
pointer-events: none;
}
/* soft purple glow */
.rc-stats-box::after {
content: '';
position: absolute;
width: 260px;
height: 260px;
right: -100px;
bottom: -160px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(124, 83, 255, .24),
transparent 70%
);
pointer-events: none;
}
/* =========================================================
STAT CARD
========================================================= */
.rc-stat-card {
position: relative;
z-index: 2;
min-height: 105px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding:
20px 14px;
text-align: center;
border-radius:
24px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.13),
rgba(255,255,255,.07)
);
border:
1px solid rgba(255,255,255,.10);
-webkit-backdrop-filter:
blur(10px);
backdrop-filter:
blur(10px);
transition:
transform .45s cubic-bezier(.22,1,.36,1),
background .35s ease,
border-color .35s ease,
box-shadow .4s ease;
}
.rc-stat-card:hover {
transform:
translateY(-7px);
background:
linear-gradient(
145deg,
rgba(255,255,255,.18),
rgba(255,255,255,.09)
);
border-color:
rgba(255,255,255,.18);
box-shadow:
0 18px 35px rgba(5, 10, 40, .18);
}
/* numbers */
.rc-stat-card strong {
display: block;
color: #ffffff;
font-size:
clamp(28px, 3vw, 42px);
font-weight: 800;
line-height: 1;
letter-spacing: -1.2px;
}
/* label */
.rc-stat-card > span {
display: block;
margin-top: 10px;
color:
rgba(225, 230, 255, .72);
font-size: 12px;
font-weight: 600;
}
/* =========================================================
REVEAL ANIMATION
========================================================= */
.rc-scroll-reveal[data-reveal-effect="stats-wrap"] {
opacity: 0;
filter: blur(8px);
transform:
translateY(55px)
scale(.97);
transition:
opacity .85s cubic-bezier(.22,1,.36,1),
transform 1s cubic-bezier(.22,1,.36,1),
filter .85s ease;
}
.rc-scroll-reveal[data-reveal-effect="stat-card"] {
opacity: 0;
filter: blur(6px);
transform:
translateY(34px)
scale(.94);
transition:
opacity .7s cubic-bezier(.22,1,.36,1),
transform .85s cubic-bezier(.22,1,.36,1),
filter .7s ease;
transition-delay:
var(--reveal-delay,0s);
}
.rc-scroll-reveal.rc-visible {
opacity: 1 !important;
filter: blur(0) !important;
transform:
translate3d(0,0,0)
scale(1) !important;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-stats-box {
grid-template-columns:
repeat(2, minmax(0,1fr));
}
}
@media (max-width: 650px) {
.rc-stats-section {
padding:
15px 15px
75px;
}
.rc-stats-box {
grid-template-columns:
1fr;
padding:
18px;
border-radius:
24px;
}
.rc-stat-card {
min-height:
95px;
border-radius:
18px;
}
}
/* =========================================================
OFFERINGS SECTION
========================================================= */
.rc-offerings-section {
position: relative;
padding:
35px 20px
110px;
}
.rc-offerings-wrap {
width: 100%;
max-width: 1220px;
margin: 0 auto;
}
/* =========================================================
DARK PANEL
========================================================= */
.rc-offerings-panel {
position: relative;
overflow: hidden;
padding:
48px 42px
38px;
border-radius:
34px;
background:
radial-gradient(
circle at 92% 12%,
rgba(70,102,255,.18),
transparent 28%
),
radial-gradient(
circle at 5% 92%,
rgba(42,185,255,.16),
transparent 26%
),
linear-gradient(
120deg,
#111946 0%,
#17235f 48%,
#322474 100%
);
border:
1px solid rgba(255,255,255,.07);
box-shadow:
0 30px 70px
rgba(24,34,95,.20);
color:
#ffffff;
}
/* Bottom blue glow */
.rc-offerings-panel::before {
content: '';
position: absolute;
width: 250px;
height: 250px;
left: -115px;
bottom: -130px;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(56,188,255,.26),
rgba(56,188,255,.08) 52%,
transparent 72%
);
pointer-events:
none;
}
/* Top highlight */
.rc-offerings-panel::after {
content: '';
position: absolute;
width: 360px;
height: 220px;
top: -150px;
left: 34%;
border-radius: 50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.10),
transparent 70%
);
pointer-events:
none;
}
/* =========================================================
HEADING
========================================================= */
.rc-offerings-head {
position: relative;
z-index: 2;
max-width: 860px;
margin:
0 auto
42px;
text-align:
center;
}
.rc-offerings-label {
display:
inline-flex;
align-items:
center;
justify-content:
center;
padding:
8px 16px;
border-radius:
999px;
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.13);
color:
#dbe1ff;
font-size:
11px;
font-weight:
800;
letter-spacing:
1.4px;
}
.rc-offerings-title {
margin:
18px 0
12px;
color:
#ffffff;
font-size:
clamp(
38px,
5vw,
58px
);
line-height:
1.05;
font-weight:
800;
letter-spacing:
-2px;
}
.rc-offerings-title span {
display:
block;
color:
#dce3ff;
}
.rc-offerings-line {
display:
block;
width:
92px;
height:
4px;
margin:
15px auto
22px;
border-radius:
20px;
background:
linear-gradient(
90deg,
#4b78ff,
#7355ff,
#32ded0
);
}
.rc-offerings-desc {
max-width:
720px;
margin:
0 auto;
color:
rgba(226,232,255,.74);
font-size:
14px;
line-height:
1.75;
}
.rc-offerings-small-line {
display:
block;
width:
70px;
height:
3px;
margin:
20px auto 0;
border-radius:
20px;
background:
linear-gradient(
90deg,
#25d9e7,
#4f72ff
);
}
/* =========================================================
GRID
========================================================= */
.rc-offerings-grid {
position: relative;
z-index: 2;
display:
grid;
grid-template-columns:
repeat(
6,
minmax(0,1fr)
);
gap:
14px;
}
/* =========================================================
CARD
========================================================= */
.rc-offering-card {
position: relative;
min-height:
118px;
display:
flex;
flex-direction:
column;
align-items:
center;
justify-content:
center;
gap:
11px;
padding:
18px 12px;
border-radius:
22px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.055)
);
border:
1px solid
rgba(255,255,255,.11);
-webkit-backdrop-filter:
blur(10px);
backdrop-filter:
blur(10px);
box-shadow:
inset 0 1px 0
rgba(255,255,255,.05);
transition:
transform .42s
cubic-bezier(.22,1,.36,1),
background .35s ease,
border-color .35s ease,
box-shadow .4s ease;
}
/* shine */
.rc-offering-card::before {
content: '';
position: absolute;
inset: 0;
border-radius:
inherit;
background:
linear-gradient(
120deg,
transparent 20%,
rgba(255,255,255,.12) 48%,
transparent 76%
);
transform:
translateX(-130%);
transition:
transform .8s ease;
pointer-events:
none;
}
.rc-offering-card:hover::before {
transform:
translateX(130%);
}
.rc-offering-card:hover {
transform:
translateY(-7px)
scale(1.025);
background:
linear-gradient(
145deg,
rgba(255,255,255,.18),
rgba(255,255,255,.08)
);
border-color:
rgba(255,255,255,.19);
box-shadow:
0 18px 38px
rgba(5,10,40,.24);
}
/* =========================================================
NATURAL ICON WRAPPER
========================================================= */
.rc-natural-icon {
position: relative;
width:
52px;
height:
52px;
display:
grid;
place-items:
center;
border-radius:
16px;
transition:
transform .42s
cubic-bezier(.22,1,.36,1),
box-shadow .4s ease;
}
.rc-natural-icon svg {
width:
30px;
height:
30px;
}
/* =========================================================
WEBSITE
Natural internet blue
========================================================= */
.rc-website-icon {
color:
#ffffff;
background:
linear-gradient(
145deg,
#18a8ff,
#2775f5
);
box-shadow:
0 12px 26px
rgba(30,132,255,.27);
}
/* =========================================================
ANDROID
Android green
========================================================= */
.rc-android-icon {
color:
#3DDC84;
background:
rgba(61,220,132,.10);
border:
1px solid
rgba(61,220,132,.22);
box-shadow:
0 12px 27px
rgba(61,220,132,.12);
}
/* =========================================================
iOS
Apple-style silver / white
========================================================= */
.rc-ios-icon {
color:
#ffffff;
background:
linear-gradient(
145deg,
rgba(255,255,255,.18),
rgba(202,208,225,.08)
);
border:
1px solid
rgba(255,255,255,.18);
box-shadow:
0 12px 27px
rgba(0,0,0,.10);
}
/* =========================================================
WATCH
Graphite watch feel
========================================================= */
.rc-watch-icon {
color:
#ffffff;
background:
linear-gradient(
145deg,
#343c55,
#1f2845
);
border:
1px solid
rgba(255,255,255,.10);
box-shadow:
0 12px 26px
rgba(3,8,25,.22);
}
/* =========================================================
TV
Natural display blue
========================================================= */
.rc-tv-icon {
color:
#ffffff;
background:
linear-gradient(
145deg,
#168eff,
#275be7
);
box-shadow:
0 12px 26px
rgba(35,102,235,.24);
}
/* =========================================================
IoT
Technology teal / cyan
========================================================= */
.rc-iot-icon {
color:
#ffffff;
background:
linear-gradient(
145deg,
#11c9c1,
#0e8fa9
);
box-shadow:
0 12px 26px
rgba(15,181,180,.23);
}
/* icon hover */
.rc-offering-card:hover
.rc-natural-icon {
transform:
translateY(-4px)
scale(1.08);
box-shadow:
0 17px 32px
rgba(0,0,0,.18);
}
/* =========================================================
LABEL
========================================================= */
.rc-offering-card > span {
color:
rgba(239,242,255,.88);
font-size:
12px;
font-weight:
600;
}
/* =========================================================
CONTINUOUS FLOAT ANIMATION
========================================================= */
.rc-offering-card.rc-visible {
animation:
rcOfferFloatA
5.8s
ease-in-out
infinite;
}
.rc-offering-card.rc-visible.rc-float-2 {
animation-name:
rcOfferFloatB;
animation-duration:
6.4s;
animation-delay:
-.8s;
}
.rc-offering-card.rc-visible.rc-float-3 {
animation-name:
rcOfferFloatC;
animation-duration:
5.6s;
animation-delay:
-1.6s;
}
.rc-offering-card.rc-visible.rc-float-4 {
animation-name:
rcOfferFloatB;
animation-duration:
6.8s;
animation-delay:
-2.2s;
}
.rc-offering-card.rc-visible.rc-float-5 {
animation-name:
rcOfferFloatC;
animation-duration:
6.1s;
animation-delay:
-.6s;
}
.rc-offering-card.rc-visible.rc-float-6 {
animation-name:
rcOfferFloatA;
animation-duration:
6.6s;
animation-delay:
-1.8s;
}
@keyframes rcOfferFloatA {
0%,
100% {
translate:
0 0;
}
50% {
translate:
0 -7px;
}
}
@keyframes rcOfferFloatB {
0%,
100% {
translate:
0 -2px;
}
50% {
translate:
0 6px;
}
}
@keyframes rcOfferFloatC {
0%,
100% {
translate:
0 2px;
}
50% {
translate:
0 -6px;
}
}
/* =========================================================
SCROLL REVEAL
========================================================= */
.rc-scroll-reveal[data-reveal-effect="badge"] {
opacity:
0;
filter:
blur(6px);
transform:
translateY(18px)
scale(.92);
}
.rc-scroll-reveal[data-reveal-effect="title-up"] {
opacity:
0;
filter:
blur(8px);
transform:
translateY(45px)
scale(.98);
}
.rc-scroll-reveal[data-reveal-effect="text"] {
opacity:
0;
filter:
blur(6px);
transform:
translateY(30px);
}
.rc-scroll-reveal[data-reveal-effect="line"] {
opacity:
0;
transform:
scaleX(.20);
transform-origin:
center;
}
.rc-scroll-reveal[data-reveal-effect="line-small"] {
opacity:
0;
transform:
scaleX(.30);
transform-origin:
center;
}
.rc-scroll-reveal[data-reveal-effect="offer-card"] {
opacity:
0;
filter:
blur(6px);
transform:
translateY(45px)
scale(.94);
transition-delay:
var(--reveal-delay,0s);
}
.rc-scroll-reveal.rc-visible {
opacity:
1 !important;
filter:
blur(0) !important;
transform:
translate3d(0,0,0)
scale(1) !important;
transition:
opacity .8s
cubic-bezier(.22,1,.36,1),
transform .95s
cubic-bezier(.22,1,.36,1),
filter .8s ease;
transition-delay:
var(--reveal-delay,0s);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.rc-offerings-grid {
grid-template-columns:
repeat(3,minmax(0,1fr));
}
}
@media (max-width: 700px) {
.rc-offerings-section {
padding:
25px 15px
85px;
}
.rc-offerings-panel {
padding:
38px 18px
28px;
border-radius:
25px;
}
.rc-offerings-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
gap:
12px;
}
.rc-offering-card {
min-height:
106px;
border-radius:
18px;
}
.rc-offerings-title {
letter-spacing:
-1.2px;
}
.rc-natural-icon {
width:
47px;
height:
47px;
border-radius:
14px;
}
.rc-natural-icon svg {
width:
27px;
height:
27px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rc-offering-card.rc-visible {
animation:
none !important;
}
}
/* =========================================================
DEVELOPMENT PROCESS SECTION
========================================================= */
.rc-process-section {
position: relative;
padding: 45px 20px 115px;
}
.rc-process-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.rc-process-head {
max-width: 780px;
margin: 0 auto 58px;
text-align: center;
}
.rc-process-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255,255,255,.78);
border: 1px solid rgba(91,122,255,.19);
color: #5a70f3;
box-shadow: 0 8px 22px rgba(56,78,155,.07);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rc-process-title {
margin: 18px 0 13px;
color: #10193d;
font-size: clamp(38px, 5vw, 56px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -2px;
}
.rc-process-title span {
background: linear-gradient(
90deg,
#255bf4,
#5741ed
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rc-process-desc {
max-width: 690px;
margin: 0 auto;
color: #66718f;
font-size: 14.5px;
line-height: 1.8;
}
.rc-process-line {
display: block;
width: 78px;
height: 4px;
margin: 18px auto 0;
border-radius: 20px;
background: linear-gradient(
90deg,
#32b9ff,
#426cff,
#764cf4
);
}
/* =========================================================
GRID
========================================================= */
.rc-process-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0, 1fr));
gap: 20px;
}
/* =========================================================
CARD
========================================================= */
.rc-process-card {
position: relative;
min-height: 350px;
overflow: hidden;
padding: 24px 24px 30px;
border-radius: 28px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.95),
rgba(241,246,255,.88)
);
border:
1px solid rgba(177,198,255,.82);
box-shadow:
0 20px 50px
rgba(43,66,145,.09);
text-align: center;
transition:
transform .5s cubic-bezier(.22,1,.36,1),
border-color .35s ease,
box-shadow .45s ease;
}
.rc-process-card:hover {
transform: translateY(-10px);
border-color:
rgba(76,107,255,.48);
box-shadow:
0 30px 68px
rgba(42,66,155,.15);
}
/* middle card subtle emphasis */
.rc-process-featured {
transform: translateY(-10px);
box-shadow:
0 26px 60px
rgba(48,75,175,.13);
}
/* =========================================================
NUMBER
========================================================= */
.rc-process-number {
position: absolute;
right: 22px;
top: 18px;
color: #b4c6f8;
font-size: 24px;
font-weight: 800;
}
/* =========================================================
IMAGE
========================================================= */
.rc-process-image-wrap {
position: relative;
width: 145px;
height: 145px;
margin: 4px auto 26px;
overflow: hidden;
border-radius: 30px;
box-shadow:
0 15px 32px
rgba(42,69,160,.14);
transition:
transform .55s cubic-bezier(.22,1,.36,1),
box-shadow .45s ease;
}
.rc-process-image-wrap img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .9s cubic-bezier(.22,1,.36,1);
}
.rc-process-card:hover
.rc-process-image-wrap {
transform:
translateY(-5px)
scale(1.02);
box-shadow:
0 22px 42px
rgba(42,69,160,.20);
}
.rc-process-card:hover
.rc-process-image-wrap img {
transform: scale(1.08);
}
.rc-process-image-glow {
position: absolute;
inset: 0;
background:
linear-gradient(
145deg,
rgba(67,102,255,.08),
transparent 50%
);
pointer-events: none;
}
/* =========================================================
TEXT
========================================================= */
.rc-process-card h3 {
margin: 0 0 12px;
color: #141c3e;
font-size: 19px;
font-weight: 800;
line-height: 1.3;
}
.rc-process-card p {
max-width: 320px;
margin: 0 auto;
color: #697391;
font-size: 13.5px;
line-height: 1.72;
}
/* =========================================================
PROCESS-SPECIFIC REVEAL
SAME COMMON JS
========================================================= */
.rc-scroll-reveal[data-reveal-effect="process-left"] {
opacity: 0;
filter: blur(7px);
transform:
translate3d(-70px,45px,0)
scale(.95)
rotate(-2deg);
}
.rc-scroll-reveal[data-reveal-effect="process-up"] {
opacity: 0;
filter: blur(7px);
transform:
translateY(75px)
scale(.93);
}
.rc-scroll-reveal[data-reveal-effect="process-right"] {
opacity: 0;
filter: blur(7px);
transform:
translate3d(70px,45px,0)
scale(.95)
rotate(2deg);
}
.rc-scroll-reveal.rc-visible {
opacity: 1 !important;
filter: blur(0) !important;
transform:
translate3d(0,0,0)
scale(1)
rotate(0) !important;
transition:
opacity .8s cubic-bezier(.22,1,.36,1),
transform 1s cubic-bezier(.22,1,.36,1),
filter .8s ease;
transition-delay:
var(--reveal-delay,0s);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-process-grid {
grid-template-columns: 1fr;
}
.rc-process-card {
max-width: 650px;
width: 100%;
margin: 0 auto;
}
.rc-process-featured {
transform: none;
}
}
@media (max-width: 650px) {
.rc-process-section {
padding: 35px 15px 85px;
}
.rc-process-head {
margin-bottom: 40px;
}
.rc-process-card {
min-height: auto;
padding: 22px 20px 27px;
border-radius: 22px;
}
.rc-process-image-wrap {
width: 120px;
height: 120px;
border-radius: 24px;
}
.rc-process-title {
letter-spacing: -1.2px;
}
}
/* =========================================================
TESTIMONIAL SECTION
========================================================= */
.rc-testimonial-section {
position: relative;
padding:
45px 20px
115px;
}
.rc-testimonial-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns:
355px minmax(0,1fr);
gap:
28px;
align-items:
stretch;
}
/* =========================================================
LEFT PANEL
========================================================= */
.rc-testimonial-intro {
position: relative;
overflow: hidden;
min-height:
430px;
padding:
38px 32px
30px;
border-radius:
30px;
display: flex;
flex-direction:
column;
justify-content:
space-between;
background:
radial-gradient(
circle at 10% 100%,
rgba(54,174,255,.20),
transparent 32%
),
linear-gradient(
145deg,
#101842 0%,
#18235d 55%,
#29206b 100%
);
border:
1px solid
rgba(255,255,255,.06);
box-shadow:
0 25px 60px
rgba(28,38,110,.18);
color:
#ffffff;
}
/* subtle decorative circle */
.rc-testimonial-intro::after {
content: '';
position: absolute;
width:
210px;
height:
210px;
border-radius:
50%;
right:
-110px;
bottom:
-100px;
border:
1px solid
rgba(255,255,255,.08);
box-shadow:
0 0 0 25px
rgba(255,255,255,.025);
pointer-events:
none;
}
.rc-testimonial-intro-top {
position:
relative;
z-index:
2;
}
.rc-testimonial-label {
display:
inline-flex;
padding:
8px 14px;
margin-bottom:
20px;
border-radius:
999px;
background:
rgba(255,255,255,.08);
border:
1px solid
rgba(255,255,255,.12);
color:
#d8deff;
font-size:
10.5px;
font-weight:
800;
letter-spacing:
1.5px;
}
.rc-testimonial-intro h2 {
margin: 0 0
20px;
color: #ffffff;
font-size: clamp(
29px,
3.8vw,
29px
);
line-height: 1.03;
font-weight: 800;
letter-spacing: 1px;
}
.rc-testimonial-intro h2 span {
display:
block;
color:
#dfe5ff;
}
.rc-testimonial-intro p {
max-width:
290px;
margin:
0;
color:
rgba(227,232,255,.74);
font-size:
14px;
line-height:
1.8;
}
/* =========================================================
LEFT BOTTOM
========================================================= */
.rc-testimonial-intro-bottom {
position:
relative;
z-index:
2;
display:
flex;
align-items:
flex-end;
justify-content:
space-between;
gap:
16px;
}
.rc-testimonial-count strong {
display:
block;
margin-bottom:
5px;
color:
#ffffff;
font-size:
25px;
font-weight:
800;
}
.rc-testimonial-count span {
color:
rgba(225,230,255,.62);
font-size:
11px;
}
/* =========================================================
NAV BUTTONS
========================================================= */
.rc-testimonial-nav {
display:
flex;
gap:
9px;
}
.rc-tm-btn {
width:
47px;
height:
47px;
display:
grid;
place-items:
center;
border-radius:
50%;
border:
1px solid
rgba(255,255,255,.16);
background:
rgba(255,255,255,.07);
color:
#ffffff;
font-size:
18px;
cursor:
pointer;
transition:
transform .3s ease,
background .3s ease,
border-color .3s ease;
}
.rc-tm-btn:hover {
transform:
translateY(-3px);
background:
rgba(255,255,255,.15);
border-color:
rgba(255,255,255,.24);
}
.rc-tm-btn:active {
transform:
scale(.94);
}
/* =========================================================
RIGHT SLIDER WRAP
========================================================= */
.rc-testimonial-slider-wrap {
min-width:
0;
position:
relative;
padding:
12px 0 0;
}
/* top text */
.rc-testimonial-mini-head {
display:
flex;
align-items:
flex-end;
justify-content:
space-between;
gap:
20px;
margin:
0 0
20px;
padding:
0 4px;
}
.rc-testimonial-mini-head > span {
color:
#4265ef;
font-size:
11px;
font-weight:
800;
letter-spacing:
1.4px;
}
.rc-testimonial-mini-head p {
max-width:
420px;
margin:
0;
color:
#737d99;
font-size:
12.5px;
line-height:
1.6;
text-align:
right;
}
/* =========================================================
SLIDER
========================================================= */
.rc-testimonial-slider {
width:
100%;
overflow:
hidden;
padding:
4px 2px
12px;
}
.rc-testimonial-track {
display:
flex;
gap:
18px;
transition:
transform .68s
cubic-bezier(.22,1,.36,1);
will-change:
transform;
}
/* =========================================================
REVIEW CARD
========================================================= */
.rc-testimonial-card {
position:
relative;
flex:
0 0
calc((100% - 18px) / 2);
min-height:
335px;
padding:
28px 25px
24px;
display:
flex;
flex-direction:
column;
border-radius:
26px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.96),
rgba(239,245,255,.90)
);
border:
1px solid
rgba(168,192,255,.78);
box-shadow:
0 17px 42px
rgba(42,65,145,.08);
transition:
transform .45s
cubic-bezier(.22,1,.36,1),
border-color .35s ease,
box-shadow .4s ease;
}
.rc-testimonial-card:hover {
transform:
translateY(-7px);
border-color:
rgba(77,108,255,.42);
box-shadow:
0 26px 55px
rgba(43,66,150,.14);
}
/* subtle accent line */
.rc-testimonial-card::after {
content: '';
position:
absolute;
left:
26px;
right:
26px;
top:
0;
height:
3px;
border-radius:
0 0 10px 10px;
background:
linear-gradient(
90deg,
#35b8ff,
#456cff,
#754df4
);
opacity:
.7;
}
/* =========================================================
CARD TOP
========================================================= */
.rc-testimonial-card-top {
display:
grid;
grid-template-columns:
56px 1fr auto;
gap:
13px;
align-items:
center;
margin-bottom:
23px;
}
.rc-testimonial-avatar {
width:
56px;
height:
56px;
display:
grid;
place-items:
center;
border-radius:
50%;
color:
#ffffff;
background:
linear-gradient(
145deg,
#2fa6ff,
#4569f4 58%,
#6c4ff1
);
box-shadow:
0 12px 25px
rgba(57,89,225,.22);
font-size:
15px;
font-weight:
800;
}
.rc-testimonial-person h3 {
margin:
0 0
4px;
color:
#131b3d;
font-size:
17px;
font-weight:
800;
line-height:
1.25;
}
.rc-testimonial-person span {
display:
block;
color:
#697492;
font-size:
11.5px;
line-height:
1.4;
}
.rc-testimonial-person small {
display:
block;
margin-top:
3px;
color:
#9aa3ba;
font-size:
10.5px;
}
/* quote */
.rc-testimonial-quote {
color:
#5577f5;
font-size:
44px;
line-height:
.7;
font-family:
Georgia,
serif;
}
/* =========================================================
REVIEW TEXT
========================================================= */
.rc-testimonial-review {
margin:
0 0
25px;
color:
#626d8b;
font-size:
13.5px;
line-height:
1.85;
flex:
1;
}
/* =========================================================
CARD FOOTER
========================================================= */
.rc-testimonial-footer {
display:
flex;
align-items:
center;
justify-content:
space-between;
gap:
12px;
margin-top:
auto;
}
/* NATURAL STAR COLOR */
.rc-testimonial-stars {
display:
flex;
gap:
2px;
color:
#f5b301;
font-size:
18px;
line-height:
1;
text-shadow:
0 3px 8px
rgba(245,179,1,.16);
}
.rc-verified-review {
display:
inline-flex;
align-items:
center;
padding:
5px 9px;
border-radius:
999px;
background:
#eaf8f1;
color:
#23935d;
font-size:
9.5px;
font-weight:
700;
}
/* =========================================================
DOTS
========================================================= */
.rc-testimonial-dots {
display:
flex;
align-items:
center;
justify-content:
center;
gap:
8px;
margin-top:
18px;
}
.rc-testimonial-dot {
width:
9px;
height:
9px;
padding:
0;
border:
0;
border-radius:
50%;
background:
#cbd3e9;
cursor:
pointer;
transition:
width .3s ease,
background .3s ease,
border-radius .3s ease,
transform .3s ease;
}
.rc-testimonial-dot:hover {
transform:
scale(1.15);
}
.rc-testimonial-dot.active {
width:
27px;
border-radius:
999px;
background:
#4c70f4;
}
/* =========================================================
STATUS
========================================================= */
.rc-testimonial-status {
display:
flex;
align-items:
center;
justify-content:
center;
gap:
7px;
margin-top:
10px;
color:
#8790a9;
font-size:
10px;
}
.rc-status-dot {
width:
6px;
height:
6px;
border-radius:
50%;
background:
#3acb86;
box-shadow:
0 0 0 4px
rgba(58,203,134,.10);
}
.rc-testimonial-status.is-manual
.rc-status-dot {
background:
#8290b8;
box-shadow:
none;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-testimonial-container {
grid-template-columns:
1fr;
}
.rc-testimonial-intro {
min-height:
350px;
}
}
@media (max-width: 700px) {
.rc-testimonial-section {
padding:
35px 15px
85px;
}
.rc-testimonial-intro {
min-height:
380px;
padding:
30px 23px
25px;
border-radius:
24px;
}
.rc-testimonial-mini-head {
display:
block;
}
.rc-testimonial-mini-head p {
margin-top:
7px;
text-align:
left;
}
.rc-testimonial-card {
flex:
0 0 100%;
min-height:
320px;
padding:
24px 20px;
border-radius:
22px;
}
.rc-testimonial-card-top {
grid-template-columns:
50px 1fr auto;
}
.rc-testimonial-avatar {
width:
50px;
height:
50px;
}
}
/* =========================================================
ROYAL CARE FOOTER
========================================================= */
.rc-footer {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 15% 85%, rgba(45,182,255,.10), transparent 28%),
radial-gradient(circle at 85% 15%, rgba(91,86,255,.14), transparent 30%),
linear-gradient(180deg, #07103b 0%, #060c2d 100%);
color: #ffffff;
padding-top: 70px;
}
.rc-footer-top-glow {
position: absolute;
top: -120px;
left: 50%;
transform: translateX(-50%);
width: 420px;
height: 220px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
pointer-events: none;
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.rc-footer-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 20px 45px;
display: grid;
grid-template-columns: 1.2fr .8fr .8fr 1.1fr;
gap: 42px;
position: relative;
z-index: 2;
}
/* =========================================================
BRAND
========================================================= */
.rc-footer-logo {
display: inline-flex;
margin-bottom: 22px;
padding: 12px 16px;
border-radius: 16px;
background: rgba(255,255,255,.95);
box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.rc-footer-logo img {
max-width: 170px;
height: auto;
display: block;
}
.rc-footer-about {
max-width: 310px;
margin: 0 0 24px;
color: rgba(223,229,255,.72);
font-size: 14px;
line-height: 1.95;
}
/* =========================================================
SOCIALS
========================================================= */
.rc-footer-socials {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.rc-footer-social {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.08);
color: #ffffff;
transition:
transform .35s ease,
background .35s ease,
border-color .35s ease,
box-shadow .35s ease;
}
.rc-footer-social:hover {
transform: translateY(-4px);
background: linear-gradient(145deg, #2d9fff, #6352ef);
border-color: transparent;
box-shadow: 0 14px 28px rgba(71,101,240,.28);
}
.rc-footer-social svg {
width: 18px;
height: 18px;
}
/* =========================================================
COLUMNS
========================================================= */
.rc-footer-col h3 {
margin: 6px 0 20px;
color: #ffffff;
font-size: 24px;
line-height: 1.2;
font-weight: 800;
}
.rc-footer-links,
.rc-footer-contact-list {
list-style: none;
margin: 0;
padding: 0;
}
.rc-footer-links li + li,
.rc-footer-contact-list li + li {
margin-top: 14px;
}
.rc-footer-links a {
display: inline-flex;
align-items: center;
color: rgba(223,229,255,.78);
font-size: 14px;
line-height: 1.7;
text-decoration: none;
transition:
color .3s ease,
transform .3s ease;
}
.rc-footer-links a:hover {
color: #ffffff;
transform: translateX(5px);
}
/* =========================================================
CONTACT
========================================================= */
.rc-footer-contact-list li {
display: grid;
grid-template-columns: 38px 1fr;
gap: 12px;
align-items: start;
}
.rc-footer-contact-icon {
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.08);
color: #85a3ff;
}
.rc-footer-contact-icon svg {
width: 18px;
height: 18px;
}
.rc-footer-contact-list span,
.rc-footer-contact-list a {
color: rgba(223,229,255,.78);
font-size: 14px;
line-height: 1.85;
text-decoration: none;
transition: color .3s ease;
}
.rc-footer-contact-list a:hover {
color: #ffffff;
}
/* =========================================================
BOTTOM BAR
========================================================= */
.rc-footer-bottom {
border-top: 1px solid rgba(255,255,255,.08);
background: rgba(255,255,255,.02);
}
.rc-footer-bottom-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.rc-footer-bottom p {
margin: 0;
color: rgba(223,229,255,.72);
font-size: 13px;
line-height: 1.7;
}
.rc-footer-bottom-links {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.rc-footer-bottom-links a {
color: rgba(223,229,255,.76);
font-size: 13px;
line-height: 1.6;
text-decoration: none;
transition: color .3s ease;
}
.rc-footer-bottom-links a:hover {
color: #ffffff;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.rc-footer-container {
grid-template-columns: 1fr 1fr;
gap: 34px;
}
}
@media (max-width: 700px) {
.rc-footer {
padding-top: 50px;
}
.rc-footer-container {
grid-template-columns: 1fr;
gap: 28px;
padding-bottom: 32px;
}
.rc-footer-col h3 {
font-size: 21px;
}
.rc-footer-about {
max-width: 100%;
}
.rc-footer-bottom-container {
flex-direction: column;
align-items: flex-start;
}
.rc-footer-bottom-links {
gap: 14px;
}
}
/*---------------------aboutpage css------------------*/
/* =========================================================
ABOUT BANNER - RESPONSIVE FIXED HEADER SAFE VERSION
========================================================= */
.rc-about-banner {
position: relative;
overflow: hidden;
width: 100%;
min-height: 390px;
display: flex;
align-items: center;
background: #0b143f;
isolation: isolate;
/*
* Fixed header ke neeche se banner start ho.
* Desktop header + topbar ke according.
*/
margin-top: 0;
padding-top: 118px;
}
/* =========================================================
INLINE BACKGROUND IMAGE
========================================================= */
.rc-about-banner-media {
position: absolute;
inset: 0;
z-index: 1;
}
.rc-about-banner-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
transform: scale(1.01);
}
/* =========================================================
CLEAN OVERLAY
========================================================= */
.rc-about-banner-overlay {
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(
circle at 72% 42%,
rgba(62, 101, 255, .12),
transparent 31%
),
linear-gradient(
90deg,
rgba(7, 14, 52, .94) 0%,
rgba(10, 20, 67, .88) 32%,
rgba(15, 34, 95, .68) 63%,
rgba(22, 56, 151, .30) 100%
);
}
/* =========================================================
BOTTOM DEPTH
========================================================= */
.rc-about-banner::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 80px;
z-index: 2;
pointer-events: none;
background:
linear-gradient(
180deg,
transparent,
rgba(5, 10, 35, .18)
);
}
/* =========================================================
CONTAINER
========================================================= */
.rc-about-banner-container {
position: relative;
z-index: 3;
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 103px 0px
71px;
}
/* =========================================================
CONTENT
========================================================= */
.rc-about-banner-content {
max-width: 620px;
}
/* =========================================================
TAG
========================================================= */
.rc-about-banner-tag {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
padding:
7px 14px;
border-radius:
999px;
background:
rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.10);
color:
rgba(229, 236, 255, .88);
font-size:
10px;
font-weight:
800;
letter-spacing:
1.25px;
-webkit-backdrop-filter:
blur(8px);
backdrop-filter:
blur(8px);
}
/* =========================================================
H1
========================================================= */
.rc-about-banner-content h1 {
margin:
0 0
14px;
padding:
4px 0;
color:
#f5fbff;
font-size:
clamp(
40px,
6vw,
44px
);
line-height:
1;
font-weight:
800;
letter-spacing:
-2.5px;
}
/* =========================================================
DESCRIPTION
========================================================= */
.rc-about-banner-content p {
max-width:
560px;
margin:
0;
color:
rgba(228, 235, 255, .82);
font-size:
15px;
line-height:
1.7;
font-weight:
500;
}
/* =========================================================
COMMON REVEAL
========================================================= */
.rc-scroll-reveal[data-reveal-effect="about-banner"] {
opacity: 0;
filter:
blur(6px);
transform:
translate3d(
-45px,
18px,
0
);
will-change:
transform,
opacity,
filter;
}
.rc-scroll-reveal[data-reveal-effect="about-banner"].rc-visible {
opacity: 1;
filter:
blur(0);
transform:
translate3d(0,0,0);
transition:
opacity .8s
cubic-bezier(.22,1,.36,1),
transform .95s
cubic-bezier(.22,1,.36,1),
filter .75s ease;
}
/* =========================================================
LAPTOP
========================================================= */
@media (max-width: 1199px) {
.rc-about-banner {
min-height:
360px;
padding-top:
112px;
}
.rc-about-banner-container {
padding:
30px 22px
40px;
}
.rc-about-banner-content {
max-width:
570px;
}
.rc-about-banner-content h1 {
font-size:
clamp(
50px,
6vw,
72px
);
letter-spacing:
-2px;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.rc-about-banner {
min-height:
330px;
/*
* Fixed header tablet height
*/
padding-top:
96px;
}
.rc-about-banner-container {
padding:
26px 20px
36px;
}
.rc-about-banner-content {
max-width:
520px;
}
.rc-about-banner-tag {
margin-bottom:
12px;
padding:
6px 12px;
font-size:
9.5px;
}
.rc-about-banner-content h1 {
margin-bottom:
12px;
font-size:
clamp(
46px,
8vw,
64px
);
letter-spacing:
-1.8px;
}
.rc-about-banner-content p {
max-width:
500px;
font-size:
14px;
line-height:
1.65;
}
.rc-about-banner-media img {
object-position:
60% center;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 767px) {
.rc-about-banner {
min-height:
285px;
/*
* Mobile header ke neeche safe space
*/
padding-top:
78px;
}
.rc-about-banner-container {
padding:
24px 16px
32px;
}
.rc-about-banner-content {
max-width:
92%;
}
.rc-about-banner-tag {
margin-bottom:
10px;
padding:
6px 11px;
font-size:
8.5px;
letter-spacing:
1px;
}
.rc-about-banner-content h1 {
margin:
0 0
10px;
padding:
2px 0;
font-size:
clamp(
42px,
13vw,
58px
);
line-height:
1;
letter-spacing:
-1.5px;
}
.rc-about-banner-content p {
max-width:
420px;
font-size:
13px;
line-height:
1.6;
}
/*
* Mobile par subject image right side better rahegi.
*/
.rc-about-banner-media img {
object-position:
64% center;
}
/*
* Mobile par overlay thoda stronger
* readability ke liye.
*/
.rc-about-banner-overlay {
background:
linear-gradient(
90deg,
rgba(7,14,52,.95) 0%,
rgba(9,19,65,.87) 58%,
rgba(19,48,135,.47) 100%
);
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.rc-about-banner {
min-height:
265px;
padding-top:
74px;
}
.rc-about-banner-container {
padding:
20px 14px
28px;
}
.rc-about-banner-content {
max-width:
96%;
}
.rc-about-banner-content h1 {
font-size:
clamp(
38px,
14vw,
50px
);
letter-spacing:
-1.2px;
}
.rc-about-banner-content p {
max-width:
330px;
font-size:
12.5px;
line-height:
1.55;
}
.rc-about-banner-media img {
object-position:
67% center;
}
}
/* =========================================================
VERY SMALL DEVICES
========================================================= */
@media (max-width: 360px) {
.rc-about-banner {
min-height:
250px;
padding-top:
70px;
}
.rc-about-banner-container {
padding:
18px 12px
24px;
}
.rc-about-banner-tag {
display:
none;
}
.rc-about-banner-content h1 {
font-size:
38px;
}
.rc-about-banner-content p {
max-width:
290px;
font-size:
12px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rc-scroll-reveal[data-reveal-effect="about-banner"] {
opacity:
1 !important;
filter:
none !important;
transform:
none !important;
transition:
none !important;
}
}
/* =========================================================
ABOUT COMPANY SECTION
Same common page background ke andar
========================================================= */
.rc-about-company-section {
position: relative;
padding:
90px 20px
100px;
}
.rc-about-company-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, .95fr)
minmax(0, 1.05fr);
gap: 70px;
align-items: center;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.rc-about-company-content {
position: relative;
}
.rc-about-company-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding:
8px 15px;
margin-bottom:
18px;
border-radius:
999px;
background:
rgba(255,255,255,.75);
border:
1px solid rgba(91,122,255,.18);
color:
#526bf0;
box-shadow:
0 8px 24px
rgba(56,78,155,.07);
font-size:
10px;
font-weight:
800;
letter-spacing:
1.25px;
}
.rc-about-company-title {
margin:
0 0
20px;
color:
#11193d;
font-size:
clamp(
40px,
5vw,
62px
);
line-height:
1.03;
font-weight:
800;
letter-spacing:
-2.5px;
}
.rc-about-company-title span {
display: block;
background:
linear-gradient(
90deg,
#2458f4,
#5540ed
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
.rc-about-company-text {
max-width:
590px;
margin:
0;
color:
#66718f;
font-size:
14.5px;
line-height:
1.9;
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.rc-about-company-visual {
position: relative;
}
.rc-about-company-image {
position: relative;
overflow: hidden;
min-height:
470px;
border-radius:
32px;
background:
#eef3ff;
border:
1px solid
rgba(180,199,255,.72);
box-shadow:
0 28px 70px
rgba(47,68,140,.13);
}
.rc-about-company-image img {
width:
100%;
height:
100%;
min-height:
470px;
display:
block;
object-fit:
cover;
transition:
transform .9s
cubic-bezier(.22,1,.36,1);
}
.rc-about-company-image::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 55%,
rgba(11,20,63,.25)
);
pointer-events:
none;
}
.rc-about-company-image:hover img {
transform:
scale(1.045);
}
/* =========================================================
IMAGE CAPTION
========================================================= */
.rc-about-company-caption {
position: absolute;
left:
20px;
bottom:
18px;
z-index:
3;
padding:
12px 18px;
border-radius:
999px;
background:
rgba(15,25,67,.78);
border:
1px solid
rgba(255,255,255,.15);
-webkit-backdrop-filter:
blur(12px);
backdrop-filter:
blur(12px);
color:
#ffffff;
font-size:
12px;
font-weight:
800;
box-shadow:
0 12px 25px
rgba(12,18,55,.18);
}
/* =========================================================
HOVER DETAIL
========================================================= */
.rc-about-company-image::before {
content: '';
position: absolute;
width:
180px;
height:
180px;
right:
-85px;
top:
-85px;
border-radius:
50%;
background:
rgba(89,120,255,.10);
z-index:
2;
transition:
transform .6s
cubic-bezier(.22,1,.36,1);
}
.rc-about-company-image:hover::before {
transform:
scale(1.4);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-about-company-section {
padding:
75px 20px
85px;
}
.rc-about-company-container {
grid-template-columns:
1fr;
gap:
48px;
}
.rc-about-company-content {
max-width:
760px;
}
.rc-about-company-text {
max-width:
700px;
}
.rc-about-company-visual {
max-width:
720px;
width:
100%;
}
.rc-about-company-image,
.rc-about-company-image img {
min-height:
430px;
}
}
@media (max-width: 650px) {
.rc-about-company-section {
padding:
60px 15px
70px;
}
.rc-about-company-container {
gap:
36px;
}
.rc-about-company-label {
margin-bottom:
14px;
padding:
7px 12px;
font-size:
9px;
}
.rc-about-company-title {
margin-bottom:
16px;
font-size:
clamp(
36px,
11vw,
48px
);
line-height:
1.05;
letter-spacing:
-1.5px;
}
.rc-about-company-text {
font-size:
13.5px;
line-height:
1.75;
}
.rc-about-company-image,
.rc-about-company-image img {
min-height:
330px;
}
.rc-about-company-image {
border-radius:
24px;
}
.rc-about-company-caption {
left:
14px;
bottom:
14px;
padding:
10px 14px;
font-size:
10.5px;
}
}
/* =========================================================
WHY CHOOSE US
LIGHT BACKGROUND VERSION
========================================================= */
.rc-why-section {
position: relative;
padding:
45px 20px
105px;
}
.rc-why-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.rc-why-head {
max-width: 780px;
margin:
0 auto
48px;
text-align: center;
}
.rc-why-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding:
8px 15px;
margin-bottom:
17px;
border-radius:
999px;
background:
rgba(255,255,255,.78);
border:
1px solid rgba(85,116,255,.18);
color:
#536bf0;
box-shadow:
0 8px 24px
rgba(55,78,155,.07);
font-size:
10.5px;
font-weight:
800;
letter-spacing:
1.35px;
}
.rc-why-head h2 {
margin:
0 0
14px;
color:
#10193d;
font-size:
clamp(
38px,
4.7vw,
56px
);
line-height:
1.05;
font-weight:
800;
letter-spacing:
-2px;
}
.rc-why-head h2 span {
display: block;
background:
linear-gradient(
90deg,
#245af3,
#5441ed
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
.rc-why-head p {
max-width:
630px;
margin:
0 auto;
color:
#65708f;
font-size:
14px;
line-height:
1.8;
}
.rc-why-line {
display: block;
width:
78px;
height:
4px;
margin:
18px auto 0;
border-radius:
20px;
background:
linear-gradient(
90deg,
#2bc4dd,
#4874ff,
#7551f2
);
}
/* =========================================================
GRID
========================================================= */
.rc-why-grid {
display:
grid;
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
gap:
16px;
}
/* =========================================================
CARD
========================================================= */
.rc-why-card {
position: relative;
min-height:
138px;
overflow:
hidden;
display:
flex;
align-items:
flex-start;
gap:
18px;
padding:
24px;
border-radius:
24px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.94),
rgba(241,246,255,.86)
);
border:
1px solid
rgba(170,192,255,.76);
box-shadow:
0 16px 42px
rgba(45,68,145,.075);
-webkit-backdrop-filter:
blur(10px);
backdrop-filter:
blur(10px);
transition:
transform .45s
cubic-bezier(.22,1,.36,1),
box-shadow .4s ease,
border-color .35s ease,
background .35s ease;
}
/* subtle glow */
.rc-why-card::after {
content: '';
position: absolute;
width:
140px;
height:
140px;
right:
-75px;
bottom:
-75px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(70,112,255,.13),
transparent 70%
);
transition:
transform .6s
cubic-bezier(.22,1,.36,1);
}
.rc-why-card:hover {
transform:
translateY(-7px);
border-color:
rgba(75,105,255,.45);
background:
linear-gradient(
145deg,
rgba(255,255,255,.98),
rgba(235,242,255,.92)
);
box-shadow:
0 25px 55px
rgba(43,68,155,.13);
}
.rc-why-card:hover::after {
transform:
scale(1.45);
}
/* =========================================================
ICON
========================================================= */
.rc-why-icon {
position:
relative;
z-index:
2;
flex:
none;
width:
54px;
height:
54px;
display:
grid;
place-items:
center;
border-radius:
16px;
background:
linear-gradient(
145deg,
#20c9d5,
#2c93ff 58%,
#5069f5
);
box-shadow:
0 12px 26px
rgba(43,145,230,.24);
transition:
transform .4s
cubic-bezier(.22,1,.36,1),
box-shadow .35s ease;
}
.rc-why-icon::after {
content: '';
position: absolute;
inset:
4px;
border-radius:
12px;
border:
1px solid
rgba(255,255,255,.14);
pointer-events:
none;
}
.rc-why-icon span {
color:
#ffffff;
font-size:
24px;
font-weight:
800;
}
.rc-why-card:hover
.rc-why-icon {
transform:
translateY(-3px)
rotate(-5deg)
scale(1.07);
box-shadow:
0 17px 32px
rgba(43,145,230,.30);
}
/* =========================================================
TEXT
========================================================= */
.rc-why-copy {
position:
relative;
z-index:
2;
}
.rc-why-copy h3 {
margin:
2px 0
8px;
color:
#151e40;
font-size:
17px;
font-weight:
800;
line-height:
1.35;
}
.rc-why-copy p {
margin:
0;
color:
#697391;
font-size:
13px;
line-height:
1.7;
}
/* =========================================================
LAST CARD
========================================================= */
.rc-why-card-wide {
grid-column:
1 / -1;
width:
72%;
justify-self:
center;
}
/* =========================================================
REVEAL ANIMATION
SAME COMMON JS
========================================================= */
.rc-scroll-reveal[data-reveal-effect="process-left"] {
opacity:
0;
filter:
blur(7px);
transform:
translate3d(
-55px,
35px,
0
)
scale(.96);
}
.rc-scroll-reveal[data-reveal-effect="process-right"] {
opacity:
0;
filter:
blur(7px);
transform:
translate3d(
55px,
35px,
0
)
scale(.96);
}
.rc-scroll-reveal[data-reveal-effect="process-up"],
.rc-scroll-reveal[data-reveal-effect="title-up"] {
opacity:
0;
filter:
blur(7px);
transform:
translateY(55px)
scale(.96);
}
.rc-scroll-reveal.rc-visible {
opacity:
1 !important;
filter:
blur(0) !important;
transform:
translate3d(0,0,0)
scale(1) !important;
transition:
opacity .8s
cubic-bezier(.22,1,.36,1),
transform 1s
cubic-bezier(.22,1,.36,1),
filter .8s ease;
transition-delay:
var(--reveal-delay,0s);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.rc-why-grid {
grid-template-columns:
1fr;
}
.rc-why-card-wide {
grid-column:
auto;
width:
100%;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.rc-why-section {
padding:
35px 15px
80px;
}
.rc-why-head {
margin-bottom:
36px;
}
.rc-why-head h2 {
font-size:
clamp(
34px,
10vw,
46px
);
letter-spacing:
-1.2px;
}
.rc-why-card {
min-height:
auto;
padding:
20px;
gap:
14px;
border-radius:
20px;
}
.rc-why-icon {
width:
46px;
height:
46px;
border-radius:
14px;
}
.rc-why-icon span {
font-size:
21px;
}
.rc-why-copy h3 {
font-size:
15px;
}
.rc-why-copy p {
font-size:
12.5px;
line-height:
1.65;
}
}
/* =========================================================
CASE STUDIES SECTION
========================================================= */
.rc-case-section {
position: relative;
padding: 45px 20px 115px;
}
.rc-case-container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.rc-case-head {
max-width: 860px;
margin-bottom: 48px;
}
.rc-case-label {
display: inline-flex;
padding: 8px 14px;
margin-bottom: 16px;
border-radius: 999px;
background: rgba(255,255,255,.78);
border: 1px solid rgba(92,122,255,.18);
color: #5570f1;
box-shadow: 0 8px 22px rgba(55,77,150,.07);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rc-case-title {
margin: 0 0 14px;
color: #11193d;
font-size: clamp(46px, 6vw, 74px);
line-height: 1;
font-weight: 800;
letter-spacing: -2.7px;
}
.rc-case-title span {
color: #315cf1;
}
.rc-case-desc {
max-width: 650px;
margin: 0;
color: #687391;
font-size: 14.5px;
line-height: 1.8;
}
/* =========================================================
GRID
========================================================= */
.rc-case-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 18px;
}
/* =========================================================
CARD
========================================================= */
.rc-case-card {
position: relative;
min-height: 420px;
overflow: hidden;
border-radius: 28px;
background: #11183e;
box-shadow:
0 22px 55px rgba(35,53,120,.13);
border:
1px solid rgba(255,255,255,.08);
transition:
transform .5s cubic-bezier(.22,1,.36,1),
box-shadow .45s ease;
}
.rc-case-card:hover {
transform: translateY(-10px);
box-shadow:
0 32px 72px rgba(35,53,120,.18);
}
/* image */
.rc-case-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform .9s cubic-bezier(.22,1,.36,1),
filter .5s ease;
}
.rc-case-card:hover img {
transform: scale(1.08);
filter: saturate(1.08);
}
/* overlay */
.rc-case-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(8,14,43,.05) 25%,
rgba(10,18,56,.34) 58%,
rgba(8,14,42,.92) 100%
);
transition:
background .4s ease;
}
.rc-case-card:hover .rc-case-overlay {
background:
linear-gradient(
180deg,
rgba(8,14,43,.10) 20%,
rgba(10,18,56,.42) 55%,
rgba(8,14,42,.96) 100%
);
}
/* number */
.rc-case-number {
position: absolute;
right: 18px;
top: 17px;
z-index: 3;
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.12);
color: rgba(255,255,255,.85);
font-size: 10px;
font-weight: 800;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* =========================================================
CONTENT
========================================================= */
.rc-case-content {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
z-index: 3;
transform: translateY(28px);
transition:
transform .45s cubic-bezier(.22,1,.36,1);
}
.rc-case-card:hover .rc-case-content {
transform: translateY(0);
}
.rc-case-content > span {
display: block;
margin-bottom: 7px;
color: #90a7ff;
font-size: 12px;
font-weight: 700;
}
.rc-case-content h3 {
margin: 0 0 16px;
color: #ffffff;
font-size: 24px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -.8px;
}
.rc-case-content a {
display: inline-flex;
align-items: center;
gap: 9px;
color: #ffffff;
font-size: 12px;
font-weight: 700;
text-decoration: none;
opacity: 0;
transform: translateY(8px);
transition:
opacity .35s ease,
transform .4s cubic-bezier(.22,1,.36,1);
}
.rc-case-card:hover .rc-case-content a {
opacity: 1;
transform: translateY(0);
}
.rc-case-content a span {
width: 30px;
height: 30px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.15);
transition:
transform .3s ease,
background .3s ease;
}
.rc-case-content a:hover span {
transform: translate(3px,-3px);
background: rgba(255,255,255,.22);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
.rc-case-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.rc-case-card {
min-height: 380px;
}
}
@media (max-width: 650px) {
.rc-case-section {
padding: 35px 15px 85px;
}
.rc-case-head {
margin-bottom: 34px;
}
.rc-case-title {
font-size: clamp(38px, 12vw, 52px);
letter-spacing: -1.6px;
}
.rc-case-grid {
grid-template-columns: 1fr;
}
.rc-case-card {
min-height: 350px;
border-radius: 22px;
}
.rc-case-content h3 {
font-size: 20px;
}
}
/* =========================================================
LEADERSHIP TEAM SECTION
========================================================= */
.rc-team-section {
position: relative;
padding: 45px 20px 110px;
}
.rc-team-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.rc-team-head {
max-width: 760px;
margin: 0 auto 55px;
text-align: center;
}
.rc-team-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 15px;
margin-bottom: 16px;
border-radius: 999px;
background: rgba(255,255,255,.78);
border: 1px solid rgba(87,120,255,.18);
color: #5570f1;
box-shadow:
0 8px 24px rgba(55,78,155,.07);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rc-team-title {
margin: 0 0 13px;
color: #10193d;
font-size: clamp(42px, 5vw, 62px);
line-height: 1.04;
font-weight: 800;
letter-spacing: -2.3px;
}
.rc-team-title span {
background:
linear-gradient(
90deg,
#255bf4,
#5540ed
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rc-team-desc {
max-width: 650px;
margin: 0 auto;
color: #687391;
font-size: 14px;
line-height: 1.8;
}
.rc-team-line {
display: block;
width: 80px;
height: 4px;
margin: 18px auto 0;
border-radius: 20px;
background:
linear-gradient(
90deg,
#31c3dc,
#4573ff,
#7951f2
);
}
/* =========================================================
GRID
========================================================= */
.rc-team-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0,1fr));
gap: 22px;
}
/* =========================================================
TEAM CARD
========================================================= */
.rc-team-card {
position: relative;
overflow: hidden;
border-radius: 30px;
background: #ffffff;
border:
1px solid rgba(171,194,255,.75);
box-shadow:
0 22px 55px rgba(43,66,145,.10);
transition:
transform .5s cubic-bezier(.22,1,.36,1),
box-shadow .45s ease,
border-color .35s ease;
}
.rc-team-card:hover {
transform:
translateY(-10px);
border-color:
rgba(76,107,255,.48);
box-shadow:
0 32px 70px rgba(43,67,155,.16);
}
/* =========================================================
IMAGE
========================================================= */
.rc-team-image {
position: relative;
height: 360px;
overflow: hidden;
}
.rc-team-image::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
transparent 60%,
rgba(10,18,55,.16)
);
pointer-events: none;
}
.rc-team-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .9s cubic-bezier(.22,1,.36,1);
}
.rc-team-card:hover
.rc-team-image img {
transform: scale(1.065);
}
/* =========================================================
INFO PANEL
========================================================= */
.rc-team-info {
position: relative;
min-height: 92px;
padding: 21px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background:
linear-gradient(
110deg,
#3168ef 0%,
#3d62ee 50%,
#5a46ed 100%
);
color: #ffffff;
}
.rc-team-info::before {
content: '';
position: absolute;
width: 135px;
height: 135px;
right: -70px;
bottom: -90px;
border-radius: 50%;
background:
rgba(255,255,255,.07);
transition:
transform .5s ease;
}
.rc-team-card:hover
.rc-team-info::before {
transform: scale(1.5);
}
/* =========================================================
TEXT
========================================================= */
.rc-team-info h3 {
position: relative;
z-index: 2;
margin: 0 0 4px;
color: #ffffff;
font-size: 19px;
font-weight: 800;
line-height: 1.25;
}
.rc-team-info > div > span {
position: relative;
z-index: 2;
color: rgba(255,255,255,.78);
font-size: 12.5px;
font-weight: 500;
}
/* =========================================================
ARROW
========================================================= */
.rc-team-arrow {
position: relative;
z-index: 2;
flex: none;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.16);
color: #ffffff;
font-size: 17px;
opacity: 0;
transform:
translateX(-8px)
rotate(-12deg);
transition:
opacity .3s ease,
transform .4s cubic-bezier(.22,1,.36,1);
}
.rc-team-card:hover
.rc-team-arrow {
opacity: 1;
transform:
translateX(0)
rotate(0);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-team-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
.rc-team-image {
height: 340px;
}
}
@media (max-width: 650px) {
.rc-team-section {
padding:
35px 15px
80px;
}
.rc-team-head {
margin-bottom: 38px;
}
.rc-team-title {
font-size:
clamp(36px, 11vw, 50px);
letter-spacing: -1.4px;
}
.rc-team-grid {
grid-template-columns: 1fr;
}
.rc-team-card {
border-radius: 24px;
}
.rc-team-image {
height: 320px;
}
.rc-team-info {
min-height: 82px;
padding:
18px 19px;
}
.rc-team-info h3 {
font-size: 17px;
}
}
/*----------------------service detailpage-----------------------------*/
/* =========================================================
TECH SUPPORT BANNER
========================================================= */
.rc-support-banner {
position: relative;
overflow: hidden;
padding: 206px 0px 68px 0px;
background: radial-gradient(
circle at 10% 20%,
rgba(50, 105, 255, .16),
transparent 28%
),
radial-gradient(
circle at 88% 30%,
rgba(109, 76, 255, .16),
transparent 30%
),
linear-gradient(
115deg,
#09133d 0%,
#0d1a53 50%,
#191760 100%
);
color: #ffffff;
}
/* subtle background glow */
.rc-support-banner::before {
content: '';
position: absolute;
width:
420px;
height:
420px;
left:
-200px;
bottom:
-240px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(50, 144, 255, .18),
transparent 68%
);
pointer-events:
none;
}
.rc-support-banner::after {
content: '';
position: absolute;
width:
360px;
height:
360px;
right:
-180px;
top:
-180px;
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(122, 89, 255, .16),
transparent 70%
);
pointer-events:
none;
}
/* =========================================================
CONTAINER
========================================================= */
.rc-support-container {
position: relative;
z-index:
2;
width:
100%;
max-width:
1180px;
margin:
0 auto;
display:
grid;
grid-template-columns:
minmax(0,1fr)
minmax(0,.88fr);
align-items:
center;
gap:
72px;
}
/* =========================================================
LEFT CONTENT
========================================================= */
.rc-support-content {
max-width:
650px;
}
/* heading */
.rc-support-title {
margin: 0 0
25px;
color: #ffffff;
font-size: clamp(
44px,
5.3vw,
43px
);
line-height: 1.04;
font-weight: 800;
letter-spacing: -2.5px;
}
.rc-support-title span {
display:
block;
margin-top:
5px;
background:
linear-gradient(
90deg,
#61c5ff 0%,
#6980ff 48%,
#a267ff 100%
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
/* description */
.rc-support-text {
max-width:
610px;
margin:
0 0
32px;
color:
rgba(224, 232, 255, .78);
font-size:
16px;
line-height:
1.85;
font-weight:
500;
}
/* =========================================================
BUTTON
========================================================= */
.rc-support-action {
display:
flex;
}
.rc-support-btn {
position:
relative;
overflow:
hidden;
display:
inline-flex;
align-items:
center;
gap:
11px;
padding:
15px 25px;
border-radius:
14px;
background:
linear-gradient(
135deg,
#3d72f5 0%,
#6c54f5 100%
);
color:
#ffffff;
text-decoration:
none;
font-size:
14px;
font-weight:
800;
box-shadow:
0 15px 34px
rgba(56, 83, 225, .30);
transition:
transform .3s ease,
box-shadow .3s ease;
}
.rc-support-btn::before {
content: '';
position:
absolute;
top:
0;
left:
-80%;
width:
45%;
height:
100%;
background:
linear-gradient(
120deg,
transparent,
rgba(255,255,255,.35),
transparent
);
transform:
skewX(-20deg);
transition:
left .7s ease;
}
.rc-support-btn:hover {
transform:
translateY(-3px);
box-shadow:
0 21px 42px
rgba(56, 83, 225, .38);
}
.rc-support-btn:hover::before {
left:
140%;
}
.rc-support-btn span {
transition:
transform .3s ease;
}
.rc-support-btn:hover span {
transform:
translateX(5px);
}
/* =========================================================
RIGHT IMAGE
========================================================= */
.rc-support-visual {
position:
relative;
}
.rc-support-image {
position:
relative;
overflow:
hidden;
width:
100%;
height:
500px;
border-radius:
34px;
border:
1px solid
rgba(255,255,255,.15);
box-shadow:
0 34px 80px
rgba(3, 9, 38, .36);
background:
#121a4d;
}
.rc-support-image img {
width:
100%;
height:
100%;
display:
block;
object-fit:
cover;
object-position:
center;
transition:
transform 1s
cubic-bezier(.22,1,.36,1);
}
.rc-support-image:hover img {
transform:
scale(1.055);
}
/* image overlay */
.rc-support-image-overlay {
position:
absolute;
inset:
0;
background:
linear-gradient(
180deg,
rgba(15, 28, 80, .02) 40%,
rgba(8, 16, 58, .30) 100%
);
pointer-events:
none;
}
/* subtle corner decorative line */
.rc-support-image::before {
content: '';
position:
absolute;
z-index:
2;
width:
110px;
height:
110px;
right:
-45px;
top:
-45px;
border-radius:
50%;
border:
1px solid
rgba(113, 134, 255, .35);
box-shadow:
0 0 0 20px
rgba(113, 134, 255, .045);
pointer-events:
none;
}
/* =========================================================
COMMON REVEAL EFFECTS
SAME JS
========================================================= */
.rc-scroll-reveal[data-reveal-effect="process-left"] {
opacity:
0;
filter:
blur(7px);
transform:
translate3d(
-60px,
28px,
0
)
scale(.97);
}
.rc-scroll-reveal[data-reveal-effect="process-right"] {
opacity:
0;
filter:
blur(7px);
transform:
translate3d(
65px,
30px,
0
)
scale(.96);
}
.rc-scroll-reveal[data-reveal-effect="text"] {
opacity:
0;
filter:
blur(6px);
transform:
translateY(30px);
}
.rc-scroll-reveal[data-reveal-effect="button"] {
opacity:
0;
filter:
blur(5px);
transform:
translateY(25px)
scale(.94);
}
.rc-scroll-reveal.rc-visible {
opacity:
1 !important;
filter:
blur(0) !important;
transform:
translate3d(0,0,0)
scale(1) !important;
transition:
opacity .8s
cubic-bezier(.22,1,.36,1),
transform 1s
cubic-bezier(.22,1,.36,1),
filter .8s ease;
}
/* description after title */
.rc-support-text.rc-visible {
transition-delay:
.10s;
}
/* button after description */
.rc-support-action.rc-visible {
transition-delay:
.18s;
}
/* image */
.rc-support-visual.rc-visible {
transition-delay:
.08s;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.rc-support-banner {
padding: 181px 0px 68px 0px;
}
.rc-support-container {
grid-template-columns:
1fr;
gap:
48px;
}
.rc-support-content {
max-width:
760px;
}
.rc-support-image {
max-width:
720px;
height:
450px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.rc-support-content {
padding: 84px 0px 40px 0px;
}
.rc-support-banner {
padding:
55px 15px;
}
.rc-support-container {
gap:
38px;
}
.rc-support-title {
margin-bottom:
18px;
font-size:
clamp(
38px,
11vw,
52px
);
letter-spacing:
-1.6px;
}
.rc-support-text {
margin-bottom:
25px;
font-size:
14px;
line-height:
1.7;
}
.rc-support-btn {
padding:
13px 20px;
font-size:
13px;
}
.rc-support-image {
height:
340px;
border-radius:
24px;
}
.rc-support-image img {
object-position:
56% center;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 400px) {
.rc-support-banner {
padding:
48px 13px;
}
.rc-support-title {
font-size:
36px;
}
.rc-support-image {
height:
300px;
}
.rc-support-btn {
width:
100%;
justify-content:
center;
}
}
/* =========================================================
TYPES OF WEB DESIGN
========================================================= */
.rc-web-types-section {
position: relative;
padding: 45px 20px 110px;
}
.rc-web-types-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.rc-web-types-head {
max-width: 760px;
margin: 0 auto 52px;
text-align: center;
}
.rc-web-types-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 15px;
margin-bottom: 15px;
border-radius: 999px;
background: rgba(255,255,255,.8);
border: 1px solid rgba(91,122,255,.18);
color: #5570f1;
box-shadow:
0 8px 22px rgba(55,78,155,.07);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rc-web-types-head h2 {
margin: 0 0 13px;
color: #11193d;
font-size: clamp(40px,5vw,58px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -2px;
}
.rc-web-types-head h2 span {
background:
linear-gradient(
90deg,
#2458f4,
#5640ed
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rc-web-types-head p {
max-width: 630px;
margin: 0 auto;
color: #687391;
font-size: 14px;
line-height: 1.8;
}
.rc-web-types-line {
display: block;
width: 78px;
height: 4px;
margin: 17px auto 0;
border-radius: 20px;
background:
linear-gradient(
90deg,
#31c3dd,
#4872ff,
#7851f2
);
}
/* =========================================================
GRID
========================================================= */
.rc-web-types-grid {
display: grid;
grid-template-columns:
repeat(3,minmax(0,1fr));
gap: 18px;
}
/* =========================================================
CARD
========================================================= */
.rc-web-type-card {
position: relative;
min-height: 220px;
padding: 26px 24px;
border-radius: 24px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.98),
rgba(240,246,255,.93)
);
border:
1px solid rgba(170,193,255,.55);
box-shadow:
0 16px 42px rgba(44,68,145,.07);
overflow: hidden;
transition:
transform .5s cubic-bezier(.22,1,.36,1),
box-shadow .45s ease,
background .4s ease,
border-color .35s ease;
}
/* =========================================================
SVG DRAWING BORDER
========================================================= */
.rc-web-draw-border {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 7;
overflow: visible;
pointer-events: none;
}
/* actual border path */
.rc-web-border-path {
fill: none;
/*
* 3px approx visual thickness
*/
stroke-width: 1;
vector-effect:
non-scaling-stroke;
stroke-linecap:
round;
stroke-linejoin:
round;
/*
* pathLength = 100
* initially border completely hidden
*/
stroke-dasharray:
100;
stroke-dashoffset:
100;
opacity: 0;
/*
* 27 seconds:
* 6 cards x 4.5 seconds
*/
animation:
rcWebBorderDraw
27s
cubic-bezier(.45,0,.25,1)
infinite;
animation-delay:
var(--border-delay);
}
/* =========================================================
SLOW BORDER DRAW
========================================================= */
@keyframes rcWebBorderDraw {
/*
* Card waiting
*/
0% {
stroke-dashoffset: 100;
opacity: 0;
}
/*
* Soft start
*/
1% {
stroke-dashoffset: 100;
opacity: 1;
}
/*
* Slowly draw entire border.
*
* 16.66% of 27 sec ≈ 4.5 sec
*/
14.5% {
stroke-dashoffset: 0;
opacity: 1;
}
/*
* Small hold after complete border
*/
15.5% {
stroke-dashoffset: 0;
opacity: 1;
}
/*
* Soft fade before next card
*/
16.66% {
stroke-dashoffset: 0;
opacity: 0;
}
/*
* Rest of cycle hidden
*/
100% {
stroke-dashoffset: 0;
opacity: 0;
}
}
/* =========================================================
HOVER
========================================================= */
.rc-web-type-card:hover {
transform:
translateY(-7px)
scale(1.01);
background:
linear-gradient(
145deg,
#ffffff,
#edf3ff
);
border-color:
rgba(86,112,255,.36);
box-shadow:
0 27px 58px rgba(43,68,155,.14);
}
/* =========================================================
NUMBER
========================================================= */
.rc-web-card-number {
position: absolute;
right: 18px;
top: 15px;
z-index: 4;
color: #aebff2;
font-size: 10px;
font-weight: 800;
transition:
color .35s ease,
transform .35s ease;
}
.rc-web-type-card:hover
.rc-web-card-number {
color: #6177de;
transform: translateY(2px);
}
/* =========================================================
ICON
========================================================= */
.rc-web-card-icon {
position: relative;
z-index: 4;
width: 54px;
height: 54px;
margin-bottom: 20px;
display: grid;
place-items: center;
border-radius: 16px;
color: #ffffff;
background:
linear-gradient(
145deg,
#3c78ff 0%,
#5463f5 54%,
#6c4ff0 100%
);
border:
1px solid rgba(255,255,255,.16);
box-shadow:
0 13px 28px rgba(61,88,220,.24);
transition:
transform .45s cubic-bezier(.22,1,.36,1),
box-shadow .4s ease,
border-radius .35s ease;
}
.rc-web-card-icon::after {
content: '';
position: absolute;
inset: 4px;
border-radius: 12px;
border:
1px solid rgba(255,255,255,.14);
pointer-events: none;
}
.rc-web-card-icon svg {
width: 23px;
height: 23px;
transition:
transform .4s cubic-bezier(.22,1,.36,1);
}
/* Icon remains straight */
.rc-web-type-card:hover
.rc-web-card-icon {
transform:
translateY(-5px)
scale(1.08);
box-shadow:
0 19px 36px rgba(61,88,220,.31);
}
.rc-web-type-card:hover
.rc-web-card-icon svg {
transform:
scale(1.06);
}
/* =========================================================
TEXT
========================================================= */
.rc-web-type-card h3 {
position: relative;
z-index: 4;
margin:
0 0 9px;
color: #182140;
font-size: 17px;
font-weight: 800;
line-height: 1.35;
transition:
color .3s ease,
transform .4s cubic-bezier(.22,1,.36,1);
}
.rc-web-type-card p {
position: relative;
z-index: 4;
margin: 0;
color: #697391;
font-size: 13px;
line-height: 1.7;
transition:
color .3s ease,
transform .4s cubic-bezier(.22,1,.36,1);
}
.rc-web-type-card:hover h3 {
color: #345bf0;
transform:
translateY(-2px);
}
.rc-web-type-card:hover p {
color: #606b89;
}
/* =========================================================
CORNER
========================================================= */
.rc-web-card-corner {
position: absolute;
width: 120px;
height: 120px;
right: -55px;
top: -55px;
z-index: 1;
border-radius: 50%;
background:
rgba(87,116,255,.07);
box-shadow:
0 0 0 16px
rgba(87,116,255,.025);
transition:
transform .6s cubic-bezier(.22,1,.36,1),
background .4s ease;
}
.rc-web-type-card:hover
.rc-web-card-corner {
transform:
translate(-8px,8px)
scale(1.18);
background:
rgba(87,116,255,.11);
}
/* =========================================================
COMMON REVEAL
========================================================= */
.rc-scroll-reveal[data-reveal-effect="process-left"] {
opacity: 0;
filter: blur(7px);
transform:
translate3d(-50px,30px,0)
scale(.97);
}
.rc-scroll-reveal[data-reveal-effect="process-right"] {
opacity: 0;
filter: blur(7px);
transform:
translate3d(50px,30px,0)
scale(.97);
}
.rc-scroll-reveal[data-reveal-effect="process-up"],
.rc-scroll-reveal[data-reveal-effect="title-up"] {
opacity: 0;
filter: blur(7px);
transform:
translateY(50px)
scale(.97);
}
.rc-scroll-reveal.rc-visible {
opacity: 1 !important;
filter: blur(0) !important;
transform:
translate3d(0,0,0)
scale(1) !important;
transition:
opacity .8s cubic-bezier(.22,1,.36,1),
transform 1s cubic-bezier(.22,1,.36,1),
filter .8s ease;
transition-delay:
var(--reveal-delay,0s);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.rc-web-types-grid {
grid-template-columns:
repeat(2,minmax(0,1fr));
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.rc-web-types-section {
padding:
35px 15px
80px;
}
.rc-web-types-head {
margin-bottom: 38px;
}
.rc-web-types-grid {
grid-template-columns: 1fr;
}
.rc-web-type-card {
min-height: auto;
padding:
22px 20px;
border-radius:
20px;
}
.rc-web-card-icon {
width: 50px;
height: 50px;
border-radius: 15px;
}
.rc-web-card-icon svg {
width: 21px;
height: 21px;
}
.rc-web-types-head h2 {
font-size:
clamp(35px,10vw,48px);
letter-spacing:
-1.3px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rc-web-border-path {
animation: none !important;
opacity: 0 !important;
}
}
/* =========================================================
WEBSITE LAUNCH PROCESS
========================================================= */
.rc-launch-process-section {
position: relative;
padding:
48px 14px
100px;
}
.rc-launch-process-container {
width: 100%;
max-width: 1540px;
margin: 0 auto;
}
/* =========================================================
HEADING
========================================================= */
.rc-launch-process-head {
max-width: 760px;
margin:
0 auto
52px;
text-align: center;
}
.rc-launch-process-label {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom:
15px;
color:
#536bf3;
font-size:
10.5px;
font-weight:
800;
letter-spacing:
1.4px;
}
.rc-launch-process-head h2 {
margin:
0 0
14px;
color:
#11193d;
font-size:
clamp(
40px,
5vw,
58px
);
line-height:
1.05;
font-weight:
800;
letter-spacing:
-2px;
}
.rc-launch-process-head h2 span {
background:
linear-gradient(
90deg,
#3e62f5,
#7650f4
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
.rc-launch-process-head p {
max-width:
610px;
margin:
0 auto;
color:
#6b7592;
font-size:
14px;
line-height:
1.75;
}
/* =========================================================
PROCESS ROW
========================================================= */
.rc-launch-process-row {
display: grid;
grid-template-columns:
minmax(0,1fr)
64px
minmax(0,1fr)
64px
minmax(0,1fr)
64px
minmax(0,1fr);
align-items:
stretch;
gap:
0;
}
/* =========================================================
CARD
========================================================= */
.rc-launch-step-card {
position: relative;
min-height:
310px;
overflow:
hidden;
padding:
26px 22px
22px;
border-radius:
24px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.97),
rgba(242,246,255,.90)
);
border:
1px solid
rgba(175,195,255,.78);
box-shadow:
0 16px 42px
rgba(44,68,145,.07);
transition:
transform .48s
cubic-bezier(.22,1,.36,1),
border-color .35s ease,
box-shadow .42s ease,
background .35s ease;
}
.rc-launch-step-card:hover {
transform:
translateY(-8px);
border-color:
rgba(77,106,255,.46);
background:
linear-gradient(
145deg,
#ffffff,
#eef3ff
);
box-shadow:
0 27px 58px
rgba(43,68,155,.13);
}
/* =========================================================
TOP GLOW
========================================================= */
.rc-launch-step-card::before {
content: '';
position: absolute;
width:
170px;
height:
120px;
top:
-70px;
left:
50%;
transform:
translateX(-50%)
scale(.8);
border-radius:
50%;
background:
radial-gradient(
circle,
rgba(87,117,255,.17),
transparent 70%
);
opacity:
0;
transition:
opacity .35s ease,
transform .5s
cubic-bezier(.22,1,.36,1);
pointer-events:
none;
}
.rc-launch-step-card:hover::before {
opacity:
1;
transform:
translateX(-50%)
scale(1.18);
}
/* =========================================================
STEP NUMBER
========================================================= */
.rc-launch-step-number {
position: absolute;
right:
18px;
top:
18px;
z-index:
2;
color:
#d8deed;
font-size:
35px;
font-weight:
800;
line-height:
1;
}
/* =========================================================
ICON
========================================================= */
.rc-launch-step-icon {
position: relative;
z-index:
3;
width:
50px;
height:
50px;
margin-bottom:
20px;
display:
grid;
place-items:
center;
border-radius:
15px;
color:
#ffffff;
background:
linear-gradient(
145deg,
#4776ff,
#5a60f5 55%,
#704ff0
);
box-shadow:
0 13px 28px
rgba(61,88,220,.23);
transition:
transform .45s
cubic-bezier(.22,1,.36,1),
box-shadow .35s ease;
}
.rc-launch-step-icon svg {
width:
22px;
height:
22px;
}
.rc-launch-step-card:hover
.rc-launch-step-icon {
transform:
translateY(-4px)
rotate(-5deg)
scale(1.07);
box-shadow:
0 18px 34px
rgba(61,88,220,.30);
}
/* =========================================================
SMALL LABEL
========================================================= */
.rc-launch-step-label {
position:
relative;
z-index:
3;
display:
block;
margin-bottom:
7px;
color:
#5570f1;
font-size:
9px;
font-weight:
800;
letter-spacing:
1.1px;
}
/* =========================================================
CARD HEADING
========================================================= */
.rc-launch-step-card h3 {
position:
relative;
z-index:
3;
margin:
0 0
31px;
color:
#17203f;
font-size:
18px;
font-weight:
800;
line-height:
1.3;
transition:
color .3s ease,
transform .35s ease;
}
.rc-launch-step-card:hover h3 {
color:
#345cf0;
transform:
translateY(-2px);
}
/* =========================================================
PARAGRAPH
========================================================= */
.rc-launch-step-card p {
position:
relative;
z-index:
3;
margin:
0;
color:
#697391;
font-size:
13px;
line-height:
1.7;
}
/* =========================================================
TAGS
========================================================= */
.rc-launch-tags {
position:
absolute;
left:
22px;
bottom:
20px;
z-index:
3;
display:
flex;
flex-wrap:
wrap;
gap:
7px;
}
.rc-launch-tags span {
padding:
6px 10px;
border-radius:
999px;
background:
#eef2ff;
color:
#6d7ba9;
font-size:
8.5px;
font-weight:
700;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}
.rc-launch-step-card:hover
.rc-launch-tags span {
background:
#e5ebff;
color:
#4b62cf;
transform:
translateY(-1px);
}
/* =========================================================
CORNER SHAPE
========================================================= */
.rc-launch-corner {
position: absolute;
width:
120px;
height:
120px;
right:
-55px;
top:
-55px;
border-radius:
50%;
background:
rgba(87,116,255,.07);
transition:
transform .6s
cubic-bezier(.22,1,.36,1),
background .35s ease;
}
.rc-launch-step-card:hover
.rc-launch-corner {
transform:
translate(-8px,8px)
scale(1.18);
background:
rgba(87,116,255,.11);
}
/* =========================================================
CONNECTOR AREA
========================================================= */
.rc-launch-arrow-wrap {
position: relative;
display:
flex;
align-items:
center;
justify-content:
center;
min-width:
64px;
z-index:
5;
}
/* connector line */
.rc-launch-line {
position: absolute;
left:
0;
right:
0;
top:
50%;
height:
1px;
background:
#d8e0f5;
transform:
translateY(-50%);
z-index:
1;
}
/* round arrow */
.rc-launch-arrow {
position: relative;
z-index:
2;
width:
42px;
height:
42px;
display:
grid;
place-items:
center;
border-radius:
50%;
background:
rgba(255,255,255,.96);
border:
1px solid
rgba(143,168,255,.55);
color:
#4c6ef4;
font-size:
17px;
box-shadow:
0 8px 20px
rgba(55,78,160,.09);
animation:
rcLaunchArrowFloat
2.3s ease-in-out infinite;
}
@keyframes rcLaunchArrowFloat {
0%,
100% {
transform:
translateX(0);
}
50% {
transform:
translateX(4px);
}
}
/* =========================================================
REVEAL ANIMATIONS
========================================================= */
.rc-scroll-reveal[data-reveal-effect="process-left"] {
opacity:
0;
filter:
blur(7px);
transform:
translate3d(
-55px,
35px,
0
)
scale(.96);
}
.rc-scroll-reveal[data-reveal-effect="process-up"] {
opacity:
0;
filter:
blur(7px);
transform:
translateY(55px)
scale(.96);
}
.rc-scroll-reveal[data-reveal-effect="process-right"] {
opacity:
0;
filter:
blur(7px);
transform:
translate3d(
55px,
35px,
0
)
scale(.96);
}
.rc-scroll-reveal.rc-visible {
opacity:
1 !important;
filter:
blur(0) !important;
transform:
translate3d(0,0,0)
scale(1) !important;
transition:
opacity .8s
cubic-bezier(.22,1,.36,1),
transform 1s
cubic-bezier(.22,1,.36,1),
filter .8s ease;
transition-delay:
var(--reveal-delay,0s);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1100px) {
.rc-launch-process-row {
grid-template-columns:
repeat(
2,
minmax(0,1fr)
);
gap:
18px;
}
.rc-launch-arrow-wrap {
display:
none;
}
.rc-launch-step-card {
min-height:
290px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.rc-launch-process-section {
padding:
35px 15px
80px;
}
.rc-launch-process-head {
margin-bottom:
38px;
}
.rc-launch-process-row {
grid-template-columns:
1fr;
gap:
14px;
}
.rc-launch-step-card {
min-height:
280px;
padding:
22px 20px;
border-radius:
20px;
}
.rc-launch-step-card h3 {
margin-bottom:
25px;
}
.rc-launch-tags {
left:
20px;
bottom:
18px;
}
.rc-launch-process-head h2 {
font-size:
clamp(
35px,
10vw,
48px
);
letter-spacing:
-1.3px;
}
}
/* =========================================================
DESIGN BENEFITS SECTION
========================================================= */
.rc-design-benefits-section {
position: relative;
padding:
50px 20px
110px;
}
.rc-design-benefits-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns:
minmax(0, .95fr)
minmax(0, 1.05fr);
gap: 68px;
align-items: center;
}
/* =========================================================
LEFT IMAGE
========================================================= */
.rc-design-benefits-visual {
position: relative;
}
.rc-design-benefits-image {
position: relative;
height: 520px;
overflow: hidden;
border-radius:
30px;
background:
#111946;
border:
1px solid
rgba(175,195,255,.75);
box-shadow:
0 28px 70px
rgba(44,67,145,.14);
}
.rc-design-benefits-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform 1s
cubic-bezier(.22,1,.36,1);
}
.rc-design-benefits-image:hover img {
transform:
scale(1.055);
}
/* overlay */
.rc-design-benefits-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
180deg,
rgba(7,15,50,.04) 35%,
rgba(9,18,57,.45) 67%,
rgba(8,14,44,.88) 100%
);
pointer-events: none;
}
/* image content */
.rc-design-benefits-image-content {
position: absolute;
left:
34px;
right:
34px;
bottom:
32px;
z-index:
3;
}
.rc-design-benefits-image-content span {
display: block;
margin-bottom:
10px;
color:
#dce5ff;
font-size:
10px;
font-weight:
800;
letter-spacing:
1.35px;
}
.rc-design-benefits-image-content h3 {
max-width:
450px;
margin:
0;
color:
#ffffff;
font-size:
clamp(
30px,
3.4vw,
44px
);
line-height:
1.06;
font-weight:
800;
letter-spacing:
-1.5px;
}
/* =========================================================
RIGHT CONTENT
========================================================= */
.rc-design-benefits-content {
position: relative;
}
.rc-design-benefits-label {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom:
16px;
padding:
8px 15px;
border-radius:
999px;
background:
rgba(255,255,255,.78);
border:
1px solid
rgba(91,122,255,.18);
color:
#5570f1;
box-shadow:
0 8px 22px
rgba(55,78,155,.07);
font-size:
10px;
font-weight:
800;
letter-spacing:
1.4px;
}
.rc-design-benefits-title {
margin:
0 0
18px;
color:
#10193d;
font-size:
clamp(
42px,
5vw,
44px
);
line-height:
1.03;
font-weight:
800;
letter-spacing:
-2.5px;
}
.rc-design-benefits-title span {
display: block;
background:
linear-gradient(
90deg,
#315cf3,
#7650f4
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
.rc-design-benefits-desc {
max-width:
620px;
margin:
0 0
30px;
color:
#687391;
font-size:
14.5px;
line-height:
1.8;
}
/* =========================================================
BENEFITS LIST
========================================================= */
.rc-design-benefits-list {
border-top:
1px solid
rgba(151,170,220,.34);
}
/* =========================================================
BENEFIT ITEM
========================================================= */
.rc-design-benefit-item {
position: relative;
display: grid;
grid-template-columns:
42px 1fr 34px;
gap:
18px;
align-items:
start;
padding:
24px 0;
border-bottom:
1px solid
rgba(151,170,220,.34);
transition:
transform .4s
cubic-bezier(.22,1,.36,1),
padding-left .4s
cubic-bezier(.22,1,.36,1);
}
.rc-design-benefit-item:hover {
padding-left:
8px;
}
/* number */
.rc-design-benefit-number {
padding-top:
4px;
color:
#9aa9d4;
font-size:
10px;
font-weight:
800;
letter-spacing:
.8px;
}
/* heading */
.rc-design-benefit-copy h3 {
margin:
0 0
8px;
color:
#17203f;
font-size:
19px;
font-weight:
800;
line-height:
1.3;
transition:
color .3s ease;
}
.rc-design-benefit-item:hover
.rc-design-benefit-copy h3 {
color:
#345cf0;
}
/* description */
.rc-design-benefit-copy p {
margin:
0 0
8px;
color:
#687391;
font-size:
13px;
line-height:
1.7;
}
/* small highlight */
.rc-design-benefit-copy small {
color:
#5c72ee;
font-size:
10px;
font-weight:
700;
}
/* arrow */
.rc-design-benefit-arrow {
width:
32px;
height:
32px;
display:
grid;
place-items:
center;
justify-self:
end;
border-radius:
50%;
color:
#5a70ec;
background:
rgba(89,113,244,.06);
border:
1px solid
rgba(89,113,244,.12);
font-size:
15px;
transition:
transform .4s
cubic-bezier(.22,1,.36,1),
background .3s ease,
color .3s ease;
}
.rc-design-benefit-item:hover
.rc-design-benefit-arrow {
transform:
translate(3px,-3px);
background:
#4b6df3;
color:
#ffffff;
}
/* =========================================================
COMMON REVEAL
========================================================= */
.rc-scroll-reveal[data-reveal-effect="process-left"] {
opacity:
0;
filter:
blur(7px);
transform:
translate3d(
-60px,
30px,
0
)
scale(.96);
}
.rc-scroll-reveal[data-reveal-effect="process-right"] {
opacity:
0;
filter:
blur(7px);
transform:
translate3d(
60px,
28px,
0
)
scale(.97);
}
.rc-scroll-reveal.rc-visible {
opacity:
1 !important;
filter:
blur(0) !important;
transform:
translate3d(0,0,0)
scale(1) !important;
transition:
opacity .8s
cubic-bezier(.22,1,.36,1),
transform 1s
cubic-bezier(.22,1,.36,1),
filter .8s ease;
transition-delay:
var(--reveal-delay,0s);
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-design-benefits-container {
grid-template-columns:
1fr;
gap:
48px;
}
.rc-design-benefits-visual {
max-width:
720px;
width:
100%;
}
.rc-design-benefits-image {
height:
460px;
}
.rc-design-benefits-content {
max-width:
760px;
}
}
@media (max-width: 650px) {
.rc-design-benefits-section {
padding:
35px 15px
80px;
}
.rc-design-benefits-container {
gap:
38px;
}
.rc-design-benefits-image {
height:
370px;
border-radius:
24px;
}
.rc-design-benefits-image-content {
left:
22px;
right:
22px;
bottom:
22px;
}
.rc-design-benefits-image-content h3 {
font-size:
clamp(
27px,
8vw,
36px
);
}
.rc-design-benefits-title {
font-size:
clamp(
36px,
10vw,
48px
);
letter-spacing:
-1.5px;
}
.rc-design-benefit-item {
grid-template-columns:
30px 1fr 30px;
gap:
10px;
padding:
20px 0;
}
.rc-design-benefit-copy h3 {
font-size:
16px;
}
.rc-design-benefit-copy p {
font-size:
12.5px;
}
}
/* =========================================================
EXPLORE SECTION
========================================================= */
.rc-explore-section {
position: relative;
overflow: hidden;
padding: 0px 0 70px;
/* background: linear-gradient(
180deg,
rgba(244,246,255,.88),
rgba(238,242,255,.92)
); */
}
/* =========================================================
HEADING
========================================================= */
.rc-explore-head {
text-align: center;
margin-bottom: 34px;
}
.rc-explore-head span {
display: inline-block;
margin-bottom: 10px;
color: #596ff2;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.45px;
}
.rc-explore-head h2 {
margin: 0;
color: #11193d;
font-size: clamp(38px, 5vw, 56px);
line-height: 1;
font-weight: 800;
letter-spacing: -2px;
}
/* =========================================================
MARQUEE WRAPPER
========================================================= */
.rc-explore-marquee {
position: relative;
overflow: hidden;
width: 100%;
margin-top: 20px;
}
/* fade edges */
.rc-explore-marquee::before,
.rc-explore-marquee::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 110px;
z-index: 5;
pointer-events: none;
}
.rc-explore-marquee::before {
left: 0;
background:
linear-gradient(
90deg,
#f0f3ff,
transparent
);
}
.rc-explore-marquee::after {
right: 0;
background:
linear-gradient(
-90deg,
#f0f3ff,
transparent
);
}
/* =========================================================
TRACK
========================================================= */
.rc-explore-track {
display: flex;
align-items: center;
gap: 16px;
width: max-content;
will-change: transform;
}
/* top moves left -> right */
.rc-marquee-right .rc-explore-track {
animation:
rcMoveRight
28s linear infinite;
}
/* bottom moves right -> left */
.rc-marquee-left .rc-explore-track {
animation:
rcMoveLeft
32s linear infinite;
}
/* pause on hover */
.rc-explore-marquee:hover
.rc-explore-track {
animation-play-state: paused;
}
/* =========================================================
CARD
========================================================= */
.rc-explore-item {
flex: none;
min-width: 220px;
padding: 19px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
border-radius: 16px;
background:
rgba(255,255,255,.90);
border:
1px solid rgba(174,192,245,.78);
box-shadow:
0 8px 24px rgba(55,74,145,.06);
color: #28314f;
font-size: 14px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition:
transform .35s ease,
box-shadow .35s ease,
border-color .3s ease,
color .3s ease;
}
.rc-explore-item span {
color: #596ff2;
font-size: 16px;
transition:
transform .3s ease;
}
.rc-explore-item:hover {
transform: translateY(-4px);
color: #345cf0;
border-color: rgba(79,106,245,.38);
box-shadow:
0 15px 30px rgba(55,74,145,.11);
}
.rc-explore-item:hover span {
transform: translate(3px,-3px);
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes rcMoveLeft {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
@keyframes rcMoveRight {
from {
transform: translateX(-50%);
}
to {
transform: translateX(0);
}
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 767px) {
.rc-explore-section {
padding: 45px 0 55px;
}
.rc-explore-head {
margin-bottom: 28px;
}
.rc-explore-item {
min-width: 190px;
padding: 16px 18px;
font-size: 13px;
}
.rc-explore-marquee::before,
.rc-explore-marquee::after {
width: 60px;
}
.rc-marquee-right .rc-explore-track {
animation-duration: 24s;
}
.rc-marquee-left .rc-explore-track {
animation-duration: 27s;
}
}
/* =========================================================
TECH SUPPORT QUESTIONS SECTION
========================================================= */
.rc-qna-section {
position: relative;
padding: 70px 20px 110px;
}
.rc-qna-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 390px minmax(0, 1fr);
gap: 70px;
align-items: center;
}
/* =========================================================
LEFT INTRO
========================================================= */
.rc-qna-intro {
position: relative;
}
.rc-qna-kicker {
display: inline-flex;
margin-bottom: 18px;
color: #596ff2;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.35px;
}
.rc-qna-intro h2 {
margin: 0 0 20px;
color: #11193d;
font-size:30px;
line-height: 1.04;
font-weight: 800;
letter-spacing: -2px;
}
.rc-qna-intro h2 span {
display: block;
margin-top: 6px;
background:
linear-gradient(
90deg,
#315df4,
#724cf3
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rc-qna-intro p {
max-width: 360px;
margin: 0;
color: #687391;
font-size: 14px;
line-height: 1.85;
}
/* =========================================================
LIST
========================================================= */
.rc-qna-list {
display: grid;
gap: 13px;
}
/* =========================================================
ITEM
========================================================= */
.rc-qna-item {
position: relative;
overflow: hidden;
border-radius: 20px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.97),
rgba(243,247,255,.92)
);
border:
1px solid rgba(174,195,255,.72);
box-shadow:
0 10px 30px rgba(44,68,145,.055);
transition:
border-color .35s ease,
box-shadow .4s ease,
background .4s ease;
}
/* open state */
.rc-qna-item.is-open {
border-color:
rgba(75,105,255,.40);
background:
linear-gradient(
145deg,
#ffffff,
#f0f5ff
);
box-shadow:
0 16px 38px rgba(44,68,145,.09);
}
/* =========================================================
LEFT ACCENT LINE
========================================================= */
.rc-qna-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background:
linear-gradient(
180deg,
#31c2dc,
#4e71f5,
#7951f2
);
transform:
scaleY(0);
transform-origin:
center;
opacity: 0;
transition:
transform .5s cubic-bezier(.22,1,.36,1),
opacity .35s ease;
}
.rc-qna-item.is-open::before {
transform: scaleY(1);
opacity: 1;
}
/* =========================================================
QUESTION BUTTON
========================================================= */
.rc-qna-trigger {
width: 100%;
min-height: 74px;
padding:
17px 20px
17px 22px;
display: grid;
grid-template-columns:
1fr 42px;
gap: 18px;
align-items: center;
border: 0;
outline: 0;
background: transparent;
cursor: pointer;
text-align: left;
font-family: inherit;
}
/* =========================================================
QUESTION TEXT
========================================================= */
.rc-qna-title {
color: #17203e;
font-size: 14px;
font-weight: 800;
line-height: 1.5;
transition:
color .35s ease,
transform .45s cubic-bezier(.22,1,.36,1);
}
.rc-qna-item.is-open .rc-qna-title {
color: #345cf0;
transform:
translateX(3px);
}
/* =========================================================
PLUS / MINUS ICON
========================================================= */
.rc-qna-plus {
position: relative;
width: 38px;
height: 38px;
display: grid;
place-items: center;
justify-self: end;
border-radius: 12px;
background: #eef1ff;
border:
1px solid rgba(98,120,255,.08);
transition:
background .4s ease,
transform .5s cubic-bezier(.22,1,.36,1),
box-shadow .4s ease;
}
.rc-qna-plus i {
position: absolute;
width: 15px;
height: 2px;
border-radius: 4px;
background: #5369ff;
transition:
transform .45s cubic-bezier(.22,1,.36,1),
background .35s ease,
opacity .35s ease;
}
.rc-qna-plus i:first-child {
transform: rotate(0deg);
}
.rc-qna-plus i:last-child {
transform: rotate(90deg);
}
/* open icon */
.rc-qna-item.is-open .rc-qna-plus {
background:
linear-gradient(
145deg,
#426df5,
#6c50ef
);
box-shadow:
0 8px 20px rgba(62,87,220,.18);
transform:
rotate(180deg);
}
.rc-qna-item.is-open .rc-qna-plus i {
background: #ffffff;
}
.rc-qna-item.is-open .rc-qna-plus i:last-child {
transform:
rotate(90deg)
scaleX(0);
opacity: 0;
}
/* =========================================================
ANSWER WRAPPER
========================================================= */
.rc-qna-body {
display: grid;
grid-template-rows: 0fr;
transition:
grid-template-rows .62s
cubic-bezier(.22,1,.36,1);
}
.rc-qna-item.is-open .rc-qna-body {
grid-template-rows: 1fr;
}
/* =========================================================
ANSWER CONTENT
========================================================= */
.rc-qna-body-inner {
min-height: 0;
overflow: hidden;
padding:
0 70px
0 22px;
color: #687391;
font-size: 13px;
line-height: 1.75;
opacity: 0;
transform:
translateY(-7px);
transition:
opacity .42s ease,
transform .55s cubic-bezier(.22,1,.36,1),
padding .55s cubic-bezier(.22,1,.36,1);
}
.rc-qna-item.is-open .rc-qna-body-inner {
padding:
0 70px
20px 22px;
opacity: 1;
transform:
translateY(0);
}
/* =========================================================
HOVER POLISH
========================================================= */
@media (hover: hover) and (pointer: fine) {
.rc-qna-item:hover {
border-color:
rgba(75,105,255,.28);
box-shadow:
0 14px 34px rgba(44,68,145,.075);
}
.rc-qna-item:hover .rc-qna-title {
color: #345cf0;
}
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.rc-qna-container {
grid-template-columns: 1fr;
gap: 45px;
}
.rc-qna-intro {
max-width: 650px;
}
.rc-qna-intro p {
max-width: 600px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.rc-qna-section {
padding:
55px 15px
80px;
}
.rc-qna-container {
gap: 34px;
}
.rc-qna-intro h2 {
font-size:
clamp(
36px,
11vw,
48px
);
letter-spacing: -1.3px;
}
.rc-qna-intro p {
font-size: 13.5px;
line-height: 1.75;
}
.rc-qna-trigger {
min-height: 66px;
padding:
15px 15px
15px 17px;
grid-template-columns:
1fr 35px;
gap: 11px;
}
.rc-qna-title {
font-size: 13px;
}
.rc-qna-plus {
width: 34px;
height: 34px;
border-radius: 10px;
}
.rc-qna-plus i {
width: 13px;
}
.rc-qna-body-inner {
padding-left: 17px;
padding-right: 18px;
font-size: 12.5px;
}
.rc-qna-item.is-open .rc-qna-body-inner {
padding:
0 18px
18px 17px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.rc-qna-item,
.rc-qna-item::before,
.rc-qna-title,
.rc-qna-plus,
.rc-qna-plus i,
.rc-qna-body,
.rc-qna-body-inner {
transition: none !important;
}
}
/* =========================================================
GET A QUOTE CTA
========================================================= */
.rc-quote-cta-section {
position: relative;
}
.rc-quote-cta-wrap {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
MAIN BOX
========================================================= */
.rc-quote-cta-box {
position: relative;
overflow: hidden;
min-height: 300px;
padding: 52px 55px;
display: grid;
grid-template-columns:
minmax(0,1.2fr)
minmax(260px,.55fr);
align-items: center;
gap: 45px;
border-radius: 34px;
background:
radial-gradient(
circle at 12% 85%,
rgba(45,181,255,.18),
transparent 30%
),
radial-gradient(
circle at 88% 15%,
rgba(122,79,255,.22),
transparent 28%
),
linear-gradient(
120deg,
#101946 0%,
#19245d 48%,
#312171 100%
);
border:
1px solid rgba(255,255,255,.08);
box-shadow:
0 30px 70px rgba(28,39,110,.20);
color: #ffffff;
}
/* =========================================================
DECORATIVE GLOW
========================================================= */
.rc-quote-glow {
position: absolute;
display: block;
border-radius: 50%;
pointer-events: none;
}
.rc-quote-glow-one {
width: 260px;
height: 260px;
left: -110px;
bottom: -130px;
background:
radial-gradient(
circle,
rgba(50,191,255,.22),
transparent 70%
);
}
.rc-quote-glow-two {
width: 250px;
height: 250px;
right: -100px;
top: -120px;
background:
radial-gradient(
circle,
rgba(135,86,255,.24),
transparent 70%
);
}
/* =========================================================
CONTENT
========================================================= */
.rc-quote-content {
position: relative;
z-index: 2;
}
.rc-quote-label {
display: inline-flex;
margin-bottom: 16px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,.08);
border:
1px solid rgba(255,255,255,.12);
color: #dce3ff;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rc-quote-content h2 {
max-width: 700px;
margin: 0 0 16px;
color: #ffffff;
font-size: clamp(
38px,
4.8vw,
38px
);
line-height: 51px;
font-weight: 800;
letter-spacing: -2px;
}
.rc-quote-content h2 span {
display: block;
background:
linear-gradient(
90deg,
#61c8ff,
#7381ff,
#ac6cff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rc-quote-content p {
max-width: 650px;
margin: 0;
color:
rgba(226,232,255,.76);
font-size: 14.5px;
line-height: 1.8;
}
/* =========================================================
ACTION
========================================================= */
.rc-quote-action {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-self: end;
}
/* =========================================================
BUTTON
========================================================= */
.rc-quote-main-btn {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 12px;
padding:
17px 28px;
border-radius: 15px;
background:
linear-gradient(
135deg,
#ffffff,
#eef2ff
);
color: #17204a;
text-decoration: none;
font-size: 15px;
font-weight: 800;
box-shadow:
0 17px 35px rgba(0,0,0,.18);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.rc-quote-main-btn::before {
content: '';
position: absolute;
top: 0;
left: -80%;
width: 45%;
height: 100%;
background:
linear-gradient(
120deg,
transparent,
rgba(75,107,255,.18),
transparent
);
transform: skewX(-20deg);
transition: left .7s ease;
}
.rc-quote-main-btn:hover {
transform:
translateY(-4px)
scale(1.02);
box-shadow:
0 22px 42px rgba(0,0,0,.24);
}
.rc-quote-main-btn:hover::before {
left: 140%;
}
.rc-quote-main-btn span {
display: inline-block;
color: #4d67f4;
font-size: 18px;
transition:
transform .3s ease;
}
.rc-quote-main-btn:hover span {
transform: translateX(5px);
}
.rc-quote-action small {
display: block;
margin-top: 13px;
color:
rgba(223,229,255,.62);
font-size: 11px;
line-height: 1.5;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 900px) {
.rc-quote-cta-box {
grid-template-columns: 1fr;
padding: 45px 35px;
gap: 32px;
}
.rc-quote-action {
justify-self: start;
}
}
@media (max-width: 650px) {
.rc-quote-cta-section {
padding:
35px 15px
70px;
}
.rc-quote-cta-box {
min-height: auto;
padding:
34px 22px;
border-radius: 24px;
}
.rc-quote-content h2 {
font-size:
clamp(
34px,
10vw,
46px
);
letter-spacing: -1.4px;
}
.rc-quote-content p {
font-size: 13.5px;
}
.rc-quote-main-btn {
padding:
14px 22px;
font-size: 14px;
}
}
@media (max-width: 400px) {
.rc-quote-main-btn {
width: 100%;
justify-content: center;
}
.rc-quote-action {
width: 100%;
}
}
/* =========================================================
CONTACT PANEL SECTION
========================================================= */
.rc-contact-panel-section {
position: relative;
padding: 55px 20px 100px;
}
.rc-contact-panel-wrap {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
MAIN BOX
========================================================= */
.rc-contact-panel-box {
position: relative;
display: grid;
grid-template-columns: 365px minmax(0,1fr);
gap: 40px;
padding: 32px;
border-radius: 34px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.96),
rgba(242,246,255,.96)
);
border:
1px solid rgba(190,203,240,.65);
box-shadow:
0 24px 70px rgba(52,68,130,.10);
}
/* =========================================================
LEFT CARD
========================================================= */
.rc-contact-info-card {
position: relative;
overflow: hidden;
padding: 38px 30px;
min-height: 100%;
border-radius: 28px;
background:
linear-gradient(
145deg,
#3f72f6 0%,
#315bd2 48%,
#2748a7 100%
);
color: #ffffff;
box-shadow:
0 22px 45px rgba(48,86,202,.22);
}
.rc-contact-info-card h3 {
position: relative;
z-index: 2;
margin: 0 0 30px;
max-width: 210px;
font-size: 31px;
line-height: 1.15;
font-weight: 800;
}
/* =========================================================
INFO LIST
========================================================= */
.rc-contact-info-list {
position: relative;
z-index: 2;
display: grid;
gap: 22px;
}
.rc-contact-info-item {
display: grid;
grid-template-columns: 52px 1fr;
gap: 14px;
align-items: start;
}
/* icon */
.rc-contact-info-icon {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
border:
1px dashed rgba(255,255,255,.70);
background:
rgba(255,255,255,.06);
color: #ffffff;
font-size: 18px;
transition:
transform .35s ease,
background .35s ease;
}
.rc-contact-info-item:hover
.rc-contact-info-icon {
transform: translateY(-3px);
background:
rgba(255,255,255,.13);
}
/* text */
.rc-contact-info-copy {
padding-top: 3px;
}
.rc-contact-info-copy strong {
display: block;
margin-bottom: 5px;
color: #ffffff;
font-size: 13px;
font-weight: 800;
}
.rc-contact-info-copy span {
display: block;
color:
rgba(238,243,255,.86);
font-size: 13px;
line-height: 1.65;
word-break: break-word;
}
/* decoration */
.rc-contact-info-shape {
position: absolute;
width: 250px;
height: 250px;
right: -115px;
bottom: -115px;
border-radius: 50%;
background:
rgba(255,255,255,.045);
box-shadow:
0 0 0 55px
rgba(255,255,255,.018);
pointer-events: none;
}
/* =========================================================
FORM AREA
========================================================= */
.rc-contact-form-area {
padding: 16px 8px 10px 0;
}
/* top label */
.rc-contact-form-label {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
padding: 8px 15px;
border-radius: 999px;
background:
#edf2ff;
color:
#4770ef;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.5px;
}
/* title */
.rc-contact-form-area h2 {
margin:
0 0 27px;
color:
#11193d;
font-size:
clamp(
42px,
5vw,
62px
);
line-height: 1;
font-weight: 800;
letter-spacing: -2.5px;
}
/* =========================================================
FORM
========================================================= */
.rc-contact-form {
display: grid;
gap: 15px;
}
.rc-contact-form-row {
display: grid;
grid-template-columns:
repeat(2,minmax(0,1fr));
gap: 15px;
}
/* fields */
.rc-contact-field {
position: relative;
}
.rc-contact-field input,
.rc-contact-field textarea {
width: 100%;
border:
1px solid rgba(171,190,235,.55);
outline: none;
border-radius: 16px;
background:
rgba(246,249,255,.90);
color:
#182140;
font-family: inherit;
font-size: 14px;
transition:
border-color .3s ease,
background .3s ease,
box-shadow .3s ease;
}
/* input */
.rc-contact-field input {
height: 56px;
padding:
0 17px;
}
/* textarea */
.rc-contact-field textarea {
height: 150px;
padding:
16px 17px;
resize: vertical;
}
/* placeholder */
.rc-contact-field input::placeholder,
.rc-contact-field textarea::placeholder {
color:
#8a90a3;
}
/* focus */
.rc-contact-field input:focus,
.rc-contact-field textarea:focus {
border-color:
rgba(73,103,245,.60);
background:
#ffffff;
box-shadow:
0 0 0 4px
rgba(75,104,245,.08);
}
/* =========================================================
BUTTON
========================================================= */
.rc-contact-submit-btn {
justify-self: start;
min-height: 52px;
padding:
0 23px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
outline: 0;
border-radius: 14px;
cursor: pointer;
background:
linear-gradient(
135deg,
#3c70f8,
#6550f0
);
color: #ffffff;
font-family: inherit;
font-size: 14px;
font-weight: 800;
box-shadow:
0 13px 28px
rgba(67,90,224,.22);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.rc-contact-submit-btn span {
font-size: 17px;
transition:
transform .3s ease;
}
.rc-contact-submit-btn:hover {
transform:
translateY(-3px);
box-shadow:
0 18px 35px
rgba(67,90,224,.30);
}
.rc-contact-submit-btn:hover span {
transform:
translateX(4px);
}
/* =========================================================
RESPONSIVE TABLET
========================================================= */
@media (max-width: 991px) {
.rc-contact-panel-box {
grid-template-columns:
1fr;
gap: 30px;
}
.rc-contact-info-card {
min-height: auto;
}
.rc-contact-form-area {
padding: 5px 5px 10px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.rc-contact-panel-section {
padding:
40px 15px
75px;
}
.rc-contact-panel-box {
padding: 18px;
border-radius:
24px;
}
.rc-contact-info-card {
padding:
28px 22px;
border-radius:
22px;
}
.rc-contact-info-card h3 {
font-size:
26px;
margin-bottom:
26px;
}
.rc-contact-info-item {
grid-template-columns:
44px 1fr;
gap: 12px;
}
.rc-contact-info-icon {
width: 44px;
height: 44px;
font-size: 16px;
}
.rc-contact-form-area h2 {
font-size:
clamp(
36px,
10vw,
48px
);
letter-spacing:
-1.5px;
}
.rc-contact-form-row {
grid-template-columns:
1fr;
}
.rc-contact-field input {
height:
53px;
}
.rc-contact-field textarea {
height:
135px;
}
.rc-contact-submit-btn {
width:
100%;
}
}
/* =========================================================
LOCATION MAP SECTION
========================================================= */
.rc-location-map-section {
position: relative;
padding: 10px 20px 95px;
}
.rc-location-map-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
}
/* =========================================================
MAP BOX
========================================================= */
.rc-location-map-box {
position: relative;
width: 100%;
height: 430px;
overflow: hidden;
border-radius: 30px;
background: #eef3ff;
border:
1px solid rgba(167,190,245,.65);
box-shadow:
0 22px 55px
rgba(43,67,135,.12);
transition:
transform .45s cubic-bezier(.22,1,.36,1),
box-shadow .4s ease;
}
/* map */
.rc-location-map-box iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
filter:
saturate(.93)
contrast(1.02);
transition:
transform .7s cubic-bezier(.22,1,.36,1),
filter .4s ease;
}
/* =========================================================
HOVER
========================================================= */
.rc-location-map-box:hover {
transform: translateY(-4px);
box-shadow:
0 28px 65px
rgba(43,67,135,.16);
}
.rc-location-map-box:hover iframe {
filter:
saturate(1)
contrast(1.03);
}
/* =========================================================
SOFT BORDER GLOW
========================================================= */
.rc-location-map-box::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
border:
1px solid rgba(255,255,255,.6);
pointer-events: none;
z-index: 2;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 991px) {
.rc-location-map-box {
height: 380px;
border-radius: 26px;
}
}
@media (max-width: 650px) {
.rc-location-map-section {
padding:
5px 15px
70px;
}
.rc-location-map-box {
height: 320px;
border-radius: 22px;
}
}
@media (max-width: 420px) {
.rc-location-map-box {
height: 285px;
}
}
/* =========================================================
PRIVACY POLICY PAGE
========================================================= */
.rc-privacy-section {
position: relative;
padding: 70px 20px 110px;
}
.rc-privacy-container {
width: 100%;
max-width: 1120px;
margin: 0 auto;
}
/* =========================================================
INTRO
========================================================= */
.rc-privacy-hero {
max-width: 850px;
margin-bottom: 55px;
}
.rc-privacy-label {
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 17px;
padding: 8px 15px;
border-radius: 999px;
background: rgba(255,255,255,.82);
border:
1px solid rgba(88,112,245,.18);
color: #5570f1;
box-shadow:
0 8px 22px rgba(55,78,155,.07);
font-size: 10.5px;
font-weight: 800;
letter-spacing: 1.4px;
}
.rc-privacy-hero h1 {
margin: 0 0 16px;
color: #11193d;
font-size:
clamp(
40px,
7vw,
43px
);
line-height: 1;
font-weight: 800;
letter-spacing: -3px;
}
.rc-privacy-hero p {
max-width: 710px;
margin: 0;
color: #687391;
font-size: 15px;
line-height: 1.8;
}
/* =========================================================
CONTENT BLOCK
========================================================= */
.rc-privacy-block {
position: relative;
padding:
30px 0
34px;
border-bottom:
1px solid rgba(167,181,220,.28);
}
/* subtle left line */
.rc-privacy-block::before {
content: '';
position: absolute;
left: 0;
top: 30px;
width: 3px;
height: 0;
border-radius: 10px;
background:
linear-gradient(
180deg,
#31c3dd,
#4f72f5,
#7550ef
);
opacity: 0;
transition:
height .5s cubic-bezier(.22,1,.36,1),
opacity .3s ease;
}
.rc-privacy-block:hover::before {
height: 28px;
opacity: 1;
}
/* =========================================================
HEADINGS
========================================================= */
.rc-privacy-block h2 {
margin:
0 0 14px;
color: #17203e;
font-size: 21px;
font-weight: 800;
line-height: 1.4;
transition:
color .3s ease,
padding-left .4s cubic-bezier(.22,1,.36,1);
}
.rc-privacy-block:hover h2 {
color: #3d61ed;
padding-left: 10px;
}
/* =========================================================
PARAGRAPHS
========================================================= */
.rc-privacy-block p {
max-width: 100%;
margin:
0 0 13px;
color: #000000;
font-size: 14px;
line-height: 1.9;
}
.rc-privacy-block p:last-child {
margin-bottom: 0;
}
/* =========================================================
LINK
========================================================= */
.rc-privacy-link {
display: inline-block;
color: #253052;
text-decoration: none;
font-size: 14px;
font-weight: 800;
transition:
color .3s ease,
transform .3s ease;
}
.rc-privacy-link:hover {
color: #4165ef;
transform: translateX(3px);
}
/* =========================================================
FINAL POLICY BLOCK
========================================================= */
.rc-privacy-final {
margin-top: 10px;
padding:
34px 32px;
border:
1px solid rgba(163,185,245,.56);
border-radius: 22px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.96),
rgba(239,245,255,.92)
);
box-shadow:
0 15px 36px rgba(45,67,140,.07);
}
.rc-privacy-final::before {
left: 0;
top: 0;
bottom: 0;
width: 4px;
height: auto;
opacity: 1;
border-radius:
22px 0 0 22px;
}
.rc-privacy-final h2 {
font-size: 20px;
}
/* =========================================================
COMMON REVEAL SUPPORT
========================================================= */
.rc-scroll-reveal[data-reveal-effect="process-up"],
.rc-scroll-reveal[data-reveal-effect="title-up"] {
opacity: 0;
filter: blur(6px);
transform:
translateY(42px);
}
.rc-scroll-reveal.rc-visible {
opacity: 1 !important;
filter: blur(0) !important;
transform:
translate3d(0,0,0) !important;
transition:
opacity .75s
cubic-bezier(.22,1,.36,1),
transform .9s
cubic-bezier(.22,1,.36,1),
filter .7s ease;
transition-delay:
var(--reveal-delay,0s);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 991px) {
.rc-privacy-section {
padding:
60px 20px
90px;
}
.rc-privacy-hero {
margin-bottom:
40px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 650px) {
.rc-privacy-section {
padding:
45px 15px
75px;
}
.rc-privacy-hero {
margin-bottom:
32px;
}
.rc-privacy-hero h1 {
font-size:
clamp(
42px,
14vw,
58px
);
letter-spacing:
-2px;
}
.rc-privacy-hero p {
font-size:
13.5px;
line-height:
1.75;
}
.rc-privacy-block {
padding:
25px 0
28px;
}
.rc-privacy-block h2 {
font-size:
18px;
}
.rc-privacy-block p {
font-size:
13px;
line-height:
1.8;
}
.rc-privacy-final {
padding:
26px 20px;
border-radius:
18px;
}
}