/* ========================
   Fonts (Variable fallback)
======================== */


/* ========================
   Design Tokens
======================== */
:root {
    --strevia-primary: #B405FE;
    --strevia-grad-start: #B405FE;
    --strevia-grad-end: #21B3FF;
    --strevia-grad: linear-gradient(90deg, var(--strevia-grad-start), var(--strevia-grad-end));
}

/* ===========================
   Theme colors (dark / light)
   =========================== */
html[data-theme="dark"] {
    --bg-body: #020313;
    --text-color: #f5f7ff;
    --muted-color: rgba(245,247,255,0.88);
    --muted-color-2: rgba(245,247,255,0.6);
    --outline-stroke: #21B3FF;
}
html[data-theme="light"] {
    --bg-body: #f7f9fb;
    --text-color: #0b1320;
    --muted-color: rgba(11,19,32,0.85);
    --muted-color-2: rgba(11,19,32,0.55);
    --outline-stroke: #1f7fb3; /* lighter outline for light theme */
}


/* ========================
   Breadcrumb
======================== */
.header-wrapper {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.header-wrapper .hdr-shell {
    box-shadow: 0px 12.41px 21.39px 0px #0000004D !important;
}

.header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11,12,33,0.95) 0%, rgba(11,12,33,0.7) 100%);
    z-index: 0;
}

html[data-theme="light"] .header-overlay {
    background: linear-gradient(90.28deg, rgba(255, 255, 255, 0.6) 26.55%, rgba(255, 255, 255, 0) 99.76%);
}

html[data-theme="light"] .header-wrapper {
    color: #00123B;
}

.site-header,
.breadcrumb-area {
    position: relative;
    z-index: 1;
}

.breadcrumb-area {
    padding-top: 20px;
    padding-bottom: 80px;
    text-align: left;
    height: 270px;
    margin-bottom: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.page-tit {
    font-size: 60px;
    font-weight: 800;
    margin-bottom: 10px;
    color: inherit;
    text-transform: capitalize;
}

html[data-theme="light"] .page-tit {
    color: #00123B;
}

.page-desc {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 60px;
    line-height: 28px;
}

html[data-theme="light"] .page-desc {
    color: #000000CC;
}

.breadcrumb-links {
    display: flex;
    align-items: center;
    font-weight: 400;
    gap: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
}

html[data-theme="light"] .breadcrumb-links {
    color: #000000CC;
}

.breadcrumb-links a {
    color: inherit;
    text-decoration: none;
    transition: .5s ease;
}

.breadcrumb-links a:hover {
    color: #B405FE;
}

@media (max-width: 768px) {
    .page-tit { font-size: 2.5rem; }
    .header-wrapper { padding-bottom: 0; }
}


/* ========================
   Page Navigation
======================== */
.wp-pagenavi {
    margin-top: 60px;
    --pg-size: 44px;
    --pg-radius: 12px;
    --pg-shadow: 0 8px 18px rgba(0, 0, 0, .08);
    --pg-shadow-hover: 0 12px 24px rgba(0, 0, 0, .12);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}

.wp-pagenavi .pages {
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    color: color-mix(in srgb, var(--c-black) 70%, transparent);
    border: 1px solid rgba(0, 0, 0, .08);
    box-shadow: var(--pg-shadow);
    font-weight: 500;
}

.wp-pagenavi a,
.wp-pagenavi span.current,
.wp-pagenavi span.extend {
    display: inline-grid;
    place-items: center;
    min-inline-size: var(--pg-size);
    min-block-size: var(--pg-size);
    border-radius: var(--pg-radius);
    background: #fff;
    color: var(--c-black);
    text-decoration: none;
    border: none;
    box-shadow: var(--pg-shadow);
    transition:
            transform .25s cubic-bezier(.2, .8, .2, 1),
            box-shadow .25s cubic-bezier(.2, .8, .2, 1),
            background .25s ease,
            color .25s ease,
            border-color .25s ease;
}

.wp-pagenavi a.page,
.wp-pagenavi a.larger,
.wp-pagenavi a.smaller {
    background: #fff;
}

.wp-pagenavi a:hover {
    transform: translateY(-2px);
    box-shadow: var(--pg-shadow-hover);
    color: var(--c-primary);
    border-color: var(--c-primary) !important;
    background: color-mix(in srgb, var(--c-secondary) 10%, #fff 90%);
}

.wp-pagenavi span.current {
    background: var(--c-primary);
    color: var(--c-white);
    border-color: transparent;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--c-primary) 28%, transparent);
    pointer-events: none;
}

.wp-pagenavi a.nextpostslink,
.wp-pagenavi a.previouspostslink {
    font-weight: 700;
}

.wp-pagenavi a.nextpostslink:hover,
.wp-pagenavi a.previouspostslink:hover {
    transform: translateY(-2px) scale(1.06);
}

.wp-pagenavi .disabled {
    opacity: .4;
    pointer-events: none;
}

.wp-pagenavi a:focus-visible {
    outline: none;
    box-shadow:
            var(--pg-shadow-hover),
            0 0 0 4px color-mix(in srgb, var(--c-primary) 25%, transparent);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .wp-pagenavi {
        --pg-size: 38px;
        gap: 8px;
    }

    .wp-pagenavi .pages {
        display: none;
    }
}

html[dir="rtl"] :where(input[type="email"], input[type="tel"], input[type="url"]),
.chip__text,
.contact-card li a,
.footer-line a {
    direction: ltr;
    text-align: left;
    unicode-bidi: plaintext;
}

html[dir="rtl"] :where(input[type="email"], input[type="tel"], input[type="url"])::placeholder {
    direction: ltr;
    text-align: left;
}


/* ========================
   Reset
======================== */
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    scrollbar-width: thin;
    /* Primary Purple to Blue Gradient Look */
    scrollbar-color: #B405FE #0b0c15;
}

/* Webkit Scrollbar Customization */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* For horizontal scroll */
}

*::-webkit-scrollbar-track {
    background: #0b0c15; /* Dark background matching site theme */
    border-radius: 4px;
}

*::-webkit-scrollbar-thumb {
    /* Strevia Gradient for the thumb */
    background: linear-gradient(180deg, #B405FE 0%, #21B3FF 100%);
    border-radius: 10px;
    border: 2px solid #0b0c15; /* Padding effect */
}

*::-webkit-scrollbar-thumb:hover {
    background: #21B3FF; /* Blue on hover */
}

/* Light Theme Support (Optional if needed) */
html[data-theme="light"] * {
    scrollbar-color: #B405FE #F8F9FC;
}

html[data-theme="light"] *::-webkit-scrollbar-track {
    background: #F8F9FC;
}

html[data-theme="light"] *::-webkit-scrollbar-thumb {
    border: 2px solid #F8F9FC;
}


@media (prefers-reduced-motion: reduce) {
    *, :before, :after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

html:focus-within {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
    margin: 0;
}

img, svg, video, canvas, iframe {
    max-inline-size: 100%;
    max-block-size: 100%;
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none !important;
}

input, textarea, select, button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    outline: 0;
    appearance: none;
}

button, [type="button"], [type="submit"] {
    cursor: pointer;
}

[disabled] {
    cursor: not-allowed;
    opacity: .5;
}


/* ========================
  Base
======================== */
html {
    font-size: clamp(16px, 15px + .3vw, 18px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background: #F4F2EF;
    color: var(--text);
    font-family: "Roboto", Arial, sans-serif;
    line-height: var(--lh);
}


main.wrap {
    position: relative;
    overflow: hidden;
    inset-inline-start: 0;
    transition: inset-inline-start .7s ease-in-out;
}

ul, ol {
    list-style: none;
}

blockquote {
    quotes: none;
}

code, pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

img:not(.c-primary-caption img) {
    object-fit: contain;
}


/* ========================
   Typography
======================== */
h1 {
    font-weight: 800;
    font-size: var(--h1);
}

h2 {
    font-weight: 700;
    font-size: var(--h2);
}

h3 {
    font-weight: 600;
    font-size: var(--h3);
}

h4, h5, h6 {
    font-weight: 400;
    font-size: 1rem;
}


/*----------------------------------------------------
 Main Button Styles
----------------------------------------------------*/
.btn-primary-grad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    min-width: 220px;
    padding: 0 32px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    color: #fff;
    background: var(--strevia-grad);
    border: none;
    box-shadow: 0 8px 24px rgba(180, 5, 254, .3);
    transition: transform .25s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden;
}

.btn-primary-grad::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transform: translateX(-100%);
    transition: transform .6s ease;
}

.btn-primary-grad:hover::before {
    transform: translateX(100%);
}

.btn-primary-grad:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(180, 5, 254, .5);
    color: #fff;
}

.btn-outline-grad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 32px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    color: #fff;
    border: 2px solid transparent;
    background: linear-gradient(#0E2847, #0E2847) padding-box, var(--strevia-grad) border-box;
    transition: transform .25s ease, background .3s ease, color .3s ease;
    position: relative;
    overflow: hidden;
}

.btn-outline-grad::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--strevia-grad);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: -1;
}

.btn-outline-grad:hover::before {
    opacity: 1;
}

.btn-outline-grad:hover {
    transform: translateY(-3px);
    color: #fff;
}
/*******************************/
.main-btn--outline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    height: 50px;
    padding: 0 32px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
    box-shadow: 0 0 20px rgba(33, 179, 255, 0.1);
}

.main-btn--outline::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 500%;
    background: conic-gradient(
            transparent 0deg,
            transparent 80deg,
            var(--strevia-grad-start) 140deg,
            var(--strevia-grad-end) 220deg,
            transparent 360deg
    );
    transform: translate(-50%, -50%);
    animation: rotate-border 4s linear infinite;
    z-index: -2;
}

.main-btn--outline::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #0b0c15;
    border-radius: 6px;
    z-index: -1;
    transition: background 0.3s ease;
}

.main-btn--outline:hover {
    color: #fff;
    transform: translateY(-3px);
    box-shadow:
            0 10px 40px -10px rgba(180, 5, 254, 0.5),
            0 0 20px rgba(33, 179, 255, 0.3);
}

.main-btn--outline:hover::before {
    animation: rotate-border 2s linear infinite;
    width: 200%;
}

.main-btn--outline:hover::after {
    background: #13141f;
}

@keyframes rotate-border {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

html[data-theme="light"] .main-btn--outline {
    color: #0b0b20;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

html[data-theme="light"] .main-btn--outline::after {
    background: #ffffff;
}

html[data-theme="light"] .main-btn--outline:hover::after {
    background: #f5f5f5;
}



/*----------------------------------------------------
 Section Titles
----------------------------------------------------*/
.sec-tit {
    font-weight: 800;
    font-size: 100px;
    text-align: center;
}

.sec-desc {
    font-weight: 500;
    font-size: 23px;
    text-align: center;
}

html[data-theme="light"] .sec-tit,
html[data-theme="light"] .sec-desc{
        color: #000;
}

html[data-theme="dark"] .sec-tit,
html[data-theme="dark"] .sec-desc {
    color: #FFF;
}


/*----------------------------------------------------
 Header & Navigation
----------------------------------------------------*/
#streviaHeader {
    position: relative;
    margin-bottom: 90px;
    top: 32px;
    z-index: 1002;
    padding-inline: 12px;
    transition: .35s ease;
}

#streviaHeader.compact {
    top: 0;
    margin-top: 0;
    padding-inline: 0;
}

#streviaHeader .hdr-shell {
    border-radius: 20px;
    background: rgba(11, 17, 26, .5);
    box-shadow: 0px 12.41px 21.39px 0px #0000001A;
    border: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 10px 14px;
}

#streviaHeader .hdr-logo img {
    max-height: 53px;
    height: auto;
    width: auto;
}

#streviaHeader .main-menu .nav-list > li > a {
    display: inline-block;
    padding: 10px 14px;
    font-weight: 400;
    font-size: clamp(16px, .9vw, 16px);
    color: #0b0b20;
    text-decoration: none;
    position: relative;
    transition: color .25s ease;
}

#streviaHeader .main-menu .nav-list > li > a::before {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 3px;
    border-radius: 3px;
    transform: scaleX(0);
    background: linear-gradient(90deg, var(--strevia-grad-start), var(--strevia-grad-end));
    transition: transform .28s ease;
    transform-origin: left;
}

#streviaHeader .main-menu .nav-list > li > a:hover {
    color: #7e3cff;
}

#streviaHeader .main-menu .nav-list > li > a:hover::before {
    transform: scaleX(1);
}

#streviaHeader .main-menu .menu-item-has-children {
    position: relative;
}

#streviaHeader .main-menu .menu-item-has-children:hover > ul {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#streviaHeader .main-menu .menu-item-has-children > ul {
    position: absolute;
    min-width: 210px;
    inset-inline-start: 0;
    top: 100%;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(10, 12, 27, .12);
    padding: 8px;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: .22s ease;
    pointer-events: none;
}

#streviaHeader .main-menu .menu-item-has-children > ul > li > a {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: #12121f;
    font-weight: 600;
}

#streviaHeader .main-menu .menu-item-has-children > ul > li > a:hover {
    background: #f5f6ff;
    color: #6a3bff;
}

#streviaHeader .hdr-actions {
    gap: 10px;
}

#streviaHeader .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 31px;
    border-radius: 28px;
    text-decoration: none;
    color: #0b0b20;
    font-weight: 700;
}

#streviaHeader .lang-switch i {
    flex: 0 0 auto;
}

html[data-theme="dark"] .lang-switch .dark-lang {
    display: block;
}

html[data-theme="dark"] .lang-switch .light-lang {
    display: none;
}

html[data-theme="light"] .lang-switch .dark-lang {
    display: none;
}

html[data-theme="light"] .lang-switch .light-lang {
    display: block;
}

#streviaHeader .hamburger {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .08);
    background: #ffffff;
    display: inline-grid;
    place-items: center;
    gap: 4px;
    padding: 0;
}

#streviaHeader .hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #0b0b20;
}

[dir="rtl"] #streviaHeader .main-menu .nav-list > li > a::before {
    transform-origin: right;
}

html[data-theme="dark"] body {
    background: #0b0c21;
    color: #e9ecff;
}

html[data-theme="dark"] #streviaHeader .hdr-shell {
    background: color-mix(in srgb, #0f1129, transparent 18%);
    border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] #streviaHeader .main-menu .nav-list > li > a {
    color: #f3f5ff;
}

html[data-theme="dark"] #streviaHeader .main-menu .menu-item-has-children > ul {
    background: #12122a;
    border: 1px solid rgba(255, 255, 255, .06);
}

html[data-theme="dark"] #streviaHeader .main-menu .menu-item-has-children > ul > li > a {
    color: #f1f3ff;
}

