/* Fonts */
:root {
     --default-font: "Poppins", sans-serif;
     --heading-font: "Bricolage Grotesque", sans-serif;
     --nav-font: "Poppins", sans-serif;
}

/* Global Colors */
:root {
     --background-color: #f5f8fc;
     /* soft light blue-white background */
     --default-color: #1f2933;
     /* dark neutral text */
     --heading-color: #1C4D8D;
     /* your main brand color */
     --accent-color: #3FA7FF;
     /* bright highlight blue */
     --surface-color: #ffffff;
     /* cards / sections */
     --contrast-color: #ffffff;
     /* text on dark backgrounds */
}


/* Nav Menu Colors*/
:root {
     --nav-color: #0f172a;
     /* dark navy navbar background */
     --nav-hover-color: #3FA7FF;
     /* hover highlight */
     --nav-mobile-background-color: #0f172a;
     --nav-dropdown-background-color: #1e293b;
     --nav-dropdown-color: #e5e7eb;
     /* light text in dropdown */
     --nav-dropdown-hover-color: #3FA7FF;
}


/* Color Presets*/

.light-background {
     --background-color: #f5f8fc;
     --surface-color: #ffffff;
}

.dark-background {
     --background-color: #f5f8fc;
     --default-color: #1f2933;
     --heading-color: #1C4D8D;
     --surface-color: #ffffff;
     --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
     scroll-behavior: smooth;
}

/* General Styling & Shared Classes */
body {
     color: var(--default-color);
     background-color: var(--background-color);
     font-family: var(--default-font);
}

a {
     color: var(--accent-color);
     text-decoration: none;
     transition: 0.3s;
}

a:hover {
     color: color-mix(in srgb, var(--accent-color), transparent 25%);
     text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     color: var(--heading-color);
     font-family: var(--heading-font);
}


/*--------------------------------------------------------------
# About Page
--------------------------------------------------------------*/
.about-hero {
     min-height: 580px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 100px 5% 80px;
     background-color: var(--default-color);
     border-bottom-left-radius: 32px;
     border-bottom-right-radius: 32px;
     position: relative;
     overflow: hidden;
}

.about-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-bottom: 24px;
}

.about-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.4);
     }
}

.hero-title {
     font-size: clamp(2rem, 5vw, 3.4rem);
     font-weight: 800;
     color: var(--contrast-color);
     line-height: 1.1;
}

.hero-sub {
     color: var(--contrast-color);
     font-size: 1.05rem;
     max-width: 560px;
     margin: 0 auto;
     line-height: 1.7;
}

/* ── SECTION TAG ── */
.section-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 5px 16px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 50px;
}

.section-tag::before {
     content: '';
     width: 5px;
     height: 5px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
}

/* ── WHO WE ARE ── */
.about-main {
     padding: 60px 0;
}

.about-title {
     font-size: clamp(1.8rem, 3.5vw, 2.6rem);
     font-weight: 800;
     color: var(--heading-color);
     line-height: 1.15;
     margin-bottom: 24px;
}

.about-left p {
     color: var(--default-color);
     font-size: 15.5px;
     line-height: 1.8;
     margin-bottom: 18px;
}

.about-cta {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     padding: 14px 30px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 15px;
     text-decoration: none;
     transition: transform .25s, box-shadow .25s;
     box-shadow: 0 0 0 0 rgba(107, 134, 255, 0);
}

.about-cta:hover {
     color: var(--contrast-color);
     transform: translateY(-3px);
     box-shadow: 0 12px 28px rgba(107, 134, 255, .45);
}

.about-cta svg {
     width: 18px;
     height: 18px;
}

/* ── RIGHT VISUAL ── */
.about-visual {
     position: relative;
     padding-top: 60px;
     padding-bottom: 60px;
}

.experience-tag {
     position: absolute;
     top: 0;
     left: 24px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     border-radius: 50px;
     padding: 10px 18px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     z-index: 2;
}

.experience-tag .dot {
     width: 8px;
     height: 8px;
     background: #22c55e;
     border-radius: 50%;
     box-shadow: 0 0 10px #22c55e;
     animation: pulse-dot 2s infinite;
}

.experience-tag span {
     font-size: 13px;
     font-weight: 600;
     color: var(--default-color);
}

.about-card-main {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 24px;
     padding: 32px;
     position: relative;
     overflow: hidden;
}

.about-card-main::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
}

.icon-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin-bottom: 28px;
}

.icon-box {
     background: rgba(107, 134, 255, .07);
     border: 1px solid var(--accent-color);
     border-radius: 14px;
     padding: 20px 14px;
     text-align: center;
     transition: transform .3s, border-color .3s, background .3s;
     cursor: default;
}

.icon-box:hover {
     transform: translateY(-4px);
     border-color: var(--accent-color);
     background: rgba(107, 134, 255, .14);
}

.icon-box .emoji {
     font-size: 28px;
     margin-bottom: 8px;
     display: block;
}

.icon-box p {
     font-size: 12px;
     font-weight: 700;
     color: var(--contrast-color);
     margin: 0;
}

/* progress bars */
.progress-label {
     display: flex;
     justify-content: space-between;
     margin-bottom: 8px;
}

.progress-label span {
     font-size: 13px;
     font-weight: 600;
     color: var(--contrast-color);
}

.prog-bar {
     height: 6px;
     background: var(--default-color);
     border-radius: 10px;
     overflow: hidden;
     margin-bottom: 18px;
}

.prog-bar .fill {
     height: 100%;
     width: 0;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     border-radius: 10px;
     transition: width 1.4s cubic-bezier(.22, 1, .36, 1);
}

.floating-badge {
     position: absolute;
     bottom: -15px;
     right: -35px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border-radius: 16px;
     padding: 18px 22px;
     text-align: center;
     box-shadow: 0 16px 40px rgba(35, 102, 245, .45);
     z-index: 2;
}

.floating-badge .num {
     font-size: 30px;
     font-weight: 900;
     color: var(--contrast-color);
     display: block;
     line-height: 1;
}

.floating-badge .lbl {
     font-size: 11px;
     font-weight: 700;
     color: var(--contrast-color);
     line-height: 1.4;
}

/* ── MVV ── */
.mvv {
     padding: 50px 0 100px;
}

.mvv>.container>p {
     color: var(--contrast-color);
     font-size: 15.5px;
     max-width: 520px;
}

.mvv-card {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 22px;
     padding: 36px 28px;
     position: relative;
     overflow: hidden;
     height: 100%;
     transition: transform .3s, border-color .3s, box-shadow .3s;
}

.mvv-card:hover {
     transform: translateY(-8px);
     border-color: var(--accent-color);
     box-shadow: 0 24px 56px rgba(107, 134, 255, .18);
}

.mvv-card::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     transform: scaleX(0);
     transition: transform .35s;
     transform-origin: left;
}

.mvv-card:hover::after {
     transform: scaleX(1);
}

.mvv-icon {
     width: 58px;
     height: 58px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     margin-bottom: 22px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
}

.mvv-card h3 {
     color: var(--contrast-color);
     font-size: 20px;
     font-weight: 800;
     margin-bottom: 14px;
}

.mvv-card p {
     color: var(--contrast-color);
     font-size: 14.5px;
     line-height: 1.8;
     margin: 0;
}



