@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
--orange:#E84800;
--orange2:#FF6A1A;
--amber:#F59E0B;
--light:#F8F9FC;
--light2:#EEF0F7;
--light3:#E2E6F0;
--text:#1A1D2E;
--muted:#6B7280;
--white:#fff;
--glow:rgba(232,72,0,.28);
--sh:0 2px 16px rgba(30,40,80,.08);
--shm:0 6px 32px rgba(30,40,80,.13);
--shl:0 16px 56px rgba(30,40,80,.16);
--ad-w:170px;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: "Montserrat", sans-serif!important;
    background: var(--light);
    color: var(--text);
    overflow-x: hidden;
}
h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif!important;
}
::-webkit-scrollbar {
width:4px;
}
::-webkit-scrollbar-track {
background:var(--light2);
}
::-webkit-scrollbar-thumb {
background:#3d3b65;
border-radius:2px;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 800!important;
}
/* ════════════ TOP BAR ════════════ */
.topbar {
    background: #3d3b65;
    padding: 6px 0;
    font-size: .72rem;
    color: rgba(255,255,255,.92);
}
.topbar a {
    color: rgba(255,255,255,.92);
    text-decoration: none;
    transition: .2s;
	font-size: 17px;
	font-weight: 600;
}
.topbar a:hover {
    color: #fff;
}
.cert-pill-top {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: .5px;
}
.marquee-wrap {
    overflow: hidden;
    max-width: 280px;
}
.marquee-inner {
    display: flex;
    gap: 28px;
    animation: marquee 18s linear infinite;
    white-space: nowrap;
    color: rgba(255,255,255,.8);
    font-size: .67rem;
}
@keyframes marquee {
0% {
transform:translateX(0);
}
100% {
transform:translateX(-50%);
}
}
/* ════════════ NAVBAR ════════════ */
.navbar {
    background: #fff;
    border-bottom: 2px solid var(--light3);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--sh);
}
.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}
.brand-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #3d3b65, var(--orange2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    box-shadow: 0 4px 14px var(--glow);
}
.brand-text {
    font-family: 'Montserrat', sans-serif!important;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--text);
    letter-spacing: 2px;
}
.brand-text span {
    color: #3d3b65;
}
.brand-sub {
    font-size: .52rem;
    color: var(--muted);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: -2px;
}
.nav-link {
    color: Black!important;
    font-size: 17px;  
    padding: 22px 14px!important;
    position: relative;
    transition: .2s;
	font-weight: 700;
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #3d3b65;
    transform: translateX(-50%);
    transition: .3s;
    border-radius: 2px;
}
.nav-link:hover {
    color: #3d3b65!important;
}
.nav-link:hover::after, .nav-link.active::after {
    width: 70%;
}
.nav-link.active {
    color: #3d3b65!important;
}
/* mega */
.mega-wrap {
    position: static;
}
.mega-menu {
    position: absolute!important;
    left: 0!important;
    right: 0!important;
    top: 100%!important;
    min-width: 100vw!important;
    background: #fff!important;
    border: none!important;
    border-top: 2px solid #3d3b65!important;
    border-radius: 0!important;
    padding: 0!important;
    box-shadow: 0 20px 50px rgba(30,40,80,.12)!important;
    animation: megaDrop .18s ease;
}
@keyframes megaDrop {
from {
opacity:0;
transform:translateY(-6px);
}
to {
opacity:1;
transform:translateY(0);
}
}
.mega-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 26px 38px;
}
.mega-head {
    font-family: 'Montserrat', sans-serif!important;
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #3d3b65;
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--light3);
}
.mega-link {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 6px;
    color: black;
    text-decoration: none;
    font-size: 16px;
    transition: .2s;
}
.mega-link:hover {
    background: rgba(232,72,0,.06);
    color: #3d3b65!important;
    padding-left: 12px;
}
.mega-link i {
    color: #3d3b65;
    width: 14px;
    font-size: .72rem;
}
.mega-promo {
    background: linear-gradient(135deg, #FFF3EE, #FFFBF8);
    border: 1px solid rgba(232,72,0,.15);
    border-radius: 14px;
    padding: 22px;
    height: 100%;
}
.mega-promo h5 {
    font-family: 'Montserrat', sans-serif!important;
    font-size: .8rem;
    color: #3d3b65;
    margin-bottom: 7px;
}
.mega-promo p {
    font-size: .77rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 14px;
}
.btn-mega {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #3d3b65;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: .77rem;
    font-weight: 600;
    text-decoration: none;
    transition: .2s;
}
.btn-mega:hover {
    background: var(--orange2);
    color: #fff;
    transform: translateY(-1px);
}
.btn-navbar {
    background: #3d3b65!important;
    color: #fff!important;
    padding: 9px 18px!important;
    border-radius: 8px!important;
    font-weight: 600!important;
    font-size: .8rem!important;
    box-shadow: 0 4px 14px var(--glow);
    transition: .2s;
}
.btn-navbar:hover {
    background: var(--orange2)!important;
    transform: translateY(-1px);
}
.btn-navbar::after {
    display: none!important;
}
/* ════════════ LAYOUT ════════════ */
.layout {
    display: flex;
    width: 100%;
    position: relative;
}
.main-col {
    flex: 1;
    min-width: 0;
}
/* ════════════ STICKY ADS ════════════ */
.ad-col {
    width: var(--ad-w);
    flex-shrink: 0;
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--light);
    /* sticky */
    position: sticky;
    top: 66px; /* navbar height */
    height: calc(100vh - 66px);
    overflow-y: auto;
    overflow-x: hidden;
    align-self: flex-start;
    scrollbar-width: none;
}
.ad-col::-webkit-scrollbar {
display:none;
}