html[data-theme="dark"] #streviaHeader .main-menu .menu-item-has-children > ul > li > a:hover {
    background: #1a1d3a;
    color: #B405FE;
}

html[data-theme="dark"] #streviaHeader .lang-switch {
    color: #f1f3ff;
}

html[data-theme="dark"] #streviaHeader .hamburger {
    background: #121430;
    border: 1px solid rgba(255, 255, 255, .08);
}

html[data-theme="dark"] #streviaHeader .hamburger span {
    background: #f1f3ff;
}

html[data-theme="light"] body {
    background: #ffffff;
    color: #0b0b20;
}

html[data-theme="light"] #streviaHeader .hdr-shell {
    background: color-mix(in srgb, #ffffff, transparent 8%);
    border-color: rgba(0, 0, 0, .07);
}

html[data-theme="light"] #streviaHeader .main-menu .nav-list > li > a {
    color: #0b0b20;
}

body.scrolled #streviaHeader {
    margin-top: 0;
    top: 0;
}

body.scrolled #streviaHeader .hdr-shell {
    padding: 6px 12px;
}

body.scrolled #streviaHeader .hdr-logo img {
    max-height: 30px;
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(2px);
    z-index: 1100;
    display: none;
}

body.sidebar-open #sidebarOverlay {
    display: block;
}

.logo-dark {
    display: inline;
}

.logo-light {
    display: none;
}

html[data-theme="light"] .logo-dark {
    display: none;
}

html[data-theme="light"] .logo-light {
    display: inline;
}


/*----------------------------------------------------
 HomeHero Section
----------------------------------------------------*/
.strevia-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.strevia-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

html[data-theme="dark"] .strevia-hero::after {
    background: linear-gradient(to top, rgb(0, 0, 0) 2%, rgba(0, 0, 0, 0) 16%);
}

html[data-theme="light"] .strevia-hero::after {
    background: linear-gradient(to top, rgb(255, 255, 255) 2%, rgba(255, 255, 255, 0) 16%);
}

.blob {
    position: absolute;
    inset: auto;
    pointer-events: none;
    z-index: 0;
    opacity: 1;
    pointer-events: none;
}

@media (min-width: 1200px) {
    .blob--right {
        right: -90px;
        top: -198.87px;
        width: 546.15px;
        height: 675.83px;
        background: linear-gradient(200deg, #21B3FF 0%, rgba(33, 179, 255, 0) 100%);
        filter: blur(120px);
        border-radius: 0;
    }
    .blob--left {
        left: -90px;
        top: -165px;
        width: 604px;
        height: 700px;
        background: linear-gradient(200deg, #B405FE 0%, rgba(180, 5, 254, 0) 100%);
        filter: blur(120px);
        border-radius: 0;
    }
}

.strevia-hero .strevia-hero__title {
    font-family: Montserrat, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(72px, 6vw, 64px);
    line-height: 1.08;
    margin: 0 0 45px;
    letter-spacing: .2px;
}

.strevia-hero .grad-chip {
    display: inline-flex;
    align-items: center;
}

.strevia-hero .grad-icon {
    margin-inline-end: 10px;
    height: 45px;
}

.strevia-hero .t-gradient {
    background: var(--strevia-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.strevia-hero .strevia-hero__ctas {
    margin-top: 12px;
    gap: 12px;
}

.strevia-hero .strevia-hero__stage {
    position: relative;
    inline-size: min(1100px, 96%);
    margin: 24px auto 0;
    min-height: 400px;
}

.strevia-hero .earth {
    position: absolute;
    inset: auto 0 0 0;
    height: 100%;
    background: no-repeat center/contain var(--hero-earth);
}

.strevia-hero .wires {
    position: absolute;
    inset: 6% 0 auto 0;
    height: 50%;
    background: no-repeat center/contain var(--hero-wires);
    pointer-events: none;
}

.strevia-hero .avatar {
    position: absolute;
    width: clamp(56px, 6vw, 86px);
    aspect-ratio: 1/1;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .2);
    z-index: 1;
    padding: 3px;
    background: transparent;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease;
}

.strevia-hero .avatar::before {
    content: "";
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
            transparent,
            transparent,
            transparent,
            #B405FE,
            #21B3FF
    );
    animation: spin-border 4s linear infinite;
    z-index: -2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.strevia-hero .avatar::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: #0b0c15;
    border-radius: 21px;
    z-index: -1;
}

.strevia-hero .avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 21px;
    position: relative;
    z-index: 1;
    transition: transform 0.5s ease;
}

.strevia-hero .avatar:hover {
    z-index: 10;
    box-shadow: 0 20px 50px rgba(180, 5, 254, 0.3);
    animation-play-state: paused;
}

.strevia-hero .avatar:hover img {
    transform: scale(1.1);
}

.strevia-hero .avatar.pos-tl {
    top: -13%;
    left: 3%;
    animation: float-tl 7s ease-in-out infinite;
}

.strevia-hero .avatar.pos-tr {
    top: -10%;
    right: 7%;
    animation: float-tr 6s ease-in-out infinite;
}

.strevia-hero .avatar.pos-bl {
    bottom: 28%;
    left: -6%;
    animation: float-bl 8s ease-in-out infinite;
}

.strevia-hero .avatar.pos-br {
    bottom: 24%;
    right: -4%;
    animation: float-br 6.5s ease-in-out infinite;
}

@keyframes spin-border {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes float-tl {
    0%, 100% { transform: rotate(15deg) translateY(0) translateX(0); }
    50% { transform: rotate(10deg) translateY(-15px) translateX(5px); }
}

@keyframes float-tr {
    0%, 100% { transform: rotate(-35deg) translateY(0) translateX(0); }
    50% { transform: rotate(-20deg) translateY(25px) translateX(-5px); }
}

@keyframes float-bl {
    0%, 100% { transform: perspective(1000px) rotateY(20deg) rotateX(5deg) translateY(0); }
    50% { transform: perspective(1000px) rotateY(25deg) rotateX(0deg) translateY(-12px); }
}

@keyframes float-br {
    0%, 100% { transform: rotate(-15deg) translateY(0) translateX(0); }
    50% { transform: rotate(-20deg) translateY(15px) translateX(8px); }
}


@media (max-width: 991.98px) {
    .strevia-hero .strevia-hero__stage {
        min-height: 380px;
    }

    .strevia-hero .avatar {
        width: clamp(48px, 9vw, 72px);
    }
}

@media (max-width: 575.98px) {
    .strevia-hero .strevia-hero__stage {
        min-height: 320px;
    }

    .strevia-hero .avatar {
        border-radius: 16px;
    }

    .strevia-hero .strevia-hero__ctas {
        flex-wrap: wrap;
    }

    .strevia-hero .strevia-hero__ctas {
        min-width: unset;
        width: 100%;
        justify-content: center;
    }
}

.strevia-hero .earth {
    z-index: 1;
}

.strevia-hero .wires-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.strevia-hero .avatar {
    z-index: 3;
}

/* ====== Stats bar ====== */
.strevia-hero__stat-group {
    display: inline-flex;
    border-radius: 60px;
    margin-bottom: 26px;
}

html[data-theme="dark"] .strevia-hero__stat-group {
    background: #000000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}
html[data-theme="light"] .strevia-hero__stat-group {
    background: #FFF;
    box-shadow: 0 24px 60px rgba(255, 255, 255, 0.7);
}

.strevia-hero__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    box-shadow: 0px 4px 4px 0px #45444433;
    border-radius: inherit;
}

.strevia-hero .hero-stat {
    position: relative;
    border-radius: 999px;
}

.strevia-hero .hero-stat__inner {
    position: relative;
    border-radius: inherit;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    padding: 8px 0;
}

html[data-theme="dark"] .strevia-hero .hero-stat__inner {
    color: #ffffff;
}

html[data-theme="light"] .strevia-hero .hero-stat__inner {
    color: #000;
}

.strevia-hero .hero-stat--outline {
    padding: 2px;
    overflow: hidden;
    isolation: isolate;
}

.strevia-hero .hero-stat--outline::before {
    content: "";
    position: absolute;
    inset: -150%;
    border-radius: inherit;
    background: conic-gradient(
            from 0deg,
            var(--strevia-grad-start),
            var(--strevia-grad-end),
            var(--strevia-grad-start)
    );
    animation: hero-stat-border-spin 6s linear infinite;
    z-index: -1;
}

.strevia-hero .hero-stat .hero-stat__inner {
    padding: 8px 24px;
    border-radius: inherit;
}

html[data-theme="dark"] .strevia-hero .hero-stat .hero-stat__inner {
    background: #000;
}

html[data-theme="light"] .strevia-hero .hero-stat .hero-stat__inner {
    background: #FFF;
}

@keyframes hero-stat-border-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 575.98px) {
    .strevia-hero__stat-group {
        max-width: 100%;
    }
    .strevia-hero__stats {
        justify-content: center;
    }
}

#streviaHeader .hdr-actions .mode-switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 64px;
    height: 34px;
    cursor: pointer;
}

#streviaHeader .hdr-actions .mode-switch .input {
    opacity: 0;
    width: 0;
    height: 0;
}

#streviaHeader .hdr-actions .mode-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #73C0FC;
    transition: .4s;
    border-radius: 30px;
}

#streviaHeader .hdr-actions .mode-switch .slider::before {
    position: absolute;
    content: "";
    height: 30px;
    width: 30px;
    border-radius: 20px;
    left: 2px;
    bottom: 2px;
    z-index: 2;
    background-color: #e8e8e8;
    transition: .4s;
}

#streviaHeader .hdr-actions .mode-switch .sun svg {
    position: absolute;
    top: 6px;
    left: 36px;
    z-index: 1;
    width: 24px;
    height: 24px;
    animation: rotate 15s linear infinite;
    opacity: .55;
    transition: opacity .25s ease;
}

#streviaHeader .hdr-actions .mode-switch .moon svg {
    fill: #73C0FC;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    width: 24px;
    height: 24px;
    animation: tilt 5s linear infinite;
    opacity: 1;
    transition: opacity .25s ease;
}

#streviaHeader .hdr-actions .mode-switch .input:focus + .slider {
    box-shadow: 0 0 1px #183153;
}

#streviaHeader .hdr-actions .mode-switch .input:checked + .slider {
    background-color: #183153;
}

#streviaHeader .hdr-actions .mode-switch .input:checked + .slider::before {
    transform: translateX(30px);
}

html[data-theme="dark"] #streviaHeader .hdr-actions .mode-switch .slider {
    background-color: #183153;
}

html[data-theme="dark"] #streviaHeader .hdr-actions .mode-switch .slider::before {
    transform: translateX(30px);
}

html[data-theme="dark"] #streviaHeader .hdr-actions .mode-switch .moon svg {
    opacity: 1;
}

html[data-theme="dark"] #streviaHeader .hdr-actions .mode-switch .sun svg {
    opacity: .55;
}

html[data-theme="light"] #streviaHeader .hdr-actions .mode-switch .slider {
    background-color: #73C0FC;
}

html[data-theme="light"] #streviaHeader .hdr-actions .mode-switch .slider::before {
    transform: none;
}

html[data-theme="light"] #streviaHeader .hdr-actions .mode-switch .sun svg {
    opacity: 1;
}

html[data-theme="light"] #streviaHeader .hdr-actions .mode-switch .moon svg {
    opacity: .55;
}


@keyframes rotate {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes tilt {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(-10deg)
    }
    75% {
        transform: rotate(10deg)
    }
    100% {
        transform: rotate(0deg)
    }
}


/*----------------------------------------------------
 HomeServices Section
----------------------------------------------------*/

.svc .hold-head {
    margin-bottom: 70px;
}

@property --svc-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.svc{
    position:relative;
    padding:clamp(44px,6vw,96px) 0;
    overflow:hidden;
    isolation:isolate;
}

.svc-head{
    margin-bottom:clamp(32px,5vw,56px);
}

.svc-title{
    font-family:Montserrat,system-ui,sans-serif;
    font-weight:800;
    font-size:clamp(28px,5.6vw,64px);
    line-height:1.1;
    margin:0 0 12px 0;
    color:#fff;
}

.svc-lead{
    margin:0;
    color:#B8BFDA;
    font-size:clamp(14px,2vw,16px);
    line-height:1.6;
}

.svc-card{
    position:relative;
    border-radius:15px;
    padding:2px;
    height:100%;
    padding: 20px;
    margin-bottom: 35px;
    overflow:hidden;
    backdrop-filter:blur(200px);
    -webkit-backdrop-filter:blur(200px);
    box-shadow:0 0 36.4px 0 rgba(255,255,255,0.11) inset;
    isolation: isolate;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.svc-card::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:200%;
    height:200%;
    background:conic-gradient(
            from var(--svc-angle),
            transparent 0%,
            transparent 20%,
            #B405FE 40%,
            #21B3FF 60%,
            transparent 80%
    );
    transform:translate(-50%, -50%);
    animation:svc-border-spin 8s linear infinite;
    z-index:-2;
}

.svc-card::after{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:13px;
    background:#0b0c15;
    z-index:-1;
}

@keyframes svc-border-spin{
    from{ --svc-angle:0deg; }
    to{ --svc-angle:360deg; }
}

.svc-card-inner{
    padding:24px;
    height:100%;
    display:flex;
    flex-direction:column;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    position:relative;
    z-index:2;
}

.svc-card:hover{
    transform:translateY(-8px);
    box-shadow:0 30px 60px rgba(33,179,255,.15);
}

.svc-ico{
    width:80px;
    height:80px;
    border-radius:10px;
    position:relative;
    display:grid;
    place-items:center;
    margin-bottom:18px;
    background:#FFFFFF0A;
    border:1px solid rgba(255,255,255,.06);
    backdrop-filter: blur(39.199337005615234px);
    box-shadow:0px 36.75px 33.93px 0px #00000026;
    transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}

.svc-card:hover .svc-ico{
    transform:scale(1.05);
    box-shadow:inset 0 0.95px 10.52px 0px rgba(255,255,255,0.24), 0px 36.75px 33.93px 0px #00000026;
}