/* CORE VALUES */
.value-card {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 18px;
     padding: 28px 24px;
     display: flex;
     gap: 18px;
     align-items: flex-start;
     height: 100%;
     transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.value-card:hover {
     transform: translateY(-6px);
     border-color: rgba(107, 134, 255, .5);
     box-shadow: 0 16px 40px rgba(28, 29, 31, 0.26);
}

.value-icon {
     min-width: 42px;
     height: 42px;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     color: var(--contrast-color);
     flex-shrink: 0;
}

.value-text h4 {
     font-size: 16px;
     font-weight: 600;
     color: var(--contrast-color);
     margin-bottom: 8px;
}

.value-text p {
     color: var(--contrast-color);
     font-size: 13.5px;
     line-height: 1.75;
     margin: 0;
}

/* PROCESS */

.process-connector {
     position: relative;
}

/* horizontal line on md+ */
@media (min-width: 768px) {
     .process-connector::before {
          content: '';
          position: absolute;
          top: 36px;
          left: calc(12.5% + 36px);
          right: calc(12.5% + 36px);
          height: 5px;
          background: linear-gradient(90deg, var(--default-color), #5a76f4c2);
          z-index: 0;
     }
}

.step-circle {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 18px;
     font-weight: 600;
     color: var(--contrast-color);
     box-shadow: 0 8px 24px rgba(37, 103, 245, 0.279);
     position: relative;
     z-index: 1;
     transition: transform .3s, box-shadow .3s;
}

.process-step:hover .step-circle {
     transform: scale(1.1);
     box-shadow: 0 12px 32px rgba(37, 103, 245, 0.433);
}

.process-step {
     text-align: center;
     padding: 0 12px;
}

.process-step h4 {
     font-size: 16px;
     font-weight: 600;
     color: var(--heading-color);
     margin-bottom: 10px;
}

.process-step p {
     color: var(--default-color);
     font-size: 13.5px;
     line-height: 1.5;
     margin: 0;
}

/* vertical connector on mobile */
@media (max-width: 767.98px) {
     .process-step {
          position: relative;
          padding-bottom: 40px;
     }

     .process-step:not(:last-child)::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 2px;
          height: 32px;
          background: linear-gradient(180deg, var(--accent-color), #6b86ff);
     }
}

/* WHY US */
.why-us {
     background: linear-gradient(160deg, var(--navy3), #091628);
     border-top: 1px solid var(--border);
}

.why-item {
     display: flex;
     gap: 18px;
     align-items: flex-start;
     padding: 20px;
     border-radius: 14px;
     background: var(--default-color);
}

.why-icon {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     flex-shrink: 0;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     color: var(--contrast-color);
}

.why-item-text h4 {
     font-size: 15px;
     font-weight: 700;
     color: var(--contrast-color);
     margin-bottom: 5px;
}

.why-item-text p {
     color: var(--contrast-color);
     font-size: 13.5px;
     line-height: 1.5;
     margin: 0;
}

/* stat cards */
.why-stat-card {
     background: var(--default-color);
     border-radius: 18px;
     padding: 30px 22px;
     text-align: center;
     transition: transform .3s, border-color .3s, box-shadow .3s;
}

.why-stat-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 16px 40px rgba(34, 45, 50, 0.433);
}

.why-stat-card .big {
     font-size: 38px;
     font-weight: 600;
     color: var(--contrast-color);
     line-height: 1;
     margin-bottom: 8px;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
}

.why-stat-card .lbl {
     color: var(--contrast-color);
     font-size: 12.5px;
     font-weight: 600;
}

/* COUNTER ANIM */
.count-up {
     display: inline-block;
}



/*--------------------------------------------------------------
# Services Page
--------------------------------------------------------------*/
/* Header Section */
.service {
     min-height: 580px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 100px 5% 80px;
     background-color: var(--default-color);
     border-bottom-left-radius: 32px;
     border-bottom-right-radius: 32px;
     position: relative;
     overflow: hidden;
}

.service-content {
     position: relative;
     z-index: 1;
     max-width: 720px;
     margin: 0 auto;
     margin-top: 80px;
}

/* badge */
.service-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.service-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

/* heading */
.service h1 {
     font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 800;
     color: var(--contrast-color);
     line-height: 1.1;
     letter-spacing: -1px;
}

/* sub text */
.service p {
     color: var(--contrast-color);
     font-size: 1.05rem;
     max-width: 560px;
     margin: 0 auto 15px;
     line-height: 1.7;
}

/* buttons */
.service-btns {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
}

.btn-primary-custom {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     padding: 14px 30px;
     border-radius: 50px;
     font-weight: 700;
     font-size: 15px;
     text-decoration: none;
     border: none;
     transition: transform .25s, box-shadow .25s;
     box-shadow: 0 4px 20px rgba(107, 134, 255, .45);
}

.btn-primary-custom:hover {
     color: var(--contrast-color);
     transform: translateY(-3px);
     box-shadow: 0 14px 32px rgba(107, 134, 255, .45);
}

.btn-outline-custom {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border: 2px solid rgba(107, 134, 255, .45);
     color: var(--contrast-color);
     padding: 14px 30px;
     border-radius: 50px;
     font-weight: 700;
     font-size: 15px;
     text-decoration: none;
     transition: border-color .25s, color .25s, transform .25s;
     backdrop-filter: blur(8px);
}

.btn-outline-custom:hover {
     border-color: var(--accent-color);
     color: var(--contrast-color);
     transform: translateY(-3px);
}


/* Services Section */
.software-services {
     padding: 90px 0;
}

/* ── HEADER ── */
.soft-section-header {
     align-items: center;
     justify-content: center;
     text-align: center;
}

.soft-section-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--default-color);
     text-transform: uppercase;
     margin-bottom: 24px;
}

.soft-section-tag::before {
     content: '';
     width: 5px;
     height: 5px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.4);
     }
}

.soft-section-title {
     font-size: clamp(2rem, 5vw, 3.4rem);
     font-weight: 700;
     color: var(--heading-color);
     line-height: 1.1;
}

.soft-section-sub {
     color: var(--default-color);
     font-size: 1.05rem;
     max-width: 560px;
     line-height: 1.7;
     margin: 0 auto 30px;
}

/* TABS */
.srv-tabs {
     display: flex;
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
     margin-bottom: 44px;
}

.srv-tab {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 20px;
     border-radius: 50px;
     border: 1px solid var(--accent-color);
     background: transparent;
     color: var(--heading-color);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: all .25s;
}

.srv-tab i {
     font-size: 15px;
}

.srv-tab:hover {
     border-color: rgba(107, 134, 255, .45);
     color: #6b86ff;
}

.srv-tab.active {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
     box-shadow: 0 6px 20px rgba(107, 134, 255, .45);
}

/* Tab Panels */
.srv-panel {
     display: none;
}

.srv-panel.active {
     display: block;
}

/* Panel Layout */
.panel-layout {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 56px;
     align-items: start;
}

/* Left: intro */

.section-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--default-color);
     text-transform: uppercase;
     margin-bottom: 34px;
}

.section-tag::before {
     content: '';
     width: 5px;
     height: 5px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.4);
     }
}

.panel-intro h3 {
     font-size: clamp(22px, 3vw, 32px);
     font-weight: 600;
     line-height: 1.2;
     margin-bottom: 16px;
     letter-spacing: -0.5px;
}

.panel-intro h3 .hl {
     color: var(--heading-color);
}

.panel-intro .desc {
     color: var(--default-color);
     font-size: 15px;
     line-height: 1.5;
     margin-bottom: 28px;
}

.tech-stack {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-bottom: 38px;
}

.tech-pill {
     padding: 5px 14px;
     border-radius: 50px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid rgba(107, 134, 255, .45);
     font-size: 12px;
     font-weight: 600;
     color: var(--contrast-color);
     letter-spacing: 0.3px;
}

.panel-cta {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     border-radius: 30px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     font-weight: 600;
     font-size: 14px;
     text-decoration: none;
     transition: transform 0.2s, box-shadow 0.2s;
}

.panel-cta:hover {
     transform: translateY(-3px);
     color: var(--contrast-color);
     box-shadow: 0 10px 28px rgba(107, 134, 255, 0.45);
}

/* Right: service list cards */
.srv-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.srv-item {
     display: flex;
     align-items: flex-start;
     gap: 16px;
     padding: 18px 20px 0;
     border-radius: 20px;
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     transition: border-color 0.3s, transform 0.3s;
     cursor: default;
}

.srv-item:hover {
     border-color: rgba(107, 134, 255, 0.45);
     transform: translateX(6px);
}

.srv-item-icon {
     width: 42px;
     height: 42px;
     flex-shrink: 0;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid rgba(107, 134, 255, .45);
     color: var(--contrast-color);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
}

.srv-item-body h4 {
     color: var(--contrast-color);
     font-size: 14.5px;
     font-weight: 700;
     margin-bottom: 4px;
}

.srv-item-body p {
     color: var(--contrast-color);
     font-size: 13px;
     line-height: 1.65;
}

/* Sub-services grid */
.sub-grid {
     margin-top: 50px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
}

.sub-card {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 14px;
     padding: 24px 20px;
     transition: transform .3s, border-color .3s, box-shadow .3s;
     position: relative;
     overflow: hidden;
}

.sub-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     transform: scaleX(0);
     transition: transform .3s;
}

.sub-card:hover {
     transform: translateY(-6px);
     border-color: rgba(107, 134, 255, 0.45);
     box-shadow: 0 10px 28px rgba(107, 134, 255, 0.45);
}

.sub-card:hover::before {
     transform: scaleX(1);
}

.sub-card .sc-icon {
     width: 42px;
     height: 42px;
     flex-shrink: 0;
     border-radius: 10px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid rgba(107, 134, 255, .45);
     color: var(--contrast-color);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     margin-bottom: 10px;
}

.sub-card h4 {
     color: var(--contrast-color);
     font-size: 14.5px;
     font-weight: 700;
     margin-bottom: 8px;
}

.sub-card p {
     color: var(--contrast-color);
     font-size: 13px;
     line-height: 1.7;
}

/* TESTIMONIALS */
.testimonials-sec {
     padding: 30px 0;
}

.tes-header {
     align-items: center;
     justify-content: center;
     text-align: center;
}

.tes-section-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--default-color);
     text-transform: uppercase;
     margin-bottom: 24px;
}

.tes-section-tag::before {
     content: '';
     width: 5px;
     height: 5px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.4);
     }
}

.tes-section-title {
     font-size: clamp(2rem, 5vw, 3.4rem);
     font-weight: 700;
     color: var(--heading-color);
     line-height: 1.1;
}

.tes-section-sub {
     color: var(--default-color);
     font-size: 1.05rem;
     max-width: 560px;
     line-height: 1.7;
     margin: 0 auto 30px;
}

.t-grid {
     display: flex;
     gap: 22px;
     overflow-x: auto;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     -ms-overflow-style: none;
     padding: 8px 4px 16px;
     cursor: grab;
}

.t-grid:active {
     cursor: grabbing;
}

.t-grid::-webkit-scrollbar {
     display: none;
}

.t-card {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 18px;
     padding: 30px 26px;
     transition: transform .3s, border-color .3s;
     position: relative;
     overflow: hidden;
     flex-shrink: 0;
     scroll-snap-align: start;
     width: clamp(280px, 32vw, 380px);
}

.t-card::before {
     content: '\201C';
     position: absolute;
     top: -10px;
     right: 20px;
     font-size: 100px;
     color: var(--contrast-color);
     font-family: Georgia, serif;
     line-height: 1;
}

.t-card:hover {
     transform: translateY(-6px);
     border-color: rgba(107, 134, 255, .45);
}

.t-stars {
     color: yellow;
     font-size: 14px;
     margin-bottom: 14px;
     letter-spacing: 2px;
}

.t-text {
     color: var(--contrast-color);
     font-size: 14px;
     line-height: 1.8;
     margin-bottom: 20px;
     font-style: italic;
}

.t-author {
     color: var(--contrast-color);
     display: flex;
     align-items: center;
     gap: 12px;
}

.t-avatar {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     flex-shrink: 0;
}

.t-name {
     font-size: 14px;
     font-weight: 600;
}

.t-role {
     font-size: 12px;
     color: var(--contrast-color);
}


/* Faq's */
.faq-sec {
     padding: 30px 0;
}

/* Section Tag */
.fag-section-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--default-color);
     text-transform: uppercase;
     margin-bottom: 24px;
}

.fag-section-tag::before {
     content: '';
     width: 5px;
     height: 5px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.4);
     }
}

.fag-section-title {
     font-size: clamp(2rem, 5vw, 3.4rem);
     font-weight: 700;
     color: var(--heading-color);
     line-height: 1.1;
}