@media(max-width:1100px) {
.ad-col {
    display: none;
}
}
/* hide ads when footer is visible — handled by JS adding .ads-hidden */
.ad-col.ads-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(30px);
    transition: opacity .4s, transform .4s;
}
.ad-col {
    transition: opacity .4s, transform .4s;
}
.ad-card {
    background: #fff;
    border: 1px solid var(--light3);
    border-radius: 12px;
    padding: 13px 10px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
    box-shadow: var(--sh);
}
.ad-card:hover {
    border-color: #3d3b65;
    box-shadow: 0 6px 22px rgba(232,72,0,.12);
    transform: translateY(-2px);
}
.ad-label {
    font-size: .53rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3d3b65;
    font-weight: 700;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.ad-label::before, .ad-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(232,72,0,.2);
}
.ad-emoji {
    font-size: 1.7rem;
    display: block;
    margin-bottom: 5px;
}
.ad-title {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 4px;
}
.ad-sub {
    font-size: .58rem;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 7px;
}
.ad-btn {
    display: inline-block;
    font-size: .57rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: #3d3b65;
    color: #fff;
    border: none;
    cursor: pointer;
}
.ad-card.teal .ad-label {
    color: #0891B2;
}
.ad-card.teal .ad-label::before, .ad-card.teal .ad-label::after {
    background: rgba(8,145,178,.2);
}
.ad-card.teal .ad-btn {
    background: #0891B2;
}
.ad-card.teal:hover {
    border-color: #0891B2;
}
.ad-card.purple .ad-label {
    color: #7C3AED;
}
.ad-card.purple .ad-label::before, .ad-card.purple .ad-label::after {
    background: rgba(124,58,237,.2);
}
.ad-card.purple .ad-btn {
    background: #7C3AED;
}
.ad-card.purple:hover {
    border-color: #7C3AED;
}
.ad-card.gold .ad-label {
    color: #D97706;
}
.ad-card.gold .ad-label::before, .ad-card.gold .ad-label::after {
    background: rgba(217,119,6,.2);
}
.ad-card.gold .ad-btn {
    background: #D97706;
}
.ad-card.gold:hover {
    border-color: #D97706;
}
/* ════════════ HERO ════════════ */
.hero {
    position: relative;
    overflow: hidden;
}
/* Background slide images */
.hero-bg-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}
.hero-bg-slide.active {
    opacity: 1;
}
/* Overlay keeps text readable */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(110deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.75) 45%, rgba(255,255,255,.2) 100%);
}
.hero-slide {
    min-height: 490px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}
.hero-content {
    padding: 50px 44px 50px 44px;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(232,72,0,.1);
    border: 1px solid rgba(232,72,0,.22);
    color: #3d3b65;
    font-size: .69rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 15px;
}
.hero-h1 {
    font-size: 2.55rem;
    font-weight: 900;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 13px;
}
.hero-h1 .lo {
    color: #3d3b65;
}
.hero-desc {
    color: black;
    font-size: 17px;
    line-height: 1.8;
    max-width: 470px;
    margin-bottom: 20px;
}
.hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 24px;
}
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.85);
    border: 1px solid var(--light3);
    color: var(--text);
    font-size: .73rem;
    padding: 4px 10px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}