.svc-ico img{
    max-width:44px;
    max-height:44px;
    display:block;
    transition:transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.svc-card:hover .svc-ico img{
    transform:scale(1.1);
}

.svc-ico i{
    font-size:36px;
    line-height:1;
    background:var(--strevia-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    transition:filter 0.5s ease;
}

.svc-card:hover .svc-ico i{
    filter:drop-shadow(0 0 15px rgba(180,5,254,.4));
}

.svc-tit{
    color:#fff;
    font-weight:700;
    font-size:clamp(18px,3vw,22px);
    line-height:1.3;
    margin:0 0 10px 0;
    transition:color 0.4s ease;
}

.svc-card:hover .svc-tit{
    background:var(--strevia-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.svc-desc{
    color:#B8BFDA;
    font-size:clamp(13px,2vw,15px);
    line-height:1.7;
    margin:0 0 20px 0;
    flex-grow:1;
    transition:color 0.4s ease;
}

.svc-card:hover .svc-desc{
    color:#D0D5ED;
}

.svc-more{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight:700;
    font-size:clamp(13px,2vw,15px);
    background:var(--strevia-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    transition:gap 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.svc-arrow{
    width:32px;
    height:32px;
    border-radius:50%;
    display:inline-grid;
    place-items:center;
    flex-shrink:0;
    border:2px solid transparent;
    background:linear-gradient(#0f0f23,#0f0f23) padding-box,
    var(--strevia-grad) border-box;
    transition:transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s ease;
}

.svc-arrow i{
    font-size:14px;
    background:var(--strevia-grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    rotate:-30deg;
    transition:transform 0.5s ease, filter 0.5s ease;
}

.svc-card:hover .svc-more{
    gap:14px;
}

.svc-card:hover .svc-arrow{
    transform:translateX(4px) rotate(0deg);
    box-shadow:0 4px 16px rgba(33,179,255,.4);
}

.svc-card:hover .svc-arrow i{
    animation:svc-arrow-bounce 0.8s ease-in-out;
    filter:drop-shadow(0 0 8px rgba(180,5,254,.6));
}

.serv_url {
    margin-top: 50px;
}

@keyframes svc-arrow-bounce{
    0%, 100%{ transform:translateX(0); }
    50%{ transform:translateX(4px); }
}

html[data-theme="light"] .svc{
    background:#F8F9FC;
}

html[data-theme="light"] .svc-title{
    color:#00123B;
}

html[data-theme="light"] .svc-lead{
    color:#000000CC
;
}

html[data-theme="light"] .svc-card{
    box-shadow:0px 4px 4px 0px #00000073;
}

html[data-theme="light"] .svc-card::after{
    background:#FFFFFF;
}

html[data-theme="light"] .svc-card:hover{
    box-shadow:0 12px 40px rgba(33,179,255,.15);
}

html[data-theme="light"] .svc-ico{
    background:#FFFFFF;
    box-shadow:0px 4px 4px 0px #00000059;
    border:none;
}

html[data-theme="light"] .svc-card:hover .svc-ico{
    box-shadow:0px 4px 8px rgba(0,0,0,0.45);
}

html[data-theme="light"] .svc-tit{
    color:#00123B;
}

html[data-theme="light"] .svc-desc{
    color:#000000CC
;
}

html[data-theme="light"] .svc-card:hover .svc-desc{
    color:#3A4058;
}

html[data-theme="light"] .svc-arrow{
    background:linear-gradient(#fff,#fff) padding-box,
    var(--strevia-grad) border-box;
}

@media (max-width:767.98px){
    .svc-desc{
        min-height:unset;
        margin-bottom:16px;
    }
}

.ab-beam {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 261px;
    filter: blur(64px);
    opacity: .55;
    pointer-events: none;
    height: 1176px;
}

.ab-beam--l {
    left: -130px;
    background: radial-gradient(50% 50% at 50% 50%, #B405FE 0.25%, rgba(34, 34, 33, 0) 100%);
}

.ab-beam--r {
    right: -130px;
    background: radial-gradient(50% 50% at 50% 50%, #21B3FF 0.25%, rgba(34, 34, 33, 0) 100%);
}





/*----------------------------------------------------
 HomeAbout Section
----------------------------------------------------*/
.about-block {
    position: relative;
    padding: clamp(44px, 6vw, 96px) 0;
    overflow: hidden;
}

.about-media-wrap {
    position: relative;
}

.about-frame {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    padding: 3px;
    background: conic-gradient(
            from var(--angle),
            var(--strevia-grad-end) 0%,
            var(--strevia-primary) 25%,
            var(--strevia-grad-end) 50%,
            transparent 75%,
            var(--strevia-grad-end) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: about-border-rotate 8s linear infinite;
    opacity: .85;
    transition: opacity .4s ease, filter .4s ease;
}

.about-media-wrap:hover .about-frame {
    opacity: 1;
    animation: about-border-rotate 4s linear infinite;
    filter: drop-shadow(0 0 20px rgba(33, 179, 255, .4));
}

@keyframes about-border-rotate{
    0%{ --angle: 0deg; }
    100%{ --angle: 360deg; }
}

@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.about-media {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    transform: translateY(0);
    transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .4s ease;
    top: 25px;
    inset-inline-end: 24px;
}

.about-media-wrap:hover .about-media {
    transform: translateY(-8px);
}

@property --mask-radius {
    syntax: '<length>';
    initial-value: 99px;
    inherits: false;
}

@property --mask-x {
    syntax: '<percentage>';
    initial-value: 8.1%;
    inherits: false;
}

@property --mask-y {
    syntax: '<percentage>';
    initial-value: 85%;
    inherits: false;
}

/* 2. استخدام المتغيرات في الماسك */
.about-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    mask-image: radial-gradient(circle var(--mask-radius) at var(--mask-x) var(--mask-y), transparent 98%, black 100%);
    -webkit-mask-image: radial-gradient(circle var(--mask-radius) at var(--mask-x) var(--mask-y), transparent 98%, black 100%);

    transition:
            --mask-radius 0.6s ease,
            --mask-x 0.6s ease,
            --mask-y 0.6s ease,
            transform 0.6s ease,
            filter 0.4s ease;
}

.about-media-wrap:hover .about-media img {
    transform: scale(1.05);
    filter: brightness(1.05) saturate(1.1);

    --mask-radius: 105px;
    --mask-x: 9.6%;
    --mask-y: 84%;
}

.about-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-35%, 35%);
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 10;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5));
    transition: transform .5s cubic-bezier(0.34, 1.56, 0.64, 1), filter .4s ease;
}

.about-media-wrap:hover .about-badge {
    transform: translate(-35%, 35%) scale(1.08);
    filter: drop-shadow(0 25px 50px rgba(180, 5, 254, .4));
}

.about-badge-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
            from var(--badge-angle),
            var(--strevia-primary) 0%,
            var(--strevia-grad-end) 50%,
            var(--strevia-primary) 100%
    );
    -webkit-mask: radial-gradient(circle calc(50% - 6px), transparent 99%, #000 100%);
    mask: radial-gradient(circle calc(50% - 6px), transparent 99%, #000 100%);
    animation: about-badge-spin 6s linear infinite;
    transition: filter .4s ease;
}

.about-media-wrap:hover .about-badge-ring {
    animation: about-badge-spin 3s linear infinite;
    filter: brightness(1.3) drop-shadow(0 0 16px rgba(180, 5, 254, .6));
}

@keyframes about-badge-spin{
    0%{ --badge-angle: 0deg; }
    100%{ --badge-angle: 360deg; }
}

@property --badge-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.about-badge-core {
    position: relative;
    width: 155px;
    height: 155px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #252840 0%, #13152A 100%);
    display: grid;
    place-items: center;
    text-align: center;
    padding: 22px;
    transition: background .4s ease, transform .3s ease;
}

.about-media-wrap:hover .about-badge-core {
    background: radial-gradient(circle at 35% 35%, #2d305a 0%, #181b3a 100%);
}

.about-badge-num {
    display: block;
    font-family: Montserrat, system-ui, sans-serif;
    font-weight: 800;
    font-size: 48px;
    line-height: 1;
    color: #fff;
    letter-spacing: -0.5px;
    transition: transform .3s ease, color .3s ease;
}

.about-media-wrap:hover .about-badge-num {
    transform: scale(1.1);
    background: var(--strevia-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-badge-label {
    display: block;
    margin-top: 4px;
    color: #B8BFDA;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    transition: color .3s ease;
}

.about-media-wrap:hover .about-badge-label {
    color: #D8DEFF;
}

.about-head {
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
    animation: about-content-in .8s cubic-bezier(0.34, 1.56, 0.64, 1) .2s forwards;
}

@keyframes about-content-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.about-title {
    margin: 0 0 8px 0;
    font-weight: 800;
    font-size: clamp(102px, 5vw, 64px);
    line-height: 1.1;
    color: #fff;
    transition: color .3s ease;
}

.about-sub {
    margin: 0;
}

.about-sub .grad {
    background: var(--strevia-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: clamp(36px, 2.5vw, 24px);
    line-height: 1.3;
}

.about-text {
    color: #B8BFDA;
    margin: 0 0 28px 0;
    line-height: 1.75;
    font-size: clamp(20px, 2vw, 16px);
    font-weight: 400;
    opacity: 0;
    transform: translateY(20px);
    animation: about-content-in .8s cubic-bezier(0.34, 1.56, 0.64, 1) .4s forwards;
}

.about-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(20px);
    animation: about-content-in .8s cubic-bezier(0.34, 1.56, 0.64, 1) .6s forwards;
}

@media (max-width: 991.98px) {
    .about-badge {
        transform: translate(-30%, 30%);
        width: 150px;
        height: 150px;
    }

    .about-media-wrap:hover .about-badge {
        transform: translate(-30%, 30%) scale(1.08);
    }

    .about-badge-core {
        width: 124px;
        height: 124px;
        padding: 16px;
    }

    .about-badge-num {
        font-size: 40px;
    }

    .about-badge-label {
        font-size: 11px;
    }
}

@media (max-width: 575.98px) {
    .about-badge {
        transform: translate(-25%, 25%);
        width: 130px;
        height: 130px;
    }

    .about-media-wrap:hover .about-badge {
        transform: translate(-25%, 25%) scale(1.08);
    }

    .about-badge-core {
        width: 108px;
        height: 108px;
        padding: 14px;
    }

    .about-badge-num {
        font-size: 36px;
    }

    .about-badge-label {
        font-size: 10px;
    }

    .about-ctas {
        flex-direction: column;
    }

    .btn-primary-grad,
    .btn-outline-grad {
        width: 100%;
    }
}

html[data-theme="light"] .about-block {
    background: #F8F9FC;
}

html[data-theme="light"] .about-title {
    color: #00123B;
}

html[data-theme="light"] .about-text {
    color: #000000CC
;
}

html[data-theme="light"] .about-badge-core {
    background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #F0F2F8 100%);
}

html[data-theme="light"] .about-media-wrap:hover .about-badge-core {
    background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #E8EAF5 100%);
}

html[data-theme="light"] .about-badge-num {
    color: #00123B;
}

html[data-theme="light"] .about-badge-label {
    color: #00123B;
}

html[data-theme="light"] .about-media-wrap:hover .about-badge-label {
    color: #00123B;
}

html[data-theme="light"] .btn-outline-grad {
    background: linear-gradient(#F8F9FC, #F8F9FC) padding-box,
    var(--strevia-grad) border-box;
    color: #00123B;
}

html[data-theme="light"] .btn-outline-grad:hover {
    color: #fff;
}


/*----------------------------------------------------
 HomeMetrics Section
----------------------------------------------------*/
.metrics-block.v2 {
    padding: clamp(48px, 6vw, 80px) 0;
    position: relative;
    overflow: hidden;
}

.metrics-wrap.pill {
    position: relative;
    border-radius: 100px;
    padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
    border: 2px solid;
    border-image-source: linear-gradient(186.52deg, #21B3FF -14.59%, rgba(110, 110, 110, 0.1) 49.88%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid transparent;
    box-shadow: 0px 4px 4px 0px #00000040;

    overflow: hidden;
    isolation: isolate;
}

.metrics-wrap.pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 100px;
    padding: 2px;
    background: conic-gradient(
            from var(--metrics-angle),
            var(--strevia-grad-end) 0%,
            var(--strevia-primary) 25%,
            transparent 50%,
            transparent 75%,
            var(--strevia-grad-end) 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: metrics-border-spin 10s linear infinite;
    opacity: .7;
}

@keyframes metrics-border-spin {
    0% { --metrics-angle: 0deg; }
    100% { --metrics-angle: 360deg; }
}

@property --metrics-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/*.metrics-wrap.pill::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 600px;*/
/*    height: 600px;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    background: radial-gradient(*/
/*            circle at center,*/
/*            rgba(180, 5, 254, .08) 0%,*/
/*            rgba(33, 179, 255, .06) 40%,*/
/*            transparent 70%*/
/*    );*/
/*    pointer-events: none;*/
/*    z-index: 0;*/
/*    animation: metrics-glow-pulse 6s ease-in-out infinite;*/
/*}*/

@keyframes metrics-glow-pulse {
    0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: .8; transform: translate(-50%, -50%) scale(1.1); }
}

.metrics-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    position: relative;
    z-index: 1;
    letter-spacing: -0.3px;
}

.metrics-lead {
    margin: 0 0 clamp(32px, 5vw, 48px);
    color: #B8BFDA;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.metrics-grid {
    position: relative;
    z-index: 1;
}

.metric {
    text-align: center;
    padding: 16px 8px;
    transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.metric:hover {
    transform: translateY(-8px);
}

.met-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto 18px;
    border-radius: 16px;
    position: relative;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .3);
    transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .4s ease, background .3s ease;
}

.met-icon::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    background: conic-gradient(
            from var(--icon-angle),
            var(--strevia-primary) 0%,
            var(--strevia-grad-end) 50%,
            var(--strevia-primary) 100%
    );
    opacity: 0;
    transition: opacity .4s ease;
    z-index: -1;
    filter: blur(12px);
}

.metric:hover .met-icon::before {
    opacity: .6;
    animation: icon-glow-spin 4s linear infinite;
}

@keyframes icon-glow-spin {
    0% { --icon-angle: 0deg; }
    100% { --icon-angle: 360deg; }
}

@property --icon-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.metric:hover .met-icon {
    transform: scale(1.08) rotateY(5deg);
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .4), 0 12px 30px rgba(33, 179, 255, .2);
}

.met-icon img {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), filter .3s ease;
}

.metric:hover .met-icon img {
    transform: scale(1.15) rotateZ(-5deg);
    filter: drop-shadow(0 8px 16px rgba(180, 5, 254, .4));
}

.met-value {
    color: #ffffff;
    font-family: Montserrat, system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(26px, 3.5vw, 32px);
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    transition: transform .3s ease, color .3s ease;
}

.metric:hover .met-value {
    transform: scale(1.05);
    background: var(--strevia-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 8px 20px rgba(180, 5, 254, .3);
}

.met-label {
    color: #B8BFDA;
    font-size: clamp(13px, 2vw, 14px);
    line-height: 1.5;
    font-weight: 500;
    transition: color .3s ease;
}

.metric:hover .met-label {
    color: #D8DEFF;
}

html[data-theme="light"] .metrics-block.v2 {
    background: #F8F9FC;
}

html[data-theme="light"] .metrics-wrap.pill {
    background: linear-gradient(0.01deg, rgba(33, 179, 255, 0.2) 11.61%, rgba(0, 0, 0, 0) 91.83%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
}

html[data-theme="dark"] .metrics-wrap.pill {
    background: linear-gradient(0.01deg, rgba(33, 179, 255, 0.2) 11.61%, rgba(0, 0, 0, 0) 91.83%);
}

html[data-theme="light"] .metrics-title {
    color: #00123B;
}

html[data-theme="light"] .metrics-lead {
    color: #000000CC
;
}

html[data-theme="light"] .met-icon {
    background: rgba(180, 5, 254, .04);
    border: 1px solid rgba(180, 5, 254, .1);
    box-shadow: inset 0 2px 8px rgba(180, 5, 254, .05);
}

html[data-theme="light"] .metric:hover .met-icon {
    background: rgba(180, 5, 254, .08);
    box-shadow: inset 0 2px 12px rgba(180, 5, 254, .1), 0 12px 30px rgba(33, 179, 255, .15);
}

html[data-theme="light"] .met-value {
    color: #00123B;
}

html[data-theme="light"] .met-label {
    color: #000000CC
;
}

html[data-theme="light"] .metric:hover .met-label {
    color: #3A4058;
}

@media (max-width: 991.98px) {
    .metrics-wrap.pill {
        border-radius: 60px;
        padding: clamp(32px, 5vw, 48px) clamp(20px, 3vw, 36px);
    }

    .met-icon {
        width: 80px;
        height: 80px;
    }

    .met-icon img {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 575.98px) {
    .metrics-wrap.pill {
        border-radius: 40px;
    }

    .met-icon {
        width: 72px;
        height: 72px;
    }

    .met-icon img {
        width: 44px;
        height: 44px;
    }
}


/*----------------------------------------------------
 HomeTestimonials Section
----------------------------------------------------*/
.t-section {
    position: relative;
    padding: clamp(60px, 8vw, 100px) 0;
    overflow: hidden;
    min-height: 700px;
}

.t-blob {
    position: absolute;
    left: -140px;
    top: -30%;
    width: 520px;
    height: 520px;
    background: radial-gradient(64% 64% at 64% 57%, #080612 72%, #0F0016 81%, #21022F 86%, #34014A 92%, #63008C 98%, #B405FE 100%);
    border-radius: 50%;
    filter: ;
    z-index: -1;
    animation: t-blob-pulse 8s ease-in-out infinite;
}

@keyframes t-blob-pulse {
    0%, 100% { filter: blur(1px) brightness(1); }
    50% { filter: blur(8px) brightness(1.1);}
}

.t-section .container-xl,
.t-section .container-fluid {
    position: relative;
    z-index: 2;
}

.t-left {
    padding: clamp(30px, 5vw, 50px) 0;
}

.t-title {
    font-size: 72px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 16px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.t-subtitle {
    font-size: 38px;
    color: #B8BFDA;
    font-weight: 400;
    margin-bottom: 32px;
    line-height: 1.2;
}

.t-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 36px;
    background: var(--strevia-grad);
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 8px 24px rgba(180, 5, 254, .35);
    position: relative;
    overflow: hidden;
}

.t-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    transform: translateX(-100%);
    transition: transform .6s ease;
}

.t-cta:hover::before {
    transform: translateX(100%);
}

.t-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(180, 5, 254, .5);
    color: #ffffff;
}

.t-slider-wrap {
    position: relative;
    height: 500px;
    padding: 70px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--strevia-grad);
    border: none;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform .3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .3s ease;
    box-shadow: 0 6px 20px rgba(33, 179, 255, .3);
}

.t-nav:hover {
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 8px 28px rgba(33, 179, 255, .5);
}

.t-nav:active {
    transform: translateX(-50%) scale(0.95);
}

.t-prev {
    top: 0;
}

.t-next {
    bottom: 0;
}

.t-nav svg {
    width: 20px;
    height: 20px;
}

.t-swiper {
    width: 100%;
    height: 425px;
    overflow: hidden;
}

.swiper-wrapper {
    align-items: center;
}

.t-card {
    background: linear-gradient(152.78deg, rgba(0, 0, 0, 0.2) 37.48%, rgba(33, 179, 255, 0.2) 86.35%);
    backdrop-filter: blur(200px);
    -webkit-backdrop-filter: blur(200px);
    border-radius: 15px;
    padding: 24px 28px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    height: 120px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    box-shadow: 0px 0px 36.4px 0px rgba(255, 255, 255, 0.11) inset;
}

.t-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 15px;
    padding: 2px;
    background: linear-gradient(113.9deg, #21B3FF 0%, rgba(254, 248, 183, 0) 88.94%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.t-avatar {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    transition: all .4s ease;
}

.t-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
}

.t-avatar-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 24px;
}

.t-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.t-quote-txt {
    color: #E5E7EB;
    font-size: clamp(12px, 1.8vw, 14px);
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.t-meta {
    display: flex;
    align-items: center;
    gap: 45px;
}

.t-meta img {
    height: 30px;
}

.t-name {
    color: #ffffff;
    font-weight: 700;
    font-size: clamp(14px, 2vw, 16px);
}

.t-quote-mark {
    position: absolute;
    bottom: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    opacity: 0.12;
    color: #21B3FF;
    transition: all .3s ease;
}

.t-section .swiper-slide {
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0.5;
    transform: scale(0.88);
    height: auto !important;
}

.t-section .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
    z-index: 5;
}

.t-section .swiper-slide-active .t-card {
    background: linear-gradient(152.78deg, rgba(0, 0, 0, 0.2) 37.48%, rgba(180, 5, 254, 0.2) 86.35%);
    box-shadow: 0px 0px 36.4px 0px rgba(255, 255, 255, 0.11) inset,
    0 20px 60px rgba(180, 5, 254, 0.35);
    transform: translateX(-60px);
}

.t-section .swiper-slide-active .t-card::before {
    background: linear-gradient(113.9deg, #B405FE 0%, rgba(254, 248, 183, 0) 88.94%);
}

.t-section .swiper-slide-active .t-avatar {
    transform: scale(1.08);
    border-color: rgba(180, 5, 254, 0.6);
    border-width: 3px;
}

.t-section .swiper-slide-active .t-quote-mark {
    opacity: 0.2;
    color: #B405FE;
    transform: scale(1.1);
}

.t-section .swiper-slide-prev,
.t-section .swiper-slide-next {
    opacity: 0.6;
    transform: scale(0.92);
}

.t-left{
    position:relative;
    z-index:0;
    padding:clamp(40px,5vw,70px) clamp(16px,3vw,32px);
    color:#fff;
    text-align:left;
}
html[dir="rtl"] .t-left{
    text-align:right;
}

.t-left .main-btn{
    margin-top:4px;
}


@media (max-width: 991px) {
    .t-left {
        text-align: center;
        padding: 20px 0;
    }

    .t-slider-wrap {
        height: 450px;
        padding: 60px 0;
    }

    .t-swiper {
        height: 360px;
    }

    .swiper-slide-active .t-card {
        transform: translateX(-40px);
    }

    .t-card {
        max-width: 450px;
        padding: 22px 24px;
    }
}

@media (max-width: 767px) {
    .t-section {
        padding: clamp(50px, 8vw, 80px) 0;
        min-height: 600px;
    }

    .t-slider-wrap {
        height: 420px;
        padding: 55px 0;
    }

    .t-swiper {
        height: 340px;
    }

    .t-nav {
        width: 42px;
        height: 42px;
    }

    .t-card {
        max-width: 90%;
        height: 110px;
        padding: 18px 20px;
    }

    .swiper-slide-active .t-card {
        transform: translateX(-25px);
    }

    .t-avatar {
        width: 50px;
        height: 50px;
    }

    .swiper-slide-active .t-avatar {
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 575px) {
    .t-slider-wrap {
        height: 380px;
        padding: 50px 0;
    }

    .t-swiper {
        height: 300px;
    }

    .swiper-slide-active .t-card {
        transform: translateX(-15px);
    }

    .t-card {
        max-width: 95%;
        height: 100px;
        padding: 16px 18px;
        gap: 14px;
    }
}

html[data-theme="light"] .t-section {
    background: #F8F9FC;
}

html[data-theme="light"] .t-blob {
    background: radial-gradient(54.31% 54.31% at 62.48% 55.24%, #F1EEFA 71.77%, #EBBCFF 91.17%, #E096FF 96.51%, #D777FF 100%, #CCADD9 97.75%, #B405FE82 100%);
}

html[data-theme="light"] .t-title {
    color: #00123B;
}

html[data-theme="light"] .t-subtitle {
    color: #00123B;
}

html[data-theme="light"] .t-card {
    background: linear-gradient(152.78deg, rgba(255, 255, 255, 0.7) 37.48%, rgba(33, 179, 255, 0.15) 86.35%);
}

html[data-theme="light"] .swiper-slide-active .t-card {
    background: linear-gradient(152.78deg, rgba(255, 255, 255, 0.85) 37.48%, rgba(180, 5, 254, 0.15) 86.35%);
    box-shadow: 0px 0px 36.4px 0px rgba(0, 0, 0, 0.08) inset,
    0 20px 60px rgba(180, 5, 254, 0.2);
}

html[data-theme="light"] .t-quote-txt {
    color: #4A5578;
}

html[data-theme="light"] .t-name {
    color: #00123B;
}


/*----------------------------------------------------
 HomePortfolio Section
----------------------------------------------------*/
@property --pf-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.pf-sec {
    padding: clamp(60px, 8vw, 100px) 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.pf-head {
    text-align: center;
    margin-bottom: clamp(40px, 6vw, 60px);
}

.pf-title {
    font-weight: 800;
    font-size: 100px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: #ffffff;
    letter-spacing: -0.5px;
}

.pf-lead {
    color: #FFFFFFB2;
    margin: 0;
    font-size: 23px;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

.pf-grid {
    margin-bottom: clamp(40px, 6vw, 56px);
}

.pf-card {
    position: relative;
    background: transparent;
    border-radius: 20px;
    padding: 20px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.pf-card::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: conic-gradient(
            from var(--pf-angle),
            transparent 0%,
            #21B3FF 15%,
            #B405FE 30%,
            transparent 60%
    );
    animation: pf-spin 6s linear infinite;
    z-index: -2;
}

.pf-card::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: linear-gradient(152.78deg, rgba(10, 10, 20, 0.95) 0%, rgba(20, 20, 35, 0.98) 100%);
    border-radius: 18px;
    z-index: -1;
}

.pf-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
    transition: opacity 0.6s ease;
}

.pf-glow--tl {
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(180, 5, 254, 0.4), transparent 70%);
}

.pf-glow--br {
    right: -100px;
    bottom: -100px;
    background: radial-gradient(circle, rgba(33, 179, 255, 0.4), transparent 70%);
}

.pf-thumb {
    position: relative;
    margin-bottom: 20px;
    z-index: 1;
}

.pf-thumb-border {
    position: relative;
    border-radius: 16px;
    padding: 3px;
    overflow: hidden;
    transition: transform 0.5s ease;
}

.pf-thumb-border::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: conic-gradient(
            from var(--pf-angle),
            transparent 0%,
            #B405FE 20%,
            #21B3FF 50%,
            transparent 60%
    );
    animation: pf-spin 6s linear infinite reverse;
    z-index: -1;
}

.pf-thumb-border::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: #0b0c15;
    border-radius: 14px;
    z-index: -1;
}

.pf-thumb-link {
    display: block;
    border-radius: 13px;
    overflow: hidden;
    position: relative;
}

.pf-thumb img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover !important;
    border-radius: 13px;
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s ease;
}

.pf-content {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.pf-item-title {
    color: #ffffff;
    margin: 0 0 10px;
    font-weight: 700;
    font-size: clamp(18px, 3vw, 22px);
    line-height: 1.3;
    transition: color 0.3s ease;
}

.pf-item-desc {
    color: #B8BFDA;
    font-size: clamp(13px, 2vw, 14px);
    line-height: 1.65;
    margin: 0 0 20px;
    flex-grow: 1;
}

.pf-btn-know {
    align-self: flex-start;
    min-width: 140px;
}

@keyframes pf-spin {
    from { --pf-angle: 0deg; }
    to { --pf-angle: 360deg; }
}

.pf-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(33, 179, 255, 0.15);
}

.pf-card:hover .pf-glow {
    opacity: 0.8;
    filter: blur(100px);
}

.pf-card:hover .pf-thumb-border {
    transform: scale(1.02);
}

.pf-card:hover .pf-thumb img {
    transform: scale(1.1);
    filter: brightness(1.15);
}

.pf-card:hover .pf-item-title {
    background: var(--strevia-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (max-width: 991px) {
    .pf-card { padding: 18px; }
    .pf-thumb img { height: 220px; }
    .pf-thumb { margin-bottom: 18px; }
}

@media (max-width: 767px) {
    .pf-card { padding: 16px; }
    .pf-thumb img { height: 200px; }
    .pf-thumb { margin-bottom: 16px; }
}

@media (max-width: 575px) {
    .pf-card { padding: 14px; }
    .pf-thumb img { height: 180px; }
    .pf-ctas { flex-direction: column; }
    .pf-ctas .main-btn { width: 100%; }
}

/* Light Theme Adjustments */
html[data-theme="light"] .pf-sec {
    background: #F8F9FC;
}

html[data-theme="light"] .pf-card::after {
    background: #FFFFFF;
}

html[data-theme="light"] .pf-card {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

html[data-theme="light"] .pf-thumb-border::after {
    background: #FFFFFF;
}

html[data-theme="light"] .pf-title,
html[data-theme="light"] .pf-item-title {
    color: #00123B;
}

html[data-theme="light"] .pf-lead,
html[data-theme="light"] .pf-item-desc {
    color: #000000CC
;
}

html[data-theme="light"] .pf-card:hover {
    box-shadow: 0 20px 50px rgba(33, 179, 255, 0.15);
}


/*----------------------------------------------------
 HomeFaq Section
----------------------------------------------------*/
/* --- FAQ Section General --- */
.faq-sec {
    position: relative;
    padding: 72px 0;
    overflow: hidden;
    z-index: 1;
}

.faq-sec:after {
    content: "";
    position: absolute;
    inset-inline-end: 0;
    top: 50%;
    transform: translateY(-50%);
    min-width: 990px;
    min-height: 740px;
    pointer-events: none;
    background: url('../img/faq_before.webp');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    z-index: -1;
    opacity: 0.6;
}

.faq-head {
    margin-bottom: 100px;
}

.faq-title {
    font-weight: 800;
    font-size: clamp(40px, 5vw, 100px);
    margin: 0 0 12px;
    line-height: 1.1;
}

.faq-lead {
    font-weight: 500;
    font-size: 23px;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.faq-list {
    max-width: 100%;
}

.faq-item {
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.faq-item:hover {
    transform: translateX(5px);
}

/* --- FAQ Button Style --- */
.faq-item__btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-start;
    padding: 15px 30px;
    border-radius: 16px;
    /* Default Dark Theme Style */
    border: 1px solid transparent;
    background:
            linear-gradient(180deg, rgba(17, 20, 42, .95), rgba(9, 11, 25, .95)) padding-box,
            linear-gradient(90deg, #B405FE, #21B3FF) border-box;
    color: #e9ecff;
    text-align: left;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.faq-item__btn:hover {
    box-shadow: 0 0 25px rgba(33, 179, 255, 0.15);
    background:
            linear-gradient(180deg, rgba(25, 28, 55, .95), rgba(15, 18, 35, .95)) padding-box,
            linear-gradient(90deg, #B405FE, #21B3FF) border-box;
}

.faq-item.is-open .faq-item__btn {
    background:
            linear-gradient(180deg, rgba(33, 179, 255, 0.1), rgba(180, 5, 254, 0.05)) padding-box,
            linear-gradient(90deg, #21B3FF, #B405FE) border-box;
    box-shadow: 0 0 30px rgba(33, 179, 255, 0.1);
}

/* --- FAQ Icon (Mark) --- */
.faq-item__mark {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #B405FE, #21B3FF);
    box-shadow: 0 4px 12px rgba(33, 179, 255, 0.3);
    color: #fff;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.faq-item.is-open .faq-item__mark {
    transform: rotate(180deg) scale(1.1);
    box-shadow: 0 0 15px rgba(180, 5, 254, 0.5);
}

.faq-item__q {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 18px;
    color: inherit;
}

/* --- FAQ Answer Area --- */
.faq-item__answer {
    border-radius: 16px;
    margin-top: 0;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}

.faq-item.is-open .faq-item__answer {
    margin-top: 10px;
    opacity: 1;
    border-color: rgba(33, 179, 255, 0.1);
}

.faq-item__answer-inner {
    padding: 20px 24px;
    color: #d7dcff;
    font-size: 1.05rem;
    line-height: 1.7;
}

/* --- Helper Classes --- */
.faq-hidden {
    display: none;
}

/* --- Show More Button --- */
.faq-more {
    margin-top: 30px;
    background: transparent;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 50px;
    transition: background 0.3s ease;
}

.faq-more:hover {
    background: rgba(255, 255, 255, 0.03);
}

.faq-more__text {
    background: linear-gradient(90deg, #21b3ff, #b405fe 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    font-size: 1.1rem;
}

/* --- SVG Animation for Button --- */
.faq-svg-ico {
    width: 42px;
    height: 42px;
}

.faq-svg-anim-border {
    stroke-dasharray: 220;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.6s ease;
}

.faq-more:hover .faq-svg-anim-border {
    stroke-dashoffset: -220;
}

.faq-svg-anim-arrow {
    transition: transform 0.4s ease;
    transform-origin: center;
}

.faq-more:hover .faq-svg-anim-arrow {
    transform: translateY(3px);
}

/* --- FAQ Image Animation (Professional Float) --- */
.faq-art {
    position: relative;
    min-height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.faq-art__img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    /* 3D Transform for Image */
    transform-style: preserve-3d;
    animation: float-img 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.3));
    transition: transform 0.5s ease;
}

.faq-art:hover .faq-art__img {
    animation-play-state: paused;
    transform: rotateY(10deg) rotateX(5deg) scale(1.05);
}

@keyframes float-img {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(2deg); }
}


/* =========================================
   LIGHT MODE STYLES
   ========================================= */

/* Background & Text Colors */
html[data-theme="light"] .faq-sec {
    background: #F8F9FC;
}

html[data-theme="light"] .faq-title {
    color: #00123B;
}

html[data-theme="light"] .faq-lead {
    color: #000000CC
;
}

html[data-theme="dark"] .faq-lead {
    color: #FFFFFFB2;
}

/* Light Mode Item Button */
html[data-theme="light"] .faq-item__btn {
    background:
            linear-gradient(152.78deg, rgba(255, 255, 255, 0.6) 37.48%, rgba(33, 179, 255, 0.1) 86.35%) padding-box,
            linear-gradient(344.63deg, #21B3FF -8.62%, rgba(254, 248, 183, 0) 122.31%) border-box;

    border: 2px solid transparent; /* Important to show border-box gradient */
    color: #00123B;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

html[data-theme="light"] .faq-item__btn:hover {
    background:
            linear-gradient(152.78deg, #ffffff 37.48%, rgba(33, 179, 255, 0.2) 86.35%) padding-box,
            linear-gradient(344.63deg, #B405FE -8.62%, #21B3FF 122.31%) border-box;
    box-shadow: 0 10px 30px rgba(33, 179, 255, 0.2);
    transform: translateY(-2px);
}

html[data-theme="light"] .faq-item.is-open .faq-item__btn {
    background: #fff padding-box, linear-gradient(90deg, #21B3FF, #B405FE) border-box;
    box-shadow: 0 8px 25px rgba(180, 5, 254, 0.15);
}

/* Light Mode Answer */
html[data-theme="light"] .faq-item__answer {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

html[data-theme="light"] .faq-item__answer-inner {
    color: #000000CC
;
}

/* Light Mode Icon */
html[data-theme="light"] .faq-item__mark {
    box-shadow: 0 4px 10px rgba(33, 179, 255, 0.25);
}

/* Light Mode More Button */
html[data-theme="light"] .faq-more:hover {
    background: rgba(0,0,0,0.05);
}


/*----------------------------------------------------
Footer
----------------------------------------------------*/
.site-footer {
    position: relative;
    padding: 48px 0 22px;
    background: linear-gradient(359.58deg, rgba(33, 179, 255, 0.2) 17.42%, rgba(0, 0, 0, 0) 91.53%);
    color: #e9ecff;
    overflow: hidden
}
.site-footer:before {
    content: "";
    position: absolute;
    inset: -20% -15% auto -15%;
    height: 70%;
    background: radial-gradient(1200px 420px at 100% -120px, #B405FE22 0, transparent 60%),
    radial-gradient(1200px 420px at 0% -120px, #21B3FF22 0, transparent 60%);
    filter: blur(2px);
    z-index: 0
}
.sf-topline {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--strevia-grad);
    z-index: 1
}
.sf-grid {
    position: relative;
    z-index: 2
}
.sf-brand {
    max-width: 420px
}
.sf-logo {
    max-height: 36px;
    width: auto;
    height: auto;
    margin-bottom: 12px
}
.sf-logo-text {
    font-weight: 800;
    font-size: 20px
}
.sf-about {
    margin: 6px 0 0;
    color: #cfd6ff;
    line-height: 1.6
}
.sf-title {
    font-weight: 800;
    font-family: Montserrat, system-ui, sans-serif;
    color: #ffffff;
    margin: 4px 0 14px
}
.sf-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    color: #dfe4ff
}
.sf-line i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: #a9b7ff
}
.sf-line a {
    color: #dfe4ff;
    text-decoration: none
}
.sf-line a:hover {
    color: #7cc9ff;
    text-decoration: underline
}
.sf-links li {
    margin-bottom: 8px
}
.sf-links a {
    color: #dfe4ff;
    text-decoration: none;
    display: inline-block;
    transition: color .2s
}
.sf-links a:hover {
    color: #7cc9ff
}
.sf-social-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px
}
.sf-social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}
.sf-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    background: linear-gradient(135deg, #B405FE, #21B3FF) padding-box,
    linear-gradient(135deg, #B405FE, #21B3FF) border-box;
    border: 1px solid transparent;
    box-shadow: 0 10px 24px rgba(33, 179, 255, .20), inset 0 0 0 3px rgba(14, 16, 33, .85);
    transition: transform .15s ease, box-shadow .25s ease
}
.sf-social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(33, 179, 255, .28), inset 0 0 0 3px rgba(14, 16, 33, .9)
}
.sf-follow {
    color: #cdd3ff;
    max-width: 260px;
    margin: 4px 0 0;
    line-height: 1.6
}
.sf-copy {
    position: relative;
    z-index: 2;
    text-align: center;
    margin-top: 30px
}
.sf-copy p {
    margin: 0;
    color: #b9c2ff;
    font-size: 14px
}
.sf-copy a {
    color: #e9ecff;
    text-decoration: none
}
.sf-copy a:hover {
    color: #7cc9ff;
    text-decoration: underline
}
@media (max-width: 991.98px) {
    .site-footer {
        padding-top: 40px
    }
}
@media (max-width: 575.98px) {
    .sf-social {
        justify-content: flex-start
    }
}


/*----------------------------------------------------
Page Inside
----------------------------------------------------*/
.footer-inside {
    margin-top: 150px;
}

/*----------------------------------------------------
Page About
----------------------------------------------------*/
/* ---------- Page general ---------- */
.aboutPage{
    padding-block: 80px 100px;
    color: var(--text-color);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- HERO ---------- */
.about-hero {
    align-items: center;
    margin-bottom: 100px;
}

.about-hero .col-lg-3 {
    max-width: 320px;
    flex: 0 0 320px;
}

/* --- Image Frame Styling --- */
.about-hero__image-frame {
    position: relative;
    width: 280px;
    height: 400px;
    margin-left: 0;
    margin-right: auto;
}

/* Border Box (Behind Image) */
.about-hero__image-border {
    position: absolute;
    top: -15px;
    left: 15px;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    border: 2px solid #21B3FF;
    background: transparent;
    z-index: 0;
    transition: transform 0.5s ease;
}

/* Image Inner Box (Foreground) */
.about-hero__image-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* Image Itself */
/* image frame size fixed */
.about-hero__image-frame{
    position: relative;
    width: 265px;
    height: 376px;
    margin-left: 0;
    margin-right: auto;
}

/* border around image */
.about-hero__image-border{
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 2px solid var(--outline-stroke);
    box-shadow: 0 0 18px rgba(33,179,255,0.6);
}

/* image inner box translated left/up */
.about-hero__image-inner{
    position: relative;
    width: 265px;
    height: 376px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transform: translate(-18px, 14px);
    transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), box-shadow 0.5s cubic-bezier(0.23,1,0.32,1);
}

/* image */
.about-hero__img{
    display:block;
    width: 265px !important;
    height: 376px !important;
    object-fit: cover !important;
    border-radius: 24px;
    transition: transform 0.5s cubic-bezier(0.23,1,0.32,1), filter 0.5s cubic-bezier(0.23,1,0.32,1);
}

/* hover to bring image into border */
.about-hero__image-frame:hover .about-hero__image-inner{
    transform: translate(0,0);
    box-shadow: 0 30px 60px rgba(0,0,0,0.95);
}
.about-hero__image-frame:hover .about-hero__img{
    transform: scale(1.02);
    filter: saturate(1.08);
}
/* --- Content Styling --- */
.about-hero__content {
    padding-left: 60px;
}

/* Title Gradient */
.about-hero__title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #B405FE 0%, #21B3FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.2;
}

/* Text */
.about-hero__text {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #B8BFDA;
    margin-bottom: 40px;
    max-width: 745px;
}

/* Vision / Mission Icons */
.about-hero__vm {
    margin-bottom: 30px;
}

.about-vm__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
}

/* Icon Wrapper */
.about-vm__icon-wrap {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-vm__icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Vision/Mission Titles */
.about-vm__title {
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.1;
    color: inherit;
}

/* Gradient Span */
.about-vm__title span {
    background: linear-gradient(90deg, #B405FE 0%, #21B3FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.about-vm__desc {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    color: #B8BFDA;
}

/* Light Theme Overrides */
html[data-theme="light"] .about-hero__text {
    color: #000000CC
;
}

html[data-theme="light"] .about-vm__desc {
    color: #000000CC
;
}

html[data-theme="light"] .about-vm__title {
    color: #0A0A1F;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .about-hero__content {
        padding-left: 0;
        margin-top: 40px;
    }
    .about-hero .col-lg-3 {
        max-width: 100%;
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
    }
    .about-hero__image-frame {
        margin: 0 auto;
    }
}

/* ===========================
   TOOLS — big rounded pill container
   =========================== */
@property --tools-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.about-tools {
    padding: 60px 0 80px;
}

.tools-wrap {
    /*max-width: 1100px;*/
    margin: 0 auto;
    border-radius: 80px;
    padding: 60px 48px;
    position: relative;
    overflow: hidden; /* Essential for the rotating border */
    isolation: isolate;

    /* Requested Background */
    background: linear-gradient(0.01deg, rgba(33, 179, 255, 0.2) 11.61%, rgba(0, 0, 0, 0) 91.83%);

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

/* --- Rotating Border Animation --- */
.tools-wrap::before {
    content: "";
    position: absolute;
    inset: -100%; /* Extend beyond container to cover rotation */
    background: conic-gradient(
            from var(--tools-angle),
            transparent 0%,
            #21B3FF 15%,
            #B405FE 30%,
            transparent 60%
    );
    animation: tools-spin 8s linear infinite;
    z-index: -2;
}

/* Inner Background to cover the middle of the conic gradient */
.tools-wrap::after {
    content: "";
    position: absolute;
    inset: 2px; /* Border thickness */
    border-radius: 78px; /* Slightly less than container */

    /* Match container background to hide the center of the spin */
    background: linear-gradient(0.01deg, rgba(11, 12, 33, 0.95) 11.61%, #0B0C15 91.83%);

    z-index: -1;
}

@keyframes tools-spin {
    from { --tools-angle: 0deg; }
    to { --tools-angle: 360deg; }
}

/* --- Content Styling --- */
.tools-inner {
    position: relative;
    z-index: 5;
    text-align: center; /* Ensure Title is Centered */
}

.tools-inner .tools-title {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #fff;
    text-align: center;
}

.tools-inner .tools-lead {
    max-width: 750px;
    margin: 0 auto 40px;
    color: #FFFFFFB2;
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
}

/* --- Icons Grid --- */
.tools-icons {
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tool-col {
    display: flex;
    justify-content: center;
    width: auto;
    flex: 0 0 auto;
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    transition: transform 0.3s ease;
}

.tool-icon-wrap {
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-icon-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 10px rgba(180, 5, 254, 0.4));
    transition: transform 0.3s ease;
}

.tool-card:hover .tool-icon-img {
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(0 0 15px rgba(33, 179, 255, 0.6));
}

.tool-name {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

/* --- Light Theme Overrides --- */

html[data-theme="light"] .tools-wrap {
    background: linear-gradient(180deg, #E6F4FF 0%, #F0F2FF 100%);
    box-shadow: 0 20px 60px rgba(33, 179, 255, 0.15);
    border: none;
}

/* Override the inner dark background for light mode */
html[data-theme="light"] .tools-wrap::after {
    background: #fff; /* White inner background */
}

html[data-theme="light"] .tools-inner .section-title {
    color: #0A0A1F;
}

html[data-theme="light"] .tools-inner .section-lead {
    color: #5A607A;
}

html[data-theme="light"] .tool-name {
    color: #0A0A1F;
}

html[data-theme="light"] .tool-icon-img {
    filter: drop-shadow(0 5px 10px rgba(33, 179, 255, 0.25));
}


/* ===========================
   TEAM
   =========================== */
.about-team {
    padding: 80px 0;
}

.section-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 16px;
    color: #fff;
}

.section-lead {
    color: #B8BFDA;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 60px;
}

/* Zigzag Effect Class (Bootstrap helper mt-lg-5 adds 3rem, we might want more) */
@media (min-width: 992px) {
    .mt-lg-5 {
        margin-top: 120px !important; /* Force spacing on Desktop */
    }
}

/* Card Styling */
.team-card {
    width: 100%;
    height: 295px; /* Fixed height for consistency */
    border-radius: 24px; /* Softer corners like image */
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.team-card:hover {
    transform: translateY(-10px);
}

.teamPage-title {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 16px;
}

html[data-theme="light"] .teamPage-title {
    color: #00123B;
}

html[data-theme="dark"] .teamPage-title {
    color: #FFF;
}

.teamPage-lead {
    color: #B8BFDA;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 60px;
}

html[data-theme="light"] .teamPage-lead {
    color: #000000CC;
}

html[data-theme="dark"] .teamPage-lead {
    color: #FFF;
}

/* Image Area */
.team-card__media {
    width: 100%;
    height: 100%;
}

.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensure face is visible (adjust if needed for cartoons/photos) */
    object-position: top center;
    display: block;
    transition: transform 0.5s ease;
}

.team-card:hover .team-photo {
    transform: scale(1.08);
}

/* Floating Glass Badge (Bottom) */
.team-card__badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    background: rgba(22, 22, 22, 0.65); /* Dark semi-transparent */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

/* Text Info */
.team-card__name {
    font-weight: 700;
    color: #fff;
    font-size: 17px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.team-card__role {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    font-weight: 500;
}

/* Social Icons */
.team-socials {
    display: flex;
    gap: 12px;
    align-items: center;
}

.team-social {
    display: block;
    opacity: 0.85;
    transition: opacity 0.3s, transform 0.3s;
}

.team-social:hover {
    opacity: 1;
    transform: scale(1.1);
}

.team-social img,
.team-social svg {
    width: 18px;
    height: 18px;
    display: block;
    filter: brightness(0) invert(1); /* Force white icons */
}

.team-social i {
    color: #fff;
    font-size: 18px;
}

/* --- Light Theme Overrides --- */
html[data-theme="light"] .section-title {
    color: #0A0A1F;
}

html[data-theme="light"] .section-lead {
    color: #5A607A;
}

/* On Light Mode, keep badge dark for contrast against card background */


/* ===========================
   VALUES
   =========================== */
/* --- Section Layout --- */
.about-values {
    padding: 80px 8px 24px;
    overflow: hidden;
}

.guiding-title {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.guiding-lead {
    font-size: 18px;
    color: #FFFFFFB2;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* --- Image Animation Styles (Matching .about-hero Logic) --- */

/* 1. Main Container (Frame Size) */
.values-image-frame {
    position: relative;
    width: 100%; /* Responsive width */
    max-width: 400px; /* Max width control */
    height: 420px; /* Fixed height */
    margin: 0 auto; /* Center in column */
}

/* 2. Border Element (Static Behind) */
.values-image-border {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    border: 2px solid #21B3FF; /* Blue Border */
    box-shadow: 0 0 18px rgba(33, 179, 255, 0.6);
    z-index: 0;
}

/* 3. Image Inner Box (Translated) */
.values-image-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    z-index: 1;

    /* The Shift Logic: Move Up-Right (inverse of hero example to match this layout) or same? */
    /* Let's use similar shift: Translate slightly OUT of the border */
    transform: translate(-18px, 14px);

    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 4. The Image Itself */
.values-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 24px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- Hover Effects --- */

/* Bring Image Into Border */
.values-image-frame:hover .values-image-inner {
    transform: translate(0, 0); /* Snap back to center */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.95);
}

/* Zoom Image Inside */
.values-image-frame:hover .values-image {
    transform: scale(1.02);
    filter: saturate(1.08);
}

/* --- Values Grid Items --- */
.value-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}

.value-item:hover {
    transform: translateX(5px);
}

.value-icon-wrap {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(180, 5, 254, 0.4));
}

.value-title {
    font-size: 26px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px;
}

.value-desc {
    font-size: 18px;
    line-height: 1.6;
    color: #B8BFDA;
    margin: 0;
    font-weight: 500;
}

/* --- Button --- */
.main-btn--solid {
    display: inline-flex;
    padding: 14px 36px;
    background: linear-gradient(90deg, #B405FE 0%, #d105fe 100%);
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(180, 5, 254, 0.4);
    transition: all 0.3s ease;
    border: none;
}

.main-btn--solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(180, 5, 254, 0.6);
    color: #fff;
}

/* --- Light Theme Support --- */
html[data-theme="light"] .section-title,
html[data-theme="light"] .value-title {
    color: #0A0A1F;
}

html[data-theme="light"] .section-lead,
html[data-theme="light"] .value-desc {
    color: #5A607A;
}

html[data-theme="light"] .values-image-border {
    border-color: #21B3FF;
    box-shadow: 0 0 18px rgba(33, 179, 255, 0.3);
}

/* Responsive */
@media (max-width: 991px) {
    .values-image-frame {
        height: 300px;
        max-width: 100%;
    }
    .values-image-inner {
        transform: translate(0, 0); /* No shift on mobile */
    }
    .values-image-border {
        display: none; /* Hide border on mobile for simplicity */
    }
}


/* ===========================
   Responsive
   =========================== */
@media (max-width: 991.98px) {
    .tools-wrap { padding:28px 26px; border-radius:36px; }
    .tools-inner .section-title { font-size:32px; }
    .team-row { gap:24px; }
    .team-card__media { height:220px; }
    .values-inner { flex-direction:column; align-items:center; padding:18px; }
    .values-left { width:80%; flex:0 0 auto; }
    .values-image-wrap { height:320px; }
    .values-list { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .section-title.center { font-size:28px; }
    .team-col { width:160px; }
    .team-card__media { height:160px; }
    .about-hero__content { padding-left:0; }
    .tools-icons { gap:26px; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ===========================
   single services
   =========================== */
/* --- General Layout --- */
.service-hero {
    padding: 80px 0 100px;
}

/* --- Top Center Header --- */
.service-hero__title {
    font-size: 60px; /* Large Title size like "SEO" */
    font-weight: 900;
    margin-bottom: 16px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-hero__excerpt {
    font-size: 16px;
    color: #B8BFDA;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* --- Left Icon Frame Styling --- */
.service-hero__icon-frame {
    position: relative;
    width: 320px; /* Fixed size for the icon box */
    height: 320px;
    border-radius: 40px; /* Rounded square */
}

/* 1. The Border (Glowy Outline) */
.service-hero__icon-border {
    position: absolute;
    inset: 0;
    border-radius: 40px;
    border: 2px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(145deg, rgba(255,255,255,0.05), rgba(0,0,0,0.2));
    box-shadow:
            0 20px 40px rgba(0,0,0,0.4),
            inset 0 0 0 1px rgba(255,255,255,0.05); /* Inner stroke */
    z-index: 0;
}

/* 2. The Inner Box (Where Icon sits) */
.service-hero__icon-inner {
    position: relative;
    width: 240px; /* Smaller than frame */
    height: 240px;
    margin: 40px; /* Center it (320 - 240 = 80 / 2 = 40) */
    border-radius: 50%; /* Circular or rounded square? Image shows circular icon in square frame usually, or fit to image */
    /* Based on reference image "SEO", it looks like a square icon with rounded corners or just the icon floating?
       Let's assume rounded square to match. */
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.5);
    background: #111; /* Dark background behind icon */

    /* Animation Start State */
    transform: translate(0, 0); /* Center initially? Or shift? let's keep center for this style */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.service-hero__icon {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keep icon proportions */
    padding: 20px; /* Padding inside the inner box */
    display: block;
    filter: drop-shadow(0 0 15px rgba(180, 5, 254, 0.4)); /* Glow for the icon itself */
    transition: transform 0.5s ease;
}

/* Hover Effects */
.service-hero__icon-frame:hover .service-hero__icon-inner {
    transform: scale(1.05);
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
}

.service-hero__icon-frame:hover .service-hero__icon {
    transform: scale(1.1) rotate(-5deg);
}


/* --- Right Content Styling --- */
.service-hero__content {
    padding-left: 0; /* Bootstrap handles spacing via offset/gutter */
}

.service-hero__acf-heading {
    font-size: 42px; /* Big heading like "Boost Your Website..." */
    font-weight: 800;
    margin-bottom: 20px;
    color: #fff;
    line-height: 1.2;
}

.service-hero__lead {
    font-size: 18px;
    line-height: 1.7;
    color: #fff; /* White text for quote style */
    margin-bottom: 30px;
    font-weight: 600;
    border-left: 4px solid #B405FE; /* Accent line */
    padding-left: 20px;
}

/* CTA Button */
.service-hero__cta {
    margin-top: 10px;
}

.main-btn--solid {
    display: inline-flex;
    padding: 16px 38px;
    background: #B405FE; /* Purple */
    color: #fff;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(180, 5, 254, 0.4);
    transition: all 0.3s ease;
}

.main-btn--solid:hover {
    background: #9b04db;
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(180, 5, 254, 0.6);
    color: #fff;
}


/* --- Light Theme Overrides --- */

html[data-theme="light"] .service-hero__title {
    color: #0A0A1F;
}

html[data-theme="light"] .service-hero__excerpt {
    color: #5A607A;
}

html[data-theme="light"] .service-hero__acf-heading {
    color: #0A0A1F;
}

html[data-theme="light"] .service-hero__lead {
    color: #0A0A1F;
}

/* Icon Frame Light Mode */
html[data-theme="light"] .service-hero__icon-frame {
    /* Soft shadow instead of dark glow */
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
}

html[data-theme="light"] .service-hero__icon-border {
    border-color: rgba(0,0,0,0.03);
    background: linear-gradient(145deg, #ffffff, #f0f2f5);
    box-shadow:
            20px 20px 60px #d1d9e6,
            -20px -20px 60px #ffffff;
}

html[data-theme="light"] .service-hero__icon-inner {
    background: #f8f9fc;
    box-shadow: inset 5px 5px 10px #e6e7ee, inset -5px -5px 10px #ffffff;
}


/* ABOUT */
.service-about {
    margin-bottom: 60px;
}

.about-features {
    margin-top: 32px;
}

.feature-card {
    text-align: center;
    padding: 16px 8px;
    transition: transform .25s cubic-bezier(.2,.9,.25,1);
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-number {
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 2px solid #21b3ff;
    background: radial-gradient(circle at 30% 10%, #b405fe 0%, #21b3ff 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    box-shadow: 0 12px 32px rgba(33,179,255,0.28);
}

.feature-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-color);
}

.singleServicePage .faq-list {
    max-width: 100%;
}

.singleServicePage .faq-item__btn {
    background: linear-gradient(152.78deg, rgba(0, 0, 0, 0.2) 37.48%, rgba(33, 179, 255, 0.2) 86.35%);
    backdrop-filter: blur(200px);
    box-shadow: 0px 0px 36.4px 0px #FFFFFF1C inset;

}
/* HOW WE DO IT */
.service-how {
    margin-bottom: 60px;
}

.how-grid {
    margin-top: 28px;
}

.how-card {
    padding: 8px 0;
}

.how-title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
    color: var(--text-color);
}

.how-index {
    margin-right: 4px;
    font-weight: 700;
    display: inline-block;
}

.how-desc {
    font-size: 13px;
    color: var(--muted-color-2);
}

/* RESULTS */
.service-results {
    margin-bottom: 60px;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 40px;
    margin-top: 22px;
}

.result-item {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}

.result-item .result-index {
    display: inline-block;
    margin-right: 6px;
}

/* TESTIMONIAL */
.service-testimonials {
    margin: 48px 0;
}

.service-testimonials .section-title {
    font-size: 32px;
    margin-bottom: 16px;
}

.testimonial-wrap {
    max-width: 1000px;
}

.testimonial-quote {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(245,247,255,0.82);
}

/* FINAL CTA */
.service-cta {
    margin-top: 40px;
}

.cta-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 26px 28px 32px;
    border-radius: 24px;
    position: relative;
    background:
            linear-gradient(#020313, #020313) padding-box,
            linear-gradient(90deg, rgba(33,179,255,0.32), rgba(180,5,254,0.32)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 24px 70px rgba(0,0,0,0.9);
    text-align: center;
}

.cta-quote {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.8;
    color: #fff;
    margin-bottom: 18px;
}

.qoute__ctas {
    display: flex;
    justify-content: center;
    gap: 16px;
}


/* RESPONSIVE */
@media (max-width: 991.98px) {
    .singleServicePage {
        padding-block: 50px 70px;
    }
    .service-hero__content {
        padding-left: 0;
        margin-top: 24px;
    }
    .service-hero__title {
        font-size: 32px;
    }
    .results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .section-title {
        font-size: 24px;
    }
}

/* ===========================
   single portfolio
 =========================== */
:root {
    --strevia-primary: #B405FE;
    --strevia-grad-start: #B405FE;
    --strevia-grad-end: #21B3FF;
    --strevia-grad: linear-gradient(90deg, var(--strevia-grad-start), var(--strevia-grad-end));
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 26px 28px;
    margin-top: 18px;
    margin-bottom: 32px;
}

.showcase-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    min-height: 146px;
    background: #191b25;
    box-shadow: 0 5px 34px 0 #21b3ff11, 0 2px 6px #b405fe08;
    transition: transform .34s cubic-bezier(.2,1,.24,1.1), box-shadow .32s;
    z-index: 0;
}
.showcase-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 2.5px;
    background: conic-gradient(from var(--angle), var(--strevia-grad-start) 10%, var(--strevia-grad-end) 85%, var(--strevia-grad-start) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0.72;
    z-index: 1;
    animation: svc-border-rotate 8s linear infinite;
}
@keyframes svc-border-rotate{
    0%{ --angle:0deg; }
    100%{ --angle:360deg; }
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.showcase-item:hover {
    transform: scale(1.045) translateY(-7px);
    box-shadow: 0 15px 38px #21b3ff47, 0 5px 20px #b405fe43;
}
.showcase-item:hover::before {
    opacity: 1;
    filter: brightness(1.12) blur(.2px);
}

.showcase-img {
    width: 100%;
    height: 100%;
    min-height: 110px;
    object-fit: contain;
    display: block;
    border-radius: 14px;
    position: relative;
    z-index: 3;
    background: #fff;
    transition: filter .23s;
}

.showcase-item:hover .showcase-img {
    filter: brightness(1.06) contrast(1.08) drop-shadow(0 2px 10px #B405FE33);
}

/* Responsive */
@media (max-width: 991px) {
    .showcase-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px) {
    .showcase-grid { grid-template-columns: 1fr; }
    .showcase-item { min-height: 78px; }
}


/* ===========================
   single FAQ
 =========================== */

/* ===== Page/Container ===== */
.faqPage {
    background: var(--bg-body);
    color: var(--text-color);
    min-height: 100vh;
    padding-bottom: 32px;
}
.faq-main { max-width: 1320px; margin: 0 auto; }

/* ===== Title and Lead ===== */
.faq-title-main {
    text-align: center;
    font-size: 3.6rem;
    font-weight: 900;
    margin: 43px 0 16px;
    letter-spacing: -.01em;
}
.faq-lead-main {
    text-align: center;
    color: var(--muted-color);
    margin-bottom: 37px;
    font-size: 1.13em;
    max-width: 720px;
    margin-inline: auto;
}

/* ======== Nav Buttons (Bootstrap grid) ======== */
.faq-sections-nav {
    max-width: 100%;
    margin: 0 0 36px 0;
    padding: 20px 0 17px 0;
    background: #171b2bdb;
    border-radius: 18px;
    box-shadow: 0 3px 22px #21b3ff18, 0 1.5px 8px #b405fe08;
    z-index: 3;
}
.faq-section-btn {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 12px 0;
    font-size: 1.10em;
    font-weight: 700;
    border-radius: 13px;
    color: #dfeafe;
    background: #27293b;
    text-decoration: none;
    border: 2.2px solid transparent;
    transition: border .24s, color .18s, background .21s, box-shadow .19s;
    position: relative;
    cursor: pointer;
    overflow:hidden;
    z-index:1;
    letter-spacing:0.01em;
    display: block;
}
.faq-section-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 11px;
    z-index: -1;
    opacity: .7;
    pointer-events:none;
    background: conic-gradient(from var(--angle, 0deg), var(--strevia-grad-end) 35%, transparent 65%, var(--strevia-grad-start) 100%);
    animation: svc-border-rotate 8s linear infinite;
    transition: opacity .15s;
}
@keyframes svc-border-rotate {
    0%{ --angle:0deg; }
    100%{ --angle:360deg; }
}
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.faq-section-btn:hover,
.faq-section-btn.active {
    color: #fff;
    background: #181b26;
    border-image: var(--strevia-grad) 1;
    box-shadow: 0 5px 18px #21b3ff33;
}
.faq-section-btn:hover::before,
.faq-section-btn.active::before {
    opacity: 1;
}

/* ====== FAQ SECTIONS TITLE ====== */
.faq-section-block {
    margin: 50px auto 0;
    max-width: 820px;
    position: relative;
}
.faq-section-title {
    text-align: center;
    font-size: 2.11em;
    font-weight: 900;
    margin: 54px 0 38px;
    letter-spacing: -.035em;
}

/* ====== FAQ Cards ====== */
.faq-list-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.faq-card {
    background: linear-gradient(90deg, var(--card-bg) 90%, var(--card-accent) 100%);
    border-radius: 15px;
    box-shadow: 0 0 34px #21b3ff15, 0 1.5px 8px #b405fe10;
    overflow: hidden;
    border: none;
    transition: box-shadow .24s, transform .18s;
    position: relative;
}
.faq-card-q {
    font-size: 1.13em;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px 28px;
    border-bottom: 1px solid #23264035;
    border-radius: 15px 15px 0 0;
    background:
            linear-gradient(90deg, rgba(33,179,255,0.13) 0%, rgba(180,5,254,0.13) 100%);
    position: relative;
    transition: background .17s;
    cursor: pointer;
    line-height: 1.4;
}
.faq-card-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--strevia-grad);
    border-radius: 50%;
    width: 29px;
    height: 29px;
    font-size: 1.15em;
    color: #fff;
    box-shadow: 0 3px 8px #21b3ff5a;
    flex-shrink: 0;
}
.faq-card-a {
    color: var(--muted-color);
    font-size: 1.06em;
    background: transparent;
    margin-top: 0;
    padding: 14px 38px 14px 38px;
    line-height: 1.74;
    transition: color .13s;
    font-weight: 400;
    border-radius: 0 0 15px 15px;
}

.faq-card:hover {
    box-shadow: 0 17px 55px #21b3ff45, 0 9px 25px #b405fe39;
    transform: translateY(-4px);
}
.faq-card:hover .faq-card-q {
    background: linear-gradient(92deg,#21B3FF21 0,#B405FE25 100%);
}

/* ============ Responsive ============= */
@media (max-width: 991px){
    .faq-section-block {max-width:98vw;}
    .faq-section-btn {font-size:1em;}
}
@media (max-width: 690px){
    .faq-title-main {font-size: 2.1rem;}
    .faq-section-title {font-size: 1.2em;}
}
@media (max-width: 575px){
    .faq-section-title {font-size: 1em;}
    .faq-card-q {padding: 12px 15px;}
    .faq-card-a {padding: 8px 15px;}
}


/* ===========================
   Blog
 =========================== */
.blog-archive-page {
    background: var(--bg-body);
    color: var(--text-color);
    padding-block: 40px 60px;
}

.blog-grid {
    display: flex;
    flex-wrap: wrap;
}

.blog-card {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 30px;
}

.blog-card__img-link {
    display: block;
    width: 100%;
    height: 226px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card__img {
    transform: scale(1.03);
}

.blog-card__body {
    padding: 0;
}

.blog-card__cat {
    display: inline-block;
    padding: 6px 18px;
    border: 1px solid var(--cat-border);
    border-radius: 50px;
    font-size: 12px;
    color: var(--text-color);
    background: transparent;
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.blog-card__title {
    margin: 0;
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
}

.blog-card__title a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.2s;
}

.blog-card__title a:hover {
    color: var(--strevia-primary);
}

.blog-archive-more-wrap {
    margin: 36px 0 10px;
    text-align: center;
}

.blog-archive-more-btn {
    background: linear-gradient(95deg,#27263b 60%,#211142 100%) padding-box,var(--strevia-grad) border-box;
    border: 1.9px solid transparent;
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 9px 42px;
    box-shadow: 0 6px 26px rgba(0,0,0,0.7);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.blog-archive-more-btn:hover {
    transform: translateY(-3px);
}

.sidebar-box__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.sidebar-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.side-articles-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--strevia-grad);
    box-shadow: 0 0 14px rgba(33, 179, 255, 0.4);
}

.side-articles-dot.side-articles-dot--secondary {
    background: radial-gradient(circle at 0% 0%, #21b3ff, #b405fe);
}

.side-articles-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.side-article-item {
    display: flex;
    gap: 12px;
    align-items: stretch;
    background: var(--side-item-bg);
    border-radius: 16px;
    padding: 12px;
}

.side-article-thumb-wrap {
    width: 107px;
    height: 91px;
    flex-shrink: 0;
    border-radius: 5px;
    overflow: hidden;
}

.side-article-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover !important;
    display: block;
}

.side-article-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 91px;
}

.side-article-cat {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1;
    margin-bottom: 4px;
}

.side-article-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 4px 0;
}

.side-article-title a {
    color: var(--text-color);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.side-article-views {
    font-size: 10px;
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.side-article-views i {
    font-size: 11px;
}

.side-article-read-btn {
    display: block;
    width: 100%;
    max-width: 120px;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: 4px;
    text-align: center;
    color: var(--text-color);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 0;
    position: relative;
    overflow: hidden;
}

.side-article-read-btn::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, #21B3FF, #B405FE);
    opacity: 0.8;
}

html[data-theme="light"] .side-article-read-btn {
    color: #333;
}


/* ===========================
   single Contact Us
 =========================== */
:root {
    --strevia-primary: #B405FE;
    --strevia-grad-start: #B405FE;
    --strevia-grad-end: #21B3FF;
    --strevia-grad: linear-gradient(90deg, var(--strevia-grad-start), var(--strevia-grad-end));
}

/* General Page Settings */
.contact-page {
    background: #020313; /* Dark background */
    padding: 60px 0 100px;
    color: #fff;
    min-height: 100vh;
}

.contact-main-title {
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 40px;
}

/* Wrapper Card */
.contact-wrapper {
    background: #0B0C15; /* Dark card bg */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    padding: 10px; /* Space for inner padding if needed */
}

/* --- Left Side (Info Box) --- */
.contact-info-box {
    background: #011C2B; /* Dark teal/blue background from image */
    background-image: radial-gradient(circle at bottom right, #06283D 0%, #011C2B 60%);
    padding: 40px;
    height: 100%;
    border-radius: 16px; /* Slightly rounded inside */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-info-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
}

.contact-info-desc {
    font-size: 1rem;
    color: #cbd5e1;
    margin-bottom: 40px;
}

.contact-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1; /* Take space */
}

.contact-details-list li {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    font-size: 1rem;
    color: #fff;
}

.contact-details-list li i {
    font-size: 1.2rem;
    margin-top: 4px;
    width: 20px;
    text-align: center;
}

.contact-details-list li a {
    color: #fff;
    text-decoration: none;
}

/* Social Icons */
.contact-socials {
    display: flex;
    gap: 15px;
    margin-top: auto; /* Push to bottom */
    position: relative;
    z-index: 2;
}

.social-btn {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #28293E; /* Default dark */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.9rem;
}

.social-btn:hover {
    background: #fff;
    color: #000;
}

/* Special Gradient for buttons like image */
.social-btn:nth-child(1) { background: #B405FE; }
.social-btn:nth-child(2) { background: #B405FE; }
.social-btn:nth-child(3) { background: #B405FE; }
.social-btn:nth-child(4) { background: #B405FE; }
.social-btn:nth-child(5) { background: #B405FE; }
/* Or use one gradient for all active ones as per theme */
.social-btn { background: linear-gradient(135deg, #B405FE, #9C1AB1); }
.social-btn:hover { background: #fff; color: var(--strevia-primary); }


/* Decorative Circles (Bottom Right of Left Box) */
.contact-circles {
    position: absolute;
    bottom: -50px;
    right: -50px;
    pointer-events: none;
}
.circle-1 {
    display: block;
    width: 120px;
    height: 120px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    position: absolute;
    bottom: 40px;
    right: 40px;
}
.circle-2 {
    display: block;
    width: 200px;
    height: 200px;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
}


/* --- Right Side (Form Box) --- */
.contact-form-box {
    padding: 50px;
}

.form-label {
    font-size: 0.9rem;
    color: #8D8D8D;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

/* Input Styling - Underline only like image */
.form-control-custom {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #444;
    color: #fff;
    padding: 10px 0;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.3s;
}

.form-control-custom:focus {
    border-bottom-color: var(--strevia-primary);
}

.form-control-custom::placeholder {
    color: #555;
    font-size: 0.9rem;
}

/* Send Button */
.btn-send-msg {
    display: inline-block;
    background: linear-gradient(90deg, #B405FE 0%, #D53AFE 100%);
    color: #fff;
    border: none;
    padding: 12px 35px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(180, 5, 254, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    z-index: 2;
}

.btn-send-msg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(180, 5, 254, 0.6);
}

/* Paper Plane Decoration */
.plane-deco {
    position: absolute;
    right: 60px; /* Adjust based on image size */
    bottom: -40px;
    width: 80px;
    opacity: 0.8;
    pointer-events: none;
    /* You can use an SVG path or image here */
}

/* Responsive */
@media (max-width: 991px) {
    .contact-info-box {
        border-radius: 16px 16px 0 0;
        min-height: 400px;
    }
    .contact-form-box {
        padding: 30px;
    }
}



/*----------------------------------------------------
 Global Responsive
----------------------------------------------------*/
@media (max-width: 1399.96px) {
    .contact-card {
        left: 35% !important;
    }

    .header-logo {
        img {
            max-block-size: 75px !important;
        }
    }

    .main-btn span {
        font-size: 16px;
    }
}

@media (min-width: 992px) {


    .site-sidebar,
    .sidebar-overlay {
        display: none !important;
    }

    @media (min-width: 992px) {

        .nav-list {
            display: flex;
            gap: 18px;
            align-items: center;
        }

        .nav-list > li.menu-item {
            position: relative;
        }

        .nav-list > li > a {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: 10px 12px;
            font-weight: 700;
            color: var(--c-black);
            text-decoration: none;
            line-height: 1.2;
            transition: color .25s ease;
        }

        .nav-list > li > a:hover,
        .nav-list > li > a:focus {
            color: var(--c-primary-hover);
        }

        .nav-list > .menu-item-has-children > a::after {
            content: "\f078"; /* chevron-down */
            font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
            font-weight: 900;
            display: inline-block;
            margin-inline-start: 6px;
            color: var(--c-black);
            transition: transform .25s ease, color .25s ease;
        }

        .nav-list > .menu-item-has-children:hover > a::after,
        .nav-list > .menu-item-has-children:focus-within > a::after {
            transform: rotate(180deg);
            color: var(--c-primary);
        }

        .nav-list > .menu-item-has-children.active > a::after,
        .nav-list > .menu-item-has-children.current-menu-item > a::after,
        .nav-list > .menu-item-has-children.current_page_item > a::after,
        .nav-list > .menu-item-has-children.current-menu-ancestor > a::after,
        .nav-list > .menu-item-has-children.current_page_ancestor > a::after,
        .nav-list > .menu-item-has-children.current-menu-parent > a::after {
            color: var(--c-primary);
        }

        .nav-list > li > .sub-menu {
            position: absolute;
            top: 100%;
            inset-inline-start: 0;
            z-index: 50;
            transform-origin: 0 0 0;
            min-width: 260px;
            padding: 10px;
            list-style: none;
            background: radial-gradient(600px 300px at 110% -10%, color-mix(in srgb, var(--c-primary) 10%, transparent), transparent 60%),
            linear-gradient(180deg, color-mix(in srgb, var(--c-white) 96%, transparent), color-mix(in srgb, var(--c-white) 88%, transparent));
            border: 1px solid color-mix(in srgb, var(--c-black) 8%, transparent);
            border-radius: 16px;
            box-shadow: 0 18px 44px color-mix(in srgb, var(--c-black) 14%, transparent);
            transform-origin: top center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(8px) scale(.98);
            transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
            will-change: opacity, transform;
        }

        .nav-list > li.menu-item-has-children:hover > .sub-menu,
        .nav-list > li.menu-item-has-children:focus-within > .sub-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0) scale(1);
            transition-delay: 0s;
        }

        .nav-list .sub-menu > li {
            position: relative;
        }

        .nav-list .sub-menu > li > a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 12px;
            color: color-mix(in srgb, var(--c-black) 85%, var(--c-white) 15%);
            text-decoration: none;
            font-weight: 600;
            transition: background .18s ease, color .18s ease, transform .18s ease;
        }

        .nav-list .sub-menu > li > a:hover,
        .nav-list .sub-menu > li > a:focus {
            background: color-mix(in srgb, var(--c-secondary) 24%, var(--c-white) 76%);
            color: var(--c-black);
            transform: translateY(-1px);
        }

        .nav-list .sub-menu > li:not(:last-child) > a {
            margin-bottom: 6px;
        }

        .nav-list .sub-menu > li.menu-item-has-children > a::after {
            font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 13px;
            color: var(--c-black);
            transition: transform .2s ease, color .2s ease;
            margin-inline-start: 10px;
            line-height: 1;
        }

        html[dir="ltr"] .nav-list .sub-menu > li.menu-item-has-children > a::after {
            content: "\f054";
        }

        /* chevron-right */
        html[dir="rtl"] .nav-list .sub-menu > li.menu-item-has-children > a::after {
            content: "\f053";
        }

        /* chevron-left */
        .nav-list .sub-menu .sub-menu {
            position: absolute;
            top: 0;
            inset-inline-start: 100%;
            min-width: 240px;
            padding: 10px;
            background: var(--c-white);
            border: 1px solid color-mix(in srgb, var(--c-black) 8%, transparent);
            box-shadow: 0 16px 40px color-mix(in srgb, var(--c-black) 12%, transparent);
            transform-origin: top start;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translateY(6px) scale(.98);
            transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
        }

        .nav-list .sub-menu > li.menu-item-has-children:hover > .sub-menu,
        .nav-list .sub-menu > li.menu-item-has-children:focus-within > .sub-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0) scale(1);
            transition-delay: 0s;
        }

        .btn-nav, .mobile-nav-list, .dd-trigger {
            display: none !important;
        }
    }
}

@media (max-width: 992px) {
    .about,
    .services {
        margin-block: 35px;
    }

    /* sidebar  */
    :root {
        --strevia-primary: #B405FE;
        --strevia-grad-start: #B405FE;
        --strevia-grad-end: #21B3FF;
        --strevia-grad: linear-gradient(90deg, var(--strevia-grad-start), var(--strevia-grad-end));
        --glass-bg: rgba(2, 3, 19, 0.75);
        --sidebar-width: 100%;
        --sidebar-max-width: 480px;
    }

    /* --- Menu Button (Visible on Mobile) --- */
    .stravia-menu-btn {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.15);
        backdrop-filter: blur(10px);
        border-radius: 50%;
        width: 55px; height: 55px;
        display: inline-flex;
        align-items: center; justify-content: center;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        position: relative; overflow: hidden; z-index: 9995;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    @media (min-width: 992px) {
        .stravia-menu-btn { display: none !important; }
    }

    .stravia-menu-btn::before {
        content: ''; position: absolute; inset: 0;
        background: var(--strevia-grad); opacity: 0;
        transition: opacity 0.4s ease; z-index: -1;
    }

    .stravia-menu-btn:hover {
        border-color: transparent; transform: scale(1.05) rotate(5deg);
        box-shadow: 0 10px 25px rgba(180, 5, 254, 0.4);
    }
    .stravia-menu-btn:hover::before { opacity: 1; }

    /* Burger Icon Animation */
    .stravia-burger {
        width: 24px; height: 14px; position: relative;
        display: flex; flex-direction: column; justify-content: space-between;
    }
    .stravia-burger span {
        display: block; width: 100%; height: 2px;
        background: #fff; border-radius: 4px; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .stravia-menu-btn:hover .stravia-burger span:nth-child(1) { width: 60%; transform: translateX(40%); }
    .stravia-menu-btn:hover .stravia-burger span:nth-child(2) { width: 100%; }


    /* --- Fullscreen Overlay --- */
    .stravia-overlay {
        position: fixed; inset: 0; background: rgba(0,0,0,0.7);
        backdrop-filter: blur(8px); /* Heavy blur for focus */
        opacity: 0; visibility: hidden;
        transition: opacity 0.5s ease, visibility 0.5s;
        z-index: 9998; cursor: pointer;
    }
    .stravia-overlay.is-active { opacity: 1; visibility: visible; }


    /* --- Sidebar Container --- */
    .stravia-sidebar {
        position: fixed; top: 0; bottom: 0;
        width: var(--sidebar-width); max-width: var(--sidebar-max-width);
        background: var(--glass-bg);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        z-index: 9999; display: flex; flex-direction: column;
        border: 1px solid rgba(255,255,255,0.08);
        box-shadow: -10px 0 40px rgba(0,0,0,0.3);

        /* GSAP will handle transform, but set initial state for CSS fallback */
        transform: translateX(100%);
        visibility: hidden;
    }

    /* Direction Logic (Handled via CSS for base layout) */
    html:not([dir="rtl"]) .stravia-sidebar { left: 0; right: auto; transform: translateX(-100%); border-left: none; border-right: 1px solid rgba(255,255,255,0.08); }
    html[dir="rtl"] .stravia-sidebar { right: 0; left: auto; transform: translateX(-100%); border-right: none; border-left: 1px solid rgba(255,255,255,0.08); }


    /* --- Sidebar Header --- */
    .sidebar-head {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 40px; padding-bottom: 20px;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .sidebar-logo img { max-height: 45px; width: auto; display: block; }
    .logo-text { font-size: 1.5rem; font-weight: 900; letter-spacing: 1px; color: #fff; }

    .sidebar-close {
        width: 40px; height: 40px; border-radius: 50%;
        background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
        color: #fff; cursor: pointer; font-size: 1.2rem;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }
    .sidebar-close:hover {
        background: var(--strevia-grad); border-color: transparent;
        transform: rotate(90deg) scale(1.1);
    }


    /* --- Content Area & Glow --- */
    .sidebar-inner {
        position: relative; height: 100%; display: flex; flex-direction: column;
        padding: 40px; overflow-y: auto; overflow-x: hidden;
    }

    /* Animated Background Glow */
    .sidebar-bg-glow {
        position: absolute; top: -10%; width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(180,5,254,0.12), transparent 65%);
        filter: blur(80px); z-index: -1; pointer-events: none;
        animation: floatGlow 10s infinite alternate ease-in-out;
    }
    html:not([dir="rtl"]) .sidebar-bg-glow { right: -30%; }
    html[dir="rtl"] .sidebar-bg-glow { left: -30%; }

    @keyframes floatGlow { 0% { transform: translate(0, 0); } 100% { transform: translate(20px, 40px); } }


    /* --- Navigation Items --- */
    .stravia-menu { padding: 0; margin: 0; list-style: none; }

    .stravia-menu > li {
        margin-bottom: 15px;
        /* GSAP will animate opacity & transform */
        opacity: 0; transform: translateX(20px);
    }

    .stravia-menu > li > a {
        display: block; font-size: 2rem; font-weight: 700; line-height: 1.2;
        color: rgba(255,255,255,0.6); text-decoration: none;
        position: relative; transition: 0.3s ease;
        padding: 5px 0;
    }

    /* Creative Hover Effect: Text Slide & Color */
    .stravia-menu > li > a:hover {
        color: #fff;
        padding-left: 10px; /* Shift right on hover (LTR) */
    }
    html[dir="rtl"] .stravia-menu > li > a:hover {
        padding-left: 0; padding-right: 10px; /* Shift left on hover (RTL) */
    }

    .stravia-menu > li > a::before {
        content: attr(data-text); /* Requires JS to fill */
        position: absolute; top: 0; left: 0; width: 0; height: 100%;
        overflow: hidden; color: #fff; white-space: nowrap;
        border-bottom: 2px solid #B405FE; /* Underline effect */
        transition: 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }


    /* --- Submenu & Dropdown --- */
    .stravia-menu li.menu-item-has-children { position: relative; }

    .stravia-menu .dd-btn {
        position: absolute; top: 10px;
        width: 35px; height: 35px; background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1); border-radius: 50%;
        color: #fff; cursor: pointer; font-size: 0.9rem;
        display: flex; align-items: center; justify-content: center;
        transition: all 0.3s ease;
    }
    html:not([dir="rtl"]) .stravia-menu .dd-btn { right: 0; }
    html[dir="rtl"] .stravia-menu .dd-btn { left: 0; }

    .stravia-menu .dd-btn:hover { background: #B405FE; border-color: transparent; }

    .sub-menu {
        display: none; padding-top: 15px; padding-bottom: 10px; list-style: none;
        border-left: 1px solid rgba(255,255,255,0.1); margin-left: 10px;
    }
    html[dir="rtl"] .sub-menu { border-left: none; border-right: 1px solid rgba(255,255,255,0.1); margin-left: 0; margin-right: 10px; }

    .sub-menu li a {
        font-size: 1.1rem; color: rgba(255,255,255,0.5); text-decoration: none;
        display: block; padding: 8px 15px; transition: all 0.3s ease;
    }
    .sub-menu li a:hover {
        color: #fff; background: rgba(255,255,255,0.05); border-radius: 6px;
        transform: translateX(5px);
    }


    /* --- Footer CTA --- */
    .sidebar-footer { margin-top: auto; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.08); }

    .stravia-cta-btn {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; padding: 20px 30px;
        background: var(--strevia-grad);
        border-radius: 15px;
        color: #fff; font-weight: 700; font-size: 1.2rem; text-decoration: none;
        box-shadow: 0 10px 30px rgba(180, 5, 254, 0.25);
        position: relative; overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .stravia-cta-btn::before {
        content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: left 0.5s ease;
    }
    .stravia-cta-btn:hover {
        transform: translateY(-3px); box-shadow: 0 20px 40px rgba(180, 5, 254, 0.4);
    }
    .stravia-cta-btn:hover::before { left: 100%; }

    html[dir="rtl"] .stravia-cta-btn i { transform: rotate(180deg); }


    /* end sidebar*/
    .header-actions {
        a {
            display: none !important;
        }
    }

}

@media (max-width: 991.96px) {
    .services {
        .services-hero {
            .service-card {
                padding: 20px;
            }
        }
    }

    .about-photo {
        min-height: 250px;
        background-position: inherit !important;
        background-size: cover !important;
    }

    .whyus {
        .whyus-canvas {
            margin-bottom: 15px;
        }
    }

    [class*="col-"]:not(.whyus [class*="col-"], .about [class*="col-"]) {
        margin-bottom: 30px;
    }

    .stories {
        & .in_stroies {
            padding: 90px 20px 30px;
        }
    }

    .wpcf7 {
        .wpcf7-form-control-wrap {
            max-width: 100%;

        }
    }

    .contact-block {
        & .hold_contact {
            & .contact-form {
                & textarea.contact-input {
                    max-width: 100%;
                }
            }
        }
    }

    .contact-row {
        flex-direction: column-reverse;
    }

    .contact-photo {
        object-fit: none;
    }

    .footer {
        .footer-badge {
            margin-top: -100px;

            img {
                height: 145px;
            }
        }
    }

    .main-caption {
        transform: translateY(-17%);
    }


}


@media (min-width: 1200px) {
    #main-header .container > .d-flex,
    #fixed-header .container > .d-flex {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }

    #main-header .header-logo,
    #fixed-header .header-logo {
        justify-self: start;
    }

    #main-header .main-menu,
    #fixed-header .main-menu {
        justify-self: center;
        text-align: center;
    }

    #main-header .header-actions,
    #fixed-header .header-actions {
        justify-self: end;
    }
}

@media (max-width: 768px) {
    .main-caption {
        & .headline-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 27px;
        }

        transform: translateY(0);
    }

    .about {
        & .about-tabs {
            & .row {
                gap: 0;
            }
        }
    }

    .sec-tit {
        color: #000;
        font-weight: 700;
        font-size: 26px;
        margin-bottom: 40px;
    }

}

@media (max-width: 576px) {
    .stats {
        & .stats-wrap {
            & .stat-box {
                min-width: 160px;
            }
        }
    }


    .site-sidebar {
        position: fixed;
        inline-size: min(90vw, 400px);
    }

    .contact-form {
        margin-top: 40px;
    }

    .simple-faq {
        & .faq-q {
            font-size: 16px;
        }
    }

    .txt {
        width: calc(100% - 28px);
    }

    .footer {
        & .footer-copy {
            & p {
                margin: 0;
                color: var(--c-secondary);
                font-weight: 500;
                font-size: 15px;
                line-height: 25px;
            }
        }
    }

    .footer {
        margin-top: 60px;
    }

    #main-header {
        margin-inline: 25px;
    }

    .headline-title {
        line-height: 35px;
    }

    .whyus,
    .partners {
        margin-top: 40px;
    }

    .posts-section {
        & .post-card {
            & .post-body {
                & .post-title {
                    font-size: 15px;
                    line-height: 23px;
                }
            }
        }
    }

    .posts-section {
        & .post-card {
            & .post-body {
                & .post-meta {
                    & time {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    .posts-section {
        & .post-card {
            & .post-body {
                & .post-cta {
                    width: 36px;
                    height: 36px;

                    i {
                        font-size: 20px;

                        line-height: 36px;

                    }
                }
            }
        }
    }

    .hold_contact_photo {
        max-height: 390px !important;
    }

    .contact-photo {
        width: 100%;
        max-height: 387px;
        object-fit: cover;
        display: block;
        object-fit: cover;
    }

}

@media (max-width: 380px) {
    .main-btn span {
        font-size: 14px;
    }

    .gap-4 {
        gap: .9rem !important;
    }

    .posts-section {
        & .post-card {
            & .post-body {
                & .post-title {
                    font-size: 15px;
                    font-weight: 700;
                    margin: 0 0 16px;
                }
            }
        }
    }
}

/*----------------------------------------------------
End of CSS
----------------------------------------------------*/