.fag-section-sub {
     color: var(--default-color);
     font-size: 1.05rem;
     line-height: 1.7;
     margin-bottom: 30px;
}

.faq-layout {
     display: grid;
     grid-template-columns: 1fr 1.4fr;
     gap: 70px;
     align-items: start;
}

/* Contact Card */
.faq-contact {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 16px;
     padding: 28px;
}

.faq-contact h4 {
     color: var(--contrast-color);
     font-size: 17px;
     font-weight: 600;
     margin-bottom: 8px;
}

.faq-contact p {
     color: var(--contrast-color);
     font-size: 14px;
     margin-bottom: 18px;
}

.faq-contact a {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     padding: 12px 22px;
     border-radius: 20px;
     font-weight: 500;
     font-size: 14px;
     text-decoration: none;
     transition: transform .2s, box-shadow .2s;
}

.faq-contact a:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(107, 134, 255, .35);
     color: var(--contrast-color);
}

/* FAQ List */
.faq-list {
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.faq-item {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 12px;
     overflow: hidden;
     transition: border-color .3s, box-shadow .3s;
}

.faq-item.open {
     border-color: rgba(107, 134, 255, .45);
     box-shadow: 0 4px 20px rgba(107, 134, 255, .1);
}

.faq-q {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 18px 20px;
     background: transparent;
     border: none;
     color: var(--contrast-color);
     font-size: 14.5px;
     font-weight: 600;
     cursor: pointer;
     text-align: left;
     gap: 12px;
     font-family: var(--default-font);
}

.faq-q .faq-arrow {
     width: 28px;
     height: 28px;
     border-radius: 8px;
     flex-shrink: 0;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid rgba(107, 134, 255, .45);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
     transition: transform .3s, background .3s;
}

.faq-item.open .faq-arrow {
     transform: rotate(45deg);
     background: rgba(107, 134, 255, .45);
}

.faq-a {
     max-height: 0;
     overflow: hidden;
     transition: max-height .4s ease, padding .3s;
}

.faq-a p {
     padding: 0 20px 18px;
     color: var(--contrast-color);
     font-size: 14px;
     line-height: 1.8;
     margin: 0;
}



/*--------------------------------------------------------------
# Our Portfolio Page
--------------------------------------------------------------*/
.portfolio {
     min-height: 580px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 100px 5% 80px;
     background-color: var(--default-color);
     border-bottom-left-radius: 32px;
     border-bottom-right-radius: 32px;
     position: relative;
     overflow: hidden;
}

.portfolio-content {
     position: relative;
     z-index: 1;
     max-width: 720px;
     margin: 0 auto;
     margin-top: 80px;
}

/* badge */
.portfolio-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.portfolio-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

/* heading */
.portfolio h1 {
     font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 800;
     color: var(--contrast-color);
     line-height: 1.1;
     letter-spacing: -1px;
}

/* sub text */
.portfolio p {
     color: var(--contrast-color);
     font-size: 1.05rem;
     max-width: 560px;
     margin: 0 auto 15px;
     line-height: 1.7;
}


/* FILTER BAR */
.filter-wrap {
     position: relative;
     z-index: 1;
     padding: 70px 0 32px;
}

.port-sec-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--default-color);
     text-transform: uppercase;
     margin-top: 54px;
}

.port-sec-badge::before {
     content: '';
     width: 5px;
     height: 5px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.4);
     }
}

.port-sec-title {
     font-size: clamp(2rem, 5vw, 3.4rem);
     font-weight: 600;
     color: var(--heading-color);
     line-height: 1.1;
     margin-top: 20px;
}

.port-sec-sub {
     color: var(--default-color);
     font-size: 1.05rem;
     max-width: 560px;
     line-height: 1.7;
     margin: 10 auto 30px;
}

.port-filter-tabs {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-bottom: 44px;
}

.port-ftab {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 20px;
     border-radius: 50px;
     border: 1px solid var(--accent-color);
     background: transparent;
     color: var(--heading-color);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: all .25s;
}

.port-ftab:hover {
     border-color: rgba(107, 134, 255, .45);
     color: #6b86ff;
}

.port-ftab.active {
     background: linear-gradient(90deg, var(--accent-color));
     border-color: transparent;
     color: var(--contrast-color);
     box-shadow: 0 6px 20px rgba(107, 134, 255, .45);
}

.result-count {
     font-size: .82rem;
     color: var(--default-color);
     margin-top: 18px;
}

.result-count strong {
     color: var(--heading-color)
}

/* PROJECT GRID */
.port-cards-wrap {
     position: relative;
     z-index: 1;
     padding: 14px 0 90px;
}

@keyframes cin {
     from {
          opacity: 0;
          transform: translateY(26px)
     }

     to {
          opacity: 1;
          transform: translateY(0)
     }
}

.proj-card {
     background: var(--default-color);
     border: 1px solid var(--accent-color) !important;
     border-radius: 18px !important;
     overflow: hidden;
     height: 100%;
     cursor: pointer;
     transition: border-color .3s, transform .3s, box-shadow .3s;
     animation: fadeUp .4s ease both;
}

.proj-card:hover {
     border-color: rgba(107, 134, 255, 0.45) !important;
     transform: translateY(-8px);
     box-shadow: 0 20px 48px rgba(107, 134, 255, 0.45) !important;
}

/* image area */
.img-wrap {
     position: relative;
     overflow: hidden;
     height: 210px;
}

.img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top;
     transition: transform .5s ease;
}

.proj-card:hover .img-wrap img {
     transform: scale(1.07);
}

/* bottom fade */
.img-wrap::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(transparent 75%, var(--accent-color));
     pointer-events: none;
}

/* category label */
.cat-label {
     position: absolute;
     bottom: 25px;
     left: 11px;
     z-index: 2;
     display: inline-flex;
     align-items: center;
     gap: 5px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     backdrop-filter: blur(6px);
     color: var(--contrast-color);
     padding: 3px 11px;
     border-radius: 50px;
     font-size: .63rem;
     font-weight: 600;
     letter-spacing: .1em;
     text-transform: uppercase;
}

/* hover overlay */
.img-overlay {
     position: absolute;
     inset: 0;
     z-index: 3;
     background: rgba(4, 12, 26, .8);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 10px;
     opacity: 0;
     transition: opacity .28s;
}

.proj-card:hover .img-overlay {
     opacity: 1;
}

.ov-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 9px 20px;
     border-radius: 50px;
     border: none;
     font-size: .8rem;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
     color: var(--contrast-color);
     transition: transform .18s;
}

.ov-btn:hover {
     transform: translateY(-2px);
}

.ov-primary {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
}

.ov-outline {
     background: rgba(255, 255, 255, .1);
     border: 2px solid rgba(107, 134, 255, .45);
     color: var(--contrast-color);
}

/* card body */
.card-body {
     padding: 18px 20px 20px;
}

.card-title {
     font-size: 1rem;
     font-weight: 600;
     color: var(--contrast-color);
     margin-bottom: 7px;
}

.card-text {
     color: var(--contrast-color);
     font-size: .84rem;
     font-weight: 300;
     margin-bottom: 13px;
}

.tech-tags {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     margin-bottom: 13px;
}

.tech-tag {
     font-size: .67rem;
     font-weight: 500;
     color: var(--contrast-color);
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     padding: 2px 9px;
     border-radius: 50px;
}

.card-footer-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: 12px;
     border-top: 2px solid var(--heading-color);
}

.loc {
     font-size: .75rem;
     color: var(--contrast-color);
     display: flex;
     align-items: center;
     gap: 4px;
}

.loc i {
     color: var(--contrast-color);
}

.more-link {
     font-size: .76rem;
     font-weight: 600;
     color: var(--contrast-color);
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 4px;
     transition: gap .18s;
}

.more-link:hover {
     gap: 8px;
     color: var(--contrast-color);
}

/* no results msg */
.empty-msg {
     text-align: center;
     padding: 60px 20px;
     color: var(--default-color);
     display: none;
}

.empty-msg i {
     font-size: 40px;
     display: block;
     color: var(--default-color);
     margin-bottom: 12px;
}

/* Model Card */
.modal-content {
     background: var(--default-color);
     border-radius: 20px;
}

.modal-header {
     border-bottom: 1px solid var(--accent-color);
     padding: 18px 24px;
}

.modal-title {
     font-weight: 600;
     color: var(--contrast-color);
     margin: 0;
}

.modal-header .btn-close {
     filter: invert(1) opacity(.5);
}

.modal-body {
     padding: 0
}

.modal-body img {
     width: 100%;
     height: 350px;
     object-fit: cover;
     object-position: top;
     display: block;
}

.modal-body span {
     display: inline-block;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     color: var(--contrast-color);
     padding: 3px 13px;
     border-radius: 50px;
     font-size: .68rem;
     font-weight: 600;
     letter-spacing: 1px;
     text-transform: uppercase;
     margin-bottom: 11px;
}

.modal-body p {
     color: var(--contrast-color);
     font-size: .88rem;
     font-weight: 300;
     line-height: 1.7;
     margin-bottom: 12px;
}

.modal-body .m-tb {
     font-size: .9rem;
     font-weight: 600;
     color: var(--accent-color);
     margin-bottom: 6px;
}

.modal-body .mTech-p {
     color: var(--contrast-color);
     font-size: .82rem;
     font-weight: 300;
}

.modal-footer {
     border-top: 2px solid var(--heading-color);
     padding: 14px 24px;
     gap: 10px;
}

.modal-footer a {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     text-decoration: none;
     padding: 8px 20px;
     border-radius: 50px;
     font-size: .8rem;
     font-weight: 600
}

.modal-footer button {
     background: transparent;
     border: 1px solid var(--background-color);
     color: var(--contrast-color);
     padding: 8px 20px;
     border-radius: 50px;
     font-size: .8rem;
     font-weight: 600;
     cursor: pointer
}