.hero-tag i {
    color: #3d3b65;
    font-size: .72rem;
}
.hero-btns {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
}
.btn-ps {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3d3b65;
    color: #fff;
    padding: 12px 26px;
    border-radius: 10px;
    font-weight: 700;
    font-size: .87rem;
    letter-spacing: .5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px var(--glow);
    transition: .3s;
}
.btn-ps:hover {
    background: var(--orange2);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px var(--glow);
    color: #fff;
}
.btn-os {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.9);
    border: 2px solid #3d3b65;
    color: #3d3b65;
    padding: 11px 22px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .87rem;
    text-decoration: none;
    transition: .3s;
    backdrop-filter: blur(6px);
}
.btn-os:hover {
    background: #3d3b65;
    color: #fff;
    transform: translateY(-2px);
}
/* Hero visual */
.hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    padding: 28px;
}
.hero-ring {
    width: 285px;
    height: 285px;
    border-radius: 50%;
    border: 2px dashed rgba(232,72,0,.25);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spin 26s linear infinite;
}
.hero-ring::before {
    content: '';
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px solid rgba(232,72,0,.1);
}
@keyframes spin {
from {
transform:rotate(0);
}
to {
transform:rotate(360deg);
}
}
.hero-cc {
    position: absolute;
    width: 174px;
    height: 174px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3d3b65, var(--orange2));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 40px var(--glow);
    animation: none;
}
.hero-bn {
    font-family: 'Montserrat', sans-serif!important;
    font-size: 1.9rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}
.hero-bl {
    font-size: .58rem;
    color: rgba(255,255,255,.8);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}
