/* ======================= Css table of contents Start =================================
   * Template name: EduAll
   * Version: 1.0
   * Description: EduAll HTML Template
   * Author: wowtheme7
   * Author-url: https://themeforest.net/user/wowtheme7 */
/* **************************** Abstracts ****************************
   ** Functions
   ** Mixins
   ** Variables

   /* **************************** Components **************************** 
   ** Accordion
   ** Button
   ** Form
   ** Swiper
   ** Tab
   ** Table
   ** Toast

   /* **************************** Layout **************************** 
   ** Custom Cursor
   ** Header
   ** Mobile nav menu
   ** Preloader
   ** Range slider
   ** Scroll top
   ** Slick

   /* **************************** Utilities **************************** 
   ** Aspect
   ** Bg img
   ** Bg
   ** Border
   ** Classes
   ** Colors hover
   ** Colors
   ** Cursor
   ** Duration
   ** Font size
   ** Font
   ** Gap
   ** Grid
   ** Group
   ** Height
   ** Hover Animation White
   ** Inset
   ** Line clamp
   ** Line height
   ** Margin
   ** Max height
   ** Max width
   ** Outline
   ** Overlay
   ** Padding
   ** Placeholder
   ** Rotate
   ** Rounded
   ** Scale
   ** Scrollbar
   ** Shadow
   ** Transform
   ** Transition
   ** Translate
   ** Typography
   ** Underline
   ** Width
   ** Z index
   ** Animation

   /* **************************** Partials **************************** 
   ** RTL

   





/* Font Family*/
@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&family=Manrope:wght@200..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");

/* ========================= Variable Css Start ======================== */



:root {
    /* Font Family Variable */
    --heading-font: "Manrope", sans-serif;
    --body-font: "Satoshi", sans-serif;
    --playfair-font: "Playfair Display", serif;
    --big-shoulders-font: "Big Shoulders", sans-serif;
    /* Font Size Variable Start */
    --heading-one: clamp(2rem,
            -0.0733rem + 6.3692vw,
            4.25rem);
    --heading-two: clamp(1.75rem,
            0.6991rem + 2.4499vw,
            3.25rem);
    --heading-three: clamp(1.5rem,
            1.3224rem + 0.8909vw,
            2.25rem);
    --heading-four: clamp(1.25rem,
            0.5569rem + 1.444vw,
            2rem);
    --heading-five: clamp(1.125rem,
            1.2rem + 0.722vw,
            1.5rem);
    --heading-six: clamp(1rem,
            0.769rem + 0.6813vw,
            1.25rem);
    /* Font Size End */
    /* template main color */
    --main-h: 222;
    --main-s: 90%;
    --main-l: 51%;
    --main: var(--main-h) var(--main-s) var(--main-l);
    --main-two-h: 41;
    --main-two-s: 99%;
    --main-two-l: 55%;
    --main-two: var(--main-two-h) var(--main-two-s) var(--main-two-l);
    /* White Color */
    --white: 0 0% 100%;
    --black: 240 46% 5%;
    --body: 0 0% 43%;
    --heading-color: var(--black);
    --body-color: var(--body);
    --translate-x-50: translateX(-50%);
    --translate-y-50: translateY(-50%);
    --size-05: 0.125rem;
    --size-1: 0.25rem;
    --size-105: 0.375rem;
    --size-2: 0.5rem;
    --size-205: 0.625rem;
    --size-3: 0.75rem;
    --size-305: 0.875rem;
    --size-4: 1rem;
    --size-405: 1.125rem;
    --size-5: 1.25rem;
    --size-505: 1.375rem;
    --size-6: 1.5rem;
    --size-605: 1.625rem;
    --size-7: 1.75rem;
    --size-705: 1.875rem;
    --size-8: 2rem;
    --size-9: 2.25rem;
    --size-10: 2.5rem;
    --size-11: 2.75rem;
    --size-12: 3rem;
    --size-13: 3.25rem;
    --size-14: 3.5rem;
    --size-15: 3.75rem;
    --size-16: 4rem;
    --size-17: 4.25rem;
    --main-40: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.93));
    --main-50: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.9));
    --main-100: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.8));
    --main-200: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.7));
    --main-300: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.6));
    --main-400: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.5));
    --main-500: hsl(var(--main-h), var(--main-s), calc(var(--main-l) + (100% - var(--main-l)) * 0.4));
    --main-600: hsl(var(--main-h), var(--main-s), var(--main-l));
    --main-700: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - var(--main-l) * 0.1));
    --main-800: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - var(--main-l) * 0.2));
    --main-900: hsl(var(--main-h), var(--main-s), calc(var(--main-l) - var(--main-l) * 0.3));
    --main-two-50: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.9));
    --main-two-100: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.8));
    --main-two-200: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.7));
    --main-two-300: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.6));
    --main-two-400: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.5));
    --main-two-500: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) + (100% - var(--main-two-l)) * 0.4));
    --main-two-600: hsl(var(--main-two-h), var(--main-two-s), var(--main-two-l));
    --main-two-700: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) - var(--main-two-l) * 0.1));
    --main-two-800: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) - var(--main-two-l) * 0.2));
    --main-two-900: hsl(var(--main-two-h), var(--main-two-s), calc(var(--main-two-l) - var(--main-two-l) * 0.3));
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;
    --neutral-1000: #070713;
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
}

/* ========================= Variable Css End ======================== */
/* Media Breakpoint for Each Device End */
/* =========================== Accordion Css start ============================= */
.common-accordion .accordion-item:not(:last-child) {
    margin-block-end: 20px;
}

.common-accordion:first-of-type .accordion-button.collapsed {
    border-radius: 5px;
}

.common-accordion:last-of-type .accordion-button.collapsed {
    border-radius: 5px;
}

.common-accordion .accordion-button::after {
    background-image: none;
}

.common-accordion .accordion-button:focus {
    box-shadow: none;
}

.common-accordion .accordion-button {
    position: relative;
    padding-inline-end: 1rem !important;
    text-align: start;
}

.common-accordion .accordion-button::before {
    position: absolute;
    content: "\e136";
    inset-inline-end: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-family: "Phosphor";
    font-weight: 40;
    font-size: 1rem;
    color: var(--neutral-600);
    transition: 0.2s ease-in-out;
}

.common-accordion .accordion-button[aria-expanded=true]::before {
    transform: translateY(-50%) rotate(180deg);
}

.style-two .accordion-button {
    padding-inline-end: 60px !important;
}

.style-two .accordion-button[aria-expanded=true] {
    background: var(--main-600) !important;
    color: #fff !important;
}

.style-two .accordion-button[aria-expanded=true]::before {
    transform: translateY(-50%) rotate(180deg);
    content: "\e32a";
}

.style-two .accordion-button::before {
    inset-inline-end: 14px;
    background-color: #F3F7F6;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: hsl(var(--heading-color)) !important;
    font-weight: 900;
    content: "\e3d4";
}

/* ================================= Accordion Css End =========================== */
/* ========================== Button Css Start =============== */
.button__label {
    position: relative;
    text-align: center;
    transition: color 0.05s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.button--stroke:hover {
    color: #0e100f;
}

.button--stroke::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 0.125rem solid #fffce1;
    border-radius: inherit;
    pointer-events: none;
}

.button--stroke .button__flair {
    transform: scale(0);
    transform-origin: 0 0;
}

.button--stroke .button__label {
    transition: color 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.button__flair {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.button__flair::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    aspect-ratio: 1/1;
    background-color: #fffce1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.btn {
    border: 0;
    color: hsl(var(--white));
    line-height: 1;
    padding: 18px 32px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    z-index: 1;
    transition: 0.2s linear;
}

.btn:hover,
.btn:focus,
.btn:focus-visible {
    box-shadow: none !important;
}

.btn-main {
    background-color: #0284C7 !important;
    color: hsl(var(--white)) !important;
}

.btn-main.button--stroke::after {
    border-color: transparent;
}

.btn-main-outline {
    background-color: transparent !important;
    color: var(--main-600) !important;
    border: 1px solid var(--main-600) !important;
}

.btn-main-outline.button--stroke::after {
    border-color: transparent;
}

.btn-main-two {
    background-color: var(--main-two-600) !important;
    color: hsl(var(--heading-color)) !important;
}

.btn-main-two.button--stroke::after {
    border-color: transparent;
}

.btn-main-two-outline {
    background-color: transparent !important;
    color: var(--main-two-600) !important;
    border: 1px solid var(--main-two-600) !important;
}

.btn-main-two-outline.button--stroke::after {
    border-color: transparent;
}

.btn-black {
    background-color: hsl(var(--heading-color)) !important;
    color: hsl(var(--white)) !important;
}

.btn-black.button--stroke::after {
    border-color: transparent;
}

.btn-black-outline {
    background-color: transparent !important;
    color: hsl(var(--heading-color)) !important;
    border: 1px solid hsl(var(--heading-color)) !important;
}

.btn-black-outline.button--stroke::after {
    border-color: transparent;
}

.hover-style-one:hover,
.hover-style-one:active {
    background-color: var(--main-600);
}

.hover-style-one:hover.button--stroke::after,
.hover-style-one:active.button--stroke::after {
    border-color: transparent;
}

.hover-style-one .button__flair::before {
    background-color: var(--main-two-600);
}

.hover-style-two:hover,
.hover-style-two:active {
    color: hsl(var(--white)) !important;
}

.hover-style-two:hover.button--stroke::after,
.hover-style-two:active.button--stroke::after {
    border-color: transparent;
}

.hover-style-two .button__flair::before {
    background-color: var(--main-600);
}

.hover-style-three:hover,
.hover-style-three:active {
    color: hsl(var(--white)) !important;
}

.hover-style-three:hover.button--stroke::after,
.hover-style-three:active.button--stroke::after {
    border-color: transparent;
}

.hover-style-three .button__flair::before {
    background-color: hsl(var(--heading-color));
}

/* =========================== Button Css End =================== */
/* ================================= Form Css Start =========================== */
.placeholder-text-sm::placeholder {
    font-size: 14px;
}

/* input File Start */
.common-file[type=file] {
    line-height: 50px;
    padding: 0;
    position: relative;
}

.common-file[type=file]::file-selector-button {
    border: 1px solid hsl(var(--black)/0.08);
    padding: 4px 6px;
    border-radius: 0.2em;
    background-color: hsl(var(--main)) !important;
    transition: 0.2s linear;
    line-height: 25px;
    position: relative;
    margin-inline-start: 15px;
    color: hsl(var(--body-color)) !important;
}

.common-file[type=file]::file-selector-button:hover {
    background-color: var(--main-600);
    border: 1px solid var(--main-600);
    color: hsl(var(--black));
}

/* input File End */
/* Autofill Css */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active {
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px transparent inset;
    -webkit-text-fill-color: hsl(var(--heading-color)) !important;
    caret-color: hsl(var(--heading-color));
}

/* Autofill Css End */
/* Number Arrow None */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type=number] {
    -moz-appearance: textfield;
}

/* Custom Checkbox & Radio Css Start */
.common-check {
    display: flex;
    align-items: center;
    margin-block-end: 16px;
}

.common-check:last-child {
    margin-block-end: 0;
}

.common-check a {
    display: inline;
}

.common-check.common-radio .form-check-input {
    border-radius: 50%;
}

.common-check.common-radio .form-check-input:checked {
    background-color: transparent !important;
}

.common-check.common-radio .form-check-input:checked::after {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.common-check.common-radio .form-check-input:checked::before {
    display: none;
}

.common-check .form-check-input {
    transition: 0.2s linear;
    box-shadow: none;
    background-color: transparent;
    box-shadow: none !important;
    border: 0;
    position: relative;
    border-radius: 3px;
    width: 18px;
    height: 18px;
    border: 1px solid hsl(var(--black)/0.4);
    cursor: pointer;
    transition: 0.2s linear;
    margin-block-start: 0;
}

.common-check .form-check-input::before {
    position: absolute;
    content: "\e182";
    font-family: "Phosphor";
    font-weight: 900;
    color: hsl(var(--white));
    font-size: 12px;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);
    transition: 0.2s linear;
    visibility: hidden;
    opacity: 0;
}

.common-check .form-check-input::after {
    position: absolute;
    content: "";
    inset-block-start: 50%;
    inset-inline-start: 50%;
    -webkit-transform: translate(-50%, -50%) scale(0.2);
    transform: translate(-50%, -50%) scale(0.2);
    width: 10px;
    height: 10px;
    background-color: var(--main-600);
    border-radius: 50%;
    transition: 0.2s linear;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
}

.common-check .form-check-input:checked {
    background-color: hsl(var(--main)) !important;
    border-color: hsl(var(--main)) !important;
    box-shadow: none;
}

.common-check .form-check-input:checked[type=checkbox] {
    background-image: none;
}

.common-check .form-check-input:checked::before {
    visibility: visible;
    opacity: 1;
}

/* Custom Checkbox & Radio Css End */
/* ================================= Form Css End =========================== */
/* =========================== Flowmap css start ================================ */
.animated-bg {
    display: block;
    width: 100%;
    min-height: 400px;
    overflow: hidden;
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    height: 100%;
    z-index: 0;
}

.animated-bg canvas {
    display: block;
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    height: 100%;
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity 0.3s 0.3s;
    transition: opacity 0.3s 0.3s;
}

.animated-bg.active canvas {
    opacity: 1;
}

/* =========================== Flowmap css end ================================ */
/* Floating Progress css start */
.progress-container,
.progress {
    background-color: #d9d9d9;
    border-radius: 5px;
    position: relative;
    height: 8px;
    width: 100%;
}

.progress {
    background-color: var(--main-600);
    width: 0;
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear;
    height: inherit;
    top: 50%;
    transform: translateY(-50%);
    left: 1px;
}

.progress.active {
    width: 0 !important;
}

.percentage {
    background-color: var(--main-600);
    border-radius: 5px;
    -webkit-box-shadow: 0 4px 5px #00000033;
    box-shadow: 0 4px 5px #00000033;
    color: #fff;
    font-size: 12px;
    padding: 4px;
    position: absolute;
    bottom: 20px;
    inset-inline-start: 0;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 40px;
    text-align: center;
    -webkit-transition: 0.8s linear;
    transition: 0.8s linear;
}

.percentage::after {
    background-color: var(--main-600);
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
    height: 10px;
    width: 10px;
    z-index: -1;
}

.progress.active,
.percentage.active {
    inset-inline-start: 0 !important;
}

.style-yellow {
    background-color: #feb81b45;
}

.style-yellow .progress {
    background-color: #feb81b;
}

.style-yellow .percentage {
    background-color: #feb81b;
    color: hsl(var(--heading-color));
}

.style-yellow .percentage::after {
    background-color: #feb81b;
}

/* Floating Progress css end */
/* Swiper css start */
.style-one .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: #fff;
    opacity: 0.5;
    transition: 0.3s ease-in-out;
}

.style-one .swiper-pagination-bullet.swiper-pagination-bullet-active {
    opacity: 1;
    width: 32px;
    border-radius: 50rem;
}

.swiper-cube .swiper-cube-shadow:before {
    background: #0000000f;
}

/* Swiper css end */
/* ================================= Tab Css Start =========================== */
.tab-style-one .nav-link__icon {
    transition: width 0.7s linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.tab-style-one .nav-link__text {
    transition: transform 0.7s linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.tab-style-one .nav-link__yellow {
    transition: transform 0.7s linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.tab-style-one .nav-link.active {
    background-color: var(--main-two-600) !important;
    color: hsl(var(--heading-color));
}

.tab-style-one .nav-link.active .nav-link__icon {
    width: 0;
    visibility: hidden;
    opacity: 0;
}

.tab-style-one .nav-link.active .nav-link__yellow {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}

.tab-style-one .nav-link__yellow {
    transform: translateX(100%);
    visibility: hidden;
    opacity: 0;
}

.animate-background {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    background-color: var(--main-two-600);
    position: absolute;
    z-index: -1;
    inset-block-start: 50%;
    transform: translateY(-50%);
    inset-inline-start: 0;
    transition: all 0.2s linear;
    border-radius: 12px;
    pointer-events: none;
}

.activeTextBlackUnderline .nav-link.active,
.activeTextBlackUnderline .show>.nav-link {
    color: hsl(var(--heading-color)) !important;
    text-decoration: underline;
}

/* ================================= Tab Css End =========================== */
/* ======================= Common Table Css Start ======================= */
.table> :not(caption)>*>* {
    border-bottom: 0;
}

.table tr th:first-child {
    padding-inline-start: 0;
}

.table tr th:last-child {
    padding-inline-end: 0;
}

.table tr th,
.table tr td {
    vertical-align: middle;
}

.table tr th:first-child,
.table tr td:first-child {
    text-align: left;
}

.table tr th:last-child,
.table tr td:last-child {
    text-align: right;
    padding-inline-end: 0;
}

/* ======================= Common Table Css End ======================= */
/* Toast Message Css start  */
:root {
    --success-600: #16A34A;
    /* Green */
    --danger-600: #DC2626;
    /* Red */
    --warning-600: #D97706;
    /* Amber */
    --info-600: #0284C7;
    /* Sky Blue */
}

#toast-container {
    position: fixed;
    inset-block-start: 20px;
    inset-inline-end: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 9999;
}

.toast-message {
    position: relative;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.25, 1.35);
    width: 300px;
    transform: translateX(calc(100% + 20px));
    overflow: hidden;
    background-color: #fff;
    border-inline-start: 3px solid var(--success-600);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding-block: 12px;
    padding-inline: 16px;
    border-radius: 6px;
}

.toast-message.active {
    transform: translateX(0);
}

.toast-message.active .progress__bar::before {
    animation: progress-bar 3.5s linear forwards;
    visibility: visible;
    opacity: 1;
}

.toast-message:hover .progress__bar::before {
    animation-play-state: paused;
}

.toast-message__content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.toast-message__icon {
    font-size: 24px;
    color: var(--success-600);
    line-height: 1;
}

.toast-message__title {
    margin-bottom: 0;
    font-size: 18px !important;
}

.toast-message__close {
    background-color: transparent;
    border: 0;
    padding: 0;
    line-height: 1;
    font-size: 16px;
}

.toast-message__text {
    color: #42494f;
    font-size: 14px;
}

.progress__bar {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 100%;
    background: #fff;
}

.progress__bar::before {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    height: 100%;
    width: 100%;
    background-color: var(--success-600);
    visibility: hidden;
    opacity: 0;
}

@keyframes progress-bar {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}

.success {
    border-color: var(--success-600);
}

.success .toast-message__icon {
    color: var(--success-600) !important;
}

.success .progress__bar::before {
    background-color: var(--success-600);
}

.danger {
    border-color: var(--danger-600);
}

.danger .toast-message__icon {
    color: var(--danger-600) !important;
}

.danger .progress__bar::before {
    background-color: var(--danger-600);
}

.warning {
    border-color: var(--warning-600);
}

.warning .toast-message__icon {
    color: var(--warning-600) !important;
}

.warning .progress__bar::before {
    background-color: var(--warning-600);
}

.info {
    border-color: var(--info-600);
}

.info .toast-message__icon {
    color: var(--info-600) !important;
}

.info .progress__bar::before {
    background-color: var(--info-600);
}

/* Toast Message Css End  */
/* ================================= Typography Css Start =========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    color: hsl(var(--body-color));
    word-break: break-word;
    background-color: hsl(var(--white));
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

p {
    font-weight: 400;
    margin: 0;
    line-height: 1.7;
}

span {
    display: inline-block;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    margin: 0;
    font-family: var(--heading-font);
    color: hsl(var(--heading-color));
    line-height: 1.5;
    font-weight: 700;
}

h1,
.h1 {
    font-size: var(--heading-one);
    line-height: 1.3;
}

h2,
.h2 {
    font-size: var(--heading-two);
    line-height: 1.3;
}

h3,
.h3 {
    font-size: var(--heading-three);
}

h4,
.h4 {
    font-size: var(--heading-four);
}

h5,
.h5 {
    font-size: var(--heading-five);
}

h6,
.h6 {
    font-size: var(--heading-six);
}

h1>a,
h2>a,
h3>a,
h4>a,
h5>a,
h6>a {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    transition: 0.2s linear;
    line-height: inherit;
}

h1>a:hover,
h2>a:hover,
h3>a:hover,
h4>a:hover,
h5>a:hover,
h6>a:hover {
    color: var(--main-600);
}

a {
    display: inline-block;
    transition: 0.2s linear;
    text-decoration: none;
    color: #0661e9;
}

a:hover {
    color: #1d72f2;
}

img {
    max-width: 100%;
    height: auto;
    /* margin-top: -20px; */
}

select {
    cursor: pointer;
}

ul,
ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

button {
    border: 0;
    background-color: transparent;
}

button:focus {
    outline: none;
    box-shadow: none;
}

input:focus,
input:focus-visible {
    box-shadow: none;
}

/* ================================= Typography Css End =========================== */
/* Bg Image Css Start */
.bg-img {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    width: 100%;
    height: 100%;
}

/* Bg Image Css End */
/* hover bg class start */
.bg-main-40 {
    background-color: var(--main-40) !important;
}

.bg-main-50 {
    background-color: var(--main-50) !important;
}

.bg-main-100 {
    background-color: var(--main-100) !important;
}

.bg-main-200 {
    background-color: var(--main-200) !important;
}

.bg-main-300 {
    background-color: var(--main-300) !important;
}

.bg-main-400 {
    background-color: var(--main-400) !important;
}

.bg-main-500 {
    background-color: var(--main-500) !important;
}

.bg-main-600 {
    background-color: var(--main-600) !important;
}

.bg-main-700 {
    background-color: var(--main-700) !important;
}

.bg-main-800 {
    background-color: var(--main-800) !important;
}

.bg-main-900 {
    background-color: var(--main-900) !important;
}

.bg-main-two-50 {
    background-color: var(--main-two-50) !important;
}

.bg-main-two-100 {
    background-color: var(--main-two-100) !important;
}

.bg-main-two-200 {
    background-color: var(--main-two-200) !important;
}

.bg-main-two-300 {
    background-color: var(--main-two-300) !important;
}

.bg-main-two-400 {
    background-color: var(--main-two-400) !important;
}

.bg-main-two-500 {
    background-color: var(--main-two-500) !important;
}

.bg-main-two-600 {
    background-color: var(--main-two-600) !important;
}

.bg-main-two-700 {
    background-color: var(--main-two-700) !important;
}

.bg-main-two-800 {
    background-color: var(--main-two-800) !important;
}

.bg-main-two-900 {
    background-color: var(--main-two-900) !important;
}

.bg-neutral-50 {
    background-color: var(--neutral-50) !important;
}

.bg-neutral-100 {
    background-color: var(--neutral-100) !important;
}

.bg-neutral-200 {
    background-color: var(--neutral-200) !important;
}

.bg-neutral-300 {
    background-color: var(--neutral-300) !important;
}

.bg-neutral-400 {
    background-color: var(--neutral-400) !important;
}

.bg-neutral-500 {
    background-color: var(--neutral-500) !important;
}

.bg-neutral-600 {
    background-color: var(--neutral-600) !important;
}

.bg-neutral-700 {
    background-color: var(--neutral-700) !important;
}

.bg-neutral-800 {
    background-color: var(--neutral-800) !important;
}

.bg-neutral-900 {
    background-color: var(--neutral-900) !important;
}

.bg-neutral-950 {
    background-color: var(--neutral-950) !important;
}

.bg-neutral-1000 {
    background-color: var(--neutral-1000) !important;
}

.hover-bg-main-40:hover {
    background-color: var(--main-40) !important;
}

.hover-bg-main-50:hover {
    background-color: var(--main-50) !important;
}

.hover-bg-main-100:hover {
    background-color: var(--main-100) !important;
}

.hover-bg-main-200:hover {
    background-color: var(--main-200) !important;
}

.hover-bg-main-300:hover {
    background-color: var(--main-300) !important;
}

.hover-bg-main-400:hover {
    background-color: var(--main-400) !important;
}

.hover-bg-main-500:hover {
    background-color: var(--main-500) !important;
}

.hover-bg-main-600:hover {
    background-color: var(--main-600) !important;
}

.hover-bg-main-700:hover {
    background-color: var(--main-700) !important;
}

.hover-bg-main-800:hover {
    background-color: var(--main-800) !important;
}

.hover-bg-main-900:hover {
    background-color: var(--main-900) !important;
}

.hover-bg-main-two-50:hover {
    background-color: var(--main-two-50) !important;
}

.hover-bg-main-two-100:hover {
    background-color: var(--main-two-100) !important;
}

.hover-bg-main-two-200:hover {
    background-color: var(--main-two-200) !important;
}

.hover-bg-main-two-300:hover {
    background-color: var(--main-two-300) !important;
}

.hover-bg-main-two-400:hover {
    background-color: var(--main-two-400) !important;
}

.hover-bg-main-two-500:hover {
    background-color: var(--main-two-500) !important;
}

.hover-bg-main-two-600:hover {
    background-color: var(--main-two-600) !important;
}

.hover-bg-main-two-700:hover {
    background-color: var(--main-two-700) !important;
}

.hover-bg-main-two-800:hover {
    background-color: var(--main-two-800) !important;
}

.hover-bg-main-two-900:hover {
    background-color: var(--main-two-900) !important;
}

.hover-bg-neutral-50:hover {
    background-color: var(--neutral-50) !important;
}

.hover-bg-neutral-100:hover {
    background-color: var(--neutral-100) !important;
}

.hover-bg-neutral-200:hover {
    background-color: var(--neutral-200) !important;
}

.hover-bg-neutral-300:hover {
    background-color: var(--neutral-300) !important;
}

.hover-bg-neutral-400:hover {
    background-color: var(--neutral-400) !important;
}

.hover-bg-neutral-500:hover {
    background-color: var(--neutral-500) !important;
}

.hover-bg-neutral-600:hover {
    background-color: var(--neutral-600) !important;
}

.hover-bg-neutral-700:hover {
    background-color: var(--neutral-700) !important;
}

.hover-bg-neutral-800:hover {
    background-color: var(--neutral-800) !important;
}

.hover-bg-neutral-900:hover {
    background-color: var(--neutral-900) !important;
}

.hover-bg-neutral-950:hover {
    background-color: var(--neutral-950) !important;
}

.hover-bg-neutral-1000:hover {
    background-color: var(--neutral-1000) !important;
}

.hover-bg-white:hover {
    background-color: hsl(var(--white)) !important;
}

.bg-white-08 {
    background-color: hsl(var(--white)/0.08);
}

.bg-white-13 {
    background-color: hsl(var(--white)/0.13);
}

.bg-white-7 {
    background-color: hsl(var(--white)/0.7);
}

.bg-white-06 {
    background-color: hsl(var(--white)/0.06);
}

.bg-white-54 {
    background-color: #ffffff54;
}

.bg-heading {
    background-color: hsl(var(--heading-color));
}

.bg-red-50 {
    background-color: #fff5e0;
}

.bg-yellow-950 {
    background-color: #292d20;
}

.bg-black-new {
    background-color: #111111;
}

.bg-mint-sky {
    background-color: #dbfff9;
}

.bg-soft-pink {
    background-color: #ffdee4;
}

.bg-lavender-blue {
    background-color: #e3e8ff;
}

.bg-creamy-lemon {
    background-color: #fff3d8;
}

.bg-creamy-lemon {
    background-color: #fff3d8;
}

.bg-linen-white {
    background-color: #fff3d8;
}

.bg-cream-white,
.bg-70-percent::before {
    background-color: #fefaf6;
}

.bg-mint-ice {
    background-color: #F2FFF9;
}

.bg-blue-light,
.bg-half-blue-light::before,
.banner-two {
    background-color: #eef3fe;
}

.hover-bg-red-100:hover {
    background-color: #fbeccb;
}

/* hover bg class end */
.border-main-40 {
    border-color: var(--main-40) !important;
}

.border-main-50 {
    border-color: var(--main-50) !important;
}

.border-main-100 {
    border-color: var(--main-100) !important;
}

.border-main-200 {
    border-color: var(--main-200) !important;
}

.border-main-300 {
    border-color: var(--main-300) !important;
}

.border-main-400 {
    border-color: var(--main-400) !important;
}

.border-main-500 {
    border-color: var(--main-500) !important;
}

.border-main-600 {
    border-color: var(--main-600) !important;
}

.border-main-700 {
    border-color: var(--main-700) !important;
}

.border-main-800 {
    border-color: var(--main-800) !important;
}

.border-main-900 {
    border-color: var(--main-900) !important;
}

.border-main-two-50 {
    border-color: var(--main-two-50) !important;
}

.border-main-two-100 {
    border-color: var(--main-two-100) !important;
}

.border-main-two-200 {
    border-color: var(--main-two-200) !important;
}

.border-main-two-300 {
    border-color: var(--main-two-300) !important;
}

.border-main-two-400 {
    border-color: var(--main-two-400) !important;
}

.border-main-two-500 {
    border-color: var(--main-two-500) !important;
}

.border-main-two-600 {
    border-color: var(--main-two-600) !important;
}

.border-main-two-700 {
    border-color: var(--main-two-700) !important;
}

.border-main-two-800 {
    border-color: var(--main-two-800) !important;
}

.border-main-two-900 {
    border-color: var(--main-two-900) !important;
}

.border-neutral-50 {
    border-color: var(--neutral-50) !important;
}

.border-neutral-100 {
    border-color: var(--neutral-100) !important;
}

.border-neutral-200 {
    border-color: var(--neutral-200) !important;
}

.border-neutral-300 {
    border-color: var(--neutral-300) !important;
}

.border-neutral-400 {
    border-color: var(--neutral-400) !important;
}

.border-neutral-500 {
    border-color: var(--neutral-500) !important;
}

.border-neutral-600 {
    border-color: var(--neutral-600) !important;
}

.border-neutral-700 {
    border-color: var(--neutral-700) !important;
}

.border-neutral-800 {
    border-color: var(--neutral-800) !important;
}

.border-neutral-900 {
    border-color: var(--neutral-900) !important;
}

.border-neutral-950 {
    border-color: var(--neutral-950) !important;
}

.border-neutral-1000 {
    border-color: var(--neutral-1000) !important;
}

.hover-border-main-40:hover {
    border-color: var(--main-40) !important;
}

.hover-border-main-50:hover {
    border-color: var(--main-50) !important;
}

.hover-border-main-100:hover {
    border-color: var(--main-100) !important;
}

.hover-border-main-200:hover {
    border-color: var(--main-200) !important;
}

.hover-border-main-300:hover {
    border-color: var(--main-300) !important;
}

.hover-border-main-400:hover {
    border-color: var(--main-400) !important;
}

.hover-border-main-500:hover {
    border-color: var(--main-500) !important;
}

.hover-border-main-600:hover {
    border-color: var(--main-600) !important;
}

.hover-border-main-700:hover {
    border-color: var(--main-700) !important;
}

.hover-border-main-800:hover {
    border-color: var(--main-800) !important;
}

.hover-border-main-900:hover {
    border-color: var(--main-900) !important;
}

.hover-border-main-two-50:hover {
    border-color: var(--main-two-50) !important;
}

.hover-border-main-two-100:hover {
    border-color: var(--main-two-100) !important;
}

.hover-border-main-two-200:hover {
    border-color: var(--main-two-200) !important;
}

.hover-border-main-two-300:hover {
    border-color: var(--main-two-300) !important;
}

.hover-border-main-two-400:hover {
    border-color: var(--main-two-400) !important;
}

.hover-border-main-two-500:hover {
    border-color: var(--main-two-500) !important;
}

.hover-border-main-two-600:hover {
    border-color: var(--main-two-600) !important;
}

.hover-border-main-two-700:hover {
    border-color: var(--main-two-700) !important;
}

.hover-border-main-two-800:hover {
    border-color: var(--main-two-800) !important;
}

.hover-border-main-two-900:hover {
    border-color: var(--main-two-900) !important;
}

.hover-border-neutral-50:hover {
    border-color: var(--neutral-50) !important;
}

.hover-border-neutral-100:hover {
    border-color: var(--neutral-100) !important;
}

.hover-border-neutral-200:hover {
    border-color: var(--neutral-200) !important;
}

.hover-border-neutral-300:hover {
    border-color: var(--neutral-300) !important;
}

.hover-border-neutral-400:hover {
    border-color: var(--neutral-400) !important;
}

.hover-border-neutral-500:hover {
    border-color: var(--neutral-500) !important;
}

.hover-border-neutral-600:hover {
    border-color: var(--neutral-600) !important;
}

.hover-border-neutral-700:hover {
    border-color: var(--neutral-700) !important;
}

.hover-border-neutral-800:hover {
    border-color: var(--neutral-800) !important;
}

.hover-border-neutral-900:hover {
    border-color: var(--neutral-900) !important;
}

.hover-border-neutral-950:hover {
    border-color: var(--neutral-950) !important;
}

.hover-border-neutral-1000:hover {
    border-color: var(--neutral-1000) !important;
}

.focus-border-main-40:focus {
    border-color: var(--main-40) !important;
}

.focus-border-main-50:focus {
    border-color: var(--main-50) !important;
}

.focus-border-main-100:focus {
    border-color: var(--main-100) !important;
}

.focus-border-main-200:focus {
    border-color: var(--main-200) !important;
}

.focus-border-main-300:focus {
    border-color: var(--main-300) !important;
}

.focus-border-main-400:focus {
    border-color: var(--main-400) !important;
}

.focus-border-main-500:focus {
    border-color: var(--main-500) !important;
}

.focus-border-main-600:focus {
    border-color: var(--main-600) !important;
}

.focus-border-main-700:focus {
    border-color: var(--main-700) !important;
}

.focus-border-main-800:focus {
    border-color: var(--main-800) !important;
}

.focus-border-main-900:focus {
    border-color: var(--main-900) !important;
}

.focus-border-main-two-50:focus {
    border-color: var(--main-two-50) !important;
}

.focus-border-main-two-100:focus {
    border-color: var(--main-two-100) !important;
}

.focus-border-main-two-200:focus {
    border-color: var(--main-two-200) !important;
}

.focus-border-main-two-300:focus {
    border-color: var(--main-two-300) !important;
}

.focus-border-main-two-400:focus {
    border-color: var(--main-two-400) !important;
}

.focus-border-main-two-500:focus {
    border-color: var(--main-two-500) !important;
}

.focus-border-main-two-600:focus {
    border-color: var(--main-two-600) !important;
}

.focus-border-main-two-700:focus {
    border-color: var(--main-two-700) !important;
}

.focus-border-main-two-800:focus {
    border-color: var(--main-two-800) !important;
}

.focus-border-main-two-900:focus {
    border-color: var(--main-two-900) !important;
}

.focus-border-neutral-50:focus {
    border-color: var(--neutral-50) !important;
}

.focus-border-neutral-100:focus {
    border-color: var(--neutral-100) !important;
}

.focus-border-neutral-200:focus {
    border-color: var(--neutral-200) !important;
}

.focus-border-neutral-300:focus {
    border-color: var(--neutral-300) !important;
}

.focus-border-neutral-400:focus {
    border-color: var(--neutral-400) !important;
}

.focus-border-neutral-500:focus {
    border-color: var(--neutral-500) !important;
}

.focus-border-neutral-600:focus {
    border-color: var(--neutral-600) !important;
}

.focus-border-neutral-700:focus {
    border-color: var(--neutral-700) !important;
}

.focus-border-neutral-800:focus {
    border-color: var(--neutral-800) !important;
}

.focus-border-neutral-900:focus {
    border-color: var(--neutral-900) !important;
}

.focus-border-neutral-950:focus {
    border-color: var(--neutral-950) !important;
}

.focus-border-neutral-1000:focus {
    border-color: var(--neutral-1000) !important;
}

.tw-border-dashed {
    border-style: dashed !important;
}

.border-transparent {
    border-color: transparent !important;
}

.border-white-38 {
    border-color: #ffffff61 !important;
}

.border-white-28 {
    border-color: #22222d !important;
}

.border-white-22 {
    border-color: #FFFFFF38 !important;
}

.border-16 {
    border-width: 16px !important;
}

/* Colors class start */
.text-main-40 {
    color: var(--main-40);
}

.text-main-50 {
    color: var(--main-50);
}

.text-main-100 {
    color: var(--main-100);
}

.text-main-200 {
    color: var(--main-200);
}

.text-main-300 {
    color: var(--main-300);
}

.text-main-400 {
    color: var(--main-400);
}

.text-main-500 {
    color: var(--main-500);
}

.text-main-600 {
    color: var(--main-600);
}

.text-main-700 {
    color: var(--main-700);
}

.text-main-800 {
    color: var(--main-800);
}

.text-main-900 {
    color: var(--main-900);
}

.text-main-two-50 {
    color: var(--main-two-50);
}

.text-main-two-100 {
    color: var(--main-two-100);
}

.text-main-two-200 {
    color: var(--main-two-200);
}

.text-main-two-300 {
    color: var(--main-two-300);
}

.text-main-two-400 {
    color: var(--main-two-400);
}

.text-main-two-500 {
    color: var(--main-two-500);
}

.text-main-two-600 {
    color: var(--main-two-600);
}

.text-main-two-700 {
    color: var(--main-two-700);
}

.text-main-two-800 {
    color: var(--main-two-800);
}

.text-main-two-900 {
    color: var(--main-two-900);
}

.text-neutral-50 {
    color: var(--neutral-50);
}

.text-neutral-100 {
    color: var(--neutral-100);
}

.text-neutral-200 {
    color: var(--neutral-200);
}

.text-neutral-300 {
    color: var(--neutral-300);
}

.text-neutral-400 {
    color: var(--neutral-400);
}

.text-neutral-500 {
    color: var(--neutral-500);
}

.text-neutral-600 {
    color: #000;
}

.text-neutral-700 {
    color: var(--neutral-700);
}

.text-neutral-800 {
    color: var(--neutral-800);
}

.text-neutral-900 {
    color: var(--neutral-900);
}

.text-neutral-950 {
    color: var(--neutral-950);
}

.text-neutral-1000 {
    color: var(--neutral-1000);
}

.text--white {
    color: hsl(var(--white));
}

.text-heading {
    color: hsl(var(--heading-color));
}

.text-body {
    color: hsl(var(--body-color));
}

.text-main {
    color: var(--main-600);
}

.text-yellow {
    color: #ecbb37;
}

.text-stroke {
    color: transparent;
    -webkit-text-stroke: 2px hsl(var(--heading-color));
}

.text-stroke:hover {
    color: hsl(var(--heading-color));
    -webkit-text-stroke: 2px hsl(var(--heading-color));
}

.text-stroke-white {
    color: transparent;
    -webkit-text-stroke: 2px hsl(var(--white));
}

.text-stroke-white:hover {
    color: hsl(var(--white));
    -webkit-text-stroke: 2px hsl(var(--white));
}

.text-white-8 {
    color: hsl(var(--white)/0.8);
}

.text-white-15 {
    color: #FFFFFF26;
}

/* Colors class End */
/* Hover color class start */
.hover-text-main-40:hover {
    color: var(--main-40) !important;
}

.hover-text-main-50:hover {
    color: var(--main-50) !important;
}

.hover-text-main-100:hover {
    color: var(--main-100) !important;
}

.hover-text-main-200:hover {
    color: var(--main-200) !important;
}

.hover-text-main-300:hover {
    color: var(--main-300) !important;
}

.hover-text-main-400:hover {
    color: var(--main-400) !important;
}

.hover-text-main-500:hover {
    color: var(--main-500) !important;
}

.hover-text-main-600:hover {
    color: var(--main-600) !important;
}

.hover-text-main-700:hover {
    color: var(--main-700) !important;
}

.hover-text-main-800:hover {
    color: var(--main-800) !important;
}

.hover-text-main-900:hover {
    color: var(--main-900) !important;
}

.hover-text-main-two-50:hover {
    color: var(--main-two-50) !important;
}

.hover-text-main-two-100:hover {
    color: var(--main-two-100) !important;
}

.hover-text-main-two-200:hover {
    color: var(--main-two-200) !important;
}

.hover-text-main-two-300:hover {
    color: var(--main-two-300) !important;
}

.hover-text-main-two-400:hover {
    color: var(--main-two-400) !important;
}

.hover-text-main-two-500:hover {
    color: var(--main-two-500) !important;
}

.hover-text-main-two-600:hover {
    color: var(--main-two-600) !important;
}

.hover-text-main-two-700:hover {
    color: var(--main-two-700) !important;
}

.hover-text-main-two-800:hover {
    color: var(--main-two-800) !important;
}

.hover-text-main-two-900:hover {
    color: var(--main-two-900) !important;
}

.hover-text-neutral-50:hover {
    color: var(--neutral-50) !important;
}

.hover-text-neutral-100:hover {
    color: var(--neutral-100) !important;
}

.hover-text-neutral-200:hover {
    color: var(--neutral-200) !important;
}

.hover-text-neutral-300:hover {
    color: var(--neutral-300) !important;
}

.hover-text-neutral-400:hover {
    color: var(--neutral-400) !important;
}

.hover-text-neutral-500:hover {
    color: var(--neutral-500) !important;
}

.hover-text-neutral-600:hover {
    color: var(--neutral-600) !important;
}

.hover-text-neutral-700:hover {
    color: var(--neutral-700) !important;
}

.hover-text-neutral-800:hover {
    color: var(--neutral-800) !important;
}

.hover-text-neutral-900:hover {
    color: var(--neutral-900) !important;
}

.hover-text-neutral-950:hover {
    color: var(--neutral-950) !important;
}

.hover-text-neutral-1000:hover {
    color: var(--neutral-1000) !important;
}

/* Text Color */
.hover-text-white:hover {
    color: #fff !important;
}

.hover-text-heading:hover {
    color: hsl(var(--heading-color)) !important;
}

.hover-text-body:hover {
    color: hsl(var(--body-color)) !important;
}

/* Hover color class end */
.cursor-pointer {
    cursor: pointer;
}

.cursor-grab {
    cursor: grab;
}

.focus-outline-0:focus-visible,
.focus-outline-0:focus {
    outline: 0 !important;
}

/* ================================= Classes Css Start =========================== */
@media screen and (min-width: 425px) and (max-width: 575px) {
    .col-xs-6 {
        width: 50%;
    }
}

.tw-leading-none {
    line-height: 1 !important;
}

.tw-leading-14 {
    line-height: 1.4;
}

.opacity-05 {
    opacity: 0.05;
}

.opacity-1 {
    opacity: 0.1;
}

.aspect-ratio-1 {
    aspect-ratio: 1;
}

.filter-blur-20-px {
    filter: blur(20px);
}

.letter-spacing--10-px {
    letter-spacing: -10px;
}

.translate-y-48-px {
    transform: translateY(48px);
}

@media (min-width: 576px) {
    .translate-y--60-px {
        transform: translateY(60px);
    }
}

.backdrop-filter-26-px {
    backdrop-filter: blur(26px);
}

.line-height-11 {
    line-height: 1.125 !important;
}

/* ================================= Classes Css End =========================== */
/* element double animation css start */
.element-double-animation {
    position: relative;
    overflow: hidden;
}

.element-double-animation__element {
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
    -webkit-transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.element-double-animation__element::after {
    content: attr(data-content);
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 100%;
    color: inherit;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
    -webkit-transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.element-double-animation .hover-element-main-two-600::after {
    color: var(--main-two-600);
}

.element-double-animation:hover .element-double-animation__element {
    transform: translateY(-100%);
}

.element-double-animation:hover .element-double-animation__element::after {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
}

/* element double animation css end */
/* Font Size Class Start */
.text-inherit {
    font-size: inherit;
}

.text-22-px {
    font-size: clamp(1rem, -0.5476rem + 5.5679vw, 1.375rem);
}

.text-84-px {
    font-size: clamp(2.125rem, -0.5476rem + 5.5679vw, 5.25rem);
}

.text-64-px {
    font-size: 4rem;
}

.text-58-px {
    font-size: clamp(1.5rem, -0.9423rem + 4.5673vw, 3.625rem);
}

.text-36-px {
    font-size: 2.5rem;
}

.text-42-px {
    font-size: clamp(1.5rem, 0.4615rem + 2.1635vw, 2.625rem);
}

.text-48-px {
    font-size: clamp(1.5rem, 3.2246rem - 0.2246vw, 3rem);
}

.text-200-px {
    font-size: clamp(4.75rem, 2.3026rem + 10.8772vw, 12.5rem) !important;
}

@media (min-width: 1200px) and (max-width: 1350px) {
    .text-200-px {
        font-size: 9.25rem !important;
    }
}

.text-120-px {
    font-size: clamp(3rem, 1.5789rem + 6.3158vw, 7.5rem) !important;
}

.tw-text-xs {
    font-size: 0.75rem;
}

.tw-text-sm {
    font-size: 0.875rem;
}

.tw-text-base {
    font-size: 1rem;
}

.tw-text-lg {
    font-size: 1.125rem;
}

.tw-text-xl {
    font-size: 1.25rem;
}

.tw-text-2xl {
    font-size: 1.5rem;
}

.tw-text-3xl {
    font-size: 1.875rem;
}

/* Font Size Class End */
.tw-text-05 {
    font-size: 0.125rem;
}

.tw-text-1 {
    font-size: 0.25rem;
}

.tw-text-105 {
    font-size: 0.375rem;
}

.tw-text-2 {
    font-size: 0.5rem;
}

.tw-text-205 {
    font-size: 0.625rem;
}

.tw-text-3 {
    font-size: 0.75rem;
}

.tw-text-305 {
    font-size: 0.875rem;
}

.tw-text-4 {
    font-size: 1rem;
}

.tw-text-405 {
    font-size: 1.125rem;
}

.tw-text-5 {
    font-size: 1.25rem;
}

.tw-text-505 {
    font-size: 1.375rem;
}

.tw-text-6 {
    font-size: 1.5rem;
}

.tw-text-605 {
    font-size: 1.625rem;
}

.tw-text-7 {
    font-size: 1.75rem;
}

.tw-text-705 {
    font-size: 1.875rem;
}

.tw-text-8 {
    font-size: 2rem;
}

.tw-text-9 {
    font-size: 2.25rem;
}

.tw-text-10 {
    font-size: 2.5rem;
}

.tw-text-11 {
    font-size: 2.75rem;
}

.tw-text-12 {
    font-size: 3rem;
}

.tw-text-13 {
    font-size: 3.25rem;
}

.tw-text-14 {
    font-size: 3.5rem;
}

.tw-text-15 {
    font-size: 3.75rem;
}

.tw-text-16 {
    font-size: 4rem;
}

.tw-text-17 {
    font-size: 4.25rem;
}

/* Font Size Class End */
.font-heading {
    font-family: var(--heading-font);
}

.font-body {
    font-family: var(--body-font);
}

.font-playfair {
    font-family: var(--playfair-font);
    padding-left: 8px;
}

.font-big-shoulders {
    font-family: var(--big-shoulders-font);
}

.text-balance {
    text-wrap: balance;
}

.writing-mode-lr {
    writing-mode: sideways-lr;
}

/* Gradient BG & Overlay start */
.gradient-overlay-1 {
    position: relative;
    z-index: 1;
}

.gradient-overlay-1::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: -1;
    background: linear-gradient(179.9deg, rgba(13, 16, 23, 0) -1.34%, rgba(13, 16, 23, 0.8) 72.25%);
}

.gradient-overlay-1.z-index-1::before {
    z-index: unset;
}

/* Gradient BG & Overlay End */
/* Height Css Class Start */
.tw-h-05 {
    height: 0.125rem;
}

.tw-h-1 {
    height: 0.25rem;
}

.tw-h-105 {
    height: 0.375rem;
}

.tw-h-2 {
    height: 0.5rem;
}

.tw-h-205 {
    height: 0.625rem;
}

.tw-h-3 {
    height: 0.75rem;
}

.tw-h-305 {
    height: 0.875rem;
}

.tw-h-4 {
    height: 1rem;
}

.tw-h-405 {
    height: 1.125rem;
}

.tw-h-5 {
    height: 1.25rem;
}

.tw-h-505 {
    height: 1.375rem;
}

.tw-h-6 {
    height: 1.5rem;
}

.tw-h-605 {
    height: 1.625rem;
}

.tw-h-7 {
    height: 1.75rem;
}

.tw-h-705 {
    height: 1.875rem;
}

.tw-h-8 {
    height: 2rem;
}

.tw-h-9 {
    height: 2.25rem;
}

.tw-h-10 {
    height: 2.5rem;
}

.tw-h-11 {
    height: 2.75rem;
}

.tw-h-12 {
    height: 3rem;
}

.tw-h-13 {
    height: 3.25rem;
}

.tw-h-14 {
    height: 3.5rem;
}

.tw-h-15 {
    height: 3.75rem;
}

.tw-h-16 {
    height: 4rem;
}

.tw-h-17 {
    height: 4.25rem;
}

.tw-h-px {
    height: 1px;
}

.tw-h-screen {
    height: 100vh;
}

.tw-h-75-px {
    height: 75px;
}

.tw-h-84-px {
    height: 84px;
}

.tw-h-92-px {
    height: 92px;
}

.tw-h-96-px {
    height: 96px;
}

.tw-h-120-px {
    height: 120px;
}

.tw-h-160-px {
    height: 160px;
}

.tw-h-104-px {
    height: 104px;
}

.tw-h-320-px {
    height: 320px;
}

.tw-h-390-px {
    height: 390px;
}

.tw-h-402-px {
    height: 402px;
}

.tw-h-440-px {
    height: 440px;
}

.tw-h-732-px {
    height: 732px;
}

.tw-h-876-px {
    height: 876px;
}

.tw-min-h-150-px {
    min-height: 150px;
}

.tw-min-h-184-px {
    min-height: 184px;
}

.tw-min-h-210-px {
    min-height: 210px !important;
}

/* Height Css Class End */
/* Hover animation white css start */
.hover-animation-white {
    position: relative;
    overflow: hidden;
}

.hover-animation-white:after {
    content: "";
    position: absolute;
    width: 250%;
    height: 0%;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.hover-animation-white:hover:after {
    height: 250%;
    transition: all 0.6s linear;
    background-color: transparent;
}

/* Hover animation white css end */
/* image double animation css start */
.image-double-animation {
    position: relative;
    overflow: hidden;
}

.image-double-animation__element {
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.image-double-animation__element:first-child {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    -webkit-transform: translateX(50%) scaleX(2);
    transform: translateX(50%) scaleX(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.image-double-animation:hover .image-double-animation__element:first-child {
    -webkit-transform: translateX(0) scaleX(1);
    transform: translateX(0) scaleX(1);
    opacity: 1;
    -webkit-filter: blur(0);
    filter: blur(0);
}

.image-double-animation:hover .image-double-animation__element:nth-child(2) {
    -webkit-transform: translateX(-50%) scaleX(2);
    transform: translateX(-50%) scaleX(2);
    opacity: 0;
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

/* image double animation css end */
/* Gap Css start */
.tw-gap-05 {
    gap: var(--size-05);
}

.tw-gap-1 {
    gap: var(--size-1);
}

.tw-gap-105 {
    gap: var(--size-105);
}

.tw-gap-2 {
    gap: var(--size-2);
}

.tw-gap-205 {
    gap: var(--size-205);
}

.tw-gap-3 {
    gap: var(--size-3);
}

.tw-gap-305 {
    gap: var(--size-305);
}

.tw-gap-4 {
    gap: var(--size-4);
}

.tw-gap-405 {
    gap: var(--size-405);
}

.tw-gap-5 {
    gap: var(--size-5);
}

.tw-gap-505 {
    gap: var(--size-505);
}

.tw-gap-6 {
    gap: var(--size-6);
}

.tw-gap-605 {
    gap: var(--size-605);
}

.tw-gap-7 {
    gap: var(--size-7);
}

.tw-gap-705 {
    gap: var(--size-705);
}

.tw-gap-8 {
    gap: var(--size-8);
}

.tw-gap-9 {
    gap: var(--size-9);
}

.tw-gap-10 {
    gap: var(--size-10);
}

.tw-gap-11 {
    gap: var(--size-11);
}

.tw-gap-12 {
    gap: var(--size-12);
}

.tw-gap-13 {
    gap: var(--size-13);
}

.tw-gap-14 {
    gap: var(--size-14);
}

.tw-gap-15 {
    gap: var(--size-15);
}

.tw-gap-16 {
    gap: var(--size-16);
}

.tw-gap-17 {
    gap: var(--size-17);
}

.tw-gap-26-px {
    gap: clamp(1rem, 0.0938rem + 4.5vw, 1.625rem);
}

.tw-gap-42-px {
    gap: clamp(1.5rem, 0.0938rem + 4.5vw, 2.625rem);
}

.tw-gap-52-px {
    gap: clamp(1.5rem, -4.48rem + 7.98vw, 3.25rem);
}

.tw-gap-56-px {
    gap: clamp(1.5rem, -4.48rem + 7.98vw, 3.5rem);
}

.tw-gap-64-px {
    gap: clamp(1.5rem, -5rem + 8vw, 4rem);
}

.tw-gap-74-px {
    gap: clamp(1.5rem, -24.8393rem + 28.0952vw, 4.625rem);
}

.tw-gap-92-px {
    gap: clamp(2rem, -24.8393rem + 28.0952vw, 5.75rem);
}

.g-40-px,
.gy-40-px {
    --bs-gutter-y: 40px;
}

.g-90-px {
    --bs-gutter-y: 3rem;
    --bs-gutter-y: 90px;
    --bs-gutter-x: 90px;
}

/* Gap Css end */
/* ======================== Group Css Start =============================== */
.group:hover .group-hover-text-white {
    color: hsl(var(--white)) !important;
}

.group:hover .group-hover-text-main-600 {
    color: var(--main-600) !important;
}

.group:hover .group-hover-text-main-two-600 {
    color: var(--main-two-600) !important;
}

.group:hover .group-hover-text-heading {
    color: hsl(var(--heading-color)) !important;
}

.group:hover .group-hover-bg-white {
    background-color: hsl(var(--white)) !important;
}

.group:hover .group-hover-bg-main-600 {
    background-color: var(--main-600) !important;
}

.group:hover .group-hover-border-main-two-600 {
    border-color: var(--main-two-600) !important;
}

.group-hover-text-transition {
    transition: inherit;
}

.tw-invisible {
    visibility: hidden;
}

.invert {
    filter: invert(100%);
}

.group-item:hover .group-hover-item-visible {
    visibility: visible;
}

.group-item:hover .group-hover-item-opacity-1 {
    opacity: 1 !important;
}

.group-item:hover .group-hover-item-mt-0 {
    margin-top: 0;
}

.group-item:hover .group-hover-item-scale-12 {
    transform: scale(1.2);
}

.group-item:hover .group-hover-item-scale-1 {
    transform: scale(1);
}

.group-item:hover .group-hover-item-rotate-45-deg {
    transform: translateY(-3px) rotate(-35deg);
}

.group-item:hover .group-hover-item-rotate-0-deg {
    transform: rotate(0deg);
}

.group-item:hover .group-hover-item-translate-x-0 {
    transform: translateX(0);
}

.group-item:hover .group-hover-item-d-block {
    display: block !important;
}

.group-item:hover .group-hover-item-d-none {
    display: none !important;
}

.group-item:hover .group-hover-item-text-invert-white {
    filter: brightness(0) invert(1);
}

.group-item:hover .group-hover-item-text-invert-black {
    filter: brightness(0) invert(0);
}

.text-invert-white {
    filter: brightness(0) invert(1);
}

/* ======================== Group Css End =============================== */
/* grid css start */
.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
}

@media (min-width: 425px) {
    .xs-grid-cols-2 {
        grid-template-columns: 1fr 1fr;
    }
}

.grid-col-5 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

/* grid css end */
/* Inset class start */
.tw-start-0 {
    inset-inline-start: 0;
}

.tw-start-50 {
    inset-inline-start: 50%;
}

.tw-start-100 {
    inset-inline-start: 100%;
}

.tw-start-auto {
    inset-inline-start: auto;
}

.tw-end-0 {
    inset-inline-end: 0;
}

.tw-end-100 {
    inset-inline-end: 100%;
}

.tw-end-auto {
    inset-inline-end: auto;
}

/* Inset class End */
/* Line Clamp start */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
}

/* Line Clamp End */
/* ================================= Margin Css Start =========================== */
.tw-m-05 {
    margin: var(--size-05);
}

.tw-m-1 {
    margin: var(--size-1);
}

.tw-m-105 {
    margin: var(--size-105);
}

.tw-m-2 {
    margin: var(--size-2);
}

.tw-m-205 {
    margin: var(--size-205);
}

.tw-m-3 {
    margin: var(--size-3);
}

.tw-m-305 {
    margin: var(--size-305);
}

.tw-m-4 {
    margin: var(--size-4);
}

.tw-m-405 {
    margin: var(--size-405);
}

.tw-m-5 {
    margin: var(--size-5);
}

.tw-m-505 {
    margin: var(--size-505);
}

.tw-m-6 {
    margin: var(--size-6);
}

.tw-m-605 {
    margin: var(--size-605);
}

.tw-m-7 {
    margin: var(--size-7);
}

.tw-m-705 {
    margin: var(--size-705);
}

.tw-m-8 {
    margin: var(--size-8);
}

.tw-m-9 {
    margin: var(--size-9);
}

.tw-m-10 {
    margin: var(--size-10);
}

.tw-m-11 {
    margin: var(--size-11);
}

.tw-m-12 {
    margin: var(--size-12);
}

.tw-m-13 {
    margin: var(--size-13);
}

.tw-m-14 {
    margin: var(--size-14);
}

.tw-m-15 {
    margin: var(--size-15);
}

.tw-m-16 {
    margin: var(--size-16);
}

.tw-m-17 {
    margin: var(--size-17);
}

.tw-mx-05 {
    margin-inline: var(--size-05);
}

.tw-mx-1 {
    margin-inline: var(--size-1);
}

.tw-mx-105 {
    margin-inline: var(--size-105);
}

.tw-mx-2 {
    margin-inline: var(--size-2);
}

.tw-mx-205 {
    margin-inline: var(--size-205);
}

.tw-mx-3 {
    margin-inline: var(--size-3);
}

.tw-mx-305 {
    margin-inline: var(--size-305);
}

.tw-mx-4 {
    margin-inline: var(--size-4);
}

.tw-mx-405 {
    margin-inline: var(--size-405);
}

.tw-mx-5 {
    margin-inline: var(--size-5);
}

.tw-mx-505 {
    margin-inline: var(--size-505);
}

.tw-mx-6 {
    margin-inline: var(--size-6);
}

.tw-mx-605 {
    margin-inline: var(--size-605);
}

.tw-mx-7 {
    margin-inline: var(--size-7);
}

.tw-mx-705 {
    margin-inline: var(--size-705);
}

.tw-mx-8 {
    margin-inline: var(--size-8);
}

.tw-mx-9 {
    margin-inline: var(--size-9);
}

.tw-mx-10 {
    margin-inline: var(--size-10);
}

.tw-mx-11 {
    margin-inline: var(--size-11);
}

.tw-mx-12 {
    margin-inline: var(--size-12);
}

.tw-mx-13 {
    margin-inline: var(--size-13);
}

.tw-mx-14 {
    margin-inline: var(--size-14);
}

.tw-mx-15 {
    margin-inline: var(--size-15);
}

.tw-mx-16 {
    margin-inline: var(--size-16);
}

.tw-mx-17 {
    margin-inline: var(--size-17);
}

.tw-my-05 {
    margin-block: var(--size-05);
}

.tw-my-1 {
    margin-block: var(--size-1);
}

.tw-my-105 {
    margin-block: var(--size-105);
}

.tw-my-2 {
    margin-block: var(--size-2);
}

.tw-my-205 {
    margin-block: var(--size-205);
}

.tw-my-3 {
    margin-block: var(--size-3);
}

.tw-my-305 {
    margin-block: var(--size-305);
}

.tw-my-4 {
    margin-block: var(--size-4);
}

.tw-my-405 {
    margin-block: var(--size-405);
}

.tw-my-5 {
    margin-block: var(--size-5);
}

.tw-my-505 {
    margin-block: var(--size-505);
}

.tw-my-6 {
    margin-block: var(--size-6);
}

.tw-my-605 {
    margin-block: var(--size-605);
}

.tw-my-7 {
    margin-block: var(--size-7);
}

.tw-my-705 {
    margin-block: var(--size-705);
}

.tw-my-8 {
    margin-block: var(--size-8);
}

.tw-my-9 {
    margin-block: var(--size-9);
}

.tw-my-10 {
    margin-block: var(--size-10);
}

.tw-my-11 {
    margin-block: var(--size-11);
}

.tw-my-12 {
    margin-block: var(--size-12);
}

.tw-my-13 {
    margin-block: var(--size-13);
}

.tw-my-14 {
    margin-block: var(--size-14);
}

.tw-my-15 {
    margin-block: var(--size-15);
}

.tw-my-16 {
    margin-block: var(--size-16);
}

.tw-my-17 {
    margin-block: var(--size-17);
}

.tw-ms-05 {
    margin-inline-start: var(--size-05);
}

.tw-ms-1 {
    margin-inline-start: var(--size-1);
}

.tw-ms-105 {
    margin-inline-start: var(--size-105);
}

.tw-ms-2 {
    margin-inline-start: var(--size-2);
}

.tw-ms-205 {
    margin-inline-start: var(--size-205);
}

.tw-ms-3 {
    margin-inline-start: var(--size-3);
}

.tw-ms-305 {
    margin-inline-start: var(--size-305);
}

.tw-ms-4 {
    margin-inline-start: var(--size-4);
}

.tw-ms-405 {
    margin-inline-start: var(--size-405);
}

.tw-ms-5 {
    margin-inline-start: var(--size-5);
}

.tw-ms-505 {
    margin-inline-start: var(--size-505);
}

.tw-ms-6 {
    margin-inline-start: var(--size-6);
}

.tw-ms-605 {
    margin-inline-start: var(--size-605);
}

.tw-ms-7 {
    margin-inline-start: var(--size-7);
}

.tw-ms-705 {
    margin-inline-start: var(--size-705);
}

.tw-ms-8 {
    margin-inline-start: var(--size-8);
}

.tw-ms-9 {
    margin-inline-start: var(--size-9);
}

.tw-ms-10 {
    margin-inline-start: var(--size-10);
}

.tw-ms-11 {
    margin-inline-start: var(--size-11);
}

.tw-ms-12 {
    margin-inline-start: var(--size-12);
}

.tw-ms-13 {
    margin-inline-start: var(--size-13);
}

.tw-ms-14 {
    margin-inline-start: var(--size-14);
}

.tw-ms-15 {
    margin-inline-start: var(--size-15);
}

.tw-ms-16 {
    margin-inline-start: var(--size-16);
}

.tw-ms-17 {
    margin-inline-start: var(--size-17);
}

.tw-me-05 {
    margin-inline-end: var(--size-05);
}

.tw-me-1 {
    margin-inline-end: var(--size-1);
}

.tw-me-105 {
    margin-inline-end: var(--size-105);
}

.tw-me-2 {
    margin-inline-end: var(--size-2);
}

.tw-me-205 {
    margin-inline-end: var(--size-205);
}

.tw-me-3 {
    margin-inline-end: var(--size-3);
}

.tw-me-305 {
    margin-inline-end: var(--size-305);
}

.tw-me-4 {
    margin-inline-end: var(--size-4);
}

.tw-me-405 {
    margin-inline-end: var(--size-405);
}

.tw-me-5 {
    margin-inline-end: var(--size-5);
}

.tw-me-505 {
    margin-inline-end: var(--size-505);
}

.tw-me-6 {
    margin-inline-end: var(--size-6);
}

.tw-me-605 {
    margin-inline-end: var(--size-605);
}

.tw-me-7 {
    margin-inline-end: var(--size-7);
}

.tw-me-705 {
    margin-inline-end: var(--size-705);
}

.tw-me-8 {
    margin-inline-end: var(--size-8);
}

.tw-me-9 {
    margin-inline-end: var(--size-9);
}

.tw-me-10 {
    margin-inline-end: var(--size-10);
}

.tw-me-11 {
    margin-inline-end: var(--size-11);
}

.tw-me-12 {
    margin-inline-end: var(--size-12);
}

.tw-me-13 {
    margin-inline-end: var(--size-13);
}

.tw-me-14 {
    margin-inline-end: var(--size-14);
}

.tw-me-15 {
    margin-inline-end: var(--size-15);
}

.tw-me-16 {
    margin-inline-end: var(--size-16);
}

.tw-me-17 {
    margin-inline-end: var(--size-17);
}

.tw-mt-05 {
    margin-block-start: var(--size-05);
}

.tw-mt-1 {
    margin-block-start: var(--size-1);
}

.tw-mt-105 {
    margin-block-start: var(--size-105);
}

.tw-mt-2 {
    margin-block-start: var(--size-2);
}

.tw-mt-205 {
    margin-block-start: var(--size-205);
}

.tw-mt-3 {
    margin-block-start: var(--size-3);
}

.tw-mt-305 {
    margin-block-start: var(--size-305);
}

.tw-mt-4 {
    margin-block-start: var(--size-4);
}

.tw-mt-405 {
    margin-block-start: var(--size-405);
}

.tw-mt-5 {
    margin-block-start: var(--size-5);
}

.tw-mt-505 {
    margin-block-start: var(--size-505);
}

.tw-mt-6 {
    margin-block-start: var(--size-6);
}

.tw-mt-605 {
    margin-block-start: var(--size-605);
}

.tw-mt-7 {
    margin-block-start: var(--size-7);
}

.tw-mt-705 {
    margin-block-start: var(--size-705);
}

.tw-mt-8 {
    margin-block-start: var(--size-8);
}

.tw-mt-9 {
    margin-block-start: var(--size-9);
}

.tw-mt-10 {
    margin-block-start: var(--size-10);
}

.tw-mt-11 {
    margin-block-start: var(--size-11);
}

.tw-mt-12 {
    margin-block-start: var(--size-12);
}

.tw-mt-13 {
    margin-block-start: var(--size-13);
}

.tw-mt-14 {
    margin-block-start: var(--size-14);
}

.tw-mt-15 {
    margin-block-start: var(--size-15);
}

.tw-mt-16 {
    margin-block-start: var(--size-16);
}

.tw-mt-17 {
    margin-block-start: var(--size-17);
}

.tw-mb-05 {
    margin-block-end: var(--size-05);
}

.tw-mb-1 {
    margin-block-end: var(--size-1);
}

.tw-mb-105 {
    margin-block-end: var(--size-105);
}

.tw-mb-2 {
    margin-block-end: var(--size-2);
}

.tw-mb-205 {
    margin-block-end: var(--size-205);
}

.tw-mb-3 {
    margin-block-end: var(--size-3);
}

.tw-mb-305 {
    margin-block-end: var(--size-305);
}

.tw-mb-4 {
    margin-block-end: var(--size-4);
}

.tw-mb-405 {
    margin-block-end: var(--size-405);
}

.tw-mb-5 {
    margin-block-end: var(--size-5);
}

.tw-mb-505 {
    margin-block-end: var(--size-505);
}

.tw-mb-6 {
    margin-block-end: var(--size-6);
}

.tw-mb-605 {
    margin-block-end: var(--size-605);
}

.tw-mb-7 {
    margin-block-end: var(--size-7);
}

.tw-mb-705 {
    margin-block-end: var(--size-705);
}

.tw-mb-8 {
    margin-block-end: var(--size-8);
}

.tw-mb-9 {
    margin-block-end: var(--size-9);
}

.tw-mb-10 {
    margin-block-end: var(--size-10);
}

.tw-mb-11 {
    margin-block-end: var(--size-11);
}

.tw-mb-12 {
    margin-block-end: var(--size-12);
}

.tw-mb-13 {
    margin-block-end: var(--size-13);
}

.tw-mb-14 {
    margin-block-end: var(--size-14);
}

.tw-mb-15 {
    margin-block-end: var(--size-15);
}

.tw-mb-16 {
    margin-block-end: var(--size-16);
}

.tw-mb-17 {
    margin-block-end: var(--size-17);
}

.tw-ms-auto {
    margin-inline-start: auto;
}

.tw-me-auto {
    margin-inline-end: auto;
}

.tw-me-250-px {
    margin-inline-end: 250px;
}

.tw--ms-20-px {
    margin-inline-start: -20px;
}

.tw--ms-160-px {
    margin-inline-start: -160px;
}

.tw--me-80-px {
    margin-inline-end: -80px;
}

.tw--mt-20-px {
    margin-block-start: -20px;
}

.tw--mt-26-px {
    margin-block-start: -26px;
}

.tw--mt-30-px {
    margin-block-start: -30px;
}

@media (min-width: 576px) {
    .tw--mt-32-px {
        margin-block-start: -32px;
    }
}

.tw--mt-160-px {
    margin-block-start: -160px;
}

.tw-mb-132-px {
    margin-block-end: clamp(3rem, -2.5082rem + 11.4754vw, 8.25rem);
}

.tw-mb-78-px {
    margin-block-end: 78px;
}

.tw-mt-10-percent {
    margin-block-start: 10%;
}

.tw-ms-10-percent {
    margin-inline-start: 10%;
}

.tw-ms-100-px {
    margin-inline-start: clamp(1.5rem, -2.8846rem + 9.1346vw, 6.25rem);
}

.tw--me-7-percent {
    margin-inline-end: -7%;
}

.tw--mb-12-percent {
    margin-block-end: -12%;
}

.tw--mb-70-px {
    margin-block-end: -70px;
}

.my-120 {
    margin-block-start: 60px;
    margin-block-end: 60px;
}

@media (min-width: 576px) {
    .my-120 {
        margin-block-start: 80px;
        margin-block-end: 80px;
    }
}

@media (min-width: 992px) {
    .my-120 {
        margin-block-start: 120px;
        margin-block-end: 120px;
    }
}

.mt-120 {
    margin-block-start: 60px;
}

@media (min-width: 576px) {
    .mt-120 {
        margin-block-start: 80px;
    }
}

@media (min-width: 992px) {
    .mt-120 {
        margin-block-start: 120px;
    }
}

.mb-120 {
    margin-block-end: 60px;
}

@media (min-width: 576px) {
    .mb-120 {
        margin-block-end: 80px;
    }
}

@media (min-width: 992px) {
    .mb-120 {
        margin-block-end: 120px;
    }
}

.mt-60 {
    margin-block-start: 30px;
}

@media (min-width: 576px) {
    .mt-60 {
        margin-block-start: 40px;
    }
}

@media (min-width: 992px) {
    .mt-60 {
        margin-block-start: 60px;
    }
}

.mb-60 {
    margin-block-end: 30px;
}

@media (min-width: 576px) {
    .mb-60 {
        margin-block-end: 40px;
    }
}

@media (min-width: 992px) {
    .mb-60 {
        margin-block-end: 60px;
    }
}

.tw-mb-100-px {
    margin-bottom: 100px;
}

@media (max-width: 1199px) {
    .tw-mb-100-px {
        margin-bottom: 80px;
    }
}

@media (max-width: 992px) {
    .tw-mb-100-px {
        margin-bottom: 60px;
    }
}

@media (max-width: 768px) {
    .tw-mb-100-px {
        margin-bottom: 40px;
    }
}

/* ================================= Margin Css End =========================== */
/* Max Height Css Class Start */
.tw-max-h-screen {
    max-height: 100vh;
}

.tw-max-h-266-px {
    max-height: 266px;
}

.tw-max-h-250-px {
    max-height: 250px;
}

.tw-max-h-376-px {
    max-height: 376px;
}

.tw-max-h-440-px {
    max-height: 440px;
}

/* Max Height Css Class End */
/* Max width Css Class Start */
.max-w-200-px {
    max-width: 200px;
}

.max-w-1680-px {
    max-width: 1680px;
}

.max-w-1700-px {
    max-width: 1700px;
}

.max-w-1710-px {
    max-width: 1710px;
}

.max-w-1854-px {
    max-width: 1854px;
}

.max-w-114-px {
    max-width: 114px;
}

.max-w-214-px {
    max-width: 214px;
}

.max-w-250-px {
    max-width: 250px;
}

.max-w-266-px {
    max-width: 266px;
}

.max-w-346-px {
    max-width: 346px;
}

.max-w-430-px {
    max-width: 430px;
}

.max-w-440-px {
    max-width: 440px;
}

.max-w-770-px {
    max-width: 770px;
}

.max-w-400-px {
    max-width: 400px;
}

.max-w-330-px {
    max-width: 330px;
}

.max-w-576-px {
    max-width: 576px;
}

.max-w-1140-px {
    max-width: 1140px;
}

.max-w-1290-px {
    max-width: 1290px;
}

.max-w-1520-px {
    max-width: 1520px;
}

.max-w-1550-px {
    max-width: 1550px;
}

.max-w-1720-px {
    max-width: 1720px;
}

.max-w-1790-px {
    max-width: 1790px;
}

.max-w-630-px {
    max-width: 630px;
}

.max-w-680-px {
    max-width: 680px;
}

.max-w-780-px {
    max-width: 780px;
}

.max-w-410-px {
    max-width: 410px;
}

.max-w-590-px {
    max-width: 590px;
}

.max-w-845-px {
    max-width: 845px;
}

.max-w-890-px {
    max-width: 890px;
}

.max-w-960-px {
    max-width: 960px;
}

.max-w-1030-px {
    max-width: 1030px;
}

.max-w-455-px {
    max-width: 455px;
}

.max-w-510-px {
    max-width: 510px;
}

.max-w-550-px {
    max-width: 550px;
}

.max-w-280-px {
    max-width: 280px;
}

/* Max width Css Class End */
/* Overlay Start */
.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    content: "";
    inset-inline-start: 0;
    inset-block-start: 0;
    background-color: #000000bd;
    z-index: 99;
    transition: 0.2s linear;
    visibility: hidden;
    opacity: 0;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==), progress;
}

.overlay.show-overlay {
    visibility: visible;
    opacity: 1;
}

.side-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    content: "";
    inset-inline-start: 0;
    inset-block-start: 0;
    background-color: #000000bd;
    z-index: 999;
    transition: 0.2s linear;
    visibility: hidden;
    opacity: 0;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVBAMAAABbObilAAAAMFBMVEVMaXH////////////////////////////////////////////////////////////6w4mEAAAAD3RSTlMAlAX+BKLcA5+b6hJ7foD4ZP1OAAAAkUlEQVR4XkWPoQ3CUBQAL4SktoKAbCUjgAKLJZ2ABYosngTJCHSD6joUI6BZgqSoB/+Shqde7sS9x3OGk81fdO+texMtRVTia+TsQtHEUJLdohJfgNNPJHyEJPZTsWLoxShqsWITazEwqePAn69Sw2TUxk1+euPis3EwaXy8RMHSZBIlRcKKnC5hRctjMf57/wJbBlAIs9k1BAAAAABJRU5ErkJggg==), progress;
}

.side-overlay.show {
    visibility: visible;
    opacity: 1;
}

/* Overlay End */
/* ================================= Padding Css Start =========================== */
.tw-p-05 {
    padding: var(--size-05);
}

.tw-p-1 {
    padding: var(--size-1);
}

.tw-p-105 {
    padding: var(--size-105);
}

.tw-p-2 {
    padding: var(--size-2);
}

.tw-p-205 {
    padding: var(--size-205);
}

.tw-p-3 {
    padding: var(--size-3);
}

.tw-p-305 {
    padding: var(--size-305);
}

.tw-p-4 {
    padding: var(--size-4);
}

.tw-p-405 {
    padding: var(--size-405);
}

.tw-p-5 {
    padding: var(--size-5);
}

.tw-p-505 {
    padding: var(--size-505);
}

.tw-p-6 {
    padding: var(--size-6);
}

.tw-p-605 {
    padding: var(--size-605);
}

.tw-p-7 {
    padding: var(--size-7);
}

.tw-p-705 {
    padding: var(--size-705);
}

.tw-p-8 {
    padding: var(--size-8);
}

.tw-p-9 {
    padding: var(--size-9);
}

.tw-p-10 {
    padding: var(--size-10);
}

.tw-p-11 {
    padding: var(--size-11);
}

.tw-p-12 {
    padding: var(--size-12);
}

.tw-p-13 {
    padding: var(--size-13);
}

.tw-p-14 {
    padding: var(--size-14);
}

.tw-p-15 {
    padding: var(--size-15);
}

.tw-p-16 {
    padding: var(--size-16);
}

.tw-p-17 {
    padding: var(--size-17);
}

.tw-px-05 {
    padding-inline: var(--size-05);
}

.tw-px-1 {
    padding-inline: var(--size-1);
}

.tw-px-105 {
    padding-inline: var(--size-105);
}

.tw-px-2 {
    padding-inline: var(--size-2);
}

.tw-px-205 {
    padding-inline: var(--size-205);
}

.tw-px-3 {
    padding-inline: var(--size-3);
}

.tw-px-305 {
    padding-inline: var(--size-305);
}

.tw-px-4 {
    padding-inline: var(--size-4);
}

.tw-px-405 {
    padding-inline: var(--size-405);
}

.tw-px-5 {
    padding-inline: var(--size-5);
}

.tw-px-505 {
    padding-inline: var(--size-505);
}

.tw-px-6 {
    padding-inline: var(--size-6);
}

.tw-px-605 {
    padding-inline: var(--size-605);
}

.tw-px-7 {
    padding-inline: var(--size-7);
}

.tw-px-705 {
    padding-inline: var(--size-705);
}

.tw-px-8 {
    padding-inline: var(--size-8);
}

.tw-px-9 {
    padding-inline: var(--size-9);
}

.tw-px-10 {
    padding-inline: var(--size-10);
}

.tw-px-11 {
    padding-inline: var(--size-11);
}

.tw-px-12 {
    padding-inline: var(--size-12);
}

.tw-px-13 {
    padding-inline: var(--size-13);
}

.tw-px-14 {
    padding-inline: var(--size-14);
}

.tw-px-15 {
    padding-inline: var(--size-15);
}

.tw-px-16 {
    padding-inline: var(--size-16);
}

.tw-px-17 {
    padding-inline: var(--size-17);
}

.tw-py-05 {
    padding-block: var(--size-05);
}

.tw-py-1 {
    padding-block: var(--size-1);
}

.tw-py-105 {
    padding-block: var(--size-105);
}

.tw-py-2 {
    padding-block: var(--size-2);
}

.tw-py-205 {
    padding-block: var(--size-205);
}

.tw-py-3 {
    padding-block: var(--size-3);
}

.tw-py-305 {
    padding-block: var(--size-305);
}

.tw-py-4 {
    padding-block: var(--size-4);
}

.tw-py-405 {
    padding-block: var(--size-405);
}

.tw-py-5 {
    padding-block: var(--size-5);
}

.tw-py-505 {
    padding-block: var(--size-505);
}

.tw-py-6 {
    padding-block: var(--size-6);
}

.tw-py-605 {
    padding-block: var(--size-605);
}

.tw-py-7 {
    padding-block: var(--size-7);
}

.tw-py-705 {
    padding-block: var(--size-705);
}

.tw-py-8 {
    padding-block: var(--size-8);
}

.tw-py-9 {
    padding-block: var(--size-9);
}

.tw-py-10 {
    padding-block: var(--size-10);
}

.tw-py-11 {
    padding-block: var(--size-11);
}

.tw-py-12 {
    padding-block: var(--size-12);
}

.tw-py-13 {
    padding-block: var(--size-13);
}

.tw-py-14 {
    padding-block: var(--size-14);
}

.tw-py-15 {
    padding-block: var(--size-15);
}

.tw-py-16 {
    padding-block: var(--size-16);
}

.tw-py-17 {
    padding-block: var(--size-17);
}

.tw-ps-05 {
    padding-inline-start: var(--size-05);
}

.tw-ps-1 {
    padding-inline-start: var(--size-1);
}

.tw-ps-105 {
    padding-inline-start: var(--size-105);
}

.tw-ps-2 {
    padding-inline-start: var(--size-2);
}

.tw-ps-205 {
    padding-inline-start: var(--size-205);
}

.tw-ps-3 {
    padding-inline-start: var(--size-3);
}

.tw-ps-305 {
    padding-inline-start: var(--size-305);
}

.tw-ps-4 {
    padding-inline-start: var(--size-4);
}

.tw-ps-405 {
    padding-inline-start: var(--size-405);
}

.tw-ps-5 {
    padding-inline-start: var(--size-5);
}

.tw-ps-505 {
    padding-inline-start: var(--size-505);
}

.tw-ps-6 {
    padding-inline-start: var(--size-6);
}

.tw-ps-605 {
    padding-inline-start: var(--size-605);
}

.tw-ps-7 {
    padding-inline-start: var(--size-7);
}

.tw-ps-705 {
    padding-inline-start: var(--size-705);
}

.tw-ps-8 {
    padding-inline-start: var(--size-8);
}

.tw-ps-9 {
    padding-inline-start: var(--size-9);
}

.tw-ps-10 {
    padding-inline-start: var(--size-10);
}

.tw-ps-11 {
    padding-inline-start: var(--size-11);
}

.tw-ps-12 {
    padding-inline-start: var(--size-12);
}

.tw-ps-13 {
    padding-inline-start: var(--size-13);
}

.tw-ps-14 {
    padding-inline-start: var(--size-14);
}

.tw-ps-15 {
    padding-inline-start: var(--size-15);
}

.tw-ps-16 {
    padding-inline-start: var(--size-16);
}

.tw-ps-17 {
    padding-inline-start: var(--size-17);
}

.tw-pe-05 {
    padding-inline-end: var(--size-05);
}

.tw-pe-1 {
    padding-inline-end: var(--size-1);
}

.tw-pe-105 {
    padding-inline-end: var(--size-105);
}

.tw-pe-2 {
    padding-inline-end: var(--size-2);
}

.tw-pe-205 {
    padding-inline-end: var(--size-205);
}

.tw-pe-3 {
    padding-inline-end: var(--size-3);
}

.tw-pe-305 {
    padding-inline-end: var(--size-305);
}

.tw-pe-4 {
    padding-inline-end: var(--size-4);
}

.tw-pe-405 {
    padding-inline-end: var(--size-405);
}

.tw-pe-5 {
    padding-inline-end: var(--size-5);
}

.tw-pe-505 {
    padding-inline-end: var(--size-505);
}

.tw-pe-6 {
    padding-inline-end: var(--size-6);
}

.tw-pe-605 {
    padding-inline-end: var(--size-605);
}

.tw-pe-7 {
    padding-inline-end: var(--size-7);
}

.tw-pe-705 {
    padding-inline-end: var(--size-705);
}

.tw-pe-8 {
    padding-inline-end: var(--size-8);
}

.tw-pe-9 {
    padding-inline-end: var(--size-9);
}

.tw-pe-10 {
    padding-inline-end: var(--size-10);
}

.tw-pe-11 {
    padding-inline-end: var(--size-11);
}

.tw-pe-12 {
    padding-inline-end: var(--size-12);
}

.tw-pe-13 {
    padding-inline-end: var(--size-13);
}

.tw-pe-14 {
    padding-inline-end: var(--size-14);
}

.tw-pe-15 {
    padding-inline-end: var(--size-15);
}

.tw-pe-16 {
    padding-inline-end: var(--size-16);
}

.tw-pe-17 {
    padding-inline-end: var(--size-17);
}

.tw-pt-05 {
    padding-block-start: var(--size-05);
}

.tw-pt-1 {
    padding-block-start: var(--size-1);
}

.tw-pt-105 {
    padding-block-start: var(--size-105);
}

.tw-pt-2 {
    padding-block-start: var(--size-2);
}

.tw-pt-205 {
    padding-block-start: var(--size-205);
}

.tw-pt-3 {
    padding-block-start: var(--size-3);
}

.tw-pt-305 {
    padding-block-start: var(--size-305);
}

.tw-pt-4 {
    padding-block-start: var(--size-4);
}

.tw-pt-405 {
    padding-block-start: var(--size-405);
}

.tw-pt-5 {
    padding-block-start: var(--size-5);
}

.tw-pt-505 {
    padding-block-start: var(--size-505);
}

.tw-pt-6 {
    padding-block-start: var(--size-6);
}

.tw-pt-605 {
    padding-block-start: var(--size-605);
}

.tw-pt-7 {
    padding-block-start: var(--size-7);
}

.tw-pt-705 {
    padding-block-start: var(--size-705);
}

.tw-pt-8 {
    padding-block-start: var(--size-8);
}

.tw-pt-9 {
    padding-block-start: var(--size-9);
}

.tw-pt-10 {
    padding-block-start: var(--size-10);
}

.tw-pt-11 {
    padding-block-start: var(--size-11);
}

.tw-pt-12 {
    padding-block-start: var(--size-12);
}

.tw-pt-13 {
    padding-block-start: var(--size-13);
}

.tw-pt-14 {
    padding-block-start: var(--size-14);
}

.tw-pt-15 {
    padding-block-start: var(--size-15);
}

.tw-pt-16 {
    padding-block-start: var(--size-16);
}

.tw-pt-17 {
    padding-block-start: var(--size-17);
}

.tw-pb-05 {
    padding-block-end: var(--size-05);
}

.tw-pb-1 {
    padding-block-end: var(--size-1);
}

.tw-pb-105 {
    padding-block-end: var(--size-105);
}

.tw-pb-2 {
    padding-block-end: var(--size-2);
}

.tw-pb-205 {
    padding-block-end: var(--size-205);
}

.tw-pb-3 {
    padding-block-end: var(--size-3);
}

.tw-pb-305 {
    padding-block-end: var(--size-305);
}

.tw-pb-4 {
    padding-block-end: var(--size-4);
}

.tw-pb-405 {
    padding-block-end: var(--size-405);
}

.tw-pb-5 {
    padding-block-end: var(--size-5);
}

.tw-pb-505 {
    padding-block-end: var(--size-505);
}

.tw-pb-6 {
    padding-block-end: var(--size-6);
}

.tw-pb-605 {
    padding-block-end: var(--size-605);
}

.tw-pb-7 {
    padding-block-end: var(--size-7);
}

.tw-pb-705 {
    padding-block-end: var(--size-705);
}

.tw-pb-8 {
    padding-block-end: var(--size-8);
}

.tw-pb-9 {
    padding-block-end: var(--size-9);
}

.tw-pb-10 {
    padding-block-end: var(--size-10);
}

.tw-pb-11 {
    padding-block-end: var(--size-11);
}

.tw-pb-12 {
    padding-block-end: var(--size-12);
}

.tw-pb-13 {
    padding-block-end: var(--size-13);
}

.tw-pb-14 {
    padding-block-end: var(--size-14);
}

.tw-pb-15 {
    padding-block-end: var(--size-15);
}

.tw-pb-16 {
    padding-block-end: var(--size-16);
}

.tw-pb-17 {
    padding-block-end: var(--size-17);
}

.tw-p-36-px {
    padding: clamp(1rem, -6.1013rem + 9.4763vw, 2.25rem);
}

.tw-p-24-px {
    padding: clamp(1rem, -6.1013rem + 9.4763vw, 1.5rem);
}

.tw-p-36-px {
    padding: clamp(1.5rem, -6.1013rem + 9.4763vw, 2.25rem);
}

.tw-p-40-px {
    padding: clamp(1.5rem, -12.1677rem + 28.9177vw, 2.5rem);
}

.tw-p-48-px {
    padding: clamp(1.5rem, -12.1677rem + 28.9177vw, 3rem);
}

.tw-p-54-px {
    padding: clamp(1.5rem, -12.1677rem + 28.9177vw, 3.375rem);
}

.tw-p-60-px {
    padding: clamp(1.5rem, -12.1677rem + 28.9177vw, 3.75rem);
}

.tw-p-74-px {
    padding: clamp(1.5rem, -12.1677rem + 28.9177vw, 4.625rem);
}

.tw-px-90-px {
    padding-inline: clamp(1.5rem, -12.1677rem + 28.9177vw, 5.625rem);
}

.tw-px-40-px {
    padding-inline: clamp(1.25rem, 0.0962rem + 2.4038vw, 2.5rem);
}

.tw-px-50-px {
    padding-inline: clamp(1.5rem, 0.0962rem + 2.4038vw, 3.125rem);
}

.tw-ps-60-px {
    padding-inline-start: clamp(1.5rem, -12.1677rem + 28.9177vw, 3.75rem);
}

.tw-pt-72-px {
    padding-block-start: 4.5rem;
}

.tw-pt-164-px {
    padding-block-start: clamp(6.25rem, 2.5577rem + 7.6923vw, 10.25rem);
}

.tw-pb-120-px {
    padding-block-end: 4.5rem;
}

.tw-py-60-px {
    padding-block: clamp(1.5rem, -12.1677rem + 28.9177vw, 3.75rem);
}

.tw-py-70-px {
    padding-block: clamp(1.5rem, -12.1677rem + 28.9177vw, 4.375rem);
}

.tw-py-90-px {
    padding-block: clamp(1.5rem, -12.1677rem + 28.9177vw, 5.625rem);
}

.tw-py-100-px {
    padding-block: clamp(1.5rem, -12.1677rem + 28.9177vw, 6.25rem);
}

.tw-py-280-px {
    padding-block: clamp(5rem, -17.2222rem + 46.2963vw, 17.5rem);
}

.tw-ps-120-px {
    padding-inline-start: clamp(1.5rem, -12.1677rem + 28.9177vw, 7.5rem);
}

.tw-ps-100-px {
    padding-inline-start: clamp(1.5rem, -12.1677rem + 28.9177vw, 6.25rem);
}

.tw-ps-40-px {
    padding-inline-start: clamp(1.5rem, -12.1677rem + 28.9177vw, 2.5rem);
}

.py-140 {
    padding-block-start: 100px;
    padding-block-end: 100px;
}

@media (min-width: 992px) {
    .py-140 {
        padding-block-start: 140px;
        padding-block-end: 140px;
    }
}

.pt-140 {
    padding-block-start: 100px;
}

@media (min-width: 992px) {
    .pt-140 {
        padding-block-start: 140px;
    }
}

.pb-140 {
    padding-block-end: 100px;
}

@media (min-width: 992px) {
    .pb-140 {
        padding-block-end: 140px;
    }
}

.py-120 {
    padding-block-start: 80px;
    padding-block-end: 80px;
}

@media (min-width: 576px) {
    .py-120 {
        padding-block-start: 80px;
        padding-block-end: 80px;
    }
}

@media (min-width: 992px) {
    .py-120 {
        padding-block-start: 100px;
        padding-block-end: 120px;
    }
}

.pt-120 {
    padding-block-start: 80px;
}

@media (min-width: 576px) {
    .pt-120 {
        padding-block-start: 80px;
    }
}

@media (min-width: 992px) {
    .pt-120 {
        padding-block-start: 120px;
    }
}

.pb-120 {
    padding-block-end: 80px;
}

@media (min-width: 576px) {
    .pb-120 {
        padding-block-end: 80px;
    }
}

@media (min-width: 992px) {
    .pb-120 {
        padding-block-end: 120px;
    }
}

.py-60 {
    padding-block-start: 30px;
    padding-block-end: 30px;
}

@media (min-width: 576px) {
    .py-60 {
        padding-block-start: 40px;
        padding-block-end: 40px;
    }
}

@media (min-width: 992px) {
    .py-60 {
        padding-block-start: 80px;
        padding-block-end: 80px;
    }
}

.pt-60 {
    padding-block-start: 30px;
}

@media (min-width: 576px) {
    .pt-60 {
        padding-block-start: 40px;
    }
}

@media (min-width: 992px) {
    .pt-60 {
        padding-block-start: 80px;
    }
}

.pb-60 {
    padding-block-end: 30px;
}

@media (min-width: 576px) {
    .pb-60 {
        padding-block-end: 40px;
    }
}

@media (min-width: 992px) {
    .pb-60 {
        padding-block-end: 80px;
    }
}

/* ================================= Padding Css End =========================== */
/* Placeholder Classes Start */
.tw-placeholder-text-neutral-100::placeholder {
    color: var(--neutral-100);
}

.tw-placeholder-text-neutral-200::placeholder {
    color: var(--neutral-200);
}

.tw-placeholder-text-neutral-300::placeholder {
    color: var(--neutral-300);
}

.tw-placeholder-text-neutral-400::placeholder {
    color: var(--neutral-400);
}

.tw-placeholder-text-neutral-500::placeholder {
    color: var(--neutral-500);
}

.tw-placeholder-text-neutral-600::placeholder {
    color: var(--neutral-600);
}

.tw-placeholder-text-neutral-700::placeholder {
    color: var(--neutral-700);
}

.tw-placeholder-text-neutral-800::placeholder {
    color: var(--neutral-800);
}

.tw-placeholder-text-neutral-900::placeholder {
    color: var(--neutral-900);
}

.focus-tw-placeholder-text-hidden:focus::placeholder {
    opacity: 0;
}

.tw-placeholder-transition-2::placeholder {
    transition: 0.2s linear;
}

/* Placeholder Classes End */
.pointer-events-none {
    pointer-events: none;
}

.pointer-events-auto {
    pointer-events: auto;
}

/* Border Radius Css Start */
.tw-rounded {
    border-radius: 0.25rem;
    /* 4px */
}

.tw-rounded-none {
    border-radius: 0px;
}

.tw-rounded-sm {
    border-radius: 0.125rem;
    /* 2px */
}

.tw-rounded-md {
    border-radius: 0.375rem;
    /* 6px */
}

.tw-rounded-lg {
    border-radius: 0.5rem;
    /* 8px */
}

.tw-rounded-xl {
    border-radius: 0.75rem;
    /* 12px */
}

.tw-rounded-2xl {
    border-radius: 1rem;
    /* 16px */
}

.tw-rounded-3xl {
    border-radius: 1.5rem;
    /* 24px */
}

.tw-rounded-32-px {
    border-radius: 2rem;
    /* 32px */
}

/* Border Radius Css End */
/* Rotate Css Start */
.tw-rotate--45-deg {
    transform: rotate(-45deg);
}

.tw-hover-rotate-360:hover {
    transform: rotate(360deg);
}

/* Rotate Css End */
/* Hover Scale Css start */
.tw-scale-0 {
    transform: scale(0);
}

.tw-scale-04 {
    transform: scale(0.4);
}

.tw-scale-08 {
    transform: scale(0.8);
}

.hover-scale-09:hover {
    transform: scale(0.9);
}

.hover-scale-094:hover {
    transform: scale(0.94);
}

.hover-scale-098:hover {
    transform: scale(0.98);
}

.hover-scale-102:hover {
    transform: scale(1.02);
}

.hover-scale-104:hover {
    transform: scale(1.04);
}

.hover-scale-14:hover {
    transform: scale(1.4);
}

.hover-scale-106:hover {
    transform: scale(1.06);
}

.hover-scale-108:hover {
    transform: scale(1.08);
}

.hover-scale-2:hover {
    transform: scale(1.2);
}

.hover-scale-20:hover {
    transform: scale(2);
}

.hover-scale-30:hover {
    transform: scale(3);
}

/* Hover Scale Css End */
/* Active Scale Css End */
.active-scale-09:active {
    transform: scale(0.9);
}

.active-scale-094:active {
    transform: scale(0.94);
}

.active-scale-098:active {
    transform: scale(0.98);
}

.active-scale-102:active {
    transform: scale(1.02);
}

/* Active Scale Css End */
/* Hide Scroll bar Css For Custom Modal */
.scroll-hide {
    position: absolute;
    overflow-y: hidden;
    padding-inline-end: 17px;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
}

@media screen and (max-width: 991px) {
    .scroll-hide {
        padding-inline-end: 0;
    }
}

.scroll-hide-sm {
    position: absolute;
    overflow-y: hidden;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: calc(100% - 0px);
}

/* Hide Scroll bar Css For Custom Modal End */
.scroll-sm::-webkit-scrollbar {
    width: 6px;
}

.scroll-sm::-webkit-scrollbar-track {
    background: hsl(var(--white));
}

.scroll-sm::-webkit-scrollbar-thumb {
    background: #e4e4e4;
    background: hsl(var(--white));
    border-radius: 50px;
}

@media (max-width: 992px) {
    .scroll-sm::-webkit-scrollbar-thumb {
        background: #e4e4e4;
    }
}

.scroll-sm::-webkit-scrollbar-thumb:hover {
    background: #c1c1c1 !important;
}

.scroll-sm:hover::-webkit-scrollbar-thumb {
    background: #e4e4e4;
}

.scroll-sm-horizontal::-webkit-scrollbar {
    height: 6px;
}

/* Box shadow start */
.common-shadow {
    box-shadow: 0 6px 30px 0px #0000000a;
}

.common-shadow-2 {
    box-shadow: 8px 4.98px 24.88px 11px #060c3b0d;
}

.common-shadow-3 {
    box-shadow: 17px 19px 80.8px 12px #10053a08;
}

.common-shadow-4 {
    box-shadow: 17px 19px 80.8px 12px #10053a08;
}

.common-shadow-5 {
    box-shadow: 0px 0px 80.8px 12px #10053A0D;
}

.common-shadow-6 {
    box-shadow: -7px -7px 80.8px 12px #10053A08;
}

/* Box shadow End */
/* transition Css Class start */
.tw-transition {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.tw-transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* transition Css Class End */
.tw-duration-75 {
    transition-duration: 75ms;
}

.tw-duration-100 {
    transition-duration: 100ms;
}

.tw-duration-150 {
    transition-duration: 150ms;
}

.tw-duration-200 {
    transition-duration: 200ms;
}

.tw-duration-300 {
    transition-duration: 300ms;
}

.tw-duration-500 {
    transition-duration: 500ms;
}

/*================================== Translate Css Start ==================================*/
/* Translate X */
.tw-translate-x-50 {
    transform: var(--translate-x-50);
}

.tw--translate-x-full {
    transform: translateX(-100%);
}

.tw--translate-middle {
    transform: var(--translate-x-50) var(--translate-y-50);
}

/* Translate Y */
.tw--translate-y-50 {
    transform: var(--translate-y-50);
}

.active--translate-y-scale-9:active {
    transform: translateY(-4px) scale(0.94);
    transition: 0.06s;
}

.hover--translate-y-05:hover {
    transform: translateY(-2px);
}

.hover--translate-y-1:hover {
    transform: translateY(-4px);
}

.hover--translate-y-2:hover {
    transform: translateY(-8px);
}

.active--translate-y-05:active {
    transform: translateY(-2px);
}

.active--translate-y-1:active {
    transform: translateY(-4px);
}

/* Translate X */
.hover--translate-x-05:hover {
    transform: translateX(-2px);
}

.hover--translate-x-1:hover {
    transform: translateX(-4px);
}

.hover--translate-x-2:hover {
    transform: translateX(-8px);
}

/*================================== Translate Css End  ==================================*/
/* Transform Css Start */
.origin-left {
    transform-origin: left;
}

.object-top {
    object-position: top;
}

/* Transform Css End */
/* Text Decoration Start */
.hover-underline:hover {
    text-decoration: underline;
}

.hover-underline-none:hover {
    text-decoration: none !important;
}

/* Text Decoration End */
/* width Css Class start */
.tw-w-05 {
    width: 0.125rem;
}

.tw-w-1 {
    width: 0.25rem;
}

.tw-w-105 {
    width: 0.375rem;
}

.tw-w-2 {
    width: 0.5rem;
}

.tw-w-205 {
    width: 0.625rem;
}

.tw-w-3 {
    width: 0.75rem;
}

.tw-w-305 {
    width: 0.875rem;
}

.tw-w-4 {
    width: 1rem;
}

.tw-w-405 {
    width: 1.125rem;
}

.tw-w-5 {
    width: 1.25rem;
}

.tw-w-505 {
    width: 1.375rem;
}

.tw-w-6 {
    width: 1.5rem;
}

.tw-w-605 {
    width: 1.625rem;
}

.tw-w-7 {
    width: 1.75rem;
}

.tw-w-705 {
    width: 1.875rem;
}

.tw-w-8 {
    width: 2rem;
}

.tw-w-9 {
    width: 2.25rem;
}

.tw-w-10 {
    width: 2.5rem;
}

.tw-w-11 {
    width: 2.75rem;
}

.tw-w-12 {
    width: 3rem;
}

.tw-w-13 {
    width: 3.25rem;
}

.tw-w-14 {
    width: 3.5rem;
}

.tw-w-15 {
    width: 3.75rem;
}

.tw-w-16 {
    width: 4rem;
}

.tw-w-17 {
    width: 4.25rem;
}

.min-w-max {
    min-width: max-content;
}

.tw-w-w-max {
    width: max-content;
}

.tw-w-px {
    width: 1px;
}

.tw-w-300-px {
    width: 300px;
}

@media (min-width: 1300px) {
    .tw-w-100-vw {
        width: 100vw;
    }
}

.tw-w-84-px {
    width: 84px;
}

.tw-w-92-px {
    width: 92px;
}

.tw-w-104-px {
    width: 104px;
}

.tw-w-120-px {
    width: 120px;
}

.tw-w-200-px {
    width: 200px;
}

/* width Css Class End */
/* Z index css start */
.tw-z-99 {
    z-index: 99;
}

.tw-z-991 {
    z-index: 991;
}

.tw-z-999 {
    z-index: 999;
}

.tw--z-2 {
    z-index: -2;
}

.tw-hover-z-4:hover {
    z-index: 4 !important;
}

/* Z index css End */
/* ======================== Animation Css Start ==================================== */
/* Raw animations start here */
.animation-item:hover .animate__bounce {
    animation: bounce 1.5s;
}

.animation-item:hover .animate__wobble {
    animation: wobble 1.5s ease-in-out;
}

.animation-item:hover .animate__heartBeat {
    animation: heartbeat 1.5s ease-in-out;
}

.animation-item:hover .animate__flipInY {
    animation: flipInY 1.5s ease-in-out;
}

.animation-item:hover .animate__swing {
    animation: swing 1.5s ease-in-out;
}

@keyframes bounce {

    0%,
    20%,
    53%,
    100% {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    40%,
    43% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
        transform: translate3d(0, -30px, 0) scaleY(1.1);
    }

    70% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
        transform: translate3d(0, -15px, 0) scaleY(1.05);
    }

    80% {
        -webkit-transform: translateZ(0) scaleY(0.95);
        transform: translateZ(0) scaleY(0.95);
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    90% {
        -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
        transform: translate3d(0, -4px, 0) scaleY(1.02);
    }
}

@keyframes wobble {
    0% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    15% {
        -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg);
        transform: translate3d(-25%, 0, 0) rotate(-5deg);
    }

    30% {
        -webkit-transform: translate3d(20%, 0, 0) rotate(3deg);
        transform: translate3d(20%, 0, 0) rotate(3deg);
    }

    45% {
        -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg);
        transform: translate3d(-15%, 0, 0) rotate(-3deg);
    }

    60% {
        -webkit-transform: translate3d(10%, 0, 0) rotate(2deg);
        transform: translate3d(10%, 0, 0) rotate(2deg);
    }

    75% {
        -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg);
        transform: translate3d(-5%, 0, 0) rotate(-1deg);
    }

    100% {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

@keyframes heartbeat {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    14% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    28% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    42% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }

    70% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes flipInY {
    0% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0;
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);
    }

    40% {
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        -webkit-transform: perspective(400px) rotateY(-20deg);
        transform: perspective(400px) rotateY(-20deg);
    }

    60% {
        opacity: 1;
        -webkit-transform: perspective(400px) rotateY(10deg);
        transform: perspective(400px) rotateY(10deg);
    }

    80% {
        -webkit-transform: perspective(400px) rotateY(-5deg);
        transform: perspective(400px) rotateY(-5deg);
    }

    100% {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    40% {
        -webkit-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.animation-scalation {
    animation: scalation 8s linear infinite;
}

.animation-upDown {
    animation: animationUpDown 6s ease-in-out infinite;
}

.animation-rotate-scale {
    animation: scaleRotate 4.5s ease-in-out infinite;
}

@keyframes scaleRotate {
    0% {
        transform: scale(1) rotate(0deg);
    }

    25% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1.2) rotate(180deg);
    }

    75% {
        transform: scale(1.2) rotate(360deg);
    }

    100% {
        transform: scale(1) rotate(360deg);
    }
}

@keyframes scalation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes animationUpDown {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-40px);
    }
}

.animation-rotate-right {
    animation: rotateRight 30s linear infinite;
}

@keyframes rotateRight {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes floatAnimation {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-24px);
    }

    100% {
        transform: translateY(0);
    }
}

.animated-upDown {
    animation: floatAnimation 3s ease-in-out infinite;
}

.animated-upDown-two {
    animation: animatedUpdownTwo 4s ease-in-out infinite;
}

@keyframes animatedUpdownTwo {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(24px);
    }

    100% {
        transform: translateY(0);
    }
}

.left-right-animation {
    animation: 6s leftRightAnimation ease-in-out infinite;
}

@keyframes leftRightAnimation {

    0%,
    100% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-40px);
    }
}

.scale-animation {
    animation: 4s scaleAnimation linear infinite;
}

@keyframes scaleAnimation {

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

    50% {
        transform: scale(1.2);
    }
}

.animate__wobble__two {
    animation: wobble 2.4s ease-in-out infinite;
}

.animation-delay-1 {
    animation-delay: 1s !important;
}

.animation-delay-2 {
    animation-delay: 2s;
}

.animation-delay-3 {
    animation-delay: 3s;
}

.animation-delay-5 {
    animation-delay: 5s;
}

.animation-duration-6 {
    animation-duration: 6s;
}

.animation-duration-40 {
    animation-duration: 40s;
}

/* Latest Animation */
.animate-hand-move {
    animation: handMove 2.5s ease-in-out infinite;
}

@keyframes handMove {
    0% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }

    10% {
        transform: rotate(40deg);
        transform-origin: bottom;
    }

    20% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }

    30% {
        transform: rotate(30deg);
        transform-origin: bottom;
    }

    40% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }

    100% {
        transform: rotate(0deg);
        transform-origin: bottom;
    }
}

/* ======================== Animation Css End ==================================== */
/* ================================= preload Css Start =========================== */
.loader-mask {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-end: 0;
    background-color: #fff;
    z-index: 99999;
}

.loader {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    width: 60px;
    height: 60px;
    font-size: 0;
    display: inline-block;
    margin: -25px 0 0 -25px;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.loader div {
    background-color: var(--main-600);
    display: inline-block;
    float: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 60px;
    height: 60px;
    opacity: 0.5;
    border-radius: 50%;
    -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
    animation: ballPulseDouble 2s ease-in-out infinite;
}

.loader div:last-child {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes ballPulseDouble {

    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes ballPulseDouble {

    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

/* ================================= preload Css End ===========================  */
/* ========================== Settings panel css start =========================== */
.settings-button {
    pointer-events: all;
}

.settings-button .close-icon {
    display: none;
}

.settings-button.active .setting-icon {
    display: none;
}

.settings-button.active .close-icon {
    display: block;
}

.settings-panel {
    inset-inline-end: -280px;
    pointer-events: none;
    transition: 0.3s;
}

.settings-panel.active {
    inset-inline-end: 0px !important;
}

.settings-panel.active .settings-panel__content {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}

.settings-panel__content {
    pointer-events: all;
    width: 280px;
    max-height: 100vh;
    overflow-y: auto;
}

.settings-panel__button.active {
    background-color: var(--main-600) !important;
}

.remove-animate-cursor .cursor,
.remove-animate-cursor .dot {
    display: none;
}

.animation-rotate {
    animation: animationRotate 2s linear infinite;
}

@keyframes animationRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ========================== Settings panel css end =========================== */
/* ============= Header Start Here ======================= */
@media screen and (max-width: 991px) {
    .header {
        padding: 10px 0;
    }
}

.header.fixed-header {
    position: fixed;
    inset-inline-start: 0;
    inset-block-start: 0;
    inset-inline-end: 0;
    width: 100%;
    z-index: 9;
    backdrop-filter: blur(24px);
    animation: slideDown 0.35s ease-out;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 991px) {
    .header.fixed-header {
        inset-block-start: -1px;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.fixedHeaderBlack.fixed-header {
    background-color: hsl(var(--heading-color));
}

.fixedHeaderBgWhite.fixed-header {
    background-color: hsl(var(--white)/0.85);
}

/* Header Menu and Submenu Css Start */
.nav-menu__item.activePage>a {
    color: var(--main-600) !important;
}

.nav-menu__item.activePage>a::before {
    color: var(--main-600);
}

.nav-menu__item:hover>a {
    color: hsl(var(--heading-color));
}

@media (min-width: 992px) {
    .nav-menu__item:hover>a {
        color: var(--main-600);
    }
}

.has-submenu.active>a,
.has-submenu.active>a::before {
    color: var(--main-600);
}

.has-submenu.active>a::before {
    transform: translateY(-50%) rotate(180deg) !important;
}

.has-submenu:hover .nav-submenu {
    visibility: visible;
    opacity: 1;
    transform: scaleY(1);
}

@media (min-width: 992px) {
    .has-submenu:hover>a::before {
        color: var(--main-600);
        transform: translateY(-50%) rotate(180deg);
    }
}

.has-submenu>a {
    position: relative;
}

.has-submenu>a::before {
    position: absolute;
    content: "\e136";
    inset-inline-end: 0;
    inset-block-start: 50%;
    transform: translateY(-50%);
    font-family: "Phosphor";
    font-weight: 900;
    color: hsl(var(--heading-color)/0.4);
    transition: 0.2s linear;
}

/* Submenu Start */
.nav-submenu {
    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    min-width: 190px;
    visibility: hidden;
    opacity: 0;
    transform: scaleY(0);
    transition: 0.4s ease;
    transform-origin: top center;
}

@media (min-width: 992px) {
    .nav-submenu {
        max-height: 400px;
        overflow-y: auto;
    }
}

.nav-submenu__item.activePage .nav-submenu__link {
    color: var(--main-600) !important;
}

.nav-submenu__item:hover a {
    color: hsl(var(--heading-color));
}

/* Submenu End */
/* Header Menu and Submenu Css End */
.headerAbsoluteStyle {
    position: absolute;
    inset-block-start: 0;
    width: 100%;
    inset-inline-start: 0;
}

.menuColorWhite .nav-menu__link {
    color: #ffff;
}

.menuColorWhite .nav-menu__item.activePage>a {
    color: var(--main-two-600) !important;
}

.menuColorWhite .has-submenu>a::before {
    color: #fff;
}

.menuColorWhite .has-submenu:hover>a::before {
    color: var(--main-600);
}

.menuColorWhite .activePage>a::before {
    color: var(--main-two-600);
}

.menuPositionEnd .header-menu {
    margin-inline-start: auto;
}

.border-line-full .border-line {
    height: 96px;
}

@media (min-width: 768px) {
    .header-four {
        margin-block-start: 20px;
    }
}

@media (max-width: 1760px) and (min-width: 768px) {
    .header-four .container>nav {
        padding-inline: 20px;
    }
}

.header-four .container {
    max-width: 1710px;
}

.header-four.fixed-header {
    margin-block-start: 0;
}

.active-text-green-600 .nav-menu__item.activePage>a,
.active-text-green-600 .nav-menu__item.activePage>a::before {
    color: var(--main-600) !important;
}

/* ================================= Header Css End =========================== */
/* Mega menu css start */
.mega-menu {
    position: absolute;
    inset-block-start: 100%;
    background-color: #fff;
    width: 100%;
    inset-inline-start: 0;
    z-index: 99;
    box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px;
    max-height: 540px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 991px) {
    .mega-menu {
        margin-block: 16px !important;
        margin-inline-start: 0 !important;
        padding-inline-end: 4px !important;
    }
}

.mega-menu-item__buttons {
    transition: all 0.5s;
}

.mega-menu-item__overlay {
    background-color: #0000008c;
    transition: all 0.25s;
}

.mega-menu-item__buttons {
    margin-top: -60px;
    transform: scale(0.8);
}

.mega-menu-item:hover .mega-menu-item__buttons {
    transition-delay: 0.1s;
    margin-top: 0px;
    transform: scale(1);
}

/* Mega menu css end */
/* Mobile Menu Sidebar Start */
.mobile-menu.active {
    transform: translateX(0%);
}

.nav-menu--mobile .nav-menu__item>a::before {
    transform: translateY(-50%) rotate(0deg);
}

.nav-menu--mobile .nav-menu__link {
    border-bottom: 1px solid var(--neutral-200) !important;
    position: relative;
    padding: 12px 0;
    padding-inline-end: 16px;
}

.nav-menu--mobile .nav-submenu {
    position: static !important;
    visibility: visible;
    opacity: 1;
    box-shadow: none;
    width: 100%;
    margin-block-start: 0;
    padding: 0;
    margin-inline-start: 16px;
    display: none;
    transition: 0s;
}

.nav-menu--mobile .nav-submenu__link {
    width: 100%;
    padding: 10px 0;
    border-bottom: 1px solid var(--neutral-200) !important;
}

.nav-menu--mobile .nav-submenu__item:hover {
    background-color: transparent;
    color: var(--main-600);
}

.nav-menu--mobile .nav-submenu__item::before {
    display: none;
}

/* Mobile Menu Sidebar Start */
/* ===================== Scroll to Top Start ================================= */
.progress-wrap {
    position: fixed;
    inset-inline-end: 16px;
    inset-block-end: 16px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    background-color: #fff;
    mix-blend-mode: difference;
}

@media screen and (max-width: 991px) {
    .progress-wrap {
        inset-inline-end: 24px;
        inset-block-end: 24px;
        height: 40px;
        width: 40px;
        line-height: 40px;
    }
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.progress-wrap:hover {
    transform: scale(1.06);
}

.progress-wrap::after {
    position: absolute;
    font-family: "Phosphor";
    font-weight: 900;
    content: "\e08e";
    text-align: center;
    height: 46px;
    width: 46px;
    line-height: 46px;
    font-size: 18px;
    inset-inline-start: 0;
    inset-block-start: 0;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    color: hsl(var(--main)) !important;
}

@media screen and (max-width: 991px) {
    .progress-wrap::after {
        height: 40px;
        width: 40px;
        line-height: 40px;
    }
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: var(--main-600);
    stroke-width: 5;
    box-sizing: border-box;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
}

/* ===================== Scroll to Top End ================================= */
/* Custom Cursor Css Start */
.cursor,
.dot {
    width: 32px;
    height: 32px;
    border: 1px solid hsl(var(--white));
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999999;
    transform: translate(-50%, -50%);
    visibility: hidden;
    font-size: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    mix-blend-mode: difference;
}

.dot {
    width: 4px;
    height: 4px;
    background-color: hsl(var(--white));
    mix-blend-mode: difference;
}

.view-cursor {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    color: hsl(var(--heading-color));
    background: rgba(0, 0, 0, 0.7);
    padding: 6px 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background-color: hsl(var(--white)/0.85);
    border: 2px solid hsl(var(--white));
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.6;
    text-transform: capitalize;
    text-align: center;
    box-shadow: 0px 0px 40px #0000001c;
}

/* Custom Cursor Css End */
/* ============================ Search Popup css start ===================================== */
.search-popup {
    height: 0;
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    z-index: 999999;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.3s ease-in-out;
}

.search-popup__form {
    max-width: 1100px;
    margin: 0 auto;
    width: 0;
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}

.search-popup__input {
    height: 64px;
    line-height: 64px;
    font-size: 28px;
    background-color: transparent;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--neutral-200);
    padding-left: 0;
    border-radius: 0;
    width: 100%;
    padding-inline-end: 44px;
    color: hsl(var(--heading-color));
}

.search-popup__input:focus {
    outline: 0;
    border-color: var(--main-600);
}

.search-popup__close {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border-bottom: 3px solid hsl(var(--heading-color));
    transform: translateY(80px);
    -webkit-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
    visibility: hidden;
    opacity: 0;
}

.search-popup__close i {
    transition: 0.2s linear;
}

.search-popup__close:hover i {
    transform: rotate(90deg);
}

.search-popup.active {
    visibility: visible;
    opacity: 2;
    height: 400px;
}

.search-popup.active .search-popup__form {
    transition-delay: 0.3s;
    width: 100%;
}

.search-popup.active .search-popup__close {
    transition-delay: 0.5s;
    transform: translateY(0px);
    visibility: visible;
    opacity: 1;
}

/* ============================ Search Popup css end ===================================== */
/* Play Animation css start */
.play-button::before {
    position: absolute;
    content: "";
    width: inherit;
    height: inherit;
    background: inherit;
    border-radius: 50%;
    inset-inline-start: 0;
    top: 0;
    z-index: -1;
    -webkit-animation: animate 2.3s ease-out infinite;
    animation: animate 2.3s ease-out infinite;
}

@keyframes animate {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    30% {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
        opacity: 1;
    }

    60% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0.9;
    }

    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

/* Play Animation css end */
/* Header spacer for fixed header */
.header-space {
    height: 96px;
}

@media (max-width: 991px) {
    .header-space {
        height: 74px;
    }
}

/* Smooth Wrapper css end */
.fontSizeStyleOne:root {
    --heading-one: clamp(2.125rem,
            -0.9752rem + 6.4588vw,
            5.75rem);
}

.fontSizeStyleOne h1,
.fontSizeStyleOne .h1 {
    font-size: var(--heading-one);
}

.color-green:root {
    --main-h: 72;
    --main-s: 97%;
    --main-l: 45%;
    --main: var(--main-h) var(--main-s) var(--main-l);
}

.color-green .btn-main {
    color: hsl(var(--heading-color)) !important;
}

.color-green .btn-main .btn-icon {
    background: hsl(var(--heading-color)) !important;
}

.color-green .hover-style-one .button__flair::before {
    background-color: #fff;
}

/* ========================= Banner one css start ============================= */
.banner-one__inner {
    padding: 294px 0 194px 0;
}

@media (max-width: 1300px) {
    .banner-one__inner {
        padding: 240px 0 120px 0;
    }
}

@media (max-width: 991px) {
    .banner-one__inner {
        padding: 160px 0 120px 0;
    }
}

.banner-one__thumbs {
    max-width: 52%;
}

@media (max-width: 1300px) {
    .banner-one__thumbs {
        max-width: 48%;
    }
}

.rotate-text-one {
    inset-inline-start: 42%;
}

@media (max-width: 1199px) {
    .rotate-text-one {
        inset-inline-start: 35%;
    }
}

@media (max-width: 991px) {
    .rotate-text-one {
        inset-inline-start: 68%;
    }
}

@media (max-width: 445px) {
    .rotate-text-one {
        inset-inline-start: 75%;
    }
}

/* ========================= Banner one css End ============================= */
/* brand section css start */
.hover-filter-grayscale-0 {
    filter: grayscale(100%);
    opacity: 0.6;
}

.hover-filter-grayscale-0:hover {
    filter: grayscale(0);
    opacity: 1;
}

.left-right-gradient::before,
.left-right-gradient::after {
    position: absolute;
    content: "";
    width: 48px;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
    z-index: 2;
    pointer-events: none;
}

.left-right-gradient::after {
    background: linear-gradient(90deg, transparent, #ffffff);
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.gradient-width-200::before,
.gradient-width-200::after {
    width: 200px;
}

.gradient-width-50::before,
.gradient-width-50::after {
    width: 50px;
}

/* brand section css end */
/* Service section css start */
.step-bg-shape::before,
.step-bg-shape::after {
    position: absolute;
    content: "";
    width: 92%;
    height: 100%;
    z-index: -2;
    inset-inline-start: 50%;
    inset-block-start: -12px;
    border-radius: inherit;
    transform: translateX(-50%);
    box-shadow: 0 0.5rem 1.5rem #00000030;
    background-color: #6d96f8;
}

.step-bg-shape::after {
    inset-block-start: -24px;
    width: 86%;
    z-index: -3;
}

/* Service section css end */
/* Marquee css start */
.marquee {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.js-marquee-wrapper {
    display: flex;
    gap: 64px;
}

.js-marquee {
    display: flex;
    gap: 64px;
    min-width: max-content;
}

.cta-four .js-marquee-wrapper {
    gap: 24px;
}

.cta-four .js-marquee {
    gap: 24px;
}

/* Marquee css end */
/* =========================== Work with us section css start ============================ */
/* =========================== Work with us section css end ============================ */
/* Project section css start */
.project-slider .swiper-slide {
    transition: 0.5s ease-in-out;
}

.project-slider .swiper-slide.swiper-slide-active {
    transform: translateY(-40px);
}

/* Project section css end */
/* Social icons css start */
.show-socials-icons.active .show-socials-icons__item {
    transform: scale(1);
}

.show-social-icon-button.active {
    background-color: hsl(var(--heading-color)) !important;
}

.show-social-icon-button.active .icon {
    transform: rotate(45deg);
}

@media (min-width: 1200px) {
    .team-item-wrapper div[class*=col]:nth-child(2) .team-item {
        margin-top: 116px;
    }

    .team-item-wrapper div[class*=col]:nth-child(3) .team-item {
        margin-top: 58px;
    }
}

/* Social icons css end */
/* Footer css start */
.line-y-axies {
    inset-inline-start: 32%;
    background-color: #ffffff61;
}

@media (max-width: 1199px) {
    .line-y-axies {
        display: none;
    }
}

/* Footer css END */
.fontSizeStyleTwo:root {
    --heading-one: clamp(2.125rem,
            -0.9752rem + 6.4588vw,
            3.625rem);
}

.fontSizeStyleTwo h1,
.fontSizeStyleTwo .h1 {
    font-size: var(--heading-one);
}

/* ===================== Banner Two css start ============================== */
.banner-two {
    padding: 234px 0 366px;
}

@media (max-width: 1200px) {
    .banner-two {
        padding: 160px 0 300px;
    }
}

@media (max-width: 575px) {
    .banner-two {
        padding: 120px 0 150px;
    }
}

.banner-image-1 {
    inset-inline-start: clamp(0.5rem, -10.5rem + 16vw, 6.5rem);
}

.banner-image-2 {
    inset-inline-end: clamp(0.5rem, -10.5rem + 16vw, 6.5rem);
}

.banner-image-1,
.banner-image-2 {
    max-width: 27%;
}

.banner-two {
    height: 730px !important;
}

.social-icon-2 {
    inset-inline-start: 15%;
    inset-block-start: 12%;
}

.social-icon-4 {
    inset-inline-start: 48%;
    inset-block-start: 6%;
}

.social-icon-1 {
    inset-inline-end: 25%;
    inset-block-start: 43%;
}

.social-icon-3 {
    inset-inline-start: 32%;
    inset-block-end: 23%;
}

.banner-two-shape-1 {
    inset-inline-start: 8%;
    inset-block-start: 12%;
}

.banner-two-shape-5 {
    inset-inline-end: 30%;
    inset-block-end: 26%;
}

.banner-two-shape-3 {
    inset-inline-end: 24%;
    inset-block-start: 16%;
}

/* ===================== Banner Two css end ============================== */
/* customer statistics css start */
.customer-statistics {
    margin-block-start: -155px;
    z-index: 1;
    position: relative;
}

/* customer statistics css end */
/* service two section css start */
.service-two .animated-bg {
    height: 72%;
}

.service-two__shape-1 {
    margin-block-start: 12%;
    margin-inline-start: 4%;
}

.service-two__shape-2 {
    margin-block-start: 6%;
}

/* service two section css end */

/* Price and experience section css start */
.price-experience-wrapper {
    position: relative;
}

.price-experience-wrapper::before,
.price-experience-wrapper::after {
    position: absolute;
    content: "";
    height: 55%;
    width: 100%;
    inset-block-start: 0;
    inset-inline-start: 0;
    background-color: #FEFAF6;
    z-index: -1;
}

.price-experience-wrapper::after {
    background-color: var(--main-two-600);
    inset-block-start: auto;
    inset-block-end: 0;
    height: 45%;
}


/* Price and experience section css end */
/* Choose us two css start  */
.bg-70-percent::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 70%;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: -1;
}

/* Choose us two css end  */
/* Project Two css start */
.project-two-shape-1 {
    margin-block-start: -4%;
    margin-inline-start: -3%;
}

.project-two-shape-2 {
    margin-inline-start: 9%;
}

/* Project Two css end */
/* Counter Two Css start */
@media (max-width: 767px) {
    .counter-two-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 32px;
    }
}

@media (max-width: 575px) {
    .counter-two-wrapper {
        gap: 24px;
    }
}

/* Counter Two Css end */
/* testimonials two css start */
.aspect-square {
    aspect-ratio: 1;
}

@media (max-width: 425px) {
    .testimonials-two__navigations {
        position: relative !important;
        margin-inline-end: 0 !important;
    }
}

/* testimonials two css end */
/* Blog two css start */
@media (max-width: 1199px) {
    .blog-two-item {
        flex-direction: column;
        align-items: unset !important;
    }
}

@media (max-width: 1199px) {
    .blog-two-item__thumb {
        max-width: 100%;
    }
}

/* Blog two css end */
/* cta two css start */
.bg-half-black::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    inset-block-end: 0;
    inset-inline-start: 0;
    background-color: hsl(var(--heading-color));
    z-index: -1;
}

.bg-half-blue-light::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 50%;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: -1;
}

.bg-half-blue-light.bg-overlay-white::before {
    background-color: hsl(var(--white));
}

.rounded-top-34-px {
    border-radius: 34px 34px 0 0;
}

.animation-rotate-y-50 {
    transform: translateY(50%);
    animation: rotateRightY 30s linear infinite;
}

@keyframes rotateRightY {
    0% {
        transform: translateY(50%) rotate(0deg);
    }

    100% {
        transform: translateY(50%) rotate(360deg);
    }
}

/* cta two css end */
/* Footer Two css start */
.footer-two-middle__box {
    border-radius: 66px 66px 0 0;
    background-color: #20202b;
}

@media (max-width: 991px) {
    .footer-two-middle__box {
        border-radius: 40px 40px 0 0;
    }
}

@media (max-width: 575px) {
    .footer-two-middle__box {
        border-radius: 20px 20px 0 0;
    }
}

/* Footer Two css end */
/* Header Three Css start */
.logo-three {
    position: relative;
}

.logo-three::before {
    position: absolute;
    width: 100%;
    inset-inline-start: 0;
    inset-block-start: calc(100% - 1px);
    content: "";
    background-color: inherit;
    z-index: 1;
    height: 30px;
    border-radius: 0 0 10px 10px;
}

.logo-three img {
    transform: translateY(15px);
}

/* Header Three end start */
/* Banner three css start */
.banner-three__inner {
    background-color: #141b37;
}

.banner-three__content {
    padding: 332px 0 222px;
}

@media (max-width: 1199px) {
    .banner-three__content {
        padding: 140px 0 100px;
    }
}

@media (max-width: 768px) {
    .banner-three__content {
        padding: 100px 0 60px;
    }
}

/* Banner three css end */
/* Counter Three css start */
.counter-three-shape {
    margin-inline-end: -25%;
    margin-block-start: -34%;
}

/* Counter Three css end */
/* Service Three css start */
.service-three-item::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
    background-color: #020f2dc7;
    border-radius: inherit;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    transition-duration: 300ms;
}

.service-three-item:hover::before {
    visibility: visible;
    opacity: 1;
}

/* Service Three css end */
/* Footer Three section css start  */
.footer-three {
    position: relative;
    z-index: 1;
}

.footer-three::before {
    position: absolute;
    content: "";
    width: 38.5%;
    height: 100%;
    background-color: #22222d;
    z-index: -1;
}

@media (max-width: 1500px) {
    .footer-three::before {
        width: 36%;
    }
}

@media (max-width: 1200px) {
    .footer-three::before {
        width: 33%;
    }
}

@media (max-width: 991px) {
    .footer-three::before {
        display: none;
    }
}

@media (min-width: 992px) {
    .footer-three__left {
        width: 35%;
    }
}

@media (max-width: 991px) {
    .footer-three__right-content {
        padding-inline-start: 0 !important;
    }
}

/* Footer Three section css end  */
.fontSizeStyleFour:root {
    --heading-one: clamp(2.5rem, -0.9615rem + 7.2115vw, 6.25rem);
}

.fontSizeStyleFour h1,
.fontSizeStyleFour .h1 {
    font-size: var(--heading-one);
}

/* Banner four css start */
@media (min-width: 768px) {
    .banner-four {
        margin: 20px;
        margin-block-end: 0;
        border-radius: 12px;
    }
}

.banner-four__content {
    padding: 300px 0 88px;
}

@media (max-width: 1600px) and (min-width: 768px) {
    .banner-four__content {
        padding: 200px 0 180px;
    }
}

@media (max-width: 767px) {
    .banner-four__content {
        padding: 180px 0 88px;
    }
}

.chaka-shape-four {
    margin-inline-start: 33%;
    margin-block-start: 12%;
    max-width: 16%;
    opacity: 0.6;
}

.arrow-curve-shape-four {
    margin-inline-end: 6%;
    margin-block-start: 18%;
}

.triangle-left-right {
    position: relative;
}

.triangle-left-right::before,
.triangle-left-right::after {
    position: absolute;
    content: "";
    width: 32px;
    height: 32px;
    background-color: #cbcbcb00;
    inset-inline-start: -31px;
    inset-block-end: -2px;
    border-radius: 50%;
    box-shadow: 8px 10px #fcf8f4;
}

.triangle-left-right::after {
    inset-inline-end: -32px;
    inset-inline-start: auto;
    box-shadow: -8px 10px #fcf8f4;
}

/* Banner four css end */
/* experience four section css start */
.experience-four {
    margin-inline: 20px;
}

/* experience four section css end */
/* Value Four section css start */
/* Value Four section css end */
/* Testimonials Four css start */
@media (max-width: 1300px) {
    .testimonials-four-next {
        margin-inline-start: -32px;
    }

    .testimonials-four-prev {
        margin-inline-end: -32px;
    }
}

/* Testimonials Four css end */
.fontSizeStyleNew:root {
    --display-one: clamp(7.5rem, -2.8846rem + 21.6346vw, 18.75rem);
    --display-two: clamp(6.25rem, 1.6346rem + 9.6154vw, 11.25rem);
    --heading-one: clamp(3rem, 0.4615rem + 5.2885vw, 5.75rem);
    --heading-two: clamp(2.5rem, 1rem + 3.125vw, 4.125rem);
    --heading-three: clamp(1.875rem, 1.0673rem + 1.6827vw, 2.75rem);
    --heading-four: clamp(1.5rem, 0.8077rem + 1.4423vw, 2.25rem);
    --heading-five: clamp(1.125rem, 0.7788rem + 0.7212vw, 1.5rem);
    --heading-six: clamp(1rem, 0.7692rem + 0.4808vw, 1.25rem);
    --new-black: #171717;
}

.fontSizeStyleNew body {
    background-color: var(--new-black);
}

.new-black {
    background-color: var(--new-black);
}

.fontSizeStyleNew h1,
.fontSizeStyleNew .h1,
.fontSizeStyleNew h2,
.fontSizeStyleNew .h2,
.fontSizeStyleNew h3,
.fontSizeStyleNew .h3,
.fontSizeStyleNew h4,
.fontSizeStyleNew .h4,
.fontSizeStyleNew h5,
.fontSizeStyleNew .h5,
.fontSizeStyleNew h6,
.fontSizeStyleNew .h6 {
    font-family: var(--big-shoulders-font);
}

.fontSizeStyleNew .display-1 {
    font-size: var(--display-one);
}

.fontSizeStyleNew .display-2 {
    font-size: var(--display-two);
}

.text-222-px {
    font-size: clamp(4.5rem, -2.8846rem + 21.6346vw, 13.875rem);
}

.fontSizeStyleNew h1,
.fontSizeStyleNew .h1 {
    line-height: 1.1;
}

/* ======================== banner new section start ======================= */
.banner-new__inner {
    padding-block-start: 224px;
    padding-block-end: 96px;
}

@media (max-width: 991px) {
    .banner-new__inner {
        padding-block-start: 160px;
    }
}

.blur-style-two {
    background-color: #FFFFFF0F !important;
    backdrop-filter: blur(20px);
}

/* ======================== banner new section End ======================= */
/* About New css start */
@media (max-width: 991px) {
    .md-text-to-left-none {
        margin-inline-start: 0;
        transform: translateX(0) !important;
    }
}

@media (min-width: 992px) {
    .md-tw-pt-15 {
        padding-block-start: 60px;
    }
}

/* About New css end */
/* Banner New two css start */
.banner-new-two {
    padding-block-start: 240px;
    padding-block-end: 90px;
}

@media (max-width: 1300px) {
    .banner-new-two {
        padding-block-start: 180px;
    }
}

@media (max-width: 991px) {
    .banner-new-two {
        padding-block-start: 120px;
    }
}

/* Banner New two css end */
/* About new two css start */
.text-gradient {
    background: linear-gradient(125.41deg, #FEE020 12.97%, #F4515F 57.29%, #76009B 103.48%);
    background-size: 100%;
    word-spacing: 5px;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

@media (min-width: 768px) {
    .counter-content {
        padding-inline-end: clamp(1.5rem, -3.5644rem + 8.1683vw, 5.625rem);
        margin-inline-end: clamp(1.5rem, -3.5644rem + 8.1683vw, 5.625rem);
        border-inline-end: 1px solid var(--neutral-600) !important;
    }
}

/* About new two css end */
/* ========================= Testimonials new two css start ============================= */
.testimonials-new-two-thumbs-slider .swiper-slide {
    transform: scale(0.6);
    border-radius: 50%;
    overflow: hidden;
    transition: 0.3s;
}

.testimonials-new-two-thumbs-slider .swiper-slide-thumb-active {
    transform: scale(1);
}

/* ========================= Testimonials new two css end ============================= */
/* Breadcrumb css start */
.breadcrumb {
    padding: 256px 0 160px;
}

@media (max-width: 991px) {
    .breadcrumb {
        padding: 175px 0 100px;
    }
}

.breadcrumb::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    inset-inline-start: 0;
    inset-block-start: 0;
    z-index: -1;
    background-color: #020F2DC7;
}

/* Breadcrumb css end */
/* 404 page css start */
.error-section {
    padding: 210px 0 100px;
    background-color: hsl(var(--heading-color));
    min-height: 100vh;
}

/* 404 page css end */
/* ================================== rtl css start ================================== */
.text-start {
    text-align: start !important;
}

.form-check {
    padding-left: 0;
}

.form-check {
    padding-inline-start: 1.5em;
}

.form-check .form-check-input {
    margin-left: 0;
}

[dir=rtl] .tw-translate-x-50 {
    transform: translateX(50%);
}

[dir=rtl] .pricing-plan .form-check {
    padding-left: 0 !important;
}

[dir=rtl] .common-check-two .form-check-input::before {
    transform: translate(50%, -50%);
}

[dir=rtl] .tw--translate-middle {
    transform: var(--translate-x-50) var(--translate-y-50);
    transform: translateX(50%) var(--translate-y-50);
}

[dir=rtl] .translate-middle-x {
    transform: translateX(50%) !important;
}

[dir=rtl] .toast-message {
    transform: translateX(-110%);
}

[dir=rtl] .toast-message.active {
    transform: translateX(0) !important;
}

[dir=rtl] .arrow-right-img {
    transform: scaleX(-1);
}

[dir=rtl] .common-check .form-check-input::before {
    transform: translate(50%, -50%);
}

[dir=rtl] .form-check .form-check-input {
    margin-right: -1.5em;
}

[dir=rtl] .form-select {
    background-position: left 0.75rem center;
}

[dir=rtl] .tw-rotate--45-deg {
    transform: rotate(45deg);
}

[dir=rtl] .left-right-gradient::before {
    background: linear-gradient(-90deg, #fff, transparent);
}

[dir=rtl] .left-right-gradient::after {
    background: linear-gradient(-90deg, transparent, #ffffff);
}

[dir=rtl] .tw--translate-x-full {
    transform: translateX(100%);
}

[dir=rtl] .image-animation:after {
    transform: translate(50%, -50%) rotate(-45deg);
}

[dir=rtl] .ph-bold.ph-caret-right:before {
    content: "\e138";
}

[dir=rtl] .ph-bold.ph-arrow-up-right:before {
    content: "\e090";
}

[dir=rtl] .ph.ph-caret-right:before {
    content: "\e138";
}

[dir=rtl] .ph.ph-caret-left:before {
    content: "\e13a";
}

[dir=rtl] .ph.ph-arrow-right:before {
    content: "\e058";
}

[dir=rtl] .ph-bold.ph-caret-left:before {
    content: "\e13a";
}

[dir=rtl] .ph-bold.ph-caret-left:before {
    content: "\e13a";
}

[dir=rtl] .ph-bold.ph-arrow-right:before {
    content: "\e058";
}

[dir=rtl] .ph-bold.ph-arrow-left:before {
    content: "\e06c";
}

/* ================================== rtl css End ================================== */
/*# sourceMappingURL=main.css.map */




/* service cards */

/* ===== STACK WRAPPER ===== */
.card-stack {
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

/* ===== DESKTOP ===== */
@media (min-width: 1200px) {
    .card {
        position: absolute;
        width: 270px;
        min-height: 380px;
        border-radius: 28px;
        overflow: hidden;
        padding: 28px 24px;
        background: white;
        transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1),
            opacity 0.6s ease;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
        display: flex;
        flex-direction: column;
    }

    /* STACK */
    .card:nth-child(1) {
        transform: rotate(-12deg);
        z-index: 4;
        opacity: 1;
    }

    .card:nth-child(2) {
        transform: rotate(-6deg);
        z-index: 3;
        opacity: 1;
    }

    .card:nth-child(3) {
        transform: rotate(6deg);
        z-index: 2;
        opacity: 1;
    }

    .card:nth-child(4) {
        transform: rotate(12deg);
        z-index: 1;
        opacity: 1;
    }

    /* SPREAD */
    .card-stack.active .card:nth-child(1) {
        transform: translateX(-405px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(2) {
        transform: translateX(-135px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(3) {
        transform: translateX(135px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(4) {
        transform: translateX(405px) rotate(0deg);
    }
}

/* ===== 1400px+ ===== */
@media (min-width: 1400px) {
    .card {
        width: 300px;
        padding: 30px 26px;
    }

    .card-stack.active .card:nth-child(1) {
        transform: translateX(-450px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(2) {
        transform: translateX(-150px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(3) {
        transform: translateX(150px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(4) {
        transform: translateX(450px) rotate(0deg);
    }
}

/* ===== 1600px+ ===== */
@media (min-width: 1600px) {
    .card {
        width: 320px;
    }

    .card-stack.active .card:nth-child(1) {
        transform: translateX(-490px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(2) {
        transform: translateX(-163px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(3) {
        transform: translateX(163px) rotate(0deg);
    }

    .card-stack.active .card:nth-child(4) {
        transform: translateX(490px) rotate(0deg);
    }
}

/* ===== TABLET 2x2 ===== */
@media (max-width: 1199px) {
    .card-stack {
        position: static;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px;
        max-width: 900px;
        margin: 80px auto 0;
        align-items: stretch;
    }

    .card {
        position: relative;
        width: 100%;
        transform: none !important;
        border-radius: 24px;
        padding: 28px 24px;
        background: white;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
        display: flex;
        flex-direction: column;
        min-height: 380px;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 575px) {
    .card-stack {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 12px;
        margin-top: 40px;
    }

    .card {
        border-radius: 20px;
        padding: 20px;
        min-height: auto;
    }
}

/* ===== STAGGER ===== */
.card:nth-child(1) {
    transition-delay: 0.00s;
}

.card:nth-child(2) {
    transition-delay: 0.08s;
}

.card:nth-child(3) {
    transition-delay: 0.16s;
}

.card:nth-child(4) {
    transition-delay: 0.24s;
}

/* ===== BUTTON ALWAYS BOTTOM ===== */
.card .tw-mt-8 {
    margin-top: auto !important;
    padding-top: 16px;
}

/* ===== SECTION ===== */
.service-two {
    padding-bottom: 120px;
    overflow: hidden !important;
}

.service-two .section-heading {
    position: relative;
    z-index: 10;
    margin-bottom: 0;
}


/* ===== CARD INNER FIX ===== */
.service-two-item .pointer-events-auto {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.service-two-item .pointer-events-auto .tw-mt-8:last-child {
    margin-top: auto !important;
    padding-top: 16px;
}

/* ===== CARD OUTER EQUAL HEIGHT ===== */
.card-stack.active .card,
.card-stack .card {
    display: flex;
    flex-direction: column;
}

/* ===== FIX HEADING WRAP ===== */
.service-two-item h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    min-height: 48px;
    display: flex;
    align-items: flex-start;
}

/* ===== TABLET FIX ===== */
@media (max-width: 1199px) {
    .card {
        min-height: 420px !important;
    }

    .service-two-item .pointer-events-auto {
        min-height: 100%;
    }
}

/* ===== DESKTOP FIX ===== */
@media (min-width: 1200px) {
    .card {
        min-height: 420px !important;
    }
}


/* service card end*/



/* .splitTextStyleOne {
    font-size: 45px !important;
} */



.about-two h2 {
    font-size: 32px !important;
    line-height: 1.3 !important;
}

@media (max-width: 1200px) {
    .about-two h2 {
        font-size: 28px !important;
    }
}

@media (max-width: 768px) {
    .about-two h2 {
        font-size: 22px !important;
    }
}



/* BACKGROUND */
.mv-ultra-plus {
    background: #0b0b1f;
}

/* GLOW */
.mv-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(0, 123, 255, 0.25), transparent);
    top: -150px;
    left: -150px;
    filter: blur(140px);
}

/* CARD */
.mv-plus-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    padding: 32px;
    border-radius: 24px;
    height: 100%;
    transition: all 0.35s ease;
    color: #fff;
    position: relative;
}

/* HOVER EFFECT */
.mv-plus-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

/* ICON */
.mv-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 22px;
}

/* TEXT */
.mv-plus-card h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.mv-plus-card p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
}

.mv-plus-card ul {
    margin-top: 14px;
    padding-left: 18px;
}

.mv-plus-card li {
    font-size: 14px;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.85);
}

/* MOBILE */
@media (max-width: 992px) {
    .mv-glow {
        display: none;
    }
}



/* 
.nav-link{
    background-color: #0284C7 !important;
    color: #fff !important;
} */



.mv-new {
    background: #f8faff;
}

/* LEFT */
.mv-left {
    max-width: 630px;
}

.mv-badge {
    background: #eef3ff;
    color: #2f6fed;
    padding: 6px 16px;
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: 500;
}

.mv-title {
    font-size: 42px;
    line-height: 1.3;
}

.mv-title span {
    color: #2f6fed;
    font-style: italic;
}

.mv-text {
    margin-top: 16px;
    color: #000;
    font-size: 16px;
}

.mv-btn-wrap {
    margin-top: 25px;
}

.mv-image {
    margin-top: 40px;
}

.mv-image img {
    width: 100%;
    border-radius: 16px;
}

/* RIGHT */
.mv-right {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

/* CARD */
.mv-card {
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: 0.3s;
}

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

/* MISSION */
.mv-mission {
    border-left: 4px solid #2f6fed;
}

/* VISION */
.mv-vision {
    border-left: 4px solid #ff6b6b;
}

/* TEXT */
.mv-card h3 {
    margin-bottom: 10px;
}

.mv-card p {
    color: #000;
    font-size: 15px;
}

.mv-card ul {
    margin-top: 15px;
    padding-left: 0;
    list-style: none;
}

.mv-card li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 18px;
    color: #000;
}

.mv-card li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #2f6fed;
    font-size: 12px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .mv-title {
        font-size: 28px;
    }

    .mv-image {
        margin-top: 25px;
    }
}

/* ===== DARK PREMIUM BACKGROUND (NO IMAGE) ===== */
.service-two {
    background: radial-gradient(circle at 80% 50%, rgba(2, 132, 199, 0.25), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(14, 165, 233, 0.15), transparent 40%),
        linear-gradient(135deg, #020617 0%, #0f172a 100%) !important;
    position: relative;
    overflow: hidden;
    padding-top: 50px !important;
}

/* EXTRA GLOW EFFECT */
.service-two::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: rgba(2, 132, 199, 0.15);
    filter: blur(120px);
    top: -100px;
    right: -100px;
    z-index: 0;
}

.service-two::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(14, 165, 233, 0.12);
    filter: blur(120px);
    bottom: -120px;
    left: -100px;
    z-index: 0;
}

/* KEEP CONTENT ABOVE */
.service-two .container {
    position: relative;
    z-index: 2;
}

/* TEXT COLOR FOR DARK BG */
.service-two .section-heading h2,
.service-two .section-heading p {
    color: #ffffff !important;
}

.service-two .section-heading span {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* BUTTON HOVER */
.service-two-item .btn:hover {
    background: #0284C7 !important;
    color: #ffffff !important;
    border-color: #0284C7 !important;
}

.service-two-item .btn:hover span:last-child {
    background: #ffffff !important;
    color: #0284C7 !important;
}








.why-clean {
    background: #ffffff;
    padding-top: 80px;
    /* reduced top space */
    padding-bottom: 100px;
}

/* IMAGE */
.why-clean-img-wrap {
    display: flex;
    justify-content: center;
}

.why-clean-img {
    width: 100%;
    max-width: 520px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

/* CONTENT */
.why-clean-content {
    max-width: 600px;
}

/* TEXT */
.why-text {
    font-size: 16px;
    color: #000;
    margin-top: 12px;
    line-height: 1.6;
}

/* GRID FIX (NO WEIRD BREAKS) */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 20px;
    margin-top: 25px;
    font-size: 15px;
    color: #000;
}

/* prevent ugly wrapping */
.why-grid div {
    white-space: nowrap;
}

/* TABLET */
@media (max-width: 991px) {

    .why-clean {
        padding-top: 70px;
        padding-bottom: 80px;
    }

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

    .why-clean-img {
        max-width: 420px;
    }
}

/* MOBILE */
@media (max-width: 576px) {

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

    .why-grid div {
        white-space: normal;
        /* allow wrap only in mobile */
    }
}




/* counter */
/* SECTION */
.smm-counter {
    padding: 65px 20px;
    background: #fff;
}

/* GRID */
.smm-counter-container {
    max-width: 1150px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

/* CARD */
.smm-counter-card {
    text-align: center;
    padding: 35px 20px;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);

    border: 1px solid rgba(2, 132, 199, 0.2);

    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
}

/* 🔥 GLOW EFFECT */
.smm-counter-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(2, 132, 199, 0.25), transparent 70%);
    opacity: 0;
    transition: 0.4s;
}

/* HOVER */
.smm-counter-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: #0284C7;
    box-shadow: 0 20px 60px rgba(2, 132, 199, 0.25);
}

.smm-counter-card:hover::before {
    opacity: 1;
}

/* ICON */
.smm-counter-card i {
    font-size: 36px;
    color: #0284C7;
    margin-bottom: 14px;
    display: inline-block;
}

/* NUMBER */
.smm-counter-number {
    font-size: 38px;
    font-weight: 700;
    color: #000;
    letter-spacing: 1px;
}

/* TEXT */
.smm-counter-card p {
    font-size: 14px;
    color: #000;
    margin-top: 6px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .smm-counter-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .smm-counter-container {
        grid-template-columns: 1fr;
    }

    .smm-counter-card {
        padding: 28px 16px;
    }
}

/* counter end */



/* ===== PRICING SECTION COLOR FIX ===== */

.pricing-plan-two {
    background: linear-gradient(180deg, #f8fbff 0%, #e6f4ff 100%) !important;
    padding-top: 60px !important;
}

.price-experience-wrapper {
    background: #f8fbff !important;
}

.bg-main-two-600 {
    background: linear-gradient(135deg, #0284C7, #0369A1) !important;
    color: #fff !important;
}

.border-main-two-600 {
    border-color: #0284C7 !important;
}

.btn-main {
    background: #0284C7 !important;
    border: none !important;
    color: #fff !important;
}

.btn-main:hover {
    background: #0369A1 !important;
}

.bg-main-600 {
    background-color: #0284C7 !important;
}

.tw-text-lg {
    color: #000 !important;
}



.testimonials-slider .swiper-slide {
    transition: all 0.5s ease;
}

.testimonials-slider .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
    z-index: 3;
}

.testimonials-slider .swiper-slide-prev {
    transform: scale(0.9) translateX(-40px);
    opacity: 0.5;
}

.testimonials-slider .swiper-slide-next {
    transform: scale(0.9) translateX(40px);
    opacity: 0.5;
}

/* ICON COLORS */
.smm-icon-big {
    font-size: 28px;
    color: #0284C7;
}

.smm-icon-small {
    font-size: 20px;
    color: #0284C7;
}

.smm-quote {
    font-size: 28px;
    color: #0284C7;
}

.smm-user {
    font-size: 40px;
    color: #0284C7;
}

.smm-star {
    color: #facc15;
    font-size: 16px;
}


/* =========================
   FLOATING WHATSAPP
========================= */

.float-root {
    position: fixed;
    right: 18px;
    bottom: 90px;
    z-index: 999999;
}

.float-wa {
    width: 62px;
    height: 62px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 8px 28px rgba(37, 211, 102, 0.55);
    transition: transform 0.25s, box-shadow 0.25s;
    text-decoration: none;
}

.float-wa:hover {
    transform: scale(1.1);
    box-shadow: 0 14px 36px rgba(37, 211, 102, 0.7);
}

.float-wa::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(37, 211, 102, 0.45);
    border-radius: 50%;
    animation: waGlow 2.2s ease-out infinite;
    z-index: -1;
}

.float-wa::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(37, 211, 102, 0.25);
    border-radius: 50%;
    animation: waGlow 2.2s ease-out 0.6s infinite;
    z-index: -1;
}

@keyframes waGlow {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }

    70% {
        transform: scale(1.9);
        opacity: 0;
    }

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

.float-wa svg {
    width: 34px;
    height: 34px;
    fill: #fff;
}

/* MOBILE */
@media (max-width: 768px) {
    .float-root {
        right: 12px;
        bottom: 80px;
    }

    .float-wa {
        width: 54px;
        height: 54px;
    }

    .float-wa svg {
        width: 28px;
        height: 28px;
    }
}

.float-social-left {
    position: fixed;
    left: 13px;
    /* bottom: 90px; */
    top: 85%;
    transform: translateY(-50%);
    z-index: 999999;

    display: flex;
    flex-direction: row;
    gap: 12px;
}

.float-social-link {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    transition: .3s;
}

.float-social-link:hover {
    transform: translateY(-6px) scale(1.08);
}

.float-linkedin {
    background: #0A66C2;
    color: white !important;
}

.float-youtube {
    background: #FF0000;
    color: white !important;
}

.float-instagram {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4);
    color: white !important;
}

.float-facebook {
    background: #1877F2;
    color: white !important;
}



@media(max-width:768px) {

    .float-social-left {
        left: 8px;
        bottom: 90px;
        top: auto;
        transform: none;
        gap: 8px;
    }

    .float-social-link {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

}




.float-social-v2 {
    position: fixed;
    left: 10px;
    top: 72%;
    transform: translateY(-50%);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 14px;
   
}



.float-social-v2__item {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    font-size: 26px;

    box-shadow: 0 8px 22px rgba(0, 0, 0, .18);
    transition: .35s ease;
}

.float-social-v2__item:hover {
    transform: translateX(10px) scale(1.08);

}

.float-social-v2__linkedin {
    background: #0A66C2;
    color: white !important;
}

.float-social-v2__youtube {
    background: #FF0000;
    color: white !important;
}

.float-social-v2__instagram {
    background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF, #515BD4);
    color: white !important;
}

.float-social-v2__facebook {
    background: #1877F2;
    color: white !important;
}

/* Floating animation */

.float-social-v2__item:nth-child(1) {
    animation: v2Float 2.8s ease-in-out infinite;
}

.float-social-v2__item:nth-child(2) {
    animation: v2Float 2.8s ease-in-out .3s infinite;
}

.float-social-v2__item:nth-child(3) {
    animation: v2Float 2.8s ease-in-out .6s infinite;
}

.float-social-v2__item:nth-child(4) {
    animation: v2Float 2.8s ease-in-out .9s infinite;
}

@keyframes v2Float {

    0% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }

    100% {
        transform: translateX(0);
    }

}

@media(max-width:768px) {

    .float-social-v2 {

        left: 10px;
        gap: 10px;
        display: none;
    }

    .float-social-v2__item {

        width: 46px;
        height: 46px;
        font-size: 20px;

    }

}



/* Google Font */

/* ── Variables ── */
:root {
    --smm-primary: #0284C7;
    --smm-primary-dark: #0369A1;
    --smm-primary-deeper: #075985;
    --smm-primary-light: #E0F2FE;
    --smm-text: #000;
    --smm-muted: #000;
    --smm-border: #E2E8F0;
    --smm-bg: #F8FAFC;
    --smm-white: #FFFFFF;
    --smm-radius: 16px;
    --smm-radius-sm: 10px;
    --smm-shadow: 0 4px 24px rgba(2, 132, 199, 0.08);
    --smm-shadow-hover: 0 12px 40px rgba(2, 132, 199, 0.18);
    --smm-font-display: 'Sora', sans-serif;
    --smm-font-body: 'DM Sans', sans-serif;
}

/* ── Base ── */
.smm-page {
    font-family: var(--smm-font-body);
    color: var(--smm-text);
    background: var(--smm-white);
    overflow-x: hidden;
}

.smm-container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ── Shared Section ── */
.smm-section {
    padding: 100px 0;
}

.smm-section-head {
    text-align: center;
    margin-bottom: 64px;
}

.smm-section-head__title {
    font-family: var(--smm-font-display);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    color: var(--smm-text);
    margin: 10px 0 16px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.smm-section-head__sub {
    font-size: 17px;
    color: var(--smm-muted);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
    font-weight: 300;
}

/* ── Overline ── */
.smm-overline {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--smm-primary);
    background: var(--smm-primary-light);
    padding: 6px 16px;
    border-radius: 100px;
}

.smm-overline--light {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ── Buttons ── */
.smm-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 30px;
    border-radius: 100px;
    font-family: var(--smm-font-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.smm-btn--primary {
    background: var(--smm-primary);
    color: #fff;
    border-color: var(--smm-primary);
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.3);
}

.smm-btn--primary:hover {
    background: var(--smm-primary-dark);
    border-color: var(--smm-primary-dark);
    box-shadow: 0 8px 30px rgba(2, 132, 199, 0.4);
    transform: translateY(-2px);
}

.smm-btn--ghost {
    background: transparent;
    color: var(--smm-primary);
    border-color: var(--smm-border);
}

.smm-btn--ghost:hover {
    border-color: var(--smm-primary);
    background: var(--smm-primary-light);
    transform: translateY(-2px);
}

.smm-btn--white {
    background: #fff;
    color: var(--smm-primary);
    border-color: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.smm-btn--white:hover {
    background: var(--smm-primary-light);
    transform: translateY(-2px);
}

.smm-btn--outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.smm-btn--outline-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: translateY(-2px);
}

/* ─────────────────────────────────
   1. HERO
───────────────────────────────── */
/* =========================
   INNER HERO FINAL PERFECT
========================= */

.smm-hero--inner {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* OVERLAY */
.smm-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(2, 6, 23, 0.65) 0%,
            rgba(2, 132, 199, 0.3) 60%,
            rgba(2, 132, 199, 0.1) 100%);
    z-index: 1;
}

/* CONTAINER ALIGN (THIS IS KEY FIX) */
.smm-hero--inner .smm-container {
    position: relative;
    z-index: 2;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
    /* balanced spacing */
}

/* CONTENT BLOCK */
.smm-hero__inner {
    max-width: 620px;
}

/* TITLE */
.smm-hero__title--light {
    color: #fff;
    font-size: clamp(34px, 4.5vw, 52px);
    line-height: 1.2;
    margin: 12px 0 14px;
}

/* DESC */
.smm-hero__desc--light {
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
    max-width: 520px;
}

/* BADGE */
.smm-badge--light {
    /* background: rgba(255, 255, 255, 0.12); */
    color: #fff;
    backdrop-filter: blur(4px);
}

/* REMOVE OLD BG */
.smm-hero--inner .smm-hero__bg-grid,
.smm-hero--inner .smm-hero__blob {
    display: none;
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px) {
    .smm-hero--inner {
        min-height: 360px;
        background-position: center;
    }

    .smm-hero--inner .smm-container {
        padding: 0 30px;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 600px) {
    .smm-hero--inner {
        min-height: 300px;
        padding: 80px 0;
    }

    .smm-hero--inner .smm-container {
        padding: 0 20px;
    }

    .smm-hero__title--light {
        font-size: 28px;
    }

    .smm-hero__desc--light {
        font-size: 14px;
    }
}

/* ─────────────────────────────────
   2. WHAT WE DO
───────────────────────────────── */
/* =========================
   WHAT WE DO - FINAL PREMIUM
========================= */

.smm-what {
    padding: 60px 0;
    background: #f8fafc;
}

/* HEAD */
.smm-section-head {
    text-align: center;
    margin-bottom: 55px;
}

/* 🔵 SPAN (NOW BLUE) */
.smm-overline {
    display: inline-block;
    background: rgba(2, 132, 199, 0.1);
    color: #0284C7;
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

/* HEADING */
.smm-section-head__title {
    font-size: 40px;
    font-weight: 700;
    font-family: "Poppins", sans-serif;
    color: #020617;
    margin-bottom: 12px;
}

/* SUB */
.smm-section-head__sub {
    font-size: 16px;
    color: #1e293b;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* GRID */
.smm-what__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

/* CARD */
.smm-what__card {
    background: #ffffff;
    border-radius: 18px;
    padding: 30px 26px;
    border: 1px solid #e5e7eb;
    transition: all 0.35s ease;
    position: relative;
}

/* 🔥 PREMIUM HOVER (NO STICK LINE) */
.smm-what__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(2, 132, 199, 0.12);
    border-color: rgba(2, 132, 199, 0.3);
}

/* ICON BOX */
.smm-what__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: 0.3s;
}

/* ICON */
.smm-what__icon svg {
    width: 26px;
    height: 26px;
    color: #334155;
    stroke-width: 2;
    transition: 0.3s;
}

/* 🔥 HOVER ICON EFFECT */
.smm-what__card:hover .smm-what__icon {
    background: rgba(2, 132, 199, 0.1);
}

.smm-what__card:hover .smm-what__icon svg {
    color: #0284C7;
}

/* TITLE */
.smm-what__card-title {
    font-size: 18px;
    font-weight: 600;
    color: #020617;
    margin-bottom: 10px;
}

/* DESC */
.smm-what__card-desc {
    font-size: 14px;
    color: #0f172a;
    line-height: 1.6;
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px) {
    .smm-what__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 600px) {
    .smm-what__grid {
        grid-template-columns: 1fr;
    }

    .smm-section-head__title {
        font-size: 28px;
    }
}

/* ─────────────────────────────────
   3. PROCESS
───────────────────────────────── */
.smm-process {
    background: var(--smm-white);
    padding-top: 30px !important;
}

.smm-process__track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.smm-process__line {
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: linear-gradient(to bottom, var(--smm-primary), var(--smm-primary-deeper));
    opacity: 0.2;
}

.smm-process__step {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    padding: 20px 0;
}

.smm-process__dot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(2, 132, 199, 0.25);
}

.smm-process__dot span {
    font-family: var(--smm-font-display);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
}

.smm-process__card {
    background: var(--smm-bg);
    border: 1px solid var(--smm-border);
    border-radius: var(--smm-radius);
    padding: 28px 32px;
    flex: 1;
    transition: box-shadow 0.25s ease;
}

.smm-process__card:hover {
    box-shadow: var(--smm-shadow);
}

.smm-process__card h3 {
    font-family: var(--smm-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--smm-text);
    margin: 0 0 10px;
}

.smm-process__card p {
    font-size: 15px;
    color: var(--smm-muted);
    line-height: 1.7;
    margin: 0;
    font-weight: 300;
}

/* =========================
   DELIVERABLES - FINAL FIX
========================= */

.smm-deliverables {
    background: #f8fafc;
    padding: 30px 0;
}

/* GRID */
.smm-deliverables__inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 60px;
    align-items: flex-start;
}

/* LEFT SIDE FIX */
.smm-deliver-title {
    font-size: 34px;
    line-height: 1.25;
    font-weight: 700;
    color: #020617;
    margin-bottom: 16px;
}

/* 🔥 FIX PARAGRAPH ALIGN */
.smm-deliver-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #000;
    max-width: 420px;
    margin: 0;
    /* important fix */
}

/* BUTTON */
.smm-deliver-btn {
    margin-top: 24px;
    display: inline-block;
}

/* RIGHT GRID */
.smm-deliverables__right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* CARD */
.smm-deliverables__item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 13px 16px;
    font-size: 14px;
    color: #020617;
    transition: all 0.25s ease;
}

/* 🔥 PREMIUM HOVER (NO BLUE TEXT ISSUE) */
.smm-deliverables__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
    border-color: #dbeafe;
}

/* TEXT FIX */
.smm-deliverables__text {
    color: #020617;
    line-height: 1.4;
}

/* ICON */
.smm-check {
    width: 22px;
    height: 22px;
    background: rgba(2, 132, 199, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.smm-check svg {
    width: 12px;
    height: 12px;
    stroke: #0284C7;
}

/* ICON HOVER ONLY */
.smm-deliverables__item:hover .smm-check {
    background: #0284C7;
}

.smm-deliverables__item:hover .smm-check svg {
    stroke: #fff;
}



/* =========================
   TABLET FIX (768 ONLY)
========================= */

@media (min-width: 768px) and (max-width: 991px) {

    /* TEXT ALIGN FIX */
    .smm-deliverables__left,
    .smm-deliver-title,
    .smm-deliver-desc {
        text-align: left !important;
        margin-left: 0 !important;
    }

}


/* =========================
   MOBILE FIX ONLY
========================= */

@media (max-width: 767px) {

    /* 🔥 CHANGE ORDER ONLY (NO SIZE CHANGE) */
    .smm-deliverables__inner {
        display: flex;
        flex-direction: column;
    }

    .smm-deliverables__right {
        order: 2;
    }

    .smm-deliver-btn {
        order: 3;
        margin-top: 20px;
    }

}

/* ─────────────────────────────────
   5. PLATFORMS
───────────────────────────────── */
.smm-platforms {
    background: #f2f4f2;
    padding-top: 30px !important;
}

.smm-platforms__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.smm-platform-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: var(--smm-white);
    border: 1px solid var(--smm-border);
    border-radius: var(--smm-radius);
    padding: 32px 28px;
    min-width: 130px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    cursor: default;
}

.smm-platform-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--smm-shadow-hover);
    border-color: var(--smm-border);
}

.smm-platform-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.smm-platform-card:hover .smm-platform-card__icon {
    transform: scale(1.1);
}

.smm-platform-card__icon svg {
    width: 28px;
    height: 28px;
}

.smm-platform-card__name {
    font-size: 13px;
    font-weight: 500;
    color: var(--smm-text);
}

/* ─────────────────────────────────
   6. WHY CHOOSE US
───────────────────────────────── */
/* ─────────────────────────────────
   WHY SECTION (PREMIUM FIXED)
───────────────────────────────── */

.smm-why {
    background: #ffff;
    padding: 50px 0;
}

/* HEAD */
.smm-section-head__title {
    font-size: 34px;
    /* FIXED */
    font-weight: 700;
    color: #000000;
}

.smm-section-head__sub {
    color: #000000;
    /* NO GRAY */
    font-size: 15px;
    margin-top: 10px;
}

/* GRID */
.smm-why__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}

/* CARD BASE */
.smm-why__card {
    border-radius: 16px;
    padding: 30px 26px;
    transition: all 0.25s ease;
    border: 1px solid #eee;
}

/* DIFFERENT PREMIUM CARD COLORS */
.smm-why__card:nth-child(1) {
    background: #FFF7ED;
}

/* orange */
.smm-why__card:nth-child(2) {
    background: #F0F9FF;
}

/* light blue */
.smm-why__card:nth-child(3) {
    background: #F0FDF4;
}

/* green */
.smm-why__card:nth-child(4) {
    background: #FEF2F2;
}

/* red */
.smm-why__card:nth-child(5) {
    background: #F5F3FF;
}

/* purple */
.smm-why__card:nth-child(6) {
    background: #ECFEFF;
}

/* cyan */

/* HOVER */
.smm-why__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* ICON BOX */
.smm-why__icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 16px;
}

/* DIFFERENT ICON COLORS */
.smm-why__card:nth-child(1) .smm-why__icon {
    background: #FDBA74;
    color: #9A3412;
}

.smm-why__card:nth-child(2) .smm-why__icon {
    background: #7DD3FC;
    color: #075985;
}

.smm-why__card:nth-child(3) .smm-why__icon {
    background: #86EFAC;
    color: #065F46;
}

.smm-why__card:nth-child(4) .smm-why__icon {
    background: #FCA5A5;
    color: #7F1D1D;
}

.smm-why__card:nth-child(5) .smm-why__icon {
    background: #C4B5FD;
    color: #4C1D95;
}

.smm-why__card:nth-child(6) .smm-why__icon {
    background: #67E8F9;
    color: #155E75;
}

/* ICON SIZE */
.smm-why__icon i {
    font-size: 18px;
}

/* TITLE */
.smm-why__card-title {
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
}

/* DESC */
.smm-why__card-desc {
    font-size: 14px;
    color: #000000;
    /* FIXED BLACK */
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 576px) {
    .smm-why {
        padding: 60px 0;
    }

    .smm-section-head__title {
        font-size: 28px;
    }

    .smm-why__card {
        padding: 24px 20px;
    }
}

/* ─────────────────────────────────
   7. FINAL CTA
───────────────────────────────── */
/* CTA SECTION */
.smm-cta {
    position: relative;
    padding: 85px 0;
    background: linear-gradient(135deg, #0f172a, #0284C7);
    overflow: hidden;
}

/* ICONS (FIXED VISIBILITY) */
.smm-cta__icons {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.smm-cta__icons i {
    position: absolute;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.25);
    /* FIXED visibility */
    animation: floatIcon 6s ease-in-out infinite;
}

/* POSITIONS */
.smm-cta__icons i:nth-child(1) {
    top: 20%;
    left: 12%;
}

.smm-cta__icons i:nth-child(2) {
    bottom: 25%;
    left: 20%;
    animation-delay: 1s;
}

.smm-cta__icons i:nth-child(3) {
    top: 25%;
    right: 15%;
    animation-delay: 2s;
}

.smm-cta__icons i:nth-child(4) {
    bottom: 20%;
    right: 18%;
    animation-delay: 3s;
}

/* FLOAT */
@keyframes floatIcon {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* INNER */
.smm-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin: 0 auto;
    text-align: center;
}

/* TAG FIX */
.smm-cta__tag {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 600;
    color: #0284C7;
    background: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 14px;
}

/* TITLE */
.smm-cta__title {
    font-size: 34px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 14px;
}

/* SUB */
.smm-cta__sub {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 26px;
}

/* BUTTONS */
.smm-cta__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* PRIMARY */
.smm-btn--primary {
    background: #ffffff;
    color: #000;
    padding: 12px 22px;
    border-radius: 30px;
    transition: 0.25s;
}

.smm-btn--primary:hover {
    background: #f1f5f9;
}

/* GHOST */
.smm-btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 30px;
}

.smm-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* RESPONSIVE */
@media (max-width: 576px) {
    .smm-cta {
        padding: 65px 0;
    }

    .smm-cta__title {
        font-size: 26px;
    }

    .smm-cta__icons i {
        display: none;
    }
}

/* ─────────────────────────────────
   RESPONSIVE
───────────────────────────────── */
@media (max-width: 900px) {
    .smm-deliverables__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .smm-deliverables__left .smm-section-head__title {
        text-align: center;
    }

    .smm-deliverables__left {
        text-align: center;
    }

    .smm-deliverables__left .smm-overline {
        margin: 0 auto;
    }
}

@media (max-width: 640px) {
    .smm-section {
        padding: 72px 0;
    }

    .smm-hero {
        padding: 100px 0 60px;
        min-height: unset;
    }

    .smm-hero__stats {
        gap: 28px;
    }

    .smm-hero__actions {
        flex-direction: column;
        width: 100%;
    }

    .smm-btn {
        /* width: 100%; */
        justify-content: center;
    }

    .smm-deliverables__right {
        grid-template-columns: 1fr;
    }

    /* .smm-process__line {
        display: none;
    } */

    .smm-why__grid,
    .smm-what__grid {
        grid-template-columns: 1fr;
    }

    .smm-cta__actions {
        flex-direction: column;
        width: fit-content;
        margin-left: 58px;
    }
}









/* ─── CSS VARIABLES ─── */
:root {
    --ig-blue: #0284C7;
    --ig-blue-light: #0EA5E9;
    --ig-purple: #7C3AED;
    --ig-purple-soft: #A78BFA;
    --ig-purple-muted: #EDE9FE;
    --ig-teal: #0D9488;
    --ig-teal-soft: #CCFBF1;
    --ig-neutral-50: #F8FAFC;
    --ig-neutral-100: #F1F5F9;
    --ig-neutral-200: #E2E8F0;
    --ig-neutral-400: #94A3B8;
    --ig-neutral-600: #475569;
    --ig-neutral-800: #1E293B;
    --ig-neutral-900: #0F172A;
    --ig-white: #FFFFFF;

    --ig-font-display: 'Fraunces', Georgia, serif;
    --ig-font-body: 'DM Sans', sans-serif;

    --ig-section-pad: 100px 40px;
    --ig-max-width: 1160px;
}

/* ─── BASE ─── */
.smm-ig-page {
    font-family: var(--ig-font-body);
    color: var(--ig-neutral-800);
    background: var(--ig-white);
    -webkit-font-smoothing: antialiased;
}

.smm-ig-page *,
.smm-ig-page *::before,
.smm-ig-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── OVERLINE ─── */
.smm-ig-overline {
    display: inline-block;
    font-family: var(--ig-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ig-blue);
    margin-bottom: 16px;
}

/* ─── BUTTONS ─── */
.smm-ig-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ig-font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 14px 32px;
    border-radius: 6px;
    cursor: pointer;
    border: none;
    transition: all 0.25s ease;
}

.smm-ig-btn--primary {
    background: var(--ig-blue);
    color: var(--ig-white);
}

.smm-ig-btn--primary:hover {
    background: var(--ig-blue-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.3);
}

.smm-ig-btn--ghost {
    background: transparent;
    color: var(--ig-neutral-800);
    border: 1.5px solid var(--ig-neutral-200);
}

.smm-ig-btn--ghost:hover {
    border-color: var(--ig-neutral-400);
    background: var(--ig-neutral-50);
}

/* ======================================================
   1. HERO SECTION
   ====================================================== */


/* ======================================================
   2. PLATFORM OVERVIEW — SPLIT LAYOUT
   ====================================================== */
.smm-ig-overview {
    padding: var(--ig-section-pad);
    background: var(--ig-white);
}

/* layout */
.smm-ig-overview__inner {
    max-width: var(--ig-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: start;
}

/* 🔥 PREMIUM OVERLINE */
.smm-ig-overline {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(2, 132, 199, 0.08);
    color: #0284C7;
    margin-bottom: 18px;
}

/* 🔥 HEADING FIX */
.smm-ig-overview__text h2 {
    font-family: var(--ig-font-display);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 600;
    line-height: 1.25;
    color: #000;
    margin-bottom: 20px;
}

/* 🔥 TEXT BLACK (no gray) */
.smm-ig-overview__text p {
    font-size: 15px;
    line-height: 1.75;
    color: #000;
    margin-bottom: 14px;
    max-width: 520px;
}

/* RIGHT SIDE */
.smm-ig-overview__highlights {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #d1d5db;
    /* darker line */
}

/* ITEMS */
.smm-ig-highlight-point {
    display: flex;
    gap: 18px;
    padding: 22px 26px;
    transition: all 0.25s ease;
}

/* 🔥 HOVER PREMIUM */
.smm-ig-highlight-point:hover {
    background: #f8fafc;
}

/* DIVIDER */
.smm-ig-highlight-point+.smm-ig-highlight-point {
    border-top: 1px solid #d1d5db;
}

/* ICON */
.smm-ig-highlight-point__icon {
    font-size: 16px;
    color: #0284C7;
    margin-top: 3px;
}

/* TITLE */
.smm-ig-highlight-point h4 {
    font-size: 15px;
    font-weight: 700;
    color: #000;
    margin-bottom: 6px;
}

/* DESC */
.smm-ig-highlight-point p {
    font-size: 14px;
    line-height: 1.6;
    color: #000;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .smm-ig-overview__inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .smm-ig-overview__highlights {
        border-left: none;
        border-top: 1px solid #d1d5db;
    }

    .smm-ig-highlight-point {
        padding: 18px 0;
    }
}

/* ======================================================
   3. WHAT WE DO — LIST STYLE
   ====================================================== */

/* =======================
   SECTION
   ======================= */
.smm-ig-services {
    padding: 60px 0 100px;
    /* reduced top space */
    background: #f1f5f9;
    /* soft light background (not white) */
}

.smm-ig-services__inner {
    max-width: var(--ig-max-width);
    margin: 0 auto;
}

/* =======================
   LEFT CONTENT
   ======================= */

.smm-ig-services__left {
    max-width: 600px;
}

/* KEEP YOUR FONT */

.smm-ig-services__title {
    font-family: var(--ig-font-display);
    font-size: clamp(26px, 3vw, 36px);
    color: #000;
    margin: 12px 0 14px;
    line-height: 1.25;
}

.smm-ig-services__desc {
    color: #000;
    line-height: 1.7;
}

/* =======================
   GRID
   ======================= */

.smm-ig-grid {
    margin-top: 50px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* =======================
   CARD
   ======================= */

.smm-ig-card {
    padding: 36px 26px 26px;
    /* top space for icon */
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    position: relative;
    transition: all 0.3s ease;
}

/* HOVER */

.smm-ig-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
}

/* =======================
   ICON (FIXED FLOAT)
   ======================= */

.smm-ig-card .icon {
    position: absolute;
    top: -18px;
    left: 22px;

    width: 44px;
    height: 44px;

    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    border: 1px solid #e5e7eb;

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

/* ICON SIZE */

.smm-ig-card .icon i {
    font-size: 15px;
    color: #0284C7;
}

/* =======================
   TEXT
   ======================= */

.smm-ig-card h4 {
    font-size: 16px;
    color: #000;
    margin-bottom: 8px;
}

.smm-ig-card p {
    font-size: 14px;
    color: #000;
    line-height: 1.6;
}

/* =======================
   RESPONSIVE
   ======================= */

@media (max-width: 1024px) {

    .smm-ig-services__inner {
        padding: 0 24px;
    }

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

@media (max-width: 768px) {

    .smm-ig-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .smm-ig-services {
        padding-top: 10px;
    }

    .smm-ig-services__inner {
        padding: 0 16px;
    }

    .smm-ig-services__title {
        font-size: 22px;
    }

    .smm-ig-card {
        padding: 32px 20px 20px;
    }
}


/* ======================================================
   4. CONTENT STRATEGY — HORIZONTAL STEPS
   ====================================================== */


.smm-ig-strategy {
    padding: 80px 20px;
    /* FIX: side spacing added */
    background: #f8fafc;
}

.smm-ig-strategy__inner {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* =======================
   HEADING
   ======================= */

.smm-ig-strategy h2 {
    font-family: var(--ig-font-display);
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.2;
    max-width: 680px;
    /* FIX: avoid too long */
    margin-bottom: 16px;
    color: #000;
}

.smm-ig-strategy__intro {
    max-width: 520px;
    margin-bottom: 60px;
    /* FIX: reduced gap */
    line-height: 1.7;
    color: #000;
}

/* =======================
   GRID
   ======================= */

.smm-ig-flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    /* FIX: slightly tighter */
}

/* =======================
   CARD
   ======================= */

.smm-ig-flow__step {
    background: #ffffff;
    border-radius: 20px;
    padding: 36px 28px;
    /* FIX: balanced */
    border: 1px solid #e5e7eb;

    display: flex;
    flex-direction: column;

    min-height: 320px;
    /* FIX: better size */
    width: 100%;

    transition: all 0.25s ease;
}

.smm-ig-flow__step:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
}

/* =======================
   ICON
   ======================= */

.smm-ig-card-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}

/* HARD RESET */

.smm-ig-strategy .icon {
    position: static !important;
    transform: none !important;
    animation: none !important;

    width: 56px;
    height: 56px;

    border-radius: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    margin-bottom: 10px;
    /* FIX */
}

/* COLORS */

.icon.green {
    background: #dcfce7;
    color: #16a34a;
}

.icon.orange {
    background: #ffedd5;
    color: #ea580c;
}

.icon.purple {
    background: #ede9fe;
    color: #7c3aed;
}

.icon.pink {
    background: #fce7f3;
    color: #db2777;
}

/* =======================
   TEXT
   ======================= */

.smm-ig-flow__step h4 {
    font-size: 18px;
    margin-bottom: 6px;
    color: #000;
}

.smm-ig-flow__step p {
    font-size: 14px;
    line-height: 1.6;
    color: #000;
    margin-bottom: 22px;
}


.smm-ig-strategy .btn {
    margin-top: auto;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    background: #0284C7;
    color: #fff;

    padding: 8px 14px;
    border-radius: 999px;

    font-size: 13px;
    text-decoration: none;

    width: fit-content;
}

.smm-ig-strategy .btn span {
    width: 26px;
    height: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
    color: #0284C7;

    border-radius: 50%;

    transition: transform 0.3s ease;
}

.smm-ig-strategy .btn:hover span {
    transform: translate(4px, -2px);
}




/* 1024 → 2x2 */
@media (max-width: 1024px) {
    .smm-ig-flow {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 768 → ALSO 2x2 (IMPORTANT FIX) */
@media (max-width: 768px) {
    .smm-ig-flow {
        grid-template-columns: repeat(2, 1fr);
        /* 🔥 FIX */
        gap: 20px;
    }

    .smm-ig-strategy {
        padding: 70px 16px;
    }
}

/* ONLY MOBILE → 1 column */
@media (max-width: 576px) {
    .smm-ig-flow {
        grid-template-columns: 1fr;
    }

    .smm-ig-flow__step {
        min-height: auto;
    }
}

/* ======================================================
   5. GROWTH PROCESS — VERTICAL TIMELINE
   ====================================================== */
/* ======================================================
   GROWTH PROCESS
   ====================================================== */
.smm-ig-process {
    padding-top: 30px;
    background: #fff;
}

.smm-ig-process__inner {
    max-width: var(--ig-max-width);
    margin: 0 auto;
}

/* HEADING */
.smm-ig-process__head {
    text-align: center;
    margin-bottom: 56px;
}

.smm-ig-process__head h2 {
    font-family: var(--ig-font-display);
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.2;
    margin-bottom: 12px;
    color: #000;
}

.smm-ig-process__head p {
    font-size: 15px;
    color: #000;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto;
}

/* STEPS */
.smm-ig-process__steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: relative;
    margin-bottom: 40px;
}

.smm-ig-process__connector {
    position: absolute;
    top: 27px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}

.smm-ig-process__connector-fill {
    height: 100%;
    background: #0284C7;
    transition: width 0.4s ease;
}

.smm-ig-process__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    padding: 0 4px;
}

.smm-ig-process__step-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.smm-ig-process__step.active .smm-ig-process__step-circle {
    background: #0284C7;
    border-color: #0284C7;
    color: #fff;
}

.smm-ig-process__step.done .smm-ig-process__step-circle {
    background: #e0f2fe;
    border-color: #0284C7;
    color: #0284C7;
}

.smm-ig-process__step-label {
    font-size: 11px;
    font-weight: 600;
    color: #000;
    text-align: center;
    line-height: 1.4;
    word-break: break-word;
    transition: color 0.25s;
}

.smm-ig-process__step.active .smm-ig-process__step-label,
.smm-ig-process__step.done .smm-ig-process__step-label {
    color: #0284C7;
}

/* PANEL */
.smm-ig-process__panel {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-left: 4px solid #0284C7;
    border-radius: 20px;
    padding: 36px 40px;
    min-height: 200px;
    width: 100%;
}

.smm-ig-process__panel-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #0284C7;
    margin-bottom: 10px;
}

.smm-ig-process__panel-title {
    font-family: var(--ig-font-display);
    font-size: 24px;
    font-weight: 800;
    color: #000;
    margin-bottom: 12px;
}

.smm-ig-process__panel-desc {
    font-size: 15px;
    color: #000;
    line-height: 1.75;
}

.smm-ig-process__panel-tag {
    display: inline-block;
    margin-top: 18px;
    font-size: 11px;
    font-weight: 700;
    color: #0369a1;
    background: #e0f2fe;
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* NAV — INSIDE THE LAYOUT NOT OUTSIDE */
.smm-ig-process__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
}

.smm-ig-process__nav-btn {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.smm-ig-process__nav-btn:hover {
    border-color: #0284C7;
    color: #0284C7;
}

.smm-ig-process__nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.smm-ig-process__nav-dots {
    display: flex;
    gap: 6px;
}

.smm-ig-process__nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    cursor: pointer;
    transition: background 0.2s;
}

.smm-ig-process__nav-dot.active {
    background: #0284C7;
}

/* ======================================================
   TABLET — 1024px
   ====================================================== */
@media (max-width: 1024px) {
    .smm-ig-process {
        padding-left: 24px;
        padding-right: 24px;
    }

    .smm-ig-process__step-circle {
        width: 44px;
        height: 44px;
        font-size: 11px;
    }

    .smm-ig-process__connector {
        top: 22px;
    }

    .smm-ig-process__step {
        padding: 0 2px;
    }

    .smm-ig-process__step-label {
        font-size: 9.5px;
        word-break: break-word;
        text-align: center;
        line-height: 1.3;
        width: 100%;
    }

    .smm-ig-process__panel {
        padding: 28px 32px;
    }

    .smm-ig-process__panel-title {
        font-size: 20px;
    }
}


@media (max-width: 480px) {
    .smm-ig-process__steps {
        display: flex;
        overflow-x: auto;
        gap: 0;
        padding-bottom: 12px;
        margin-bottom: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        grid-template-columns: unset;
        justify-content: space-between;
        align-items: flex-start;
        /* ← ensures all steps start from same top */
    }

    .smm-ig-process__step {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        /* ← anchors circle to top */
        vertical-align: top;
    }

    .smm-ig-process__step-circle {
        width: 36px;
        height: 36px;
        font-size: 10px;
        margin-bottom: 6px;
        flex-shrink: 0;
        display: flex;
        /* ← centers number inside circle */
        align-items: center;
        justify-content: center;
    }

    .smm-ig-process__step-label {
        font-size: 8.5px;
        text-align: center;
        line-height: 1.3;
        word-break: break-word;
        width: 100%;
        display: block;
        /* ← prevents inline quirks */
    }
}


/* ======================================================
   RESULTS WE DELIVER
   ====================================================== */
/* ======================================================
   RESULTS SECTION (FINAL CLEAN FIX)
   ====================================================== */

.smm-ig-results {
    padding: var(--ig-section-pad);
    background: #fff;
}

.smm-ig-results__inner {
    max-width: var(--ig-max-width);
    margin: 0 auto;
}

/* ================= HEADER ================= */

.smm-ig-results__header {
    display: flex;
    flex-direction: column;
    margin-bottom: 48px;
    max-width: 520px;
}

/* FIX OVERLINE (NO GLOBAL ISSUE) */
.smm-ig-results .smm-ig-overline {
    display: inline-block;
    padding: 6px 14px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    background: #e2e8f0;
    color: #0284C7;
    letter-spacing: 0.08em;
    width: fit-content;
    margin-bottom: 12px;
}

.smm-ig-results__header h2 {
    font-family: var(--ig-font-display);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 600;
    line-height: 1.2;
    color: #0f172a;
}

.smm-ig-results__desc {
    font-size: 14.5px;
    line-height: 1.7;
    color: #000;
    margin-top: 12px;
}

/* ================= GRID ================= */

.smm-ig-results__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}

/* ================= CARD ================= */

.smm-ig-result-card {
    border-radius: 22px;
    padding: 34px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: all 0.25s ease;
}

.smm-ig-result-card:hover {
    transform: translateY(-6px);
}

/* ================= TOP ================= */

.smm-ig-result-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smm-ig-result-card__icon {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.smm-ig-result-card__num {
    font-size: 20px;
    font-weight: 800;
}

/* ================= TEXT FIX ================= */

.smm-ig-result-card h3 {
    font-family: var(--ig-font-display);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a !important;
}

.smm-ig-result-card p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #000 !important;
}

/* ================= PREMIUM CARD COLORS ================= */

/* SOFT BLUE */
.smm-ig-result-card--blue {
    background: #eef6ff;
    border: 1px solid #cfe3ff;
}

.smm-ig-result-card--blue .smm-ig-result-card__num {
    color: #2563eb;
}

/* GOLD (REPLACED ORANGE) */
.smm-ig-result-card--orange {
    background: #fff9ec;
    border: 1px solid #f7e1a3;
}

.smm-ig-result-card--orange .smm-ig-result-card__num {
    color: #ca8a04;
}

/* SOFT GREEN */
.smm-ig-result-card--green {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.smm-ig-result-card--green .smm-ig-result-card__num {
    color: #16a34a;
}

/* SOFT VIOLET */
.smm-ig-result-card--violet {
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

.smm-ig-result-card--violet .smm-ig-result-card__num {
    color: #7c3aed;
}

/* ================= TABLET ================= */

@media (max-width: 1024px) {

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

    .smm-ig-results__inner {
        padding: 0 20px;
    }

}

/* ================= MOBILE ================= */

@media (max-width: 480px) {

    .smm-ig-results__head {
        text-align: left;
    }

    .smm-ig-results__head h2 {
        text-align: left;
    }

    .smm-ig-results__head p {
        text-align: left;
    }

    .smm-ig-results__grid {
        grid-template-columns: 1fr;
    }

    .smm-ig-result-card {
        padding: 26px 20px;
    }

    .smm-ig-result-card__num {
        font-size: 18px;
    }

    .smm-ig-result-card h3 {
        font-size: 16px;
    }

    .smm-ig-result-card p {
        font-size: 13px;
    }

}

/* ======================================================
   PLATFORM CTA (ISOLATED)
   ====================================================== */

.smm-platform-cta {
    padding: 70px 20px;
    display: flex;
    justify-content: center;

    --cta-bg1: #0f172a;
    --cta-bg2: #1e293b;
    --cta-accent: #3b82f6;
    --cta-btn1: #3b82f6;
    --cta-btn2: #2563eb;
}

.smm-platform-cta__inner {
    width: 100%;
    max-width: 760px;
    padding: 46px 36px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;

    background: linear-gradient(135deg, var(--cta-bg1), var(--cta-bg2));
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
}

/* glow */
.smm-platform-cta__inner::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    top: -80px;
    left: -80px;
    background: radial-gradient(circle, var(--cta-accent), transparent 70%);
    opacity: 0.18;
}

/* badge */
.smm-platform-cta__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    font-size: 12px;
    font-weight: 600;

    padding: 6px 14px;
    border-radius: 999px;

    margin-bottom: 18px;

    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.smm-platform-cta__badge i {
    font-size: 14px;
    color: var(--cta-accent);
}

/* text */
.smm-platform-cta h2 {
    font-size: clamp(22px, 2.5vw, 32px);
    line-height: 1.3;
    color: #ffffff;
    margin-bottom: 10px;
}

.smm-platform-cta p {
    font-size: 14px;
    line-height: 1.6;
    color: white;
    max-width: 520px;
    margin: 0 auto 26px;
}

/* button */
.smm-platform-cta__actions {
    display: flex;
    justify-content: center;
    align-items: center;
}

.smm-platform-cta .smm-ig-btn--primary {
    background: linear-gradient(135deg, var(--cta-btn1), var(--cta-btn2));
    color: #fff;

    padding: 12px 22px;
    font-size: 13px;
    font-weight: 600;

    border-radius: 999px;
    border: none;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    transition: all 0.25s ease;

    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.smm-platform-cta .smm-ig-btn--primary:hover {
    transform: translateY(-2px);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {
    .smm-platform-cta {
        padding: 50px 16px;
    }

    .smm-platform-cta__inner {
        padding: 32px 20px;
    }

    .smm-platform-cta h2 {
        font-size: 22px;
    }
}

@media (max-width: 480px) {
    .smm-platform-cta__actions {
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .smm-platform-cta h2 {
        font-size: 20px;
    }
}








:root {
    --cp-blue: #0284C7;
    --cp-blue-lt: #e8f0ff;
    --cp-teal: #00b89c;
    --cp-teal-lt: #e0f7f4;
    --cp-navy: #0f2a5e;
    --cp-navy-lt: #e6eaf3;
    --cp-text: #0d1b2a;
    --cp-muted: #6b7a8d;
    --cp-border: #e4e8f0;
    --cp-bg: #f4f6fb;
    --cp-white: #ffffff;
    --cp-radius: 16px;
    --cp-shadow: 0 4px 24px rgba(15, 42, 94, 0.08);
    --cp-shadow-lg: 0 12px 48px rgba(15, 42, 94, 0.13);
    /* --cp-font-head: 'Syne', sans-serif;
  --cp-font-body: 'DM Sans', sans-serif; */
}

/* ── BASE ── */
.cp-page {
    /* font-family: var(--cp-font-body); */
    color: var(--cp-text);
    background: var(--cp-bg);
    min-height: 100vh;
}

/* ============================================================
   HERO
   ============================================================ */
.cp-hero {
    background: var(--cp-white);
    text-align: center;
    padding: 72px 24px 64px;
    border-bottom: 1px solid var(--cp-border);
    position: relative;
    overflow: hidden;
}

.cp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 0%, rgba(26, 107, 255, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 85% 100%, rgba(0, 184, 156, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.cp-hero__badge {
    display: inline-block;
    font-family: var(--cp-font-head);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--cp-blue);
    background: var(--cp-blue-lt);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.cp-hero__title {
    font-family: var(--cp-font-head);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    line-height: 1.15;
    color: var(--cp-navy);
    margin: 0 0 16px;
}

.cp-hero__title em {
    font-style: italic;
    color: var(--cp-blue);
}

.cp-hero__sub {
    font-size: 16px;
    color: var(--cp-muted);
    max-width: 440px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ============================================================
   SECTION 1 — INFO CARDS
   ============================================================ */
.cp-info {
    padding: 56px 24px;
}

.cp-info__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* ── Card ── */
.cp-info-card {
    background: var(--cp-white);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow);
    padding: 32px 28px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid var(--cp-border);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cp-info-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cp-shadow-lg);
}

.cp-info-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--cp-blue-lt);
    color: var(--cp-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cp-info-card__icon svg {
    width: 22px;
    height: 22px;
}

.cp-info-card__icon--teal {
    background: var(--cp-teal-lt);
    color: var(--cp-teal);
}

.cp-info-card__icon--navy {
    background: var(--cp-navy-lt);
    color: var(--cp-navy);
}

.cp-info-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cp-info-card__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cp-muted);
}

.cp-info-card__value {
    font-family: var(--cp-font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--cp-navy);
    text-decoration: none;
    transition: color 0.2s;
    line-height: 1.3;
    word-break: break-word;
}

a.cp-info-card__value:hover {
    color: var(--cp-blue);
}

.cp-info-card__note {
    font-size: 12.5px;
    color: var(--cp-muted);
}

/* ============================================================
   SECTION 2 — FORM + MAP
   ============================================================ */
.cp-contact {
    padding: 0 24px 72px;
}

.cp-contact__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
}

/* ── FORM WRAP ── */
.cp-form-wrap {
    background: var(--cp-white);
    border-radius: var(--cp-radius);
    box-shadow: var(--cp-shadow);
    border: 1px solid var(--cp-border);
    padding: 44px 40px;
}

.cp-form-wrap__title {
    font-family: var(--cp-font-head);
    font-size: 26px;
    font-weight: 800;
    color: var(--cp-navy);
    margin: 0 0 8px;
}

.cp-form-wrap__sub {
    font-size: 14px;
    color: var(--cp-muted);
    margin: 0 0 32px;
}

/* ── FORM FIELDS ── */
.cp-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-form__row {
    display: grid;
    gap: 16px;
}

.cp-form__row--2 {
    grid-template-columns: 1fr 1fr;
}

.cp-form__group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cp-form__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--cp-navy);
    letter-spacing: 0.01em;
}

.cp-form__input {
    font-family: var(--cp-font-body);
    font-size: 14.5px;
    color: var(--cp-text);
    background: #f8fafd;
    border: 1.5px solid var(--cp-border);
    border-radius: 10px;
    padding: 12px 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.cp-form__input::placeholder {
    color: #b0bac7;
}

.cp-form__input:focus {
    border-color: var(--cp-blue);
    background: var(--cp-white);
    box-shadow: 0 0 0 3px rgba(26, 107, 255, 0.1);
}

.cp-form__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.cp-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* ── SUBMIT BUTTON ── */
.cp-form__btn {
    font-family: var(--cp-font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--cp-white);
    background: var(--cp-blue);
    border: none;
    border-radius: 12px;
    padding: 15px 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(26, 107, 255, 0.3);
    letter-spacing: 0.01em;
}

.cp-form__btn svg {
    width: 18px;
    height: 18px;
}

.cp-form__btn:hover {
    background: #1256d6;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 107, 255, 0.35);
}

.cp-form__btn:active {
    transform: translateY(0);
}

.cp-form__btn--sent {
    background: var(--cp-teal);
    box-shadow: 0 4px 16px rgba(0, 184, 156, 0.3);
    pointer-events: none;
}

/* ── MAP WRAP ── */
.cp-map-wrap {
    border-radius: var(--cp-radius);
    overflow: hidden;
    box-shadow: var(--cp-shadow);
    border: 1px solid var(--cp-border);
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.cp-map-wrap__header {
    background: var(--cp-white);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--cp-font-head);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cp-navy);
    border-bottom: 1px solid var(--cp-border);
}

.cp-map-wrap__header svg {
    width: 16px;
    height: 16px;
    color: var(--cp-blue);
    flex-shrink: 0;
}

.cp-map {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
    min-height: 400px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .cp-info__inner {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .cp-form-wrap {
        padding: 32px 28px;
    }
}

@media (max-width: 768px) {
    .cp-info__inner {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cp-contact__inner {
        grid-template-columns: 1fr;
    }

    .cp-map-wrap {
        min-height: 360px;
    }

    .cp-map {
        min-height: 300px;
    }

    .cp-form__row--2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .cp-hero {
        padding: 48px 20px 40px;
    }

    .cp-info {
        padding: 36px 16px;
    }

    .cp-contact {
        padding: 0 16px 48px;
    }

    .cp-form-wrap {
        padding: 24px 20px;
    }

    .cp-info-card {
        padding: 24px 20px;
    }
}


/* body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f5f5f7;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.2rem 1rem;
} */
.eq-wrapper {
    width: 100%;
    max-width: 780px;
    margin: 1.5rem auto;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e5e5;
    overflow: hidden;
}

/* Header */
.eq-header {
    background: #6c63ff;
    padding: 1.5rem 2.5rem;
    color: #fff;
}

.eq-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.eq-header h1 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #fff;
}

.eq-header p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* Form */
.eq-form {
    padding: 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Section */
.eq-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.eq-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #111111;
}

.eq-section-hint {
    font-size: 13px;
    color: #333333;
    margin-top: -4px;
}

.eq-req {
    color: #e53e3e;
}

/* Grid */
.eq-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

/* Fields */
.eq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.eq-field label {
    font-size: 13px;
    font-weight: 500;
    color: #111111;
}

.eq-field input,
.eq-field select,
.eq-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    font-size: 14px;
    color: #111111;
    background: #fafafa;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
    resize: vertical;
}

.eq-field input::placeholder,
.eq-field textarea::placeholder {
    color: #555555;
}

.eq-field input:focus,
.eq-field select:focus,
.eq-field textarea:focus {
    border-color: #6c63ff;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
    background: #fff;
}

.eq-field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
    color: #111111;
}

.eq-error {
    font-size: 12px;
    color: #e53e3e;
    margin-top: 2px;
}

/* Chips */
.eq-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.eq-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    border: 1.5px solid #cccccc;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    gap: 2px;
}

.eq-chip:hover {
    border-color: #6c63ff;
    background: #f5f3ff;
}

.eq-chip--active {
    border-color: #6c63ff;
    background: #ede9ff;
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1);
}

.eq-chip-label {
    font-size: 13px;
    font-weight: 600;
    color: #111111;
}

.eq-chip--active .eq-chip-label {
    color: #4a3fbf;
}

.eq-chip-sub {
    font-size: 11px;
    color: #333333;
    line-height: 1.4;
}

.eq-chip--active .eq-chip-sub {
    color: #5a52c9;
}

/* Footer */
.eq-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 1rem;
    border-top: 1px solid #e0e0e0;
}

.eq-privacy {
    font-size: 13px;
    color: #333333;
}

.eq-btn-primary {
    background: #6c63ff;
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
}

.eq-btn-primary:hover {
    background: #5a52d9;
}

.eq-btn-primary:active {
    transform: scale(0.98);
}

/* Success */
.eq-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    gap: 16px;
    min-height: 320px;
}

.eq-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #d1fae5;
    color: #059669;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.eq-success h2 {
    font-size: 22px;
    font-weight: 700;
    color: #111111;
}

.eq-success p {
    font-size: 15px;
    color: #222222;
}

/* ===== TABLET (≤768px) ===== */
@media (max-width: 768px) {
    .eq-wrapper {
        width: calc(100% - 32px);
        margin: 20px auto;
        /* top & bottom space */
    }
}

/* ===== MOBILE (≤480px) ===== */
@media (max-width: 480px) {
    .eq-wrapper {
        width: calc(100% - 20px);
        margin: 16px auto;
        /* top & bottom space */
    }
}






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

:root {
    --bg: #f5f0e8;
    --surface: #ffffff;
    --surface-2: #faf7f2;
    --surface-3: #f3ede1;

    --border: rgba(120, 95, 50, 0.13);
    --border-md: rgba(120, 95, 50, 0.22);
    --border-strong: rgba(120, 95, 50, 0.38);

    --gold: #b8872a;
    --gold-light: #d4a843;
    --gold-dim: rgba(184, 135, 42, 0.12);

    --ink: black;
    --ink-2: #1a1408;

    --green: #1a6644;
    --green-dim: rgba(26, 102, 68, 0.09);
    --green-border: rgba(26, 102, 68, 0.25);

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --shadow-sm: 0 2px 12px rgba(80, 55, 10, 0.08), 0 1px 3px rgba(80, 55, 10, 0.05);
    --shadow-md: 0 6px 32px rgba(80, 55, 10, 0.10), 0 2px 8px rgba(80, 55, 10, 0.06);
    --shadow-lg: 0 20px 60px rgba(80, 55, 10, 0.14), 0 6px 20px rgba(80, 55, 10, 0.08);

    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── PAGE ── */
.users-container {
    padding: 48px 52px;
    font-family: var(--font-sans);
    min-height: 100vh;
    background: var(--bg);
}

/* ── HEADER ── */
.users-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 0 32px 0;
}

.users-title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.8px;
    line-height: 1;
}

.users-title span {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    color: var(--gold);
    letter-spacing: 3.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.users-count-pill {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    background: var(--gold-dim);
    border: 1.5px solid rgba(184, 135, 42, 0.28);
    padding: 6px 16px;
    border-radius: 30px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* ══════════════════════════════════════════
   TABLE WRAPPER — now scrolls horizontally
══════════════════════════════════════════ */
.users-table-wrapper {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-md);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* single clean gold top border — NO animation */
.users-table-wrapper::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, transparent 100%);
}

/* ══════════════════════════════════════════
   TABLE
══════════════════════════════════════════ */
.users-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    table-layout: fixed;
}

/* COLUMN WIDTHS — fix alignment */
.users-table colgroup col:nth-child(1) {
    width: 22%;
}

.users-table colgroup col:nth-child(2) {
    width: 26%;
}

.users-table colgroup col:nth-child(3) {
    width: 20%;
}

.users-table colgroup col:nth-child(4) {
    width: 16%;
}

.users-table colgroup col:nth-child(5) {
    width: 16%;
}

/* ── THEAD ── */
.users-table thead {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-md);
}

.users-table th {
    padding: 14px 20px;
    text-align: left;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    opacity: 0.45;
    white-space: nowrap;
}

/* ── TBODY ── */
.users-table td {
    padding: 18px 20px;
    font-size: 13.5px;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.users-table tbody tr:last-child td {
    border-bottom: none;
}

.users-table tbody tr:hover {
    background: var(--surface-2);
}

/* ── USER CELL ── */
.users-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.users-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--gold-light);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    border: 2px solid var(--border-strong);
}

.users-name-text {
    font-weight: 600;
    color: var(--ink);
    font-size: 13.5px;
}

/* ── EMAIL ── */
.users-email-text {
    color: black;
    font-size: 13px;
    /* opacity: 0.5; */
}

/* ── PACKAGE BADGE ── */
.users-package {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
    background: var(--gold-dim);
    border: 1.5px solid rgba(184, 135, 42, 0.32);
    padding: 5px 13px;
    border-radius: 30px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.users-package::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

.users-no-package {
    font-size: 12.5px;
    color: var(--ink);
    /* opacity: 0.28; */
    font-style: italic;
}

/* ── ROLE BADGE ── */
.users-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--green);
    background: var(--green-dim);
    border: 1.5px solid var(--green-border);
    padding: 5px 13px;
    border-radius: 30px;
    white-space: nowrap;
}

.users-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--green);
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── VIEW BUTTON ── */
.users-view-btn {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface-3);
    border: 1.5px solid var(--border-strong);
    padding: 9px 20px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    white-space: nowrap;
}

.users-view-btn:hover {
    background: var(--ink);
    color: var(--gold-light);
    border-color: var(--ink);
}

/* ══════════════════════════════════════════
   MODAL OVERLAY (legacy / unused block — left as-is)
══════════════════════════════════════════ */
.users-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 4, 0.50);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ══════════════════════════════════════════
   MODAL (legacy / unused block — left as-is)
══════════════════════════════════════════ */
.users-modal {
    background: var(--surface);
    border-radius: var(--radius-xl);
    width: 460px;
    max-width: 94vw;
    border: 1px solid var(--border-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.users-modal::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-light) 50%, var(--gold) 70%, transparent);
}

.users-modal-header {
    padding: 28px 30px 22px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-md);
}

.users-modal-user-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.users-modal-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--gold-light);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    border: 2.5px solid var(--border-strong);
}

.users-modal-info {
    flex: 1;
    min-width: 0;
}

.users-modal-name {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px 0;
    letter-spacing: -0.3px;
}

.users-modal-email {
    font-size: 12.5px;
    color: var(--ink);
    opacity: 0.45;
    margin: 0;
}

.users-modal-body {
    padding: 24px 30px 28px;
}

.users-package-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink);
    opacity: 0.35;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 16px 0;
}

.users-package-title::before,
.users-package-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-md);
}

.users-modal-no-pkg {
    text-align: center;
    padding: 32px 0;
    color: var(--ink);
    opacity: 0.35;
    font-size: 14px;
    font-style: italic;
}

.users-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.users-modal-stat {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    border: 1px solid var(--border);
}

.users-modal-stat:hover {
    background: var(--surface-3);
    border-color: var(--border-md);
}

.users-modal-stat-label {
    font-family: var(--font-sans);
    font-size: 9px;
    color: var(--ink);
    font-weight: 700;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    opacity: 0.38;
}

.users-modal-stat-value {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.2px;
}

.users-modal-stat-value.price {
    color: var(--gold);
    font-size: 20px;
}

.users-modal-stat-value.platforms {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    /* opacity: 0.65; */
    text-transform: capitalize;
    line-height: 1.5;
}

.users-modal-stat-value.stat-number {
    font-size: 28px;
    font-weight: 700;
}

.users-close-btn {
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-light);
    background: var(--ink);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.users-close-btn:hover {
    background: var(--ink-2);
}

/* ── MOBILE ── */
@media (max-width: 768px) {
    .users-container {
        padding: 20px 16px;
    }

    .users-title {
        font-size: 30px;
    }

    .users-table {
        min-width: 560px;
    }

    .users-table th,
    .users-table td {
        padding: 12px 14px;
        font-size: 12px;
    }

    .users-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .users-modal-header {
        padding: 22px 20px 18px;
    }

    .users-modal-body {
        padding: 18px 20px 24px;
    }

    .users-modal-grid {
        grid-template-columns: 1fr;
    }

    .users-modal-avatar {
        width: 48px;
        height: 48px;
        font-size: 19px;
    }
}





/* admin userpage */
/* ══════════════════════════════════════════
   USER DETAIL MODAL — SaaS Admin Dashboard style
   Matches the SEO Management page palette
══════════════════════════════════════════ */

:root {
    --ud-bg: #f4f6fb;
    --ud-primary: #3b6ef5;
    --ud-primary-dim: rgba(59, 110, 245, 0.08);
    --ud-primary-border: rgba(59, 110, 245, 0.25);
    --ud-heading: #0a0f1e;
    --ud-text: #4b5468;
    --ud-text-soft: #8b93a7;
    --ud-border: #e2e8f0;
    --ud-white: #ffffff;

    --ud-green: #17a672;
    --ud-green-dim: rgba(23, 166, 114, 0.10);
    --ud-green-border: rgba(23, 166, 114, 0.25);

    --ud-red: #e5484d;
    --ud-red-dim: rgba(229, 72, 77, 0.10);
    --ud-red-border: rgba(229, 72, 77, 0.25);

    --ud-radius-sm: 10px;
    --ud-radius-md: 12px;
    --ud-radius-lg: 14px;

    --ud-shadow: 0 8px 30px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
    --ud-shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.06);
}

/* ── OVERLAY ── */
.users-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 30, 0.45);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 20px;
    overflow-y: auto;
    z-index: 9999;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── PANEL ── */
.users-detail-panel {
    background: var(--ud-bg);
    width: 860px;
    max-width: 100%;
    border-radius: var(--ud-radius-lg);
    box-shadow: var(--ud-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 80px);
}

/* ── HEADER ── */
.users-detail-header {
    position: relative;
    background: var(--ud-white);
    border-bottom: 1px solid var(--ud-border);
    padding: 28px 32px;
    flex-shrink: 0;
}

.users-detail-close-x {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ud-border);
    background: var(--ud-white);
    color: var(--ud-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.users-detail-close-x:hover {
    background: var(--ud-bg);
    color: var(--ud-heading);
}

.users-detail-profile-row {
    display: flex;
    align-items: center;
    gap: 18px;
}

.users-detail-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ud-primary);
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(59, 110, 245, 0.35);
}

.users-detail-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--ud-heading);
    margin: 0 0 3px 0;
    letter-spacing: -0.2px;
}

.users-detail-email {
    font-size: 13px;
    color: var(--ud-text-soft);
    margin: 0 0 10px 0;
}

.users-detail-tag-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ── PILLS ── */
.users-detail-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 30px;
}

.users-detail-pill.role {
    color: var(--ud-primary);
    background: var(--ud-primary-dim);
    border: 1px solid var(--ud-primary-border);
}

.users-detail-pill.status.active {
    color: var(--ud-green);
    background: var(--ud-green-dim);
    border: 1px solid var(--ud-green-border);
}

.users-detail-pill.status.inactive {
    color: var(--ud-red);
    background: var(--ud-red-dim);
    border: 1px solid var(--ud-red-border);
}

.users-detail-pill.platform {
    color: var(--ud-text);
    background: var(--ud-bg);
    border: 1px solid var(--ud-border);
    text-transform: capitalize;
    font-weight: 600;
}

.users-detail-pill.upgrade {
    color: var(--ud-heading);
    background: var(--ud-white);
    border: 1px solid var(--ud-border);
    font-weight: 700;
    text-transform: capitalize;
}

.users-detail-pill.txn {
    color: var(--ud-primary);
    background: var(--ud-primary-dim);
    border: 1px solid var(--ud-primary-border);
}

/* ── BODY ── */
.users-detail-body {
    padding: 24px 32px 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── CARD ── */
.users-detail-card {
    background: var(--ud-white);
    border: 1px solid var(--ud-border);
    border-radius: var(--ud-radius-md);
    box-shadow: var(--ud-shadow-sm);
    padding: 20px 22px;
}

.users-detail-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.users-detail-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ud-heading);
    margin: 0 0 16px 0;
    letter-spacing: 0.2px;
}

.users-detail-card-title-row .users-detail-card-title {
    margin-bottom: 0;
}

/* ── GRID / STAT ── */
.users-detail-grid {
    display: grid;
    gap: 12px;
}

.users-detail-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

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

.users-detail-stat {
    background: var(--ud-bg);
    border: 1px solid var(--ud-border);
    border-radius: var(--ud-radius-sm);
    padding: 12px 16px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.users-detail-stat:hover {
    border-color: var(--ud-primary-border);
    background: var(--ud-primary-dim);
}

.users-detail-stat-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ud-text-soft);
    margin: 0 0 6px 0;
}

.users-detail-stat-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--ud-heading);
    margin: 0;
}

.users-detail-stat-value.accent {
    color: var(--ud-primary);
}

.users-detail-stat-value.big {
    font-size: 24px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.users-detail-stat-suffix {
    font-size: 11px;
    font-weight: 600;
    color: var(--ud-text-soft);
    text-transform: none;
}

.users-detail-platform-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ── USAGE PROGRESS ── */
.users-detail-usage-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.users-detail-usage-label-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.users-detail-usage-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ud-heading);
}

.users-detail-usage-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--ud-text-soft);
}

.users-detail-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 30px;
    background: var(--ud-bg);
    border: 1px solid var(--ud-border);
    overflow: hidden;
}

.users-detail-progress-fill {
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(90deg, var(--ud-primary), #6d94f8);
}

/* ── TWO COLUMN ── */
.users-detail-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.users-detail-purchase-pkg {
    font-size: 15px;
    font-weight: 700;
    color: var(--ud-heading);
    margin: 0 0 12px 0;
}

.users-detail-purchase-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--ud-border);
}

.users-detail-upgrade-chain {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.users-detail-upgrade-arrow {
    color: var(--ud-primary);
    font-weight: 700;
}

/* ── PAYMENT TABLE ── */
.users-detail-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--ud-border);
    border-radius: var(--ud-radius-sm);
}

.users-detail-table {
    width: 100%;
    border-collapse: collapse;
}

.users-detail-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--ud-text-soft);
    background: var(--ud-bg);
    padding: 10px 16px;
    border-bottom: 1px solid var(--ud-border);
}

.users-detail-table td {
    font-size: 13px;
    color: var(--ud-text);
    padding: 12px 16px;
    border-bottom: 1px solid var(--ud-border);
}

.users-detail-table tbody tr:last-child td {
    border-bottom: none;
}

.users-detail-table tbody tr:hover {
    background: var(--ud-primary-dim);
}

.users-detail-amount {
    font-weight: 700;
    color: var(--ud-heading);
}

/* ── TIMELINE ── */
.users-detail-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.users-detail-timeline-item {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 20px;
    padding-left: 4px;
}

.users-detail-timeline-item:last-child {
    padding-bottom: 0;
}

.users-detail-timeline-item::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 18px;
    bottom: 0;
    width: 1px;
    background: var(--ud-border);
}

.users-detail-timeline-item:last-child::before {
    display: none;
}

.users-detail-timeline-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ud-white);
    border: 2px solid var(--ud-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.users-detail-timeline-dot.current {
    background: var(--ud-primary);
    box-shadow: 0 0 0 4px var(--ud-primary-dim);
}

.users-detail-timeline-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.users-detail-timeline-date {
    font-size: 11px;
    font-weight: 700;
    color: var(--ud-text-soft);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.users-detail-timeline-label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ud-heading);
}

/* ── FOOTER ── */
.users-detail-footer {
    padding: 18px 32px 26px;
    flex-shrink: 0;
}

.users-detail-close-btn {
    width: 100%;
    padding: 13px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #fff;
    background: var(--ud-primary);
    border: none;
    border-radius: var(--ud-radius-sm);
    cursor: pointer;
}

.users-detail-close-btn:hover {
    background: #2f5cd6;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .users-detail-overlay {
        padding: 0;
    }

    .users-detail-panel {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .users-detail-header,
    .users-detail-body,
    .users-detail-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .users-detail-grid-3,
    .users-detail-grid-4 {
        grid-template-columns: 1fr 1fr;
    }

    .users-detail-two-col {
        grid-template-columns: 1fr;
    }

    .users-detail-avatar {
        width: 52px;
        height: 52px;
        font-size: 19px;
    }
}

@media (max-width: 480px) {
    .users-detail-grid-3,
    .users-detail-grid-4 {
        grid-template-columns: 1fr;
    }
}
/* admin userpage */







/* subadmin dashboard */
/* LAYOUT */
.sd-layout {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR */
.sd-sidebar {
    width: 220px;
    background: #111;
    color: #fff;
    padding: 20px;
}

.sd-logo {
    margin-bottom: 20px;
}

.sd-menu {
    list-style: none;
    padding: 0;
}

.sd-menu li {
    margin-bottom: 12px;
    cursor: pointer;
}

/* MAIN */
.sd-main {
    flex: 1;
    background: #f5f5f5;
}

/* HEADER */
.sd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

/* CONTENT */
.sd-content {
    padding: 20px;
}

/* subadmin dashbaord end */


/* ── SIDEBAR ────────────────────────────────────── */
.pxs-sidebar {
    width: 248px;
    background: #1e2235;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    transition: width 0.22s ease;
    overflow: hidden;
    flex-shrink: 0;
    z-index: 200;
}

.pxs-sidebar--collapsed {
    width: 68px;
}

/* ── TOP / BRAND ────────────────────────────────── */
.pxs-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 14px 16px;
    gap: 8px;
    flex-shrink: 0;
}

.pxs-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    min-width: 0;
}

.pxs-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #c8963c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pxs-brand-icon svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
    fill: none;
}

.pxs-brand-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pxs-brand-name {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.pxs-brand-role {
    font-size: 11px;
    color: #8892b0;
    white-space: nowrap;
    margin-top: 1px;
}

.pxs-collapse-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid #2d3554;
    background: transparent;
    color: #8892b0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.pxs-collapse-btn:hover {
    background: #2d3554;
    color: #ffffff;
}

.pxs-collapse-btn svg {
    width: 14px;
    height: 14px;
}

/* ── DIVIDER ────────────────────────────────────── */
.pxs-divider {
    height: 1px;
    background: #2a3050;
    margin: 0 14px;
    flex-shrink: 0;
}

/* ── NAV ────────────────────────────────────────── */
.pxs-nav {
    flex: 1;
    padding: 12px 10px;
    overflow-y: auto;
    overflow-x: hidden;
}

.pxs-nav-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4a5580;
    padding: 0 8px;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.15s;
}

.pxs-nav-label--hidden {
    opacity: 0;
    pointer-events: none;
}

.pxs-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pxs-nav-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #8892b0;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s;
    text-align: left;
    white-space: nowrap;
    position: relative;
}

.pxs-nav-item:hover {
    background: #252d4a;
    color: #ccd6f6;
}

/* active = filled amber, full white text — maximum readability */
.pxs-nav-item--active {
    background: #c8963c;
    color: #ffffff;
}

.pxs-nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pxs-nav-icon svg {
    width: 18px;
    height: 18px;
}

.pxs-nav-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── BOTTOM / USER ──────────────────────────────── */
.pxs-bottom {
    flex-shrink: 0;
    padding: 10px 10px 18px;
}

.pxs-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 10px;
    background: #252d4a;
    overflow: hidden;
    margin-bottom: 6px;
}

.pxs-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #c8963c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.pxs-user-info {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pxs-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pxs-user-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #64b87a;
    margin-top: 1px;
}

.pxs-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #64b87a;
    flex-shrink: 0;
}

.pxs-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #8892b0;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}

.pxs-logout:hover {
    background: #3a1818;
    color: #f08080;
}

/* ── HAMBURGER (mobile) ─────────────────────────── */
.pxs-hamburger {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    z-index: 300;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #1e2235;
    border: 1px solid #2d3554;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 10px;
}

.pxs-ham-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 18px;
}

.pxs-ham-icon span {
    display: block;
    height: 1.5px;
    background: #c8963c;
    border-radius: 2px;
    transition: all 0.2s;
}

.pxs-ham-icon.pxs-ham-open span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}

.pxs-ham-icon.pxs-ham-open span:nth-child(2) {
    opacity: 0;
}

.pxs-ham-icon.pxs-ham-open span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ── OVERLAY ────────────────────────────────────── */
.pxs-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 25, 0.6);
    z-index: 150;
    backdrop-filter: blur(2px);
}

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
    .pxs-hamburger {
        display: flex;
    }

    .pxs-overlay {
        display: block;
    }

    .pxs-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 248px;
        transform: translateX(-100%);
        transition: transform 0.25s ease, width 0.22s ease;
        z-index: 200;
    }

    .pxs-sidebar--mobile-open {
        transform: translateX(0);
    }

    .pxs-sidebar--collapsed {
        width: 248px;
    }
}



/* HEADER WRAPPER */
.pxh-header {
    position: sticky;
    top: 0;
    z-index: 20;

    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 16px 24px;

    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;

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

/* LEFT */
.pxh-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

/* RIGHT */
.pxh-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* USER BOX */
.pxh-user-box {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 6px 10px;
    border-radius: 10px;

    background: #f9fafb;
    border: 1px solid #f1f5f9;
}

/* AVATAR */
.pxh-avatar {
    width: 34px;
    height: 34px;

    border-radius: 8px;

    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 600;
}

/* USER INFO */
.pxh-user-info {
    display: flex;
    flex-direction: column;
}

.pxh-user-name {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

.pxh-user-role {
    font-size: 11px;
    color: #6b7280;
}

/* LOGOUT */
.pxh-logout-btn {
    padding: 8px 14px;

    background: #111827;
    color: #fff;

    border: none;
    border-radius: 8px;

    font-size: 13px;
    cursor: pointer;

    transition: all 0.2s ease;
}

.pxh-logout-btn:hover {
    background: #1f2937;
}


/* ── CONTAINER ─────────────────────────────────── */
.pxc-container {
    font-family: var(--font-sans);
    background: #f5f0e8;
    min-height: 100vh;
    padding: 2rem;
    color: #2c2416;
}

.pxc-top {
    margin-bottom: 1.75rem;
}

.pxc-heading h2 {
    font-size: 20px;
    font-weight: 500;
    color: #1e1810;
    letter-spacing: 0.01em;
    margin: 0;
}

.pxc-heading p {
    font-size: 13px;
    color: #9a8e7a;
    margin-top: 4px;
}

/* ── TABLE ─────────────────────────────────────── */
.pxc-table-wrapper {
    background: #fffcf7;
    border-radius: 14px;
    border: 1px solid #e0d8c8;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(120, 90, 30, 0.06);
    overflow-x: auto;
}

.pxc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    min-width: 560px;
}

.pxc-table thead tr {
    background: #faf6ee;
    border-bottom: 1px solid #e8dfc8;
}

.pxc-table thead th {
    padding: 13px 18px;
    text-align: left;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a8936a;
    white-space: nowrap;
}

.pxc-table tbody tr {
    border-bottom: 1px solid #f0ebe0;
    transition: background 0.15s;
}

.pxc-table tbody tr:last-child {
    border-bottom: none;
}

.pxc-table tbody tr:hover {
    background: #fdf8ef;
}

.pxc-table td {
    padding: 14px 18px;
    color: #3a3020;
    vertical-align: middle;
}

/* ── USER CELL ─────────────────────────────────── */
.pxc-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pxc-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0e4cc, #dfc390);
    border: 1px solid #c8a055;
    color: #7a5518;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
}

.pxc-user span {
    font-weight: 500;
    color: #1e1408;
}

/* ── PACKAGE BADGE ─────────────────────────────── */
.pxc-package-name {
    display: inline-block;
    padding: 3px 10px;
    background: #fdf5e4;
    border: 1px solid #e0c878;
    border-radius: 6px;
    color: #7a5510;
    font-size: 12px;
    font-weight: 500;
}

/* ── STATUS ────────────────────────────────────── */
.pxc-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.pxc-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.pxc-status.active {
    background: #f0f9f0;
    border: 1px solid #b8ddb8;
    color: #2a6a2a;
}

.pxc-status.active::before {
    background: #3a8a3a;
}

.pxc-status.inactive {
    background: #fdf0f0;
    border: 1px solid #e8c0c0;
    color: #7a2a2a;
}

.pxc-status.inactive::before {
    background: #b04040;
}

/* ── VIEW BUTTON ───────────────────────────────── */
.pxc-view-btn {
    padding: 6px 16px;
    background: transparent;
    border: 1px solid #c8a055;
    border-radius: 7px;
    color: #7a5510;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.pxc-view-btn:hover {
    background: #c8a055;
    color: #fff8ee;
    border-color: #c8a055;
}

.pxc-empty {
    text-align: center;
    padding: 3rem;
    color: #b0a080;
}

/* ── RESPONSIVE TABLE ──────────────────────────── */
@media (max-width: 600px) {
    .pxc-container {
        padding: 1rem;
    }

    .pxc-table {
        font-size: 13px;
        min-width: unset;
    }

    .pxc-table thead {
        display: none;
    }

    .pxc-table tbody tr {
        display: block;
        padding: 14px 16px;
        border-bottom: 1px solid #ede5d0;
    }

    .pxc-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        color: #3a3020;
        border: none;
    }

    .pxc-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #a8936a;
        flex-shrink: 0;
        margin-right: 12px;
    }

    .pxc-table td:first-child::before {
        content: '';
        margin: 0;
    }

    .pxc-table td:first-child {
        margin-bottom: 6px;
    }
}

/* ── MODAL OVERLAY ─────────────────────────────── */
.pxc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 24, 16, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(3px);
    padding: 1rem;
}

/* ── MODAL ─────────────────────────────────────── */
.pxc-modal {
    background: #ffffff;
    border: 1px solid #ddd5c0;
    border-radius: 18px;
    width: 440px;
    max-width: 100%;
    padding: 1.75rem;
    box-shadow: 0 12px 40px rgba(80, 55, 10, 0.18);
}

.pxc-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1.5px solid #e8dfc8;
}

.pxc-modal-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0e4cc, #dfc390);
    border: 2px solid #c8a055;
    color: #6a4510;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
    text-transform: uppercase;
}

.pxc-modal-name {
    font-size: 17px;
    font-weight: 600;
    color: #111008;
    line-height: 1.2;
}

.pxc-modal-email {
    font-size: 13px;
    color: #5a5040;
    margin-top: 3px;
    font-weight: 400;
}

/* ── MODAL SECTION LABEL ───────────────────────── */
.pxc-modal-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a07030;
    margin-bottom: 10px;
    margin-top: 1.25rem;
}

/* ── PACKAGE BLOCK ─────────────────────────────── */
.pxc-modal-package-block {
    background: #faf6ee;
    border: 1px solid #ddd0b0;
    border-radius: 12px;
    padding: 4px 16px;
}

.pxc-modal-info-stack {
    display: flex;
    flex-direction: column;
}

.pxc-modal-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #ede5d0;
}

.pxc-modal-info-item:last-child {
    border-bottom: none;
}

.pxc-modal-info-label {
    font-size: 13.5px;
    color: #5a5040;
    font-weight: 400;
}

.pxc-modal-info-value {
    font-size: 13.5px;
    font-weight: 600;
    color: #111008;
    text-align: right;
}

/* ── DELIVERABLES ──────────────────────────────── */
.pxc-deliverables {
    display: flex;
    gap: 10px;
}

.pxc-deliverable-item {
    flex: 1;
    background: #faf6ee;
    border: 1px solid #ddd0b0;
    border-radius: 12px;
    padding: 16px 10px;
    text-align: center;
}

.d-num {
    font-size: 26px;
    font-weight: 700;
    color: #8a5c10;
    line-height: 1;
}

.d-label {
    font-size: 11px;
    color: #7a6a50;
    margin-top: 6px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* ── CLOSE BUTTON ──────────────────────────────── */
.pxc-close-btn {
    width: 100%;
    margin-top: 1.5rem;
    padding: 11px;
    background: #f5f0e8;
    border: 1px solid #d0c4a8;
    border-radius: 10px;
    color: #3a3020;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.pxc-close-btn:hover {
    background: #ede5d0;
    border-color: #b8963c;
    color: #1e1408;
}

/* ── MODAL RESPONSIVE ──────────────────────────── */
@media (max-width: 480px) {
    .pxc-modal {
        padding: 1.25rem;
        border-radius: 14px;
    }

    .pxc-modal-name {
        font-size: 15px;
    }

    .d-num {
        font-size: 22px;
    }
}




/* cms packages */
/* ============================================
   PACKAGES PAGE — packages.css
   Scope: all classes prefixed with pkg-
   ============================================ */

/* ── PAGE LAYOUT ── */
.pkg-page {
    padding: 28px 32px;
    min-height: 100vh;
    background: #f4f6fb;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1e2535;
}

/* ── HEADER ── */
.pkg-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 12px;
}

.pkg-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 2px;
    letter-spacing: -0.4px;
}

.pkg-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* ── STATS ROW ── */
.pkg-stats-row {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.pkg-stat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 90px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.pkg-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: #374151;
    line-height: 1;
    margin-bottom: 4px;
}

.pkg-stat-num.pkg-stat-green {
    color: #16a34a;
}

.pkg-stat-num.pkg-stat-red {
    color: #dc2626;
}

.pkg-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    font-weight: 500;
}

/* ── CARD ── */
.pkg-card {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    overflow: hidden;
}

/* ── TABLE ── */
.pkg-table-wrap {
    overflow-x: auto;
}

.pkg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.pkg-table thead tr {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.pkg-table th {
    padding: 13px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    white-space: nowrap;
}

.pkg-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f3f6;
    vertical-align: top;
    color: #374151;
}

.pkg-table tbody tr:last-child td {
    border-bottom: none;
}

.pkg-table tbody tr:hover {
    background: #fafbff;
}

.pkg-row-inactive td {
    opacity: 0.6;
}

.pkg-idx {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 600;
    width: 32px;
}

.pkg-name {
    font-weight: 600;
    color: #111827;
    font-size: 14px;
    margin-bottom: 2px;
}

.pkg-desc-preview {
    font-size: 14px;
    color: #000000;
    max-width: 180px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pkg-price {
    font-weight: 700;
    color: #1d4ed8;
    font-size: 14px;
    white-space: nowrap;
}

/* ── PLATFORM TAGS ── */
.pkg-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pkg-platform-tag {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
    border-radius: 4px;
    padding: 2px 7px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

/* ── DELIVERABLES ── */
.pkg-deliverables {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pkg-deliv-item {
    font-size: 12px;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pkg-deliv-item b {
    color: #111827;
    font-weight: 600;
}

.pkg-deliv-icon {
    font-size: 12px;
}

/* ── STATUS BADGE ── */
.pkg-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.pkg-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pkg-badge-active {
    background: #dcfce7;
    color: #16a34a;
}

.pkg-badge-active .pkg-badge-dot {
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .2);
}

.pkg-badge-inactive {
    background: #fee2e2;
    color: #dc2626;
}

.pkg-badge-inactive .pkg-badge-dot {
    background: #dc2626;
}

/* ── ACTION BUTTONS ── */
.pkg-actions {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

.pkg-btn-edit,
.pkg-btn-disable,
.pkg-btn-enable {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, box-shadow .15s, transform .1s;
    white-space: nowrap;
}

.pkg-btn-edit:active,
.pkg-btn-disable:active,
.pkg-btn-enable:active {
    transform: scale(0.97);
}

.pkg-btn-edit {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.pkg-btn-edit:hover {
    background: #dbeafe;
    box-shadow: 0 1px 4px rgba(29, 78, 216, .12);
}

.pkg-btn-disable {
    background: #fff1f2;
    color: #dc2626;
    border-color: #fecaca;
}

.pkg-btn-disable:hover {
    background: #fee2e2;
    box-shadow: 0 1px 4px rgba(220, 38, 38, .12);
}

.pkg-btn-enable {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}

.pkg-btn-enable:hover {
    background: #dcfce7;
    box-shadow: 0 1px 4px rgba(22, 163, 74, .12);
}

/* ── PRIMARY & CANCEL BUTTONS ── */
.pkg-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, box-shadow .15s, transform .1s;
    box-shadow: 0 2px 6px rgba(29, 78, 216, .3);
    white-space: nowrap;
}

.pkg-btn-primary:hover {
    background: #1e40af;
    box-shadow: 0 4px 10px rgba(29, 78, 216, .35);
}

.pkg-btn-primary:active {
    transform: scale(0.97);
}

.pkg-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}

.pkg-btn-cancel:hover {
    background: #e5e7eb;
    color: #374151;
}

/* ── EMPTY STATE ── */
.pkg-empty {
    text-align: center;
    padding: 48px 24px !important;
    color: #9ca3af;
    font-size: 14px;
}

/* ── MODAL OVERLAY ── */
.pkg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    animation: pkg-fade-in 0.15s ease;
}

@keyframes pkg-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ── MODAL BOX ── */
.pkg-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    animation: pkg-slide-up 0.2s ease;
}

@keyframes pkg-slide-up {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

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

/* ── MODAL HEADER ── */
.pkg-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 28px 0;
    gap: 12px;
}

.pkg-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 4px;
}

.pkg-modal-sub {
    font-size: 13px;
    color: #9ca3af;
    margin: 0;
}

.pkg-modal-close {
    background: #f3f4f6;
    border: none;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #6b7280;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.pkg-modal-close:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* ── FORM ── */
.pkg-form {
    padding: 20px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pkg-form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pkg-form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}

.pkg-section-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    margin-bottom: -8px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f3f6;
}

.pkg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pkg-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.pkg-req {
    color: #ef4444;
    margin-left: 2px;
}

.pkg-input {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.pkg-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}

.pkg-input-err {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important;
}

.pkg-textarea {
    resize: vertical;
    min-height: 80px;
}

.pkg-err-msg {
    font-size: 12px;
    color: #ef4444;
    font-weight: 400;
}

/* ── MODAL FOOTER ── */
.pkg-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid #f1f3f6;
    margin-top: 4px;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
    .pkg-page {
        padding: 18px 16px;
    }

    .pkg-form-grid-2,
    .pkg-form-grid-3 {
        grid-template-columns: 1fr;
    }

    .pkg-modal {
        max-width: 100%;
        border-radius: 12px;
    }

    .pkg-modal-header,
    .pkg-form {
        padding-left: 18px;
        padding-right: 18px;
    }

    .pkg-table th:nth-child(4),
    .pkg-table td:nth-child(4) {
        display: none;
    }
}

@media (max-width: 500px) {
    .pkg-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .pkg-stats-row {
        gap: 10px;
    }
}

/* ── NEW: Package Category / Badge / Platform Limit selects ──
   Reuses .pkg-input for consistent look; only adds select-specific
   affordances (pointer cursor + custom arrow) without altering any
   existing input/select styling elsewhere on the page. */
.pkg-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
}
/* cms packages */



/* subadmin post page */
.posts-page {
    padding: 30px;
    background: #000;
    min-height: 100vh;
}

.posts-page h2 {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 24px;
}

.posts-form {
    max-width: 650px;

    display: flex;
    flex-direction: column;
    gap: 18px;

    background: #ffffff;

    padding: 28px;

    border-radius: 16px;

    border: 1px solid #e5e7eb;
}

.posts-form select,
.posts-form textarea,
.posts-form input[type="file"] {

    width: 100%;

    padding: 14px 16px;

    border: 1px solid #d1d5db;

    border-radius: 10px;

    font-size: 14px;

    outline: none;

    background: #ffffff;

    transition: 0.2s ease;
}

.posts-form select:focus,
.posts-form textarea:focus {

    border-color: #4f46e5;
}

.posts-form textarea {
    min-height: 120px;
    resize: vertical;
}

.posts-form button {

    height: 50px;

    border: none;

    border-radius: 10px;

    background: #4f46e5;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition: 0.2s ease;
}

.posts-form button:hover {
    background: #4338ca;
}

/* MOBILE */

@media (max-width: 768px) {

    .posts-page {
        padding: 18px;
    }

    .posts-form {
        padding: 20px;
    }

}

/* subadmon post page */






/* user sidebar */
/* ===========================
   Sidebar.css — SMM Consult
   Premium Light-Neutral Theme
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

:root {
    --sidebar-width: 248px;
    --sidebar-collapsed-width: 0px;

    /* Core palette */
    --bg-sidebar: #f0f6ff;
    --bg-sidebar-glass: rgba(255, 255, 255, 0.72);
    --border-color: rgba(56, 189, 248, 0.18);
    --border-subtle: rgba(0, 0, 0, 0.06);

    /* Brand colors (matching logo) */
    --red: #e8313a;
    --blue: #0ea5e9;
    --blue-light: #38bdf8;
    --blue-dark: #0284c7;

    /* Active state */
    --active-bg: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    --active-shadow: 0 4px 18px rgba(14, 165, 233, 0.32);

    /* Text */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-active: #ffffff;

    /* Misc */
    --radius: 14px;
    --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --font: 'Outfit', sans-serif;
}

/* ── Base ── */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid var(--border-color);
    padding: 28px 16px 24px;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    font-family: var(--font);
    transition: transform var(--transition), width var(--transition);
    box-shadow: 4px 0 32px rgba(14, 165, 233, 0.06);

    /* Subtle top accent line */
    background-image:
        linear-gradient(180deg, rgba(56, 189, 248, 0.08) 0px, transparent 120px),
        radial-gradient(ellipse at top left, rgba(56, 189, 248, 0.10) 0%, transparent 60%);
}

/* ── Brand / Logo ── */
.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 0 6px;
}

.sidebar__logo {
    flex-shrink: 0;
    filter: drop-shadow(0 2px 8px rgba(56, 189, 248, 0.35));
    transition: filter var(--transition), transform var(--transition);
}

.sidebar__logo:hover {
    filter: drop-shadow(0 4px 14px rgba(56, 189, 248, 0.55));
    transform: scale(1.07);
}

.sidebar__brand-text {
    display: flex;
    align-items: baseline;
    gap: 5px;
    line-height: 1;
}

.brand-smm {
    font-size: 22px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -0.5px;
}

.brand-consult {
    font-size: 22px;
    font-weight: 600;
    color: var(--blue);
    letter-spacing: -0.3px;
}

/* ── Divider ── */
.sidebar__divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color) 40%, var(--border-color) 60%, transparent);
    margin: 18px 0 14px;
}

/* ── Section label ── */
.sidebar__section-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    padding: 0 10px;
    margin: 0 0 10px;
    text-transform: uppercase;
}

/* ── Nav ── */
.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* ── Nav Link ── */
.sidebar__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 14.5px;
    font-weight: 500;
    position: relative;
    transition:
        background var(--transition),
        color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
    overflow: hidden;
    cursor: pointer;
}

/* Hover shimmer pseudo */
.sidebar__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.07), rgba(56, 189, 248, 0.05));
    opacity: 0;
    border-radius: inherit;
    transition: opacity var(--transition);
}

.sidebar__link:hover::before {
    opacity: 1;
}

.sidebar__link:hover {
    color: var(--blue-dark);
    transform: translateX(3px);
}

/* ── Active Link ── */
.sidebar__link--active {
    background: var(--active-bg);
    color: var(--text-on-active) !important;
    box-shadow: var(--active-shadow);
    font-weight: 600;
}

.sidebar__link--active::before {
    display: none;
}

.sidebar__link--active:hover {
    transform: translateX(0);
}

/* ── Icon ── */
.sidebar__link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    transition: transform var(--transition);
}

.sidebar__link:hover .sidebar__link-icon {
    transform: scale(1.15);
}

.sidebar__link--active .sidebar__link-icon {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

/* ── Label ── */
.sidebar__link-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Active dot indicator ── */
.sidebar__link-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    opacity: 0;
    transform: scale(0);
    transition: opacity var(--transition), transform var(--transition);
    flex-shrink: 0;
}

.sidebar__link--active .sidebar__link-dot {
    opacity: 1;
    transform: scale(1);
}

/* ── Footer / User card ── */
.sidebar__footer {
    margin-top: 24px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.sidebar__avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue), var(--blue-light));
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.sidebar__user-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sidebar__username {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar__user-role {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* ── Mobile toggle button ── */
.sidebar-mobile-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 200;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: background var(--transition), box-shadow var(--transition);
}

.sidebar-mobile-toggle:hover {
    background: var(--bg-sidebar);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.15);
}

/* ── Mobile backdrop ── */
.sidebar__backdrop {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .sidebar-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar {
        transform: translateX(0);
        width: var(--sidebar-width);
        box-shadow: 4px 0 40px rgba(0, 0, 0, 0.12);
    }

    .sidebar--collapsed {
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    .sidebar__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        /* background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(2px); */
        z-index: 99;
    }
}

@media (max-width: 480px) {
    .sidebar {
        width: 220px;
        padding: 24px 12px 20px;
    }
}


/* ── Logout button ── */
.sidebar__logout {
    margin-top: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(232, 49, 58, 0.16);
    background: rgba(255, 255, 255, 0.65);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-family: var(--font);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}

.sidebar__logout:hover {
    background: linear-gradient(135deg, rgba(232, 49, 58, 0.10), rgba(232, 49, 58, 0.05));
    color: var(--red);
    border-color: rgba(232, 49, 58, 0.35);
    box-shadow: 0 4px 14px rgba(232, 49, 58, 0.14);
    transform: translateX(3px);
}

.sidebar__logout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform var(--transition);
}

.sidebar__logout:hover .sidebar__logout-icon {
    transform: translateX(2px);
}

.sidebar__logout-label {
    flex: 1;
    text-align: left;
}
/* usersidebar */


/* user header */

.smmc-header {
    height: 64px;
    width: 100%;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(56, 189, 248, 0.16);
    box-shadow: 0 1px 12px rgba(14, 165, 233, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 50;
    font-family: 'Outfit', sans-serif;
}

.smmc-header__left {
    display: flex;
    align-items: center;
}

.smmc-header__title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    letter-spacing: -0.2px;
    margin: 0;
    position: relative;
}

.smmc-header__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 28px;
    height: 2.5px;
    border-radius: 99px;
    background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.smmc-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.smmc-header__icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(240, 246, 255, 0.8);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.18s;
}

.smmc-header__icon-btn:hover {
    background: #e0f2fe;
    color: #0ea5e9;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.16);
    transform: translateY(-1px);
}

.smmc-header__notif-dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e8313a;
    border: 1.5px solid #fff;
    animation: smmc-pulse-dot 2s ease-in-out infinite;
}

@keyframes smmc-pulse-dot {

    0%,
    100% {
        box-shadow: 0 0 0 2px rgba(232, 49, 58, 0.2);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(232, 49, 58, 0.08);
    }
}

.smmc-header__avatar {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.32);
    transition: box-shadow 0.2s, transform 0.18s;
    user-select: none;
}

.smmc-header__avatar:hover {
    box-shadow: 0 5px 18px rgba(14, 165, 233, 0.45);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .smmc-header {
        padding: 0 16px;
    }

    .smmc-header__title {
        font-size: 16px;
    }
}


.smmc-header__right {
    position: relative;
    display: flex;
    align-items: center;
}

.smmc-header__user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: rgba(240, 246, 255, 0.7);
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Outfit', sans-serif;
    transition: background 0.2s, box-shadow 0.2s, transform 0.18s;
}

.smmc-header__user-trigger:hover {
    background: #e0f2fe;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.16);
}

.smmc-header__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
    user-select: none;
}

.smmc-header__welcome {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
}

.smmc-header__chevron {
    color: #64748b;
    transition: transform 0.2s ease;
}

.smmc-header__chevron--open {
    transform: rotate(180deg);
}

.smmc-header__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid rgba(56, 189, 248, 0.16);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(14, 165, 233, 0.14);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 60;
    animation: smmc-dropdown-in 0.16s ease;
}

@keyframes smmc-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.smmc-header__dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-family: 'Outfit', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    text-align: left;
    transition: background 0.16s, color 0.16s;
}

.smmc-header__dropdown-item:hover {
    background: #e0f2fe;
    color: #0ea5e9;
}

.smmc-header__dropdown-item--danger {
    color: #e8313a;
}

.smmc-header__dropdown-item--danger:hover {
    background: #fee2e2;
    color: #e8313a;
}

@media (max-width: 768px) {
    .smmc-header__welcome {
        display: none;
    }
}
/* user header */




/* ================================
   DashboardLayout.css — SMM Consult
   ================================ */

.smmc-layout {
    display: flex;
    min-height: 100vh;
    background: #f4f8ff;
}

/* Sits to the right of the fixed 248px sidebar */
.smmc-layout__main {
    margin-left: 248px;
    /* must match sidebar width exactly */
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
    /* prevents flex overflow on small screens */
}

/* Page content area below the sticky header */
.smmc-layout__content {
    flex: 1;
    padding: 28px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .smmc-layout__main {
        margin-left: 0;
        /* sidebar slides off-canvas on mobile */
    }

    .smmc-layout__content {
        padding: 16px;
    }
}




/* user package */



:root {
    --blue: #38bdf8;
    --blue-dark: #0ea5e9;
    --blue-deep: #0284c7;
    --blue-bg: #f0fbff;
    --blue-border: #bae6fd;
    --blue-text: #0369a1;

    --black: #0a0a0a;
    --text: #111111;
    --text-sub: #2d2d2d;
    --text-muted: #5a5a5a;
    --white: #ffffff;
    --bg: #f0f6fa;
    --surface: #ffffff;
    --border: #e0e8ef;
    --border-light: #edf2f7;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 22px;

    --shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 4px 18px rgba(0, 0, 0, 0.07);
    --shadow-hover: 0 6px 30px rgba(56, 189, 248, 0.20), 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-btn: 0 8px 24px rgba(56, 189, 248, 0.35);

    /* accent colors for the usage section — blue stays primary,
       these differentiate deliverable types & status states */
    --purple: #a855f7;
    --purple-bg: #faf5ff;
    --purple-border: #e9d5ff;

    --orange: #f97316;
    --orange-bg: #fff7ed;
    --orange-border: #fed7aa;

    --green: #22c55e;
    --green-bg: #f0fdf4;
    --green-border: #bbf7d0;
}

/* ═══════════════════════════════════════
   BODY
═══════════════════════════════════════ */
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════
   PAGE WRAPPER
═══════════════════════════════════════ */
.mypackage-page {
    background: var(--bg);
    padding: 40px 40px 60px;
    min-height: 100vh;
}

/* ═══════════════════════════════════════
   LAYOUT GRID
═══════════════════════════════════════ */
.package-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.mypackage-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.mypackage-header {
    margin-bottom: 4px;
}

.mypackage-header h2 {
    font-family: 'Sora', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.6px;
    line-height: 1.15;
    margin-bottom: 6px;
}

.mypackage-header p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ═══════════════════════════════════════
   MAIN PACKAGE CARD
═══════════════════════════════════════ */
.package-main-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.package-main-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.package-main-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 35%, #38bdf8 70%, #7dd3fc 100%);
}

/* ── PACKAGE TOP ── */
.package-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 32px 20px;
    gap: 16px;
}

/* BADGE */
.package-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--blue-bg);
    color: var(--blue-text);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 100px;
    border: 1px solid var(--blue-border);
    margin-bottom: 12px;
}

.package-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0;
    animation: dot-blink 2s ease-in-out infinite;
}

@keyframes dot-blink {

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

    50% {
        opacity: 0.3;
        transform: scale(0.65);
    }
}

/* PACKAGE NAME */
.package-name {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.4px;
    line-height: 1.2;
}

/* PRICE */
.package-price {
    text-align: right;
    flex-shrink: 0;
}

.package-price span {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.package-price h2 {
    font-family: 'Sora', sans-serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--blue-dark);
    letter-spacing: -0.8px;
    line-height: 1;
}

/* ═══════════════════════════════════════
   PLATFORM PILLS
═══════════════════════════════════════ */
.package-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 32px 24px;
}

.platform-pill {
    background: #f7fbfe;
    border: 1px solid var(--border);
    color: var(--text-sub);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: 100px;
    letter-spacing: 0.01em;
    cursor: default;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}

.platform-pill:hover {
    background: var(--blue-bg);
    border-color: var(--blue-border);
    color: var(--blue-text);
}

/* ═══════════════════════════════════════
   STATS ROW
═══════════════════════════════════════ */
.deliverables-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border-light);
}

.deliverable-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 22px 12px;
    gap: 6px;
    position: relative;
    cursor: default;
    transition: background 0.18s;
}

.deliverable-item:hover {
    background: var(--blue-bg);
}

.deliverable-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--border-light);
}

.deliverable-item span {
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.deliverable-item h3 {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--black);
    line-height: 1;
    letter-spacing: -0.5px;
}

/* ═══════════════════════════════════════
   DESCRIPTION CARD
═══════════════════════════════════════ */
.package-description-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.package-description-card span {
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue-dark);
}

.package-description-card p {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--text-sub);
    line-height: 1.8;
}

/* ═══════════════════════════════════════
   LOADING
═══════════════════════════════════════ */
.loading-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 48px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ═══════════════════════════════════════
   ACTION CARD
═══════════════════════════════════════ */
.package-action-card {
    position: sticky;
    top: 100px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.package-action-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.package-action-card::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 35%, #38bdf8 70%, #7dd3fc 100%);
}

/* ACTION CONTENT */
.package-action-left {
    padding: 26px 26px 0;
}

.package-action-tag {
    display: inline-block;
    background: var(--blue-bg);
    color: var(--blue-text);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 100px;
    border: 1px solid var(--blue-border);
    margin-bottom: 18px;
}

.package-action-left h3 {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.4px;
    line-height: 1.3;
    margin-bottom: 12px;
}

.package-action-left p {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--text-sub);
    line-height: 1.75;
}

/* FEATURES */
.action-features {
    padding: 18px 26px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.action-feature-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sub);
}

.action-feature-row::before {
    content: '';
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background-color: var(--blue-bg);
    border: 1px solid var(--blue-border);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7l3 3 5-6' stroke='%230ea5e9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
}

/* DIVIDER */
.action-divider {
    height: 1px;
    background: var(--border-light);
    margin: 20px 26px 0;
}

/* BUTTON AREA */
.package-action-right {
    padding: 18px 26px 26px;
}

.package-action-right a {
    display: block;
    width: 100%;
    text-decoration: none;
}

.upgrade-plan-btn {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: var(--r-md);
    background: var(--blue);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.upgrade-plan-btn:hover {
    background: var(--blue-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn);
}

.upgrade-plan-btn:active {
    transform: scale(0.99);
    box-shadow: none;
}

.action-note {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-muted);
    margin-top: 10px;
}

/* ═══════════════════════════════════════════════════════
   DELIVERABLE USAGE & PACKAGE STATUS SECTION
═══════════════════════════════════════════════════════ */
.usage-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 6px;
}

.usage-section-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.usage-section-header h2 {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.4px;
}

.usage-section-header p {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-muted);
}

/* ── USAGE CARDS ROW ── */
.usage-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.usage-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.usage-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.usage-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.usage-card-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--blue-bg);
    color: var(--blue-deep);
    border: 1px solid var(--blue-border);
}

/* per-card accent (blue stays primary theme; others differentiate type) */
.usage-card--reels .usage-card-icon {
    background: var(--purple-bg);
    color: var(--purple);
    border-color: var(--purple-border);
}

.usage-card--videos .usage-card-icon {
    background: var(--orange-bg);
    color: var(--orange);
    border-color: var(--orange-border);
}

.usage-card-head h4 {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.2px;
}

/* STATS */
.usage-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    padding: 14px 0;
}

.usage-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.usage-stat span {
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.usage-stat h3 {
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.3px;
}

/* PROGRESS BAR */
.usage-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.usage-progress-track {
    width: 100%;
    height: 8px;
    border-radius: 100px;
    background: var(--border-light);
    overflow: hidden;
}

.usage-progress-fill {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, var(--blue-deep), var(--blue));
    transition: width 0.4s ease;
}

.usage-card--reels .usage-progress-fill {
    background: linear-gradient(90deg, #9333ea, var(--purple));
}

.usage-card--videos .usage-progress-fill {
    background: linear-gradient(90deg, #ea580c, var(--orange));
}

.usage-progress-labels {
    display: flex;
    justify-content: space-between;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

/* ── STATUS + UPGRADE SUMMARY GRID ── */
.status-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* PACKAGE STATUS CARD */
.status-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.status-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.status-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-icon-circle {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: var(--green-bg);
    border: 1px solid var(--green-border);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.status-eyebrow {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.status-active-label {
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--black);
    letter-spacing: -0.2px;
}

.status-divider {
    height: 1px;
    background: var(--border-light);
}

.status-detail-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-detail-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: var(--r-sm);
    background: var(--blue-bg);
    border: 1px solid var(--blue-border);
    color: var(--blue-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.status-detail-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.status-detail-text span {
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.status-detail-text p {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-sub);
}

.status-days-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--blue-bg);
    border: 1px solid var(--blue-border);
    border-radius: var(--r-md);
    padding: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-text);
}

.status-days-banner strong {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-deep);
}

/* UPGRADE SUMMARY CARD */
.upgrade-summary-card {
    background: linear-gradient(155deg, #f7fcff 0%, var(--surface) 55%);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.upgrade-summary-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.upgrade-summary-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.14), transparent 70%);
}

.upgrade-summary-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--blue-bg);
    color: var(--blue-text);
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 100px;
    border: 1px solid var(--blue-border);
    width: fit-content;
}

.upgrade-balance-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-sub);
}

.upgrade-balance-list li {
    display: flex;
    align-items: center;
    gap: 9px;
}

.upgrade-balance-list strong {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    color: var(--black);
}

.balance-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0;
}

.upgrade-summary-text {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--text-muted);
    line-height: 1.6;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}

/* ═══════════════════════════════════════
   RESPONSIVE — TABLET
═══════════════════════════════════════ */
@media (max-width: 1050px) {
    .package-layout {
        grid-template-columns: 1fr;
    }

    .package-action-card {
        position: relative;
        top: 0;
    }
}

@media (max-width: 900px) {
    .usage-cards-row {
        grid-template-columns: 1fr 1fr;
    }

    .status-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════════ */
@media (max-width: 580px) {
    .mypackage-page {
        padding: 24px 16px 44px;
    }

    .mypackage-header h2 {
        font-size: 26px;
    }

    .package-top {
        flex-direction: column;
        padding: 22px 22px 16px;
        gap: 12px;
    }

    .package-price {
        text-align: left;
    }

    .package-platforms {
        padding: 0 22px 18px;
    }

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

    .deliverable-item:nth-child(2)::after,
    .deliverable-item:nth-child(4)::after {
        display: none;
    }

    .package-description-card {
        padding: 18px 20px;
    }

    .package-action-left,
    .action-features {
        padding-left: 20px;
        padding-right: 20px;
    }

    .package-action-right {
        padding: 16px 20px 22px;
    }

    .action-divider {
        margin-left: 20px;
        margin-right: 20px;
    }

    .package-action-left h3 {
        font-size: 18px;
    }

    .upgrade-plan-btn {
        height: 48px;
        font-size: 14px;
    }

    .usage-cards-row {
        grid-template-columns: 1fr;
    }

    .usage-section-header h2 {
        font-size: 19px;
    }
}

/* user package */



/* ── TOKENS ── */
:root {
    --gold-50: #fdf8ee;
    --gold-100: #f5e4b0;
    --gold-200: #e8c96a;
    --gold-300: #d4a830;
    --gold-400: #b8891a;
    --gold-500: #9a6f0f;
    --gold-600: #7a5508;
    --gold-dark: #1a1408;
    --gold-charcoal: #2a2115;
    --gold-bg: #faf6ed;

    --pending-bg: #fffbeb;
    --pending-border: #fde68a;
    --pending-badge-bg: #fef3c7;
    --pending-badge-fg: #92400e;
    --pending-top: #fbbf24;

    --minor-bg: #eff6ff;
    --minor-border: #bfdbfe;
    --minor-badge-bg: #dbeafe;
    --minor-badge-fg: #1e40af;
    --minor-top: #3b82f6;

    --major-bg: #fff7ed;
    --major-border: #fed7aa;
    --major-badge-bg: #ffedd5;
    --major-badge-fg: #9a3412;
    --major-top: #f97316;

    --rejected-bg: #fef2f2;
    --rejected-border: #fecaca;
    --rejected-badge-bg: #fee2e2;
    --rejected-badge-fg: #7f1d1d;
    --rejected-top: #ef4444;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ── PAGE ── */
.posts-page {
    padding: 32px 28px 60px;
    background: var(--gold-bg);
    min-height: 100vh;
    font-family: 'DM Sans', sans-serif;
    color: var(--gold-dark);
}

/* ── PAGE HEADER ── */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 28px;
}

.page-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 34px;
    font-weight: 700;
    color: var(--gold-dark);
    margin: 0 0 4px;
    letter-spacing: 0.2px;
}

.page-subtitle {
    font-size: 13px;
    color: #9a8c72;
    margin: 0;
}

.header-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.header-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    min-width: 80px;
}

.header-stat-pill.stat-pending-review {
    background: var(--pending-badge-bg);
    border-color: var(--pending-border);
}

.header-stat-pill.stat-minor-changes {
    background: var(--minor-badge-bg);
    border-color: var(--minor-border);
}

.header-stat-pill.stat-major-rework {
    background: var(--major-badge-bg);
    border-color: var(--major-border);
}

.header-stat-pill.stat-rejected {
    background: var(--rejected-badge-bg);
    border-color: var(--rejected-border);
}

.stat-count {
    font-size: 18px;
    font-weight: 700;
    color: var(--gold-dark);
}

.stat-label {
    font-size: 10px;
    font-weight: 600;
    color: #7a6e5e;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
}

/* ── REUPLOAD BANNER ── */
.reupload-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-left: 4px solid #f97316;
    border-radius: var(--radius-md);
    padding: 14px 20px;
    margin-bottom: 20px;
    gap: 16px;
}

.reupload-banner-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.reupload-banner-icon {
    font-size: 22px;
    color: #f97316;
    flex-shrink: 0;
}

.reupload-banner-title {
    font-size: 14px;
    font-weight: 700;
    color: #7c2d12;
    margin: 0 0 2px;
}

.reupload-banner-sub {
    font-size: 12px;
    color: #9a4923;
    margin: 0;
}

.reupload-banner-cancel {
    background: transparent;
    border: 1px solid #fed7aa;
    color: #9a4923;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: 0.2s ease;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
}

.reupload-banner-cancel:hover {
    background: #fed7aa;
}

/* ── UPLOAD CARD ── */
.upload-card {
    background: #ffffff;
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    border: 1px solid #f0e9d8;
    margin-bottom: 36px;
    box-shadow: var(--shadow-md);
    transition: border-color 0.3s ease;
}

.upload-card-reupload {
    border-color: #fed7aa;
    box-shadow: 0 4px 20px rgba(249, 115, 22, 0.10), 0 0 0 2px #ffedd5;
}

.upload-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f5efe2;
    gap: 16px;
}

.upload-card-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--gold-dark);
    margin: 0 0 5px;
}

.upload-card-sub {
    font-size: 13px;
    color: #9a8c72;
    margin: 0;
}

.upload-mode-badge {
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--gold-50);
    border: 1px solid var(--gold-100);
    color: var(--gold-500);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.mode-badge-reupload {
    background: #ffedd5;
    border-color: #fed7aa;
    color: #9a3412;
}

/* ── FORM ── */
.upload-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b5c44;
    letter-spacing: 0.3px;
}

.label-required {
    color: #f97316;
    font-weight: 400;
}

.select-wrap {
    position: relative;
}

.select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9a8c72;
    font-size: 11px;
    pointer-events: none;
}

.form-control {
    width: 100%;
    border: 1.5px solid #ede4d4;
    border-radius: var(--radius-sm);
    background: var(--gold-50);
    padding: 11px 14px;
    font-size: 13.5px;
    font-family: 'DM Sans', sans-serif;
    color: var(--gold-dark);
    outline: none;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.form-control:focus {
    border-color: var(--gold-300);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(212, 168, 48, 0.12);
}

.form-textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.7;
}

/* ── FILE DROP ZONE ── */
.file-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1.5px dashed var(--gold-200);
    border-radius: var(--radius-sm);
    background: var(--gold-50);
    padding: 18px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.file-drop-zone:hover {
    border-color: var(--gold-300);
    background: #fff;
}

.file-input-hidden {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.file-drop-icon {
    font-size: 20px;
    color: var(--gold-400);
}

.file-drop-text {
    font-size: 13px;
    color: var(--gold-500);
    font-weight: 500;
}

.file-drop-size {
    font-size: 11px;
    color: #9a8c72;
}

/* ── FORM ACTIONS ── */
.form-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.btn-primary {
    height: 50px;
    padding: 0 44px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--gold-300), var(--gold-400));
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(180, 130, 20, 0.28);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(180, 130, 20, 0.38);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary.btn-reupload {
    background: linear-gradient(135deg, #f97316, #dc2626);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.30);
}

.btn-primary.btn-reupload:hover {
    box-shadow: 0 10px 28px rgba(249, 115, 22, 0.40);
}

.btn-secondary {
    height: 50px;
    padding: 0 28px;
    border: 1.5px solid #ede4d4;
    border-radius: var(--radius-md);
    background: transparent;
    color: #7a6e5e;
    font-size: 14px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: var(--gold-50);
    border-color: var(--gold-200);
}

/* ── TASKS SECTION ── */
.tasks-section {
    margin-top: 8px;
}

.tasks-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 16px;
}

.tasks-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--gold-dark);
    margin: 0 0 4px;
}

.tasks-sub {
    font-size: 13px;
    color: #9a8c72;
    margin: 0;
}

.tasks-count-badge {
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--gold-50);
    border: 1px solid var(--gold-100);
    color: var(--gold-600);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── EMPTY STATE ── */
.empty-state {
    background: #ffffff;
    border-radius: var(--radius-xl);
    border: 1px solid #f0e9d8;
    padding: 64px 32px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #15803d;
    margin: 0 auto 18px;
}

.empty-state-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--gold-dark);
    margin: 0 0 8px;
}

.empty-state-sub {
    font-size: 14px;
    color: #9a8c72;
    margin: 0;
}

/* ── CONTENT GRID ── */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

/* ── CONTENT CARD ── */
.content-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1.5px solid #f0e9d8;
    border-top-width: 4px;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-sm);
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.card-pending {
    border-color: var(--pending-border);
    border-top-color: var(--pending-top);
    background: var(--pending-bg);
}

.card-minor {
    border-color: var(--minor-border);
    border-top-color: var(--minor-top);
    background: var(--minor-bg);
}

.card-major {
    border-color: var(--major-border);
    border-top-color: var(--major-top);
    background: var(--major-bg);
}

.card-rejected {
    border-color: var(--rejected-border);
    border-top-color: var(--rejected-top);
    background: var(--rejected-bg);
}

/* ── CARD MEDIA ── */
.card-media {
    position: relative;
    width: 100%;
    height: 210px;
    background: linear-gradient(135deg, #f5ede0, #e8d9c0);
    overflow: hidden;
}

.card-media-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(6px);
}

.badge-pending {
    background: var(--pending-badge-bg);
    color: var(--pending-badge-fg);
    border: 1px solid #fde68a;
}

.badge-minor {
    background: var(--minor-badge-bg);
    color: var(--minor-badge-fg);
    border: 1px solid #bfdbfe;
}

.badge-major {
    background: var(--major-badge-bg);
    color: var(--major-badge-fg);
    border: 1px solid #fed7aa;
}

.badge-rejected {
    background: var(--rejected-badge-bg);
    color: var(--rejected-badge-fg);
    border: 1px solid #fecaca;
}

/* ── CARD BODY ── */
.card-body {
    padding: 20px;
}

/* ── CLIENT ROW ── */
.card-client-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.client-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-200), var(--gold-300));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    flex-shrink: 0;
}

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

.client-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--gold-dark);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-email {
    font-size: 11.5px;
    color: #9a8c72;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attempt-badge {
    background: var(--gold-50);
    border: 1px solid var(--gold-100);
    color: var(--gold-600);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* ── META PILLS ── */
.card-meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.meta-pill {
    padding: 4px 12px;
    border-radius: 100px;
    background: var(--gold-50);
    border: 1px solid var(--gold-100);
    color: var(--gold-500);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.meta-pill-type {
    background: #f8f4ff;
    border-color: #e0d5fa;
    color: #5b21b6;
}

/* ── CAPTION ── */
.card-caption {
    font-size: 13.5px;
    line-height: 1.75;
    color: #6b5c44;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── FEEDBACK BOX ── */
.feedback-box {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 3px solid #f59e0b;
    border-radius: var(--radius-sm);
    padding: 14px;
    margin-bottom: 16px;
}

.feedback-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.feedback-icon {
    font-size: 14px;
}

.feedback-title {
    font-size: 11px;
    font-weight: 700;
    color: #92400e;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.feedback-text {
    font-size: 13px;
    color: #78350f;
    line-height: 1.7;
    margin: 0;
}

/* ── REUPLOAD BUTTON ── */
.btn-reupload-card {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #f97316, #dc2626);
    color: #ffffff;
    font-size: 13.5px;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.22);
}

.btn-reupload-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.32);
}

.btn-reupload-card:active {
    transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .posts-page {
        padding: 24px 16px 48px;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-stats {
        width: 100%;
    }

    .header-stat-pill {
        flex: 1;
        min-width: 0;
    }

    .upload-card {
        padding: 22px 18px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

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

    .page-title {
        font-size: 26px;
    }

    .tasks-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

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

.rework-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    backdrop-filter: blur(4px);
}

.rework-popup {
    width: 430px;
    max-width: 92%;
    background: #fff;
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    animation: popupScale .25s;
}

.rework-popup h2 {
    margin-bottom: 12px;
}

.rework-popup p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.rework-popup-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rework-popup-buttons button {
    flex: 1;
}

@keyframes popupScale {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media(max-width:600px) {

    .rework-popup-buttons {
        flex-direction: column;
    }

}


/* user content page */

/* ── TOKENS ── */
:root {
    --cr-sky-50: #f0f9ff;
    --cr-sky-100: #e0f2fe;
    --cr-sky-200: #bae6fd;
    --cr-sky-400: #38bdf8;
    --cr-sky-500: #0ea5e9;
    --cr-sky-600: #0284c7;
    --cr-sky-700: #0369a1;
    --cr-sky-900: #0c4a6e;

    --cr-amber-50: #fffbeb;
    --cr-amber-100: #fef3c7;
    --cr-amber-200: #fde68a;
    --cr-amber-400: #fbbf24;
    --cr-amber-500: #f59e0b;
    --cr-amber-700: #b45309;
    --cr-amber-800: #92400e;

    --cr-green-50: #f0fdf4;
    --cr-green-100: #dcfce7;
    --cr-green-200: #bbf7d0;
    --cr-green-500: #22c55e;
    --cr-green-600: #16a34a;
    --cr-green-700: #15803d;

    --cr-orange-50: #fff7ed;
    --cr-orange-100: #ffedd5;
    --cr-orange-200: #fed7aa;
    --cr-orange-500: #f97316;
    --cr-orange-700: #c2410c;

    --cr-blue-50: #eff6ff;
    --cr-blue-100: #dbeafe;
    --cr-blue-200: #bfdbfe;
    --cr-blue-600: #2563eb;
    --cr-blue-700: #1d4ed8;
    --cr-blue-800: #1e40af;

    --cr-violet-100: #ede9fe;
    --cr-violet-200: #ddd6fe;
    --cr-violet-700: #6d28d9;

    --cr-white: #ffffff;
    --cr-gray-50: #f8fafc;
    --cr-gray-100: #f1f5f9;
    --cr-gray-200: #e2e8f0;
    --cr-gray-300: #cbd5e1;
    --cr-gray-400: #000;
    --cr-gray-500: #64748b;
    --cr-gray-600: #475569;
    --cr-gray-700: #334155;
    --cr-gray-800: #1e293b;
    --cr-gray-900: #0f172a;

    --cr-page-bg: linear-gradient(155deg, #eef6ff 0%, #f4f1ff 45%, #edfff5 100%);

    --cr-font: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;

    --cr-r-sm: 6px;
    --cr-r-md: 12px;
    --cr-r-lg: 16px;
    --cr-r-xl: 20px;
    --cr-r-2xl: 26px;

    --cr-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.05);
    --cr-shadow-sm: 0 2px 8px rgba(14, 165, 233, 0.07), 0 1px 3px rgba(15, 23, 42, 0.04);
    --cr-shadow-md: 0 6px 20px rgba(14, 165, 233, 0.11), 0 2px 8px rgba(15, 23, 42, 0.06);
    --cr-shadow-lg: 0 14px 36px rgba(14, 165, 233, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08);
    --cr-shadow-xl: 0 22px 52px rgba(14, 165, 233, 0.20), 0 8px 20px rgba(15, 23, 42, 0.10);

    --cr-glow-sky: 0 0 0 3px rgba(14, 165, 233, 0.18);
    --cr-glow-amber: 0 0 0 3px rgba(245, 158, 11, 0.18);
    --cr-glow-green: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* ── PAGE ROOT ── */
.cr-root {
    padding: 36px 32px 80px;
    min-height: 100vh;
    background: var(--cr-page-bg);
    font-family: var(--cr-font);
    color: var(--cr-gray-900);
}

/* ════════════════════════════════════════════
   PAGE HEADER
   ════════════════════════════════════════════ */
.cr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 36px;
}

.cr-header-left {
    flex: 1;
    min-width: 220px;
}

.cr-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--cr-sky-600);
    background: var(--cr-sky-50);
    border: 1px solid var(--cr-sky-200);
    padding: 5px 13px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.cr-header-title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--cr-gray-900);
    margin: 0 0 6px;
    line-height: 1.1;
    background: linear-gradient(130deg, var(--cr-gray-900) 0%, var(--cr-sky-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cr-header-sub {
    font-size: 14px;
    color: var(--cr-gray-500);
    margin: 0;
    font-weight: 400;
}

/* ── METRIC CARDS ── */
.cr-header-metrics {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.cr-metric {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--cr-white);
    border: 1px solid var(--cr-gray-200);
    border-radius: var(--cr-r-xl);
    padding: 16px 20px;
    min-width: 130px;
    box-shadow: var(--cr-shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cr-metric:hover {
    transform: translateY(-2px);
    box-shadow: var(--cr-shadow-md);
}

.cr-metric-amber {
    background: linear-gradient(135deg, var(--cr-amber-50) 0%, #fff 60%);
    border-color: var(--cr-amber-200);
}

.cr-metric-sky {
    background: linear-gradient(135deg, var(--cr-sky-50) 0%, #fff 60%);
    border-color: var(--cr-sky-200);
}

.cr-metric-gray {
    background: linear-gradient(135deg, var(--cr-gray-50) 0%, #fff 60%);
    border-color: var(--cr-gray-200);
}

.cr-metric-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--cr-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.cr-metric-amber .cr-metric-icon {
    background: var(--cr-amber-100);
    color: var(--cr-amber-700);
}

.cr-metric-sky .cr-metric-icon {
    background: var(--cr-sky-100);
    color: var(--cr-sky-600);
}

.cr-metric-gray .cr-metric-icon {
    background: var(--cr-gray-100);
    color: var(--cr-gray-500);
}

.cr-metric-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cr-metric-num {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--cr-gray-900);
    line-height: 1;
}

.cr-metric-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--cr-gray-400);
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
}

.cr-metric-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.cr-metric-bar-amber {
    background: linear-gradient(90deg, var(--cr-amber-400), var(--cr-amber-500));
}

.cr-metric-bar-sky {
    background: linear-gradient(90deg, var(--cr-sky-400), var(--cr-sky-500));
}

.cr-metric-bar-gray {
    background: var(--cr-gray-200);
}

/* ════════════════════════════════════════════
   TOOLBAR: FILTERS + SEARCH
   ════════════════════════════════════════════ */
.cr-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ── FILTER PILL TABS ── */
.cr-filter-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--cr-white);
    border: 1.5px solid var(--cr-gray-200);
    border-radius: var(--cr-r-2xl);
    padding: 5px 6px;
    box-shadow: var(--cr-shadow-xs);
    flex-wrap: wrap;
}

.cr-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 100px;
    border: none;
    background: transparent;
    color: var(--cr-gray-500);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--cr-font);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.cr-filter-tab i {
    font-size: 13px;
    transition: transform 0.18s ease;
}

.cr-filter-tab:hover {
    background: var(--cr-gray-100);
    color: var(--cr-gray-800);
}

.cr-filter-tab:hover i {
    transform: scale(1.1);
}

.cr-tab-active {
    background: var(--cr-sky-600);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(2, 132, 199, 0.32), var(--cr-glow-sky);
}

.cr-tab-active:hover {
    background: var(--cr-sky-700);
    color: #ffffff;
}

.cr-tab-active i {
    color: rgba(255, 255, 255, 0.9);
}

.cr-tab-badge {
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
}

.cr-tab-active .cr-tab-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.cr-filter-tab:not(.cr-tab-active) .cr-tab-badge {
    background: var(--cr-gray-100);
    color: var(--cr-gray-500);
}

/* ── SEARCH ── */
.cr-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}

.cr-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--cr-gray-400);
    pointer-events: none;
}

.cr-search {
    width: 100%;
    padding: 10px 36px 10px 36px;
    background: var(--cr-white);
    border: 1.5px solid var(--cr-gray-200);
    border-radius: var(--cr-r-xl);
    font-size: 13px;
    font-family: var(--cr-font);
    color: var(--cr-gray-800);
    outline: none;
    box-shadow: var(--cr-shadow-xs);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.cr-search:focus {
    border-color: var(--cr-sky-400);
    box-shadow: var(--cr-shadow-xs), var(--cr-glow-sky);
}

.cr-search::placeholder {
    color: var(--cr-gray-400);
}

.cr-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cr-gray-100);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cr-gray-500);
    font-size: 11px;
    transition: background 0.15s, color 0.15s;
}

.cr-search-clear:hover {
    background: var(--cr-gray-200);
    color: var(--cr-gray-800);
}

/* ════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════ */
.cr-section {
    margin-bottom: 52px;
}

.cr-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.cr-section-indicator {
    width: 4px;
    height: 30px;
    border-radius: 4px;
    flex-shrink: 0;
}

.cr-indicator-pending {
    background: linear-gradient(180deg, var(--cr-amber-400), var(--cr-amber-500));
}

.cr-indicator-waiting {
    background: linear-gradient(180deg, var(--cr-sky-400), var(--cr-sky-500));
}

.cr-section-head-text {
    flex: 1;
}

.cr-section-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--cr-gray-900);
    margin: 0;
    letter-spacing: -0.3px;
}

.cr-section-desc {
    font-size: 12.5px;
    color: var(--cr-gray-500);
    margin: 2px 0 0;
}

.cr-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.cr-section-badge i {
    font-size: 10px;
}

.cr-badge-pending {
    background: var(--cr-amber-100);
    color: var(--cr-amber-800);
    border: 1px solid var(--cr-amber-200);
}

.cr-badge-waiting {
    background: var(--cr-sky-100);
    color: var(--cr-sky-700);
    border: 1px solid var(--cr-sky-200);
}

/* ════════════════════════════════════════════
   EMPTY STATES
   ════════════════════════════════════════════ */
.cr-empty {
    background: var(--cr-white);
    border-radius: var(--cr-r-2xl);
    border: 1.5px dashed var(--cr-gray-200);
    padding: 64px 32px;
    text-align: center;
}

.cr-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 18px;
}

.cr-empty-icon-green {
    background: var(--cr-green-100);
    color: var(--cr-green-600);
    border: 1.5px solid var(--cr-green-200);
}

.cr-empty-icon-blue {
    background: var(--cr-sky-100);
    color: var(--cr-sky-700);
    border: 1.5px solid var(--cr-sky-200);
}

.cr-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--cr-gray-800);
    margin: 0 0 7px;
}

.cr-empty-desc {
    font-size: 13.5px;
    color: var(--cr-gray-400);
    margin: 0;
}

/* ════════════════════════════════════════════
   CARD GRID
   ════════════════════════════════════════════ */
.cr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
}

/* ════════════════════════════════════════════
   WORKFLOW CARD
   ════════════════════════════════════════════ */
.cr-card {
    background: var(--cr-white);
    border-radius: var(--cr-r-xl);
    border: 1.5px solid var(--cr-gray-200);
    overflow: hidden;
    box-shadow: var(--cr-shadow-sm);
    transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
    display: flex;
    flex-direction: column;
    animation: cr-card-in 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Active cards — priority glow */
.cr-card-active {
    border-color: var(--cr-amber-200);
    box-shadow: var(--cr-shadow-sm), 0 0 0 1px rgba(245, 158, 11, 0.10);
}

.cr-card-active:hover {
    transform: translateY(-4px);
    box-shadow: var(--cr-shadow-xl), 0 0 0 1px rgba(245, 158, 11, 0.18);
    border-color: var(--cr-amber-300);
}

/* Waiting cards */
.cr-card-waiting {
    border-color: var(--cr-gray-200);
    opacity: 0.85;
    filter: saturate(0.72);
}

.cr-card-waiting:hover {
    opacity: 0.94;
    transform: translateY(-2px);
    box-shadow: var(--cr-shadow-md);
}

@keyframes cr-card-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.988);
    }

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

/* ── ATTEMPT STRIP ── */
.cr-attempt-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.cr-attempt-pending-review {
    background: linear-gradient(90deg, var(--cr-amber-50), #fff9ee);
    color: var(--cr-amber-800);
}

.cr-attempt-minor-changes {
    background: linear-gradient(90deg, var(--cr-blue-50), #f5f8ff);
    color: var(--cr-blue-800);
}

.cr-attempt-major-rework {
    background: linear-gradient(90deg, var(--cr-orange-50), #fff8f5);
    color: var(--cr-orange-700);
}

.cr-attempt-approved {
    background: linear-gradient(90deg, var(--cr-green-50), #f5fffb);
    color: var(--cr-green-700);
}

.cr-attempt-left {
    display: flex;
    align-items: center;
    gap: 7px;
}

.cr-attempt-left i {
    font-size: 12px;
    opacity: 0.7;
}

.cr-attempt-right {
    display: flex;
    align-items: center;
    gap: 7px;
}

.cr-attempt-status {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.cr-version-pill {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--cr-gray-600);
    letter-spacing: 0.4px;
}

/* STATUS DOT */
.cr-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.cr-dot-pending {
    background: var(--cr-amber-500);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
}

.cr-dot-minor {
    background: var(--cr-blue-600);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.22);
}

.cr-dot-major {
    background: var(--cr-orange-500);
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.22);
}

.cr-dot-approved {
    background: var(--cr-green-600);
    box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.22);
}

/* ── MEDIA AREA ── */
.cr-media-wrap {
    position: relative;
    width: 100%;
    height: 235px;
    background: var(--cr-gray-900);
    overflow: hidden;
    flex-shrink: 0;
}

.cr-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cr-card-active:hover .cr-media {
    transform: scale(1.04);
}

/* GRADIENT OVERLAY */
.cr-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 20, 50, 0.52) 0%, rgba(10, 20, 50, 0.10) 45%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.cr-card-active:hover .cr-media-overlay {
    opacity: 0.88;
}

/* PRIORITY GLOW — active pending card top edge */
.cr-priority-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cr-amber-400), var(--cr-amber-500), var(--cr-amber-400));
    background-size: 200% 100%;
    animation: cr-shimmer 2.5s ease infinite;
}

@keyframes cr-shimmer {

    0%,
    100% {
        background-position: 200% 0;
    }

    50% {
        background-position: -200% 0;
    }
}

/* VIDEO BADGE */
.cr-video-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.cr-video-badge i {
    font-size: 10px;
}

/* WAITING OVERLAY */
.cr-waiting-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.50);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cr-waiting-glass {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(18px);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28);
}

.cr-waiting-glass i {
    font-size: 14px;
}

/* WAITING PULSE DOT */
.cr-waiting-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cr-sky-400);
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
    animation: cr-pulse 1.8s ease-out infinite;
}

@keyframes cr-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(56, 189, 248, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
    }
}

/* BOTTOM BADGES */
.cr-media-badges {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.cr-platform-badge,
.cr-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.cr-platform-badge {
    background: rgba(2, 132, 199, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.cr-type-badge {
    background: rgba(109, 40, 217, 0.85);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cr-platform-badge i,
.cr-type-badge i {
    font-size: 10px;
}

/* ── CARD BODY ── */
.cr-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ── META ROW ── */
.cr-meta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cr-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--cr-gray-500);
    font-weight: 500;
}

.cr-meta-item i {
    font-size: 11px;
    color: var(--cr-gray-400);
}

.cr-meta-revision {
    margin-left: auto;
    color: var(--cr-amber-700);
    background: var(--cr-amber-50);
    border: 1px solid var(--cr-amber-200);
    padding: 3px 10px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
}

.cr-meta-revision i {
    color: var(--cr-amber-500);
}

/* ── CAPTION ── */
.cr-caption {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--cr-gray-600);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── FEEDBACK DISPLAY ── */
.cr-feedback-display {
    background: var(--cr-gray-50);
    border: 1px solid var(--cr-gray-200);
    border-left: 3px solid var(--cr-sky-500);
    border-radius: var(--cr-r-md);
    padding: 13px 14px;
}

.cr-feedback-display-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.cr-feedback-display-header i {
    font-size: 12px;
    color: var(--cr-sky-600);
}

.cr-feedback-display-header span {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--cr-sky-700);
}

.cr-feedback-display-text {
    font-size: 13px;
    color: var(--cr-gray-700);
    line-height: 1.7;
    margin: 0;
}

/* ── FEEDBACK TEXTAREA ── */
.cr-feedback-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cr-feedback-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--cr-gray-500);
}

.cr-feedback-label i {
    font-size: 11px;
}

.cr-feedback-textarea {
    width: 100%;
    min-height: 88px;
    border: 1.5px solid var(--cr-gray-200);
    border-radius: var(--cr-r-md);
    background: var(--cr-gray-50);
    padding: 11px 13px;
    resize: none;
    outline: none;
    font-size: 13.5px;
    font-family: var(--cr-font);
    color: var(--cr-gray-800);
    line-height: 1.7;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}

.cr-feedback-textarea::placeholder {
    color: var(--cr-gray-400);
}

.cr-feedback-textarea:focus {
    border-color: var(--cr-sky-400);
    background: var(--cr-white);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

/* ── WORKFLOW TIMELINE ── */
.cr-timeline-block {
    border: 1px solid var(--cr-gray-200);
    border-radius: var(--cr-r-md);
    overflow: hidden;
}

.cr-timeline-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--cr-gray-50);
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--cr-gray-600);
    font-family: var(--cr-font);
    text-align: left;
    transition: background 0.15s;
}

.cr-timeline-toggle:hover {
    background: var(--cr-gray-100);
}

.cr-timeline-toggle i {
    font-size: 11px;
    color: var(--cr-gray-400);
}

.cr-timeline-count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 100px;
    background: var(--cr-sky-100);
    color: var(--cr-sky-700);
    border: 1px solid var(--cr-sky-200);
}

.cr-timeline {
    padding: 14px 16px;
    background: var(--cr-white);
    display: flex;
    flex-direction: column;
}

.cr-tl-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.cr-tl-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 26px;
}

.cr-tl-node {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.cr-tl-line {
    width: 2px;
    height: 18px;
    background: var(--cr-gray-200);
    border-radius: 2px;
    margin-top: 2px;
}

.cr-tl-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    padding-bottom: 20px;
    flex: 1;
}

.cr-tl-last .cr-tl-content {
    padding-bottom: 0;
}

.cr-tl-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--cr-gray-700);
}

.cr-tl-status {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 100px;
    letter-spacing: 0.3px;
}

/* Timeline node themes */
.tl-approved {
    background: var(--cr-green-100);
    color: var(--cr-green-700);
    border: 1px solid var(--cr-green-200);
}

.tl-minor {
    background: var(--cr-blue-100);
    color: var(--cr-blue-800);
    border: 1px solid var(--cr-blue-200);
}

.tl-major {
    background: var(--cr-orange-100);
    color: var(--cr-orange-700);
    border: 1px solid var(--cr-orange-200);
}

.tl-pending {
    background: var(--cr-amber-100);
    color: var(--cr-amber-800);
    border: 1px solid var(--cr-amber-200);
}

.tl-revision {
    background: var(--cr-violet-100);
    color: var(--cr-violet-700);
    border: 1px solid var(--cr-violet-200);
}

/* ── ACTION BUTTONS ── */
.cr-actions {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(140px, 1fr));

    gap: 10px;

    margin-top: auto;
}

.cr-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 0;

    height: 44px;

    padding: 0 12px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    border: none;

    border-radius: var(--cr-r-md);

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

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

    cursor: pointer;

    letter-spacing: 0.2px;

    transition: all 0.22s ease;
}

.cr-action-btn i {
    font-size: 13px;
    flex-shrink: 0;
}

.cr-action-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-action-btn:disabled {
    opacity: 0.48;
    cursor: not-allowed;

    transform: none !important;
    box-shadow: none !important;
}

/* APPROVE */
.cr-action-approve {
    background: linear-gradient(135deg, #16a34a, #15803d);

    box-shadow:
        0 3px 10px rgba(22, 163, 74, 0.26);
}

.cr-action-approve:hover:not(:disabled) {
    background:
        linear-gradient(135deg, #15803d, #14532d);

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(22, 163, 74, 0.34);
}

/* MINOR */
.cr-action-minor {
    background:
        linear-gradient(135deg, #2563eb, #1d4ed8);

    box-shadow:
        0 3px 10px rgba(37, 99, 235, 0.26);
}

.cr-action-minor:hover:not(:disabled) {
    background:
        linear-gradient(135deg, #1d4ed8, #1e40af);

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(37, 99, 235, 0.34);
}

/* MAJOR */
.cr-action-major {
    background:
        linear-gradient(135deg, #f97316, #ea580c);

    box-shadow:
        0 3px 10px rgba(249, 115, 22, 0.26);
}

.cr-action-major:hover:not(:disabled) {
    background:
        linear-gradient(135deg, #ea580c, #c2410c);

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(249, 115, 22, 0.34);
}

/* ── WAITING STATUS BANNER ── */
.cr-waiting-actions {
    margin-top: auto;
}

.cr-revision-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--cr-r-md);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    width: 100%;
    box-sizing: border-box;
}

.cr-revision-status i {
    font-size: 14px;
}

.cr-revision-minor-changes {
    background: var(--cr-blue-50);
    border: 1.5px solid var(--cr-blue-200);
    color: var(--cr-blue-800);
}

.cr-revision-major-rework {
    background: var(--cr-orange-50);
    border: 1.5px solid var(--cr-orange-200);
    color: var(--cr-orange-700);
}

/* ── VIEW WORKFLOW BUTTON ── */
.cr-view-workflow-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    background: var(--cr-gray-50);
    border: 1.5px solid var(--cr-gray-200);
    border-radius: var(--cr-r-md);
    color: var(--cr-gray-600);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--cr-font);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    box-sizing: border-box;
}

.cr-view-workflow-btn i:first-child {
    font-size: 13px;
    color: var(--cr-sky-500);
}

.cr-view-workflow-btn:hover {
    background: var(--cr-sky-50);
    border-color: var(--cr-sky-300);
    color: var(--cr-sky-700);
}

.cr-view-arrow {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.cr-view-workflow-btn:hover .cr-view-arrow {
    transform: translateX(4px);
    opacity: 1;
}

/* ── SPIN ── */
.cr-spin {
    animation: cr-rotate 0.75s linear infinite;
}

@keyframes cr-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .cr-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .cr-root {
        padding: 20px 16px 56px;
    }

    .cr-header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 28px;
    }

    .cr-header-title {
        font-size: 26px;
    }

    .cr-header-metrics {
        width: 100%;
        gap: 10px;
    }

    .cr-metric {
        flex: 1;
        min-width: 0;
        padding: 13px 14px;
    }

    .cr-metric-num {
        font-size: 22px;
    }

    .cr-metric-label {
        font-size: 9px;
    }

    .cr-metric-icon {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .cr-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .cr-filter-bar {
        width: 100%;
    }

    .cr-search-wrap {
        max-width: 100%;
    }

    .cr-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cr-actions {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .cr-action-btn {
        height: 48px;
        font-size: 13px;
    }
}

@media (max-width: 420px) {
    .cr-header-title {
        font-size: 22px;
    }

    .cr-header-metrics {
        flex-direction: column;
    }

    .cr-metric {
        width: 100%;
    }
}

/* user content page */


/* user history */
/* ─────────────────────────────────────────────────────────────
   WORKFLOW HISTORY PAGE  —  Content Gallery Edition
   ───────────────────────────────────────────────────────────── */

/* ── DESIGN TOKENS ── */
:root {
    --wh-blue-50: #eff6ff;
    --wh-blue-100: #dbeafe;
    --wh-blue-200: #bfdbfe;
    --wh-blue-400: #60a5fa;
    --wh-blue-500: #3b82f6;
    --wh-blue-600: #2563eb;
    --wh-blue-700: #1d4ed8;
    --wh-blue-800: #1e40af;
    --wh-blue-900: #1e3a8a;

    --wh-green-50: #f0fdf4;
    --wh-green-100: #dcfce7;
    --wh-green-200: #bbf7d0;
    --wh-green-400: #4ade80;
    --wh-green-500: #22c55e;
    --wh-green-600: #16a34a;
    --wh-green-700: #15803d;

    --wh-amber-50: #fffbeb;
    --wh-amber-100: #fef3c7;
    --wh-amber-200: #fde68a;
    --wh-amber-500: #f59e0b;
    --wh-amber-700: #b45309;
    --wh-amber-800: #92400e;

    --wh-orange-100: #ffedd5;
    --wh-orange-200: #fed7aa;
    --wh-orange-700: #c2410c;

    --wh-violet-100: #ede9fe;
    --wh-violet-200: #ddd6fe;
    --wh-violet-600: #7c3aed;
    --wh-violet-700: #6d28d9;

    --wh-slate-50: #f8fafc;
    --wh-slate-100: #f1f5f9;
    --wh-slate-200: #e2e8f0;
    --wh-slate-300: #cbd5e1;
    --wh-slate-400: #94a3b8;
    --wh-slate-500: #64748b;
    --wh-slate-600: #475569;
    --wh-slate-700: #334155;
    --wh-slate-800: #1e293b;
    --wh-slate-900: #0f172a;
    --wh-white: #ffffff;

    --wh-page-bg: linear-gradient(155deg, #eef5ff 0%, #f4f1ff 45%, #edfff5 100%);

    --wh-font: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif;

    --wh-r-sm: 6px;
    --wh-r-md: 10px;
    --wh-r-lg: 14px;
    --wh-r-xl: 18px;
    --wh-r-2xl: 24px;
    --wh-r-3xl: 32px;

    --wh-shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --wh-shadow-sm: 0 2px 8px rgba(37, 99, 235, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
    --wh-shadow-md: 0 6px 20px rgba(37, 99, 235, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
    --wh-shadow-lg: 0 16px 40px rgba(37, 99, 235, 0.13), 0 4px 14px rgba(15, 23, 42, 0.07);
    --wh-shadow-xl: 0 24px 56px rgba(37, 99, 235, 0.18), 0 8px 22px rgba(15, 23, 42, 0.09);

    --wh-glow-blue: 0 0 0 3px rgba(59, 130, 246, 0.18);
    --wh-glow-green: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* ── PAGE ROOT ── */
.wh-root {
    padding: 40px 36px 80px;
    min-height: 100vh;
    background: var(--wh-page-bg);
    font-family: var(--wh-font);
    color: var(--wh-slate-900);
}

/* ════════════════════════════════════════════
   PAGE HEADER
   ════════════════════════════════════════════ */
.wh-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
    margin-bottom: 32px;
}

.wh-header-left {
    flex: 1;
    min-width: 220px;
}

.wh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--wh-blue-600);
    background: var(--wh-blue-50);
    border: 1px solid var(--wh-blue-200);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 14px;
}

.wh-eyebrow .ti {
    font-size: 11px;
}

.wh-title {
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0 0 6px;
    line-height: 1.08;
    background: linear-gradient(130deg, var(--wh-slate-900) 0%, var(--wh-blue-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wh-subtitle {
    font-size: 14px;
    color: var(--wh-slate-500);
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
}

/* ── HEADER RIGHT: STATS ── */
.wh-header-right {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.wh-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-radius: var(--wh-r-xl);
    border: 1px solid transparent;
    background: var(--wh-white);
    box-shadow: var(--wh-shadow-sm);
    min-width: 140px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wh-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--wh-shadow-md);
}

.wh-stat-blue {
    border-color: var(--wh-blue-200);
    background: linear-gradient(135deg, var(--wh-blue-50) 0%, #fff 60%);
}

.wh-stat-green {
    border-color: var(--wh-green-200);
    background: linear-gradient(135deg, var(--wh-green-50) 0%, #fff 60%);
}

.wh-stat-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: var(--wh-r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.wh-stat-blue .wh-stat-icon-wrap {
    background: var(--wh-blue-100);
    color: var(--wh-blue-600);
}

.wh-stat-green .wh-stat-icon-wrap {
    background: var(--wh-green-100);
    color: var(--wh-green-600);
}

.wh-stat-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wh-stat-value {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--wh-slate-900);
    line-height: 1;
}

.wh-stat-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--wh-slate-400);
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
}

/* ════════════════════════════════════════════
   TOOLBAR: FILTER BAR + SEARCH
   ════════════════════════════════════════════ */
.wh-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* ── PILL FILTER TABS ── */
.wh-filter-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--wh-white);
    border: 1.5px solid var(--wh-slate-200);
    border-radius: var(--wh-r-2xl);
    padding: 5px 6px;
    box-shadow: var(--wh-shadow-xs);
    flex-wrap: wrap;
}

.wh-filter-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: var(--wh-r-xl);
    border: none;
    background: transparent;
    color: var(--wh-slate-500);
    font-size: 13px;
    font-weight: 600;
    font-family: var(--wh-font);
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    position: relative;
}

.wh-filter-tab .ti {
    font-size: 14px;
    transition: transform 0.18s ease;
}

.wh-filter-tab:hover {
    background: var(--wh-slate-100);
    color: var(--wh-slate-800);
}

.wh-filter-tab:hover .ti {
    transform: scale(1.1);
}

/* ACTIVE STATE — blue glow pill */
.wh-tab-active {
    background: var(--wh-blue-600);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35), var(--wh-glow-blue);
}

.wh-tab-active:hover {
    background: var(--wh-blue-700);
    color: #ffffff;
}

.wh-tab-active .ti {
    color: rgba(255, 255, 255, 0.9);
}

/* COUNT BADGE */
.wh-tab-badge {
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    transition: background 0.18s ease, color 0.18s ease;
}

.wh-tab-active .wh-tab-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

.wh-filter-tab:not(.wh-tab-active) .wh-tab-badge {
    background: var(--wh-slate-100);
    color: var(--wh-slate-500);
}

/* ── SEARCH ── */
.wh-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 360px;
}

.wh-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--wh-slate-400);
    pointer-events: none;
}

.wh-search {
    width: 100%;
    padding: 10px 36px 10px 36px;
    background: var(--wh-white);
    border: 1.5px solid var(--wh-slate-200);
    border-radius: var(--wh-r-xl);
    font-size: 13px;
    font-family: var(--wh-font);
    color: var(--wh-slate-800);
    outline: none;
    box-shadow: var(--wh-shadow-xs);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    box-sizing: border-box;
}

.wh-search:focus {
    border-color: var(--wh-blue-400);
    box-shadow: var(--wh-shadow-xs), var(--wh-glow-blue);
}

.wh-search::placeholder {
    color: var(--wh-slate-400);
}

.wh-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wh-slate-100);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wh-slate-500);
    font-size: 11px;
    transition: background 0.15s ease, color 0.15s ease;
}

.wh-search-clear:hover {
    background: var(--wh-slate-200);
    color: var(--wh-slate-800);
}

/* ── RESULT HINT ── */
.wh-result-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--wh-slate-400);
    font-weight: 500;
    margin-bottom: 28px;
}

.wh-result-hint .ti {
    font-size: 13px;
}

/* ════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════ */
.wh-empty {
    background: var(--wh-white);
    border-radius: var(--wh-r-2xl);
    border: 1.5px dashed var(--wh-slate-200);
    padding: 80px 32px;
    text-align: center;
}

.wh-empty-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--wh-blue-50);
    border: 1.5px solid var(--wh-blue-200);
    color: var(--wh-blue-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.wh-empty-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--wh-slate-800);
    margin: 0 0 8px;
}

.wh-empty-desc {
    font-size: 14px;
    color: var(--wh-slate-400);
    margin: 0;
    line-height: 1.6;
}

/* ════════════════════════════════════════════
   CARD GRID
   ════════════════════════════════════════════ */
.wh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 24px;
}

/* ════════════════════════════════════════════
   WORKFLOW HISTORY CARD
   ════════════════════════════════════════════ */
.wh-card {
    background: var(--wh-white);
    border-radius: var(--wh-r-2xl);
    border: 1.5px solid var(--wh-slate-200);
    overflow: hidden;
    box-shadow: var(--wh-shadow-sm);
    transition: box-shadow 0.30s ease, transform 0.30s ease, border-color 0.30s ease;
    animation: wh-card-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--wh-delay, 0s);
    display: flex;
    flex-direction: column;
}

@keyframes wh-card-in {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }

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

.wh-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--wh-shadow-xl);
    border-color: var(--wh-blue-300);
}

/* ── STATUS STRIP ── */
.wh-status-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: linear-gradient(90deg, var(--wh-green-50) 0%, #f0f9ff 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--wh-green-700);
}

.wh-strip-left {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wh-strip-left .ti {
    font-size: 13px;
}

.wh-version-pill {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.80);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--wh-slate-600);
    letter-spacing: 0.4px;
}

/* ── MEDIA WRAP ── */
.wh-media-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    background: var(--wh-slate-900);
    overflow: hidden;
    flex-shrink: 0;
}

.wh-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wh-card:hover .wh-media {
    transform: scale(1.05);
}

/* OVERLAY GRADIENT */
.wh-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(10, 20, 50, 0.55) 0%,
            rgba(10, 20, 50, 0.12) 45%,
            transparent 70%);
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.wh-card:hover .wh-media-overlay {
    opacity: 0.85;
}

/* APPROVED CORNER BADGE */
.wh-approved-corner {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--wh-green-600);
    border: 2.5px solid rgba(255, 255, 255, 0.55);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.42), var(--wh-glow-green);
    animation: pop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
}

@keyframes pop-in {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* MEDIA BOTTOM BADGES */
.wh-media-badges {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.wh-platform-badge,
.wh-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(12px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.wh-platform-badge {
    background: rgba(37, 99, 235, 0.82);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.wh-type-badge {
    background: rgba(109, 40, 217, 0.82);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.wh-platform-badge .ti,
.wh-type-badge .ti {
    font-size: 10px;
}

/* VIDEO TYPE INDICATOR — top left */
.wh-media-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

.wh-media-type-badge .ti {
    font-size: 11px;
}

/* ── CARD BODY ── */
.wh-card-body {
    padding: 20px 22px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── SUMMARY ROW ── */
.wh-summary-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.wh-summary-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--wh-slate-500);
    font-weight: 500;
}

.wh-summary-item .ti {
    font-size: 12px;
    color: var(--wh-slate-400);
}

.wh-summary-revision {
    color: var(--wh-amber-700);
}

.wh-summary-revision .ti {
    color: var(--wh-amber-500);
}

.wh-summary-ml {
    margin-left: auto;
}

/* ── CAPTION ── */
.wh-caption {
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--wh-slate-600);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── FEEDBACK BOX ── */
.wh-feedback-box {
    background: var(--wh-amber-50);
    border: 1px solid var(--wh-amber-200);
    border-left: 3px solid var(--wh-amber-500);
    border-radius: var(--wh-r-md);
    padding: 12px 14px;
}

.wh-feedback-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.wh-feedback-header .ti {
    font-size: 13px;
    color: var(--wh-amber-700);
}

.wh-feedback-header span {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--wh-amber-800);
}

.wh-feedback-text {
    font-size: 13px;
    color: #78350f;
    line-height: 1.7;
    margin: 0;
}

/* ── TIMELINE BLOCK ── */
.wh-timeline-block {
    border: 1px solid var(--wh-slate-200);
    border-radius: var(--wh-r-lg);
    overflow: hidden;
}

.wh-timeline-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--wh-slate-50);
    border: none;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--wh-slate-600);
    font-family: var(--wh-font);
    text-align: left;
    transition: background 0.15s ease;
}

.wh-timeline-toggle:hover {
    background: var(--wh-slate-100);
}

.wh-timeline-toggle .ti {
    font-size: 12px;
    color: var(--wh-slate-400);
}

.wh-tl-count {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 100px;
    background: var(--wh-blue-100);
    color: var(--wh-blue-700);
    border: 1px solid var(--wh-blue-200);
}

.wh-timeline {
    padding: 14px 16px;
    background: var(--wh-white);
    display: flex;
    flex-direction: column;
}

.wh-tl-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.wh-tl-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 26px;
}

.wh-tl-node {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.wh-tl-line {
    width: 2px;
    height: 18px;
    background: var(--wh-slate-200);
    border-radius: 2px;
    margin-top: 2px;
}

.wh-tl-body {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    padding-bottom: 20px;
    flex: 1;
}

.wh-tl-row-last .wh-tl-body {
    padding-bottom: 0;
}

.wh-tl-attempt {
    font-size: 12px;
    font-weight: 600;
    color: var(--wh-slate-700);
}

.wh-tl-status {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 100px;
    letter-spacing: 0.3px;
}

/* Timeline themes */
.tl-approved {
    background: var(--wh-green-100);
    color: var(--wh-green-700);
    border: 1px solid var(--wh-green-200);
}

.tl-minor {
    background: var(--wh-blue-100);
    color: var(--wh-blue-700);
    border: 1px solid var(--wh-blue-200);
}

.tl-major {
    background: var(--wh-orange-100);
    color: var(--wh-orange-700);
    border: 1px solid var(--wh-orange-200);
}

.tl-pending {
    background: var(--wh-amber-100);
    color: var(--wh-amber-800);
    border: 1px solid var(--wh-amber-200);
}

.tl-completed {
    background: var(--wh-green-100);
    color: var(--wh-green-700);
    border: 1px solid var(--wh-green-200);
}

.tl-rejected {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.tl-revision {
    background: var(--wh-violet-100);
    color: var(--wh-violet-700);
    border: 1px solid var(--wh-violet-200);
}

/* ── CARD FOOTER ── */
.wh-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--wh-slate-100);
    flex-wrap: wrap;
    margin-top: auto;
}

.wh-footer-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wh-completion-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.wh-completion-badge .ti {
    font-size: 11.5px;
}

.wh-cb-approved {
    background: var(--wh-green-100);
    color: var(--wh-green-700);
    border: 1px solid var(--wh-green-200);
}

.wh-cb-completed {
    background: var(--wh-blue-100);
    color: var(--wh-blue-700);
    border: 1px solid var(--wh-blue-200);
}

.wh-footer-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--wh-slate-400);
    font-weight: 500;
}

.wh-footer-time .ti {
    font-size: 12px;
}

/* ── VIEW WORKFLOW BUTTON ── */
.wh-view-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: var(--wh-blue-50);
    border: 1.5px solid var(--wh-blue-200);
    border-radius: var(--wh-r-lg);
    color: var(--wh-blue-700);
    font-size: 12.5px;
    font-weight: 600;
    font-family: var(--wh-font);
    cursor: pointer;
    letter-spacing: 0.1px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.wh-view-btn .ti:first-child {
    font-size: 13px;
}

.wh-view-btn:hover {
    background: var(--wh-blue-600);
    border-color: var(--wh-blue-600);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.32);
    transform: translateY(-1px);
}

.wh-view-arrow {
    font-size: 11px;
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.wh-view-btn:hover .wh-view-arrow {
    transform: translateX(3px);
    opacity: 1;
}

/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .wh-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

@media (max-width: 900px) {
    .wh-root {
        padding: 28px 20px 64px;
    }

    .wh-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .wh-root {
        padding: 20px 16px 56px;
    }

    .wh-header {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 24px;
    }

    .wh-title {
        font-size: 28px;
    }

    .wh-header-right {
        width: 100%;
        gap: 10px;
    }

    .wh-stat {
        flex: 1;
        min-width: 0;
        padding: 12px 14px;
        gap: 10px;
    }

    .wh-stat-value {
        font-size: 20px;
    }

    .wh-stat-label {
        font-size: 9.5px;
    }

    .wh-stat-icon-wrap {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .wh-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .wh-filter-bar {
        width: 100%;
    }

    .wh-search-wrap {
        max-width: 100%;
    }

    .wh-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .wh-card-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .wh-view-btn {
        width: 100%;
        justify-content: center;
    }

    .wh-media-wrap {
        height: 200px;
    }
}

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

    .wh-header-right {
        flex-direction: column;
    }

    .wh-stat {
        width: 100%;
    }
}

/* user history */




/* subadmin history page */
/* ── TOKENS ── */
:root {
    --sky: #0ea5e9;
    --sky-light: #e0f2fe;
    --sky-mid: #38bdf8;
    --sky-dark: #0369a1;
    --sky-deep: #0c4a6e;

    --green-light: #dcfce7;
    --green-border: #bbf7d0;
    --green-mid: #22c55e;
    --green-dark: #15803d;
    --green-deep: #14532d;

    --purple-light: #f3e8ff;
    --purple-border: #e9d5ff;
    --purple-dark: #7e22ce;

    --amber-light: #fef3c7;
    --amber-border: #fde68a;
    --amber-dark: #92400e;
    --amber-accent: #f59e0b;

    --page-bg: #f0f7ff;
    --card-bg: #ffffff;
    --border: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    --shadow-sm: 0 1px 4px rgba(14, 165, 233, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 18px rgba(14, 165, 233, 0.10), 0 1px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 14px 36px rgba(14, 165, 233, 0.14), 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ── PAGE ── */
.act-page {
    padding: 32px 28px 64px;
    min-height: 100vh;
    background: var(--page-bg);
    font-family: 'DM Sans', 'Inter', sans-serif;
    color: var(--text-primary);
}

/* ── PAGE HEADER ── */
.act-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 28px;
}

.act-page-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 5px;
    letter-spacing: -0.5px;
}

.act-page-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* ── STAT CARDS ── */
.act-stat-cards {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.act-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    min-width: 86px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.act-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.act-stat-blue {
    background: var(--sky-light);
    border-color: #bae6fd;
}

.act-stat-green {
    background: var(--green-light);
    border-color: var(--green-border);
}

.act-stat-purple {
    background: var(--purple-light);
    border-color: var(--purple-border);
}

.act-stat-amber {
    background: var(--amber-light);
    border-color: var(--amber-border);
}

.act-stat-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.act-stat-lbl {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
}

/* ── FILTER ROW ── */
.act-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    padding: 14px 18px;
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.act-filter-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.act-filter-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 4px;
}

.act-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.act-filter-btn:hover {
    border-color: var(--sky);
    color: var(--sky-dark);
    background: var(--sky-light);
}

.act-filter-active {
    background: var(--sky);
    border-color: var(--sky);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(14, 165, 233, 0.28);
}

.act-filter-active:hover {
    background: var(--sky-dark);
    border-color: var(--sky-dark);
    color: #ffffff;
}

.act-filter-type.act-filter-active {
    background: var(--purple-dark);
    border-color: var(--purple-dark);
    box-shadow: 0 3px 10px rgba(126, 34, 206, 0.22);
}

.act-filter-type.act-filter-active:hover {
    background: #6b21a8;
    border-color: #6b21a8;
}

.act-filter-count {
    background: rgba(255, 255, 255, 0.28);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 100px;
    color: inherit;
}

.act-filter-btn:not(.act-filter-active) .act-filter-count {
    background: #f1f5f9;
    color: var(--text-muted);
}

.act-result-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    white-space: nowrap;
}

/* ── EMPTY STATE ── */
.act-empty {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 72px 32px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.act-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--green-light);
    border: 1px solid var(--green-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--green-dark);
    margin: 0 auto 18px;
}

.act-empty-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.act-empty-sub {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ── GRID ── */
.act-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

/* ── CARD ── */
.act-card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1.5px solid var(--border);
    border-top: 4px solid var(--green-mid);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    animation: act-fade-in 0.35s ease both;
    animation-delay: var(--anim-delay, 0s);
    position: relative;
}

@keyframes act-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

.act-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--green-border);
}

/* ── DELIVERY RIBBON ── */
.act-ribbon {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--green-light);
    border-bottom: 1px solid var(--green-border);
    padding: 8px 16px;
}

.act-ribbon-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green-mid);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.act-ribbon-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--green-deep);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ── MEDIA ── */
.act-card-media {
    position: relative;
    width: 100%;
    height: 210px;
    background: #0f172a;
    overflow: hidden;
}

.act-media-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── APPROVED BADGE (on media) ── */
.act-approved-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--green-light);
    color: var(--green-dark);
    border: 1px solid var(--green-border);
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    backdrop-filter: blur(4px);
}

/* ── ATTEMPT OVERLAY ── */
.act-attempt-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.70);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0.4px;
    backdrop-filter: blur(4px);
}

/* ── CARD BODY ── */
.act-card-body {
    padding: 20px;
}

/* ── CLIENT ROW ── */
.act-client-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.act-client-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    flex-shrink: 0;
    border: 1.5px solid rgba(0, 0, 0, 0.06);
}

.act-client-info {
    flex: 1;
    min-width: 0;
}

.act-client-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act-client-email {
    font-size: 11.5px;
    color: var(--text-muted);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.act-check-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--green-light);
    border: 1.5px solid var(--green-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--green-dark);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── META PILLS ── */
.act-meta-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 13px;
}

.act-platform-pill {
    display: inline-flex;
    padding: 5px 13px;
    border-radius: 100px;
    background: var(--sky-light);
    border: 1px solid #bae6fd;
    color: var(--sky-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.act-type-pill {
    display: inline-flex;
    padding: 5px 13px;
    border-radius: 100px;
    background: var(--purple-light);
    border: 1px solid var(--purple-border);
    color: var(--purple-dark);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ── CAPTION ── */
.act-caption {
    font-size: 13.5px;
    line-height: 1.75;
    color: #475569;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── FEEDBACK BOX ── */
.act-feedback-box {
    background: var(--amber-light);
    border: 1px solid var(--amber-border);
    border-left: 3px solid var(--amber-accent);
    border-radius: var(--radius-sm);
    padding: 13px;
    margin-bottom: 16px;
}

.act-feedback-header {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 7px;
}

.act-feedback-icon {
    font-size: 13px;
}

.act-feedback-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--amber-dark);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.act-feedback-text {
    font-size: 13px;
    color: #78350f;
    line-height: 1.7;
    margin: 0;
}

/* ── CARD FOOTER ── */
.act-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.act-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.act-footer-attempt {
    background: var(--sky-light);
    border: 1px solid #bae6fd;
    color: var(--sky-deep);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    letter-spacing: 0.3px;
}

.act-footer-state {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--green-dark);
    letter-spacing: 0.2px;
}

.act-footer-time {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
    .act-filters {
        gap: 6px;
    }

    .act-filter-divider {
        display: none;
    }
}

@media (max-width: 900px) {
    .act-page {
        padding: 24px 16px 52px;
    }

    .act-page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .act-stat-cards {
        width: 100%;
    }

    .act-stat {
        flex: 1;
        min-width: 0;
    }

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

    .act-page-title {
        font-size: 26px;
    }

    .act-filters {
        padding: 12px 14px;
    }

    .act-result-count {
        width: 100%;
        margin-left: 0;
        text-align: center;
    }
}

/* subadmin history page end */





/* admin subadmin creation page */
/* ═══════════════════════════════════════════════════════════
   SUBADMIN WORKFLOW DASHBOARD — SubAdmin.css
   ═══════════════════════════════════════════════════════════ */

/* ── Page Layout ─────────────────────────────────────────── */
.sa-page {
    min-height: 100vh;
    background: #f0f4f8;
    font-family: 'Segoe UI', 'Inter', system-ui, sans-serif;
}

.sa-content {
    padding: 28px 20px;
}

.sa-wrapper {
    max-width: 1300px;
    margin: 0 auto;
}

/* ── Header ──────────────────────────────────────────────── */
.sa-header-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
    flex-wrap: wrap;
}

.sa-header-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3b82f6;
    margin-bottom: 4px;
}

.sa-header-left h2 {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.sa-header-left p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

.sa-header-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ── Primary Button ──────────────────────────────────────── */
.sa-btn {
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sa-btn-primary {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.sa-btn-primary:hover {
    background: #2563eb;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.45);
    transform: translateY(-1px);
}

.sa-btn-icon {
    font-size: 16px;
    line-height: 1;
}

/* ── Stat Cards ──────────────────────────────────────────── */
.sa-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sa-stat-card {
    background: #fff;
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9f0fb;
    transition: box-shadow 0.2s ease;
}

.sa-stat-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.sa-stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-stat-icon svg {
    width: 22px;
    height: 22px;
}

.sa-stat-blue .sa-stat-icon {
    background: #eff6ff;
    color: #3b82f6;
}

.sa-stat-green .sa-stat-icon {
    background: #f0fdf4;
    color: #10b981;
}

.sa-stat-red .sa-stat-icon {
    background: #fff1f2;
    color: #ef4444;
}

.sa-stat-purple .sa-stat-icon {
    background: #f5f3ff;
    color: #8b5cf6;
}

.sa-stat-body h3 {
    font-size: 26px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
}

.sa-stat-body p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

/* ── Search ──────────────────────────────────────────────── */
.sa-search-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    gap: 12px;
    flex-wrap: wrap;
}

.sa-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 16px;
    width: 340px;
    max-width: 100%;
    transition: border-color 0.2s ease;
}

.sa-search-box:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.sa-search-box svg {
    width: 16px;
    height: 16px;
    color: #94a3b8;
    flex-shrink: 0;
}

.sa-search-box input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #0f172a;
    background: transparent;
    width: 100%;
}

.sa-search-box input::placeholder {
    color: #94a3b8;
}

.sa-result-count {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════════════════ */
.sa-table-container {
    background: #fff;
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
    margin-bottom: 20px;
    border: 1px solid #e9f0fb;
}

.sa-table {
    width: 100%;
    border-collapse: collapse;
}

.sa-table thead th {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.sa-table thead th:first-child {
    border-radius: 10px 0 0 0;
}

.sa-table thead th:last-child {
    border-radius: 0 10px 0 0;
}

.sa-table tbody tr {
    transition: background 0.15s ease;
    border-bottom: 1px solid #f1f5f9;
}

.sa-table tbody tr:last-child {
    border-bottom: none;
}

.sa-table tbody tr:hover {
    background: #f8faff;
}

.sa-table tbody tr.sa-row-expanded {
    background: #f0f6ff;
}

.sa-table td {
    padding: 14px 16px;
    font-size: 14px;
    color: #1e293b;
    vertical-align: middle;
}

/* ── User cell ───────────────────────────────────────────── */
.sa-user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sa-name {
    font-weight: 600;
    color: #0f172a;
}

.sa-sub-text {
    font-size: 12px;
    font-weight: 500;
    color: #000;
    margin-top: 2px;
}

/* ── Avatar ──────────────────────────────────────────────── */
.sa-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

/* ── Client count button ─────────────────────────────────── */
.sa-client-count-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sa-client-count-btn:hover:not(:disabled) {
    background: #dbeafe;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.2);
}

.sa-client-count-btn.empty {
    background: #f1f5f9;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: default;
}

.sa-chevron {
    font-size: 16px;
    font-weight: 400;
    transition: transform 0.25s ease;
    display: inline-block;
}

.sa-chevron.open {
    transform: rotate(90deg);
}

/* ── Status pill ─────────────────────────────────────────── */
.sa-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sa-status-pill.active {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.sa-status-pill.disabled {
    background: #fff1f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.sa-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* ── Workflow health ─────────────────────────────────────── */
.sa-health {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.sa-health.idle {
    background: #f1f5f9;
    color: #94a3b8;
}

.sa-health.low {
    background: #f0fdf4;
    color: #16a34a;
}

.sa-health.medium {
    background: #fffbeb;
    color: #d97706;
}

.sa-health.high {
    background: #fff1f2;
    color: #dc2626;
}

/* ── Action buttons ──────────────────────────────────────── */
.sa-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.sa-action-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.sa-action-btn.assign {
    background: #f5f3ff;
    color: #7c3aed;
}

.sa-action-btn.assign:hover {
    background: #ede9fe;
}

.sa-action-btn.view {
    background: #e2e8f0;
    color: #475569;
}

.sa-action-btn.view:hover {
    background: #cbd5e1;
}

.sa-action-btn.edit {
    background: #dbeafe;
    color: #1d4ed8;
}

.sa-action-btn.edit:hover {
    background: #bfdbfe;
}

.sa-action-btn.danger {
    background: #fee2e2;
    color: #b91c1c;
}

.sa-action-btn.danger:hover {
    background: #fecaca;
}

/* ═══════════════════════════════════════════════════════════
   EXPANDABLE CLIENT WORKFLOW PANEL
   ═══════════════════════════════════════════════════════════ */
.sa-expand-row td {
    padding: 0 !important;
    background: transparent;
}

.sa-expand-cell {
    padding: 0 !important;
    animation: expandSlide 0.25s ease;
}

@keyframes expandSlide {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

.sa-workflow-panel {
    background: #f8faff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    margin: 8px 12px 12px;
    overflow: hidden;
}

.sa-workflow-panel-header {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1.2fr 1.2fr;
    gap: 12px;
    padding: 10px 16px;
    background: #eff6ff;
    border-bottom: 1px solid #dbeafe;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #3b82f6;
}

.sa-workflow-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1.2fr 1.2fr;
    gap: 12px;
    padding: 12px 16px;
    align-items: center;
    border-bottom: 1px solid #e0eaff;
    transition: background 0.15s;
}

.sa-workflow-row:last-child {
    border-bottom: none;
}

.sa-workflow-row:hover {
    background: #eff6ff;
}

.sa-wf-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1e293b;
    overflow: hidden;
}

.sa-wf-cell.muted {
    color: #000;
    font-size: 13px;
}

.sa-wf-cell .sa-avatar {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    font-size: 11px;
}

/* ── Package tag ─────────────────────────────────────────── */
.sa-package-tag {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Workflow badges ─────────────────────────────────────── */
.sa-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-pending {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.badge-approved {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.badge-revision {
    background: #fff1f2;
    color: #9f1239;
    border: 1px solid #fecdd3;
}

/* ── View Workflow button ─────────────────────────────────── */
.sa-workflow-btn {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    background: #fff;
    color: #3b82f6;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
}

.sa-workflow-btn:hover {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
}

/* ── No clients ──────────────────────────────────────────── */
.sa-no-clients {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 18px 20px;
    color: #94a3b8;
    font-size: 13px;
}

.sa-no-clients svg {
    width: 18px;
    height: 18px;
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════ */
.sa-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}

.sa-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #64748b;
}

.sa-empty-icon svg {
    width: 28px;
    height: 28px;
}

.sa-empty-state h4 {
    font-size: 17px;
    font-weight: 700;
    color: #334155;
    margin: 0 0 6px;
}

.sa-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE CARDS
   ═══════════════════════════════════════════════════════════ */
.sa-mobile-list {
    display: none;
    flex-direction: column;
    gap: 14px;
}

.sa-mobile-card {
    background: #fff;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9f0fb;
    transition: box-shadow 0.2s ease;
}

.sa-mobile-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.sa-mobile-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.sa-mobile-card-info {
    flex: 1;
    min-width: 0;
}

.sa-mobile-card-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
}

.sa-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #1e293b;
}

.sa-detail-label {
    color: #64748b;
    font-weight: 500;
    font-size: 12px;
}

.sa-client-count-text {
    font-weight: 700;
    color: #3b82f6;
}

.sa-expand-btn {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px dashed #93c5fd;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease;
}

.sa-expand-btn:hover {
    background: #dbeafe;
}

.sa-mobile-expand {
    margin-bottom: 12px;
    animation: expandSlide 0.25s ease;
}

.sa-mobile-expand .sa-workflow-panel {
    margin: 0;
}

.sa-mobile-expand .sa-workflow-panel-header,
.sa-mobile-expand .sa-workflow-row {
    grid-template-columns: 1fr 1fr;
    font-size: 11px;
}

.sa-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   MODALS — CREATE / VIEW / EDIT / ASSIGN
   ═══════════════════════════════════════════════════════════ */
.sa-modal-overlay,
.sa-view-overlay,
.sa-assign-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

/* CREATE MODAL */
.sa-modal {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    max-width: 420px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: modalPop 0.22s ease;
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }

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

.sa-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}

.sa-modal-close:hover {
    background: #e2e8f0;
}

.sa-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #eff6ff;
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.sa-modal-icon svg {
    width: 26px;
    height: 26px;
}

.sa-modal h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.sa-modal-subtitle {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 24px;
}

/* Form groups */
.sa-form-group {
    margin-bottom: 16px;
}

.sa-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #475569;
    margin-bottom: 6px;
}

.sa-form-group input,
.sa-modal input,
.sa-view-form input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    color: #0f172a;
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.sa-form-group input:focus,
.sa-modal input:focus,
.sa-view-form input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.sa-modal-btn {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
}

.sa-modal-btn:hover:not(:disabled) {
    background: #2563eb;
    transform: translateY(-1px);
}

.sa-modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* VIEW MODAL */
.sa-view-modal {
    background: #fff;
    border-radius: 20px;
    padding: 32px;
    width: 100%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: modalPop 0.22s ease;
}

.sa-view-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.sa-view-close:hover {
    background: #e2e8f0;
}

.sa-view-avatar-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.sa-view-avatar-wrap .sa-avatar {
    width: 56px;
    height: 56px;
    font-size: 20px;
    border-radius: 14px;
}

.sa-view-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin: 0 0 24px;
}

.sa-view-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sa-field label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
    margin-bottom: 5px;
}

.sa-field p {
    font-size: 15px;
    color: #0f172a;
    font-weight: 500;
    margin: 0;
    padding: 10px 14px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.sa-view-actions {
    margin-top: 24px;
}

.sa-save-btn {
    width: 100%;
    padding: 12px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.3);
}

.sa-save-btn:hover {
    background: #059669;
    transform: translateY(-1px);
}

/* ASSIGN MODAL */
.sa-assign-modal {
    background: #fff;
    border-radius: 20px;
    padding: 28px;
    width: 100%;
    max-width: 440px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    animation: modalPop 0.22s ease;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.sa-assign-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #f1f5f9;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.sa-assign-close:hover {
    background: #e2e8f0;
}

.sa-assign-title {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.sa-assign-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px;
}

.sa-user-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    max-height: 320px;
    padding-right: 4px;
}

.sa-user-list::-webkit-scrollbar {
    width: 5px;
}

.sa-user-list::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.sa-user-list::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.sa-user-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sa-user-item:hover {
    background: #f8faff;
    border-color: #bfdbfe;
}

.sa-user-item.selected {
    background: #eff6ff;
    border-color: #3b82f6;
}

.sa-user-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.15s;
}

.sa-user-item.selected .sa-user-checkbox {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

.sa-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.sa-user-name {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

.sa-user-email {
    font-size: 12px;
    color: #64748b;
}

.sa-assign-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
}

.sa-assign-count {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

.sa-assign-btn {
    padding: 10px 20px;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.sa-assign-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.sa-empty-users {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px;
    color: #94a3b8;
    font-size: 14px;
}

.sa-empty-users svg {
    width: 32px;
    height: 32px;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .sa-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .sa-table-container {
        display: none;
    }

    .sa-mobile-list {
        display: flex;
    }
}

@media (max-width: 640px) {
    .sa-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-header-left h2 {
        font-size: 20px;
    }

    .sa-modal,
    .sa-view-modal,
    .sa-assign-modal {
        padding: 22px 18px;
    }

    .sa-search-box {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .sa-stats {
        grid-template-columns: 1fr;
    }
}

/* admin subadmin creation page end */

/* workflow for admin */

/* ── Page ────────────────────────────────────────────────── */
.wf-page {
    min-height: 100vh;
    background: #f0f4f8;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.wf-content {
    padding: 28px 20px;
}

.wf-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

/* ── Loading ─────────────────────────────────────────────── */
.wf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 16px;
    color: #64748b;
    font-size: 15px;
}

.wf-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.wf-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 12px;
    color: #ef4444;
    font-size: 15px;
}

/* ════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════ */
.wf-header-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.wf-header-eyebrow {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #3b82f6;
    margin-bottom: 4px;
}

.wf-header-left h2 {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.wf-header-left p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
}

/* ── People chips ─────────────────────────────────────────── */
.wf-header-people {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.wf-person-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wf-person-avatar {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.client-av {
    background: #3b82f6;
}

.subadmin-av {
    background: #10b981;
}

.wf-person-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wf-person-role {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
}

.wf-person-name {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.wf-person-email {
    font-size: 11px;
    color: #64748b;
}

.wf-arrow-connector {
    font-size: 20px;
    color: #3b82f6;
    font-weight: 700;
    padding: 0 4px;
}

/* ════════════════════════════════════════════════════════════
   STAT CARDS
   ════════════════════════════════════════════════════════════ */
.wf-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

.wf-stat-card {
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #e9f0fb;
    transition: box-shadow 0.2s ease;
}

.wf-stat-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.wf-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wf-stat-icon svg {
    width: 20px;
    height: 20px;
}

.wf-stat-blue .wf-stat-icon {
    background: #eff6ff;
    color: #3b82f6;
}

.wf-stat-green .wf-stat-icon {
    background: #f0fdf4;
    color: #10b981;
}

.wf-stat-red .wf-stat-icon {
    background: #fff1f2;
    color: #ef4444;
}

.wf-stat-purple .wf-stat-icon {
    background: #f5f3ff;
    color: #8b5cf6;
}

.wf-stat-body h3 {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.1;
    word-break: break-word;
}

.wf-stat-body p {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   TIMELINE SHELL
   ════════════════════════════════════════════════════════════ */
.wf-timeline {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9f0fb;
    overflow: hidden;
}

.wf-timeline-header {
    padding: 20px 28px 16px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    background: #f8fafc;
}

.wf-timeline-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.wf-timeline-header p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.wf-timeline-track {
    padding: 24px 28px 8px;
    display: flex;
    flex-direction: column;
}

/* ════════════════════════════════════════════════════════════
   TIMELINE ITEM
   ════════════════════════════════════════════════════════════ */
.wf-timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 8px;
    animation: fadeUp 0.3s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Stagger by index */
.wf-timeline-item:nth-child(1) {
    animation-delay: 0.05s;
}

.wf-timeline-item:nth-child(2) {
    animation-delay: 0.1s;
}

.wf-timeline-item:nth-child(3) {
    animation-delay: 0.15s;
}

.wf-timeline-item:nth-child(4) {
    animation-delay: 0.2s;
}

.wf-timeline-item:nth-child(5) {
    animation-delay: 0.25s;
}

/* ── Left: dot + line ─────────────────────────────────────── */
.wf-timeline-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    padding-top: 18px;
}

.wf-tl-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.wf-tl-dot-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    display: block;
}

/* Dot colors */
.dot-pending {
    background: #fffbeb;
    color: #f59e0b;
    border: 2px solid #fde68a;
}

.dot-minor {
    background: #eff6ff;
    color: #3b82f6;
    border: 2px solid #bfdbfe;
}

.dot-major {
    background: #fff1f2;
    color: #ef4444;
    border: 2px solid #fecaca;
}

.dot-approved {
    background: #f0fdf4;
    color: #10b981;
    border: 2px solid #bbf7d0;
}

.dot-archived {
    background: #f8fafc;
    color: #94a3b8;
    border: 2px solid #e2e8f0;
}

/* Approved pulse animation */
.dot-pulse {
    animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

/* Connector line */
.wf-tl-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(to bottom, #e2e8f0 0%, #e2e8f0 100%);
    min-height: 32px;
    margin: 6px 0;
    border-radius: 2px;
}

/* ════════════════════════════════════════════════════════════
   ATTEMPT CARD
   ════════════════════════════════════════════════════════════ */
.wf-attempt-card {
    flex: 1;
    background: #fff;
    border: 1px solid #e9f0fb;
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wf-attempt-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

.wf-attempt-card.card-approved {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 60%);
}

/* ── Card header ─────────────────────────────────────────── */
.wf-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
    gap: 12px;
    flex-wrap: wrap;
}

.card-approved .wf-card-header {
    background: #f0fdf4;
    border-bottom-color: #dcfce7;
}

.wf-card-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wf-attempt-number {
    display: flex;
    align-items: center;
    gap: 5px;
}

.wf-attempt-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #64748b;
}

.wf-attempt-num {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

.wf-upload-time {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.wf-time-icon {
    font-size: 13px;
}

/* ════════════════════════════════════════════════════════════
   STATUS BADGES
   ════════════════════════════════════════════════════════════ */
.wf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.wf-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Badge variants */
.status-pending {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.status-minor {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.status-major {
    background: #fff1f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.status-approved {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.status-archived {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

/* ── Media ───────────────────────────────────────────────── */
.wf-media-container {
    width: 100%;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    overflow: hidden;
    max-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf-media-img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    display: block;
}

.wf-media-video {
    width: 100%;
    max-height: 320px;
}

.wf-media-file {
    padding: 20px;
    gap: 10px;
}

.wf-file-icon {
    font-size: 22px;
}

.wf-file-link {
    font-size: 14px;
    color: #3b82f6;
    font-weight: 600;
    text-decoration: none;
}

.wf-file-link:hover {
    text-decoration: underline;
}

/* ── Card body ───────────────────────────────────────────── */
.wf-card-body {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Meta pills */
.wf-card-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wf-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.wf-meta-icon {
    font-size: 13px;
}

.wf-meta-pill.platform {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #ede9fe;
}

.wf-meta-pill.type {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

/* Caption */
.wf-caption-box {
    background: #f8fafc;
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
}

.wf-caption-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 5px;
}

.wf-caption-text {
    font-size: 14px;
    color: #1e293b;
    margin: 0;
    line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════
   FEEDBACK BOX
   ════════════════════════════════════════════════════════════ */
.wf-feedback-box {
    border-radius: 10px;
    padding: 13px 15px;
    border-left: 4px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.wf-feedback-top {
    display: flex;
    align-items: center;
    gap: 7px;
}

.wf-feedback-icon {
    font-size: 15px;
}

.wf-feedback-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.wf-feedback-text {
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

/* Feedback variants — match status */
.wf-feedback-pending {
    background: #fffbeb;
    border-color: #f59e0b;
}

.wf-feedback-pending .wf-feedback-label {
    color: #b45309;
}

.wf-feedback-pending .wf-feedback-text {
    color: #92400e;
}

.wf-feedback-minor {
    background: #eff6ff;
    border-color: #3b82f6;
}

.wf-feedback-minor .wf-feedback-label {
    color: #1d4ed8;
}

.wf-feedback-minor .wf-feedback-text {
    color: #1e3a8a;
}

.wf-feedback-major {
    background: #fff1f2;
    border-color: #ef4444;
}

.wf-feedback-major .wf-feedback-label {
    color: #b91c1c;
}

.wf-feedback-major .wf-feedback-text {
    color: #7f1d1d;
}

.wf-feedback-approved {
    background: #f0fdf4;
    border-color: #10b981;
}

.wf-feedback-approved .wf-feedback-label {
    color: #166534;
}

.wf-feedback-approved .wf-feedback-text {
    color: #14532d;
}

.wf-feedback-archived {
    background: #f8fafc;
    border-color: #94a3b8;
}

.wf-feedback-archived .wf-feedback-label {
    color: #475569;
}

.wf-feedback-archived .wf-feedback-text {
    color: #334155;
}

/* ════════════════════════════════════════════════════════════
   CARD FOOTER
   ════════════════════════════════════════════════════════════ */
.wf-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    gap: 10px;
    flex-wrap: wrap;
}

.card-approved .wf-card-footer {
    background: #f0fdf4;
    border-top-color: #dcfce7;
}

.wf-footer-states {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.wf-state-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
}

.wf-state-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.approved-state {
    color: #166534;
}

.approved-state .wf-state-dot {
    background: #10b981;
}

.rejected-state {
    color: #b91c1c;
}

.rejected-state .wf-state-dot {
    background: #ef4444;
}

.pending-state {
    color: #64748b;
}

.pending-state .wf-state-dot {
    background: #94a3b8;
}

.wf-completed-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* ════════════════════════════════════════════════════════════
   EMPTY STATE
   ════════════════════════════════════════════════════════════ */
.wf-empty-state {
    text-align: center;
    padding: 72px 24px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e9f0fb;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    color: #94a3b8;
}

.wf-empty-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    color: #64748b;
}

.wf-empty-icon svg {
    width: 30px;
    height: 30px;
}

.wf-empty-state h4 {
    font-size: 18px;
    font-weight: 700;
    color: #334155;
    margin: 0 0 8px;
}

.wf-empty-state p {
    font-size: 14px;
    margin: 0;
    color: #64748b;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .wf-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .wf-header-section {
        flex-direction: column;
    }

    .wf-header-people {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }

    .wf-arrow-connector {
        transform: rotate(90deg);
        align-self: center;
    }

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

    .wf-timeline-track {
        padding: 16px 14px 8px;
    }

    .wf-timeline-item {
        gap: 12px;
    }

    .wf-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .wf-timeline-header {
        flex-direction: column;
        gap: 4px;
        padding: 16px 16px 12px;
    }
}

@media (max-width: 420px) {
    .wf-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .wf-stat-card {
        padding: 14px;
        gap: 10px;
    }

    .wf-stat-body h3 {
        font-size: 18px;
    }
}

/* workflow for admin end*/





/* admin sidebar header */
/* ============================================================
   SMM CONSULT — ADMIN SIDEBAR + HEADER
   Theme: Clean white / soft indigo — no dark theme
   All class names match the original JSX exactly
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
    --sb-width: 255px;
    --sb-bg: #ffffff;
    --sb-border: #e8edf3;
    --sb-accent: #4f6ef7;
    /* indigo-blue */
    --sb-accent-bg: #eef1fe;
    /* very light indigo tint */
    --sb-accent-dark: #3a56d4;
    --sb-text: #1e293b;
    --sb-text-muted: #64748b;
    --sb-text-light: #94a3b8;
    --sb-hover: #f5f7ff;
    --sb-badge-red: #ef4444;
    --sb-online: #22c55e;

    --hd-height: 62px;
    --hd-bg: #ffffff;
    --hd-border: #e8edf3;
    --hd-text: #1e293b;
    --hd-text-muted: #64748b;
    --hd-accent: #4f6ef7;

    --radius: 10px;
    --radius-sm: 7px;
    --trans: 0.2s ease;
}

/* ── BODY ───────────────────────────────────────────────────── */
body {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    background: #f4f6fb;
    margin: 0;
}

/* ============================================================
   OVERLAY
   — always rendered, invisible + non-blocking by default
   ============================================================ */
.admin-sb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    /* NEVER blocks clicks when hidden */
    transition: opacity var(--trans);
}

.admin-sb-overlay--open {
    opacity: 1;
    pointer-events: all;
}

/* ============================================================
   HAMBURGER — mobile only, inside header area via CSS
   ============================================================ */
.admin-sb-hamburger {
    display: none;
    /* hidden on desktop */
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 1001;
    background: #fff;
    border: 1.5px solid var(--sb-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    cursor: pointer;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
    transition: box-shadow var(--trans);
}

.admin-sb-hamburger:hover {
    box-shadow: 0 4px 14px rgba(79, 110, 247, 0.15);
    border-color: var(--sb-accent);
}

.admin-sb-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--sb-text);
    transition: background var(--trans);
}

.admin-sb-bar--short {
    width: 12px;
}

/* ============================================================
   SIDEBAR ROOT
   Desktop: fixed, always visible
   Mobile:  slides in from left, hidden by default
   ============================================================ */
.admin-sb-root {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sb-width);
    height: 100vh;
    background: var(--sb-bg);
    border-right: 1.5px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    z-index: 999;
    overflow: hidden;
    box-shadow: 2px 0 20px rgba(79, 110, 247, 0.06);
    /* Desktop: always visible — no transform */
    transition: transform var(--trans);
}

/* ── Logo section ─────────────────────────────────────────── */
.admin-sb-logo-section {
    padding: 20px 18px 16px;
    border-bottom: 1.5px solid var(--sb-border);
    flex-shrink: 0;
}

.admin-sb-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.admin-sb-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--sb-accent) 0%, #7c8ff5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(79, 110, 247, 0.3);
}

.admin-sb-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.admin-sb-logo-smm {
    font-size: 15px;
    font-weight: 800;
    color: var(--sb-text);
    letter-spacing: 0.03em;
}

.admin-sb-logo-consult {
    font-size: 10px;
    font-weight: 500;
    color: var(--sb-text-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    margin-top: 3px;
}

/* ── Profile card ─────────────────────────────────────────── */
.admin-sb-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sb-accent-bg);
    border-radius: var(--radius);
    padding: 10px 12px;
    position: relative;
}

.admin-sb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sb-accent), #7c8ff5);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.03em;
}

.admin-sb-profile-info {
    flex: 1;
    min-width: 0;
}

.admin-sb-profile-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sb-profile-role {
    font-size: 10.5px;
    color: var(--sb-text-muted);
    margin-top: 2px;
}

.admin-sb-online-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sb-online);
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(34, 197, 94, 0.3);
}

/* ── Nav ──────────────────────────────────────────────────── */
.admin-sb-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 12px;
    scrollbar-width: none;
}

.admin-sb-nav::-webkit-scrollbar {
    display: none;
}

.admin-sb-nav-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--sb-text-light);
    padding: 10px 8px 5px;
}

.admin-sb-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--sb-text-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
    margin-bottom: 2px;
    transition: background var(--trans), color var(--trans), transform var(--trans);
}

.admin-sb-nav-item:hover {
    background: var(--sb-hover);
    color: var(--sb-accent);
    transform: translateX(2px);
}

.admin-sb-nav-item--active {
    background: var(--sb-accent-bg);
    color: var(--sb-accent);
    font-weight: 600;
}

.admin-sb-nav-item--active:hover {
    transform: none;
}

/* Active left indicator */
.admin-sb-active-line {
    position: absolute;
    left: 0;
    top: 18%;
    height: 64%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--sb-accent);
}

.admin-sb-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: background var(--trans);
}

.admin-sb-nav-item--active .admin-sb-nav-icon {
    background: var(--sb-accent);
    color: #fff;
}

.admin-sb-nav-item--active .admin-sb-nav-icon svg {
    stroke: #fff;
}

.admin-sb-nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-sb-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--sb-badge-red);
    color: #fff;
    line-height: 1.5;
    flex-shrink: 0;
}

.admin-sb-divider {
    height: 1px;
    background: var(--sb-border);
    margin: 8px 8px;
}

/* Logout button */
.admin-sb-logout-btn {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: #ef4444;
    background: none;
    border: none;
    width: 100%;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background var(--trans), color var(--trans), transform var(--trans);
    margin-bottom: 2px;
}

.admin-sb-logout-btn:hover {
    background: #fff1f1;
    color: #dc2626;
    transform: translateX(2px);
}

.admin-sb-logout-btn .admin-sb-nav-icon {
    color: inherit;
}

/* ── Bottom ───────────────────────────────────────────────── */
.admin-sb-bottom {
    padding: 12px 18px;
    border-top: 1.5px solid var(--sb-border);
    flex-shrink: 0;
}

.admin-sb-version {
    font-size: 12px;
    color: #000;
    text-align: center;
}

/* ============================================================
   HEADER
   ============================================================ */
.admin-header {
    position: sticky;
    top: 0;
    height: var(--hd-height);
    background: var(--hd-bg);
    border-bottom: 1.5px solid var(--hd-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}

.admin-header-left {
    
}

.admin-header-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--hd-text);
    margin: 0;
    letter-spacing: -0.01em;
}

.admin-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-header-welcome {
    display: flex;
    align-items: center;
    gap: 9px;
}

.admin-header-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hd-accent), #7c8ff5);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.admin-header-welcome-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--hd-text-muted);
}

.admin-header-logout-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 999px;
     background: #ef4444;
    color: #fff;
    border: 1.5px solid #fecaca;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--trans), border-color var(--trans), transform var(--trans), box-shadow var(--trans);
}

.admin-header-logout-btn:hover {
    background: #ef4444;
    color: #fff;
    border-color: #ef4444;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}

.admin-header-logout-btn:active {
    transform: translateY(0);
}

/* ============================================================
   LAYOUT SHELL  (admin-main / admin-content)
   ============================================================ */
.admin-main {
    flex: 1;
    min-width: 0;
    margin-left: var(--sb-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f4f6fb;
}

.admin-content {
    flex: 1;
    padding: 24px 26px 40px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Desktop ≥ 1024px ─────────────────────────────────────── */
@media (min-width: 1024px) {

    /* Sidebar always visible — no transform needed */
    .admin-sb-root {
        transform: translateX(0) !important;
    }

    /* Overlay never needed on desktop */
    .admin-sb-overlay {
        display: none !important;
    }

    /* Hamburger hidden on desktop */
    .admin-sb-hamburger {
        display: none !important;
    }
}

/* ── Tablet + Mobile < 1024px ────────────────────────────── */
@media (max-width: 1023px) {

    /* Sidebar hidden off-screen by default */
    .admin-sb-root {
        transform: translateX(calc(-1 * var(--sb-width)));
        box-shadow: none;
    }

    /* When open, slide in */
    .admin-sb-root--open {
        transform: translateX(0);
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.12);
    }

    /* Hamburger visible */
    .admin-sb-hamburger {
        display: flex;
    }

    /* No left margin — sidebar is overlay */
    .admin-main {
        margin-left: 0;
    }

    /* Header padding accounts for hamburger space */
    .admin-header {
        padding: 0 16px 0 60px;
    }

    .admin-content {
        padding: 18px 16px 32px;
    }
}

/* ── Mobile < 640px ──────────────────────────────────────── */
@media (max-width: 639px) {
    :root {
        --sb-width: 78vw;
    }

    .admin-header-welcome-text {
        display: none;
    }

    .admin-header-title {
        font-size: 15px;
    }

    .admin-content {
        padding: 14px 12px 28px;
    }
}

.admin-sb-logo-img {
    height: 65px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}


.admin-header-dropdown{
    position:relative;
}

.admin-header-user-btn{
    display:flex;
    align-items:center;
    gap:12px;
    border:none;
    background:#fff;
    cursor:pointer;
    padding:8px 14px;
    border-radius:12px;
}

.admin-header-menu{
    position:absolute;
    right:0;
    top:110%;
    width:180px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    overflow:hidden;
    z-index:1000;
}

.admin-header-menu button{
    width:100%;
    border:none;
    background:none;
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 16px;
    cursor:pointer;
    font-size:14px;
}

.admin-header-menu button:hover{
    background:#f5f7fb;
}

/* admin sidebar header */






/* subadmin homepage */
/* ═══════════════════════════════════════════════════════════
   SubadminHomepage.css  — Light Cream Theme (matches existing pages)
═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
    --gold-400: #b8940f;
    --gold-500: #9a7a0a;
    --gold-soft: rgba(184, 148, 15, 0.10);
    --gold-border: rgba(184, 148, 15, 0.30);

    --bg-base: #f0ece3;
    --bg-page: #eee9df;
    --bg-card: #ffffff;
    --bg-card-hover: #fdfcf9;
    --bg-muted: #f7f4ee;
    --bg-input: #faf8f3;

    --text-primary: #1a1a14;
    --text-secondary: #6b6555;
    --text-muted: #a09880;

    --border-light: rgba(0, 0, 0, 0.07);
    --border-medium: rgba(0, 0, 0, 0.10);

    --green: #2d7a45;
    --green-soft: rgba(45, 122, 69, 0.10);
    --green-border: rgba(45, 122, 69, 0.22);
    --amber: #b45309;
    --amber-soft: rgba(180, 83, 9, 0.09);
    --amber-border: rgba(180, 83, 9, 0.22);
    --blue: #1d4ed8;
    --blue-soft: rgba(29, 78, 216, 0.09);
    --blue-border: rgba(29, 78, 216, 0.20);
    --red: #b91c1c;
    --red-soft: rgba(185, 28, 28, 0.08);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06), 0 2px 12px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.10);
    --shadow-gold: 0 4px 18px rgba(184, 148, 15, 0.22);

    --font-display: 'Georgia', 'Times New Roman', serif;
    --font-body: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Base ── */
.sa-dashboard {
    font-family: var(--font-body);
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    padding: 32px 36px 64px;
    box-sizing: border-box;
}

/* ════════════════════════════════════════
   WELCOME SECTION
════════════════════════════════════════ */
.sa-welcome {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 40px 44px;
    margin-bottom: 36px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.sa-welcome__glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(184, 148, 15, 0.07) 0%, transparent 70%);
    pointer-events: none;
}

.sa-welcome::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-400), transparent);
    opacity: 0.35;
    border-radius: 2px;
}

.sa-welcome__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.sa-welcome__eyebrow {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-400);
    background: var(--gold-soft);
    border: 1px solid var(--gold-border);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.sa-welcome__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.sa-welcome__name {
    color: var(--gold-400);
}

.sa-welcome__subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 14px;
    line-height: 1.6;
}

.sa-welcome__date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
}

.sa-welcome__action {
    flex-shrink: 0;
}

/* ── Primary Button ── */
.sa-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #c9a84c 0%, #b8940f 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-body);
    padding: 13px 26px;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-gold);
    transition: transform 0.18s, box-shadow 0.18s, opacity 0.18s;
    white-space: nowrap;
}

.sa-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(184, 148, 15, 0.32);
}

.sa-btn-primary:active {
    transform: translateY(0);
}

/* ════════════════════════════════════════
   SECTION TITLES
════════════════════════════════════════ */
.sa-section {
    margin-bottom: 32px;
}

.sa-section__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-400);
    margin: 0 0 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sa-section__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-border), transparent);
    border-radius: 1px;
}

/* ════════════════════════════════════════
   OVERVIEW CARDS
════════════════════════════════════════ */
.sa-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sa-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: default;
}

.sa-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.sa-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-card__icon svg {
    width: 22px;
    height: 22px;
}

.sa-card--gold .sa-card__icon {
    background: var(--gold-soft);
    color: var(--gold-400);
    border: 1px solid var(--gold-border);
}

.sa-card--gold:hover {
    border-color: var(--gold-border);
}

.sa-card--amber .sa-card__icon {
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber-border);
}

.sa-card--amber:hover {
    border-color: var(--amber-border);
}

.sa-card--green .sa-card__icon {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-border);
}

.sa-card--green:hover {
    border-color: var(--green-border);
}

.sa-card--blue .sa-card__icon {
    background: var(--blue-soft);
    color: var(--blue);
    border: 1px solid var(--blue-border);
}

.sa-card--blue:hover {
    border-color: var(--blue-border);
}

.sa-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sa-card__label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.sa-card__count {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.1;
    font-family: var(--font-display);
    letter-spacing: -0.03em;
}

.sa-card__trend {
    font-size: 11.5px;
    color: var(--text-muted);
}

/* ════════════════════════════════════════
   TWO COLUMN LAYOUT
════════════════════════════════════════ */
.sa-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 32px;
}

.sa-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 26px 24px;
    box-shadow: var(--shadow-card);
}

/* ════════════════════════════════════════
   RECENT ACTIVITY
════════════════════════════════════════ */
.sa-activity {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.sa-activity__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}

.sa-activity__item:last-child {
    border-bottom: none;
}

.sa-activity__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-activity__icon svg {
    width: 16px;
    height: 16px;
}

.sa-activity__icon--upload {
    background: var(--gold-soft);
    color: var(--gold-400);
    border: 1px solid var(--gold-border);
}

.sa-activity__icon--revision {
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber-border);
}

.sa-activity__icon--approved {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-border);
}

.sa-activity__icon--client {
    background: var(--blue-soft);
    color: var(--blue);
    border: 1px solid var(--blue-border);
}

.sa-activity__info {
    flex: 1;
    min-width: 0;
}

.sa-activity__msg {
    font-size: 13px;
    color: var(--text-primary);
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-activity__time {
    font-size: 11.5px;
    color: var(--text-muted);
}

.sa-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
}

.badge-upload {
    background: var(--gold-soft);
    color: var(--gold-400);
    border: 1px solid var(--gold-border);
}

.badge-revision {
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber-border);
}

.badge-approved {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-border);
}

.badge-client {
    background: var(--blue-soft);
    color: var(--blue);
    border: 1px solid var(--blue-border);
}

/* ════════════════════════════════════════
   ASSIGNED CLIENTS
════════════════════════════════════════ */
.sa-clients {
    display: flex;
    flex-direction: column;
}

.sa-client-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border-light);
}

.sa-client-row:last-child {
    border-bottom: none;
}

/* circular avatar — matches your existing Assigned Clients page */
.sa-client-row__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8d9a8, #d4bc78);
    color: #7a6010;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sa-client-row__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sa-client-row__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-client-row__date {
    font-size: 11px;
    color: var(--text-muted);
}

.sa-client-row__pkg {
    font-size: 11px;
    font-weight: 600;
    color: var(--gold-400);
    padding: 3px 10px;
    background: var(--gold-soft);
    border: 1px solid var(--gold-border);
    border-radius: 6px;
    flex-shrink: 0;
    text-transform: capitalize;
}

/* status pills with dot — matches your existing page exactly */
.sa-status {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 11px;
    border-radius: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sa-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sa-status--active {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-border);
}

.sa-status--active::before {
    background: var(--green);
}

.sa-status--review {
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber-border);
}

.sa-status--review::before {
    background: var(--amber);
}

.sa-status--pending {
    background: var(--red-soft);
    color: var(--red);
    border: 1px solid rgba(185, 28, 28, .22);
}

.sa-status--pending::before {
    background: var(--red);
}

/* ════════════════════════════════════════
   QUICK ACCESS
════════════════════════════════════════ */
.sa-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sa-quick-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
    box-shadow: var(--shadow-card);
}

.sa-quick-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--gold-border);
}

.sa-quick-card--primary {
    background: linear-gradient(135deg, #fdf8ec 0%, #faf4e2 100%);
    border-color: var(--gold-border);
}

.sa-quick-card--primary:hover {
    box-shadow: var(--shadow-gold);
    border-color: var(--gold-400);
}

.sa-quick-card__icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gold-soft);
    border: 1px solid var(--gold-border);
    color: var(--gold-400);
}

.sa-quick-card__icon svg {
    width: 18px;
    height: 18px;
}

.sa-quick-card:not(.sa-quick-card--primary) .sa-quick-card__icon {
    background: var(--bg-muted);
    border-color: var(--border-medium);
    color: var(--text-secondary);
}

.sa-quick-card__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.sa-quick-card__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.sa-quick-card--primary .sa-quick-card__label {
    color: var(--gold-400);
}

.sa-quick-card__desc {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sa-quick-card__arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.18s, color 0.18s;
}

.sa-quick-card:hover .sa-quick-card__arrow {
    transform: translateX(3px);
    color: var(--gold-400);
}

/* ════════════════════════════════════════
   RESPONSIVE — TABLET
════════════════════════════════════════ */
@media (max-width: 1100px) {
    .sa-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 900px) {
    .sa-two-col {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════
   RESPONSIVE — MOBILE
════════════════════════════════════════ */
@media (max-width: 600px) {
    .sa-dashboard {
        padding: 18px 16px 50px;
    }

    .sa-welcome {
        padding: 28px 20px;
        border-radius: var(--radius-lg);
    }

    .sa-welcome__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .sa-btn-primary {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
    }

    .sa-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .sa-card {
        flex-direction: column;
        gap: 12px;
        padding: 18px 16px;
    }

    .sa-card__count {
        font-size: 26px;
    }

    .sa-quick-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sa-panel {
        padding: 20px 16px;
        border-radius: var(--radius-md);
    }

    .sa-two-col {
        gap: 16px;
    }
}

@media (max-width: 380px) {
    .sa-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* subadmin homepage end */



/* user homepage */





/* userworkfloew */

:root {
    --blue: #2563eb;
    --blue-light: rgba(37, 99, 235, 0.08);
    --blue-mid: rgba(37, 99, 235, 0.15);
    --blue-border: rgba(37, 99, 235, 0.18);

    --emerald: #16a34a;
    --emerald-light: rgba(22, 163, 74, 0.08);
    --emerald-mid: rgba(22, 163, 74, 0.15);
    --emerald-border: rgba(22, 163, 74, 0.25);

    --amber: #d97706;
    --amber-light: rgba(217, 119, 6, 0.08);
    --amber-mid: rgba(253, 230, 138, 0.55);
    --amber-border: rgba(217, 119, 6, 0.22);

    --red: #dc2626;
    --red-light: rgba(220, 38, 38, 0.08);
    --red-border: rgba(220, 38, 38, 0.25);

    --slate: #64748b;
    --text-dark: #0f172a;
    --text-mid: #334155;
    --text-soft: #000;
    --text-muted: #000;

    --card-bg: #ffffff;
    --page-bg: #f8fafc;
    --border: rgba(15, 23, 42, 0.07);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}

/* ---------- Page Shell ---------- */
.wf-page {
    padding: 28px 32px 64px;
    max-width: 860px;
    margin: 0 auto;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: var(--text-dark);
    background: var(--page-bg);
    min-height: 100vh;
}

/* ---------- Loading / Empty ---------- */
.wf-center-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    gap: 14px;
    text-align: center;
    padding: 24px;
}

.wf-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--blue-mid);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: wf-spin 0.85s linear infinite;
}

@keyframes wf-spin {
    to {
        transform: rotate(360deg);
    }
}

.wf-state-text {
    color: var(--text-muted);
    font-size: 14px;
    margin: 0;
}

.wf-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: var(--blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--blue);
    opacity: 0.5;
}

.wf-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

/* ---------- Breadcrumb ---------- */
.wf-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    font-size: 12px;
    flex-wrap: wrap;
}

.wf-breadcrumb .fa-house {
    color: var(--text-muted);
    font-size: 11px;
}

.wf-bc-sep {
    color: #cbd5e1;
}

.wf-bc-item {
    color: var(--text-soft);
    font-weight: 500;
}

.wf-bc-item--active {
    color: var(--blue);
    font-weight: 700;
}

/* ---------- Page Header ---------- */
.wf-page-header {
    margin-bottom: 22px;
}

.wf-header-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.wf-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--blue);
    background: var(--blue-light);
    border: 1px solid var(--blue-border);
    border-radius: 6px;
    padding: 3px 10px;
    text-transform: uppercase;
}

.wf-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3px 11px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-soft);
}

.wf-meta-chip i {
    color: var(--text-muted);
    font-size: 10px;
}

.wf-page-title {
    font-size: 26px;
    font-weight: 800;
    color: var(--text-dark);
    margin: 0 0 5px;
    letter-spacing: -0.4px;
}

.wf-page-subtitle {
    font-size: 13.5px;
    color: var(--text-soft);
    margin: 0;
}

/* ---------- Compact Summary Bar ---------- */
.wf-summary-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    margin-bottom: 28px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
    gap: 0;
}

.wf-summary-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    text-align: center;
    min-width: 80px;
}

.wf-summary-num {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.wf-summary-lbl {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wf-summary-divider {
    width: 1px;
    height: 36px;
    background: var(--border);
    flex-shrink: 0;
    margin: 0 4px;
}

/* ---------- Section Labels ---------- */
.wf-section {
    margin-bottom: 32px;
}

.wf-section--history {
    margin-bottom: 0;
}

.wf-section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.wf-section-label i {
    font-size: 11px;
}

.wf-section-label--muted {
    color: var(--text-soft);
}

.wf-section-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--page-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1px 9px;
}

/* ============================================================
   HERO CARD — Latest / Current Version
   ============================================================ */
.wf-hero-card {
    background: var(--card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 8px 28px rgba(37, 99, 235, 0.07);
    transition: box-shadow 0.25s;
}

.wf-hero-card:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.07),
        0 12px 36px rgba(37, 99, 235, 0.10);
}

.wf-hero-card--approved {
    border: 2px solid var(--emerald-border);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05),
        0 8px 28px rgba(22, 163, 74, 0.10);
}

.wf-hero-card--pending {
    border: 2px solid var(--blue-border);
}

/* Approved banner across top */
.wf-hero-approved-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #14532d;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 20px;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--emerald-border);
}

.wf-hero-approved-banner i {
    color: var(--emerald);
    font-size: 13px;
}

/* Hero card content */
.wf-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px 24px 14px;
}

.wf-hero-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wf-hero-attempt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--blue-light);
    border: 1.5px solid var(--blue-border);
    color: var(--blue);
    font-size: 13px;
    font-weight: 700;
    border-radius: 20px;
    padding: 4px 14px;
}

.wf-hero-attempt-pill i {
    font-size: 11px;
}

.wf-hero-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
}

.wf-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    padding: 0 24px 16px;
}

/* Media in hero — generous height */
.wf-media-wrap {
    margin: 0 24px 18px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #e2e8f0;
    max-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}

.wf-media-wrap--large {
    max-height: 420px;
    margin: 0 0 18px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.wf-media {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

/* Hero caption */
.wf-caption-box--hero {
    margin: 0 24px 16px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}

.wf-caption-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--blue);
    letter-spacing: 0.7px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.wf-caption-text {
    font-size: 13.5px;
    color: var(--text-mid);
    margin: 0;
    line-height: 1.7;
}

/* Hero feedback */
.wf-feedback-box--hero {
    margin: 0 24px 20px;
    background: var(--amber-mid);
    border: 1px solid var(--amber-border);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
}

.wf-feedback-box {
    background: var(--amber-mid);
    border: 1px solid var(--amber-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    margin-bottom: 12px;
}

.wf-feedback-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #92400e;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.wf-feedback-text {
    font-size: 13px;
    color: #78350f;
    margin: 0;
    line-height: 1.65;
}

/* ============================================================
   HISTORY TIMELINE — Old Attempts
   ============================================================ */
.wf-history-timeline {
    position: relative;
    padding-left: 40px;
}

.wf-history-item {
    position: relative;
    margin-bottom: 24px;
    /* opacity: 0.82; */
    transition: opacity 0.2s;
}

.wf-history-item:hover {
    opacity: 1;
}

/* Vertical line */
.wf-history-line {
    position: absolute;
    left: -21px;
    top: 26px;
    bottom: -24px;
    width: 1.5px;
    background: linear-gradient(to bottom,
            rgba(37, 99, 235, 0.22),
            rgba(37, 99, 235, 0.04));
    border-radius: 2px;
}

/* Node dot */
.wf-history-node {
    position: absolute;
    left: -30px;
    top: 8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.wf-history-node i {
    color: #fff;
    font-size: 9px;
}

/* History card — compact, secondary */
.wf-history-card {
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.wf-history-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.wf-history-attempt-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.wf-history-date {
    font-size: 13px;
    color: var(--text-muted);
    margin-left: auto;
}

/* History media — smaller */
.wf-history-media-row .wf-media-wrap {
    margin: 0 0 10px;
    max-height: 200px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.wf-history-media-row .wf-media {
    max-height: 200px;
}

.wf-history-caption {
    font-size: 12.5px;
    color: var(--text-soft);
    margin: 0 0 10px;
    line-height: 1.55;
}

/* Feedback bridge box — tells the story */
.wf-history-feedback {
    background: var(--amber-mid);
    border: 1px solid var(--amber-border);
    border-radius: var(--radius-sm);
    padding: 9px 13px;
    position: relative;
}

.wf-history-feedback-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #92400e;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.wf-history-feedback-header i {
    font-size: 10px;
}

.wf-history-feedback-caused {
    font-size: 10px;
    font-weight: 600;
    color: var(--amber);
    background: rgba(217, 119, 6, 0.12);
    border-radius: 20px;
    padding: 1px 8px;
    margin-left: auto;
}

.wf-history-feedback-text {
    font-size: 12.5px;
    color: #78350f;
    margin: 0;
    line-height: 1.6;
}

/* Journey terminus — points up to latest */
.wf-history-terminus {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    margin-top: 4px;
}

.wf-history-terminus-line {
    position: absolute;
    left: -21px;
    top: -24px;
    bottom: 11px;
    width: 1.5px;
    background: linear-gradient(to bottom,
            rgba(37, 99, 235, 0.22),
            rgba(37, 99, 235, 0.10));
}

.wf-history-terminus-node {
    position: absolute;
    left: -30px;
    top: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.wf-history-terminus-node i {
    color: #fff;
    font-size: 9px;
}

.wf-history-terminus-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-soft);
    padding-left: 2px;
    font-style: italic;
}

/* ---------- Shared Meta Item ---------- */
.wf-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-soft);
    font-weight: 500;
}

.wf-meta-item i {
    color: var(--text-muted);
    font-size: 10px;
}

/* ---------- Status Badges ---------- */
.wf-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid transparent;
}

.wf-status-badge--lg {
    font-size: 13px;
    padding: 5px 15px;
}

.wf-status-badge i {
    font-size: 10px;
}

.wf-status-badge--lg i {
    font-size: 12px;
}

.status-pending {
    color: var(--blue);
    background: var(--blue-light);
    border-color: var(--blue-border);
}

.status-minor {
    color: var(--amber);
    background: var(--amber-light);
    border-color: var(--amber-border);
}

.status-major {
    color: var(--red);
    background: var(--red-light);
    border-color: var(--red-border);
}

.status-approved {
    color: var(--emerald);
    background: var(--emerald-light);
    border-color: var(--emerald-border);
}

.status-archived {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.22);
}

/* ============================================================
   RESPONSIVE — Tablet ≤ 768px
   ============================================================ */
@media (max-width: 768px) {
    .wf-page {
        padding: 20px 18px 48px;
    }

    .wf-page-title {
        font-size: 22px;
    }

    .wf-summary-bar {
        flex-wrap: wrap;
        gap: 0;
        padding: 12px 14px;
    }

    .wf-summary-stat {
        flex: 1 1 calc(50% - 1px);
        padding: 6px 0;
    }

    .wf-summary-divider {
        display: none;
    }

    .wf-hero-header {
        padding: 16px 18px 12px;
    }

    .wf-hero-meta {
        padding: 0 18px 14px;
    }

    .wf-media-wrap--large {
        margin: 0 0 14px;
    }

    .wf-caption-box--hero {
        margin: 0 18px 14px;
    }

    .wf-feedback-box--hero {
        margin: 0 18px 16px;
    }

    .wf-history-timeline {
        padding-left: 34px;
    }

    .wf-history-line {
        left: -18px;
    }

    .wf-history-node {
        left: -26px;
        width: 20px;
        height: 20px;
    }

    .wf-history-terminus-line {
        left: -18px;
    }

    .wf-history-terminus-node {
        left: -26px;
        width: 20px;
        height: 20px;
    }
}

/* ============================================================
   RESPONSIVE — Mobile ≤ 480px
   ============================================================ */
@media (max-width: 480px) {
    .wf-page {
        padding: 14px 12px 40px;
    }

    .wf-page-title {
        font-size: 19px;
    }

    .wf-header-eyebrow {
        gap: 6px;
    }

    .wf-header-tag {
        font-size: 10px;
    }

    .wf-summary-stat {
        flex: 1 1 calc(50% - 1px);
    }

    .wf-hero-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 14px 10px;
    }

    .wf-hero-meta {
        padding: 0 14px 12px;
        flex-direction: column;
        gap: 6px;
    }

    .wf-caption-box--hero {
        margin: 0 14px 12px;
    }

    .wf-feedback-box--hero {
        margin: 0 14px 14px;
    }

    .wf-hero-card {
        border-radius: var(--radius-lg);
    }

    .wf-media-wrap--large {
        max-height: 260px;
    }

    .wf-media {
        max-height: 260px;
    }

    .wf-history-timeline {
        padding-left: 28px;
    }

    .wf-history-line {
        left: -14px;
    }

    .wf-history-node {
        left: -22px;
        width: 18px;
        height: 18px;
        top: 10px;
    }

    .wf-history-node i {
        font-size: 8px;
    }

    .wf-history-terminus-line {
        left: -14px;
    }

    .wf-history-terminus-node {
        left: -22px;
        width: 18px;
        height: 18px;
    }

    .wf-history-terminus-node i {
        font-size: 8px;
    }

    .wf-history-card {
        padding: 11px 12px;
    }

    .wf-history-date {
        display: none;
    }

    .wf-status-badge {
        font-size: 11px;
        padding: 3px 9px;
    }

    .wf-status-badge--lg {
        font-size: 12px;
        padding: 4px 12px;
    }
}

/* userworkfloew */




/* user homepage */
/* ═══════════════════════════════════════════════════════════
   DashboardHome.css  —  Premium SaaS Client Portal
   No external font imports needed — uses system fonts only.
   Icons only:
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css" />
═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
    /* Brand blues */
    --blue-50: #f0f7ff;
    --blue-100: #daeeff;
    --blue-200: #b3dbff;
    --blue-400: #3fa8f5;
    --blue-500: #1a8fe3;
    --blue-600: #0d72c4;
    --blue-700: #085da0;
    --blue-soft: rgba(26, 143, 227, 0.07);
    --blue-border: rgba(26, 143, 227, 0.18);

    /* Semantic */
    --green: #15924a;
    --green-soft: rgba(21, 146, 74, 0.07);
    --green-border: rgba(21, 146, 74, 0.18);

    --amber: #c47b09;
    --amber-soft: rgba(196, 123, 9, 0.07);
    --amber-border: rgba(196, 123, 9, 0.20);

    --orange: #d44c0d;
    --orange-soft: rgba(212, 76, 13, 0.07);
    --orange-border: rgba(212, 76, 13, 0.18);

    --purple: #6838d6;
    --purple-soft: rgba(104, 56, 214, 0.07);
    --purple-border: rgba(104, 56, 214, 0.17);

    --slate: #4b6070;
    --slate-soft: rgba(75, 96, 112, 0.07);
    --slate-border: rgba(75, 96, 112, 0.18);

    /* Surfaces */
    --bg-page: #f3f7fb;
    --bg-card: #ffffff;
    --bg-muted: #f7fafe;
    --bg-input: #f9fbff;

    /* Text */
    --text-1: #0d1e2c;
    --text-2: #3c556a;
    --text-3: #8299ac;

    /* Borders */
    --border: rgba(10, 40, 70, 0.07);
    --border-md: rgba(10, 40, 70, 0.11);

    /* Radii */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-2xl: 32px;

    /* Shadows */
    --sh-xs: 0 1px 4px rgba(10, 40, 80, 0.05);
    --sh-sm: 0 2px 12px rgba(10, 40, 80, 0.07);
    --sh-md: 0 6px 24px rgba(10, 40, 80, 0.10);
    --sh-lg: 0 12px 40px rgba(10, 40, 80, 0.12);
    --sh-blue: 0 6px 24px rgba(26, 143, 227, 0.18);

    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Georgia', 'Times New Roman', serif;

    /* Transitions */
    --t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --t-med: 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ════════════════════════════════════════
   BASE
════════════════════════════════════════ */
.dh {
    font-family: var(--font-body);
    background: var(--bg-page);
    color: var(--text-1);
    min-height: 100vh;
    padding: 32px 36px 72px;
    box-sizing: border-box;

    /* Subtle page texture */
    background-image:
        radial-gradient(circle at 18% 12%, rgba(26, 143, 227, 0.04) 0%, transparent 55%),
        radial-gradient(circle at 82% 88%, rgba(104, 56, 214, 0.03) 0%, transparent 50%);
}


/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.dh-hero {
    background: linear-gradient(125deg, #062f5e 0%, #0c5ea8 45%, #1a8fe3 80%, #45b4f5 100%);
    border-radius: var(--r-2xl);
    padding: 40px 44px;
    margin-bottom: 32px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 12px 48px rgba(6, 47, 94, 0.30),
        0 2px 8px rgba(6, 47, 94, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Decorative orbs — softer & more premium */
.dh-hero__dec {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.dh-hero__dec--a {
    width: 360px;
    height: 360px;
    top: -110px;
    right: -80px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.09) 0%, transparent 70%);
}

.dh-hero__dec--b {
    width: 160px;
    height: 160px;
    bottom: -60px;
    left: 40%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
}

.dh-hero__dec--c {
    width: 90px;
    height: 90px;
    top: 24px;
    left: 30%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
}

.dh-hero__inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.dh-hero__left {
    flex: 1;
    min-width: 0;
}

.dh-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.80);
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.20);
    padding: 5px 13px 5px 10px;
    border-radius: 100px;
    margin-bottom: 18px;
    backdrop-filter: blur(6px);
}

.dh-hero__eyebrow i {
    font-size: 13px;
    opacity: 0.9;
}

.dh-hero__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 400;
    font-style: italic;
    color: #fff;
    margin: 0 0 10px;
    line-height: 1.24;
    letter-spacing: -0.01em;
}

.dh-hero__title strong {
    font-style: normal;
    font-weight: 400;
    color: #fef3c7;
    /* subtle text glow */
    text-shadow: 0 0 30px rgba(254, 243, 199, 0.35);
}

.dh-hero__sub {
    font-size: 13.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.68);
    margin: 0 0 22px;
    line-height: 1.65;
    max-width: 420px;
}

.dh-hero__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.48);
    letter-spacing: 0.01em;
}

.dh-hero__date i {
    font-size: 12px;
}


/* ════════════════════════════════════════
   PACKAGE BADGE
════════════════════════════════════════ */
.dh-pkg-badge {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-xl);
    padding: 20px 24px 22px;
    min-width: 220px;
    flex-shrink: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 20px rgba(0, 0, 0, 0.12);
}

.dh-pkg-badge__label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.50);
    margin-bottom: 8px;
}

.dh-pkg-badge__plan {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    letter-spacing: -0.01em;
}

.dh-pkg-badge__plan i {
    font-size: 16px;
    color: #fde68a;
    filter: drop-shadow(0 0 6px rgba(253, 230, 138, 0.60));
}

.dh-pkg-badge__row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 6px;
}

.dh-pkg-badge__row i {
    font-size: 13px;
    opacity: 0.7;
}

.dh-pkg-badge__bar {
    height: 3px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    margin-top: 14px;
    overflow: hidden;
}

.dh-pkg-badge__bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #86efac, #6ee7b7);
    border-radius: 2px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(134, 239, 172, 0.50);
}


/* ════════════════════════════════════════
   SECTION
════════════════════════════════════════ */
.dh-section {
    margin-bottom: 28px;
}

.dh-section__hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dh-section__title {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blue-600);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    width: 100%;
}

.dh-section__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--blue-border), transparent 80%);
}

.dh-section__hd .dh-section__title {
    width: auto;
    flex: 1;
}

.dh-section__hd .dh-section__title::after {
    display: none;
}

.dh-section__link {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--blue-500);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--t-fast);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.dh-section__link:hover {
    color: var(--blue-700);
}


/* ════════════════════════════════════════
   PANEL
════════════════════════════════════════ */
.dh-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: 24px 22px;
    box-shadow: var(--sh-xs);
}


/* ════════════════════════════════════════
   OVERVIEW STATS
════════════════════════════════════════ */
.dh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.dh-stat {
    background: var(--bg-card);
    border-radius: var(--r-lg);
    padding: 20px 18px;
    border: 1px solid var(--border);
    box-shadow: var(--sh-xs);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
    cursor: default;
    position: relative;
    overflow: hidden;
}

/* subtle top accent line */
.dh-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    opacity: 0;
    transition: opacity var(--t-med);
}

.dh-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
}

.dh-stat:hover::before {
    opacity: 1;
}

.dh-stat__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dh-stat__icon i {
    font-size: 20px;
}

.dh-stat__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dh-stat__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-3);
    line-height: 1;
    margin-bottom: 3px;
}

.dh-stat__count {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-1);
}

.dh-stat__hint {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 400;
}

/* Color variants */
.dh-stat--amber .dh-stat__icon {
    background: var(--amber-soft);
    color: var(--amber);
    border: 1px solid var(--amber-border);
}

.dh-stat--amber::before {
    background: var(--amber);
}

.dh-stat--amber:hover {
    border-color: var(--amber-border);
}

.dh-stat--orange .dh-stat__icon {
    background: var(--orange-soft);
    color: var(--orange);
    border: 1px solid var(--orange-border);
}

.dh-stat--orange::before {
    background: var(--orange);
}

.dh-stat--orange:hover {
    border-color: var(--orange-border);
}

.dh-stat--green .dh-stat__icon {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-border);
}

.dh-stat--green::before {
    background: var(--green);
}

.dh-stat--green:hover {
    border-color: var(--green-border);
}

.dh-stat--blue .dh-stat__icon {
    background: var(--blue-soft);
    color: var(--blue-500);
    border: 1px solid var(--blue-border);
}

.dh-stat--blue::before {
    background: var(--blue-500);
}

.dh-stat--blue:hover {
    border-color: var(--blue-border);
}


/* ════════════════════════════════════════
   WORKFLOW CARDS
════════════════════════════════════════ */
.dh-wf-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.dh-wf-card {
    background: var(--bg-card);
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
    cursor: pointer;
}

.dh-wf-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sh-lg);
    border-color: var(--blue-border);
}

.dh-wf-card__thumb {
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Frosted glass overlay at bottom for readability */
.dh-wf-card__thumb::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.22), transparent);
    pointer-events: none;
}

.dh-wf-card__thumb-icon {
    font-size: 38px;
    color: rgba(255, 255, 255, 0.40);
}

.dh-wf-card__status {
    position: absolute;
    top: 11px;
    right: 11px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

.dh-wf-card__ver {
    position: absolute;
    bottom: 11px;
    left: 11px;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.28);
    padding: 2px 9px;
    border-radius: 100px;
    backdrop-filter: blur(4px);
    z-index: 1;
    letter-spacing: 0.04em;
}

.dh-wf-card__body {
    padding: 16px 18px 18px;
}

.dh-wf-card__title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-1);
    margin: 0 0 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.dh-wf-card__meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.dh-wf-card__time {
    font-size: 10.5px;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
    font-weight: 500;
}

.dh-wf-card__time i {
    font-size: 12px;
}

.dh-wf-card__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--bg-muted);
    color: var(--blue-600);
    border: 1px solid var(--border-md);
    border-radius: var(--r-sm);
    padding: 9px 0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-body);
    transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
    letter-spacing: 0.01em;
}

.dh-wf-card__btn:hover {
    background: var(--blue-50);
    border-color: var(--blue-border);
    box-shadow: var(--sh-blue);
    color: var(--blue-700);
}

.dh-wf-card__btn i {
    font-size: 14px;
}


/* ════════════════════════════════════════
   PILLS
════════════════════════════════════════ */
.dh-pill {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
}

.dh-pill--blue {
    background: var(--blue-soft);
    color: var(--blue-600);
    border: 1px solid var(--blue-border);
}

.dh-pill--purple {
    background: var(--purple-soft);
    color: var(--purple);
    border: 1px solid var(--purple-border);
}

.dh-pill--slate {
    background: var(--slate-soft);
    color: var(--slate);
    border: 1px solid var(--slate-border);
}


/* ════════════════════════════════════════
   STATUS BADGES
════════════════════════════════════════ */
.dh-status--pending {
    background: rgba(196, 123, 9, 0.18);
    color: #fde68a;
    border: 1px solid rgba(196, 123, 9, 0.35);
}

.dh-status--approved {
    background: rgba(21, 146, 74, 0.18);
    color: #86efac;
    border: 1px solid rgba(21, 146, 74, 0.35);
}

.dh-status--revision {
    background: rgba(212, 76, 13, 0.20);
    color: #fca5a5;
    border: 1px solid rgba(212, 76, 13, 0.40);
}

.dh-status--review {
    background: rgba(26, 143, 227, 0.18);
    color: #bae6fd;
    border: 1px solid rgba(26, 143, 227, 0.35);
}


/* ════════════════════════════════════════
   TWO-COLUMN ROW
════════════════════════════════════════ */
.dh-row2 {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 18px;
}


/* ════════════════════════════════════════
   RECENT ACTIVITY
════════════════════════════════════════ */
.dh-act {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dh-act__item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    transition: background var(--t-fast);
    border-radius: var(--r-xs);
}

.dh-act__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dh-act__icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dh-act__icon i {
    font-size: 15px;
}

/* Activity icon variants */
.dh-act--upload .dh-act__icon {
    background: var(--blue-soft);
    color: var(--blue-500);
    border: 1px solid var(--blue-border);
}

.dh-act--revision .dh-act__icon {
    background: var(--orange-soft);
    color: var(--orange);
    border: 1px solid var(--orange-border);
}

.dh-act--approved .dh-act__icon {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-border);
}

.dh-act--delivery .dh-act__icon {
    background: var(--purple-soft);
    color: var(--purple);
    border: 1px solid var(--purple-border);
}

.dh-act__info {
    flex: 1;
    min-width: 0;
}

.dh-act__msg {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-1);
    margin: 0 0 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dh-act__time {
    font-size: 10.5px;
    color: var(--text-3);
    font-weight: 400;
}

.dh-act__badge {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 9px;
    border-radius: 100px;
    flex-shrink: 0;
}

/* Activity badge variants */
.dh-badge--blue {
    background: var(--blue-soft);
    color: var(--blue-600);
    border: 1px solid var(--blue-border);
}

.dh-badge--green {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green-border);
}

.dh-badge--orange {
    background: var(--orange-soft);
    color: var(--orange);
    border: 1px solid var(--orange-border);
}

.dh-badge--purple {
    background: var(--purple-soft);
    color: var(--purple);
    border: 1px solid var(--purple-border);
}


/* ════════════════════════════════════════
   QUICK ACTIONS
════════════════════════════════════════ */
.dh-qa {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dh-qa-card {
    display: flex;
    align-items: center;
    gap: 13px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 14px 15px;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    box-shadow: var(--sh-xs);
    transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med), background var(--t-med);
    width: 100%;
}

.dh-qa-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sh-sm);
    border-color: var(--blue-border);
    background: var(--bg-muted);
}

.dh-qa-card--primary {
    background: linear-gradient(135deg, #eaf5ff 0%, #f5faff 100%);
    border-color: var(--blue-border);
    box-shadow: 0 2px 12px rgba(26, 143, 227, 0.08);
}

.dh-qa-card--primary:hover {
    background: linear-gradient(135deg, #daeeff 0%, #eef7ff 100%);
    box-shadow: var(--sh-blue);
    border-color: var(--blue-400);
}

.dh-qa-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--blue-soft);
    border: 1px solid var(--blue-border);
    color: var(--blue-500);
    transition: background var(--t-fast), border-color var(--t-fast);
}

.dh-qa-card:not(.dh-qa-card--primary) .dh-qa-card__icon {
    background: var(--bg-muted);
    border-color: var(--border-md);
    color: var(--text-2);
}

.dh-qa-card__icon i {
    font-size: 17px;
}

.dh-qa-card__text {
    flex: 1;
    min-width: 0;
}

.dh-qa-card__label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -0.01em;
}

.dh-qa-card--primary .dh-qa-card__label {
    color: var(--blue-700);
}

.dh-qa-card__desc {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
    font-weight: 400;
}

.dh-qa-card__arrow {
    color: var(--border-md);
    transition: transform var(--t-fast), color var(--t-fast);
}

.dh-qa-card__arrow i {
    font-size: 14px;
}

.dh-qa-card:hover .dh-qa-card__arrow {
    transform: translateX(4px);
    color: var(--blue-400);
}


/* ════════════════════════════════════════
   RESPONSIVE — TABLET ≤ 1100px
════════════════════════════════════════ */
@media (max-width: 1100px) {
    .dh-stats {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .dh-row2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .dh-row2 {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════
   RESPONSIVE — MOBILE ≤ 600px
════════════════════════════════════════ */
@media (max-width: 600px) {
    .dh {
        padding: 16px 14px 56px;
    }

    .dh-hero {
        padding: 26px 20px;
        border-radius: var(--r-xl);
    }

    .dh-hero__inner {
        flex-direction: column;
    }

    .dh-pkg-badge {
        min-width: 0;
        width: 100%;
    }

    .dh-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dh-wf-grid {
        grid-template-columns: 1fr;
    }

    .dh-stat__count {
        font-size: 26px;
    }

    .dh-stat {
        padding: 16px 14px;
    }
}

@media (max-width: 400px) {
    .dh-stats {
        grid-template-columns: 1fr;
    }
}

/* user homepage */


/* seo management */
/* seo management page */
/* ─────────────────────────────────────────────
   SEO Management — Dashboard CSS
   Updated: component-based SEO mapping support
   Text: black/near-black for prominence
───────────────────────────────────────────── */

/* ── Root & Layout ── */
.seo-root {
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    min-height: 100vh;
    background: #f4f6fb;
    padding: 28px 32px;
    box-sizing: border-box;
}

/* ── Top Header ── */
.seo-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 12px;
}

.seo-header__left h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #0a0f1e;
    letter-spacing: -0.5px;
}

.seo-header__left p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #2d3748;
    font-weight: 400;
}

/* ── Create Button ── */
.seo-create-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3b6ef5;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 8px rgba(59, 110, 245, 0.22);
    transition: background 0.15s, transform 0.1s;
    white-space: nowrap;
    font-family: inherit;
}

.seo-create-btn:hover {
    background: #2952d9;
    transform: translateY(-1px);
}

.seo-create-btn.is-open {
    background: #374151;
    box-shadow: none;
}

/* ── Toast Notifications ── */
.seo-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    animation: fadeSlideIn 0.25s ease;
}

.seo-toast--success {
    background: #22c55e;
    color: #fff;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}

.seo-toast--error {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.seo-toast__icon {
    font-size: 16px;
}

/* ── Card ── */
.seo-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    overflow: hidden;
}

.seo-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.seo-card__header-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b6ef5;
    flex-shrink: 0;
}

.seo-card__header-title {
    font-size: 15px;
    font-weight: 700;
    color: #0a0f1e;
}

/* ── Form Groups ── */
.seo-form-group {
    padding: 20px 24px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.seo-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #64748b;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.seo-group-label__badge {
    background: #eef2ff;
    color: #3b6ef5;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.seo-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Field Wrapper ── */
.seo-field {
    margin-bottom: 16px;
}

.seo-field__label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.seo-field__label {
    font-size: 13.5px;
    font-weight: 650;
    color: #111827;
}

.seo-field__required {
    color: #ef4444;
    margin-left: 3px;
}

.seo-field__hint {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.seo-field__error {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #ef4444;
    margin-top: 5px;
    font-weight: 500;
}

/* ── Inputs ── */
.seo-input,
.seo-textarea,
.seo-select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 13px;
    font-size: 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    outline: none;
    background: #fff;
    color: #0a0f1e;
    font-family: inherit;
    font-weight: 500;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.seo-input:focus,
.seo-textarea:focus,
.seo-select:focus {
    border-color: #3b6ef5;
    box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.1);
}

.seo-input.has-error,
.seo-textarea.has-error,
.seo-select.has-error {
    border-color: #ef4444;
}

.seo-input::placeholder,
.seo-textarea::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.seo-textarea {
    resize: vertical;
    height: 90px;
    line-height: 1.55;
}

.seo-textarea--short {
    height: 80px;
}

.seo-select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* ── Page Select Dropdown ── */
.seo-page-select-wrap {
    position: relative;
}

.seo-page-select-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: #3b6ef5;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}

.seo-page-select {
    padding-left: 38px !important;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    border-color: #d1d5db;
    background-color: #fafbff;
}

.seo-page-select:focus {
    border-color: #3b6ef5;
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.12);
}

/* ── Component Key Display Row ── */
.seo-component-key-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    background: #f8faff;
    border: 1.5px solid #dde7ff;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    animation: fadeSlideIn 0.2s ease;
}

.seo-component-key-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.seo-component-key-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #eef2ff;
    color: #3b6ef5;
    border: 1px solid #c7d7fd;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.seo-component-key-chip i {
    font-size: 10px;
    color: #6b7280;
}

.seo-component-key-note {
    font-size: 11.5px;
    color: #6b7280;
    font-style: italic;
    margin-left: auto;
}

/* ── Slug field ── */
.seo-slug-wrap {
    position: relative;
}

.seo-slug-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 15px;
    font-weight: 700;
    pointer-events: none;
    font-family: monospace;
}

.seo-slug-input {
    padding-left: 22px !important;
    font-family: monospace;
    font-size: 14px;
    color: #0a0f1e;
    font-weight: 600;
}

/* ── OG Image Upload ── */
.seo-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 24px 20px;
    cursor: pointer;
    text-align: center;
    background: #fafbfc;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}

.seo-upload-area:hover {
    border-color: #3b6ef5;
    background: #f0f4ff;
}

.seo-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.seo-upload-placeholder__icon {
    font-size: 28px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.seo-upload-placeholder__text {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

.seo-upload-placeholder__link {
    color: #3b6ef5;
    font-weight: 700;
}

.seo-upload-placeholder__hint {
    font-size: 12px;
    color: #6b7280;
}

.seo-preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.seo-preview-img {
    max-width: 280px;
    max-height: 140px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.seo-remove-img-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid #ef4444;
    color: #ef4444;
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 600;
    transition: background 0.12s;
}

.seo-remove-img-btn:hover {
    background: #fff1f2;
}

/* ── Form Footer ── */
.seo-form-footer {
    padding: 18px 24px;
    display: flex;
    justify-content: flex-end;
}

.seo-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #3b6ef5, #2952d9);
    color: #fff;
    border: none;
    padding: 11px 30px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(59, 110, 245, 0.3);
    transition: opacity 0.15s, transform 0.1s;
    font-family: inherit;
}

.seo-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(59, 110, 245, 0.35);
}

.seo-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Spinner ── */
.seo-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: seoSpin 0.7s linear infinite;
    flex-shrink: 0;
}

.seo-spinner--dark {
    border-color: rgba(100, 116, 139, 0.3);
    border-top-color: #374151;
}

/* ── Listing Header ── */
.seo-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.seo-list-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.seo-count-badge {
    background: #eef2ff;
    color: #3b6ef5;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 700;
}

/* ── Search ── */
.seo-search-wrap {
    position: relative;
    min-width: 260px;
}

.seo-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 14px;
    pointer-events: none;
}

.seo-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 13px 9px 35px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    background: #fafbfc;
    font-family: inherit;
    color: #111827;
    font-weight: 500;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.seo-search-input::placeholder {
    color: #9ca3af;
    font-weight: 400;
}

.seo-search-input:focus {
    border-color: #3b6ef5;
    box-shadow: 0 0 0 3px rgba(59, 110, 245, 0.1);
    background: #fff;
}

/* ── Table ── */
.seo-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.seo-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 14px;
}

.seo-table th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #374151;
    text-transform: uppercase;
    background: #f8fafc;
    border-bottom: 1.5px solid #e9edf5;
    white-space: nowrap;
}

.seo-table td {
    padding: 14px 16px;
    vertical-align: middle;
    color: #111827;
    border-bottom: 1px solid #f1f5f9;
    font-weight: 500;
    white-space: nowrap;
}

.seo-table tbody tr {
    transition: background 0.12s;
}

.seo-table tbody tr:hover {
    background: #f5f8ff;
}

.seo-table tbody tr.is-expanded {
    background: #eef2ff;
}

/* ── Table Cell Atoms ── */
.seo-row-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #f1f5f9;
    color: #374151;
    font-size: 12.5px;
    font-weight: 700;
}

.seo-page-name {
    font-weight: 700;
    color: #0a0f1e;
    font-size: 14px;
    white-space: nowrap;
}

.seo-slug-chip {
    display: inline-block;
    background: #f0f4ff;
    color: #2952d9;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 13px;
    font-family: monospace;
    font-weight: 600;
    border: 1px solid #dde7ff;
    white-space: nowrap;
}

/* ── Component Key Chip (table) ── */
.seo-component-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 12.5px;
    font-family: monospace;
    font-weight: 600;
    white-space: nowrap;
}

.seo-component-chip i {
    font-size: 10px;
    color: #16a34a;
}

.seo-robots-chip {
    display: inline-block;
    background: #f8fafc;
    color: #1e293b;
    border: 1px solid #e2e8f0;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.seo-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    color: #1e293b;
    font-weight: 500;
}

.seo-date-text {
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    white-space: nowrap;
}

/* ── Action Buttons ── */
.seo-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
}

.seo-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 6px;
    padding: 5px 11px;
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.12s, transform 0.1s;
    white-space: nowrap;
    border: none;
}

.seo-btn:hover {
    opacity: 0.82;
    transform: translateY(-1px);
}

.seo-btn--view {
    background: #eef2ff;
    color: #2952d9;
    border: 1px solid #dde7ff;
}

.seo-btn--edit {
    background: #fff7ed;
    color: #c2410c;
    border: 1px solid #fed7aa;
}

.seo-btn--delete {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

/* ── Expanded Row ── */
.seo-expanded-td {
    padding: 0 16px 20px 42px !important;
    background: #f0f4ff;
    white-space: normal;
}

.seo-expanded-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    padding-top: 16px;
}

.seo-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.seo-detail-label {
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.seo-detail-value {
    font-size: 13.5px;
    color: #111827;
    line-height: 1.55;
    font-weight: 500;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
}

.seo-detail-value--locked {
    font-family: monospace;
    font-size: 13px;
    background: #eef2ff;
    color: #3b6ef5;
    padding: 3px 8px;
    border-radius: 5px;
    border: 1px solid #c7d7fd;
    font-weight: 700;
    display: inline-block;
}

.seo-detail-img {
    max-width: 200px;
    max-height: 100px;
    border-radius: 6px;
    object-fit: cover;
    margin-top: 4px;
}

/* ── Empty & Loading States ── */
.seo-state-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 12px;
    text-align: center;
}

.seo-state-icon {
    font-size: 36px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.seo-state-text {
    font-size: 15px;
    color: #1e293b;
    font-weight: 600;
}

.seo-state-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}

.seo-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef2ff;
    color: #2952d9;
    border: 1px solid #dde7ff;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    margin-top: 6px;
    font-family: inherit;
    transition: background 0.12s;
}

.seo-retry-btn:hover {
    background: #dde7ff;
}

/* ── Animations ── */
@keyframes seoSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* ── Responsive ── */
@media (max-width: 768px) {
    .seo-root {
        padding: 16px;
    }

    .seo-row-2 {
        grid-template-columns: 1fr;
    }

    .seo-list-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .seo-search-wrap {
        min-width: 100%;
    }

    .seo-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .seo-create-btn {
        width: 100%;
        justify-content: center;
    }

    .seo-truncate {
        max-width: 120px;
    }

    /* Table becomes a clean, horizontally-scrollable strip instead of
       squeezing/wrapping headers letter-by-letter. */
    .seo-table {
        min-width: 720px;
        font-size: 13px;
    }

    .seo-table th,
    .seo-table td {
        padding: 9px 10px;
    }

    .seo-table th {
        font-size: 10.5px;
    }

    /* Keep the row number and actions reachable without losing context
       while horizontally scrolling */
    .seo-table th:first-child,
    .seo-table td:first-child {
        position: sticky;
        left: 0;
        background: #f8fafc;
        z-index: 2;
    }

    .seo-table td:first-child {
        background: #fff;
    }

    .seo-table tbody tr:hover td:first-child {
        background: #f5f8ff;
    }

    .seo-table tbody tr.is-expanded td:first-child {
        background: #eef2ff;
    }

    .seo-expanded-grid {
        grid-template-columns: 1fr;
    }

    .seo-expanded-td {
        padding-left: 16px !important;
    }

    .seo-component-key-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .seo-component-key-note {
        margin-left: 0;
    }

    .seo-actions {
        flex-wrap: wrap;
    }

    .seo-detail-img {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .seo-table {
        min-width: 620px;
    }

    .seo-truncate {
        max-width: 90px;
    }

    .seo-btn {
        padding: 5px 8px;
        font-size: 11.5px;
    }
}

/* seo management page */
/* seo management */



/* adminhomepage */
/* ===========================
   AdminHomepage.css
   Blue-theme SaaS Admin Panel
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---------- Root & Reset ---------- */
.ah-root {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #f0f4fb;
    min-height: 100vh;
    padding: 28px 32px 48px;
    color: #0a0f1e;
    box-sizing: border-box;
}

/* ---------- Loading Skeleton ---------- */
.ah-loading-root {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ah-skeleton {
    background: linear-gradient(90deg, #e4eaf6 25%, #f0f4fb 50%, #e4eaf6 75%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 16px;
}

.ah-skeleton-banner {
    height: 200px;
}

.ah-skeleton-card {
    height: 110px;
}

.ah-skeleton-panel {
    height: 320px;
}

@keyframes shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* ---------- Welcome Banner ---------- */
.ah-welcome {
    position: relative;
    background: linear-gradient(135deg, #1b4bdf 0%, #3b72f6 55%, #5b8ff9 100%);
    border-radius: 20px;
    padding: 40px 44px;
    margin-bottom: 28px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 200px;
}

.ah-welcome-left {
    position: relative;
    z-index: 2;
    flex: 1;
}

.ah-welcome-date {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.4px;
    margin: 0 0 8px;
    text-transform: uppercase;
}

.ah-welcome-title {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 8px;
    line-height: 1.25;
}

.ah-welcome-title span {
    color: #fff;
}

.ah-welcome-sub {
    font-size: 14.5px;
    color: #fff;
    margin: 0 0 24px;
    font-weight: 400;
}

.ah-welcome-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Buttons */
.btn-primary,
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
}

.btn-primary {
    background: #fff;
    color: #1b4bdf;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.btn-primary:hover {
    background: #eef3ff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
}

.btn-outline {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
}

.btn-outline:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.btn-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* Decorative blobs */
.ah-welcome-illustration {
    position: relative;
    width: 260px;
    height: 140px;
    flex-shrink: 0;
    pointer-events: none;
}

.ah-blob {
    position: absolute;
    border-radius: 50%;
    opacity: 0.18;
}

.ah-blob-1 {
    width: 200px;
    height: 200px;
    background: #fff;
    top: -60px;
    right: -40px;
}

.ah-blob-2 {
    width: 120px;
    height: 120px;
    background: #a8c8ff;
    bottom: -40px;
    right: 60px;
}

.ah-stat-float {
    position: absolute;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 4px 18px rgba(27, 75, 223, 0.18);
    font-size: 12px;
    color: #0a0f1e;
    gap: 2px;
    animation: floatUp 3s ease-in-out infinite alternate;
}

.ah-stat-float-1 {
    top: 0;
    right: 10px;
}

.ah-stat-float-2 {
    bottom: 10px;
    right: 40px;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: #1b8a5a;
    font-weight: 600;
    animation-delay: 1s;
}

.ah-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #1b4bdf;
    line-height: 1;
}

.ah-stat-lbl {
    font-size: 11px;
    color: #3d4f70;
}

@keyframes floatUp {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-7px);
    }
}

/* ---------- Sections ---------- */
.ah-section {
    margin-bottom: 28px;
}

.ah-two-col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

/* ---------- Overview Cards ---------- */
.ah-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.ah-card {
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(27, 75, 223, 0.06);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    border: 1px solid rgba(59, 114, 246, 0.06);
    cursor: default;
}

.ah-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(27, 75, 223, 0.13);
}

.ah-card-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ah-card-icon-wrap i {
    font-size: 20px;
}

/* Card colour variants */
.card-blue .ah-card-icon-wrap {
    background: #e8efff;
}

.card-blue .ah-card-icon-wrap i {
    color: #1b4bdf;
}

.card-indigo .ah-card-icon-wrap {
    background: #ede9ff;
}

.card-indigo .ah-card-icon-wrap i {
    color: #6c47d4;
}

.card-amber .ah-card-icon-wrap {
    background: #fff5e0;
}

.card-amber .ah-card-icon-wrap i {
    color: #d97706;
}

.card-green .ah-card-icon-wrap {
    background: #e2f8ee;
}

.card-green .ah-card-icon-wrap i {
    color: #1b8a5a;
}

.ah-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ah-card-count {
    font-size: 26px;
    font-weight: 800;
    color: #0a0f1e;
    line-height: 1.1;
}

.ah-card-title {
    font-size: 13px;
    font-weight: 500;
    color: #3d4f70;
}

.ah-card-trend {
    font-size: 11.5px;
    font-weight: 600;
    color: #1b8a5a;
    margin-top: 4px;
    background: #e2f8ee;
    padding: 2px 8px;
    border-radius: 20px;
    width: fit-content;
}

.card-amber .ah-card-trend {
    color: #d97706;
    background: #fff5e0;
}

/* ---------- Panel (shared) ---------- */
.ah-panel {
    background: #fff;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 2px 12px rgba(27, 75, 223, 0.06);
    border: 1px solid rgba(59, 114, 246, 0.06);
}

.ah-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.ah-panel-title {
    font-size: 16px;
    font-weight: 700;
    color: #0a0f1e;
    margin: 0;
}

.ah-view-all {
    font-size: 13px;
    font-weight: 600;
    color: #3b72f6;
    text-decoration: none;
    transition: color 0.18s;
}

.ah-view-all:hover {
    color: #1b4bdf;
    text-decoration: underline;
}

/* ---------- Activity List ---------- */
.ah-activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ah-activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 0;
    border-bottom: 1px solid #f0f4fb;
}

.ah-activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ah-act-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.ah-act-icon i {
    font-size: 14px;
}

.act-blue {
    background: #e8efff;
}

.act-blue i {
    color: #1b4bdf;
}

.act-green {
    background: #e2f8ee;
}

.act-green i {
    color: #1b8a5a;
}

.act-amber {
    background: #fff5e0;
}

.act-amber i {
    color: #d97706;
}

.act-indigo {
    background: #ede9ff;
}

.act-indigo i {
    color: #6c47d4;
}

.ah-act-body {
    flex: 1;
}

.ah-act-msg {
    font-size: 13.5px;
    color: #1a2340;
    margin: 0;
    line-height: 1.5;
}

.ah-act-msg strong {
    color: #0a0f1e;
}

.ah-act-actor {
    color: #3b72f6;
    font-weight: 600;
}

.ah-act-time {
    font-size: 12px;
    color: #5a6a8a;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ---------- Quick Access ---------- */
.ah-quick-access {
    height: fit-content;
}

.ah-ql-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ah-ql-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 16px;
    border-radius: 14px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s;
    font-family: inherit;
    text-align: left;
}

.ah-ql-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 75, 223, 0.12);
}

.ql-blue {
    background: #e8efff;
    border-color: #c6d9ff;
}

.ql-indigo {
    background: #ede9ff;
    border-color: #d3c8ff;
}

.ql-purple {
    background: #f4e8ff;
    border-color: #e0c8ff;
}

.ql-teal {
    background: #e0faf5;
    border-color: #b8f0e6;
}

.ql-blue:hover {
    border-color: #3b72f6;
}

.ql-indigo:hover {
    border-color: #6c47d4;
}

.ql-purple:hover {
    border-color: #a855f7;
}

.ql-teal:hover {
    border-color: #0d9488;
}

.ah-ql-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ah-ql-icon i {
    font-size: 16px;
}

.ql-blue .ah-ql-icon {
    background: #fff;
}

.ql-blue .ah-ql-icon i {
    color: #1b4bdf;
}

.ql-indigo .ah-ql-icon {
    background: #fff;
}

.ql-indigo .ah-ql-icon i {
    color: #6c47d4;
}

.ql-purple .ah-ql-icon {
    background: #fff;
}

.ql-purple .ah-ql-icon i {
    color: #a855f7;
}

.ql-teal .ah-ql-icon {
    background: #fff;
}

.ql-teal .ah-ql-icon i {
    color: #0d9488;
}

.ah-ql-label {
    font-size: 14px;
    font-weight: 700;
    color: #0a0f1e;
    line-height: 1;
}

.ah-ql-count {
    font-size: 12px;
    font-weight: 500;
    color: #3d4f70;
}

/* ---------- Table ---------- */
.ah-table-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ah-search-wrap {
    position: relative;
}

.ah-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #5a6a8a;
    pointer-events: none;
}

.ah-search {
    padding: 8px 14px 8px 33px;
    border: 1.5px solid #e4eaf6;
    border-radius: 9px;
    font-size: 13px;
    font-family: inherit;
    color: #0a0f1e;
    background: #f8faff;
    outline: none;
    transition: border-color 0.18s;
    width: 210px;
}

.ah-search:focus {
    border-color: #3b72f6;
    background: #fff;
}

.ah-search::placeholder {
    color: #8898b8;
}

.ah-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
}

.ah-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.ah-table thead tr {
    background: #f5f8ff;
}

.ah-table th {
    padding: 11px 16px;
    text-align: left;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #3d4f70;
    border-bottom: 1.5px solid #e8efff;
    white-space: nowrap;
}

.ah-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #f0f4fb;
    color: #1a2340;
    vertical-align: middle;
}

.ah-table tbody tr:last-child td {
    border-bottom: none;
}

.ah-table tbody tr {
    transition: background 0.15s;
}

.ah-table tbody tr:hover {
    background: #f8faff;
}

.ah-client-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #0a0f1e;
}

.ah-client-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b72f6, #1b4bdf);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ah-platform {
    font-size: 13px;
    color: #1a2340;
    font-weight: 500;
}

.ah-subadmin-cell {
    color: #3b72f6;
    font-weight: 600;
}

.ah-date-cell {
    color: #3d4f70;
    font-size: 13px;
}

/* Badges */
.ah-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-approved {
    background: #e2f8ee;
    color: #1b8a5a;
}

.badge-pending {
    background: #fff5e0;
    color: #d97706;
}

.badge-revision {
    background: #fee2e2;
    color: #dc2626;
}

.ah-empty {
    text-align: center;
    color: #3d4f70;
    padding: 32px;
    font-size: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .ah-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ah-two-col {
        grid-template-columns: 1fr;
    }

    .ah-ql-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .ah-root {
        padding: 18px 16px 40px;
    }

    .ah-welcome {
        padding: 28px 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .ah-welcome-illustration {
        display: none;
    }

    .ah-welcome-title {
        font-size: 22px;
    }

    .ah-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

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

    .ah-panel {
        padding: 18px 16px;
    }

    .ah-table-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ah-search {
        width: 100%;
    }

    .ah-table th,
    .ah-table td {
        padding: 10px 12px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .ah-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ah-card {
        padding: 16px 14px;
        gap: 12px;
    }

    .ah-card-count {
        font-size: 22px;
    }

    .ah-ql-grid {
        grid-template-columns: 1fr 1fr;
    }

    .btn-primary,
    .btn-outline {
        padding: 9px 16px;
        font-size: 13px;
    }
}

/* adminhomepage */



/* ==========================================
   SMM CONSULT NEW FOOTER
========================================== */

.smm-footer {
    background: #f8fafc;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #E24B4A, #378ADD) 1;
    overflow: hidden;
}

.smm-footer-container {
    width: 95%;
    max-width: 1500px;
    margin: auto;
    padding: 35px 0 60px;
}


.smm-footer-main {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 50px;
    align-items: flex-start;
}

/* =========================
   LEFT SIDE
========================= */

.smm-footer-left {
    padding-right: 10px;
    margin-top: -12px;
}

.smm-footer-logo {
    width: 340px;
    max-width: 100%;
    margin-bottom: 22px;
    transition: .35s ease;
}

.smm-footer-logo:hover {
    transform: scale(1.03);
}

.smm-footer-desc {
    color: #000;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 14px;
    text-align: left;
}

.smm-footer-social {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.smm-footer-social a {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    color: #378ADD;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;
    transition: .3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .04);
}

.smm-footer-social a:hover {
    background: linear-gradient(135deg,
            #E24B4A,
            #378ADD);
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(55, 138, 221, .18);
}

/* =========================
   RIGHT SIDE
========================= */

.smm-footer-right {
    border-left: 1px solid #e2e8f0;
    padding-left: 25px;
}

.footer-row {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 18px 0;
    border-bottom: 1px solid #e2e8f0;
}

.footer-row-title {
    min-width: 130px;
    color: #0284C7;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.footer-row-links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-row-links a {
    color: #000;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    position: relative;
    transition: .3s ease;
    font-family: "Inter", sans-serif;
}

.footer-row-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg,
            #E24B4A,
            #378ADD);
    transition: .3s ease;
}

.footer-row-links a:hover {
    color: #E24B4A;
    transform: translateY(-2px);
}

.footer-row-links a:hover::after {
    width: 100%;
}

/* =========================
   MAP INSIDE RIGHT
========================= */

.smm-footer-map {
    margin-top: 25px;
}

.smm-footer-map iframe {
    width: 100%;
    height: 260px;
    border: none;
    border-radius: 18px;
    display: block;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
}

/* =========================
   BOTTOM BAR
========================= */

.smm-footer-bottom {
    background: #0f172a;
    padding: 18px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.smm-footer-bottom p {
    color: #fff;
    margin: 0;
    font-size: 13px;
}

.smm-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.smm-footer-bottom-links a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: .3s ease;
}

.smm-footer-bottom-links a:hover {
    color: #378ADD;
}

/* =========================
   TABLET
========================= */

@media (max-width: 991px) {

    .smm-footer-main {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .smm-footer-left {
        text-align: center;
        padding-right: 0;
    }

    .smm-footer-logo {
        margin: 0 auto 20px;
    }

    .smm-footer-social {
        justify-content: center;
    }

    .smm-footer-right {
        border-left: none;
        padding-left: 0;
    }

    .footer-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .footer-row-title {
        min-width: auto;
    }

    .footer-row-links {
        gap: 16px;
    }

    .smm-footer-map iframe {
        height: 240px;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 576px) {

    .smm-footer-container {
        width: 94%;
        padding: 45px 0;
    }

    .smm-footer-logo {
        width: 230px;
    }

    .smm-footer-desc {
        font-size: 14px;
        text-align: left;
    }

    .footer-row-title {
        font-size: 14px;
    }

    .footer-row-links a {
        font-size: 13px;
    }

    .smm-footer-social {
        flex-wrap: wrap;
        justify-content: center;
    }

    .smm-footer-social a {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .smm-footer-map iframe {
        height: 220px;
        border-radius: 14px;
    }

    .smm-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .smm-footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }
}


/* ==========================================
   PREMIUM TOP BAR
========================================== */

.smm-topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    height: 52px;
    background: linear-gradient(90deg,
            #dce7e8 0%,
            #eef4f4 50%,
            #d7e5e6 100%);
    border-bottom: 1px solid rgba(0, 0, 0, .06);

    box-shadow:
        0 4px 20px rgba(0, 0, 0, .05);
}

.smm-topbar-inner {
    max-width: 1320px;
    margin: 0 auto;
    height: 52px;
    padding: 0 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ============================================================
   LEFT GROUP — Contact + Socials together
============================================================ */

.smm-topbar-left {
    display: flex;
    align-items: center;
    gap: 0;
    width: fit-content;
    flex: 0 0 auto;
}

.smm-topbar-contact {
    display: flex;
    align-items: center;
    gap: 18px;
}

.smm-topbar-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #000;
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: all .25s ease;
}

.smm-topbar-contact-item:hover {
    color: #0891b2;
}

.smm-topbar-contact-item i {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef4f8;
    border: 1px solid #d9e5ee;

    color: #0891b2;

    font-size: 15px;

    flex-shrink: 0;

    transition: all .25s ease;
}

.smm-topbar-contact-item:hover i {
    background: #0891b2;
    color: #fff;
    transform: translateY(-2px);
}

.smm-topbar-divider {
    width: 1px;
    height: 18px;
    background: #dbe2ea;
}


.smm-topbar-socials {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 10px;
}

.smm-topbar-social {
    width: 34px;
    height: 34px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef4f8;
    border: 1px solid #d9e5ee;

    color: #0891b2 !important;
    text-decoration: none;

    font-size: 15px;

    transition: all .25s ease;
}

.smm-topbar-social i {
    color: #0891b2 !important;
}

.smm-instagram:hover {
    background: #E1306C;
    border-color: #E1306C;
}

.smm-facebook:hover {
    background: #1877F2;
    border-color: #1877F2;
}

.smm-linkedin:hover {
    background: #0A66C2;
    border-color: #0A66C2;
}

.smm-youtube:hover {
    background: #FF0000;
    border-color: #FF0000;
}

.smm-whatsapp:hover {
    background: #25D366;
    border-color: #25D366;
}

.smm-topbar-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .15);
}

.smm-topbar-social:hover i {
    color: #fff !important;
}

/* ============================================================
   AUTH — far right
============================================================ */

.smm-topbar-auth {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.smm-topbar-signin {
    color: #334155;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: .25s ease;
}

.smm-topbar-signin:hover {
    color: #e11d48;
}

.smm-topbar-signup {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e11d48, #0891b2);
    color: #fff !important;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(225, 29, 72, .18);
    transition: all .3s ease;
}

.smm-topbar-signup:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(225, 29, 72, .25);
}

/* ============================================
   MAIN HEADER
============================================ */

.smm-header {
    position: fixed;
    top: 52px;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: #fff;
    border-bottom: 1.5px solid #f3f4f6;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s;
}

.smm-header.scrolled {
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.12);
}

.smm-header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* ── Logo ── */
.smm-logo {
    flex-shrink: 0;
    z-index: 1;
    margin-left: -13px;
}

.smm-logo img {
    height: 88px;
    object-fit: contain;
    display: block;
    padding-left: 11px;
}


.smm-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    z-index: 0;
}

.smm-nav-link {
    padding: 10px 16px;
    color: #1e293b;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: "Inter", sans-serif;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.smm-nav-link:hover {
    background: #fef2f2;
    color: #e11d48;
}

.smm-nav-active {
    background: #fef2f2;
    color: #e11d48;
}

.smm-nav-link i {
    font-size: 12px;
    color: #000;
    transition: transform 0.2s, color 0.2s;
}

.smm-nav-active i {
    transform: rotate(180deg);
    color: #e11d48;
}

.smm-dropdown-wrapper {
    position: relative;
}


.smm-mega-menu {
    align-items: flex-start;
}


.smm-mega-content {
    height: auto;
}

/* ── Mega Menu ── */
.smm-mega-menu {
    position: absolute;
    top: calc(100% + 16px);
    left: 50%;
    transform: translateX(-52%);
    width: 840px;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #ebebf0;
    display: flex;
    z-index: 99999;
    overflow: hidden;
    animation: fadeSlideDown 0.2s ease;
}

/* ── Sidebar tabs ── */
.smm-mega-tabs {
    width: 215px;
    background: #f7f7fb;
    padding: 26px 14px;
    border-right: 1px solid #ebebf0;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.smm-mega-label {
    font-size: 11px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    margin: 0 0 14px 8px;
    font-family: 'Poppins', sans-serif;
}

.smm-mega-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;

    border-radius: 11px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    font-family: 'Poppins', sans-serif;
    transition: all 0.15s;
    text-align: left;
    margin-bottom: 0;
}

.smm-mega-tab:hover {
    background: #eeeeff;
    color: #5b52e8;
}

.smm-mega-tab-active {
    background: #eeeeff !important;
    color: #5b52e8 !important;
}

.smm-mega-tab-icon {
    width: 32px;
    height: 32px;
    background: #e8e6ff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}

.smm-mega-tab:hover .smm-mega-tab-icon,
.smm-mega-tab-active .smm-mega-tab-icon {
    background: #5b52e8;
}

.smm-mega-tab-icon i {
    font-size: 15px;
    color: #5b52e8;
    transition: color 0.15s;
}

.smm-mega-tab:hover .smm-mega-tab-icon i,
.smm-mega-tab-active .smm-mega-tab-icon i {
    color: #fff;
}

.smm-mega-arrow {
    margin-left: auto;
    font-size: 10px;
    color: #c8c8d8;
    flex-shrink: 0;
    transition: color 0.15s;
}

.smm-mega-tab:hover .smm-mega-arrow,
.smm-mega-tab-active .smm-mega-arrow {
    color: #5b52e8;
}

/* ── Content panel ── */
.smm-mega-content {
    flex: 1;
    padding: 22px 20px 20px;
    /* display: flex;
  flex-direction: column; */
    min-width: 0;
}

/* ── Grid ── */
.smm-mega-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    align-content: start;
    align-items: start;
}

/* ── Service cards ── */
.smm-mega-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 13px;
    border-radius: 12px;
    text-decoration: none;
    border: 1.5px solid transparent;
    background: #fafafa;
    transition: all 0.18s;
    min-height: unset;
    height: auto;
}

.smm-mega-item:hover {
    background: #f3f2ff;
    border-color: #c9c5f8;
}

.smm-dropdown-icon {
    width: 38px;
    height: 38px;
    background: #eeeeff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s;
}

.smm-mega-item:hover .smm-dropdown-icon {
    background: #5b52e8;
}

.smm-dropdown-icon i {
    font-size: 17px;
    color: #5b52e8;
    transition: color 0.18s;
}

.smm-mega-item:hover .smm-dropdown-icon i {
    color: #fff;
}

.smm-dropdown-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f0f1a;
    font-family: 'Poppins', sans-serif;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}

.smm-mega-item:hover .smm-dropdown-title {
    color: #3730a3;
}

.smm-dropdown-desc {
    font-size: 12px;
    font-weight: 500;
    color: #000;
    font-family: 'Poppins', sans-serif;
    line-height: 1.35;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s;
}

.smm-mega-item:hover .smm-dropdown-desc {
    color: #5b52e8;
}

/* ── Footer ── */
.smm-mega-footer {
    margin-top: 12px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #000;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.smm-mega-cta {
    font-size: 12px;
    font-weight: 700;
    color: #e11d48;
    text-decoration: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

.smm-mega-cta:hover {
    opacity: 0.75;
}

/* ── Platforms menu ── */
.smm-platforms-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: 580px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14);
    border: 1.5px solid #f3f4f6;
    padding: 22px;
    z-index: 99999;
    animation: platformsFadeIn 0.2s ease;
}

.smm-platforms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 10px;
}

.smm-platform-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 11px;
    text-decoration: none;
    transition: background 0.18s;
}

.smm-platform-item:hover {
    background: #f8f7ff;
}

.smm-platform-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.smm-platform-icon i {
    font-size: 20px;
}

.smm-platforms-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1.5px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: #000;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* ── Header right ── */
.smm-header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
}

.smm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    font-size: 14px;
    border-radius: 4px;
    background: #0891b2;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-family: "Poppins", sans-serif;
    transition: all .3s ease;
    border: 2px solid #0891b2;
    box-shadow: 0 6px 18px rgba(8, 145, 178, .18);
}

.smm-btn-icon {
    font-size: 18px;
    transition: transform .3s ease;
}

.smm-btn-primary:hover {
    background: #e11d48;
    border-color: #e11d48;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(225, 29, 72, .22);
}

.smm-btn-primary:hover .smm-btn-icon {
    transform: translate(4px, -4px);
}

/* ── Hamburger ── */
.smm-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}

.smm-hamburger:hover {
    background: #f5f5f5;
}

.smm-hamburger span {
    width: 26px;
    height: 2.5px;
    background: #000;
    display: block;
    border-radius: 2px;
    transition: all 0.3s;
}

.smm-bar-top-open {
    transform: rotate(45deg) translate(5px, 5px);
}

.smm-bar-mid-open {
    opacity: 0 !important;
}

.smm-bar-bot-open {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobile menu ── */
.smm-mobile-menu {
    position: fixed;
    top: 138px;
    left: 0;
    right: 0;
    background: #fff;
    z-index: 9998;
    padding: 14px 24px 44px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.10);
    max-height: calc(100vh - 138px);
    overflow-y: auto;
    border-top: 1.5px solid #f3f4f6;
    animation: mobileSlideIn 0.25s ease;
}

.smm-mobile-toprow {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 0 14px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}

.smm-mobile-toprow-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #000;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: color 0.2s;
}

.smm-mobile-toprow-item:hover {
    color: #e11d48;
}

.smm-mobile-toprow-item i {
    font-size: 15px;
    color: #e11d48;
}

.smm-mobile-link {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #f3f4f6;
    color: #000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
}

.smm-mobile-link:hover {
    color: #e11d48;
}

.smm-mobile-services-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 0;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    background: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    font-family: 'Inter', sans-serif;
    transition: color 0.2s;
}

.smm-mobile-services-btn:hover {
    color: #e11d48;
}

.smm-mobile-services-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.smm-mobile-services-btn i {
    font-size: 17px;
    color: #6C63FF;
}

.smm-mobile-services-list {
    padding: 8px 0 8px 8px;
    background: #fafafa;
    border-radius: 12px;
    margin: 6px 0;
}

.smm-mobile-tab-label {
    font-size: 10.5px;
    font-weight: 800;
    color: #6C63FF;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 0 4px 8px;
    margin: 0;
    font-family: 'Inter', sans-serif;
}

/* CHANGED: Mobile CTA area */
.smm-mobile-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

/* CHANGED: Enquiry Now — compact pill, not full-width */
.smm-mobile-proposal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 36px;
    border-radius: 50px;
    background: linear-gradient(135deg, #e11d48, #0891b2);
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    transition: opacity 0.2s;
    box-shadow: 0 4px 18px rgba(225, 29, 72, 0.25);
    white-space: nowrap;
}

.smm-mobile-proposal-btn:hover {
    opacity: 0.9;
    color: #fff;
}

/* CHANGED: Auth row — styled pill buttons, not plain text */
.smm-mobile-auth-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.smm-mobile-auth-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 22px;
    border-radius: 8px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
    min-width: 90px;
}

.smm-mobile-auth-link:hover {
    border-color: #e11d48;
    color: #e11d48;
    background: #fff5f7;
}

.smm-mobile-auth-sep {
    display: none;
}

/* ── Animations ── */
@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateX(-52%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-52%) translateY(0);
    }
}

@keyframes platformsFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes mobileSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

/* ── Responsive ── */

/* CHANGED: Logo fix + padding at 1024px and below */
@media (max-width: 1024px) {
    .smm-nav {
        display: none;
    }

    .smm-header-right {
        display: none;
    }

    .smm-hamburger {
        display: flex;
    }

    .smm-topbar-contact {
        display: none;
    }

    .smm-topbar-socials {
        justify-content: flex-start;
        margin-left: 0;
    }

    .smm-header-inner {
        padding: 0 20px;
    }

    .smm-topbar-inner {
        padding: 0 20px;
    }

    .smm-logo {
        margin-left: 0;
    }
}

@media (max-width: 640px) {
    .smm-topbar-socials {
        display: none;
    }

    .smm-topbar-inner {
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .smm-header-inner {
        padding: 0 16px;
    }

    .smm-topbar-inner {
        padding: 0 16px;
    }

    .smm-logo img {
        height: 66px;
    }

    .smm-mobile-menu {
        padding: 10px 16px 36px;
    }

    .smm-platforms-grid {
        grid-template-columns: 1fr;
    }
}

/* ── SIMPLE MENU (About & Resources) ── */
.smm-simple-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%);
    width: 520px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.14);
    border: 1.5px solid #f3f4f6;
    padding: 22px;
    z-index: 99999;
    animation: platformsFadeIn 0.2s ease;
}

.smm-simple-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-top: 10px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .smm-simple-menu {
        width: 480px;
    }
}

@media (max-width: 768px) {
    .smm-simple-menu {
        width: 420px;
        padding: 18px;
    }

    .smm-simple-items {
        grid-template-columns: 1fr;
    }
}


/* sitebanner */

.hero-final {
    position: relative;
    overflow: hidden;

    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 50px 20px;

    background:
        radial-gradient(circle at left top,
            rgba(225, 29, 72, .08),
            transparent 30%),
        radial-gradient(circle at right top,
            rgba(8, 145, 178, .10),
            transparent 35%),
        linear-gradient(135deg, #f8fafc, #ffffff);
}


.hero-bg {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hero-bg-1 {
    width: 350px;
    height: 350px;
    top: -120px;
    left: -120px;
    background: rgba(225, 29, 72, .08);
    filter: blur(80px);
}

.hero-bg-2 {
    width: 450px;
    height: 450px;
    right: -180px;
    top: -150px;
    background: rgba(8, 145, 178, .08);
    filter: blur(90px);
}


.hero-wrap {
    max-width: 1380px;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 10;
}



.hero-left {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-left img {
    width: 340px;
    max-width: 100%;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .10));
    animation: leftFloat 6s ease-in-out infinite;
}


.hero-center {
    flex: 0 0 560px;
    text-align: center;
    position: relative;
    z-index: 20;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    background: #eef8fb;
    border: 1px solid #d9f1f8;
    color: #0891b2;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
}

.hero-center h1 {
    font-size: 54px;
    line-height: 1.08;
    font-weight: 800;
    color: #000;
    margin-bottom: 20px;
}

.hero-center h1 span {
    color: #0891b2;
}

.hero-center p {
    font-size: 17px;
    line-height: 1.8;
    color: #000;
    margin-bottom: 28px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    background: #0891b2;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: .3s ease;
}

.hero-btn:hover {
    background: #e11d48;
    transform: translateY(-2px);
    color: white;
}

.hero-right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-right img {
    width: 360px;
    max-width: 100%;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .10));
    animation: rightFloat 7s ease-in-out infinite;
}


.social-icon {
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    z-index: 5;
}

.social-icon i {
    font-size: 26px;
}

/* ---- existing icons ---- */

/* Instagram — top-left, stays as-is */
.icon-instagram {
    top: 90px;
    left: 120px;
    color: #E1306C;
    animation: socialFloat1 6s ease-in-out infinite;
}

/* Facebook — top-right, stays as-is */
.icon-facebook {
    top: 150px;
    right: 180px;
    color: #1877F2;
    animation: socialFloat2 7s ease-in-out infinite;
}

/* LinkedIn — bottom-left */
.icon-linkedin {
    bottom: 80px;
    left: 150px;
    color: #0A66C2;
    animation: socialFloat3 8s ease-in-out infinite;
}


.icon-youtube {
    bottom: 80px;
    right: 250px;
    color: #FF0000;
    animation: socialFloat1 5s ease-in-out infinite;
}

/* WhatsApp — bottom-right corner */
.icon-whatsapp {
    bottom: 70px;
    right: 160px;
    color: #25D366;
    animation: socialFloat2 6s ease-in-out infinite;
}

/* TikTok — bottom-center */
.icon-tiktok {
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    color: #111827;
    animation: socialFloat3 7s ease-in-out infinite;
}

/* ---- NEW icons ---- */

/* Facebook2 — upper-left zone, different height from icon-facebook */
.icon-facebook2 {
    top: 200px;
    left: 60px;
    color: #1877F2;
    animation: socialFloat2 6.5s ease-in-out infinite;
    animation-delay: 1s;
}

/* Pinterest — upper-right zone */
.icon-pinterest {
    top: 100px;
    right: 80px;
    color: #E60023;
    animation: socialFloat1 5.5s ease-in-out infinite;
    animation-delay: 0.5s;
}



.social-action {
    position: absolute;
    background: #fff;
    padding: 11px 18px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    z-index: 6;
}

.social-action span {
    font-size: 13px;
    font-weight: 600;
}

/* Like */
.action-like {
    top: 170px;
    left: 34%;
    color: #e11d48;
    animation: instaLike 3s infinite;
}

/* Bell */
.action-bell {
    top: 120px;
    right: 38%;
    color: #f59e0b;
    transform-origin: top center;
    animation: bellActivity 4s infinite;
}

/* Subscribe */
.action-subscribe {
    top: 250px;
    right: 28%;
    color: #ff0000;
    animation: subscribeActivity 4s infinite;
}

/* Follow */
.action-follow {
    bottom: 150px;
    left: 27%;
    color: #10b981;
    animation: followActivity 4s infinite;
}

/* Share */
.action-share {
    bottom: 120px;
    right: 35%;
    color: #0891b2;
    animation: shareActivity 3s infinite;
}


@keyframes leftFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes rightFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes socialFloat1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes socialFloat2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

@keyframes socialFloat3 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* TikTok uses translateX centering so we override just Y */
.icon-tiktok {
    animation-name: socialFloat3 !important;
}

@keyframes instaLike {

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

    15% {
        transform: scale(1.30);
    }

    30% {
        transform: scale(1);
    }
}

@keyframes bellActivity {

    0%,
    100% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(18deg);
    }

    20% {
        transform: rotate(-18deg);
    }

    30% {
        transform: rotate(12deg);
    }

    40% {
        transform: rotate(0deg);
    }
}

@keyframes subscribeActivity {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 12px 35px rgba(255, 0, 0, .25);
    }
}

@keyframes followActivity {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 12px 35px rgba(16, 185, 129, .25);
    }
}

@keyframes shareActivity {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

.hero-content-fade {
    animation: heroFadeUp .7s ease;
}

@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }

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


@media (max-width: 1024px) {

    .hero-final {
        min-height: 650px;
        padding: 40px 16px;
    }

    .hero-wrap {
        /* KEEP horizontal — do NOT stack */
        flex-direction: row;
        gap: 10px;
    }

    .hero-center {
        flex: 0 0 420px;
    }

    .hero-center h1 {
        font-size: 42px;
    }

    .hero-center p {
        font-size: 15px;
    }

    .hero-left img {
        width: 260px;
    }

    .hero-right img {
        width: 270px;
    }

    /* Scale down social icons slightly */
    .social-icon {
        width: 48px;
        height: 48px;
    }

    .social-icon i {
        font-size: 22px;
    }

    /* Nudge icon positions inward so nothing clips */
    .icon-instagram {
        top: 70px;
        left: 80px;
    }

    .icon-facebook {
        top: 120px;
        right: 120px;
    }

    .icon-linkedin {
        bottom: 60px;
        left: 100px;
    }

    .icon-youtube {
        bottom: 60px;
        right: 180px;
    }

    .icon-whatsapp {
        bottom: 55px;
        right: 105px;
    }

    .icon-tiktok {
        bottom: 45px;
        left: 50%;
    }

    .icon-facebook2 {
        top: 160px;
        left: 30px;
    }

    .icon-pinterest {
        top: 80px;
        right: 50px;
    }

    /* Nudge action chips inward */
    .action-like {
        top: 140px;
        left: 32%;
    }

    .action-bell {
        top: 100px;
        right: 36%;
    }

    .action-subscribe {
        top: 200px;
        right: 26%;
    }

    .action-follow {
        bottom: 120px;
        left: 24%;
    }

    .action-share {
        bottom: 95px;
        right: 32%;
    }
}



@media (max-width: 576px) {

    .hero-final {
        min-height: auto;
        padding: 40px 16px 50px;
    }

    /* Stack on mobile */
    .hero-wrap {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    /* Hide left woman image on mobile */
    .hero-left {
        display: none;
    }

    .hero-right img {
        width: 200px;
    }

    .hero-center {
        flex: unset;
        width: 100%;
        max-width: 100%;
    }

    .hero-center h1 {
        font-size: 32px;
    }

    .hero-center p {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .hero-badge {
        font-size: 12px;
        padding: 8px 14px;
    }

    /* Hide ALL icons first */
    .social-icon {
        display: none;
    }

    .social-action {
        display: none;
    }

    /* Show only 3 icons */
    .icon-instagram,
    .icon-whatsapp,
    .icon-tiktok {
        display: flex;
        width: 44px;
        height: 44px;
    }

    .icon-instagram i,
    .icon-whatsapp i,
    .icon-tiktok i {
        font-size: 20px;
    }

    .icon-instagram {
        top: 16px;
        left: 16px;
    }

    .icon-whatsapp {
        bottom: 16px;
        right: 16px;
    }

    .icon-tiktok {
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Show only 2 action chips */
    .action-subscribe,
    .action-like {
        display: flex;
        padding: 8px 13px;
    }

    .action-subscribe {
        top: 16px;
        right: 16px;
        font-size: 12px;
    }

    .action-subscribe span {
        font-size: 12px;
    }

    .action-subscribe i {
        font-size: 13px;
    }

    .action-like {
        top: 70px;
        left: 16px;
        font-size: 13px;
    }
}
/* ===== Fix top-heavy icon layout on small mobile (≤425px) ===== */
@media (max-width: 425px) {

    .social-icon {
        width: 44px;
        height: 44px;
    }

    .social-icon i {
        font-size: 20px;
    }

    /* Top row — push down a bit so it clears the header/nav */
    .icon-instagram {
        top: 24px;
        left: 16px;
    }

    .action-subscribe {
        top: 24px;
        right: 16px;
        padding: 9px 15px;
    }

    /* Bottom row — spread across left / center / right,
       and keep clear of the fixed WhatsApp chat widget (bottom-right) */
    .action-like {
        top: auto;
        bottom: 110px;
        left: 20px;
        padding: 10px 16px;
    }

    .icon-tiktok {
        bottom: 110px;
        left: 50%;
        transform: translateX(-50%);
    }

    .icon-whatsapp {
        bottom: 190px;
        right: 20px;
    }
}

/* ===== Extra-small phones (≤320px) — proper balance, no shrink-to-tiny ===== */
@media (max-width: 320px) {

    .social-icon {
        width: 40px;
        height: 40px;
    }

    .social-icon i {
        font-size: 18px;
    }

    .icon-instagram {
        top: 20px;
        left: 12px;
    }

    .action-subscribe {
        top: 20px;
        right: 12px;
        padding: 8px 13px;
    }

    .action-subscribe span,
    .action-subscribe i {
        font-size: 12px;
    }

    .action-like {
        bottom: 100px;
        left: 14px;
        padding: 9px 14px;
    }

    .icon-tiktok {
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%);
    }

    .icon-whatsapp {
        bottom: 175px;
        right: 14px;
    }
}
/* sitebanner */


.hbv2-section {
    position: relative;
    overflow: hidden;
    min-height: 720px;
    padding: 50px 20px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at left top, rgba(225, 29, 72, .08), transparent 30%),
        radial-gradient(circle at right top, rgba(8, 145, 178, .10), transparent 35%),
        linear-gradient(135deg, #f8fafc, #ffffff);
}

/* ════════════════════════════════════════════════════
   BACKGROUND GLOW BLOBS
════════════════════════════════════════════════════ */
.hbv2-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.hbv2-glow--tl {
    width: 350px;
    height: 350px;
    top: -120px;
    left: -120px;
    background: rgba(225, 29, 72, .08);
    filter: blur(80px);
}

.hbv2-glow--tr {
    width: 450px;
    height: 450px;
    top: -150px;
    right: -180px;
    background: rgba(8, 145, 178, .08);
    filter: blur(90px);
}

.hbv2-glow--bl {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: 10%;
    background: rgba(139, 92, 246, .05);
    filter: blur(70px);
}

.hbv2-glow--br {
    width: 280px;
    height: 280px;
    bottom: -80px;
    right: 8%;
    background: rgba(16, 185, 129, .05);
    filter: blur(70px);
}

/* ════════════════════════════════════════════════════
   MAIN LAYOUT
════════════════════════════════════════════════════ */
.hbv2-wrap {
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    z-index: 10;
}

/* ════════════════════════════════════════════════════
   SIDE IMAGES
════════════════════════════════════════════════════ */
.hbv2-side {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hbv2-img {
    max-width: 100%;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .10));
}

.hbv2-img--left {
    width: 340px;
    animation: hbv2FloatL 6s ease-in-out infinite;
}

.hbv2-img--right {
    width: 360px;
    animation: hbv2FloatR 7s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════
   CENTER CONTENT
════════════════════════════════════════════════════ */
.hbv2-center {
    flex: 0 0 560px;
    text-align: center;
    position: relative;
    z-index: 20;
}

.hbv2-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 50px;
    background: #eef8fb;
    border: 1px solid #d9f1f8;
    color: #0891b2;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 18px;
    position: relative;
    z-index: 25;
}

.hbv2-badge i {
    font-size: 15px;
}

.hbv2-title {
    font-size: clamp(36px, 4.5vw, 60px);
    line-height: 1.08;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 20px;
}

.hbv2-title--accent {
    color: #0891b2;
}

.hbv2-desc {
    font-size: clamp(14px, 1.3vw, 17px);
    line-height: 1.8;
    color: #64748b;
    margin-bottom: 28px;
    max-width: 480px;
    margin-inline: auto;
}

.hbv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px;
    background: #0891b2;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: background .3s ease, transform .25s ease;
}

.hbv2-btn:hover {
    background: #e11d48;
    transform: translateY(-2px);
}


.hbv2-icon {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
    z-index: 5;
    pointer-events: none;
}

.hbv2-icon i {
    font-size: 25px;
}

/* ── LEFT SIDE — 5 icons staggered top→bottom ── */
.hbv2-icon--instagram {
    top: 70px;
    left: 2%;
    color: #E1306C;
}

.hbv2-icon--snapchat {
    top: 28%;
    left: 12%;
    color: #111;
    background: #FFFC00;
}

.hbv2-icon--pinterest {
    top: 50%;
    left: 3%;
    color: #E60023;
}

.hbv2-icon--reddit {
    bottom: 28%;
    left: 14%;
    color: #FF4500;
}

.hbv2-icon--linkedin {
    bottom: 60px;
    left: 3%;
    color: #0A66C2;
}

/* ── RIGHT SIDE — 5 icons staggered top→bottom ── */
.hbv2-icon--facebook {
    top: 65px;
    right: 2%;
    color: #1877F2;
}

.hbv2-icon--twitter {
    top: 28%;
    right: 12%;
    color: #111;
}

.hbv2-icon--telegram {
    top: 50%;
    right: 3%;
    color: #2AABEE;
}

.hbv2-icon--youtube {
    bottom: 28%;
    right: 12%;
    color: #FF0000;
}

.hbv2-icon--whatsapp {
    bottom: 60px;
    right: 3%;
    color: #25D366;
}

/* ── BOTTOM CENTER — 4 icons along bottom edge ── */
/* spread them horizontally but keep z-index below content */
.hbv2-icon--tiktok {
    bottom: 30px;
    left: 27%;
    color: #111;
    z-index: 4;
}

.hbv2-icon--discord {
    bottom: 30px;
    left: 38%;
    color: #5865F2;
    z-index: 4;
}

.hbv2-icon--twitch {
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: #9146FF;
    z-index: 4;
}

.hbv2-icon--behance {
    bottom: 30px;
    right: 27%;
    color: #1769FF;
    z-index: 4;
}

/* ── Float animations ── */
.hbv2-f1 {
    animation: hbv2Flt1 5.0s ease-in-out infinite;
}

.hbv2-f2 {
    animation: hbv2Flt2 6.0s ease-in-out infinite;
}

.hbv2-f3 {
    animation: hbv2Flt3 4.5s ease-in-out infinite;
}

.hbv2-f4 {
    animation: hbv2Flt4 5.5s ease-in-out infinite;
}

.hbv2-f5 {
    animation: hbv2Flt5 7.0s ease-in-out infinite;
}

@keyframes hbv2Flt1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-11px);
    }
}

@keyframes hbv2Flt2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(9px);
    }
}

@keyframes hbv2Flt3 {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-13px) rotate(4deg);
    }
}

@keyframes hbv2Flt4 {

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

    50% {
        transform: translateY(-8px) scale(1.07);
    }
}

@keyframes hbv2Flt5 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* tiktok bottom — keep translateX, just float up */
.hbv2-icon--tiktok {
    animation: hbv2FltBtm 5.5s ease-in-out infinite;
}

.hbv2-icon--discord {
    animation: hbv2FltBtm 6.0s ease-in-out infinite;
    animation-delay: .4s;
}

.hbv2-icon--behance {
    animation: hbv2FltBtm 5.0s ease-in-out infinite;
    animation-delay: .8s;
}

/* twitch keeps translateX(-50%) */
.hbv2-icon--twitch {
    animation: hbv2FltTwitch 4.8s ease-in-out infinite;
}

@keyframes hbv2FltTwitch {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(-10px);
    }
}

@keyframes hbv2FltBtm {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


.hbv2-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 17px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
    z-index: 7;
    pointer-events: none;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.hbv2-chip i {
    font-size: 17px;
}



.hbv2-chip--like {
    top: 100px;
    left: 24%;
    color: #e11d48;
}

.hbv2-chip--bell {
    top: 80px;
    right: 24%;
    color: #f59e0b;
}

.hbv2-chip--subscribe {
    top: 50%;
    right: 22%;
    transform: translateY(-110px);
    color: #ff0000;
}

.hbv2-chip--follow {
    top: 50%;
    left: 22%;
    transform: translateY(-110px);
    color: #10b981;
}

.hbv2-chip--share {
    bottom: 130px;
    right: 24%;
    color: #0891b2;
}

.hbv2-chip--comment {
    bottom: 130px;
    left: 24%;
    color: #6366f1;
}

/* chip drift animations */
.hbv2-d1 {
    animation: hbv2Drft1 5.0s ease-in-out infinite;
}

.hbv2-d2 {
    animation: hbv2Drft2 6.0s ease-in-out infinite;
}

.hbv2-d3 {
    animation: hbv2Drft3 4.5s ease-in-out infinite;
}

.hbv2-d4 {
    animation: hbv2Drft4 5.5s ease-in-out infinite;
}

.hbv2-d5 {
    animation: hbv2Drft5 7.0s ease-in-out infinite;
}

@keyframes hbv2Drft1 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

@keyframes hbv2Drft2 {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes hbv2Drft3 {

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

    50% {
        transform: scale(1.07);
    }
}

@keyframes hbv2Drft4 {

    0%,
    100% {
        transform: translateY(-110px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
    }

    50% {
        transform: translateY(-118px);
        box-shadow: 0 12px 30px rgba(16, 185, 129, .25);
    }
}

@keyframes hbv2Drft5 {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

/* bell ring */
.hbv2-chip--bell {
    animation: hbv2BellRing 4s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes hbv2BellRing {

    0%,
    100% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(16deg);
    }

    20% {
        transform: rotate(-16deg);
    }

    30% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(5deg);
    }

    60% {
        transform: rotate(0);
    }
}

/* heartbeat */
.hbv2-chip--like {
    animation: hbv2HeartBeat 2.8s ease-in-out infinite;
}

@keyframes hbv2HeartBeat {

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

    15% {
        transform: scale(1.18);
    }

    30% {
        transform: scale(1);
    }
}

/* subscribe keep translateY */
.hbv2-chip--subscribe {
    animation: hbv2SubPulse 3s ease-in-out infinite;
}

@keyframes hbv2SubPulse {

    0%,
    100% {
        transform: translateY(-110px) scale(1);
    }

    50% {
        transform: translateY(-110px) scale(1.07);
    }
}

/* share bounce */
.hbv2-chip--share {
    animation: hbv2ShareBounce 3.5s ease-in-out infinite;
}

@keyframes hbv2ShareBounce {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

/* comment float */
.hbv2-chip--comment {
    animation: hbv2CommentFloat 5s ease-in-out infinite;
}

@keyframes hbv2CommentFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

/* ════════════════════════════════════════════════════
   IMAGE FLOAT
════════════════════════════════════════════════════ */
@keyframes hbv2FloatL {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes hbv2FloatR {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — 1280px
════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
    .hbv2-icon--snapchat {
        left: 10%;
    }

    .hbv2-icon--reddit {
        left: 12%;
    }

    .hbv2-icon--twitter {
        right: 10%;
    }

    .hbv2-icon--youtube {
        right: 10%;
    }

    .hbv2-chip--like {
        left: 21%;
    }

    .hbv2-chip--bell {
        right: 21%;
    }

    .hbv2-chip--subscribe {
        right: 19%;
    }

    .hbv2-chip--follow {
        left: 19%;
    }

    .hbv2-chip--share {
        right: 21%;
    }

    .hbv2-chip--comment {
        left: 21%;
    }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — 1024px
════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hbv2-section {
        min-height: 600px;
    }

    .hbv2-center {
        flex: 0 0 420px;
    }

    .hbv2-img--left {
        width: 260px;
    }

    .hbv2-img--right {
        width: 275px;
    }

    .hbv2-icon {
        width: 48px;
        height: 48px;
    }

    .hbv2-icon i {
        font-size: 21px;
    }

    /* tighten left icons */
    .hbv2-icon--instagram {
        left: 1%;
    }

    .hbv2-icon--snapchat {
        left: 9%;
    }

    .hbv2-icon--pinterest {
        left: 1%;
    }

    .hbv2-icon--reddit {
        left: 10%;
    }

    .hbv2-icon--linkedin {
        left: 1%;
    }

    /* tighten right icons */
    .hbv2-icon--facebook {
        right: 1%;
    }

    .hbv2-icon--twitter {
        right: 9%;
    }

    .hbv2-icon--telegram {
        right: 1%;
    }

    .hbv2-icon--youtube {
        right: 9%;
    }

    .hbv2-icon--whatsapp {
        right: 1%;
    }

    .hbv2-chip {
        font-size: 12px;
        padding: 8px 13px;
    }

    .hbv2-chip i {
        font-size: 15px;
    }

    .hbv2-chip--like {
        top: 90px;
        left: 19%;
    }

    .hbv2-chip--bell {
        top: 70px;
        right: 18%;
    }

    .hbv2-chip--subscribe {
        right: 17%;
    }

    .hbv2-chip--follow {
        left: 17%;
    }

    .hbv2-chip--share {
        bottom: 110px;
        right: 18%;
    }

    .hbv2-chip--comment {
        bottom: 110px;
        left: 18%;
    }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — 768px (tablet — hide RIGHT image)
════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hbv2-section {
        min-height: 500px;
        padding: 40px 16px 70px;
    }

    /* hide right image only */
    .hbv2-side--right {
        display: none;
    }

    .hbv2-wrap {
        justify-content: center;
        gap: 12px;
    }

    .hbv2-center {
        flex: 0 0 auto;
        width: 100%;
        max-width: 520px;
    }

    .hbv2-img--left {
        width: 200px;
    }

    /* icons — only 6 visible, pinned to screen edges */
    .hbv2-icon {
        width: 42px;
        height: 42px;
    }

    .hbv2-icon i {
        font-size: 18px;
    }

    .hbv2-icon--instagram {
        top: 12px;
        left: 12px;
    }

    .hbv2-icon--linkedin {
        bottom: 12px;
        left: 12px;
    }

    .hbv2-icon--pinterest {
        top: 50%;
        left: 8px;
        transform: translateY(-50%);
    }

    .hbv2-icon--facebook {
        top: 12px;
        right: 12px;
    }

    .hbv2-icon--whatsapp {
        bottom: 12px;
        right: 12px;
    }

    .hbv2-icon--telegram {
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
    }

    /* hide all others on mobile */
    .hbv2-icon--snapchat,
    .hbv2-icon--reddit,
    .hbv2-icon--twitter,
    .hbv2-icon--youtube,
    .hbv2-icon--tiktok,
    .hbv2-icon--discord,
    .hbv2-icon--twitch,
    .hbv2-icon--behance {
        display: none;
    }

    /* chips — corners only */
    .hbv2-chip {
        font-size: 11.5px;
        padding: 7px 12px;
    }

    .hbv2-chip--like {
        top: 60px;
        left: 12px;
    }

    .hbv2-chip--bell {
        top: 60px;
        right: 12px;
    }

    .hbv2-chip--follow {
        top: 50%;
        left: 8px;
        transform: translateY(30px);
    }

    .hbv2-chip--subscribe {
        top: 50%;
        right: 8px;
        transform: translateY(30px);
    }

    .hbv2-chip--comment {
        bottom: 60px;
        left: 12px;
    }

    .hbv2-chip--share {
        bottom: 60px;
        right: 12px;
    }

    /* override animations for mobile-specific positions */
    .hbv2-chip--like {
        animation: hbv2MbFloat 4s ease-in-out infinite;
    }

    .hbv2-chip--bell {
        animation: hbv2MbBell 4s ease-in-out infinite;
    }

    .hbv2-chip--comment {
        animation: hbv2MbFloat 5s ease-in-out infinite;
        animation-delay: .5s;
    }

    .hbv2-chip--share {
        animation: hbv2MbShare 4s ease-in-out infinite;
    }

    .hbv2-chip--follow {
        animation: hbv2MbFollow 5s ease-in-out infinite;
    }

    .hbv2-chip--subscribe {
        animation: hbv2MbSub 4.5s ease-in-out infinite;
    }

    /* linkedin / telegram / pinterest keep their vertical centering */
    .hbv2-icon--linkedin,
    .hbv2-icon--telegram {
        animation: hbv2FltMidV 5s ease-in-out infinite;
    }

    .hbv2-icon--pinterest {
        animation: hbv2FltMidV 5.5s ease-in-out infinite;
    }
}

@keyframes hbv2MbFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes hbv2MbBell {

    0%,
    100% {
        transform: rotate(0);
    }

    10% {
        transform: rotate(14deg);
    }

    20% {
        transform: rotate(-14deg);
    }

    30% {
        transform: rotate(9deg);
    }

    40% {
        transform: rotate(0);
    }
}

@keyframes hbv2MbShare {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

@keyframes hbv2MbFollow {

    0%,
    100% {
        transform: translateY(30px);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .09);
    }

    50% {
        transform: translateY(22px);
        box-shadow: 0 12px 30px rgba(16, 185, 129, .25);
    }
}

@keyframes hbv2MbSub {

    0%,
    100% {
        transform: translateY(30px) scale(1);
    }

    50% {
        transform: translateY(30px) scale(1.06);
    }
}

@keyframes hbv2FltMidV {

    0%,
    100% {
        transform: translateY(-50%);
    }

    50% {
        transform: translateY(calc(-50% - 8px));
    }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — 480px (small mobile)
════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .hbv2-section {
        min-height: 440px;
        padding: 36px 10px 64px;
    }

    /* hide left image on very small screens too */
    .hbv2-side--left {
        display: none;
    }

    .hbv2-wrap {
        flex-direction: column;
    }

    .hbv2-title {
        font-size: clamp(26px, 8vw, 34px);
    }

    .hbv2-desc {
        font-size: 13.5px;
    }

    .hbv2-btn {
        padding: 11px 24px;
        font-size: 14px;
    }

    .hbv2-badge {
        font-size: 11.5px;
        padding: 8px 14px;
    }

    .hbv2-icon {
        width: 38px;
        height: 38px;
    }

    .hbv2-icon i {
        font-size: 16px;
    }

    .hbv2-chip {
        font-size: 11px;
        padding: 6px 10px;
    }
}











.platform-hero {
    position: relative;
    overflow: hidden;
    padding: 100px 20px 90px;
    background: linear-gradient(110deg,
            rgba(255, 210, 225, 0.5) 0%,
            #f8fafc 45%,
            rgba(200, 235, 255, 0.55) 100%);
    min-height: 280px;
    display: flex;
    align-items: center;
}



.platform-hero__blur {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    pointer-events: none;
    z-index: 0;
}

.platform-hero__blur--left {
    width: 380px;
    height: 380px;
    background: rgba(233, 30, 99, 0.1);
    top: -100px;
    left: -140px;
}

.platform-hero__blur--right {
    width: 400px;
    height: 400px;
    background: rgba(3, 169, 244, 0.12);
    right: -140px;
    top: -80px;
}



.platform-hero__container {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}



.platform-hero__breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 100px;
    padding: 7px 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
    color: #64748b;
}

.platform-hero__breadcrumb a {
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}

.platform-hero__breadcrumb a:hover {
    color: #0891b2;
}

.platform-hero__breadcrumb .sep {
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1;
}

.platform-hero__breadcrumb .current {
    color: #0891b2;
    font-weight: 700;
}


.platform-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 8px 28px rgba(8, 145, 178, 0.12);
    color: #0891b2;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 26px;
    letter-spacing: 0.01em;
}

.platform-hero__badge i {
    font-size: 15px;
}


.platform-hero__title {
    font-size: 49px;
    line-height: 1.12;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 20px;
    letter-spacing: -1px;
    font-family: 'Poppins', sans-serif;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.platform-hero__title span {
    color: #0891b2;
}



.platform-hero__description {
    max-width: 600px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.8;
    color: #000;
}



.platform-float,
.platform-action {
    position: absolute;
    z-index: 2;
    animation: platformFloat 5s ease-in-out infinite;
}

.platform-float {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.09),
        inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

.platform-float i {
    font-size: 28px;
}

.platform-hero__animated-word {
    display: inline-block;
    color: #5b52e8;
    animation: heroWordFade 2.5s ease infinite;
}

@keyframes heroWordFade {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    15% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-12px);
    }
}

/* --- Icon positions & delays --- */
.platform-float--instagram {
    top: 12%;
    left: 5%;
    color: #e1306c;
    animation-delay: 0s;
}

.platform-float--facebook {
    bottom: 20%;
    left: 4%;
    color: #1877f2;
    animation-delay: 0.8s;
}

.platform-float--google {
    top: 65%;
    left: 19%;
    color: #4285f4;
    animation-delay: 1.6s;
}

.platform-float--wikipedia {
    top: 10%;
    left: 26%;
    color: #000;
    animation-delay: 0.4s;
}

.platform-float--youtube {
    top: 12%;
    right: 5%;
    color: #ff0000;
    animation-delay: 1.2s;
}

.platform-float--linkedin {
    bottom: 20%;
    right: 8%;
    color: #0077b5;
    animation-delay: 2s;
}

.platform-float--pinterest {
    top: 38%;
    right: 15%;
    color: #e60023;
    animation-delay: 0.6s;
}

.platform-float--tiktok {
    top: 9%;
    right: 24%;
    color: #111827;
    animation-delay: 1.4s;
}


.platform-action {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 60px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 20px;
    font-weight: 700;
    font-size: 13px;
}

.platform-action i {
    font-size: 17px;
}

/* Icon-only circles */
.platform-action--like,
.platform-action--bell,
.platform-action--verified,
.platform-action--share,
.platform-action--bookmark {
    width: 54px;
    height: 54px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
}

.platform-action--like {
    top: 25%;
    left: 33%;
    color: #e11d48;
    animation-delay: 0.3s;
}

.platform-action--bell {
    top: 20%;
    right: 33%;
    color: #f59e0b;
    animation-delay: 1.1s;
}

.platform-action--verified {
    right: 21%;
    bottom: 12%;
    color: #0891b2;
    animation-delay: 1.9s;
}

.platform-action--share {
    top: 48%;
    left: 12%;
    color: #8b5cf6;
    animation-delay: 0.5s;
}

.platform-action--bookmark {
    color: #f97316;
    animation-delay: 2.3s;
}

.platform-action--rating {
    left: 10%;
    bottom: 9%;
    color: #f59e0b;
    animation-delay: 0.7s;
}

.platform-action--growth {
    right: 11%;
    top: 44%;
    color: #10b981;
    animation-delay: 1.5s;
}

.platform-action--message {
    left: 20%;
    bottom: 12%;
    color: #3b82f6;
    animation-delay: 0.9s;
}

.platform-action--call {
    right: 30%;
    bottom: 5%;
    color: #14b8a6;
    animation-delay: 2.2s;
}



@keyframes platformFloat {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-11px);
    }
}


@media (max-width: 1200px) {
    .platform-hero__title {
        font-size: 52px;
    }
}



@media (max-width: 992px) {
    .platform-hero {
        padding: 90px 20px 70px;
    }

    .platform-hero__title {
        font-size: 44px;
    }

    .platform-float,
    .platform-action {
        transform: scale(0.85);
    }
}


@media (max-width: 768px) {
    .platform-hero {
        padding: 80px 15px 65px;
    }

    .platform-hero__title {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .platform-hero__description {
        font-size: 15px;
    }

    /* Hide label pills */
    .platform-action--rating,
    .platform-action--growth,
    .platform-action--message,
    .platform-action--call {
        display: none;
    }

    /* Hide extra icon circles */
    .platform-action--share,
    .platform-action--bookmark {
        display: none;
    }

    /* Resize remaining action circles */
    .platform-action--like,
    .platform-action--bell,
    .platform-action--verified {
        width: 46px;
        height: 46px;
    }

    /* Reposition action circles */
    .platform-action--like {
        top: 30%;
        left: 28%;
    }

    .platform-action--bell {
        top: 18%;
        right: 30%;
    }

    .platform-action--verified {
        right: 26%;
        bottom: 10%;
    }

    /* Hide extra platform icons — keep 6 */
    .platform-float--google,
    .platform-float--wikipedia {
        display: none;
    }

    .platform-float {
        width: 56px;
        height: 56px;
    }

    .platform-float i {
        font-size: 22px;
    }

    .platform-float--instagram {
        top: 8%;
        left: 3%;
    }

    .platform-float--facebook {
        bottom: 8%;
        left: 3%;
    }

    .platform-float--youtube {
        top: 8%;
        right: 3%;
    }

    .platform-float--linkedin {
        bottom: 8%;
        right: 3%;
    }

    .platform-float--pinterest {
        top: 50%;
        right: 16%;
    }

    .platform-float--tiktok {
        top: 8%;
        right: 20%;
    }
}


@media (max-width: 576px) {
    .platform-hero__title {
        font-size: 27px;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }

    .platform-hero__description {
        font-size: 14px;
        line-height: 1.7;
    }

    .platform-hero__badge {
        font-size: 12px;
        padding: 9px 16px;
    }

    .platform-hero__breadcrumb {
        font-size: 12px;
        padding: 6px 14px;
    }

    /* Only 4 corner icons on very small screens */
    .platform-float--pinterest,
    .platform-float--tiktok {
        display: none;
    }

    .platform-float--linkedin {
        bottom: 6%;
        right: 3%;
    }
}



/* site enquiry form */

.sfc-outer {
    padding: 48px 16px 64px;
    background: #f0f2f5;
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.sfc-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 4px 40px rgba(0, 0, 0, 0.10);
    width: 100%;
    max-width: 1100px;
    padding: 44px 48px 40px;
    overflow: hidden;
}

/* ---- HEADER ---- */
.sfc-header {
    text-align: center;
    margin-bottom: 30px;
}

.sfc-main-title {
    font-size: 28px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
    letter-spacing: -0.3px;
}

.sfc-main-sub {
    font-size: 14px;
    color: #000;
    margin: 0;
}

/* ---- PROGRESS BAR ---- */
.sfc-progress-bar {
    height: 5px;
    background: #e5e7eb;
    border-radius: 99px;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.sfc-progress-fill {
    height: 100%;
    background: #e63946;
    border-radius: 99px;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.sfc-steps-row {
    display: flex;
    justify-content: space-between;
    margin: 12px 0 30px;
}

.sfc-step-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    transition: color 0.3s;
}

.sfc-step-label.sfc-step--active {
    color: #e63946;
}

.sfc-step-label.sfc-step--done {
    color: #e63946;
}

.sfc-step-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #9ca3af;
    flex-shrink: 0;
    transition: all 0.3s;
}

.sfc-step--active .sfc-step-dot,
.sfc-step--done .sfc-step-dot {
    border-color: #e63946;
    background: #e63946;
    color: #fff;
}

.sfc-step-text {
    display: inline;
    color: #000;
}

/* ---- SLIDE ANIMATION ---- */
.sfc-body {
    min-height: 380px;
}

.sfc-slide-in {
    animation: sfcIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.sfc-slide-out-left {
    animation: sfcOutLeft 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.sfc-slide-out-right {
    animation: sfcOutRight 0.24s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes sfcIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

@keyframes sfcOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

@keyframes sfcOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(30px);
    }
}

/* ---- STEP TITLES ---- */
.sfc-step-title {
    font-size: 20px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px;
}

.sfc-step-hint {
    font-size: 13px;
    color: #000;
    margin: 0 0 20px;
}

/* ---- ICON GRID — HORIZONTAL CARDS ---- */
.sfc-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

/* KEY CHANGE: flex-direction row = icon left, text right */
.sfc-icon-card {
    position: relative;
    display: flex;
    flex-direction: row;
    /* ← horizontal layout */
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.sfc-icon-card:hover:not(.sfc-icon-card--active) {
    border-color: #d1d5db;
    background: #f9fafb;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
}

.sfc-icon-card--active {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
}

.sfc-icon-card--svc-active {
    border-color: #e63946 !important;
    background: #fff5f5 !important;
}

.sfc-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sfc-icon-svg {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.sfc-icon-svg svg {
    width: 100%;
    height: 100%;
}

/* Text wrapper — stacks name + sub vertically on right of icon */
.sfc-icon-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    /* allows text truncation */
}

.sfc-icon-name {
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.sfc-icon-sub {
    font-size: 12px;
    font-weight: 600;
    color: #000;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sfc-count {
    font-size: 13px;
    color: #e63946;
    font-weight: 600;
    margin: 12px 0 0;
}

.sfc-err {
    font-size: 13px;
    color: #e63946;
    font-weight: 500;
    margin: 10px 0 0;
}

/* ---- DETAILS FORM ---- */
.sfc-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.sfc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sfc-field--full {
    grid-column: 1 / -1;
}

.sfc-label {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sfc-req {
    color: #e63946;
}

.sfc-input {
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.sfc-input:focus {
    border-color: #e63946;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.10);
}

.sfc-input--err {
    border-color: #e63946 !important;
}

.sfc-err-inline {
    font-size: 12px;
    color: #e63946;
    font-weight: 500;
}

.sfc-textarea {
    padding: 12px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #fff;
    resize: vertical;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

.sfc-textarea:focus {
    border-color: #e63946;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.10);
}

/* ---- NAV ---- */
.sfc-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
}

.sfc-btn-back {
    padding: 11px 26px;
    border: 1.5px solid #d1d5db;
    border-radius: 50px;
    background: transparent;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.sfc-btn-back:hover {
    border-color: #9ca3af;
    color: #111827;
    background: #f9fafb;
}

.sfc-btn-next,
.sfc-btn-submit {
    padding: 13px 36px;
    border: none;
    border-radius: 50px;
    background: #e63946;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(230, 57, 70, 0.30);
}

.sfc-btn-next:hover,
.sfc-btn-submit:hover {
    background: #c1121f;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(230, 57, 70, 0.38);
}

/* ---- SUCCESS ---- */
.sfc-success-card {
    text-align: center;
    padding: 60px 40px;
    max-width: 520px;
    margin: 0 auto;
}

.sfc-success-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #e63946;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    animation: sfcPop 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes sfcPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    60% {
        transform: scale(1.15);
    }

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

.sfc-success-title {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 10px;
}

.sfc-success-msg {
    font-size: 15px;
    color: #6b7280;
    margin: 0 0 20px;
    line-height: 1.7;
}

.sfc-success-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 28px;
}

.sfc-tag {
    padding: 5px 14px;
    border: 1.5px solid;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet */
@media (max-width: 768px) {
    .sfc-card {
        padding: 32px 28px 28px;
    }

    .sfc-main-title {
        font-size: 22px;
    }

    .sfc-icon-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sfc-icon-card {
        padding: 12px 10px;
    }

    .sfc-icon-svg {
        width: 28px;
        height: 28px;
    }

    .sfc-icon-name {
        font-size: 12px;
    }

    .sfc-icon-sub {
        font-size: 10px;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .sfc-outer {
        padding: 24px 12px 48px;
    }

    .sfc-card {
        padding: 24px 16px 20px;
        border-radius: 16px;
    }

    .sfc-main-title {
        font-size: 18px;
    }

    .sfc-main-sub {
        font-size: 13px;
    }

    .sfc-step-text {
        display: none;
    }

    .sfc-step-label {
        gap: 0;
    }

    .sfc-icon-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sfc-icon-card {
        padding: 10px 8px;
        gap: 8px;
    }

    .sfc-icon-svg {
        width: 24px;
        height: 24px;
    }

    .sfc-icon-name {
        font-size: 11px;
    }

    .sfc-icon-sub {
        display: none;
    }

    .sfc-details-grid {
        grid-template-columns: 1fr;
    }

    .sfc-step-title {
        font-size: 17px;
    }

    .sfc-btn-next,
    .sfc-btn-submit {
        padding: 12px 26px;
        font-size: 14px;
    }

    .sfc-btn-back {
        padding: 11px 18px;
        font-size: 13px;
    }
}


/* ===========================
   Extra Small Devices (320px)
   =========================== */

@media (max-width: 360px) {

    .sfc-card {
        padding: 16px 10px;
    }

    .sfc-main-title {
        font-size: 16px;
        line-height: 1.3;
    }

    .sfc-main-sub {
        font-size: 12px;
    }

    .sfc-step-title {
        font-size: 15px;
    }

    .sfc-step-hint {
        font-size: 12px;
    }

    .sfc-icon-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .sfc-icon-card {
        width: 100%;
        min-width: 0;
        padding: 10px;
        gap: 10px;
    }

    .sfc-icon-svg {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    .sfc-icon-text {
        min-width: 0;
        flex: 1;
    }

    .sfc-icon-name {
        font-size: 13px;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.3;
    }

    .sfc-icon-sub {
        display: none;
    }

    .sfc-details-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sfc-input,
    .sfc-textarea {
        font-size: 14px;
        padding: 10px 12px;
    }

    .sfc-nav {
        gap: 10px;
    }

    .sfc-btn-back,
    .sfc-btn-next,
    .sfc-btn-submit {
        padding: 10px 18px;
        font-size: 13px;
    }

}

/* site enquiry form */





/* ==========================================
   NF = NEW FOOTER  (unique prefix)
========================================== */

/* ── WRAPPER ── */
.nf-footer {
    background: #f8fafc;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #E24B4A, #378ADD) 1;
    font-family: "Inter", sans-serif;
}

/* ── MAIN GRID ── */
.nf-main {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0 38px;
}

/* ── LEFT ── */
.nf-left {
    flex: 0 0 32%;
    max-width: 32%;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.nf-logo {
    width: 300px;
    max-width: 100%;
    margin-bottom: 20px;
    display: block;
    transition: transform 0.3s ease;
}

.nf-logo:hover {
    transform: scale(1.02);
}

.nf-desc {
    color: #1e293b;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 12px;
    font-family: "Inter", sans-serif;
}

.nf-desc:last-child {
    margin-bottom: 0;
}

/* ── VERTICAL DIVIDER ── */
.nf-divider-v {
    width: 1px;
    background: #cbd5e1;
    flex-shrink: 0;
    align-self: stretch;
}

/* ── RIGHT ── */
.nf-right {
    flex: 1;
    padding-left: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* ── HORIZONTAL DIVIDER inside right ── */
.nf-divider-h {
    width: 100%;
    height: 1px;
    background: #cbd5e1;
    margin: 0;
}

/* full-width divider (social section) */
.nf-divider-full {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    height: 1px;
    background: #cbd5e1;
}

/* ── LINK ROW ── */
.nf-link-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    padding: 18px 0;
}

.nf-link-row a {
    color: #1e293b;
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0 16px;
    position: relative;
    transition: color 0.25s ease;
    white-space: nowrap;
    font-family: "Inter", sans-serif;
}

.nf-link-row a:first-child {
    padding-left: 0;
}

.nf-link-row a::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #E24B4A, #378ADD);
    transition: width 0.25s ease;
}

.nf-link-row a:first-child::after {
    left: 0;
}

.nf-link-row a:hover {
    color: #E24B4A;
}

.nf-link-row a:hover::after {
    width: calc(100% - 16px);
}

.nf-link-row a:first-child:hover::after {
    width: 100%;
}

/* ── PIPE SEPARATOR ── */
.nf-pipe {
    color: #94a3b8;
    font-size: 15px;
    user-select: none;
    flex-shrink: 0;
}

/* ── SOCIAL ROW ── */
.nf-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 28px 0;
}

.nf-social-row a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    color: #378ADD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nf-social-row a:hover {
    background: linear-gradient(135deg, #E24B4A, #378ADD);
    color: #fff;
    border-color: transparent;
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(55, 138, 221, 0.2);
}

/* ── BOTTOM BAR ── */
.nf-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0;
}

.nf-copy {
    color: #000;
    font-size: 13.5px;
    margin: 0;
}

.nf-bottom-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nf-bottom-links a {
    color: #475569;
    text-decoration: none;
    font-size: 13.5px;
    padding: 0 12px;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.nf-bottom-links a:first-child {
    padding-left: 0;
}

.nf-bottom-links a:hover {
    color: #378ADD;
}

.nf-pipe-light {
    color: #94a3b8;
    font-size: 13px;
    user-select: none;
}

/* ==========================================
   TABLET  (≤ 991px)
========================================== */
@media (max-width: 991px) {
    .nf-main {
        flex-direction: column;
        padding: 40px 0 32px;
        gap: 0;
    }

    .nf-left {
        flex: none;
        max-width: 100%;
        padding-right: 0;
        padding-bottom: 30px;
        text-align: left;
        justify-content: flex-start;
    }

    .nf-logo {
        width: 260px;
    }

    .nf-divider-v {
        display: none;
    }

    /* horizontal divider between left and right on tablet */
    .nf-left::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #cbd5e1;
        margin-top: 30px;
    }

    .nf-right {
        padding-left: 0;
        padding-top: 4px;
        width: 100%;
    }

    .nf-link-row {
        padding: 16px 0;
    }

    .nf-link-row a {
        font-size: 14px;
    }
}

/* ==========================================
   MOBILE  (≤ 576px)
========================================== */
@media (max-width: 576px) {
    .nf-main {
        width: 94%;
        padding: 32px 0 24px;
    }

    .nf-logo {
        width: 210px;
        margin-bottom: 16px;
    }

    .nf-desc {
        font-size: 13.5px;
    }

    .nf-link-row {
        padding: 14px 0;
        gap: 8px 0;
    }

    .nf-link-row a {
        font-size: 13px;
        padding: 0 10px;
    }

    .nf-pipe {
        font-size: 12px;
    }

    .nf-social-row {
        gap: 12px;
        padding: 22px 0;
    }

    .nf-social-row a {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }

    .nf-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 18px 0;
    }

    .nf-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .nf-divider-full {
        width: 94%;
    }
}










/* ==========================================
   XF = X FOOTER  (unique prefix — no conflicts)
   Layout: matches image 2
   - Left: logo + desc
   - Right: 3 link rows with dividers
   - Bottom: policy links LEFT | social icons RIGHT (brand colors on hover)
========================================== */

/* ── WRAPPER ── */
.xf-footer {
    background: #f8fafc;
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, #E24B4A, #378ADD) 1;
    font-family: "Inter", sans-serif;
}

/* ── MAIN GRID ── */
.xf-main {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 0 38px;
}

/* ── LEFT ── */
.xf-left {
    flex: 0 0 32%;
    max-width: 32%;
    padding-right: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.xf-logo {
    width: 300px;
    max-width: 100%;
    margin-bottom: 20px;
    display: block;
    transition: transform 0.3s ease;
}

.xf-logo:hover {
    transform: scale(1.02);
}

.xf-desc {
    color: #1e293b;
    font-size: 15px;
    line-height: 1.8;
    margin: 0 0 12px;
}

.xf-desc:last-child {
    margin-bottom: 0;
}

/* ── VERTICAL DIVIDER ── */
.xf-divider-v {
    width: 1px;
    background: #cbd5e1;
    flex-shrink: 0;
    align-self: stretch;
}

/* ── RIGHT ── */
.xf-right {
    flex: 1;
    padding-left: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

/* ── HORIZONTAL DIVIDER ── */
.xf-divider-h {
    width: 100%;
    height: 1px;
    background: #cbd5e1;
    margin: 0;
}

.xf-divider-full {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    height: 1px;
    background: #cbd5e1;
}

/* ── LINK ROW ── */
.xf-link-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
    padding: 18px 0;
}

/* ── LINK ITEM (tooltip wrapper) ── */
.xf-link-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* ── ICON TOOLTIP BUBBLE ── */
.xf-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    background: #E24B4A;
    color: #fff;
    font-size: 15px;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 4px 12px rgba(226, 75, 74, 0.35);
    z-index: 10;
}

/* arrow */
.xf-tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #E24B4A;
}

.xf-link-item:hover .xf-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── LINK ANCHOR ── */
.xf-link-item a {
    color: #1e293b;
    text-decoration: none;
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0 16px;
    position: relative;
    transition: color 0.25s ease;
    white-space: nowrap;
}

.xf-link-item--first a {
    padding-left: 0;
}

.xf-link-item a::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -3px;
    width: 0;
    height: 2px;
    background: #E24B4A;
    transition: width 0.25s ease;
}

.xf-link-item--first a::after {
    left: 0;
}

.xf-link-item:hover a {
    color: #E24B4A;
}

.xf-link-item:hover a::after {
    width: calc(100% - 16px);
}

.xf-link-item--first:hover a::after {
    width: 100%;
}

/* ── PIPE SEPARATOR ── */
.xf-pipe {
    color: #94a3b8;
    font-size: 15px;
    user-select: none;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════
   BOTTOM BAR  — matches image 2 exactly:
   [Terms | Privacy | Refund]  LEFT
   [copyright]                 LEFT below
   [social icons]              RIGHT
══════════════════════════════════════════ */
.xf-bottom-wrap {
    width: 92%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.xf-bottom-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xf-policy-links {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.xf-policy-links a {
    color: #1e293b;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px;
    transition: color 0.22s;
    white-space: nowrap;
}

.xf-policy-links a:first-child {
    padding-left: 0;
}

.xf-policy-links a:hover {
    color: #378ADD;
}

.xf-pipe-sm {
    color: #94a3b8;
    font-size: 13px;
    user-select: none;
}

.xf-copy {
    color: #000;
    font-size: 13.5px;
    margin: 0;
}

/* ── SOCIAL ICONS (brand colors on hover) ── */
.xf-social-icons {
    display: flex;
    align-items: center;
    gap: 10px;
}

.xf-social-icons a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    color: #64748b;
    transition: all 0.28s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ─ Instagram: purple-pink ─ */
.xf-social-icons a.xf-ig:hover {
    color: #fff;
    background: #E1306C;
    border-color: #E1306C;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(225, 48, 108, 0.28);
}

/* ─ Facebook: blue ─ */
.xf-social-icons a.xf-fb:hover {
    color: #fff;
    background: #1877F2;
    border-color: #1877F2;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(24, 119, 242, 0.28);
}

/* ─ WhatsApp: green ─ */
.xf-social-icons a.xf-wa:hover {
    color: #fff;
    background: #25D366;
    border-color: #25D366;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.28);
}

/* ─ LinkedIn: blue ─ */
.xf-social-icons a.xf-li:hover {
    color: #fff;
    background: #0A66C2;
    border-color: #0A66C2;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(10, 102, 194, 0.28);
}

/* ─ YouTube: red ─ */
.xf-social-icons a.xf-yt:hover {
    color: #fff;
    background: #FF0000;
    border-color: #FF0000;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 0, 0, 0.28);
}

/* ==========================================
   TABLET  (≤ 991px)
========================================== */
@media (max-width: 991px) {
    .xf-main {
        flex-direction: column;
        padding: 40px 0 32px;
    }

    .xf-left {
        flex: none;
        max-width: 100%;
        padding-right: 0;
        padding-bottom: 30px;
    }

    .xf-logo {
        width: 260px;
    }

    .xf-divider-v {
        display: none;
    }

    .xf-left::after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: #cbd5e1;
        margin-top: 30px;
    }

    .xf-right {
        padding-left: 0;
        padding-top: 4px;
        width: 100%;
    }

    .xf-link-row {
        padding: 16px 0;
    }

    .xf-link-item a {
        font-size: 14px;
    }
}

/* ==========================================
   MOBILE  (≤ 576px)
========================================== */
@media (max-width: 576px) {
    .xf-main {
        width: 94%;
        padding: 32px 0 24px;
    }

    .xf-logo {
        width: 210px;
        margin-bottom: 16px;
    }

    .xf-desc {
        font-size: 13.5px;
    }

    .xf-link-row {
        padding: 14px 0;
        gap: 8px 0;
    }

    .xf-link-item a {
        font-size: 13px;
        padding: 0 10px;
    }

    .xf-pipe {
        font-size: 12px;
    }

    .xf-bottom-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .xf-social-icons {
        gap: 8px;
    }

    .xf-social-icons a {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .xf-divider-full {
        width: 94%;
    }

    .xf-tip {
        display: none;
    }
}


.hw-section {
  background: #fff;
  padding: 80px 24px 96px;
  font-family: "Inter", system-ui, sans-serif;
}

.hw-wrap {
  max-width: 1140px;
  margin: 0 auto;
}

.hw-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4f8ef7;
  background: #e8f1fe;
  border: 1.5px solid #c6d9fb;
  padding: 6px 18px;
  border-radius: 100px;
  margin: 0 0 16px;
}

.hw-heading {
  text-align: center;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 700;
  color: #0d1117;
  margin: 0 0 12px;
  line-height: 1.15;
}

.hw-sub {
  text-align: center;
  font-size: 1rem;
  color: #000;
  max-width: 500px;
  margin: 0 auto 56px;
  line-height: 1.65;
}

/* ── Steps row ── */

.hw-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
}

/* Horizontal connecting line sits behind dots */
.hw-line {
  position: absolute;
  top: 28px;
  left: calc(10% + 28px);
  right: calc(10% + 28px);
  height: 2px;
  background: linear-gradient(to right, #c9d9f8, #b5cff6, #aacef5, #b3e8d8, #b3e8d8);
  z-index: 0;
}

.hw-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px;
  position: relative;
  z-index: 1;
}

/* ── Icon dot ── */

.hw-dot-wrap {
  margin-bottom: 20px;
}

.hw-dot {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #d0e2fc;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  position: relative;
  z-index: 1;
}

.hw-dot i {
  font-size: 22px;
  color: #4f8ef7;
  transition: color 0.25s ease;
}

.hw-step:hover .hw-dot {
  background: #4f8ef7;
  border-color: #4f8ef7;
  transform: translateY(-4px) scale(1.08);
}

.hw-step:hover .hw-dot i {
  color: #fff;
}

/* ── Card text ── */

.hw-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hw-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #000;
  margin-bottom: 6px;
}

.hw-title {
  font-size: 0.975rem;
  font-weight: 700;
  color: #0d1117;
  margin: 0 0 8px;
  line-height: 1.3;
}

.hw-desc {
  /* font-size: 0.845rem; */
  font-size: 15px;
  color: #000;
  line-height: 1.6;
  margin: 0;
}

/* ── Tablet (≤ 768px): 2 + 3 wrap ── */

@media (max-width: 768px) {
  .hw-steps {
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px 0;
  }
  .hw-line {
    display: none;
  }
  .hw-step {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 20px;
  }
  .hw-step:last-child {
    flex: 0 0 100%;
    max-width: 360px;
  }
}

/* ── Mobile (≤ 480px): single column vertical ── */

@media (max-width: 480px) {
  .hw-section {
    padding: 60px 20px 72px;
  }
  .hw-sub {
    margin-bottom: 40px;
  }
  .hw-steps {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .hw-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    padding: 0 0 32px 0;
    max-width: 100%;
    position: relative;
  }
  .hw-step:last-child {
    max-width: 100%;
    padding-bottom: 0;
  }
  /* Vertical line for mobile */
  .hw-step::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: 0;
    width: 2px;
    background: #d0e2fc;
    z-index: 0;
  }
  .hw-step:last-child::before {
    display: none;
  }
  .hw-dot-wrap {
    margin-bottom: 0;
    margin-right: 16px;
    flex-shrink: 0;
  }
  .hw-card {
    align-items: flex-start;
    padding-top: 6px;
  }
}

/* steps */




/* solution */
.sol-section {
  background: #f2f6f8;
  padding: 70px 24px 100px;
  font-family: "Inter", system-ui, sans-serif;
}

.sol-wrap {
  max-width: 1160px;
  margin: 0 auto;
}

/* ── Header ── */

.sol-header {
  text-align: center;
  margin-bottom: 52px;
}

.sol-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4f8ef7;
  background: #e8f1fe;
  border: 1.5px solid #c6d9fb;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.sol-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #0d1117;
  margin: 0 0 16px;
  line-height: 1.2;
}

.sol-desc {
  font-size: 1rem;
  color: #000;
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Grid ── */

.sol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* ── Card ── */

.sol-card {
  background: #ffffff;
  border: 1px solid #e8eef6;
  border-radius: 18px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  cursor: default;
}

.sol-card:hover {
  transform: translateY(-4px);
  border-color: #c6d9fb;
  box-shadow: 0 8px 32px rgba(79, 142, 247, 0.10);
}

.sol-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* ── Icon ── */

.sol-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eef4fe;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.22s ease;
}

.sol-icon-wrap i {
  font-size: 22px;
  color: #4f8ef7;
  transition: color 0.22s ease;
}

.sol-card:hover .sol-icon-wrap {
  background: #4f8ef7;
}

.sol-card:hover .sol-icon-wrap i {
  color: #ffffff;
}

/* ── Arrow ── */

.sol-arrow {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #e2eaf5;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.22s ease, border-color 0.22s ease;
}

.sol-arrow i {
  font-size: 15px;
  color: #a0aec0;
  transition: color 0.22s ease;
}

.sol-card:hover .sol-arrow {
  background: #4f8ef7;
  border-color: #4f8ef7;
}

.sol-card:hover .sol-arrow i {
  color: #ffffff;
}

/* ── Text ── */

.sol-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0d1117;
  margin: 0;
  line-height: 1.3;
}

.sol-card-desc {
  /* font-size: 0.86rem; */
  font-size: 15px;
  font-weight: 400;
  color: #000;
  line-height: 1.65;
  margin: 0;
}

/* ── Tablet (≤ 900px): 2 columns ── */

@media (max-width: 900px) {
  .sol-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* ── Mobile (≤ 480px): 1 column ── */

@media (max-width: 480px) {
  .sol-section {
    padding: 60px 16px 72px;
  }
  .sol-header {
    margin-bottom: 36px;
  }
  .sol-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sol-card {
    padding: 22px 20px 22px;
  }
}
/* solution */


/* pltofroms */
.plat-section {
  background: #f4f6f9;
  padding: 35px 24px 100px;
  font-family: "Inter", system-ui, sans-serif;
}

.plat-wrap {
  max-width: 1160px;
  margin: 0 auto;
}

/* ── Header ── */

.plat-header {
  text-align: center;
  margin-bottom: 52px;
}

.plat-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4f8ef7;
  background: #e8f1fe;
  border: 1.5px solid #c6d9fb;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 20px;
}

.plat-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 700;
  color: #0d1117;
  margin: 0 0 16px;
  line-height: 1.22;
}

.plat-desc {
  font-size: 1rem;
  color: #000;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Grid ── */

.plat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

/* ── Card ── */

.plat-card {
  background: #ffffff;
  border: 1px solid #e8eef6;
  border-radius: 18px;
  padding: 32px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  cursor: default;
}

.plat-card:hover {
  transform: translateY(-4px);
  border-color: #c6d9fb;
  box-shadow: 0 8px 28px rgba(79, 142, 247, 0.10);
}

/* ── Icon ── */

.plat-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s ease;
}

.plat-icon-wrap i {
  font-size: 32px;
  line-height: 1;
}

.plat-card:hover .plat-icon-wrap {
  transform: scale(1.07);
}

/* ── Name ── */

.plat-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0d1117;
  text-align: center;
  line-height: 1.3;
}

/* ── Tablet (≤ 900px): 3 columns ── */

@media (max-width: 900px) {
  .plat-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

/* ── Mobile (≤ 540px): 2 columns ── */

@media (max-width: 540px) {
  .plat-section {
    padding: 60px 16px 72px;
  }
  .plat-header {
    margin-bottom: 36px;
  }
  .plat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .plat-card {
    padding: 24px 12px 20px;
    gap: 12px;
  }
  .plat-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 14px;
  }
  .plat-icon-wrap i {
    font-size: 28px;
  }
}

/* ── Small mobile (≤ 360px): 1 column ── */

@media (max-width: 360px) {
  .plat-grid {
    grid-template-columns: 1fr;
  }
}
/* pltofroms */




.blog-section {
  background: #f9fafb;
  padding: 80px 0 96px;
  font-family: "Inter", sans-serif;
}

.blog-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-header {
  margin-bottom: 52px;
  text-align: center;
}

.blog-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3b82f6;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 100px;
  padding: 7px 20px;
  margin-bottom: 18px;
}

.blog-heading {
  font-size: 38px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.2;
}

.blog-sub {
  font-size: 15px;
  color: #0f172a;
  margin: 0;
  line-height: 1.6;
}

.blog-heading {
  font-size: 36px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.blog-sub {
  font-size: 16px;
  color: #000;
  margin: 0;
}

/* Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Card */
.blog-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e8edf2;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}

/* Image */
.blog-img-box {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.blog-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

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

/* Body */
.blog-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-date {
  font-size: 12px;
  font-weight: 500;
  color: #000;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.blog-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.blog-desc {
  font-size: 14px;
  color: #000;
  line-height: 1.65;
  margin: 0 0 auto;
  padding-bottom: 22px;
}

/* Button */
.blog-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: gap 0.2s ease;
  align-self: flex-start;
}

.blog-btn:hover {
  gap: 10px;
}

.blog-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.blog-btn:hover .blog-arrow {
  transform: translateX(3px);
}

/* Responsive */
@media (max-width: 960px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 600px) {
  .blog-section {
    padding: 56px 0 72px;
  }

  .blog-heading {
    font-size: 28px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .blog-wrap {
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-card,
  .blog-img,
  .blog-btn,
  .blog-arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* blog end */


/* whitepapers */
.wp-section {
  background: #f9fafb;
  padding: 65px 0 96px;
  font-family: "Poppins", sans-serif;
}

.wp-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.wp-header {
  margin-bottom: 52px;
  text-align: center;
}

.wp-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3b82f6;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 100px;
  padding: 7px 20px;
  margin-bottom: 18px;
}

.wp-heading {
  font-size: 38px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.2;
}

.wp-sub {
  font-size: 15px;
  color: #0f172a;
  margin: 0;
  line-height: 1.6;
}

/* Grid */
.wp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Card */
.wp-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e8edf2;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.1);
}

/* Image */
.wp-img-box {
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.wp-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.wp-card:hover .wp-img {
  transform: scale(1.05);
}

/* Body */
.wp-card-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wp-date {
  font-size: 12px;
  font-weight: 500;
  color: #0f172a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.wp-title {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.wp-desc {
  font-size: 14px;
  color: #0f172a;
  line-height: 1.65;
  margin: 0 0 auto;
  padding-bottom: 22px;
}

/* Download Button */
.wp-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  transition: background 0.2s ease, transform 0.2s ease;
  align-self: flex-start;
}

.wp-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 960px) {
  .wp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 600px) {
  .wp-section {
    padding: 56px 0 72px;
  }

  .wp-heading {
    font-size: 28px;
  }

  .wp-sub {
    font-size: 14px;
  }

  .wp-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .wp-wrap {
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wp-card,
  .wp-img,
  .wp-btn {
    transition: none !important;
    transform: none !important;
  }
}
/* whitepapers */



/* whychooe us  */
.adv-section {
  background: #ffffff;
  padding: 80px 0 96px;
  font-family: "Poppins", sans-serif;
}

.adv-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.adv-header {
  text-align: center;
  margin-bottom: 56px;
}

.adv-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #3b82f6;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 100px;
  padding: 7px 20px;
  margin-bottom: 18px;
}

.adv-heading {
  font-size: 38px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  line-height: 1.2;
}
.adv-main-heading{
    margin-bottom: 26px;
    line-height: 1.25;
}
.adv-sub {
  font-size: 16px;
  color: #0f172a;
  margin: 0;
  line-height: 1.6;
}

/* Grid */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Card */
.adv-card {
  background: #f9fafb;
  border: 1px solid #e8edf2;
  border-radius: 16px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  cursor: default;
}

.adv-card:hover {
  background: #ffffff;
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.1);
  border-color: #bfdbfe;
}

/* Icon */
.adv-icon-box {
  width: 58px;
  height: 58px;
  background: #eff6ff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.adv-card:hover .adv-icon-box {
  background: #2563eb;
}

.adv-icon-box i {
  font-size: 26px;
  color: #2563eb;
  transition: color 0.25s ease;
}

.adv-card:hover .adv-icon-box i {
  color: #ffffff;
}

/* Text */
.adv-title {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}

.adv-desc {
  font-size: 15px;
  font-weight: 500;
  color: #0f172a;
  line-height: 1.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .adv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .adv-heading {
    font-size: 30px;
  }
}

@media (max-width: 600px) {
  .adv-section {
    padding: 45px 0 72px;
  }

  .adv-heading {
    font-size: 26px;
  }

  .adv-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .adv-wrap {
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .adv-card,
  .adv-icon-box,
  .adv-icon-box i {
    transition: none !important;
    transform: none !important;
  }
}
/* whychooe us  */



.splitTextStyleOne {
    font-size: 35px !important;
}

/* Tablet */
@media (max-width: 768px) {
    .splitTextStyleOne {
        font-size: 28px !important;
        line-height: 1.3;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .splitTextStyleOne {
        font-size: 24px !important;
        line-height: 1.3;
    }
}

/* Small Mobile (320px) */
@media (max-width: 375px) {
    .splitTextStyleOne {
        font-size: 27px !important;
        line-height: 1.3;
    }
}



.text-main-600{
    color: #0077b5;
    
}
.adv-highlight{
    color: #0077b5;
    margin-left: 10px;
    display: inline-block;
}



.clientPageWrapper {
  width: 100%;
}



.clientBreadcrumbSection {
  background: #eef0fa;
  padding: 70px 20px;
}

.clientBreadcrumbContainer {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

.clientBreadcrumbContainer h1 {
  font-size: 52px;
  font-weight: 700;
  color: #16254c;
  margin-bottom: 25px;
}

.clientBreadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 600;
}

.clientBreadcrumb span:first-child {
  color: #ef3d2f;
}

.clientArrow {
  color: #777;
}

.clientActive {
  color: #0891b2;
}

/* =========================
Clients
========================= */

.ourClientsSection {
  padding: 90px 20px;
  background: #fff;
}

.ourClientsContainer {
  max-width: 1250px;
  margin: auto;
}

.ourClientsHeading {
  text-align: center;
  margin-bottom: 60px;
}

.ourClientsHeading span {
  display: inline-block;
  color: #ef3d2f;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ourClientsHeading h2 {
  font-size: 42px;
  color: #16254c;
  margin-bottom: 18px;
}

.ourClientsHeading p {
  max-width: 700px;
  margin: auto;
  color: #666;
  line-height: 1.8;
  font-size: 16px;
}

.clientsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.clientCard {
  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 40px 25px;
  text-align: center;
  transition: 0.35s;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.clientCard:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.1);
}

.clientLogo {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ef3d2f, #ff7b54);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto auto 25px;
}

.clientCard h3 {
  font-size: 22px;
  color: #16254c;
  margin-bottom: 10px;
}

.clientCard p {
  color: #777;
  font-size: 15px;
}

/* =========================
Tablet
========================= */

@media (max-width: 991px) {
  .clientBreadcrumbSection {
    padding: 90px 20px;
  }

  .clientBreadcrumbContainer h1 {
    font-size: 40px;
  }

  .ourClientsHeading h2 {
    font-size: 34px;
  }

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

/* =========================
Mobile
========================= */

@media (max-width: 576px) {
  .clientBreadcrumbSection {
    padding: 70px 15px;
  }

  .clientBreadcrumbContainer h1 {
    font-size: 30px;
    margin-bottom: 18px;
  }

  .clientBreadcrumb {
    font-size: 15px;
    gap: 10px;
  }

  .ourClientsSection {
    padding: 60px 15px;
  }

  .ourClientsHeading {
    margin-bottom: 40px;
  }

  .ourClientsHeading h2 {
    font-size: 28px;
  }

  .ourClientsHeading p {
    font-size: 15px;
  }

  .clientsGrid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .clientCard {
    padding: 30px 20px;
  }

  .clientLogo {
    width: 75px;
    height: 75px;
    font-size: 28px;
  }

  .clientCard h3 {
    font-size: 20px;
  }
}





.customerClientsSection{
    padding:60px 20px;
    background:#f8fafc;
}

.customerClientsContainer{
    max-width:1300px;
    margin:auto;
}

.customerClientsHeading{
    text-align:center;
    font-size:42px;
    font-weight:700;
    color:#0891b2;
    margin-bottom:55px;
}

.customerClientsHeading span{
    color:#0891b2;
}

.customerClientsGrid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
}

.customerClientCard{
    background:#fff;
    border-radius:14px;
    padding:18px;
    height:120px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e8e8e8;
    transition:.35s;
    box-shadow:0 4px 12px rgba(0,0,0,.05);
}

.customerClientCard:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.customerClientCard img{
    max-width:100%;
    max-height:70px;
    object-fit:contain;
    transition:.3s;
}

.customerClientCard:hover img{
    transform:scale(1.05);
}

/* Laptop */

@media(max-width:1200px){

.customerClientsGrid{
grid-template-columns:repeat(4,1fr);
}

}

/* Tablet */

@media(max-width:991px){

.customerClientsHeading{
font-size:34px;
}

.customerClientsGrid{
grid-template-columns:repeat(3,1fr);
}

}

/* Mobile */

@media(max-width:768px){

.customerClientsSection{
padding:70px 15px;
}

.customerClientsHeading{
font-size:28px;
margin-bottom:35px;
}

.customerClientsGrid{
grid-template-columns:repeat(2,1fr);
gap:15px;
}

.customerClientCard{
height:95px;
padding:12px;
}

.customerClientCard img{
max-height:50px;
}

}

/* Small Mobile */

@media(max-width:480px){

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

.customerClientCard{
height:85px;
}

.customerClientCard img{
max-height:42px;
}

}

.customerClientsHeader{
    text-align:center;
    max-width:850px;
    margin:0 auto 55px;
}

.customerClientsBadge{
    display:inline-block;
    background:#e6f4fb;
    color:#0891b2;
    padding:12px 28px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:22px;
}

.customerClientsTitle{
    font-size:48px;
    font-weight:700;
    color:#000;
    line-height:1.2;
    margin-bottom:18px;
}

.customerClientsDesc{
    font-size:18px;
    color:#000;
    line-height:1.8;
    max-width:760px;
    margin:0 auto;
}

/* Tablet */

@media(max-width:991px){

.customerClientsTitle{
    font-size:38px;
}

.customerClientsDesc{
    font-size:17px;
}

}

/* Mobile */

@media(max-width:768px){

.customerClientsHeader{
    margin-bottom:40px;
}

.customerClientsBadge{
    padding:10px 22px;
    font-size:12px;
    letter-spacing:3px;
}

.customerClientsTitle{
    font-size:28px;
}

.customerClientsDesc{
    font-size:15px;
    line-height:1.7;
}

}





.ocmt-section {
  width: 100%;
  background: #ffffff;
  padding: 40px 24px 120px;
  box-sizing: border-box;
  position: relative;
}

/* .ocmt-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #d0e4f7, transparent);
} */

.ocmt-wrap {
  max-width: 1160px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.ocmt-header {
  text-align: center;
  margin-bottom: 80px;
}

.ocmt-badge {
  display: inline-block;
  background: #eaf2fd;
  color: #1a6fd4;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  border: 1px solid #c6dcf7;
  margin-bottom: 22px;
  font-family: "Inter", system-ui, sans-serif;
}

.ocmt-title {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: clamp(36px, 5.5vw, 58px);
  font-weight: 800;
  color: #08152b;
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}

.ocmt-title-accent {
  color: #1a6fd4;
}

.ocmt-subtitle {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.82;
  color: #566579;
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- Grid ---------- */
.ocmt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border: 1px solid #e6edf6;
  border-radius: 16px;
  overflow: hidden;
}

/* ---------- Item ---------- */
.ocmt-item {
  position: relative;
  border-right: 1px solid #e6edf6;
  border-bottom: 1px solid #e6edf6;
  transition: background 0.28s ease;
}

/* Remove right border on even items (right column) */
.ocmt-item:nth-child(2n) {
  border-right: none;
}

/* Remove bottom border on last two items */
.ocmt-item:nth-last-child(-n+2) {
  border-bottom: none;
}

.ocmt-item:hover {
  background: #f7faff;
}

.ocmt-item-inner {
  padding: 48px 44px 48px 52px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ---------- Left accent bar ---------- */
.ocmt-accent-bar {
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  width: 3px;
  background: #1a6fd4;
  border-radius: 0 3px 3px 0;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.ocmt-item:hover .ocmt-accent-bar {
  transform: scaleY(1);
}

/* ---------- Icon ---------- */
.ocmt-icon-shell {
  width: 52px;
  height: 52px;
  background: #eaf2fd;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  flex-shrink: 0;
  transition: background 0.28s ease, transform 0.28s ease;
}

.ocmt-item:hover .ocmt-icon-shell {
  background: #1a6fd4;
  transform: translateY(-3px);
}

.ocmt-icon {
  font-size: 24px;
  color: #1a6fd4;
  transition: color 0.28s ease;
  line-height: 1;
}

.ocmt-item:hover .ocmt-icon {
  color: #ffffff;
}

/* ---------- Heading ---------- */
.ocmt-item-heading {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #08152b;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  line-height: 1.28;
  transition: color 0.22s ease;
}

.ocmt-item:hover .ocmt-item-heading {
  color: #1a6fd4;
}

/* ---------- Description ---------- */
.ocmt-item-desc {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.78;
  color: #000;
  margin: 0 0 26px;
  flex: 1;
}

/* ---------- Bottom divider ---------- */
.ocmt-divider {
  height: 1.5px;
  width: 36px;
  background: #1a6fd4;
  border-radius: 4px;
  opacity: 0.28;
  transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
}

.ocmt-item:hover .ocmt-divider {
  width: 72px;
  opacity: 0.7;
}

/* =============================================
   Responsive
   ============================================= */

/* Tablet — single column */
@media (max-width: 860px) {
  .ocmt-section {
    padding: 72px 20px 88px;
  }

  .ocmt-header {
    margin-bottom: 60px;
  }

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

  .ocmt-item {
    border-right: none;
    border-bottom: 1px solid #e6edf6;
  }

  /* Remove bottom border from last item */
  .ocmt-item:last-child {
    border-bottom: none;
  }

  /* Re-enable bottom border on second-to-last */
  .ocmt-item:nth-last-child(-n+2) {
    border-bottom: 1px solid #e6edf6;
  }

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

  .ocmt-item-inner {
    padding: 36px 32px 36px 44px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .ocmt-section {
    padding: 56px 16px 72px;
  }

  .ocmt-header {
    margin-bottom: 44px;
  }

  .ocmt-item-inner {
    padding: 28px 24px 28px 36px;
  }

  .ocmt-accent-bar {
    top: 28px;
    bottom: 28px;
  }

  .ocmt-icon-shell {
    width: 46px;
    height: 46px;
    border-radius: 10px;
    margin-bottom: 18px;
  }

  .ocmt-icon {
    font-size: 21px;
  }

  .ocmt-item-heading {
    font-size: 17px;
  }

  .ocmt-item-desc {
    font-size: 14px;
  }

  .ocmt-subtitle {
    font-size: 15px;
  }
}
/* commitment */




/* ---------- Section ---------- */
.crf-section {
  width: 100%;
  background: #f5f8ff;
  padding: 100px 24px 120px;
  box-sizing: border-box;
  position: relative;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

.crf-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #c8daf7, transparent);
}

.crf-wrap {
  max-width: 860px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.crf-header {
  text-align: center;
  margin-bottom: 56px;
}

.crf-badge {
  display: inline-block;
  background: #eaf2fd;
  color: #1a6fd4;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  border: 1px solid #c4d9f8;
  margin-bottom: 20px;
}

.crf-title {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
  color: #08152b;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
}

.crf-title-accent {
  color: #1a6fd4;
}

.crf-subtitle {
  font-size: 16px;
  line-height: 1.82;
  color: #566579;
  max-width: 580px;
  margin: 0 auto;
}

/* ---------- Card ---------- */
.crf-card {
  background: #ffffff;
  border: 1px solid #e2ecf8;
  border-radius: 20px;
  padding: 52px 52px 48px;
  box-shadow:
    0 4px 28px rgba(26, 111, 212, 0.07),
    0 1px 4px rgba(0, 0, 0, 0.04);
}

/* ---------- Form ---------- */
.crf-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.crf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.crf-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.crf-field-full {
  width: 100%;
}

/* ---------- Label ---------- */
.crf-label {
  font-size: 13px;
  font-weight: 600;
  color: #1c2d45;
  letter-spacing: 0.01em;
}

.crf-req {
  color: #1a6fd4;
  margin-left: 2px;
}

/* ---------- Input wrapper ---------- */
.crf-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.crf-input-icon {
  position: absolute;
  left: 14px;
  font-size: 17px;
  color: #9eb4cc;
  pointer-events: none;
  transition: color 0.22s;
  line-height: 1;
}

.crf-input-wrap:focus-within .crf-input-icon {
  color: #1a6fd4;
}

/* ---------- Input / Select ---------- */
.crf-input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 44px;
  font-size: 14.5px;
  font-family: inherit;
  color: #1c2d45;
  background: #f7faff;
  border: 1.5px solid #dce8f7;
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
  appearance: none;
  -webkit-appearance: none;
}

.crf-input::placeholder {
  color: #aabccc;
}

.crf-input:focus {
  border-color: #1a6fd4;
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(26, 111, 212, 0.10);
}

/* ---------- Select arrow ---------- */
.crf-select-wrap {
  position: relative;
}

.crf-select-arrow {
  position: absolute;
  right: 14px;
  font-size: 18px;
  color: #9eb4cc;
  pointer-events: none;
  line-height: 1;
  transition: color 0.22s;
}

.crf-select-wrap:focus-within .crf-select-arrow {
  color: #1a6fd4;
}

.crf-select {
  cursor: pointer;
}

/* ---------- Textarea ---------- */
.crf-textarea {
  height: auto;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.7;
  min-height: 120px;
}

/* ---------- Upload zone ---------- */
.crf-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 24px;
  background: #f7faff;
  border: 1.5px dashed #bad2f0;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.24s, background 0.24s;
  text-align: center;
}

.crf-upload:hover {
  border-color: #1a6fd4;
  background: #eef5fd;
}

.crf-upload-input {
  display: none;
}

.crf-upload-icon {
  font-size: 32px;
  color: #1a6fd4;
  line-height: 1;
  margin-bottom: 4px;
}

.crf-upload-text {
  font-size: 14px;
  font-weight: 600;
  color: #1c2d45;
}

.crf-upload-hint {
  font-size: 12px;
  color: #8ba3bb;
}

/* ---------- Form footer ---------- */
.crf-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.crf-privacy {
  font-size: 12.5px;
  color: #8ba3bb;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.crf-privacy i {
  font-size: 14px;
  color: #1a6fd4;
}

/* ---------- Submit button ---------- */
.crf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1a6fd4;
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  padding: 14px 32px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.24s, transform 0.22s, box-shadow 0.24s;
  box-shadow: 0 4px 18px rgba(26, 111, 212, 0.28);
  white-space: nowrap;
}

.crf-btn:hover {
  background: #155bb5;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(26, 111, 212, 0.36);
}

.crf-btn:active {
  transform: translateY(0);
}

/* ---------- Success state ---------- */
.crf-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 0 8px;
  gap: 16px;
}

.crf-success-icon {
  width: 72px;
  height: 72px;
  background: #eaf2fd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crf-success-icon i {
  font-size: 36px;
  color: #1a6fd4;
  line-height: 1;
}

.crf-success-title {
  font-size: 24px;
  font-weight: 800;
  color: #08152b;
  margin: 0;
  letter-spacing: -0.02em;
}

.crf-success-desc {
  font-size: 15px;
  line-height: 1.78;
  color: #566579;
  max-width: 440px;
  margin: 0 0 8px;
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 720px) {
  .crf-section {
    padding: 72px 20px 88px;
  }

  .crf-card {
    padding: 36px 28px 36px;
  }

  .crf-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .crf-form-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .crf-btn {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .crf-section {
    padding: 56px 16px 72px;
  }

  .crf-card {
    padding: 28px 20px 28px;
    border-radius: 16px;
  }

  .crf-header {
    margin-bottom: 40px;
  }

  .crf-subtitle {
    font-size: 14.5px;
  }
}




    /* blogdetails */
    /* blogdetails */

    /* ══════════════════════════════════════════════════════
    ABD ARTICLE CONTENT — Tiptap rendered HTML styles
    ADD THIS BLOCK to your existing CSS file
    ══════════════════════════════════════════════════════ */

    /* ── Loading State ── */
    .abd-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 16px;
    }

    .abd-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #E2E8F0;
    border-top-color: #2563EB;
    border-radius: 50%;
    animation: abd-spin 0.7s linear infinite;
    }

    @keyframes abd-spin {
    to { transform: rotate(360deg); }
    }

    .abd-loading-text {
    font-size: 15px;
    color: #64748B;
    font-weight: 500;
    }

    /* ── Article Content Wrapper ── */
    .abd-article-content {
    font-size: 16px;
    color: #0F172A;
    line-height: 1.8;
    margin-bottom: 64px;
    }

    /* ── Headings ── */
    .abd-article-content h1 {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 48px 0 18px;
    }

    .abd-article-content h2 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 48px 0 14px;
    scroll-margin-top: 210px;
    }

    .abd-article-content h2::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    border-radius: 2px;
    margin-top: 10px;
    }
    .image-row {
    display: flex;
    gap: 20px;
    margin: 24px 0;
    }

    .image-row img {
    width: calc(50% - 10px);
    border-radius: 12px;
    }

    @media (max-width: 768px) {
    .image-row {
        flex-direction: column;
    }

    .image-row img {
        width: 100%;
    }
    }
    .abd-article-content h3 {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 36px 0 12px;
    }

    .abd-article-content h4,
    .abd-article-content h5,
    .abd-article-content h6 {
    font-size: 16px;
    font-weight: 700;
    color: #0F172A;
    margin: 28px 0 10px;
    }

    /* ── Paragraphs ── */
    .abd-article-content p {
    font-size: 16px;
    color: #0F172A;
    line-height: 1.8;
    margin-bottom: 20px;
    }

    .abd-article-content p:last-child {
    margin-bottom: 0;
    }

    /* ── Images ── */
    .abd-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow:
        0 8px 32px rgba(37, 99, 235, 0.09),
        0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #E2E8F0;
    display: block;
    margin-top: 28px;
    margin-bottom: 28px;
    }


/* ── Side-by-side inline images ───────────────────────────── */

.abd-article-content p:has(img[data-type="inline-image"]) {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 28px 0;
    align-items: flex-start;
}

.abd-inline-image-link {
    flex: 1 1 calc(50% - 8px);
    max-width: calc(50% - 8px);
    display: block;
    text-decoration: none;
    line-height: 0;
}

.abd-inline-image-link img[data-type="inline-image"] {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    margin: 0;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(37,99,235,.09),
                0 2px 8px rgba(0,0,0,.06);
    border: 1px solid #E2E8F0;
}

/* Mobile */

@media (max-width:1024px){

    .abd-article-content p:has(img[data-type="inline-image"]){
        flex-direction:column;
    }

    .abd-inline-image-link{
        max-width:100%;
        width:100%;
    }

    .abd-inline-image-link img[data-type="inline-image"]{
        height:220px;
    }

}

/* Desktop */

@media (min-width:1025px){

    .abd-article-content p:has(img[data-type="inline-image"]){
        flex-direction:row;
    }

}
    /* Editor alignment classes */
    .abd-article-content img[style*="margin-left: auto"][style*="margin-right: auto"],
    .abd-article-content .image-center img,
    .abd-article-content p[style*="text-align: center"] img {
    margin-left: auto;
    margin-right: auto;
    }

    .abd-article-content .image-left img,
    .abd-article-content p[style*="text-align: left"] img {
    margin-left: 0;
    margin-right: auto;
    }

    .abd-article-content .image-right img,
    .abd-article-content p[style*="text-align: right"] img {
    margin-left: auto;
    margin-right: 0;
    }

    /* Tiptap wraps aligned images in a figure or a p with text-align */
    .abd-article-content p:has(> img:only-child) {
    margin: 28px 0;
    line-height: 0;
    }

    /* ── Unordered Lists ── */
    .abd-article-content ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 18px 0 20px;
    padding: 0;
    }

    .abd-article-content ul li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #0F172A;
    line-height: 1.7;
    }

    .abd-article-content ul li::before {
    content: '';
    width: 8px;
    height: 8px;
    min-width: 8px;
    background: #2563EB;
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px #EFF6FF, 0 0 0 5px #BFDBFE;
    }

    /* ── Ordered Lists ── */
    .abd-article-content ol {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0 20px;
    padding: 0;
    counter-reset: abd-counter;
    }

    .abd-article-content ol li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    color: #0F172A;
    line-height: 1.7;
    counter-increment: abd-counter;
    }

    .abd-article-content ol li::before {
    content: counter(abd-counter);
    min-width: 26px;
    height: 26px;
    background: #2563EB;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    margin-top: 1px;
    }

    /* Nested lists */
    .abd-article-content ul ul,
    .abd-article-content ol ol,
    .abd-article-content ul ol,
    .abd-article-content ol ul {
    margin: 8px 0 0 16px;
    }

    /* ── Blockquotes ── */
    .abd-article-content blockquote {
    background: linear-gradient(135deg, #EFF6FF, #F0F9FF);
    border: 1px solid #BFDBFE;
    border-left: 4px solid #2563EB;
    border-radius: 0 12px 12px 0;
    padding: 22px 24px;
    margin: 28px 0;
    }

    .abd-article-content blockquote p {
    font-size: 15px;
    color: #0F172A;
    line-height: 1.75;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 0;
    }

    /* ── Links ── */
    .abd-article-content a {
    color: #2563EB;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #BFDBFE;
    text-underline-offset: 3px;
    transition: color 0.18s ease, text-decoration-color 0.18s ease;
    }

    .abd-article-content a:hover {
    color: #1d4ed8;
    text-decoration-color: #2563EB;
    }

    /* ── Tables ── */
    .abd-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 14.5px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    }

    .abd-article-content th {
    background: #F1F5F9;
    color: #0F172A;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 13px 16px;
    text-align: left;
    border-bottom: 2px solid #E2E8F0;
    }

    .abd-article-content td {
    padding: 12px 16px;
    color: #0F172A;
    border-bottom: 1px solid #F1F5F9;
    vertical-align: top;
    line-height: 1.6;
    }

    .abd-article-content tr:last-child td {
    border-bottom: none;
    }

    .abd-article-content tr:hover td {
    background: #F8FAFC;
    }

    /* ── Code ── */
    .abd-article-content code {
    background: #F1F5F9;
    color: #2563EB;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 14px;
    padding: 2px 7px;
    border-radius: 5px;
    border: 1px solid #E2E8F0;
    }

    .abd-article-content pre {
    background: #0F172A;
    color: #E2E8F0;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 14px;
    padding: 22px 24px;
    border-radius: 12px;
    overflow-x: auto;
    margin: 28px 0;
    line-height: 1.7;
    }

    .abd-article-content pre code {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font-size: inherit;
    }

    /* ── Strong / Em ── */
    .abd-article-content strong {
    font-weight: 700;
    color: #0F172A;
    }

    .abd-article-content em {
    font-style: italic;
    color: #334155;
    }

    /* ── Horizontal Rule ── */
    .abd-article-content hr {
    border: none;
    border-top: 1px solid #F1F5F9;
    margin: 40px 0;
    }

    /* ── Text alignment utilities (Tiptap outputs these) ── */
    .abd-article-content [style*="text-align: center"] {
    text-align: center;
    }
    .abd-article-content [style*="text-align: right"] {
    text-align: right;
    }
    .abd-article-content [style*="text-align: justify"] {
    text-align: justify;
    }

    /* ── Responsive ── */
    @media (max-width: 600px) {
    .abd-article-content h2 {
        scroll-margin-top: 80px;
    }

    .abd-article-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .abd-article-content blockquote {
        padding: 16px 18px;
    }

    .abd-article-content img {
        border-radius: 8px;
    }
    }

    /* *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    } */

    /* ── SCROLL PROGRESS BAR ── */
    .abd-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    z-index: 1000;
    transition: width 0.1s linear;
    }

    /* ── PAGE BASE ── */
    .abd-page {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #ffffff;
    color: #0F172A;
    line-height: 1.7;
    }

    .abd-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    }

    /* ── BLOG HEADER AREA ── */
    .abd-header-area {
    padding: 28px 0 24px;
    border-bottom: 1px solid #E2E8F0;
    }

    .abd-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #EFF6FF;
    color: #2563EB;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid #BFDBFE;
    margin-bottom: 16px;
    }

    .abd-category-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: #2563EB;
    border-radius: 50%;
    }

    .abd-post-title {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
    color: #0F172A;
    letter-spacing: -0.02em;
    max-width: 820px;
    margin-bottom: 20px;
    }

    .abd-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    }

    .abd-meta-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: #0F172A;
    font-weight: 500;
    }

    .abd-meta-item svg {
    flex-shrink: 0;
    color: #2563EB;
    }

    .abd-meta-divider {
    width: 4px;
    height: 4px;
    background: #CBD5E1;
    border-radius: 50%;
    }

    .abd-author-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    padding: 5px 12px 5px 5px;
    border-radius: 100px;
    }

    .abd-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    }

    .abd-author-name {
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    }

    /* ── FEATURED IMAGE — reduced, capped height ── */
    .abd-featured-image-wrap {
    padding: 24px 0 0;
    }

    .abd-featured-image {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    border-radius: 14px;
    box-shadow:
        0 12px 40px rgba(37, 99, 235, 0.10),
        0 2px 10px rgba(0, 0, 0, 0.06);
    display: block;
    }

    .abd-featured-caption {
    font-size: 13px;
    color: #64748B;
    text-align: center;
    margin-top: 10px;
    font-style: italic;
    line-height: 1.5;
    }

    /* ── CONTENT LAYOUT ── */
    .abd-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    padding: 40px 0 80px;
    align-items: start;
    }

    /* ── DESKTOP TABLE OF CONTENTS ── */
.abd-toc-wrap {
    position: sticky;
    top: 190px;
    max-height: calc(100vh - 220px);
    }

    .abd-toc-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px;
    position: relative;
    max-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
    }

    .abd-toc-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #2563EB, #7C3AED);
    border-radius: 0 2px 2px 0;
    }

    .abd-toc-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 18px;
    padding-left: 8px;
    }

.abd-toc-list {
    list-style: none;
    display: block;
    overflow-y: auto;
    padding-right: 4px;
    }
.abd-toc-item {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    text-decoration: none;
    position: relative;
    margin-bottom: 4px;
    }


    .abd-toc-item:hover {
    color: #2563EB;
    background: #EFF6FF;
    border-color: #BFDBFE;
    }

    .abd-toc-item.abd-toc-active {
    color: #2563EB;
    background: #EFF6FF;
    border-color: #BFDBFE;
    font-weight: 700;
    }

    .abd-toc-item.abd-toc-active::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: #2563EB;
    border-radius: 0 2px 2px 0;
    }

    /* ── MOBILE TABLE OF CONTENTS ── */
    .abd-toc-mobile {
    display: none;
    margin-bottom: 40px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    }

    .abd-toc-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #F8FAFC;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #0F172A;
    gap: 8px;
    }

    .abd-toc-toggle-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease;
    color: #2563EB;
    flex-shrink: 0;
    }

    .abd-toc-toggle-icon.open {
    transform: rotate(180deg);
    }

    .abd-toc-mobile-list {
    list-style: none;
    display: none;
    flex-direction: column;
    padding: 8px 12px 12px;
    gap: 2px;
    background: #fff;
    border-top: 1px solid #E2E8F0;
    }

    .abd-toc-mobile-list.open {
    display: flex;
    }

.abd-toc-mobile-item {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.18s ease;
    }

    .abd-toc-mobile-item:hover,
    .abd-toc-mobile-item.active {
    color: #2563EB;
    background: #EFF6FF;
    font-weight: 600;
    }

    /* ── MAIN CONTENT AREA ── */
    .abd-content {
    min-width: 0;
    }

    .abd-section {
    margin-bottom: 64px;
    scroll-margin-top: 210px;
    }

    .abd-section-eyebrow {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2563EB;
    margin-bottom: 10px;
    }

    .abd-section-heading {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin-bottom: 18px;
    }

    .abd-section-heading::after {
    content: '';
    display: block;
    width: 36px;
    height: 3px;
    background: linear-gradient(90deg, #2563EB, #60A5FA);
    border-radius: 2px;
    margin-top: 10px;
    }

    .abd-para {
    font-size: 16px;
    color: #0F172A;
    line-height: 1.8;
    margin-bottom: 20px;
    }

    /* ── INLINE CONTENT IMAGES ── */
    .abd-inline-figure {
    margin: 32px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(37, 99, 235, 0.09),
        0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #E2E8F0;
    }

    .abd-inline-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    }

    .abd-inline-caption {
    font-size: 13px;
    color: #64748B;
    font-style: italic;
    padding: 12px 16px;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    line-height: 1.5;
    text-align: center;
    }

    /* ── EXPERT INSIGHT BOX ── */
    .abd-insight-box {
    background: linear-gradient(135deg, #EFF6FF, #F0F9FF);
    border: 1px solid #BFDBFE;
    border-left: 4px solid #2563EB;
    border-radius: 0 12px 12px 0;
    padding: 22px 24px;
    margin: 28px 0;
    }

    .abd-insight-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #2563EB;
    margin-bottom: 10px;
    }

    .abd-insight-label-dot {
    width: 8px;
    height: 8px;
    background: #2563EB;
    border-radius: 50%;
    flex-shrink: 0;
    }

    .abd-insight-text {
    font-size: 15px;
    color: #0F172A;
    line-height: 1.75;
    font-weight: 500;
    font-style: italic;
    }

    /* ── BULLET LIST ── */
    .abd-bullet-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 18px 0;
    }

    .abd-bullet-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #0F172A;
    line-height: 1.7;
    }

    .abd-bullet-dot {
    width: 22px;
    height: 22px;
    background: #EFF6FF;
    border: 1.5px solid #BFDBFE;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    }

    .abd-bullet-dot::after {
    content: '';
    width: 7px;
    height: 7px;
    background: #2563EB;
    border-radius: 50%;
    }

    /* ── NUMBERED LIST ── */
    .abd-numbered-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 18px 0;
    }

    .abd-numbered-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    color: #0F172A;
    line-height: 1.7;
    }

    .abd-num-badge {
    width: 26px;
    height: 26px;
    background: #2563EB;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
    margin-top: 1px;
    }

    /* ── KEY TAKEAWAYS ── */
    .abd-takeaways {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 32px;
    margin: 40px 0;
    }

    .abd-takeaways-heading {
    font-size: 18px;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    }

    .abd-takeaways-heading-icon {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, #2563EB, #7C3AED);
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    }

    .abd-takeaways-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    }

    .abd-takeaway-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
    }

    .abd-takeaway-item:hover {
    border-color: #BFDBFE;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
    }

    .abd-check-icon {
    width: 22px;
    height: 22px;
    background: #EFF6FF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    }

    .abd-takeaway-text {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.5;
    }

    /* ── SECTION DIVIDER ── */
    .abd-section-divider {
    border: none;
    border-top: 1px solid #F1F5F9;
    margin: 0 0 64px;
    }

    /* ── FINAL CTA ── */
    .abd-cta {
    background: linear-gradient(135deg, #0F172A 0%, #1e3a8a 50%, #1d4ed8 100%);
    border-radius: 20px;
    padding: 56px 48px;
    text-align: center;
    margin-top: 64px;
    position: relative;
    overflow: hidden;
    }

    .abd-cta::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    top: -80px;
    right: -80px;
    pointer-events: none;
    }

    .abd-cta::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.25) 0%, transparent 70%);
    bottom: -60px;
    left: -40px;
    pointer-events: none;
    }

    .abd-cta-inner {
    position: relative;
    z-index: 1;
    }

    .abd-cta-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #60A5FA;
    margin-bottom: 14px;
    }

    .abd-cta-heading {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 16px;
    }

    .abd-cta-desc {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 480px;
    margin: 0 auto 36px;
    line-height: 1.7;
    }

    .abd-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    }

    .abd-btn-primary {
    background: #2563EB;
    color: #fff;
    border: none;
    padding: 14px 30px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
    text-decoration: none;
    display: inline-block;
    }

    .abd-btn-primary:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(37, 99, 235, 0.5);
    }

    .abd-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    padding: 14px 30px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s ease;
    backdrop-filter: blur(4px);
    text-decoration: none;
    display: inline-block;
    }

    .abd-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
    }

    /* ── RESPONSIVE: TABLET ── */
    @media (max-width: 900px) {
    .abd-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 40px 0 60px;
    }

    .abd-toc-wrap {
        display: none;
    }

    .abd-toc-mobile {
        display: block;
    }

    .abd-takeaways-grid {
        grid-template-columns: 1fr;
    }

    .abd-cta {
        padding: 40px 28px;
    }
    }

    /* ── RESPONSIVE: MOBILE ── */
    @media (max-width: 600px) {
    .abd-header-area {
        padding: 20px 0 18px;
    }

    .abd-meta-row {
        gap: 12px;
    }

    .abd-meta-divider {
        display: none;
    }

    .abd-section {
        margin-bottom: 48px;
    }

    .abd-featured-image {
        max-height: 220px;
    }

    .abd-inline-image {
        height: 200px;
    }

    .abd-cta {
        border-radius: 14px;
    }

    .abd-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .abd-btn-primary,
    .abd-btn-secondary {
        text-align: center;
    }

    .abd-takeaways {
        padding: 24px 20px;
    }

    .abd-insight-box {
        padding: 18px;
    }
    }


.abd-share-wrap {
  position: relative;
  display: inline-flex;
  margin-top: 12px;
}

.abd-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #e2e2e2;
  background: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.abd-share-btn:hover {
  background: #f5f5f5;
  border-color: #cfcfcf;
}

.abd-share-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.abd-share-option {
  padding: 10px 16px;
  font-size: 14px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: #222;
  text-decoration: none;
}

.abd-share-option:hover {
  background: #f2f2f2;
}

.abd-share-copy {
  border-top: 1px solid #eee;
  font-family: inherit;
}

.abd-copied-toast {
  margin-left: 10px;
  align-self: center;
  font-size: 13px;
  color: #1a7f37;
  font-weight: 500;
}



.abd-back-blog-wrap{
    margin:28px 0 40px;
}

.abd-back-blog-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:15px 20px;
    border:1px solid #d9e3f0;
    border-radius:50px;
    background:#fff;
    color:#0f172a;
    font-size:15px;
    font-weight:600;
    text-decoration:none;
    transition:all .25s ease;
}

.abd-back-blog-btn:hover{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
    transform:translateX(-4px);
}

.abd-back-blog-btn svg{
    transition:.25s;
}

.abd-back-blog-btn:hover svg{
    transform:translateX(-3px);
}
    /* blogdetails */
    /* blogdetails */




/* blogcms */

* { box-sizing: border-box; margin: 0; padding: 0; }

.bcms-root {
  font-family: 'Inter', sans-serif;
  background: #f0f2f5;
  min-height: 100vh;
  color: #1a202c;
}

/* ── Header ── */
.bcms-header {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.bcms-header-left h1 {
  font-size: 20px;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: -0.3px;
}
.bcms-header-left .bcms-subtitle {
  font-size: 13px;
  color: #718096;
  margin-top: 2px;
}
.bcms-badge {
  display: inline-flex;
  align-items: center;
  background: #ebf4ff;
  color: #3182ce;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  margin-left: 10px;
}

/* ── Toolbar ── */
.bcms-toolbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bcms-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 340px;
}
.bcms-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #a0aec0;
  font-size: 14px;
}
.bcms-input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #2d3748;
  background: #f7fafc;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.bcms-input:focus {
  border-color: #4299e1;
  box-shadow: 0 0 0 3px rgba(66,153,225,0.15);
  background: #fff;
}
.bcms-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #2d3748;
  background: #f7fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;
  appearance: none;
  cursor: pointer;
  transition: border-color 0.15s;
  outline: none;
}
.bcms-select:focus { border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66,153,225,0.15); }

.bcms-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  white-space: nowrap;
}
.bcms-btn-primary { background: #3182ce; color: #fff; }
.bcms-btn-primary:hover { background: #2b6cb0; }
.bcms-btn-success { background: #38a169; color: #fff; }
.bcms-btn-success:hover { background: #2f855a; }
.bcms-btn-danger  { background: #e53e3e; color: #fff; }
.bcms-btn-danger:hover  { background: #c53030; }
.bcms-btn-ghost   { background: transparent; color: #4a5568; border: 1px solid #e2e8f0; }
.bcms-btn-ghost:hover   { background: #f7fafc; }
.bcms-btn-draft   { background: #edf2f7; color: #4a5568; border: 1px solid #e2e8f0; }
.bcms-btn-draft:hover   { background: #e2e8f0; }
.bcms-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.bcms-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Table ── */
.bcms-table-wrap {
  padding: 20px 28px;
}
.bcms-table-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}
.bcms-table { width: 100%; border-collapse: collapse; }
.bcms-table thead tr { background: #f7fafc; }
.bcms-table th {
  padding: 11px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}
.bcms-table td {
  padding: 12px 14px;
  font-size: 13px;
  color: #2d3748;
  border-bottom: 1px solid #f0f4f8;
  vertical-align: middle;
}
.bcms-table tbody tr:last-child td { border-bottom: none; }
.bcms-table tbody tr:hover { background: #f7fafc; }
.bcms-thumb {
  width: 52px;
  height: 36px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #edf2f7;
}
.bcms-thumb-placeholder {
  width: 52px;
  height: 36px;
  border-radius: 6px;
  background: linear-gradient(135deg,#e2e8f0,#cbd5e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.bcms-title-cell { font-weight: 600; color: #1a202c; max-width: 180px; }
.bcms-slug-cell { color: #718096; font-size: 12px; font-family: monospace; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcms-cat-pill {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: #ebf8ff;
  color: #2b6cb0;
  white-space: nowrap;
}
.bcms-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.bcms-status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.bcms-status-published { background: #f0fff4; color: #276749; }
.bcms-status-published::before { background: #38a169; }
.bcms-status-draft     { background: #fffaf0; color: #c05621; }
.bcms-status-draft::before     { background: #ed8936; }
.bcms-featured-yes { color: #d69e2e; font-size: 16px; }
.bcms-featured-no  { color: #cbd5e0; font-size: 16px; }
.bcms-actions { display: flex; align-items: center; gap: 6px; }

/* ── Pagination ── */
.bcms-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid #e2e8f0;
  font-size: 13px;
  color: #718096;
}
.bcms-pagination-btns { display: flex; gap: 4px; }
.bcms-page-btn {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  color: #4a5568;
  transition: all 0.15s;
}
.bcms-page-btn:hover { background: #ebf4ff; border-color: #4299e1; color: #3182ce; }
.bcms-page-btn.active { background: #3182ce; border-color: #3182ce; color: #fff; }
.bcms-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Empty / Loading ── */
.bcms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #a0aec0;
}
.bcms-empty-icon { font-size: 48px; margin-bottom: 12px; }
.bcms-empty h3 { font-size: 16px; font-weight: 600; color: #4a5568; margin-bottom: 6px; }
.bcms-empty p  { font-size: 13px; }
.bcms-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  gap: 12px;
  color: #718096;
  font-size: 14px;
}
.bcms-spinner {
  width: 22px; height: 22px;
  border: 3px solid #e2e8f0;
  border-top-color: #3182ce;
  border-radius: 50%;
  animation: bcmsSpin 0.7s linear infinite;
}
@keyframes bcmsSpin { to { transform: rotate(360deg); } }

/* ── Modal Overlay ── */
.bcms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  backdrop-filter: blur(2px);
}
.bcms-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 820px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: bcmsSlideIn 0.2s ease;
  margin: auto;
}
@keyframes bcmsSlideIn {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bcms-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e8f0;
  background: #f7fafc;
}
.bcms-modal-header h2 { font-size: 17px; font-weight: 700; }
.bcms-modal-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #718096;
  padding: 4px;
  line-height: 1;
  border-radius: 6px;
}
.bcms-modal-close:hover { background: #e2e8f0; color: #2d3748; }

/* ── Tabs ── */
.bcms-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e2e8f0;
  background: #fff;
  padding: 0 24px;
}
.bcms-tab {
  padding: 12px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #718096;
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.bcms-tab:hover { color: #2d3748; }
.bcms-tab.active { color: #3182ce; border-bottom-color: #3182ce; font-weight: 600; }
.bcms-tab-icon { font-size: 14px; }

/* ── Modal Body ── */
.bcms-modal-body { padding: 24px; max-height: 68vh; overflow-y: auto; }

/* ── Form ── */
.bcms-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bcms-form-full { grid-column: 1 / -1; }
.bcms-field { display: flex; flex-direction: column; gap: 5px; }
.bcms-label {
  font-size: 12px;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bcms-label .req { color: #e53e3e; margin-left: 2px; }
.bcms-field-input {
  padding: 9px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: #2d3748;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  width: 100%;
}
.bcms-field-input:focus { border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66,153,225,0.15); }
.bcms-field-input.error { border-color: #fc8181; }
.bcms-field-input::placeholder { color: #a0aec0; }
.bcms-field-textarea {
  resize: vertical;
  min-height: 80px;
}
.bcms-field-select {
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.bcms-error-msg { font-size: 11px; color: #e53e3e; margin-top: 3px; }
.bcms-hint { font-size: 11px; color: #a0aec0; margin-top: 3px; }

/* ── Image Upload ── */
.bcms-upload-zone {
  border: 2px dashed #cbd5e0;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #f7fafc;
  position: relative;
}
.bcms-upload-zone:hover { border-color: #4299e1; background: #ebf4ff; }
.bcms-upload-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bcms-upload-icon { font-size: 28px; margin-bottom: 8px; }
.bcms-upload-zone p { font-size: 13px; color: #718096; }
.bcms-upload-zone span { font-size: 11px; color: #a0aec0; display: block; margin-top: 4px; }
.bcms-preview-img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  margin-top: 10px;
  border: 1px solid #e2e8f0;
}

/* ── Tiptap Editor ── */
.bcms-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #e2e8f0;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: #f7fafc;
}
.bcms-editor-btn {
  padding: 5px 8px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  color: #4a5568;
  font-family: inherit;
  font-weight: 600;
  transition: all 0.1s;
  min-width: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bcms-editor-btn:hover { background: #e2e8f0; }
.bcms-editor-btn.is-active { background: #3182ce; color: #fff; }
.bcms-editor-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bcms-editor-divider {
  width: 1px;
  background: #e2e8f0;
  margin: 3px 4px;
  align-self: stretch;
}
.bcms-editor-select {
  padding: 4px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  font-size: 12px;
  font-family: inherit;
  color: #4a5568;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.bcms-editor-wrap {
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  min-height: 280px;
  background: #fff;
  overflow: hidden;
}
.bcms-editor-wrap .ProseMirror {
  padding: 16px;
  min-height: 280px;
  outline: none;
  font-size: 14px;
  line-height: 1.7;
  color: #2d3748;
}
.bcms-editor-wrap .ProseMirror h1 { font-size: 26px; font-weight: 700; margin: 12px 0 8px; }
.bcms-editor-wrap .ProseMirror h2 { font-size: 22px; font-weight: 700; margin: 10px 0 6px; }
.bcms-editor-wrap .ProseMirror h3 { font-size: 18px; font-weight: 600; margin: 8px 0 5px; }
.bcms-editor-wrap .ProseMirror h4 { font-size: 16px; font-weight: 600; margin: 7px 0 4px; }
.bcms-editor-wrap .ProseMirror h5 { font-size: 14px; font-weight: 600; margin: 6px 0 3px; }
.bcms-editor-wrap .ProseMirror h6 { font-size: 13px; font-weight: 600; margin: 5px 0 3px; }
.bcms-editor-wrap .ProseMirror p  { margin: 0 0 8px; }
.bcms-editor-wrap .ProseMirror ul,
.bcms-editor-wrap .ProseMirror ol { padding-left: 20px; margin: 8px 0; }
.bcms-editor-wrap .ProseMirror blockquote {
  border-left: 3px solid #4299e1;
  padding-left: 14px;
  margin: 10px 0;
  color: #718096;
  font-style: italic;
}
.bcms-editor-wrap .ProseMirror table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}
.bcms-editor-wrap .ProseMirror td,
.bcms-editor-wrap .ProseMirror th {
  border: 1px solid #e2e8f0;
  padding: 8px 10px;
  min-width: 60px;
}
.bcms-editor-wrap .ProseMirror th { background: #f7fafc; font-weight: 700; }
.bcms-editor-wrap .ProseMirror a { color: #3182ce; text-decoration: underline; }
.bcms-editor-wrap .ProseMirror img { max-width: 100%; border-radius: 6px; margin: 8px 0; }  
.bcms-editor-wrap .ProseMirror mark { background: #fef08a; }
.bcms-editor-wrap .ProseMirror .is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #a0aec0;
  pointer-events: none;
  height: 0;
}


/* ── Inline image (side-by-side feature) ── */
/* .bcms-editor-wrap .ProseMirror img.bcms-inline-image {
  display: inline-block;
  max-width: 45%;
  height: auto;
  vertical-align: middle;
  margin: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
} */

/* ── SEO ── */
.bcms-char-count {
  font-size: 11px;
  text-align: right;
  margin-top: 3px;
}
.bcms-char-ok   { color: #38a169; }
.bcms-char-warn { color: #d69e2e; }
.bcms-char-bad  { color: #e53e3e; }
.bcms-seo-preview {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  background: #fff;
  margin-top: 16px;
}
.bcms-seo-preview-label {
  font-size: 11px;
  font-weight: 700;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}
.bcms-seo-url  { font-size: 12px; color: #276749; margin-bottom: 2px; }
.bcms-seo-title { font-size: 18px; color: #1a0dab; font-weight: 600; margin-bottom: 3px; cursor: pointer; }
.bcms-seo-title:hover { text-decoration: underline; }
.bcms-seo-desc { font-size: 13px; color: #4a5568; line-height: 1.5; }
.bcms-kw-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #ebf4ff;
  color: #3182ce;
  border-radius: 20px;
  font-size: 12px;
  margin: 3px;
}
.bcms-kw-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: #63b3ed;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.bcms-kw-remove:hover { color: #2b6cb0; }

/* ── Settings ── */
.bcms-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f7fafc;
  margin-bottom: 12px;
}
.bcms-toggle-info h4 { font-size: 14px; font-weight: 600; color: #2d3748; }
.bcms-toggle-info p  { font-size: 12px; color: #718096; margin-top: 2px; }
.bcms-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.bcms-toggle input { opacity: 0; width: 0; height: 0; }
.bcms-toggle-track {
  position: absolute;
  inset: 0;
  background: #cbd5e0;
  border-radius: 24px;
  transition: background 0.2s;
}
.bcms-toggle input:checked + .bcms-toggle-track { background: #3182ce; }
.bcms-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  pointer-events: none;
}
.bcms-toggle input:checked ~ .bcms-toggle-thumb { transform: translateX(20px); }

/* ── Modal Footer ── */
.bcms-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #f7fafc;
}

/* ── Delete Confirm ── */
.bcms-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.bcms-confirm-box {
  background: #fff;
  border-radius: 12px;
  padding: 28px;
  max-width: 380px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.2);
  animation: bcmsSlideIn 0.2s ease;
}
.bcms-confirm-icon { font-size: 36px; margin-bottom: 12px; }
.bcms-confirm-box h3 { font-size: 16px; font-weight: 700; color: #1a202c; margin-bottom: 8px; }
.bcms-confirm-box p  { font-size: 13px; color: #718096; margin-bottom: 20px; }
.bcms-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Toast ── */
.bcms-toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bcms-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  animation: bcmsToastIn 0.2s ease;
  min-width: 240px;
  max-width: 360px;
}
@keyframes bcmsToastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bcms-toast-success { background: #f0fff4; color: #276749; border: 1px solid #c6f6d5; }
.bcms-toast-error   { background: #fff5f5; color: #9b2c2c; border: 1px solid #fed7d7; }
.bcms-toast-info    { background: #ebf8ff; color: #2a69ac; border: 1px solid #bee3f8; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .bcms-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .bcms-toolbar { flex-direction: column; align-items: stretch; }
  .bcms-search-wrap { max-width: none; }
  .bcms-table-wrap { padding: 12px; }
  .bcms-form-grid { grid-template-columns: 1fr; }
  .bcms-modal { max-width: 100%; }
  .bcms-tabs { overflow-x: auto; }
  .bcms-tab { padding: 10px 12px; }
}


/* ── Editor Image Resize & Alignment ── */
.bcms-editor-image {
  max-width: 100%;
  border-radius: 6px;
  cursor: pointer;
  transition: outline 0.15s;
}
.bcms-editor-image:hover {
  outline: 2px solid #4299e1;
}
.bcms-editor-wrap .ProseMirror img[data-align="left"] {
  display: block;
  margin-right: auto;
  margin-left: 0;
}
.bcms-editor-wrap .ProseMirror img[data-align="center"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.bcms-editor-wrap .ProseMirror img[data-align="right"] {
  display: block;
  margin-left: auto;
  margin-right: 0;
}



/* Resize handle provided by tiptap-extension-resize-image */
.image-resizer {
  display: inline-flex;
  position: relative;
  max-width: 100%;
}
.image-resizer .resize-trigger {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: #3182ce;
  border: 2px solid #fff;
  border-radius: 3px;
  cursor: nwse-resize;
  z-index: 10;
}
/* blogcms */

.ProseMirror ul {
  list-style-type: disc !important;
  padding-left: 24px !important;
  margin: 10px 0 !important;
}

.ProseMirror ol {
  list-style-type: decimal !important;
  padding-left: 24px !important;
  margin: 10px 0 !important;
}

.ProseMirror li {
  margin: 4px 0;
}



/* ── Inline side-by-side images (public article page) ── */
.bcms-editor-wrap img[data-type="inline-image"] {
  display: inline-block !important;
  width: auto !important;
  max-width: 45% !important;
  height: auto !important;
  vertical-align: middle;
  margin: 4px 6px;
  border-radius: 6px;
}

@media (max-width: 640px) {
.bcms-editor-wrap img[data-type="inline-image"] {
    max-width: 100% !important;
    display: block !important;
    margin: 8px 0;
}
}

.bcms-editor-wrap .ProseMirror img.bcms-inline-image {
  width: 48% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: inline-block !important;
  vertical-align: top !important;
  margin: 4px 1% !important;
  border-radius: 6px !important;
  cursor: pointer !important;
}



/* whitepapercms */
/* ============================================================
   Whitepapers CMS  –  Whitepapers.css
   Drop this next to Whitepapers.jsx
   ============================================================ */

/* ── Wrapper ── */
.cms-wrapper {
  padding: 28px 32px;
  max-width: 1280px;
  margin: 0 auto;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  color: #1a1d23;
  position: relative;
}

/* ── Toast ── */
.cms-toast {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  animation: slideInRight 0.28s ease;
}
.cms-toast--success {
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  color: #065f46;
}
.cms-toast--error {
  background: #fff1f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}
.cms-toast__icon {
  font-weight: 700;
  font-size: 15px;
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Header ── */
.cms-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}
.cms-header__title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #111827;
}
.cms-header__subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* ── Card ── */
.cms-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* ── Loading ── */
.cms-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px;
  color: #6b7280;
  font-size: 14px;
}
.cms-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
.cms-spinner--sm {
  width: 14px;
  height: 14px;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Table ── */
.cms-table-wrap {
  overflow-x: auto;
}
.cms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cms-table thead {
  background: #f9fafb;
}
.cms-table th {
  padding: 13px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap;
}
.cms-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
  color: #374151;
}
.cms-table tbody tr:last-child td {
  border-bottom: none;
}
.cms-table tbody tr:hover td {
  background: #fafafa;
}
.cms-table__empty {
  text-align: center;
  color: #9ca3af;
  padding: 56px !important;
  font-size: 14px;
}
.cms-table__thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  display: block;
}
.cms-table__thumb-placeholder {
  width: 56px;
  height: 42px;
  background: #f3f4f6;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #9ca3af;
  text-align: center;
}
.cms-table__title {
  font-weight: 600;
  color: #111827;
  max-width: 200px;
}
.cms-table__desc {
  color: #6b7280;
  max-width: 240px;
  line-height: 1.45;
}
.cms-table__date {
  white-space: nowrap;
  color: #6b7280;
  font-size: 13px;
}
.cms-table__no-pdf {
  color: #d1d5db;
}

/* ── Buttons ── */
.cms-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.18s, opacity 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  text-decoration: none;
}
.cms-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cms-btn--primary {
  background: #6366f1;
  color: #fff;
}
.cms-btn--primary:hover:not(:disabled) {
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
}
.cms-btn--edit {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}
.cms-btn--edit:hover:not(:disabled) {
  background: #dbeafe;
}
.cms-btn--delete {
  background: #fff1f2;
  color: #e11d48;
  border: 1px solid #fecdd3;
}
.cms-btn--delete:hover:not(:disabled) {
  background: #ffe4e6;
}
.cms-btn--danger {
  background: #e11d48;
  color: #fff;
}
.cms-btn--danger:hover:not(:disabled) {
  background: #be123c;
}
.cms-btn--ghost {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}
.cms-btn--ghost:hover:not(:disabled) {
  background: #e5e7eb;
}
.cms-btn--pdf {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  font-size: 12px;
  padding: 5px 12px;
}
.cms-btn--pdf:hover {
  background: #dcfce7;
}
.cms-btn--file {
  background: #f8fafc;
  color: #374151;
  border: 1px solid #e2e8f0;
  padding: 9px 16px;
}
.cms-btn--file:hover {
  background: #f1f5f9;
}

/* ── Actions cell ── */
.cms-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cms-actions__confirm {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cms-actions__confirm-text {
  font-size: 12px;
  color: #e11d48;
  font-weight: 600;
}

/* ── Modal ── */
.cms-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cms-modal {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
  animation: scaleIn 0.22s ease;
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.cms-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #f3f4f6;
}
.cms-modal__title {
  font-size: 17px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.cms-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 17px;
  color: #9ca3af;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
}
.cms-modal__close:hover {
  background: #f3f4f6;
  color: #374151;
}
.cms-modal__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cms-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
  margin-top: 4px;
}

/* ── Form fields ── */
.cms-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cms-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.cms-required {
  color: #e11d48;
  margin-left: 2px;
}
.cms-input,
.cms-textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid #d1d5db;
  border-radius: 7px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
  font-family: inherit;
  box-sizing: border-box;
}
.cms-input:focus,
.cms-textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
.cms-input--error {
  border-color: #fca5a5 !important;
  background: #fff8f8;
}
.cms-textarea {
  resize: vertical;
  min-height: 90px;
}
.cms-field__error {
  font-size: 12px;
  color: #e11d48;
  margin: 0;
}
.cms-field__counter {
  font-size: 11px;
  color: #9ca3af;
  text-align: right;
  margin: 0;
}
.cms-field__filename {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 0;
}
.cms-field__filename-icon {
  font-size: 15px;
}

/* ── Image preview ── */
.cms-image-preview {
  margin-top: 4px;
}
.cms-image-preview img {
  max-width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .cms-wrapper {
    padding: 18px 16px;
  }
  .cms-header {
    flex-direction: column;
    gap: 12px;
  }
  .cms-btn--primary {
    width: 100%;
    justify-content: center;
  }
  .cms-modal {
    max-height: 95vh;
  }
}
/* whitepapercms */



/* presspage */
/* ── Press Section ── */
.press-section {
  padding: 80px 0;
  background-color: #f4f6fb;
}

.press-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Header ── */
.press-header {
  text-align: center;
  margin-bottom: 48px;
}

.press-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #3a6bc8;
  text-transform: uppercase;
  background: #fff;
  border: 1.5px solid #c5d4f0;
  border-radius: 999px;
  padding: 5px 18px;
  margin-bottom: 16px;
}

.press-heading {
  font-size: 38px;
  font-weight: 700;
  color: #111;
  margin: 0 0 12px;
  line-height: 1.2;
}

.press-sub {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* ── Grid ── */
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Card ── */
.press-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid #e5eaf3;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.press-card:hover {
  box-shadow: 0 8px 28px rgba(58, 107, 200, 0.1);
  transform: translateY(-3px);
}

/* ── Image ── */
.press-img-box {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #eef1f8;
}

.press-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Card Body ── */
.press-card-body {
  padding: 20px 22px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ── Meta row: logo + date ── */
.press-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.press-source-logo {
  height: 40px;
  width: auto;
  max-width: 90px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.press-source-name {
  font-size: 13px;
  font-weight: 600;
  color: #3a6bc8;
}

.press-date {
  font-size: 13px;
  color: #999;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Title ── */
.press-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 0 0 10px;
  line-height: 1.45;
}

/* ── Description — clamp to 3 lines ── */
.press-desc {
  font-size: 14px;
  color: #555;
  line-height: 1.65;
  margin: 0 0 22px;
  flex: 1;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Button ── */
.press-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background-color: #3a6bc8;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  align-self: flex-start;
  transition: background-color 0.2s ease;
}

.press-btn:hover {
  background-color: #2a55aa;
  color: white !important;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .press-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .press-section {
    padding: 50px 0;
  }

  .press-heading {
    font-size: 28px;
  }

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

  .press-btn {
    width: 100%;
    justify-content: center;
  }
}
/* presspage */


/* presscms */
/* Press Management page styles
   Scoped under .press-page so these rules don't leak into the rest
   of the admin dashboard (sidebar, header, other pages stay untouched). */

.press-page {
  --press-primary: #2563eb;
  --press-secondary: #1d4ed8;
  --press-bg: #ffffff;
  --press-border: #e5e7eb;
  --press-success: #16a34a;
  --press-danger: #dc2626;
  --press-radius: 12px;
  --press-text: #111827;
  --press-text-muted: #6b7280;

  font-family: inherit;
  color: var(--press-text);
}

/* ---------- Header ---------- */

.press-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.press-page-title {
  margin: 0 0 4px 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--press-text);
}

.press-page-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--press-text-muted);
}

/* ---------- Buttons ---------- */

.press-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--press-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.press-page .btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.press-page .btn-primary {
  background-color: var(--press-primary);
  color: #ffffff;
}

.press-page .btn-primary:hover:not(:disabled) {
  background-color: var(--press-secondary);
}

.press-page .btn-secondary {
  background-color: var(--press-bg);
  color: var(--press-text);
  border-color: var(--press-border);
}

.press-page .btn-secondary:hover:not(:disabled) {
  background-color: #f9fafb;
}

.press-page .btn-danger {
  background-color: var(--press-danger);
  color: #ffffff;
}

.press-page .btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.press-actions {
  display: flex;
  gap: 8px;
}

.btn-icon {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-edit {
  color: var(--press-primary);
  border-color: var(--press-primary);
}

.btn-edit:hover {
  background-color: rgba(37, 99, 235, 0.08);
}

.btn-delete {
  color: var(--press-danger);
  border-color: var(--press-danger);
}

.btn-delete:hover {
  background-color: rgba(220, 38, 38, 0.08);
}

/* ---------- Alert ---------- */

.press-alert {
  padding: 12px 16px;
  border-radius: var(--press-radius);
  font-size: 14px;
  margin-bottom: 16px;
}

.press-alert-error {
  background-color: rgba(220, 38, 38, 0.08);
  color: var(--press-danger);
  border: 1px solid rgba(220, 38, 38, 0.25);
}

/* ---------- Toolbar / Search ---------- */

.press-toolbar {
  display: flex;
  margin-bottom: 16px;
}

.press-search-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 14px;
  font-size: 14px;
  border: 1px solid var(--press-border);
  border-radius: var(--press-radius);
  background-color: var(--press-bg);
  outline: none;
  transition: border-color 0.15s ease;
}

.press-search-input:focus {
  border-color: var(--press-primary);
}

/* ---------- Table card ---------- */

.press-table-card {
  background-color: var(--press-bg);
  border: 1px solid var(--press-border);
  border-radius: var(--press-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.press-table-wrapper {
  overflow-x: auto;
}

.press-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.press-table thead {
  background-color: #f9fafb;
}

.press-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--press-text-muted);
  border-bottom: 1px solid var(--press-border);
  white-space: nowrap;
}

.press-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--press-border);
  vertical-align: middle;
}

.press-table tbody tr:hover {
  background-color: #f9fafb;
}

.press-table tbody tr:last-child td {
  border-bottom: none;
}

.press-table-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--press-text-muted);
}

.press-title-cell {
  font-weight: 500;
  color: var(--press-text);
  max-width: 280px;
}

.press-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--press-border);
}

.press-logo-thumb {
  width: 56px;
  height: 40px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid var(--press-border);
  background-color: #f9fafb;
  padding: 4px;
}

.press-thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  font-size: 11px;
  color: var(--press-text-muted);
  background-color: #f9fafb;
  border: 1px dashed var(--press-border);
  border-radius: 8px;
}

/* ---------- Status badge ---------- */

.press-status-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
}

.press-status-active {
  background-color: rgba(22, 163, 74, 0.1);
  color: var(--press-success);
}

.press-status-inactive {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--press-danger);
}

/* ---------- Modal ---------- */

.press-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 24, 39, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.press-modal {
  background-color: var(--press-bg);
  border-radius: var(--press-radius);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.press-modal-confirm {
  max-width: 420px;
}

.press-modal-confirm h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
}

.press-modal-confirm p {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: var(--press-text-muted);
}

.press-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--press-border);
}

.press-modal-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.press-modal-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--press-text-muted);
}

.press-modal-close:hover {
  color: var(--press-text);
}

.press-modal-loading {
  padding: 32px 0;
  text-align: center;
  color: var(--press-text-muted);
  font-size: 14px;
}

.press-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--press-border);
}

/* ---------- Form ---------- */

.press-form-group {
  margin-bottom: 16px;
}

.press-form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--press-text);
}

.press-form-group input[type='text'],
.press-form-group input[type='url'],
.press-form-group textarea,
.press-form-group select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--press-border);
  border-radius: 8px;
  outline: none;
  background-color: var(--press-bg);
  color: var(--press-text);
  font-family: inherit;
  transition: border-color 0.15s ease;
}

.press-form-group input[type='text']:focus,
.press-form-group input[type='url']:focus,
.press-form-group textarea:focus,
.press-form-group select:focus {
  border-color: var(--press-primary);
}

.press-form-group input[type='file'] {
  width: 100%;
  font-size: 13px;
  padding: 8px 0;
}

.press-form-group textarea {
  resize: vertical;
}

.press-field-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--press-danger);
}

.press-image-preview {
  margin-top: 10px;
  padding: 8px;
  border: 1px dashed var(--press-border);
  border-radius: var(--press-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 160px;
  overflow: hidden;
}

.press-image-preview img {
  max-width: 100%;
  max-height: 144px;
  object-fit: contain;
  border-radius: 8px;
}

.press-logo-preview {
  max-height: 100px;
}

.press-logo-preview img {
  max-height: 84px;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  .press-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .press-search-input {
    max-width: 100%;
  }
}
/* presscms */

/* checkoutpage */


        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        .co-root {
          min-height: 100vh;
          background: #F8FAFC;
          font-family: 'Inter', sans-serif;
          color: #1E293B;
          padding: 0;
        }

        /* ── Header ── */
        .co-header {
          background: #ffffff;
          border-bottom: 1px solid #E2E8F0;
          padding: 0 32px;
          height: 64px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: sticky;
          top: 0;
          z-index: 100;
        }
        .co-logo {
          font-size: 20px;
          font-weight: 800;
          color: #0D6EFD;
          letter-spacing: -0.5px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        .co-logo-dot {
          width: 8px;
          height: 8px;
          background: #22C55E;
          border-radius: 50%;
          display: inline-block;
        }
        .co-steps {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 13px;
          font-weight: 500;
        }
        .co-step {
          display: flex;
          align-items: center;
          gap: 6px;
          color: #94A3B8;
        }
        .co-step.active { color: #0D6EFD; }
        .co-step.done { color: #22C55E; }
        .co-step-num {
          width: 24px; height: 24px;
          border-radius: 50%;
          background: #E2E8F0;
          display: flex; align-items: center; justify-content: center;
          font-size: 11px; font-weight: 700;
        }
        .co-step.active .co-step-num { background: #0D6EFD; color: #fff; }
        .co-step.done .co-step-num { background: #22C55E; color: #fff; }
        .co-step-sep { color: #CBD5E1; font-size: 16px; }

        /* ── Body ── */
        .co-body {
          max-width: 1180px;
          margin: 0 auto;
          padding: 40px 24px 80px;
        }
        .co-page-title {
          font-size: 28px;
          font-weight: 800;
          color: #1E293B;
          margin-bottom: 4px;
          letter-spacing: -0.5px;
          animation: fadeUp 0.5s ease both;
        }
        .co-page-sub {
          font-size: 15px;
          color: #64748B;
          margin-bottom: 36px;
          animation: fadeUp 0.5s ease 0.08s both;
        }

        .co-grid {
          display: grid;
          grid-template-columns: 420px 1fr;
          gap: 28px;
          align-items: start;
        }

        /* ── Package Card ── */
        .co-pkg-card {
          background: #ffffff;
          border-radius: 24px;
          border: 1px solid #E2E8F0;
          box-shadow: 0 4px 24px rgba(13,110,253,0.07);
          padding: 32px;
          position: sticky;
          top: 80px;
          animation: fadeUp 0.5s ease 0.1s both;
          transition: box-shadow 0.3s;
        }
        .co-pkg-card:hover {
          box-shadow: 0 8px 36px rgba(13,110,253,0.12);
        }
        .co-badge {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
          color: #2563EB;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.8px;
          text-transform: uppercase;
          padding: 5px 12px;
          border-radius: 100px;
          margin-bottom: 20px;
          border: 1px solid #BFDBFE;
        }
        .co-badge-dot {
          width: 6px; height: 6px;
          background: #22C55E;
          border-radius: 50%;
          animation: pulse 2s infinite;
        }
        .co-pkg-name {
          font-size: 22px;
          font-weight: 800;
          color: #1E293B;
          margin-bottom: 6px;
          letter-spacing: -0.3px;
        }
        .co-pkg-desc {
          font-size: 13.5px;
          color: #64748B;
          line-height: 1.6;
          margin-bottom: 24px;
        }
        .co-price-row {
          display: flex;
          align-items: flex-end;
          gap: 8px;
          margin-bottom: 24px;
          padding: 16px 0;
          border-top: 1px dashed #E2E8F0;
          border-bottom: 1px dashed #E2E8F0;
        }
        .co-price-amount {
          font-size: 38px;
          font-weight: 800;
          color: #0D6EFD;
          line-height: 1;
          letter-spacing: -1px;
        }
        .co-price-currency {
          font-size: 18px;
          font-weight: 700;
          color: #0D6EFD;
          margin-bottom: 4px;
        }
        .co-price-dur {
          font-size: 13px;
          color: #94A3B8;
          margin-bottom: 5px;
        }

        .co-section-label {
          font-size: 10.5px;
          font-weight: 700;
          letter-spacing: 1px;
          text-transform: uppercase;
          color: #94A3B8;
          margin-bottom: 10px;
          margin-top: 20px;
        }

        /* Platforms */
        .co-platforms {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 4px;
        }
        .co-platform-pill {
          display: inline-flex;
          align-items: center;
          gap: 5px;
          background: #F1F5F9;
          border: 1px solid #E2E8F0;
          color: #475569;
          font-size: 12px;
          font-weight: 600;
          padding: 5px 12px;
          border-radius: 100px;
          transition: all 0.2s;
        }
        .co-platform-pill:hover {
          background: #EFF6FF;
          border-color: #BFDBFE;
          color: #2563EB;
        }

        /* Deliverables */
        .co-deliverables {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 10px;
        }
        .co-del-item {
          background: #F8FAFC;
          border: 1px solid #E2E8F0;
          border-radius: 14px;
          padding: 14px 10px;
          text-align: center;
          transition: all 0.2s;
        }
        .co-del-item:hover {
          border-color: #BFDBFE;
          background: #EFF6FF;
        }
        .co-del-num {
          font-size: 22px;
          font-weight: 800;
          color: #0D6EFD;
          line-height: 1;
        }
        .co-del-label {
          font-size: 11px;
          color: #94A3B8;
          font-weight: 600;
          margin-top: 3px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .co-duration-row {
          display: flex;
          align-items: center;
          gap: 8px;
          background: #F0FDF4;
          border: 1px solid #BBF7D0;
          border-radius: 12px;
          padding: 10px 14px;
          margin-top: 20px;
        }
        .co-duration-icon { font-size: 16px; }
        .co-duration-text { font-size: 13px; color: #166534; font-weight: 600; }

        /* ── Form Card ── */
        .co-form-card {
          background: #ffffff;
          border-radius: 24px;
          border: 1px solid #E2E8F0;
          box-shadow: 0 4px 24px rgba(13,110,253,0.05);
          padding: 36px 36px 40px;
          animation: fadeUp 0.5s ease 0.15s both;
        }
        .co-form-title {
          font-size: 20px;
          font-weight: 800;
          color: #1E293B;
          margin-bottom: 4px;
          letter-spacing: -0.3px;
        }
        .co-form-sub {
          font-size: 13.5px;
          color: #64748B;
          margin-bottom: 28px;
        }

        .co-field-group {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
          margin-bottom: 18px;
        }
        .co-field-full { grid-column: 1 / -1; }

        .co-field {
          position: relative;
          display: flex;
          flex-direction: column;
        }
        .co-field label {
          font-size: 12px;
          font-weight: 600;
          color: #64748B;
          margin-bottom: 6px;
          letter-spacing: 0.3px;
          transition: color 0.2s;
        }
        .co-field.focused label,
        .co-field.has-val label { color: #0D6EFD; }
        .co-field.has-error label { color: #EF4444; }

        .co-field input,
        .co-field select {
          width: 100%;
          height: 50px;
          padding: 0 16px;
          border: 1.5px solid #E2E8F0;
          border-radius: 12px;
          font-size: 14.5px;
          font-family: 'Inter', sans-serif;
          color: #1E293B;
          background: #F8FAFC;
          outline: none;
          transition: all 0.2s;
          appearance: none;
        }
        .co-field input::placeholder { color: #CBD5E1; }
        .co-field input:focus,
        .co-field select:focus {
          border-color: #0D6EFD;
          background: #ffffff;
          box-shadow: 0 0 0 3px rgba(13,110,253,0.08);
        }
        .co-field.has-error input,
        .co-field.has-error select {
          border-color: #EF4444;
          background: #FFF5F5;
        }
        .co-field-error {
          font-size: 11.5px;
          color: #EF4444;
          margin-top: 5px;
          font-weight: 500;
        }
        .co-field-badge {
          position: absolute;
          right: 12px;
          top: 38px;
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.5px;
          text-transform: uppercase;
          padding: 2px 7px;
          border-radius: 6px;
          pointer-events: none;
        }
        .co-required-badge {
          background: #FEF2F2;
          color: #EF4444;
        }
        .co-optional-badge {
          background: #F1F5F9;
          color: #94A3B8;
        }
        .co-select-wrapper {
          position: relative;
        }
        .co-select-wrapper::after {
          content: '▾';
          position: absolute;
          right: 14px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 12px;
          color: #94A3B8;
          pointer-events: none;
        }

        .co-divider {
          height: 1px;
          background: #F1F5F9;
          margin: 24px 0;
        }

        .co-optional-section {
          font-size: 12px;
          font-weight: 700;
          color: #94A3B8;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 18px;
          display: flex;
          align-items: center;
          gap: 10px;
        }
        .co-optional-section::after {
          content: '';
          flex: 1;
          height: 1px;
          background: #E2E8F0;
        }

        .co-submit-btn {
          width: 100%;
          height: 56px;
          background: linear-gradient(135deg, #0D6EFD, #2563EB);
          color: #ffffff;
          font-size: 16px;
          font-weight: 700;
          border: none;
          border-radius: 14px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          margin-top: 28px;
          transition: all 0.25s;
          letter-spacing: 0.2px;
          box-shadow: 0 4px 16px rgba(13,110,253,0.3);
        }
        .co-submit-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 28px rgba(13,110,253,0.4);
          background: linear-gradient(135deg, #1a7aff, #1d4ed8);
        }
        .co-submit-btn:active { transform: translateY(0); }
        .co-submit-arrow { font-size: 18px; transition: transform 0.2s; }
        .co-submit-btn:hover .co-submit-arrow { transform: translateX(4px); }

        .co-secure-note {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-top: 14px;
          font-size: 12px;
          color: #94A3B8;
        }
        .co-secure-icon { font-size: 13px; }

        /* ── Skeleton ── */
        .co-skeleton {
          background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
          background-size: 200% 100%;
          animation: shimmer 1.5s infinite;
          border-radius: 8px;
        }

        /* ── Error State ── */
        .co-error-state {
          text-align: center;
          padding: 48px 32px;
        }
        .co-error-icon { font-size: 40px; margin-bottom: 12px; }
        .co-error-msg { color: #EF4444; font-weight: 600; margin-bottom: 8px; }
        .co-error-hint { font-size: 13px; color: #94A3B8; }

        /* ── Animations ── */
        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes shimmer {
          0%   { background-position: -200% 0; }
          100% { background-position:  200% 0; }
        }
        @keyframes pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50%       { opacity: 0.6; transform: scale(1.4); }
        }

        /* ── Responsive ── */
        @media (max-width: 900px) {
          .co-grid { grid-template-columns: 1fr; }
          .co-pkg-card { position: static; }
          .co-steps { display: none; }
        }
        @media (max-width: 560px) {
          .co-body { padding: 24px 16px 60px; }
          .co-form-card { padding: 24px 20px 28px; }
          .co-pkg-card { padding: 24px 20px; }
          .co-field-group { grid-template-columns: 1fr; }
          .co-page-title { font-size: 22px; }
        }
/* checkoutpage */


/* thankyoupage */
/* ===== GLOBAL RESET & BASE ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===== KEYFRAMES ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes checkDraw {
  from { stroke-dashoffset: 80; }
  to   { stroke-dashoffset: 0; }
}

@keyframes circleDraw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

@keyframes pulseRing {
  0%   { transform: scale(1);    opacity: 0.35; }
  60%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ===== PAGE WRAPPER ===== */
.ty-page {
  min-height: 100vh;
  background: #f0f4ff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 80px;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  color: #0a0a0a;
}

/* ===== CONTAINER ===== */
.ty-container {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ===== HERO CARD ===== */
.ty-hero-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(37, 99, 235, 0.08), 0 1px 4px rgba(0,0,0,0.04);
  padding: 56px 40px 48px;
  text-align: center;
  animation: fadeInUp 0.55s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Success icon */
.ty-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.ty-pulse-ring {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.12);
  animation: pulseRing 2.2s ease-out 0.5s infinite;
}

.ty-success-svg {
  animation: scaleIn 0.65s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
  display: block;
}

.ty-success-svg .svg-circle {
  stroke-dasharray: 200;
  animation: circleDraw 0.7s 0.2s ease forwards;
}

.ty-success-svg .svg-check {
  stroke-dasharray: 80;
  animation: checkDraw 0.45s 0.78s ease forwards;
}

.ty-hero-heading {
  font-size: 2.1rem;
  font-weight: 800;
  color: #0a0a0a;
  letter-spacing: -0.5px;
  margin-bottom: 14px;
  line-height: 1.2;
}

.ty-hero-sub {
  font-size: 1.08rem;
  color: #1a1a1a;
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.65;
}

.ty-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 100px;
  letter-spacing: 0.3px;
}

.ty-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

/* ===== GRID ROW ===== */
.ty-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  animation: fadeInUp 0.55s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ===== SHARED CARD ===== */
.ty-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(37, 99, 235, 0.07), 0 1px 4px rgba(0,0,0,0.04);
  padding: 32px 32px 28px;
}

.ty-card-header {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid #e2e8f0;
}

.ty-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ty-card-icon svg {
  color: #2563eb;
}

.ty-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0a0a0a;
  letter-spacing: -0.2px;
}

/* ===== DETAIL ROWS ===== */
.ty-detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* FIX 1 — label left, value right, NO mirroring:
   label stays left-aligned, value stays left-aligned too
   but the row is space-between so value sits on the right side. */
.ty-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* FIX 2 — all labels are solid black, not gray */
.ty-detail-label {
  font-size: 0.875rem;
  color: #0a0a0a;          /* BLACK — was #64748b */
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

/* FIX 2 — all values are solid black, left-aligned inside their column */
.ty-detail-value {
  font-size: 0.9rem;
  color: #0a0a0a;          /* BLACK — was #0f172a with gray variants */
  font-weight: 600;
  text-align: right;       /* keeps value on the right edge */
  word-break: break-word;
}

.ty-detail-value.mono {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  font-size: 0.82rem;
  color: #0a0a0a;          /* BLACK */
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.ty-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 100px;
}

.ty-paid-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
}

/* Platform chips — keep blue tint, text black */
.ty-chip {
  display: inline-flex;
  align-items: center;
  background: #eff6ff;
  color: #0a0a0a;          /* BLACK */
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid #bfdbfe;
}

.ty-chip + .ty-chip {
  margin-left: 5px;
}

/* Deliverable tags — text black */
.ty-deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.ty-deliverable-item {
  display: inline-flex;
  align-items: center;
  background: #f8fafc;
  color: #0a0a0a;          /* BLACK */
  font-size: 0.76rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid #e2e8f0;
}

.ty-divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 16px 0;
}

.ty-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.ty-total-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0a0a0a;          /* BLACK */
}

.ty-total-amount {
  font-size: 1.3rem;
  font-weight: 800;
  color: #1d4ed8;
  letter-spacing: -0.5px;
}

/* ===== BUTTONS ROW ===== */
.ty-buttons-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.55s 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ty-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease, border-color 0.18s ease;
  border: 2px solid transparent;
  letter-spacing: 0.1px;
}

.ty-btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.32);
}

.ty-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.42);
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.ty-btn-primary:active { transform: translateY(0); }

.ty-btn-secondary {
  background: #ffffff;
  color: #1d4ed8;
  border-color: #93c5fd;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

.ty-btn-secondary:hover {
  transform: translateY(-2px);
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.14);
}

.ty-btn-secondary:active { transform: translateY(0); }

/* ===== NEXT STEPS CARD ===== */
.ty-next-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(37, 99, 235, 0.07), 0 1px 4px rgba(0,0,0,0.04);
  padding: 32px 40px 36px;
  animation: fadeInUp 0.55s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ty-next-heading {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0a0a0a;
  margin-bottom: 24px;
  letter-spacing: -0.2px;
}

.ty-next-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ty-next-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 16px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.ty-next-step:hover {
  border-color: #bfdbfe;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.09);
  transform: translateY(-2px);
}

.ty-step-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ty-step-icon.blue  { background: #eff6ff; color: #2563eb; }
.ty-step-icon.green { background: #f0fdf4; color: #16a34a; }
.ty-step-icon.amber { background: #fffbeb; color: #d97706; }

.ty-step-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #0a0a0a;          /* BLACK */
  margin-bottom: 4px;
  line-height: 1.3;
}

.ty-step-desc {
  font-size: 0.79rem;
  color: #1a1a1a;          /* NEAR-BLACK — was #64748b */
  line-height: 1.5;
}

/* ===== FOOTER NOTE ===== */
.ty-footer-note {
  text-align: center;
  font-size: 0.82rem;
  color: #1a1a1a;          /* NEAR-BLACK — was #94a3b8 */
  line-height: 1.6;
  animation: fadeInUp 0.55s 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ty-footer-note a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}

.ty-footer-note a:hover { text-decoration: underline; }

/* ===== RESPONSIVE — TABLET ===== */
@media (max-width: 860px) {
  .ty-cards-row       { grid-template-columns: 1fr; }
  .ty-next-steps      { grid-template-columns: 1fr; }
  .ty-hero-heading    { font-size: 1.65rem; }
  .ty-next-card       { padding: 28px 24px 28px; }
}

/* ===== RESPONSIVE — MOBILE ===== */
@media (max-width: 560px) {
  .ty-page            { padding: 28px 14px 60px; }
  .ty-hero-card       { padding: 40px 20px 36px; }
  .ty-hero-heading    { font-size: 1.4rem; }
  .ty-hero-sub        { font-size: 0.95rem; }
  .ty-card            { padding: 22px 18px 20px; }
  .ty-buttons-row     { flex-direction: column; align-items: stretch; }
  .ty-btn             { justify-content: center; }
  .ty-total-amount    { font-size: 1.1rem; }
  .ty-next-step       { padding: 14px 12px; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* thankyoupage */


/* gallerypage */
.gal-section {
  padding: 5rem 0;
  background-color: #f8f9fb;
}

.gal-wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  background: #e2e8f0;
}

.gal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.gal-item:hover .gal-img {
  transform: scale(1.05);
}

.gal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}

.gal-item:hover .gal-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.lb-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.lb-box {
  position: relative;
  max-width: 860px;
  width: 100%;
}

.lb-img {
  width: 100%;
  max-height: 580px;
  object-fit: contain;
  display: block;
  border-radius: 10px;
}

.lb-close,
.lb-prev,
.lb-next {
  position: absolute;
  background: rgba(0, 0, 0, 0.45);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.lb-close:hover,
.lb-prev:hover,
.lb-next:hover {
  background: rgba(0, 0, 0, 0.7);
}

.lb-close {
  top: -14px;
  right: -14px;
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.lb-prev,
.lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  font-size: 26px;
}

.lb-prev { left: -52px; }
.lb-next { right: -52px; }

@media (max-width: 900px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}

@media (max-width: 560px) {
  .gal-grid { grid-template-columns: 1fr; }
}
/* gallerypage */


.smm-user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.smm-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
}

.smm-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.smm-user-info small {
  font-size: 11px;
  color: #777;
}

.smm-user-info strong {
  font-size: 14px;
  color: #0d6efd;
  text-transform: capitalize;
}

.smm-user-trigger i {
  font-size: 18px;
  color: #0d6efd;
}
.smm-user-dropdown {
  position: relative;
  cursor: pointer;
  color: #0891b2;
  font-size: 16px;
  font-weight: 600;
}

.smm-user-dropdown span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.smm-user-menu {
  position: absolute;
  top: 35px;
  right: 0;
  width: 160px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
  overflow: hidden;
  z-index: 999;
}

.smm-user-menu a,
.smm-user-menu button {
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: #222;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: 0.3s;
}

.smm-user-menu a:hover,
.smm-user-menu button:hover {
  background: #f5f5f5;
  color: #0d6efd;
}

.smm-user-menu button {
  border-top: 1px solid #eee;
}




/* Leadspage */
/* ===========================================================
   Leads Management — SMM Consult Admin Dashboard
   =========================================================== */

.lm-page {
  --primary: #1F2D5A;
  --primary-dark: #16234A;
  --secondary: #00B4D8;
  --bg: #F8FAFC;
  --white: #FFFFFF;
  --border: #E5E7EB;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --purple: #7C3AED;
  --text-main: #1E293B;
  --text-muted: #64748B;
  --text-faint: #94A3B8;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);

  background: var(--bg);
  color: var(--text-main);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 24px;
  min-height: 100%;
  box-sizing: border-box;
}

.lm-page * {
  box-sizing: border-box;
}

.lm-page :focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
}

/* ----------------------------- Header ----------------------------- */

.lm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.lm-header h1 {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.lm-header p {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* ----------------------------- Alerts ----------------------------- */

.lm-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 18px;
}

.lm-alert button {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  padding: 2px;
}

.lm-alert button svg {
  width: 16px;
  height: 16px;
}

.lm-alert-danger {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #B91C1C;
}

/* --------------------------- Stat cards --------------------------- */

.lm-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.lm-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.lm-stat-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.lm-stat-card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lm-stat-card-icon svg {
  width: 22px;
  height: 22px;
}

.lm-stat-card-primary .lm-stat-card-icon { background: rgba(31, 45, 90, 0.1); color: var(--primary); }
.lm-stat-card-blue .lm-stat-card-icon { background: rgba(0, 180, 216, 0.12); color: #0093B0; }
.lm-stat-card-green .lm-stat-card-icon { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.lm-stat-card-purple .lm-stat-card-icon { background: rgba(124, 58, 237, 0.12); color: var(--purple); }

.lm-stat-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lm-stat-card-count {
  font-size: 26px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.1;
}

.lm-stat-card-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.lm-stat-card-desc {
  font-size: 12px;
  color: var(--text-faint);
}

/* ------------------------------- Tabs ------------------------------ */

.lm-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: fit-content;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 18px;
}

.lm-tab {
  border: none;
  background: transparent;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.lm-tab:hover {
  background: #F1F5F9;
  color: var(--primary);
}

.lm-tab-active,
.lm-tab-active:hover {
  background: var(--primary);
  color: var(--white);
}

/* --------------------------- Filters bar --------------------------- */

.lm-filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.lm-filter-field {
  position: relative;
  flex: 1 1 220px;
  min-width: 220px;
}

.lm-filter-field input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--white);
  color: var(--text-main);
}

.lm-filter-field input:focus {
  border-color: var(--secondary);
}

.lm-filter-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  pointer-events: none;
}

.lm-filter-select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  background: var(--white);
  color: var(--text-main);
  min-width: 170px;
  cursor: pointer;
}

.lm-filter-select:focus {
  border-color: var(--secondary);
}

/* ------------------------------- Table ------------------------------ */

.lm-table-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.lm-table-scroll {
  overflow-x: auto;
}

.lm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 760px;
}

.lm-table thead th {
  text-align: left;
  padding: 13px 16px;
  background: #F8FAFC;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.lm-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-main);
  white-space: nowrap;
}

.lm-table tbody tr:last-child td {
  border-bottom: none;
}

.lm-table tbody tr:hover {
  background: #FAFBFF;
}

/* ------------------------------ Badges ------------------------------ */

.lm-badge-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.lm-badge-type-contact { background: rgba(0, 180, 216, 0.12); color: #0093B0; }
.lm-badge-type-enquiry { background: rgba(16, 185, 129, 0.12); color: #0E9F6E; }
.lm-badge-type-career { background: rgba(124, 58, 237, 0.12); color: var(--purple); }

.lm-status-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 999px;
  padding: 6px 26px 6px 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 11px;
}

.lm-status-select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lm-status-select-new { background-color: rgba(245, 158, 11, 0.12); color: #B45309; }
.lm-status-select-contacted { background-color: rgba(0, 180, 216, 0.12); color: #0093B0; }
.lm-status-select-closed { background-color: rgba(16, 185, 129, 0.12); color: #0E9F6E; }

/* -------------------------------- Actions ------------------------------- */

.lm-row-actions {
  display: flex;
  gap: 6px;
}

.lm-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}

.lm-icon-btn svg {
  width: 16px;
  height: 16px;
}

.lm-icon-btn:hover {
  background: #F1F5F9;
  color: var(--primary);
  border-color: #CBD5E1;
}

.lm-icon-btn-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}

.lm-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ----------------------------- State blocks ----------------------------- */

.lm-state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 64px 24px;
  color: var(--text-muted);
  text-align: center;
}

.lm-state-block p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.lm-state-block span {
  font-size: 13px;
  color: var(--text-faint);
}

.lm-state-empty svg {
  width: 56px;
  height: 56px;
  color: #CBD5E1;
}

.lm-state-error svg {
  width: 32px;
  height: 32px;
  color: var(--danger);
}

.lm-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #E2E8F0;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: lm-spin 0.7s linear infinite;
}

@keyframes lm-spin {
  to { transform: rotate(360deg); }
}

/* ------------------------------ Pagination ------------------------------ */

.lm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}

.lm-pagination-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lm-pagination-page {
  font-size: 13px;
  color: var(--text-main);
  white-space: nowrap;
}

/* -------------------------------- Buttons -------------------------------- */

.lm-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lm-btn svg {
  width: 15px;
  height: 15px;
}

.lm-btn-primary {
  background: var(--primary);
  color: var(--white);
}

.lm-btn-primary:hover {
  background: var(--primary-dark);
}

.lm-btn-secondary {
  background: var(--white);
  color: #334155;
  border-color: var(--border);
}

.lm-btn-secondary:hover {
  background: #F1F5F9;
}

.lm-btn-danger {
  background: var(--danger);
  color: var(--white);
}

.lm-btn-danger:hover {
  background: #DC2626;
}

.lm-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* -------------------------------- Modals --------------------------------- */

.lm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: lm-overlay-fade 0.18s ease;
}

@keyframes lm-overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lm-modal-panel {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
  animation: lm-modal-pop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lm-modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.lm-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border);
}

.lm-modal-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lm-modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
}

.lm-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lm-detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lm-detail-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.lm-detail-value {
  font-size: 14px;
  color: var(--text-main);
  word-break: break-word;
}

.lm-detail-value-multiline {
  white-space: pre-wrap;
  line-height: 1.55;
}

.lm-resume-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ----------------------------- Confirm dialog ----------------------------- */

.lm-confirm-dialog {
  max-width: 380px;
  text-align: center;
  padding: 28px 24px;
}

.lm-confirm-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.lm-confirm-icon svg {
  width: 22px;
  height: 22px;
}

.lm-confirm-dialog h3 {
  margin: 0 0 8px;
  font-size: 16px;
  color: #0F172A;
}

.lm-confirm-dialog p {
  margin: 0 0 22px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

.lm-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ------------------------------- Responsive ------------------------------- */

@media (max-width: 1100px) {
  .lm-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .lm-page {
    padding: 16px;
  }

  .lm-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .lm-stats-grid {
    grid-template-columns: 1fr;
  }

  .lm-filters-bar {
    flex-direction: column;
  }

  .lm-filter-field {
    min-width: 100%;
  }

  .lm-filter-select {
    width: 100%;
  }

  .lm-pagination {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lm-modal-panel,
  .lm-modal-overlay,
  .lm-spinner,
  .lm-stat-card {
    animation: none !important;
    transition: none !important;
  }
}
/* Leadspage */ 



/* upgradepopuppage */
/* upgradepopup */

/* ---------------------------------------------
   Design tokens
   All text uses pure black at varying opacities
   instead of gray hex values, per brief.
--------------------------------------------- */
:root {
  --up-ink: #000000;
  --up-ink-85: rgba(0, 0, 0, 0.85);
  --up-ink-65: rgba(0, 0, 0, 0.65);
  --up-ink-45: rgba(0, 0, 0, 0.45);
  --up-ink-25: rgba(0, 0, 0, 0.12);

  --up-accent: #3730A3;
  --up-accent-2: #6D28D9;
  --up-accent-soft: #EEF0FF;
  --up-accent-border: #C7CCFB;

  --up-surface: #FFFFFF;
  --up-surface-muted: #FAFAFA;
  --up-surface-line: rgba(0, 0, 0, 0.07);

  --up-success: #047857;
  --up-success-bg: #E9F8F1;

  --up-warning: #92400E;
  --up-warning-bg: #FDF1DC;
  --up-warning-border: #F0D8A8;
}

/* ---------------------------------------------
   Overlay
--------------------------------------------- */
.upgrade-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(120% 120% at 50% 0%, rgba(30, 27, 75, 0.55) 0%, rgba(0, 0, 0, 0.72) 65%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Sits above any host-page header/nav, whatever z-index it uses */
  z-index: 999999;
  overflow-y: auto;
  animation: overlayFadeIn 0.25s ease forwards;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------------------------------------------
   Popup shell
--------------------------------------------- */
.upgrade-popup {
  font-family: 'Inter', sans-serif;
  width: 850px;
  max-width: 100%;
  max-height: min(90vh, 800px);
  /* Header and footer stay put; only the body section (below) scrolls */
  display: flex;
  flex-direction: column;
  background: var(--up-surface);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 40px 90px -20px rgba(17, 12, 46, 0.45),
    0 12px 32px -8px rgba(17, 12, 46, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.03);
  animation: popupScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

/* Signature top accent line — the one bold, premium flourish */
.upgrade-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--up-accent) 0%, var(--up-accent-2) 50%, var(--up-accent) 100%);
  z-index: 1;
}

@keyframes popupScaleIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ---------------------------------------------
   Header — pinned at the top of the dialog,
   never scrolls out of view
--------------------------------------------- */
.upgrade-popup__header {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 30px 32px 20px 32px;
  border-bottom: 1px solid var(--up-surface-line);
}

.upgrade-popup__title {
  font-family: 'Manrope', sans-serif;
  font-size: 25px;
  font-weight: 800;
  color: var(--up-ink);
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.upgrade-popup__subtitle {
  font-size: 14px;
  line-height: 1.55;
  color: var(--up-ink-65);
  margin: 0;
  max-width: 480px;
  font-weight: 500;
}

.upgrade-popup__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--up-surface-line);
  background: var(--up-surface-muted);
  color: var(--up-ink-85);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.upgrade-popup__close:hover {
  background: var(--up-ink);
  color: #FFFFFF;
  border-color: var(--up-ink);
  transform: rotate(90deg);
}

/* ---------------------------------------------
   Body / sections — this is the ONLY part that
   scrolls; header and footer stay fixed
--------------------------------------------- */
.upgrade-popup__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.upgrade-popup__body::-webkit-scrollbar {
  width: 8px;
}
.upgrade-popup__body::-webkit-scrollbar-track {
  background: transparent;
}
.upgrade-popup__body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}
.upgrade-popup__body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}

.upgrade-popup__section-title {
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--up-ink);
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.upgrade-popup__section-title::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--up-accent), var(--up-accent-2));
}

.upgrade-popup__section-subtitle {
  font-size: 13px;
  line-height: 1.55;
  color: var(--up-ink-65);
  margin: -8px 0 12px 0;
  font-weight: 500;
}

/* ---------------------------------------------
   Current plan / New plan cards
--------------------------------------------- */
.upgrade-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-radius: 16px;
  padding: 20px 22px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.upgrade-card--current {
  background: var(--up-surface-muted);
  border: 1px solid var(--up-surface-line);
}

.upgrade-card--new {
  background: linear-gradient(135deg, var(--up-accent-soft) 0%, #F4F1FF 100%);
  border: 1px solid var(--up-accent-border);
  box-shadow: 0 10px 28px -12px rgba(55, 48, 163, 0.35);
}

.upgrade-card__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upgrade-card__icon--slate {
  background: rgba(0, 0, 0, 0.08);
  color: var(--up-ink-85);
}

.upgrade-card__icon--indigo {
  background: linear-gradient(135deg, var(--up-accent), var(--up-accent-2));
  color: #FFFFFF;
  box-shadow: 0 6px 14px -4px rgba(55, 48, 163, 0.55);
}

.upgrade-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.upgrade-card__label {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--up-ink-45);
}

.upgrade-card__label--indigo {
  color: var(--up-accent);
}

.upgrade-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 3px;
}

.upgrade-card__name {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--up-ink);
  letter-spacing: -0.01em;
}

.upgrade-card__price {
  font-size: 18px;
  font-weight: 800;
  color: var(--up-ink);
  white-space: nowrap;
}

.upgrade-card__price--indigo {
  color: var(--up-accent);
}

.upgrade-card__meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--up-ink-65);
}

.upgrade-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 8px;
}

.upgrade-card__specs span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--up-accent);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--up-accent-border);
  padding: 4px 10px;
  border-radius: 999px;
}

/* ---------------------------------------------
   Grid + usage cards
--------------------------------------------- */
.upgrade-grid {
  display: grid;
  gap: 12px;
}

.upgrade-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.usage-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  border-radius: 14px;
  padding: 16px;
  background: var(--up-surface);
  border: 1px solid var(--up-surface-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.usage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.18);
  border-color: var(--up-ink-25);
}

.usage-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
}

.usage-card--posts .usage-card__icon { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.usage-card--reels .usage-card__icon { background: linear-gradient(135deg, #DB2777, #9D174D); }
.usage-card--videos .usage-card__icon { background: linear-gradient(135deg, #059669, #047857); }
.usage-card--duration .usage-card__icon { background: linear-gradient(135deg, var(--up-accent), var(--up-accent-2)); }

.usage-card__count {
  font-family: 'Manrope', sans-serif;
  font-size: 23px;
  font-weight: 800;
  color: var(--up-ink);
  letter-spacing: -0.01em;
}

.usage-card__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--up-ink-65);
}

/* ---------------------------------------------
   Remaining deliverables badges
--------------------------------------------- */
.remaining-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border-radius: 12px;
  background: var(--up-success-bg);
  border: 1px solid rgba(4, 120, 87, 0.18);
  color: var(--up-success);
  font-size: 13.5px;
  font-weight: 800;
}

/* ---------------------------------------------
   After upgrade cards
--------------------------------------------- */
.after-upgrade-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px 12px;
  border-radius: 14px;
  background: var(--up-success-bg);
  border: 1px solid rgba(4, 120, 87, 0.18);
  text-align: center;
}

.after-upgrade-card__value {
  font-family: 'Manrope', sans-serif;
  font-size: 25px;
  font-weight: 800;
  color: var(--up-success);
  letter-spacing: -0.01em;
}

.after-upgrade-card__label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--up-success);
}

/* ---------------------------------------------
   Plan Duration — "after upgrade" sub-block and
   the small calculation line beneath it
--------------------------------------------- */
.duration-after-upgrade {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.duration-calc {
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--up-success);
  background: var(--up-success-bg);
  border: 1px solid rgba(4, 120, 87, 0.18);
  border-radius: 10px;
  padding: 9px 12px;
  letter-spacing: 0.01em;
}

/* ---------------------------------------------
   Plan Duration — timeline detail row
--------------------------------------------- */
.timeline-row {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

.timeline-row__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--up-surface);
  border: 1px solid var(--up-surface-line);
}

.timeline-row__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--up-ink-45);
}

.timeline-row__value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--up-ink);
}

/* ---------------------------------------------
   Payment summary
--------------------------------------------- */
.payment-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.payment-summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--up-surface-muted);
  border: 1px solid var(--up-surface-line);
  font-size: 14px;
  font-weight: 700;
  color: var(--up-ink-85);
}

.payment-summary__row--highlight {
  background: var(--up-warning-bg);
  border: 1px solid var(--up-warning-border);
  color: var(--up-warning);
  font-weight: 800;
  font-size: 15px;
}

.payment-summary__row--highlight span:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------------------------------------------
   Footer buttons — pinned at the bottom of the
   dialog, never scrolls out of view.

   NOTE: class names below are namespaced with the
   "uppopup-" prefix so they cannot collide with a
   generic global ".btn" used elsewhere on the host
   page. Only these classes control this popup's
   buttons.
--------------------------------------------- */
.upgrade-popup__footer {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 18px 32px 28px 32px;
  border-top: 1px solid var(--up-surface-line);
  background: var(--up-surface);
}

.uppopup-btn {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 26px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.uppopup-btn:active {
  transform: scale(0.98);
}

.uppopup-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.uppopup-btn--cancel {
  background: var(--up-surface);
  border: 1px solid var(--up-ink-25);
  color: var(--up-ink);
}

.uppopup-btn--cancel:hover {
  background: var(--up-surface-muted);
  border-color: rgba(0, 0, 0, 0.25);
}

.uppopup-btn--continue {
  background: linear-gradient(135deg, var(--up-accent) 0%, var(--up-accent-2) 100%);
  border: 1px solid transparent;
  color: #FFFFFF;
  box-shadow: 0 10px 24px -8px rgba(55, 48, 163, 0.55);
}

.uppopup-btn--continue:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 14px 30px -8px rgba(55, 48, 163, 0.65);
}

.uppopup-btn--continue:disabled {
  background: var(--up-ink-25);
  box-shadow: none;
  color: var(--up-ink-45);
}

/* ---------------------------------------------
   Responsive
--------------------------------------------- */
@media (max-width: 900px) {
  .upgrade-popup {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .upgrade-popup-overlay {
    padding: 0 12px 12px 12px;
    align-items: flex-end;
  }

  .upgrade-popup {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    /* Respect notches/home-indicators on mobile devices */
    max-height: 92dvh;
    border-radius: 22px 22px 0 0;
  }

  .upgrade-popup__header {
    padding: 20px 20px 14px 20px;
  }

  .upgrade-popup__title {
    font-size: 20px;
  }

  .upgrade-popup__subtitle {
    font-size: 13px;
  }

  .upgrade-popup__body {
    padding: 16px 20px;
    gap: 20px;
  }

  .upgrade-popup__footer {
    padding: 14px 20px calc(20px + env(safe-area-inset-bottom, 0px)) 20px;
    flex-direction: column-reverse;
  }

  .upgrade-grid--3 {
    grid-template-columns: 1fr;
  }

  .uppopup-btn {
    width: 100%;
  }

  .upgrade-card {
    padding: 16px;
  }

  .upgrade-card__row {
    flex-direction: column;
    gap: 2px;
  }

  .upgrade-card__specs {
    flex-wrap: wrap;
    gap: 8px;
  }

  .timeline-row {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .upgrade-popup-overlay {
    padding: 0 8px 8px 8px;
  }

  .upgrade-popup__header {
    gap: 10px;
  }

  .upgrade-popup__close {
    width: 32px;
    height: 32px;
  }

  .usage-card,
  .after-upgrade-card {
    padding: 14px;
  }

  .payment-summary__row {
    padding: 12px;
    font-size: 13px;
  }
}
/* upgradepopup */
/* upgradepopuppage */


.auth-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}


/* forgetpassword */
/* ===== SMM Consult - Forgot Password Page ===== */
:root {
  --fp-primary: #0e88cc;
  --fp-primary-hover: #0c76b0;
  --fp-text-dark: #1a1a1a;
  --fp-text-muted: #6b7280;
  --fp-border: #e5e7eb;
  --fp-error: #e0453f;
  --fp-success: #1fa564;
  --fp-bg: #f4f6f8;
  --fp-card-bg: #ffffff;
  --fp-radius-lg: 16px;
  --fp-radius-md: 10px;
  --fp-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --fp-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

.fp-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--fp-bg);
  font-family: var(--fp-font);
  padding: 24px;
}

.fp-card {
  width: 100%;
  max-width: 460px;
  background: var(--fp-card-bg);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow);
  padding: 40px 36px;
  text-align: center;
}

/* ---------- Icon ---------- */
.fp-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px auto;
  background-color: #eaf5fc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Headings ---------- */
.fp-heading {
  font-size: 26px;
  font-weight: 800;
  color: var(--fp-text-dark);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.fp-subtitle {
  font-size: 14px;
  color: #000;
  margin: 0 0 28px 0;
  line-height: 1.6;
}

/* ---------- Form ---------- */
.fp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.fp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-text-dark);
  margin-left: 2px;
}

.fp-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--fp-text-dark);
  background-color: #ffffff;
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-md);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fp-input::placeholder {
  color: #9ca3af;
}

.fp-input:focus {
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 3px rgba(14, 136, 204, 0.15);
}

.fp-input--error {
  border-color: var(--fp-error);
}

.fp-input--error:focus {
  box-shadow: 0 0 0 3px rgba(224, 69, 63, 0.15);
}

.fp-input:disabled {
  background-color: #f9fafb;
  cursor: not-allowed;
}

.fp-error {
  font-size: 12px;
  color: var(--fp-error);
  margin-left: 2px;
}

/* ---------- Primary Button ---------- */
.fp-btn {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: #ffffff;
  background-color: var(--fp-primary);
  border: none;
  border-radius: var(--fp-radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  margin-top: 4px;
}

.fp-btn:hover:not(:disabled) {
  background-color: var(--fp-primary-hover);
  box-shadow: 0 6px 16px rgba(14, 136, 204, 0.3);
  transform: translateY(-1px);
}

.fp-btn:active:not(:disabled) {
  transform: translateY(0);
}

.fp-btn:disabled {
  background-color: var(--fp-primary);
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Spinner ---------- */
.fp-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: fp-spin 0.7s linear infinite;
}

@keyframes fp-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Footer / Links ---------- */
.fp-footer-text {
  text-align: center;
  font-size: 14px;
  color: #000;
  margin: 24px 0 0 0;
}

.fp-link {
  color: var(--fp-primary);
  font-weight: 700;
  text-decoration: none;
  transition: color 0.2s ease;
}

.fp-link:hover {
  color: var(--fp-primary-hover);
  text-decoration: underline;
}

/* ---------- Separator ---------- */
.fp-separator {
  display: flex;
  align-items: center;
  text-align: center;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin: 24px 0;
}

.fp-separator::before,
.fp-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--fp-border);
}

.fp-separator span {
  padding: 0 14px;
}

/* ---------- Back to Home Link ---------- */
.fp-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fp-text-muted);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.15s ease;
}

.fp-back-link:hover {
  color: var(--fp-primary);
  transform: translateX(-2px);
}

/* ---------- Success State ---------- */
.fp-success {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fp-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--fp-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: fp-pop 0.35s ease;
}

@keyframes fp-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fp-success .fp-heading,
.fp-success .fp-subtitle {
  text-align: center;
}

.fp-resend {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.fp-resend__text {
  font-size: 13px;
  color: var(--fp-text-muted);
}

.fp-resend__btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--fp-primary);
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s ease;
}

.fp-resend__btn:hover:not(:disabled) {
  color: var(--fp-primary-hover);
  text-decoration: underline;
}

.fp-resend__btn:disabled {
  color: #9ca3af;
  cursor: not-allowed;
  text-decoration: none;
}

.fp-success .fp-separator {
  width: 100%;
  margin: 24px 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .fp-card {
    padding: 28px 22px;
    border-radius: 14px;
  }

  .fp-heading {
    font-size: 21px;
  }

  .fp-subtitle {
    font-size: 13px;
  }

  .fp-input,
  .fp-btn {
    padding: 12px 14px;
    font-size: 14px;
  }
}
/* forgetpassword */


/* resetpassword */
/* ===== SMM Consult - Reset Password Page ===== */
:root {
  --rp-primary: #0e88cc;
  --rp-primary-hover: #0c76b0;
  --rp-text-dark: #1a1a1a;
  --rp-text-muted: #6b7280;
  --rp-border: #e5e7eb;
  --rp-error: #e0453f;
  --rp-success: #1fa564;
  --rp-bg: #f4f6f8;
  --rp-card-bg: #ffffff;
  --rp-radius-lg: 16px;
  --rp-radius-md: 10px;
  --rp-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  --rp-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

.rp-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rp-bg);
  font-family: var(--rp-font);
  padding: 24px;
}

.rp-card {
  width: 100%;
  max-width: 460px;
  background: var(--rp-card-bg);
  border-radius: var(--rp-radius-lg);
  box-shadow: var(--rp-shadow);
  padding: 40px 36px;
  text-align: center;
}

.rp-card--checking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 36px;
}

.rp-checking-text {
  font-size: 14px;
  color: var(--rp-text-muted);
  margin: 0;
}

/* ---------- Icon ---------- */
.rp-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px auto;
  background-color: #eaf5fc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rp-icon--warning {
  background-color: #fdeceb;
}

/* ---------- Headings ---------- */
.rp-heading {
  font-size: 26px;
  font-weight: 800;
  color: var(--rp-text-dark);
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.rp-subtitle {
  font-size: 14px;
  color: var(--rp-text-muted);
  margin: 0 0 28px 0;
  line-height: 1.6;
}

/* ---------- Form ---------- */
.rp-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.rp-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--rp-text-dark);
  margin-left: 2px;
}

.rp-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.rp-input {
  width: 100%;
  padding: 14px 44px 14px 16px;
  font-size: 14px;
  font-family: inherit;
  color: var(--rp-text-dark);
  background-color: #ffffff;
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-md);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rp-input::placeholder {
  color: #9ca3af;
}

.rp-input:focus {
  border-color: var(--rp-primary);
  box-shadow: 0 0 0 3px rgba(14, 136, 204, 0.15);
}

.rp-input--error {
  border-color: var(--rp-error);
}

.rp-input--error:focus {
  box-shadow: 0 0 0 3px rgba(224, 69, 63, 0.15);
}

.rp-input:disabled {
  background-color: #f9fafb;
  cursor: not-allowed;
}

.rp-eye-btn {
  position: absolute;
  right: 14px;
  background: none;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s ease;
}

.rp-eye-btn:hover {
  color: var(--rp-primary);
}

.rp-error {
  font-size: 12px;
  color: var(--rp-error);
  margin-left: 2px;
}

/* ---------- Primary Button ---------- */
.rp-btn {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  color: #ffffff;
  background-color: var(--rp-primary);
  border: none;
  border-radius: var(--rp-radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  margin-top: 4px;
}

.rp-btn:hover:not(:disabled) {
  background-color: var(--rp-primary-hover);
  box-shadow: 0 6px 16px rgba(14, 136, 204, 0.3);
  transform: translateY(-1px);
}

.rp-btn:active:not(:disabled) {
  transform: translateY(0);
}

.rp-btn:disabled {
  background-color: var(--rp-primary);
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* ---------- Spinner ---------- */
.rp-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: rp-spin 0.7s linear infinite;
}

.rp-spinner--dark {
  border: 2px solid rgba(14, 136, 204, 0.2);
  border-top-color: var(--rp-primary);
  width: 28px;
  height: 28px;
}

@keyframes rp-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Success State ---------- */
.rp-success {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rp-success__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--rp-success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  animation: rp-pop 0.35s ease;
}

@keyframes rp-pop {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.rp-success .rp-heading,
.rp-success .rp-subtitle {
  text-align: center;
}

.rp-redirect-text {
  font-size: 13px;
  color: var(--rp-text-muted);
  margin: 4px 0 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .rp-card {
    padding: 28px 22px;
    border-radius: 14px;
  }

  .rp-heading {
    font-size: 21px;
  }

  .rp-subtitle {
    font-size: 13px;
  }

  .rp-input,
  .rp-btn {
    padding: 12px 14px;
    font-size: 14px;
  }

  .rp-input {
    padding-right: 40px;
  }
}
/* resetpassword */


/* loginsingup */
/* ===== CONTAINER ===== */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    padding: 20px;
}

/* ===== BOX ===== */
.auth-box {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    padding: 32px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

/* ===== TABS ===== */
.auth-tabs {
    display: flex;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 999px;
    margin-bottom: 20px;
}

.auth-tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease;
}

.auth-tab-btn.active {
    background: #0284c7;
    color: #fff;
}

/* ===== INTRO ===== */
.auth-intro h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.auth-intro p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 20px;
}

/* ===== FORM ===== */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* INPUTS */
.auth-form input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-form input:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
}

/* NAME ROW */
.auth-row {
    display: flex;
    gap: 10px;
}

.auth-row input {
    flex: 1;
    min-width: 0;
}

/* ===== PASSWORD FIELD WITH EYE TOGGLE ===== */
.auth-password-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.auth-password-wrapper input {
    width: 100%;
    padding-right: 42px;
}

.auth-eye-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    cursor: pointer;
    font-size: 16px;
    transition: color 0.2s ease;
    user-select: none;
}

.auth-eye-icon:hover {
    color: #0284c7;
}

/* ===== FORGOT PASSWORD LINK ===== */
.auth-forgot-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
}

.auth-forgot-link {
    color: #0E88CC;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    text-decoration: none;
}

.auth-forgot-link:hover {
    color: #0369a1;
    text-decoration: underline;
}

/* BUTTON */
.auth-btn {
    width: 100%;
    background: #0284c7;
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.auth-btn:hover {
    background: #0369a1;
}

.auth-btn:active {
    transform: translateY(1px);
}

.auth-btn:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

/* SWITCH TEXT */
.auth-switch {
    text-align: center;
    font-size: 14px;
    color: #64748b;
}

.auth-switch span {
    color: #0284c7;
    cursor: pointer;
    font-weight: 600;
    transition: color 0.2s ease;
}

.auth-switch span:hover {
    color: #0369a1;
    text-decoration: underline;
}

/* OTP input center spacing */
.auth-form input[type="text"] {
    letter-spacing: 4px;
    text-align: center;
    font-weight: 600;
}

/* ===== RESPONSIVE ===== */

/* Tablets */
@media (max-width: 640px) {
    .auth-box {
        max-width: 100%;
        padding: 26px;
    }

    .auth-intro h2 {
        font-size: 24px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .auth-container {
        padding: 12px;
    }

    .auth-box {
        padding: 20px;
        border-radius: 14px;
    }

    .auth-intro h2 {
        font-size: 22px;
    }

    .auth-intro p {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .auth-row {
        flex-direction: column;
        gap: 14px;
    }

    .auth-form input,
    .auth-btn {
        padding: 11px 13px;
        font-size: 14px;
    }

    .auth-password-wrapper input {
        padding-right: 40px;
    }

    .auth-tab-btn {
        font-size: 13px;
        padding: 9px;
    }

    .auth-forgot-link {
        font-size: 12.5px;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .auth-box {
        padding: 16px;
    }

    .auth-intro h2 {
        font-size: 20px;
    }
}

.auth-error {
  margin-top: 12px;
  color: #dc2626;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
/* loginsingup */



/* pricingpage */
.smm-pricing-v2-section {
    --v2-font: 'Plus Jakarta Sans', system-ui, sans-serif;
    --v2-bg: #f0f4fb;
    --v2-white: #ffffff;
    --v2-ink: #000;
    --v2-ink-2: #000;
    --v2-ink-3: #000;
    --v2-border: #e2e8f0;
    --v2-accent: #0891b2;
    --v2-accent-light: #eef2ff;
    --v2-accent-mid: #2563eb;
    --v2-green: #15803d;
    --v2-green-bg: #f0fdf4;
    --v2-green-bdr: #bbf7d0;
    --v2-amber: #92400e;
    --v2-amber-bg: #fffbeb;
    --v2-amber-bdr: #fde68a;
    --v2-radius: 16px;
    --v2-radius-sm: 10px;
    --v2-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 8px 28px rgba(0, 0, 0, 0.07);
    --v2-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.09), 0 20px 48px rgba(0, 0, 0, 0.1);

    font-family: var(--v2-font);
    background: var(--v2-bg);
    padding: 75px 0 100px;
}

/* ── Container ── */
.smm-pricing-v2-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ── Header ── */
.smm-pricing-v2-header {
    text-align: center;
    margin-bottom: 52px;
}

.smm-pricing-v2-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-accent);
    background: var(--v2-accent-light);
    padding: 5px 14px;
    border-radius: 100px;
    margin-bottom: 16px;
}

.smm-pricing-v2-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    color: var(--v2-ink);
    margin: 0 0 10px;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.smm-pricing-v2-title em {
    font-style: italic;
    font-weight: 700;
    color: var(--v2-accent);
}

.smm-pricing-v2-subtitle {
    font-size: 15.5px;
    color: var(--v2-ink-3);
    margin: 0 0 24px;
}

/* ── Currency Toggle ── */
.smm-pricing-v2-toggle {
    display: inline-flex;
    align-items: center;
    background: var(--v2-white);
    border: 1.5px solid var(--v2-border);
    border-radius: 10px;
    padding: 4px;
    gap: 21px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.smm-pricing-v2-toggle-btn {
    font-family: var(--v2-font);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 20px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    background: transparent;
    color: var(--v2-ink-3);
    transition: background 0.18s, color 0.18s;
}

.smm-pricing-v2-toggle-btn.active {
    background: var(--v2-accent);
    color: #fff;
}

/* ── Grid — equal height cards ── */
.smm-pricing-v2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    /* equal height */
}

@media (max-width: 1024px) {
    .smm-pricing-v2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .smm-pricing-v2-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Card ── */
.smm-pricing-v2-card {
    background: var(--v2-white);
    border: 1.5px solid var(--v2-border);
    border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow);
    padding: 28px 26px 28px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
}

.smm-pricing-v2-card:hover {
    box-shadow: var(--v2-shadow-hover);
    transform: translateY(-4px);
}

/* Recommended top bar */
.smm-pricing-v2-card--recommended {
    border-color: #93c5fd;
}

.smm-pricing-v2-card--recommended::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--v2-accent), #60a5fa);
    border-radius: var(--v2-radius) var(--v2-radius) 0 0;
}

/* ── Rec badge ── */
.smm-pricing-v2-rec-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--v2-accent);
    background: var(--v2-accent-light);
    border: 1px solid #c7d7fd;
    padding: 4px 11px;
    border-radius: 100px;
    margin-bottom: 12px;
    width: fit-content;
}

/* ── Package name & desc ── */
.smm-pricing-v2-pkg-name {
    font-size: 20px;
    font-weight: 800;
    color: var(--v2-ink);
    margin: 0 0 6px;
}

.smm-pricing-v2-pkg-desc {
    font-size: 13px;
    color: var(--v2-ink-3);
    margin: 0;
    line-height: 1.55;
}

/* ── Divider ── */
.smm-pricing-v2-divider {
    height: 1px;
    background: var(--v2-border);
    margin: 18px 0;
}

/* ── Price block ── */
.smm-pricing-v2-price-block {
    margin-bottom: 28px;
}

.smm-pricing-v2-price-main {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    line-height: 1;
}

.smm-pricing-v2-price-symbol {
    font-size: 20px;
    font-weight: 700;
    color: #e11d48;
    align-self: flex-start;
    margin-top: 5px;
}

.smm-pricing-v2-price-amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--v2-ink);
    letter-spacing: -0.035em;
}

.smm-pricing-v2-price-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    flex-wrap: wrap;
}

.smm-pricing-v2-price-alt {
    font-size: 12px;
    font-weight: 600;
    color: var(--v2-ink-3);
    background: #f1f5f9;
    padding: 3px 9px;
    border-radius: 100px;
    border: 1px solid var(--v2-border);
}

.smm-pricing-v2-price-duration {
    font-size: 16px;
    color: #e11d48;
    font-weight: 600;
    margin-bottom: 6px;
}

/* ── Stats strip ── */
.smm-pricing-v2-stats {
    display: flex;
    background: var(--v2-accent-light);
    border: 1px solid #c7d7fd;
    border-radius: var(--v2-radius-sm);
    overflow: hidden;
    margin-bottom: 20px;
}

.smm-pricing-v2-stat {
    flex: 1;
    text-align: center;
    padding: 10px 4px;
    border-right: 1px solid #c7d7fd;
}

.smm-pricing-v2-stat:last-child {
    border-right: none;
}

.smm-pricing-v2-stat-num {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: var(--v2-accent);
    line-height: 1.1;
}

.smm-pricing-v2-stat-label {
    display: block;
    font-size: 11px;
    font-weight: 900;
    color: var(--v2-accent);
    /* opacity: 0.7; */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* ── Section label ── */
.smm-pricing-v2-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-ink-3);
    margin: 0 0 10px;
}

/* ── Platforms ── */
.smm-pricing-v2-platforms {
    margin-bottom: 18px;
}

.smm-pricing-v2-icons-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Font Awesome icon chips */
.smm-pricing-v2-icon-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1.5px solid var(--v2-border);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    position: relative;
    cursor: default;
    text-decoration: none;
}

.smm-pricing-v2-icon-chip i {
    font-size: 15px;
    line-height: 1;
}

/* Per-platform brand colours */
.smm-pricing-v2-icon-chip.v2-ig i {
    color: #e1306c;
}

.smm-pricing-v2-icon-chip.v2-fb i {
    color: #1877f2;
}

.smm-pricing-v2-icon-chip.v2-yt i {
    color: #ff0000;
}

.smm-pricing-v2-icon-chip.v2-wa i {
    color: #25d366;
}

.smm-pricing-v2-icon-chip.v2-tk i {
    color: #010101;
}

.smm-pricing-v2-icon-chip.v2-gm i {
    color: #4285f4;
}

.smm-pricing-v2-icon-chip.v2-li i {
    color: #0077b5;
}

.smm-pricing-v2-icon-chip:hover {
    background: var(--v2-accent-light);
    border-color: #93c5fd;
}

/* Tooltip */
.smm-pricing-v2-icon-chip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--v2-ink);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    font-family: var(--v2-font);
}

.smm-pricing-v2-icon-chip:hover::after {
    opacity: 1;
}

/* ── Deliverables ── */
.smm-pricing-v2-deliverables {
    margin-bottom: 18px;
    flex: 1;
    /* pushes note + CTA to bottom */
}

.smm-pricing-v2-deliv-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.smm-pricing-v2-deliv-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    color: var(--v2-ink-2);
    font-weight: 500;
}

.smm-pricing-v2-deliv-item i {
    font-size: 15px;
    color: var(--v2-accent);
    margin-top: 1px;
    flex-shrink: 0;
}

.smm-pricing-v2-deliv-item.v2-muted {
    color: var(--v2-ink-3);
    font-style: italic;
}

.smm-pricing-v2-deliv-item.v2-muted i {
    color: var(--v2-ink-3);
}

/* ── Notes ── */
.smm-pricing-v2-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 13px;
    border-radius: var(--v2-radius-sm);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.55;
    margin-bottom: 18px;
    border: 1px solid;
}

.smm-pricing-v2-note i {
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

.smm-pricing-v2-note--grey {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

.smm-pricing-v2-note--grey i {
    color: #94a3b8;
}

.smm-pricing-v2-note--green {
    background: var(--v2-green-bg);
    color: var(--v2-green);
    border-color: var(--v2-green-bdr);
}

.smm-pricing-v2-note--green i {
    color: var(--v2-green);
}

.smm-pricing-v2-note--amber {
    background: var(--v2-amber-bg);
    color: var(--v2-amber);
    border-color: var(--v2-amber-bdr);
}

.smm-pricing-v2-note--amber i {
    color: #d97706;
}

.smm-pricing-v2-note-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ── CTA ── */
.smm-pricing-v2-cta {
    margin-top: auto;
}

.smm-pricing-v2-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    font-family: var(--v2-font);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    background: #0891b2;
    border: none;
    border-radius: var(--v2-radius-sm);
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
}

.smm-pricing-v2-btn:hover {
    background: #e11d48;
    box-shadow: 0 4px 20px rgba(26, 86, 219, 0.28);
    transform: translateY(-1px);
}

.smm-pricing-v2-btn:active {
    transform: translateY(0);
}

/* ── Tablet: 3rd card centred ── */
@media (max-width: 1024px) and (min-width: 601px) {
    .smm-pricing-v2-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 520px;
        justify-self: center;
        width: 100%;
    }
}

/* ── Mobile ── */
@media (max-width: 600px) {
    .smm-pricing-v2-section {
        padding: 60px 0 72px;
    }

    .smm-pricing-v2-card {
        padding: 24px 20px;
    }

    .smm-pricing-v2-header {
        margin-bottom: 36px;
    }

    .smm-pricing-v2-price-amount {
        font-size: 36px;
    }
}


.smm-pricing-v2-platform-note {
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #000;
}

.v2-muted i {
    color: #ef4444 !important;
}

.v2-muted span {
    color: #ef4444;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   Platform tab bar
   ══════════════════════════════════════════════════════════════ */

.smm-pricing-tabs-wrap {
    display: flex;
    justify-content: center;
    margin: 28px 0 44px;
}

.smm-pricing-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background: var(--v2-white, #fff);
    border: 1.5px solid var(--v2-border, #e2e8f0);
    border-radius: 100px;
    padding: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    position: relative;
}

.smm-pricing-tab-btn {
    font-family: var(--v2-font, inherit);
    font-size: 13px;
    font-weight: 600;
    padding: 9px 18px;
    border: none;
    border-radius: 100px;
    cursor: pointer;
    background: transparent;
    color: #475569;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
}

.smm-pricing-tab-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.smm-pricing-tab-btn.active {
    background: var(--v2-accent, #0891b2);
    color: #fff;
}

.smm-pricing-tab-more-wrap {
    position: relative;
}

.smm-pricing-tab-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.smm-pricing-tab-more-caret {
    font-size: 10px;
    transition: transform 0.18s;
}

.smm-pricing-tab-more-btn.active .smm-pricing-tab-more-caret,
.smm-pricing-tab-more-wrap.open .smm-pricing-tab-more-caret {
    transform: rotate(180deg);
}

.smm-pricing-tab-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1.5px solid var(--v2-border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.09), 0 20px 48px rgba(0, 0, 0, 0.1);
    padding: 8px;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    z-index: 30;
}

.smm-pricing-tab-dropdown-item {
    font-family: var(--v2-font, inherit);
    text-align: left;
    padding: 9px 12px;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.smm-pricing-tab-dropdown-item:hover {
    background: var(--v2-accent-light, #eef2ff);
    color: var(--v2-accent, #0891b2);
}

.smm-pricing-tab-dropdown-item.active {
    background: var(--v2-accent, #0891b2);
    color: #fff;
}

@media (max-width: 600px) {
    .smm-pricing-tabs {
        gap: 6px;
        padding: 6px;
        border-radius: 18px;
    }

    .smm-pricing-tab-btn {
        padding: 8px 13px;
        font-size: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   Platform-specific Buy Now button colours
   (Only the button background/hover changes; card design untouched)
   ══════════════════════════════════════════════════════════════ */
.smm-pricing-v2-btn--instagram {
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.smm-pricing-v2-btn--instagram:hover {
    background: linear-gradient(135deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    box-shadow: 0 4px 20px rgba(214, 41, 118, 0.35);
}

.smm-pricing-v2-btn--facebook {
    background: #1877f2;
}
.smm-pricing-v2-btn--facebook:hover {
    background: #145cc4;
    box-shadow: 0 4px 20px rgba(24, 119, 242, 0.3);
}

.smm-pricing-v2-btn--linkedin {
    background: #0077b5;
}
.smm-pricing-v2-btn--linkedin:hover {
    background: #005f92;
    box-shadow: 0 4px 20px rgba(0, 119, 181, 0.3);
}

.smm-pricing-v2-btn--youtube {
    background: #ff0000;
}
.smm-pricing-v2-btn--youtube:hover {
    background: #cc0000;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3);
}

.smm-pricing-v2-btn--google {
    background: #4285f4;
}
.smm-pricing-v2-btn--google:hover {
    background: #2a68d6;
    box-shadow: 0 4px 20px rgba(66, 133, 244, 0.3);
}

.smm-pricing-v2-btn--whatsapp {
    background: #25d366;
}
.smm-pricing-v2-btn--whatsapp:hover {
    background: #1ea952;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.3);
}

.smm-pricing-v2-btn--tiktok {
    background: #010101;
}
.smm-pricing-v2-btn--tiktok:hover {
    background: #333;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.smm-pricing-v2-btn--pinterest {
    background: #e60023;
}
.smm-pricing-v2-btn--pinterest:hover {
    background: #b5001c;
    box-shadow: 0 4px 20px rgba(230, 0, 35, 0.3);
}

.smm-pricing-v2-btn--twitter {
    background: #000000;
}
.smm-pricing-v2-btn--twitter:hover {
    background: #2f2f2f;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.smm-pricing-v2-btn--wikipedia {
    background: #000000;
}
.smm-pricing-v2-btn--wikipedia:hover {
    background: #333;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.smm-pricing-v2-btn--pressrelease {
    background: #334155;
}
.smm-pricing-v2-btn--pressrelease:hover {
    background: #1e293b;
    box-shadow: 0 4px 20px rgba(51, 65, 85, 0.3);
}



.smm-pricing-v2-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.smm-pricing-v2-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 58px;
    font-family: var(--v2-font, inherit);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.smm-pricing-v2-chip:disabled {
    cursor: default;
}

/* The icon itself — same footprint/colors as the original static chip */
.smm-pricing-v2-chip-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1.5px solid var(--v2-border, #e2e8f0);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

.smm-pricing-v2-chip-icon-wrap i {
    font-size: 15px;
    line-height: 1;
}

.smm-pricing-v2-chip:hover:not(:disabled) .smm-pricing-v2-chip-icon-wrap {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Per-platform icon colour, matching the original icon chips */
.smm-pricing-v2-chip-icon-wrap.v2-ig i {
    color: #e1306c;
}
.smm-pricing-v2-chip-icon-wrap.v2-fb i {
    color: #1877f2;
}
.smm-pricing-v2-chip-icon-wrap.v2-li i {
    color: #0077b5;
}
.smm-pricing-v2-chip-icon-wrap.v2-gm i {
    color: #4285f4;
}
.smm-pricing-v2-chip-icon-wrap.v2-yt i {
    color: #ff0000;
}
.smm-pricing-v2-chip-icon-wrap.v2-wa i {
    color: #25d366;
}
.smm-pricing-v2-chip-icon-wrap.v2-tk i {
    color: #010101;
}

/* Subtle label under the icon — secondary to the icon, not a button label */
.smm-pricing-v2-chip-label {
    font-size: 9.5px;
    font-weight: 600;
    color: #000;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.15s;
}

/* ── Selected state ──
   Thin colored border + soft background tint on the icon chip only.
   The icon stays the same size — this never turns into a solid button. */
.smm-pricing-v2-chip.selected .smm-pricing-v2-chip-icon-wrap {
    background: var(--v2-accent-light, #eef2ff);
    border-color: var(--v2-accent, #0891b2);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.smm-pricing-v2-chip.selected .smm-pricing-v2-chip-label {
    color: var(--v2-accent, #0891b2);
}

/* Small check badge in the corner of the icon chip */
.smm-pricing-v2-chip-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--v2-accent, #0891b2);
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smm-pricing-v2-chip-badge i {
    font-size: 7px;
    color: #fff;
}

/* Locked / all-included state — same visual as "selected" but read-only */
.smm-pricing-v2-chip.locked .smm-pricing-v2-chip-icon-wrap {
    background: var(--v2-accent-light, #eef2ff);
    border-color: var(--v2-accent, #0891b2);
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.smm-pricing-v2-chip.locked .smm-pricing-v2-chip-label {
    color: var(--v2-accent, #0891b2);
}

.smm-pricing-v2-chip.locked:hover .smm-pricing-v2-chip-icon-wrap {
    transform: none;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

@media (max-width: 600px) {
    .smm-pricing-v2-chip {
        width: 52px;
    }

    .smm-pricing-v2-chip-icon-wrap {
        width: 32px;
        height: 32px;
    }

    .smm-pricing-v2-chip-label {
        font-size: 9px;
    }
}


/* ══════════════════════════════════════════════════════════════
   Platform identity badge — platform-specific cards only
   ══════════════════════════════════════════════════════════════ */

.smm-pricing-v2-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 12px 5px 9px;
    border-radius: 100px;
    border: 1px solid transparent;
    margin-bottom: 10px;
    width: fit-content;
}

.smm-pricing-v2-platform-badge i {
    font-size: 13px;
    line-height: 1;
}

.smm-pricing-v2-platform-badge span {
    white-space: nowrap;
}

.smm-pricing-v2-platform-badge.v2-ig {
    color: #e1306c;
    background: rgba(225, 48, 108, 0.08);
    border-color: rgba(225, 48, 108, 0.22);
}
.smm-pricing-v2-platform-badge.v2-fb {
    color: #1877f2;
    background: rgba(24, 119, 242, 0.08);
    border-color: rgba(24, 119, 242, 0.22);
}
.smm-pricing-v2-platform-badge.v2-li {
    color: #0077b5;
    background: rgba(0, 119, 181, 0.08);
    border-color: rgba(0, 119, 181, 0.22);
}
.smm-pricing-v2-platform-badge.v2-gm {
    color: #4285f4;
    background: rgba(66, 133, 244, 0.08);
    border-color: rgba(66, 133, 244, 0.22);
}
.smm-pricing-v2-platform-badge.v2-yt {
    color: #ff0000;
    background: rgba(255, 0, 0, 0.08);
    border-color: rgba(255, 0, 0, 0.22);
}
.smm-pricing-v2-platform-badge.v2-wa {
    color: #1ea952;
    background: rgba(37, 211, 102, 0.1);
    border-color: rgba(37, 211, 102, 0.25);
}
.smm-pricing-v2-platform-badge.v2-tk {
    color: #010101;
    background: rgba(1, 1, 1, 0.06);
    border-color: rgba(1, 1, 1, 0.15);
}
.smm-pricing-v2-platform-badge.v2-pin {
    color: #e60023;
    background: rgba(230, 0, 35, 0.08);
    border-color: rgba(230, 0, 35, 0.22);
}
.smm-pricing-v2-platform-badge.v2-tw {
    color: #0f172a;
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.15);
}
.smm-pricing-v2-platform-badge.v2-wiki {
    color: #334155;
    background: rgba(51, 65, 85, 0.07);
    border-color: rgba(51, 65, 85, 0.18);
}

@media (max-width: 600px) {
    .smm-pricing-v2-platform-badge {
        font-size: 12px;
        padding: 4px 10px 4px 8px;
    }
}

/* pricingpage */

.smm-pricing-v2-bottom-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.smm-pricing-v2-viewall-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  background: var(--main-600);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.smm-pricing-v2-viewall-btn:hover {
  background: var(--main-700);
  transform: translateY(-2px);
}

.smm-pricing-v2-viewall-btn i {
  transition: transform 0.3s ease;
}

.smm-pricing-v2-viewall-btn:hover i {
  transform: translateX(4px);
}




.cr-image-preview{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 30px;
}

.cr-image-preview-img{
    max-width: 95%;
    max-height: 90vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 15px 40px rgba(0,0,0,.45);
}

.cr-image-preview-close{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    font-size: 18px;
}






/* ===============================
   LEADSEO GOOGLE REVIEWS
================================= */

.leadseo-reviews-section{
    padding: 40px 0;
    background:#f8fafc;
    overflow:hidden;
}

.leadseo-reviews-container{
    width:92%;
    max-width:1300px;
    margin:auto;
}

.leadseo-reviews-header{
    text-align:center;
    margin-bottom:60px;
}

.leadseo-reviews-tag{
    display:inline-block;
    color:#2f6fed;;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.leadseo-reviews-title{
    font-size:48px;
    font-weight:700;
    color:#111827;
    margin-bottom:18px;
}

.leadseo-reviews-desc{
    max-width:720px;
    margin:auto;
    font-size:17px;
    line-height:1.8;
    color:#6b7280;
}

.leadseo-reviews-box{
    background:#fff;
    border-radius:24px;
    padding:35px;
    box-shadow:0 15px 50px rgba(0,0,0,.08);
}

/* spacing from previous section */
.leadseo-reviews-section{
    margin-top:80px;
}

/* spacing before footer */
.leadseo-reviews-section{
    margin-bottom:80px;
}

@media(max-width:768px){

.leadseo-reviews-section{
    padding:80px 0;
    margin-top:50px;
    margin-bottom:50px;
}

.leadseo-reviews-title{
    font-size:34px;
}

.leadseo-reviews-box{
    padding:18px;
}

}