/*--------------------------------------------------------------
# Blog Page
--------------------------------------------------------------*/
/* Header Section */
.blog {
     min-height: 580px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 100px 5% 80px;
     background-color: var(--default-color);
     border-bottom-left-radius: 32px;
     border-bottom-right-radius: 32px;
     position: relative;
     overflow: hidden;
}

.blog-content {
     position: relative;
     z-index: 1;
     max-width: 720px;
     margin: 0 auto;
}

/* badge */
.blog-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.blog-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

/* heading */
.blog h1 {
     font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 800;
     color: var(--contrast-color);
     line-height: 1.1;
     letter-spacing: -1px;
}

/* sub text */
.blog p {
     color: var(--contrast-color);
     font-size: 1.05rem;
     max-width: 560px;
     margin: 0 auto 15px;
     line-height: 1.7;
}


/* CONTENT SECTION */
.content-sec {
     padding: 90px 0 80px;
}

/* BLOG CARD */
.blog-card {
     background: var(--default-color);
     border-radius: 14px;
     overflow: hidden;
     margin-bottom: 26px;
     transition: box-shadow .3s, transform .3s;
     display: flex;
}

.blog-card:hover {
     box-shadow: 0 10px 36px rgba(107, 134, 255, 0.45);
     transform: translateY(-3px);
}

.card-thumb {
     width: 200px;
     flex-shrink: 0;
     position: relative;
     overflow: hidden;
}

.card-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s ease;
}

.blog-card:hover .card-thumb img {
     transform: scale(1.07);
}

.thumb-tags {
     position: absolute;
     top: 10px;
     left: 10px;
     z-index: 2;
     display: flex;
     flex-direction: column;
     gap: 4px;
}

.tg {
     display: inline-block;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     backdrop-filter: blur(6px);
     color: var(--contrast-color);
     padding: 2px 9px;
     border-radius: 50px;
     font-size: .62rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: .07em;
}

.tg.hot {
     background: linear-gradient(90deg, var(--accent-color));
     border-color: transparent;
}

.card-body-area {
     padding: 18px 22px 20px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     flex: 1;
}

.post-meta-row {
     display: flex;
     gap: 14px;
     flex-wrap: wrap;
     margin-bottom: 10px;
}

.post-meta-row span {
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: .72rem;
     color: var(--contrast-color);
}

.post-meta-row span i {
     color: var(--accent-color);
     font-size: 15px;
}

.card-body-area h4 {
     font-size: 1.05rem;
     font-weight: 700;
     color: var(--contrast-color);
     margin-bottom: 9px;
     line-height: 1.35;
     cursor: pointer;
     transition: color .2s;
}

.card-body-area p {
     color: var(--contrast-color);
     font-size: .83rem;
     font-weight: 300;
     line-height: 1.7;
     margin-bottom: 14px;
     flex: 1;
}

.read-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     padding: 8px 20px;
     border-radius: 50px;
     font-size: .8rem;
     font-weight: 500;
     border: none;
     cursor: pointer;
     text-decoration: none;
     transition: box-shadow .2s, transform .2s;
     align-self: flex-start;
}

.read-btn:hover {
     box-shadow: 0 5px 18px rgba(63, 167, 255, .45);
     transform: translateY(-2px);
     color: var(--contrast-color);
}

/* PAGINATION */
.pg-wrap {
     margin-top: 100%;
}

.page-link {
     color: var(--default-color) !important;
     border: 1px solid var(--heading-color) !important;
     padding: 7px 15px !important;
     border-radius: 8px !important;
     margin: 0 2px;
     font-size: .83rem;
     font-weight: 600;
     transition: all .2s;
}

.page-link:hover,
.page-item.active .page-link {
     background: linear-gradient(90deg, var(--accent-color), #6b86ff) !important;
     border-color: transparent !important;
     color: var(--contrast-color) !important;
     box-shadow: 0 4px 14px rgba(63, 167, 255, .45);
}

/* SIDEBAR */
.s-widget {
     background: var(--default-color);
     border: 1px solid var(--bdr);
     border-radius: 14px;
     padding: 20px 20px 22px;
     margin-bottom: 22px;
}

.s-title {
     font-size: .84rem;
     font-weight: 600;
     color: var(--contrast-color);
     text-transform: uppercase;
     letter-spacing: .12em;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     padding: 9px 15px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     gap: 7px;
     margin-bottom: 18px;
}

.s-search {
     display: flex;
}

.s-search input {
     flex: 1;
     border: 1px solid var(--heading-color);
     border-right: none;
     border-radius: 50px 0 0 50px;
     padding: 9px 15px;
     font-size: .82rem;
     outline: none;
     transition: border-color .2s;
}

.s-search input:focus {
     border-color: var(--heading-color);
}

.s-search button {
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     border: none;
     border-radius: 0 50px 50px 0;
     padding: 9px 16px;
     color: var(--contrast-color);
     cursor: pointer;
     font-size: 14px;
}

.author-pic {
     width: 68px;
     height: 68px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid var(--heading-color);
     display: block;
     margin: 0 auto 10px;
}

.author-nm {
     text-align: center;
     font-size: .97rem;
     font-weight: 600;
     color: var(--contrast-color);
}

.author-rl {
     text-align: center;
     color: var(--contrast-color);
     font-size: .76rem;
     margin-bottom: 10px;
}

.author-bio {
     color: var(--contrast-color);
     font-size: .81rem;
     font-weight: 300;
     line-height: 1.65;
     text-align: center;
}

.author-socials {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 12px;
}

.s-soc {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: var(--accent-color);
     border: 1px solid var(--heading-color);
     display: grid;
     place-items: center;
     color: var(--contrast-color);
     font-size: 12px;
     text-decoration: none;
     transition: all .2s;
}

.s-soc:hover {
     color: var(--contrast-color);
     border-color: transparent;
}

.cat-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 9px 0;
     border-bottom: 1px solid var(--heading-color);
     font-size: .84rem;
}

.cat-item:last-child {
     border-bottom: none;
}

.cat-item a {
     color: var(--contrast-color);
     transition: color .2s, padding-left .18s;
}

.cat-item a:hover {
     padding-left: 5px;
}

.cat-cnt {
     background: rgba(63, 167, 255, .45);
     color: var(--contrast-color);
     border-radius: 50px;
     padding: 1px 9px;
     font-size: .69rem;
     font-weight: 500;
}

.nl-desc {
     font-size: .82rem;
     color: var(--contrast-color);
     font-weight: 300;
     line-height: 1.65;
     margin-bottom: 13px;
}

.nl-wrap {
     display: flex;
     flex-direction: column;
     gap: 8px;
}

.nl-wrap input {
     border: 1px solid var(--heading-color);
     border-radius: 50px;
     padding: 9px 16px;
     font-size: .82rem;
     outline: none;
     transition: border-color .2s;
}

.nl-wrap input:focus {
     border-color: var(--accent-color);
}

.nl-btn {
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     border: none;
     border-radius: 50px;
     padding: 9px;
     font-size: .82rem;
     font-weight: 500;
     cursor: pointer;
     transition: box-shadow .2s;
}

.nl-btn:hover {
     box-shadow: 0 5px 18px rgba(63, 167, 255, .45);
}

.nl-note {
     font-size: .69rem;
     color: var(--contrast-color);
     text-align: center;
     margin-top: 8px;
}

/*--------------------------------------------------------------
# Single Blog Page
--------------------------------------------------------------*/
/* ══ HERO BANNER ══ */
.post-hero {
     min-height: 580px;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: flex-end;
     border-bottom-left-radius: 28px;
     border-bottom-right-radius: 28px;
}

.post-hero-img {
     position: absolute;
     inset: 0;
}

.post-hero-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
}

/* gradient overlay */
.post-hero-img::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, rgba(28, 77, 141, .25) 0%, rgba(15, 30, 53, .88) 100%);
}

.hero-content {
     position: relative;
     z-index: 2;
     padding: 48px 0 44px;
     width: 100%;
}

.post-cat-pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     padding: 5px 16px;
     border-radius: 50px;
     font-size: .72rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-bottom: 16px;
}

.hero-content h1 {
     font-size: clamp(1.7rem, 4vw, 2.8rem);
     font-weight: 800;
     color: var(--contrast-color);
     line-height: 1.2;
     letter-spacing: -.5px;
     margin-bottom: 18px;
     max-width: 760px;
     text-shadow: 0 2px 16px rgba(0, 0, 0, .4);
}

.hero-meta {
     display: flex;
     gap: 18px;
     flex-wrap: wrap;
}

.hero-meta span {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: .8rem;
     color: var(--contrast-color);
     font-weight: 400;
}

.hero-meta span i {
     color: var(--background-color);
     font-size: 13px;
}

.breadcrumb-row {
     display: flex;
     align-items: center;
     gap: 7px;
     font-size: .78rem;
     color: var(--background-color);
     margin-bottom: 18px;
}

.breadcrumb-row a {
     color: var(--background-color);
}

.breadcrumb-row a:hover {
     color: var(--contrast-color);
}

.breadcrumb-row i {
     font-size: 10px;
}

/* ══ MAIN CONTENT ══ */
.main-sec {
     padding: 44px 0 80px;
}

/* ── Article Body ── */
.article-wrap {
     background: var(--default-color);
     border-radius: 18px;
     overflow: hidden;
}

/* featured image inside article */
.article-feat-img {
     width: 100%;
     height: 380px;
     object-fit: cover;
     object-position: center;
     display: block;
}

.article-body {
     padding: 32px 36px 36px;
}

/* author card inside article */
.article-author {
     display: flex;
     align-items: center;
     gap: 14px;
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     border-radius: 12px;
     padding: 14px 18px;
     margin-bottom: 28px;
}

.article-author img {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid var(--heading-color);
     flex-shrink: 0;
}

.au-name {
     font-size: .92rem;
     font-weight: 600;
     color: var(--contrast-color);
}

.au-role {
     font-size: .74rem;
     color: var(--background-color);
}

.au-date {
     font-size: .74rem;
     color: var(--background-color);
     margin-left: auto;
     display: flex;
     align-items: center;
     gap: 5px;
}