.od {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #3d3b65;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 8px var(--glow);
}
.od:nth-child(1) {
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
}
.od:nth-child(2) {
    top: 50%;
    right: -5px;
    transform: translateY(-50%);
}
.od:nth-child(3) {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}
.od:nth-child(4) {
    top: 50%;
    left: -5px;
    transform: translateY(-50%);
}
.hf {
    position: absolute;
    background: rgba(255,255,255,.92);
    border: 1px solid var(--light3);
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: var(--shm);
    font-size: .74rem;
    backdrop-filter: blur(8px);
}
.hf.f1 {
    top: 10%;
    right: 4%;
    animation: floatY 4s ease-in-out infinite;
}
.hf.f2 {
    bottom: 18%;
    right: 2%;
    animation: floatY 4s ease-in-out infinite .5s;
}
.hf.f3 {
    top: 55%;
    left: -2%;
    animation: floatY 4s ease-in-out infinite 1s;
}
@keyframes floatY {
0%, 100% {
transform:translateY(0);
}
50% {
transform:translateY(-8px);
}
}
.fv {
    font-family: 'Montserrat', sans-serif!important;
    font-size: .92rem;
    font-weight: 700;
    color: #3d3b65;
}
.fl {
    font-size: .61rem;
    color: var(--muted);
}
.hero-dots {
    display: flex;
    gap: 8px;
    padding: 0 44px 24px;
    position: relative;
    z-index: 3;
}
.hero-dot {
    width: 28px;
    height: 4px;
    border-radius: 2px;
    background: rgba(232,72,0,.2);
    cursor: pointer;
    transition: .3s;
}
.hero-dot.active {
    background: #3d3b65;
    width: 44px;
}
/* ════════════ STATS ════════════ */
.stats-strip {
    background: #3d3b65;
    padding: 20px 0;
}
.stat-item {
    text-align: center;
    padding: 0 18px;
}
.stat-num {
    font-family: 'Montserrat', sans-serif!important;
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
}
.stat-lbl {
    font-size: .68rem;
    color: rgba(255,255,255,.75);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2px;
}
.stat-div {
    width: 1px;
    height: 38px;
    background: rgba(255,255,255,.2);
    align-self: center;
}
/* ════════════ SECTIONS ════════════ */
section {
    padding: 66px 0;
}
.sec-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #3d3b65;
    margin-bottom: 9px;
}
.sec-label::before {
    content: '';
    width: 20px;
    height: 2px;
    background: #3d3b65;
    border-radius: 1px;
}
.sec-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 9px;
    line-height: 1.2;
}
.sec-desc {
    color: black;
    font-size: 1.00rem;
    line-height: 1.8;
}
.sec-center {
    text-align: center;
}
.sec-center .sec-label {
    justify-content: center;
}
.sec-center .sec-desc {
    margin: 0 auto;
}
/* ════════════ ABOUT ════════════ */
.about-section {
    background: var(--light2);
}
.about-block {
    background: #fff;
    border: 1px solid var(--light3);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--sh);
}
.abn {
    font-family: 'Montserrat', sans-serif!important;
    font-size: 3.4rem;
    font-weight: 900;
    color: #3d3b65;
    line-height: 1;
}
.abl {
    font-size: .7rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 2px;
}
.cert-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
}
.cp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #FFF3EE;
    border: 1px solid rgba(232,72,0,.2);
    color: #3d3b65;
    font-size: .69rem;
    padding: 4px 11px;
    border-radius: 20px;
    font-weight: 600;
}
.feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}
.fi {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    background: var(--light);
    border: 1px solid var(--light3);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: .79rem;
    color: var(--text);
    transition: .2s;
	font-size: 16px;
}
.fi:hover {
    background: #FFF3EE;
    border-color: rgba(232,72,0,.2);
}
.fi i {
    color: #3d3b65;
    margin-top: 1px;
    flex-shrink: 0;
}
/* ════════════ CLIENTS ════════════ */
.clients-section {
    background: #fff;
}
.client-card {
    background: #fff;
    border: 1px solid var(--light3);
    border-radius: 16px;
    padding: 22px;
    height: 100%;
    transition: .3s;
    box-shadow: var(--sh);
    position: relative;
    overflow: hidden;
}
.client-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3d3b65, transparent);
    transform: scaleX(0);
    transition: .3s;
}
.client-card:hover {
    transform: translateY(-5px);
    border-color: rgba(232,72,0,.2);
    box-shadow: var(--shl);
}
.client-card:hover::before {
    transform: scaleX(1);
}
.clgt {
    font-family: 'Montserrat', sans-serif!important;
    font-size: .8rem;
    font-weight: 800;
    margin-bottom: 5px;
}
.bp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .61rem;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
    margin-bottom: 9px;
}
.bp-gold {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    color: #D97706;
    margin-top: 20px;
	font-size: 13px;
}
.bp-diamond {
    background: #E0F2FE;
    border: 1px solid #7DD3FC;
    color: #0369A1;
    margin-top: 20px;
	font-size: 13px;
}
.bp-national {
    background: #DCFCE7;
    border: 1px solid #86EFAC;
    color: #166534;
    margin-top: 20px;
	font-size: 13px;
}
.cloc {
    font-size: 14px;
    color: black;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.cdesc {
    font-size: 17px;
    color: #000000;
    font-weight: 500;
    line-height: 1.6;
    margin-bottom: 12px;
}
.cbtns {
    display: flex;
    gap: 6px;
}
.cbtn {
    font-size: .99rem;
    padding: 5px 11px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
    border: 1.5px solid;
}
.co {
    color: #3d3b65;
    border-color: rgba(232,72,0,.3);
}
.co:hover {
    background: #3d3b65;
    color: #fff;
    border-color: #3d3b65;
}
.cf {
    color: var(--text);
    background: var(--light);
    border-color: var(--light3);
}
.cf:hover {
    background: var(--light3);
    color: var(--text);
}
/* ════════════ MVV ════════════ */
.mvv-section {
    background: var(--light2);
}
.mvv-card {
    background: #fff;
    border: 1px solid var(--light3);
    border-radius: 20px;
    padding: 32px 24px;
    height: 100%;
    transition: .3s;
    text-align: center;
    box-shadow: var(--sh);
}
.mvv-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shl);
    border-color: rgba(232,72,0,.2);
}
.mvi {
    width: 62px;
    height: 62px;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.65rem;
}
.mvi.i1 {
    background: linear-gradient(135deg, #FFF3EE, #FFE8DC);
    color: #3d3b65;
}
.mvi.i2 {
    background: linear-gradient(135deg, #FFFBEB, #FEF3C7);
    color: #D97706;
}
.mvi.i3 {
    background: linear-gradient(135deg, #F0FDF4, #DCFCE7);
    color: #16A34A;
}
.mvv-card h4 {
    font-size: .9rem;
    color: var(--text);
    margin-bottom: 9px;
    letter-spacing: 1px;
}
.mvv-card p {
    font-size: .99rem;
    color: Black;
    line-height: 1.8;
	
}
/* ════════════ WHY ════════════ */
.why-section {
    background: #fff;
}
.why-card {
    background: var(--light);
    border: 1px solid var(--light3);
    border-radius: 16px;
    padding: 24px 20px;
    height: 100%;
    transition: .3s;
    position: relative;
    overflow: hidden;
}
.why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(232,72,0,.25);
    box-shadow: var(--shm);
}
.why-num {
    font-family: 'Montserrat', sans-serif!important;
    font-size: 2.8rem;
    font-weight: 900;
    position: absolute;
    top: 12px;
    right: 14px;
    color: rgba(232,72,0,.06);
    line-height: 1;
}
.why-icon {
    width: 48px;
    height: 48px;
    background: #3d3b65;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 13px;
    box-shadow: 0 4px 14px var(--glow);
}
.why-card h5 {
    font-size: .76rem;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: .5px;
	margin-top: 15px;
}
.why-card p {
    font-size: .99rem;
    color: black;
    line-height: 1.7;
}
/* ════════════ SUPPORT ════════════ */
.sup-section {
    background: var(--light2);
    border-top: 1px solid var(--light3);
    border-bottom: 1px solid var(--light3);
    padding: 38px 0;
}
.sup-item {
    text-align: center;
    padding: 14px 18px;
}
.sup-icon {
    width: 52px;
    height: 52px;
    border: 2px solid rgba(232,72,0,.18);
    background: #FFF3EE;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 11px;
    font-size: 1.3rem;
    color: #3d3b65;
    transition: .3s;
}
.sup-item:hover .sup-icon {
    background: #3d3b65;
    color: #fff;
    box-shadow: 0 4px 16px var(--glow);
}
.sup-item h6 {
    font-size: .8rem;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 3px;
}
.sup-item p {
    font-size: .7rem;
    color: var(--muted);
}
/* ════════════ TESTIMONIALS ════════════ */
.testi-section {
    background: var(--light2);
}
.testi-card {
    background: #fff;
    border: 1px solid var(--light3);
    border-radius: 20px;
    padding: 26px;
    height: 100%;
    transition: .3s;
    box-shadow: var(--sh);
    position: relative;
}
.testi-card:hover {
    border-color: rgba(232,72,0,.2);
    transform: translateY(-3px);
    box-shadow: var(--shm);
}
.qm {
    font-size: 3.4rem;
    line-height: 1;
    color: #3d3b65;
    opacity: .12;
    font-family: Georgia, serif;
    position: absolute;
    top: 11px;
    left: 17px;
}
.ts {
    display: flex;
    gap: 2px;
    margin-bottom: 11px;
}
.ts i {
    color: #F59E0B;
    font-size: .83rem;
}
.tt {
    font-size: .99rem;
    color: black;
    line-height: 1.8;
    margin-bottom: 16px;
    font-style: italic;
}
.ta {
    display: flex;
    align-items: center;
    gap: 11px;
}
.tav {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3d3b65, var(--orange2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif!important;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.tn {
    font-size: .83rem;
    font-weight: 600;
    color: var(--text);
}
.tr {
    font-size: .68rem;
    color: var(--muted);
}
.testi-nav {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 22px;
}
.testi-nav button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--light3);
    background: #fff;
    color: #3d3b65;
    cursor: pointer;
    transition: .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--sh);
}
.testi-nav button:hover {
    background: #3d3b65;
    color: #fff;
    border-color: #3d3b65;
}
/* ════════════ QUOTE ════════════ */
.quote-section {
    background: #fff;
}
.form-block {
    background: var(--light);
    border: 1px solid var(--light3);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--sh);
}
.form-label {
    font-size: .73rem;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .7px;
}
.form-control, .form-select {
    background: #fff!important;
    border: 1.5px solid var(--light3)!important;
    color: var(--text)!important;
    border-radius: 8px!important;
    font-size: .84rem!important;
    padding: 10px 13px!important;
    transition: .25s!important;
}
.form-control:focus, .form-select:focus {
    border-color: #3d3b65!important;
    box-shadow: 0 0 0 3px rgba(232,72,0,.08)!important;
}
.form-control::placeholder {
color:#B0B7C8!important;
}
.partner-block {
    background: linear-gradient(135deg, #FFF3EE, #FFFBF8);
    border: 2px solid rgba(232,72,0,.15);
    border-radius: 20px;
    padding: 28px;
    height: 100%;
}
.partner-block h4 {
    font-size: .9rem;
    color: #3d3b65;
    margin-bottom: 5px;
    letter-spacing: 1px;
}
.psub {
    font-size: .79rem;
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 16px;
}
.pi {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 11px;
    font-size: .8rem;
    color: var(--text);
}
.pi i {
    color: #3d3b65;
    margin-top: 2px;
    flex-shrink: 0;
}
.pc {
    background: #fff;
    border: 1px solid var(--light3);
    border-radius: 10px;
    padding: 11px;
    margin-top: 9px;
    box-shadow: var(--sh);
}
.pc .pl {
    font-size: .59rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}
.pc .pv {
    font-family: 'Montserrat', sans-serif!important;
    font-size: .8rem;
    color: #3d3b65;
    font-weight: 700;
}
/* ════════════ FOOTER ════════════ */
footer {
    background: var(--text);
    padding: 48px 0 0;
}
footer h6 {
    font-family: 'Montserrat', sans-serif!important;
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 13px;
}
footer a {
    display: block;
    font-size: .78rem;
    color: rgba(255,255,255,.48);
    text-decoration: none;
    padding: 3px 0;
    transition: .2s;
}
footer a:hover {
    color: var(--orange2);
    padding-left: 5px;
}
.fdesc {
    font-size: .78rem;
    line-height: 1.8;
    color: rgba(255,255,255,.44);
}
.fsoc {
    display: flex;
    gap: 7px;
    margin-top: 13px;
}
.fsoc a {
    width: 33px;
    height: 33px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.48);
    font-size: .86rem;
    transition: .2s;
}
.fsoc a:hover {
    background: #3d3b65;
    color: #fff;
    border-color: #3d3b65;
}
.fbot {
    background: rgba(0,0,0,.22);
    border-top: 1px solid rgba(255,255,255,.05);
    padding: 14px 0;
    margin-top: 36px;
    text-align: center;
    font-size: .71rem;
    color: rgba(255,255,255,.33);
}
.fbot span {
    color: var(--orange2);
}
/* ════════════ DIVIDER ════════════ */
.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232,72,0,.14), transparent);
}
/* ════════════ REVEAL ════════════ */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: .65s cubic-bezier(.4, 0, .2, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-l {
    opacity: 0;
    transform: translateX(-22px);
    transition: .65s cubic-bezier(.4, 0, .2, 1);
}
.reveal-l.visible {
    opacity: 1;
    transform: translateX(0);
}
.reveal-r {
    opacity: 0;
    transform: translateX(22px);
    transition: .65s cubic-bezier(.4, 0, .2, 1);
}
.reveal-r.visible {
    opacity: 1;
    transform: translateX(0);
}
.d1 {
    transition-delay: .1s!important;
}
.d2 {
    transition-delay: .2s!important;
}
.d3 {
    transition-delay: .3s!important;
}
.d4 {
    transition-delay: .4s!important;
}
.cfluid {
    max-width: 1400px;
    margin: 0 auto;
}


.page-header

 {
    background-image: url( "../image/slider/bread.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.page-header-contact

 {
    background-image: url( "../image/slider/contact.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}


.page-header-package

 {
    background-image: url( "../image/slider/package.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.page-header-clients

 {
    background-image: url( "../image/slider/clients.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.page-header-about

 {
    background-image: url( "../image/slider/about.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}




/* --- NEW PRICING SECTION STYLES --- */

        .pricing-section {

            position: relative;

            background-color: #ffffff47;

            background-size: 40px 40px;

            padding: 1rem 0;

            overflow: hidden;

        }



        /* Background Decorations (The Blueprint Look) */

        .pricing-section::before {

            content: '';

            position: absolute;

            top: 0; left: 0; right: 0; bottom: 0;

            background: radial-gradient(circle at 50% 50%, rgba(94, 27, 45, 0.05) 0%, transparent 70%);

            z-index: 1;

            pointer-events: none;

        }



        .pricing-header h2 {

            font-family: var(--head-font);

            color: var(--primary);

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 0.5rem;

        }

        .pricing-header p {

            font-size: 1.1rem;

            color: var(--text-muted);

            max-width: 600px;

            margin: 0 auto;

        }



        /* CARD CONTAINER */

        .pricing-grid {

            position: relative;

            z-index: 2;

            display: flex;

            flex-wrap: wrap;

            gap: 1.5rem;

            justify-content: center;

        }



        /* CARD DESIGN */

        .pricing-card {

            background: #fff;

            border: 1px solid #e1e4e8;

            border-radius: 16px;

            padding: 0.7rem;

            position: relative;

            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

            box-shadow: 0 10px 30px rgba(0,0,0,0.04);

            display: flex;

            flex-direction: column;

            height: 100%;

            min-height: 620px;        }



        .pricing-card:hover {

            transform: translateY(-10px);

            box-shadow: var(--shadow);

            border-color: var(--primary);

        }



        /* Top Bar Accent */

        .pricing-card::after {

            content: '';

            position: absolute;

            top: 0; left: 16px; right: 16px;

            height: 4px;

            background: #e1e4e8;

            border-radius: 0 0 4px 4px;

            transition: 0.3s;

            z-index: -1;

        }

        .pricing-card:hover::after {

            background: var(--primary);

        }



        /* Plan Title */

        .plan-name {

            font-family: var(--head-font);

            font-size: 2rem;

            font-weight: bolder;

            color: var(--primary);

            text-transform: uppercase;

            letter-spacing: 1px;

            margin-bottom: 1rem;

            display: flex;

            align-items: center;;

            gap: 10px;

        }



        /* Price */

        .plan-price {

            margin-bottom: 1.5rem;

            color: var(--text-main);

        }

        .plan-price .currency {

            font-size: 1.5rem;

            font-weight: 600;

            vertical-align: top;

            line-height: 1.2;

        }

        .plan-price .amount {

            font-size: 3rem;

            font-weight: 700;

            color: var(--text-main);

            line-height: 1;

            letter-spacing: -1px;

        }

        .plan-price .period {

            font-size: 1.5rem;

            color: #888;

            font-weight: 500;

        }



        /* Divider */

        .divider {

            height: 1px;

            background: linear-gradient(90deg, transparent, #e1e4e8, transparent);

            margin: 1.5rem 0;

        }



        /* Features List */

        .plan-features {

            list-style: none;

            padding: 0;

            margin: 0 0 2rem 0;

            flex-grow: 1;

        }

        .plan-features li {

            font-size:1rem;

            color:darkslategray;

            margin-bottom: 0.5rem;

            display: flex;

            align-items: flex-start;

            gap: 10px;

            line-height: 1.4;

            font-weight: 600;

        }

        .plan-features li i {

            color: green;

            margin-top: 3px;

            font-size: 0.9rem;

        }

        .plan-features li.disabled {

            color: #aaa;

            text-decoration: line-through;

        }

        .plan-features li.disabled i {

            color: #ddd;

        }



        /* Button */

        .plan-btn {

            width: 100%;

            padding: 0.8rem;

            border-radius: 50px;

            font-weight: 600;

            text-transform: uppercase;

            font-size: 0.9rem;

            letter-spacing: 0.5px;

             background: rgba(255, 255, 255, 0.886);

            color: white;

            border: 2px solid #e1e4e8;

            transition: all 0.3s ease;

            text-decoration: none;

            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

        }

        .plan-btn:hover {

            background:white;

            border-color: var(--primary);

            color: var(--primary);

        }



        /* --- POPULAR CARD (Standard/Professional) --- */

        .pricing-card.popular {

            border: 2px solid var(--primary);

            box-shadow: var(--shadow);

            transform: scale(1.02);

            z-index: 10;

        }

        .pricing-card.popular::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: black;
    color: #ffffff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(255, 140, 0, 0.3);
    white-space: nowrap;
}

        .pricing-card.popular .plan-price .amount {

            color: var(--primary);

        }

        .pricing-card.popular .plan-btn {

            background: linear-gradient(135deg, var(--primary), var(--primary-light));

            border: none;

            color: white;

        }

        .pricing-card.popular .plan-btn:hover {

            box-shadow: 0 0 20px rgba(94, 27, 45, 0.4);

            transform: translateY(-2px);

        }

        .pricing-card.popular:hover {

            transform: scale(1.02) translateY(-5px);

        }



        /* --- ENTERPRISE CARD --- */

        .pricing-card.enterprise {

            background: linear-gradient(to bottom right, #fff, #fef5f7);

            border-color: #eaccd3;

        }

        .pricing-card.enterprise .plan-name {

            color: var(--accent);

        }

        .pricing-card.enterprise .plan-btn {

            border-color: var(--accent);

            color: var(--accent);

        }

        .pricing-card.enterprise .plan-btn:hover {

            background: var(--accent);

            color: white;

        }



        /* Responsive Fixes */

        @media (max-width: 991px) {

            .pricing-card.popular {

                transform: scale(1);

            }

            .pricing-card.popular:hover {

                transform: translateY(-10px);

            }

        }

        .btn-main {

        background-color: var(--primary-color);

        color: white;

        border: none;

        transition: all 0.3s;

      }

      

      .btn-accent {

            background-color: orangered;

        color: #000;

        font-weight: 700;
		

      }



      .btn-accent:hover {

        background-color: #d68910;

        color: white;

      }



      /* Category Sidebar */

      .category-sidebar {

        background: white;

        border-radius: 8px;

        box-shadow: 0 4px 6px rgba(0,0,0,0.05);

        overflow: hidden;

        position: sticky;

        top: 20px; /* Sticks when scrolling */

      }



      .category-header {

        background: var(--primary-color);

        color: white;

        padding: 15px;

        font-weight: 600;

      }



      .category-list a {

        display: block;

        padding: 12px 15px;

        color: #555;

        text-decoration: none;

        border-bottom: 1px solid #eee;

        transition: 0.3s;

        font-size: 0.95rem;

      }



      .category-list a:hover {

        background-color: #f0f0f0;

        color: var(--primary-color);

        padding-left: 20px;

      }



      .category-list a.active {

        background-color: var(--accent-color);

        color: #000;

        font-weight: 600;

        border-left: 5px solid var(--primary-color);

      }



      /* Product Main Content */

      .product-header {

        background: white;

        padding: 25px;

        border-radius: 8px;

        box-shadow: 0 2px 4px rgba(0,0,0,0.05);

        margin-bottom: 20px;

      }



      .product-title {

        color: var(--primary-color);

        font-weight: 700;

        border-bottom: 3px solid var(--accent-color);

        display: inline-block;

        padding-bottom: 5px;

        margin-bottom: 20px;

      }



      .feature-card {

        background: white;

        padding: 20px;

        border-radius: 8px;

        height: 100%;

        border: 1px solid #e0e0e0;

        transition: transform 0.3s, box-shadow 0.3s;

      }



      .feature-card:hover {

        transform: translateY(-5px);

        box-shadow: 0 10px 20px rgba(0,0,0,0.08);

        border-color: var(--accent-color);

      }



      .feature-icon {

        font-size: 2rem;

        color: var(--accent-color);

        margin-bottom: 15px;

      }



      .tech-spec-table th {

        background-color: var(--primary-color);

        color: white;

        width: 40%;

      }



      /* How it works steps */

      .process-step {

        position: relative;

        padding-left: 40px;

        margin-bottom: 20px;

      }

      

      .process-step::before {

        content: "\f013"; /* Gear icon default */

        font-family: "Font Awesome 6 Free";

        font-weight: 900;

        position: absolute;

        left: 0;

        top: 0;

        width: 30px;

        height: 30px;

        background: var(--accent-color);

        color: white;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        font-size: 14px;

      }



      .application-badge {

        background-color: #fff;

        border: 1px solid var(--primary-color);

        color: var(--primary-color);

        padding: 8px 15px;

        border-radius: 20px;

        margin: 5px;

        display: inline-block;

        font-weight: 500;

        font-size: 0.9rem;

      }



      .ad-skyscraper {

          /* Keeping your existing styles */

          background: #ddd;

      }

      

      /* Mobile Tweaks */

      @media (max-width: 768px) {

        .category-sidebar {

          position: static;

          margin-bottom: 20px;

        }

      }



      /* Sidebar ko sticky banane ke liye CSS */

.sticky-sidebar {

    position: -webkit-sticky; /* Safari browser ke liye */

    position: sticky;

    top: 50px; /* Upar se kitni jagah chod kar rukna hai (Header ki height adjust karein) */

    z-index: 99;

   box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

   border-radius: 10px;

}





/* Filter Buttons Hover Effects */

.btn-outline-primary.active, .btn-outline-primary:active {

    background-color: #0d6efd !important;

    color: white !important;

}

.btn-outline-warning {

    color: #ffc107;

    border-color: #ffc107;

}

.btn-outline-warning:hover, .btn-outline-warning.active {

    background-color: #ffc107 !important;

    color: #000 !important;

}

.btn-outline-secondary.active {

    background-color: #6c757d !important;

    color: white !important;

}

h5.text-primary.fw-bold {
    font-size: 19px;
}


/* Input Focus Glow remove clean look */

.form-control:focus {

    box-shadow: none;

    border-color: #ced4da;

}


/* CSS Document */