.au-date i {
     color: var(--background-color);
}

/* article typography */
.article-body h2 {
     font-size: 1.45rem;
     font-weight: 700;
     color: var(--contrast-color);
     margin: 28px 0 14px;
     padding-left: 14px;
     border-left: 4px solid var(--accent-color);
     line-height: 1.3;
}

.article-body h3 {
     font-size: 1.15rem;
     font-weight: 700;
     color: var(--background-color);
     margin: 22px 0 10px;
}

.article-body p {
     color: var(--background-color);
     font-size: .95rem;
     line-height: 1.85;
     margin-bottom: 18px;
}

.article-body p strong {
     color: var(--accent-color);
}

/* inline image */
.article-body .inline-img {
     width: 100%;
     border-radius: 12px;
     margin: 22px 0;
     display: block;
     border: 1px solid var(--accent-color);
}

/* blockquote */
.article-body blockquote {
     background: rgba(0, 144, 240, 0.121);
     border-left: 4px solid var(--accent-color);
     border-radius: 0 12px 12px 0;
     padding: 20px 24px;
     margin: 24px 0;
     position: relative;
}

.article-body blockquote::before {
     content: '\201C';
     position: absolute;
     top: -4px;
     right: 16px;
     font-size: 72px;
     line-height: 1;
     color: var(--background-color);
     font-family: Georgia, serif;
}

.article-body blockquote p {
     font-style: italic;
     color: var(--background-color);
     font-size: 1rem;
     margin-bottom: 8px;
     font-weight: 400;
}

.article-body blockquote cite {
     font-size: .78rem;
     color: var(--background-color);
     font-style: normal;
}

/* numbered/bullet list */
.article-body ul,
.article-body ol {
     padding-left: 0;
     margin-bottom: 18px;
     list-style: none;
}

.article-body li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: .95rem;
     color: var(--background-color);
     margin-bottom: 10px;
     line-height: 1.75;
}

.article-body li::before {
     content: '';
     width: 8px;
     height: 8px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border-radius: 50%;
     flex-shrink: 0;
     margin-top: 8px;
}

/* info box */
.info-box {
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     border-radius: 12px;
     padding: 18px 20px;
     margin: 22px 0;
     display: flex;
     gap: 14px;
     align-items: flex-start;
}

.info-box i {
     color: var(--contrast-color);
     font-size: 20px;
     flex-shrink: 0;
     margin-top: 2px;
}

.info-box p {
     margin: 0;
     font-size: .85rem;
     color: var(--background-color);
}

/* divider */
.art-hr {
     border: none;
     border-top: 2px solid var(--background-color);
     margin: 28px 0;
}

/* Tags row */
.tags-row {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 22px;
}

.tags-row .lbl {
     font-size: .8rem;
     font-weight: 600;
     color: var(--contrast-color);
     margin-right: 4px;
}

.art-tag {
     display: inline-flex;
     align-items: center;
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     color: var(--contrast-color);
     padding: 4px 13px;
     border-radius: 50px;
     font-size: .72rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
     text-decoration: none;
}

.art-tag:hover {
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
}

/* Share row */
.share-row {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-wrap: wrap;
}

.share-row .lbl {
     font-size: .8rem;
     font-weight: 600;
     color: var(--contrast-color);
}

.sh-btn {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 14px;
     text-decoration: none;
     transition: all .2s;
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     color: var(--contrast-color);
}

.sh-btn:hover {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--background-color);
     border-color: transparent;
}

/* ── Author Box (bottom of article) ── */
.author-box {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 16px;
     padding: 24px 26px;
     margin-top: 24px;
     display: flex;
     gap: 20px;
     align-items: flex-start;
}

.author-box img {
     width: 72px;
     height: 72px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid var(--heading-color);
     flex-shrink: 0;
}

.ab-name {
     font-size: 1.05rem;
     font-weight: 600;
     color: var(--contrast-color);
     margin-bottom: 3px;
}

.ab-role {
     font-size: .78rem;
     color: var(--background-color);
     margin-bottom: 9px;
     font-weight: 500;
}

.ab-bio {
     font-size: .84rem;
     color: var(--background-color);
     font-weight: 300;
     line-height: 1.7;
     margin-bottom: 12px;
}

.ab-socials {
     display: flex;
     gap: 8px;
}

.ab-soc {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     display: grid;
     place-items: center;
     color: var(--contrast-color);
     font-size: 12px;
     text-decoration: none;
     transition: all .2s;
}

.ab-soc:hover {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--background-color);
     border-color: transparent;
}

/* Related Posts */
.related-sec {
     margin-top: 32px;
}

.related-sec h4 {
     font-size: 1.15rem;
     font-weight: 700;
     color: var(--default-color);
     margin-bottom: 18px;
     display: flex;
     align-items: center;
     gap: 8px;
}

.related-sec h4::after {
     content: '';
     flex: 1;
     height: 2px;
     background: linear-gradient(90deg, var(--accent-color), transparent);
     border-radius: 2px;
}

.rel-card {
     background: var(--default-color);
     border: 1px solid var(--heading-color);
     border-radius: 12px;
     overflow: hidden;
     transition: box-shadow .25s, transform .25s;
}

.rel-card:hover {
     box-shadow: 0 8px 28px rgba(107, 134, 255, .45);
     transform: translateY(-3px);
}

.rel-thumb {
     height: 150px;
     overflow: hidden;
}

.rel-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform .5s;
}

.rel-card:hover .rel-thumb img {
     transform: scale(1.07);
}

.rel-body {
     padding: 14px 16px 16px;
}

.rel-cat {
     font-size: .65rem;
     font-weight: 600;
     color: var(--contrast-color);
     text-transform: uppercase;
     letter-spacing: .1em;
     margin-bottom: 6px;
}

.rel-body h6 {
     font-size: .88rem;
     font-weight: 700;
     color: var(--contrast-color);
     line-height: 1.3;
     margin-bottom: 7px;
}

.rel-body h6:hover {
     cursor: pointer;
}

.rel-body small {
     font-size: .7rem;
     color: var(--background-color);
     display: flex;
     align-items: center;
     gap: 4px;
}

.rel-body small i {
     color: var(--background-color);
     font-size: 11px;
}

/* SIDEBAR */
.sb-widget {
     background: var(--default-color);
     border-radius: 14px;
     padding: 20px 20px 22px;
     margin-bottom: 22px;
}

.sb-title {
     font-size: .84rem;
     font-weight: 600;
     color: var(--contrast-color);
     text-transform: uppercase;
     letter-spacing: .12em;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     padding: 9px 15px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     gap: 7px;
     margin-bottom: 18px;
}

.sb-search {
     display: flex;
}

.sb-search input {
     flex: 1;
     border: 1px solid var(--heading-color);
     border-right: none;
     border-radius: 50px 0 0 50px;
     padding: 9px 15px;
     font-size: .82rem;
     outline: none;
     transition: border-color .2s;
}

.sb-search input:focus {
     border-color: var(--heading-color);
}

.sb-search button {
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     border: none;
     border-radius: 0 50px 50px 0;
     padding: 9px 16px;
     color: var(--contrast-color);
     cursor: pointer;
     font-size: 14px;
}

.sb-author-pic {
     width: 68px;
     height: 68px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid var(--heading-color);
     display: block;
     margin: 0 auto 10px;
}

.sb-author-nm {
     text-align: center;
     font-size: .97rem;
     font-weight: 600;
     color: var(--contrast-color);
}

.sb-author-rl {
     text-align: center;
     color: var(--contrast-color);
     font-size: .76rem;
     margin-bottom: 10px;
}

.sb-author-bio {
     color: var(--contrast-color);
     font-size: .81rem;
     font-weight: 300;
     line-height: 1.65;
     text-align: center;
}

.sb-author-socials {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 12px;
}

.sb-s-soc {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: var(--accent-color);
     border: 1px solid var(--heading-color);
     display: grid;
     place-items: center;
     color: var(--contrast-color);
     font-size: 12px;
     text-decoration: none;
     transition: all .2s;
}

.sb-s-soc:hover {
     color: var(--contrast-color);
     border-color: transparent;
}


.sb-nl-desc {
     font-size: .82rem;
     color: var(--contrast-color);
     font-weight: 300;
     line-height: 1.65;
     margin-bottom: 13px;
}

.sb-nl-wrap {
     display: flex;
     flex-direction: column;
     gap: 8px;
}

.sb-nl-wrap input {
     border: 1px solid var(--heading-color);
     border-radius: 50px;
     padding: 9px 16px;
     font-size: .82rem;
     outline: none;
     transition: border-color .2s;
}

.sb-nl-wrap input:focus {
     border-color: var(--accent-color);
}

.sb-nl-btn {
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     border: none;
     border-radius: 50px;
     padding: 9px;
     font-size: .82rem;
     font-weight: 500;
     cursor: pointer;
     transition: box-shadow .2s;
}

.sb-nl-btn:hover {
     box-shadow: 0 5px 18px rgba(63, 167, 255, .45);
}

.sb-nl-note {
     font-size: .69rem;
     color: var(--contrast-color);
     text-align: center;
     margin-top: 8px;
}

.sb-tags-box {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
}

.sb-tag {
     display: inline-flex;
     align-items: center;
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     color: var(--contrast-color);
     padding: 4px 12px;
     border-radius: 50px;
     font-size: .71rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
     text-decoration: none;
}

.sb-tag:hover {
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     border-color: transparent;
     color: var(--background-color);
}



/*--------------------------------------------------------------
# Career Page
--------------------------------------------------------------*/
/* Header Section */
.career {
     min-height: 580px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 100px 5% 80px;
     background-color: var(--default-color);
     border-bottom-left-radius: 32px;
     border-bottom-right-radius: 32px;
     position: relative;
     overflow: hidden;
}

.career-content {
     position: relative;
     z-index: 1;
     max-width: 720px;
     margin: 0 auto;
     margin-top: 80px;
}

/* badge */
.career-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.career-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

/* heading */
.career h1 {
     font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 800;
     color: var(--contrast-color);
     line-height: 1.1;
     letter-spacing: -1px;
}

/* sub text */
.career p {
     color: var(--contrast-color);
     font-size: 1.05rem;
     max-width: 560px;
     margin: 0 auto 15px;
     line-height: 1.7;
}

/* buttons */
.career-btns {
     display: flex;
     gap: 14px;
     justify-content: center;
     flex-wrap: wrap;
}

.btn-primary-custom {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     padding: 14px 30px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 15px;
     text-decoration: none;
     border: none;
     transition: transform .25s, box-shadow .25s;
     box-shadow: 0 4px 20px rgba(107, 134, 255, .45);
}

.btn-primary-custom:hover {
     color: var(--contrast-color);
     transform: translateY(-3px);
     box-shadow: 0 14px 32px rgba(107, 134, 255, .45);
}

.btn-outline-custom {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border: 2px solid rgba(107, 134, 255, .45);
     color: var(--contrast-color);
     padding: 14px 30px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 15px;
     text-decoration: none;
     transition: border-color .25s, color .25s, transform .25s;
     backdrop-filter: blur(8px);
}

.btn-outline-custom:hover {
     border-color: var(--accent-color);
     color: var(--contrast-color);
     transform: translateY(-3px);
}

/* Why choose us */
.career-section-wrap {
     position: relative;
     z-index: 1;
     padding: 90px 0;
}

.career-section-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--default-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.career-section-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

.career-section-title {
     font-size: clamp(2rem, 5vw, 3.4rem);
     font-weight: 700;
     color: var(--heading-color);
     line-height: 1.1;
}

.career-section-sub {
     color: var(--default-color);
     font-size: 1.05rem;
     max-width: 560px;
     line-height: 1.7;
     margin: 0 auto 30px;
}

.career-card {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 20px;
     padding: 32px 28px;
     height: 100%;
     position: relative;
     overflow: hidden;
     transition: border-color .3s, transform .3s, box-shadow .3s;
}

.career-card::before {
     content: '';
     position: absolute;
     top: -50px;
     right: -50px;
     width: 150px;
     height: 150px;
     background: radial-gradient(circle, rgba(0, 200, 240, .06) 0%, transparent 70%);
     pointer-events: none;
}

.career-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     opacity: 0;
     transition: opacity .3s;
}

.career-card:hover {
     transform: translateY(-6px);
     border-color: var(--accent-color);
     box-shadow: 0 24px 56px rgba(107, 134, 255, .18);
}

.career-card:hover::after {
     opacity: 1;
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
}

.career-icon {
     width: 54px;
     height: 54px;
     border-radius: 14px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid var(--accent-color);
     display: grid;
     place-items: center;
     font-size: 22px;
     color: var(--contrast-color);
     margin-bottom: 20px;
     transition: background .3s, box-shadow .3s;
}

.career-card:hover .career-icon {
     box-shadow: 0 0 20px rgba(0, 200, 240, .25);
}

.career-title {
     font-size: 1.05rem;
     font-weight: 600;
     color: var(--contrast-color);
     margin-bottom: 10px;
}

.career-desc {
     color: var(--contrast-color);
     font-size: 0.9rem;
     font-weight: 300;
     margin: 0;
}

/* Open Position */
.career-positions-section {
     position: relative;
     z-index: 1;
     padding: 90px 0;
     background: var(--default-color);
     border-radius: 30px;
}


.career-sec-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.career-sec-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

.career-sec-title {
     font-size: clamp(2rem, 5vw, 3.4rem);
     font-weight: 700;
     color: var(--contrast-color);
     line-height: 1.1;
}

.career-sec-sub {
     color: var(--contrast-color);
     font-size: 1.05rem;
     max-width: 560px;
     line-height: 1.7;
     margin: 10 auto;
}

/* Filter tabs */
.career-filter-tabs {
     display: flex;
     gap: 10px;
     justify-content: center;
     flex-wrap: wrap;
     margin-bottom: 44px;
}

.career-filter-tab {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 10px 20px;
     border-radius: 50px;
     border: 1px solid var(--accent-color);
     background: transparent;
     color: var(--contrast-color);
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: all .25s;
}

.career-filter-tab:hover,
.career-filter-tab.active {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
     box-shadow: 0 6px 20px rgba(107, 134, 255, .45);
     border-color: rgba(107, 134, 255, .45);
}

/* Job card */
.career-job-card {
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     border-radius: 20px;
     padding: 28px 30px;
     display: flex;
     align-items: center;
     gap: 24px;
     margin-bottom: 18px;
     transition: border-color .3s, transform .25s, box-shadow .3s;
     text-decoration: none;
     color: inherit;
     position: relative;
     overflow: hidden;
}

.career-job-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
     opacity: 0;
     transition: opacity .3s;
}

.career-job-card:hover {
     border-color: var(--accent-color);
     transform: translateX(6px);
     color: inherit;
}

.career-job-card:hover::after {
     opacity: 1;
}

.career-job-icon {
     flex-shrink: 0;
     width: 52px;
     height: 52px;
     border-radius: 14px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid rgba(107, 134, 255, .45);
     display: grid;
     place-items: center;
     font-size: 22px;
     color: var(--contrast-color);
     transition: background .3s;
}

.career-job-info {
     flex: 1;
     min-width: 0;
}

.career-job-title {
     font-size: 1rem;
     font-weight: 500;
     color: var(--contrast-color);
     margin-bottom: 8px;
}

.career-job-meta {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
}

.career-job-tag {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 0.78rem;
     font-weight: 500;
     color: var(--contrast-color);
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid rgba(107, 134, 255, .45);
     padding: 4px 12px;
     border-radius: 50px;
}

.career-job-tag.tag-type {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid rgba(107, 134, 255, .45);
     color: var(--contrast-color);
}

.career-job-tag.tag-new {
     border-color: rgba(107, 134, 255, .45);
     color: var(--contrast-color);
     background: rgba(10, 240, 212, .07);
}

.career-job-apply-btn {
     flex-shrink: 0;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     box-shadow: 0 4px 20px rgba(107, 134, 255, .45);
     color: var(--contrast-color);
     border: none;
     padding: 10px 22px;
     border-radius: 50px;
     font-size: 0.82rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .25s;
     text-decoration: none;
     white-space: nowrap;
}

.career-job-apply-btn:hover {
     box-shadow: 0 4px 20px rgba(107, 134, 255, .45);
     transform: translateY(-1px);
     color: var(--contrast-color);
}

.career-infobox {
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     border-radius: 12px;
     padding: 16px 20px;
     font-size: 0.91rem;
     color: var(--contrast-color);
}

.career-infobox strong {
     color: var(--contrast-color);
}


/* Our Culture */
.career-cul-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--default-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.career-cul-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

.career-cul-title {
     font-size: clamp(2rem, 5vw, 3.4rem);
     font-weight: 700;
     color: var(--heading-color);
     line-height: 1.1;
}

.career-cul-sub {
     color: var(--default-color);
     font-size: 1.05rem;
     max-width: 560px;
     line-height: 1.7;
     margin: 10 auto;
}

.career-culture-card {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 18px;
     padding: 30px 28px;
     height: 100%;
     transition: all .3s;
}

.career-culture-card:hover {
     border-color: var(--accent-color);
     transform: translateY(-4px);
}

.career-culture-num {
     font-size: 2.5rem;
     font-weight: 600;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     line-height: 1;
     margin-bottom: 12px;
}

.career-culture-label {
     font-size: 0.95rem;
     font-weight: 500;
     color: var(--contrast-color);
     margin-bottom: 8px;
}

.career-culture-desc {
     color: var(--contrast-color);
     font-size: 0.88rem;
     font-weight: 300;
     margin: 0;
}

.career-perk-card {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 20px;
     padding: 32px 28px;
     height: 100%;
     position: relative;
     overflow: hidden;
     transition: border-color .3s, transform .3s, box-shadow .3s;
}

.career-perk-card::before {
     content: '';
     position: absolute;
     top: -50px;
     right: -50px;
     width: 150px;
     height: 150px;
     pointer-events: none;
}

.career-perk-card::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
     opacity: 0;
     transition: opacity .3s;
}

.career-perk-card:hover {
     border-color: var(--accent-color);
     transform: translateY(-6px);
     box-shadow: 0 20px 60px rgba(0, 200, 240, .1);
}

.career-perk-card:hover::after {
     opacity: 1;
}

.career-perk-icon {
     width: 54px;
     height: 54px;
     border-radius: 14px;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid var(--accent-color);
     display: grid;
     place-items: center;
     font-size: 22px;
     color: var(--contrast-color);
     margin-bottom: 20px;
     transition: background .3s, box-shadow .3s;
}

.career-perk-title {
     font-size: 1.05rem;
     font-weight: 600;
     color: var(--contrast-color);
     margin-bottom: 10px;
}

.career-perk-desc {
     color: var(--contrast-color);
     font-size: 0.9rem;
     font-weight: 300;
     margin: 0;
}

/* HIRING PROCESS */
.career-position-section {
     position: relative;
     z-index: 1;
     padding: 90px 0;
     border-radius: 30px;
}

.career-process-step {
     display: flex;
     gap: 22px;
     align-items: flex-start;
     margin-bottom: 32px;
}

.career-process-step:last-child {
     margin-bottom: 0;
}

.career-step-num {
     flex-shrink: 0;
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border: 1px solid var(--accent-color);
     display: grid;
     place-items: center;
     font-size: 0.9rem;
     font-weight: 800;
     color: var(--contrast-color);
     position: relative;
}

.career-step-num::after {
     content: '';
     position: absolute;
     top: 48px;
     left: 50%;
     transform: translateX(-50%);
     width: 2px;
     height: 40px;
     background: linear-gradient(to bottom, var(--accent-color), transparent);
}

.career-process-step:last-child .step-num::after {
     display: none;
}

.career-step-body {
     padding-top: 8px;
}

.career-step-title {
     font-size: 1rem;
     font-weight: 600;
     color: var(--heading-color);
     margin-bottom: 6px;
}

.career-step-desc {
     color: var(--default-color);
     font-size: 0.9rem;
     font-weight: 300;
}

/* Application Form */
.career-form-section {
     position: relative;
     z-index: 1;
     padding: 90px 0;
}

.career-form-wrap {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 24px;
     padding: 50px 48px;
     position: relative;
     overflow: hidden;
}

.career-form-wrap::before {
     content: '';
     position: absolute;
     top: -80px;
     right: -80px;
     width: 300px;
     height: 300px;
     background: radial-gradient(circle, rgba(0, 200, 240, .06) 0%, transparent 70%);
     pointer-events: none;
}

.career-form-wrap::after {
     content: '';
     position: absolute;
     bottom: -60px;
     left: -60px;
     width: 250px;
     height: 250px;
     background: radial-gradient(circle, rgba(0, 200, 240, .06) 0%, transparent 70%);
     pointer-events: none;
}

.career-form-label {
     color: var(--contrast-color);
     font-size: 0.88rem;
     font-weight: 600;
     margin-bottom: 8px;
}

.form-control,
.form-select {
     background: rgba(255, 255, 255, .04) !important;
     border: 1px solid var(--accent-color) !important;
     color: var(--contrast-color) !important;
     border-radius: 12px !important;
     padding: 12px 16px !important;
     font-size: 0.93rem;
     font-weight: 300;
     transition: border-color .25s, box-shadow .25s !important;
}

.form-control::placeholder {
     color: var(--contrast-color) !important;
}

.form-control:focus,
.form-select:focus {
     border-color: var(--accent-color) !important;
     box-shadow: 0 0 0 3px rgba(0, 200, 240, .15) !important;
     background: rgba(0, 200, 240, .04) !important;
     color: var(--contrast-color) !important;
     outline: none !important;
}

.form-select option {
     background: var(--default-color);
     color: var(--contrast-color);
}

optgroup {
     background: var(--default-color);
     color: var(--contrast-color);
}

textarea.form-control {
     resize: vertical;
     min-height: 130px;
}

.career-file-upload-area {
     border: 2px dashed var(--accent-color);
     border-radius: 12px;
     padding: 30px;
     text-align: center;
     cursor: pointer;
     transition: all .25s;
     background: rgba(0, 200, 240, .02);
}

.career-file-upload-area:hover {
     border-color: var(--accent-color);
     background: rgba(0, 200, 240, .06);
}

.career-file-upload-area i {
     font-size: 32px;
     color: var(--accent-color);
     margin-bottom: 10px;
}

.career-file-upload-area p {
     color: var(--contrast-color);
     font-size: 0.88rem;
     margin: 0;
     font-weight: 300;
}

.career-file-upload-area span {
     color: var(--accent-color);
     font-weight: 600;
}

.career-btn-submit {
     background: linear-gradient(90deg, var(--accent-color), #6b86ff);
     color: var(--contrast-color);
     border: none;
     padding: 14px 40px;
     border-radius: 50px;
     font-size: 0.95rem;
     font-weight: 600;
     box-shadow: 0 4px 20px rgba(107, 134, 255, .45);
     transition: all .25s;
     cursor: pointer;
     width: 100%;
}

.career-btn-submit:hover {
     box-shadow: 0 4px 20px rgba(107, 134, 255, .45);
     transform: translateY(-2px);
}

.career-form-divider {
     height: 2px;
     background: var(--heading-color);
     margin: 30px 0;
}

/* Success alert */
.alert-success-custom {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 12px;
     padding: 16px 20px;
     color: var(--contrast-color);
     font-size: 0.9rem;
     display: none;
     margin-top: 20px;
}



/*--------------------------------------------------------------
# Terms of services Page
--------------------------------------------------------------*/
/* Header Section */
.terms {
     min-height: 580px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 100px 5% 80px;
     background-color: var(--default-color);
     border-bottom-left-radius: 32px;
     border-bottom-right-radius: 32px;
     position: relative;
     overflow: hidden;
}

.terms-content {
     position: relative;
     z-index: 1;
     max-width: 720px;
     margin: 0 auto;
     margin-top: 80px;
}

/* badge */
.terms-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.terms-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

/* heading */
.terms h1 {
     font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 800;
     color: var(--contrast-color);
     line-height: 1.1;
     letter-spacing: -1px;
}

/* sub text */
.terms p {
     color: var(--contrast-color);
     font-size: 1.05rem;
     max-width: 560px;
     margin: 0 auto 15px;
     line-height: 1.7;
}

.terms-date {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.5px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-top: 20px;
}

.terms-date::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

/* Sections */
.terms-container {
     max-width: 1220px;
     margin: 0 auto;
     margin-top: 70px;
     padding: 0 28px;
     position: relative;
     z-index: 1;
}

.terms-page-grid {
     display: grid;
     grid-template-columns: 260px 1fr;
     gap: 36px;
     padding-bottom: 100px;
     align-items: start;
}

.terms-list {
     position: sticky;
     top: 86px;
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 18px;
     padding: 28px 22px;
     box-shadow: 0 8px 40px rgba(0, 0, 0, .4);
}

.terms-label {
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--contrast-color);
     margin-bottom: 16px;
}

.terms-list a {
     display: block;
     padding: 8px 12px;
     border-radius: 8px;
     color: var(--contrast-color);
     text-decoration: none;
     font-size: 0.85rem;
     font-weight: 600;
     border-left: 2px solid transparent;
     margin-bottom: 2px;
     transition: all .2s;
}

.terms-list a:hover {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
     box-shadow: 0 6px 20px rgba(107, 134, 255, .45);
}

.terms-divider {
     height: 1.5px;
     background: var(--heading-color);
     margin: 18px 0;
}

.terms-card {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
     border-radius: 12px;
     padding: 14px;
}

.terms-card p {
     font-size: 0.82rem;
     color: var(--contrast-color);
     line-height: 1.5;
}

.terms-card a {
     color: var(--contrast-color);
     text-decoration: none;
     font-weight: 450;
     margin-left: -14px;
}

.terms-card a:hover {
     background: linear-gradient(135deg, var(--default-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
     box-shadow: 0 6px 20px rgba(107, 134, 255, .45);
}

.terms-card strong {
     color: var(--contrast-color);
     display: block;
     font-weight: 600;
     margin-bottom: 6px;
     font-size: 0.88rem;
}

.terms-sections {
     display: flex;
     flex-direction: column;
     gap: 28px;
}

.terms-sec {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 20px;
     padding: 38px 42px;
     position: relative;
     overflow: hidden;
     animation: riseIn .55s ease both;
     transition: border-color .3s;
}

.terms-sec:hover {
     border-color: var(--heading-color);
}

.terms-sec::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--heading-color), transparent);
     opacity: 0;
     transition: opacity .35s;
}

.terms-sec:hover::after {
     opacity: 1;
}

.terms-sec::before {
     content: '';
     position: absolute;
     top: -60px;
     right: -60px;
     width: 180px;
     height: 180px;
     background: radial-gradient(circle, var(--heading-color) 0%, transparent 80%);
     pointer-events: none;
}

@keyframes riseIn {
     from {
          opacity: 0;
          transform: translateY(24px)
     }

     to {
          opacity: 1;
          transform: translateY(0)
     }
}

.terms-sec h2 {
     font-size: 1.35rem;
     font-weight: 600;
     color: var(--contrast-color);
     margin-bottom: 18px;
}

.terms-sec p {
     color: var(--contrast-color);
     font-size: 0.94rem;
     margin-bottom: 14px;
     font-weight: 300;
}

.terms-sec p:last-child {
     margin-bottom: 0;
}

.terms-sec ul {
     list-style: none;
     margin: 14px 0;
     display: flex;
     flex-direction: column;
     gap: 11px;
}

.terms-sec ul li {
     display: flex;
     align-items: flex-start;
     gap: 11px;
     color: var(--contrast-color);
     font-size: 0.93rem;
     font-weight: 300;
}

.terms-dot {
     flex-shrink: 0;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--accent-color);
     margin-top: 8px;
     box-shadow: 0 0 6px var(--accent-color);
     display: inline-block;
}

.terms-infobox {
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     border-radius: 12px;
     padding: 16px 20px;
     margin: 18px 0;
     font-size: 0.91rem;
     color: var(--contrast-color);
}

.terms-infobox strong {
     color: var(--contrast-color);
}

.terms-hl {
     color: #9ecfe8;
     font-weight: 600;
}


/* Mobile TOC toggle button */
.toc-toggle-btn {
     display: none;
     width: 100%;
     padding: 12px 18px;
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 12px;
     color: var(--accent-color);
     font-weight: 700;
     font-size: 0.88rem;
     cursor: pointer;
     text-align: left;
     transition: all .2s;
     margin-bottom: 6px;
     align-items: center;
     justify-content: space-between;
}

.toc-toggle-btn i {
     transition: transform .3s;
}

.toc-toggle-btn.open i {
     transform: rotate(180deg);
}



/*--------------------------------------------------------------
# Privacy & Policy Page
--------------------------------------------------------------*/
/* Header Section */
.Policy {
     min-height: 580px;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 100px 5% 80px;
     background-color: var(--default-color);
     border-bottom-left-radius: 32px;
     border-bottom-right-radius: 32px;
     position: relative;
     overflow: hidden;
}

.Policy-content {
     position: relative;
     z-index: 1;
     max-width: 720px;
     margin: 0 auto;
     margin-top: 80px;
}

/* badge */
.Policy-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-bottom: 20px;
}

.Policy-badge::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

/* heading */
.Policy h1 {
     font-size: clamp(2rem, 5vw, 3.2rem);
     font-weight: 800;
     color: var(--contrast-color);
     line-height: 1.1;
     letter-spacing: -1px;
}

/* sub text */
.Policy p {
     color: var(--contrast-color);
     font-size: 1.05rem;
     max-width: 560px;
     margin: 0 auto 15px;
     line-height: 1.7;
}

.Policy-meta-row {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 24px;
     flex-wrap: wrap;
}

.Policy-pill {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
     padding: 6px 20px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.5px;
     color: var(--contrast-color);
     text-transform: uppercase;
     margin-top: 20px;
}

.Policy-pill::before {
     content: '';
     width: 6px;
     height: 6px;
     background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
     border-radius: 50%;
     animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {

     0%,
     100% {
          opacity: 1;
          transform: scale(1);
     }

     50% {
          opacity: .4;
          transform: scale(1.5);
     }
}

.privacy-container {
     max-width: 1220px;
     margin: 0 auto;
     margin-top: 70px;
     padding: 0 28px;
     position: relative;
     z-index: 1;
}

.privacy-page-grid {
     display: grid;
     grid-template-columns: 260px 1fr;
     gap: 36px;
     padding-bottom: 100px;
     align-items: start;
}

.privacy-list {
     position: sticky;
     top: 86px;
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 18px;
     padding: 28px 22px;
     box-shadow: 0 8px 40px rgba(0, 0, 0, .4);
}

.privacy-label {
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: .15em;
     text-transform: uppercase;
     color: var(--contrast-color);
     margin-bottom: 16px;
}

.privacy-list a {
     display: block;
     padding: 8px 12px;
     border-radius: 8px;
     color: var(--contrast-color);
     text-decoration: none;
     font-size: 0.80rem;
     font-weight: 600;
     border-left: 2px solid transparent;
     margin-bottom: 2px;
     transition: all .2s;
}

.privacy-list a:hover {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
     box-shadow: 0 6px 20px rgba(107, 134, 255, .45);
}

.privacy-divider {
     height: 1.5px;
     background: var(--heading-color);
     margin: 18px 0;
}

.privacy-card {
     background: linear-gradient(135deg, var(--accent-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
     border-radius: 12px;
     padding: 14px;
}

.privacy-card p {
     font-size: 0.82rem;
     color: var(--contrast-color);
     line-height: 1.5;
}

.privacy-card a {
     color: var(--contrast-color);
     text-decoration: none;
     font-weight: 450;
     margin-left: -14px;
}

.privacy-card a:hover {
     background: linear-gradient(135deg, var(--default-color), #6b86ff);
     border-color: transparent;
     color: var(--contrast-color);
     box-shadow: 0 6px 20px rgba(107, 134, 255, .45);
}

.privacy-card strong {
     color: var(--contrast-color);
     display: block;
     font-weight: 600;
     margin-bottom: 6px;
     font-size: 0.88rem;
}

.privacy-sections {
     display: flex;
     flex-direction: column;
     gap: 28px;
}

.privacy-sec {
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 20px;
     padding: 38px 42px;
     position: relative;
     overflow: hidden;
     animation: riseIn .55s ease both;
     transition: border-color .3s;
}

.privacy-sec:hover {
     border-color: var(--heading-color);
}

.privacy-sec::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--heading-color), transparent);
     opacity: 0;
     transition: opacity .35s;
}

.privacy-sec:hover::after {
     opacity: 1;
}

.privacy-sec::before {
     content: '';
     position: absolute;
     top: -60px;
     right: -60px;
     width: 180px;
     height: 180px;
     background: radial-gradient(circle, var(--heading-color) 0%, transparent 80%);
     pointer-events: none;
}

@keyframes riseIn {
     from {
          opacity: 0;
          transform: translateY(24px)
     }

     to {
          opacity: 1;
          transform: translateY(0)
     }
}

.privacy-sec h2 {
     font-size: 1.35rem;
     font-weight: 600;
     color: var(--contrast-color);
     margin-bottom: 18px;
}

.privacy-sec p {
     color: var(--contrast-color);
     font-size: 0.94rem;
     margin-bottom: 14px;
     font-weight: 300;
}

.privacy-sec p:last-child {
     margin-bottom: 0;
}

.privacy-sec ul {
     list-style: none;
     margin: 14px 0;
     display: flex;
     flex-direction: column;
     gap: 11px;
}

.privacy-sec ul li {
     display: flex;
     align-items: flex-start;
     gap: 11px;
     color: var(--contrast-color);
     font-size: 0.93rem;
     font-weight: 300;
}

.privacy-dot {
     flex-shrink: 0;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--accent-color);
     margin-top: 8px;
     box-shadow: 0 0 6px var(--accent-color);
     display: inline-block;
}

.privacy-infobox {
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     border-radius: 12px;
     padding: 16px 20px;
     margin: 18px 0;
     font-size: 0.91rem;
     color: var(--contrast-color);
}

.privacy-infobox strong {
     color: var(--contrast-color);
}

.privacy-hl {
     color: #9ecfe8;
     font-weight: 600;
}

.privacy-sec-rule {
     height: 1.5px;
     background: var(--heading-color);
     margin: 22px 0;
}

.privacy-grid-list {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px;
     margin: 16px 0;
}

.privacy-grid-card {
     background: rgba(0, 144, 240, 0.121);
     border: 1px solid rgba(0, 200, 240, .22);
     border-radius: 12px;
     padding: 16px 18px;
}

.privacy-grid-card h4 {
     font-size: 0.88rem;
     font-weight: 700;
     color: var(--contrast-color);
     margin-bottom: 6px;
}

.privacy-grid-card p {
     font-size: 0.84rem;
     color: var(--contrast-color);
     margin: 0;
     font-weight: 300;
}


/* Mobile TOC toggle button */
.privacy-toc-toggle {
     display: none;
     width: 100%;
     padding: 12px 18px;
     background: var(--default-color);
     border: 1px solid var(--accent-color);
     border-radius: 12px;
     color: var(--accent-color);
     font-weight: 700;
     font-size: 0.88rem;
     cursor: pointer;
     text-align: left;
     transition: all .2s;
     margin-bottom: 6px;
     align-items: center;
     justify-content: space-between;
}

.privacy-toc-toggle i {
     transition: transform .3s;
     display: inline-block;
}

.privacy-toc-toggle.open i {
     transform: rotate(180deg);
}



/* Responsive */
@media (max-width: 991.98px) {
     .about-visual {
          padding-top: 80px;
          padding-bottom: 80px;
     }

     .floating-badge {
          bottom: 0;
          right: 0;
     }

     .panel-layout {
          grid-template-columns: 1fr;
          gap: 36px;
     }

     .sub-grid {
          grid-template-columns: repeat(2, 1fr);
     }

     .faq-layout {
          grid-template-columns: 1fr;
          gap: 40px;
     }

     .career-form-wrap {
          padding: 32px 24px;
     }

     .career-job-card {
          flex-wrap: wrap;
     }

     .career-job-apply-btn {
          width: 100%;
          text-align: center;
     }

     .toc-toggle-btn {
          display: flex;
     }

     .terms-page-grid {
          grid-template-columns: 1fr !important;
          gap: 0 !important;
     }

     .terms-list {
          position: static !important;
          display: none;
          border-radius: 0 0 18px 18px !important;
          border-top: none !important;
          margin-bottom: 28px;
     }

     .terms-list.show {
          display: block !important;
     }

     .privacy-toc-toggle {
          display: flex;
     }

     .privacy-page-grid {
          grid-template-columns: 1fr !important;
          gap: 0 !important;
     }

     .privacy-list {
          position: static !important;
          display: none !important;
          border-radius: 0 0 18px 18px !important;
          border-top: none !important;
          margin-bottom: 28px;
     }

     .privacy-list.show {
          display: block !important;
     }

     .privacy-grid-list {
          grid-template-columns: 1fr 1fr !important;
     }
}

@media (max-width: 767.98px) {
     .about-hero {
          padding: 120px 5% 70px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
     }

     .hero-title {
          font-size: 2rem;
     }

     .experience-tag {
          top: 0;
          left: 12px;
     }

     .floating-badge {
          right: 8px;
          bottom: 0;
     }

     .srv-tab {
          font-size: 12px;
          padding: 8px 14px;
     }

     .srv-item:hover {
          transform: none;
     }

     .srv-item:hover {
          transform: none;
     }

     .sub-card:hover {
          transform: translateY(-4px);
     }

     .terms-sec {
          padding: 24px 20px !important;
     }

     .terms-sec h2 {
          font-size: 1.1rem !important;
     }

     .terms-container {
          padding: 0 16px !important;
          margin-top: 40px !important;
     }

     .privacy-sec {
          padding: 24px 20px !important;
     }

     .privacy-sec h2 {
          font-size: 1.1rem !important;
     }

     .privacy-grid-list {
          grid-template-columns: 1fr !important;
     }

     .privacy-container {
          padding: 0 16px !important;
          margin-top: 40px !important;
     }
}

@media (max-width: 575.98px) {
     .service {
          padding: 120px 5% 70px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
     }

     .service-btns {
          flex-direction: column;
          align-items: center;
     }

     .sub-grid {
          grid-template-columns: 1fr;
     }

     .t-card {
          width: 82vw;
     }

     .t-card:hover {
          transform: none;
     }

     .faq-q {
          font-size: 13.5px;
          padding: 16px;
     }

     .faq-contact {
          padding: 22px 18px;
     }

     .portfolio {
          padding: 120px 5% 70px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
     }

     .img-wrap {
          height: 185px;
     }

     .blog-card {
          flex-direction: column;
     }

     .card-thumb {
          width: 100%;
          height: 195px;
     }

     .author-box {
          flex-direction: column;
     }

     .career {
          padding: 120px 5% 70px;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
     }

     .career-btns {
          flex-direction: column;
          align-items: center;
     }

     .career-section-wrap,
     .career-positions-section,
     .career-form-section {
          padding: 60px 0;
     }

     .career-form-wrap {
          padding: 24px 16px;
     }

     .btn-primary-custom,
     .btn-outline-custom {
          width: 100%;
          justify-content: center;
     }

     .terms-sec {
          padding: 20px 16px !important;
          border-radius: 14px !important;
     }

     .privacy-sec {
          padding: 20px 16px !important;
          border-radius: 14px !important;
     }
}