/* Auther 01: Karthikeyan E */
/* Theme Name: WittyBizz Website Frontend */
/* Discription: Figma design to HTML conversion using Bootstrap v.5.3.2  */

/* ===================================
Root declaration CSS
=================================== */
:root {
    --t-ff-Alegreya_Sans: "Alegreya Sans", sans-serif;
    --t-ff-Instrument_Sans: "Instrument Sans", sans-serif;

    --cube-size: 220px;

    --c-fc-Nav_active: #A30F4B;
    --c-fc-Main: #20232A;
    --c-fc-Secondary: #161C2D;
    --c-bc-Button1-bg: #2154EF;
    --c-bc-Button2-bg: var(--c-fc-Nav_active);
    --c-bc-Button2-hover-bg: #8b0d40;
    --c-fc-Footer-bg: #0A1139;
    --c-fc-Highlighter: #7D7D7D;

    --c-base-white: #ffffff;
    --c-base-black: #0d0d0d;
    --c-transparent: transparent;
    --c-text-dark: #2b2b2b;
    --c-text-muted: #5b6275;
    --c-text-muted-2: #4f566b;
    --c-text-subtle: #6b7280;
    --c-text-light: #9a9a9a;
    --c-text-placeholder: #b9bfd0;
    --c-accent-link: #6a5cff;
    --c-accent-link-hover: #4f3dff;

    --c-bg-services-section: #EFF5FF;
    --c-bg-service-card-hover: #bed6ff;
    --c-bg-service-list-media: #f2f4f9;
    --c-bg-work-progress: #edf3ff;
    --c-bg-portfolio-card: #e9eef7;
    --c-bg-blog-tag: #eef2ff;
    --c-bg-blog-detail-thumb: #f1f3f8;
    --c-bg-contact-accent: #F4F3FF;
    --c-bg-contact-card: #f3f1ff;
    --c-bg-contact-quick: #f9f8fc;

    --c-border-muted-alpha: #d1d1d1a1;
    --c-border-soft: #DFDFDF;
    --c-border-light: #e6e9f2;
    --c-border-lighter: #ebe9f6;
    --c-border-soft-2: rgb(241, 240, 240);

    --c-white-08: rgba(255, 255, 255, 0.08);
    --c-white-10: rgba(255, 255, 255, 0.1);
    --c-white-72: rgba(255, 255, 255, 0.72);
    --c-white-80: rgba(255, 255, 255, 0.8);

    --c-ink-05: rgba(22, 28, 45, 0.05);
    --c-ink-06: rgba(22, 28, 45, 0.06);
    --c-ink-08: rgba(22, 28, 45, 0.08);
    --c-ink-12: rgba(22, 28, 45, 0.12);
    --c-ink-14: rgba(22, 28, 45, 0.14);
    --c-ink-16: rgba(22, 28, 45, 0.16);
    --c-ink-18: rgba(22, 28, 45, 0.18);
    --c-ink-25: rgba(22, 28, 45, 0.25);

    --c-deep-12: rgba(12, 15, 35, 0.12);
    --c-deep-16: rgba(12, 15, 35, 0.16);

    --c-brand-0: rgba(33, 84, 239, 0);
    --c-brand-12: rgba(33, 84, 239, 0.12);
    --c-brand-20: rgba(33, 84, 239, 0.2);
    --c-brand-25: rgba(33, 84, 239, 0.25);
    --c-brand-28: rgba(33, 84, 239, 0.28);

    --c-accent-0: rgba(163, 15, 75, 0);
    --c-accent-12: rgba(163, 15, 75, 0.12);
    --c-accent-18: rgba(163, 15, 75, 0.18);
    --c-accent-24: rgba(163, 15, 75, 0.24);
    --c-accent-28: rgba(163, 15, 75, 0.28);
    --c-accent-30: rgba(163, 15, 75, 0.3);
    --c-accent-60: rgba(163, 15, 75, 0.6);

    --c-violet-55: rgba(108, 70, 255, 0.55);
    --c-violet-50: rgba(97, 43, 220, 0.5);
    --c-violet-85: rgba(43, 10, 110, 0.85);
    --c-overlay-0: rgba(17, 20, 28, 0);
    --c-overlay-55: rgba(17, 20, 28, 0.55);
    --c-overlay-85: rgba(17, 20, 28, 0.85);

    --c-sc-ServicesSectionBG: #F8F8F8;

    --r-br-button: 100px;
    --r-br-none: 0;
    --r-br-xs: 7px;
    --r-br-sm: 8px;
    --r-br-md: 10px;
    --r-br-lg: 12px;
    --r-br-xl: 14px;
    --r-br-2xl: 16px;
    --r-br-3xl: 18px;
    --r-br-4xl: 20px;
    --r-br-4xl-plus: 22px;
    --r-br-5xl: 28px;
    --r-br-pill: 999px;
    --r-br-circle: 50%;
    --r-br-frame: 28px 96px 28px 46px;

    --s-ls-Secondary: -0.1px;
    --s-lh-Title-h1: 115%;
    --s-lh-Title-h2: 120%;
    --s-lh-Para-p2: 180%;
    --s-lh-flat: 1;
    --s-lh-none: 0;
    --s-lh-tight: 1.2;
    --s-lh-ui: 1.4;
    --s-lh-body: 1.7;
    --s-lh-relaxed: 1.75;
    --s-lh-loose: 1.8;

    --s-fs-h1: 52px;
    --s-fs-h2: 32px;
    --s-fs-h3: 26px;
    --s-fs-h4: 24px;
    --s-fs-h5: 22px;
    --s-fs-h2-sm: 28px;
    --s-fs-blog-detail-title-sm: 30px;
    --s-fs-p1: 18px;
    --s-fs-p2: 16px;
    --s-fs-p3: 14px;
    --s-fs-ui: 15px;
    --s-fs-caption: 13px;
    --s-fs-xxs: 11px;
    --s-fs-micro: 12px;
    --s-fs-counter: 38px;
    --s-fs-Highlighter: 34px;
    --s-fs-emoji: 42px;
    --s-fs-card-title: 20px;
    --s-fs-blog-card-title: calc(var(--s-fs-h3) - 4px);
    --s-fs-blog-detail-title: clamp(28px, 3vw, 38px);

    --s-sp-Section_Padding: 90px 0px;
    --s-sp-Section_Padding-mob: 70px 0 80px;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: all .5s;
    color: var(--c-fc-Secondary);
    letter-spacing: var(--s-ls-Secondary);
}

a,
p {
    color: var(--c-fc-Secondary);
    letter-spacing: var(--s-ls-Secondary);
    margin: unset;
}

h1,
h2,
h3,
h4 {
    color: var(--c-fc-Main);
    font-family: var(--t-ff-Alegreya_Sans);
}

h1 {
    font-weight: 800;
    font-size: var(--s-fs-h1);
    line-height: var(--s-lh-Title-h1);
}

h2 {
    font-weight: 700;
    font-size: var(--s-fs-h2);
    line-height: var(--s-lh-Title-h2);
}

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

h4 {
    font-size: var(--s-fs-h4);
    font-weight: 600;
}

.wd-75 {
    width: 75%;
}

.secTitle {
    color: var(--c-bc-Button1-bg);
    border-radius: var(--r-br-button);
    font-family: var(--t-ff-Instrument_Sans);
    font-weight: 600;
    font-size: var(--s-fs-p3);
    letter-spacing: 0px;
    text-transform: uppercase;
}

/* ===================================
Header CSS
=================================== */
header {
    padding: 14px 0px;
}

.navbar-brand img {
    width: 200px;
}

.navbar-nav {
    gap: 14px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-nav .nav-link.active {
    font-weight: 700;
    color: var(--c-fc-Nav_active);
}

/* ===================================
Hero Section CSS
=================================== */
.heroSec {
    padding: var(--s-sp-Section_Padding);
    background-image: url(../../assets/images/heroSecBg.png);
    background-image: image-set(url(../../assets/images/heroSecBg.avif) type("image/avif"),
            url(../../assets/images/heroSecBg.webp) type("image/webp"),
            url(../../assets/images/heroSecBg.png) type("image/png"));
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
}

.heroContent {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.heroContent h1 {
    line-height: var(--s-lh-Title-h1);
    margin: unset;
}

.heroContent p {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p1);
    font-weight: 500;
    margin: unset;
}

.heroSec .secTitle {
    text-transform: capitalize;
}

.heroImageWrap {
    width: 100%;
    max-width: 560px;
    position: relative;
    isolation: isolate;
}

.heroImageWrap>img:first-child {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

.heroImageWrap .heroImgDecor {
    position: absolute;
    width: clamp(120px, 22vw, 172px);
    height: auto;
    display: block;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.95);
    transition: opacity 0.25s ease, transform 0.35s ease;
    scale: 0.85;
}

.heroImageWrap .heroImgDecor img {
    display: block;
    width: 100%;
    height: auto;
}

.heroImageWrap .heroImgDecor-rightTop {
    top: 3%;
    right: 30%;
    transform: translateY(10px) scale(0.95) rotate(6deg);
    transition-delay: 0.08s;
    z-index: 2;
}

.heroImageWrap .heroImgDecor-bottomLeft {
    bottom: 23%;
    left: 25%;
    transform: translateY(10px) scale(0.95) rotate(-6deg);
    transition-delay: 0.28s;
    z-index: 2;

}

.heroImageWrap .heroImgDecor .heroImgEmoji {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--s-fs-emoji);
    line-height: var(--s-lh-flat);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9);
    transition: opacity 0.25s ease, transform 0.35s ease;
    pointer-events: none;
    filter: drop-shadow(0 10px 18px var(--c-ink-25));
    z-index: 2;
}

.heroImageWrap .heroImgDecor-rightTop .heroImgEmoji {
    rotate: -20deg;
    transition-delay: 0.16s;
}

.heroImageWrap .heroImgDecor-bottomLeft .heroImgEmoji {
    rotate: 20deg;
    transition-delay: 0.36s;
}

.heroImageWrap.is-revealed .heroImgDecor {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.heroImageWrap.is-revealed .heroImgDecor-rightTop {
    transform: translateY(0) scale(.9) rotate(6deg);
}

.heroImageWrap.is-revealed .heroImgDecor-bottomLeft {
    transform: translateY(0) scale(.9) rotate(-6deg);
}

.heroImageWrap.is-revealed .heroImgDecor .heroImgEmoji {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* ===================================
About Section CSS
=================================== */
.aboutUsSec {
    padding: var(--s-sp-Section_Padding);
}

.aboutWitty {
    position: relative;
}

.imageArea {
    position: relative;
    height: 100%;
    width: 90%;
}

.aboutWitty img {
    width: 100%;
    display: block;
    border-radius: var(--r-br-3xl);
    box-shadow: 0 30px 60px var(--c-ink-16);
}

.aboutBadge {
    position: absolute;
    right: 0px;
    bottom: 14%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--c-base-white);
    border-radius: var(--r-br-xs);
    border: 1px solid var(--c-border-muted-alpha);
    box-shadow: 30px 4px 40px var(--c-ink-18);
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p3);
    font-weight: 600;
    color: var(--c-fc-Secondary);
}

.aboutBadge .badgeIcon {
    width: fit-content;
}

.aboutBadge .badgeIcon img {
    width: fit-content;
    border-radius: unset;
}

.aboutContent {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aboutContent h2 {
    margin: unset;
}

.aboutContent p {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p2);
    line-height: var(--s-lh-Para-p2);
    color: var(--c-text-muted);
}

.buttonBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 12px 30px;
    border-radius: var(--r-br-button);
    background: var(--c-bc-Button2-bg);
    color: var(--c-base-white);
    font-family: var(--t-ff-Instrument_Sans);
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 14px 28px var(--c-accent-24);
}

.buttonBtn:hover {
    background: var(--c-bc-Button2-hover-bg);
    color: var(--c-base-white);
    transform: translateY(-2px);
}

/* ===================================
About Main CSS
=================================== */
.aboutMain {
    padding: var(--s-sp-Section_Padding-mob);
}

.aboutImg {
    width: 95%;
    overflow: hidden;
    border-radius: var(--r-br-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.statics {
    display: flex;
    justify-content: space-between;
}

.statics .counter {
    font-size: var(--s-fs-counter);
    font-weight: 700;
    letter-spacing: -1px;
}

.statics p {
    font-size: var(--s-fs-p1);
    font-weight: 500;
}

.aboutHighlighter {
    margin-top: 40px;
    min-height: 306px;
    display: flex;
    align-items: center;
    background-image: url(../../assets/images/highlighter-bg.png);
    background-image: image-set(url(../../assets/images/highlighter-bg.avif) type("image/avif"),
            url(../../assets/images/highlighter-bg.webp) type("image/webp"),
            url(../../assets/images/highlighter-bg.png) type("image/png"));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right center;
}

.highlighter p {
    font-size: var(--s-fs-Highlighter);
}

.highlighter p:first-child {
    color: var(--c-fc-Highlighter);
}

.highlighter p:last-child {
    font-weight: 600;
}


/* ===================================
Services Section CSS
=================================== */
.servicesSec {
    padding: var(--s-sp-Section_Padding);
    background-color: var(--c-bg-services-section);
}

.serviceCard {
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    gap: 10px;
    border-radius: var(--r-br-none);
    background-color: var(--c-base-white);
    margin-bottom: 26px;
    border-radius: var(--r-br-lg);
}

.serviceCard:hover {
    background-color: var(--c-bg-service-card-hover);
    border-radius: var(--r-br-lg);
    transition: all .1s ease-in-out;
}

.serviceContex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 5px;
}

.serviceCard p {
    font-size: var(--s-fs-p3);
}

.serviceCard a {
    color: var(--c-bc-Button1-bg);
    font-weight: 600;
    /* display: none; */
}

/* ===================================
Hire Section CSS
=================================== */
.hireSec {
    padding: var(--s-sp-Section_Padding);
}

.hireSecimg {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hireSecimg img {
    width: 75%;
}

.listTable {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.listTable p {
    font-size: var(--s-fs-p1);
}

/* ===================================
Portfolio Section CSS
=================================== */
.portfolioSec {
    padding: var(--s-sp-Section_Padding);
}

/* ===================================
Comnpanies Section CSS
=================================== */
.companiesSec {
    padding: var(--s-sp-Section_Padding);
}

.companiesPanel {
    position: relative;
    overflow: hidden;
}

.companiesIntro {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    max-width: 520px;
    margin: 0 auto;
}

.companiesIntro .secTitle {
    align-self: center;
    padding: 4px 14px;
    border-radius: var(--r-br-pill);
    border: 1px solid var(--c-ink-08);
    background: var(--c-base-white);
    box-shadow: 0 10px 22px var(--c-ink-08);
}

.companiesIntro h2 {
    margin: 0;
}

.companiesTicker {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding-top: 22px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 26px;
    align-items: center;
    justify-items: stretch;
}

.logoSlot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 72px;
    overflow: hidden;
}

.logoItem {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    max-height: 44px;
    max-width: 140px;
    width: auto;
    height: auto;
    /* filter: grayscale(100%); */
    opacity: 0;
    transform: translate(-50%, -50%) translateY(-12px);
}

/* ===================================
CTA Section CSS
=================================== */
.ctaSec {
    padding: var(--s-sp-Section_Padding);
}

.ctaSec .container .row {
    background-image: url(../../assets/images/Cta_section_bg.png);
    background-image: image-set(url(../../assets/images/Cta_section_bg.avif) type("image/avif"),
            url(../../assets/images/Cta_section_bg.webp) type("image/webp"),
            url(../../assets/images/Cta_section_bg.png) type("image/png"));
    background-size: cover;
    background-position: center center;
    width: 90%;
    border-radius: var(--r-br-4xl);
    padding: 30px;
}

.ctaSec .buttonBtn:hover {
    color: var(--c-fc-Main);
}

.ctaSec h2 {
    color: var(--c-base-white);
}

.ctaSec a {
    color: var(--c-bc-Button1-bg);
}

/* ===================================
Footer CSS
=================================== */
footer {
    padding: var(--s-sp-Section_Padding-mob);
    padding-bottom: 20px;
    background-color: var(--c-fc-Footer-bg);
}

footer hr {
    color: var(--c-base-white);
    margin-top: 32px;
}

footer img,
footer p,
footer h4 {
    filter: brightness(0) invert(1);
}

.shortContex img {
    width: 65%;
}

.shortContex p {
    filter: brightness(0) invert(.8);
    font-size: var(--s-fs-p2);
    margin-top: 24px;
}

.socialConnect img {
    width: 26px;
}

.socialConnect img:hover {
    filter: none;
}

.quickLinks {
    margin-top: 34px;
}

.wrapContex {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.wrapContex img {
    width: 24px;
    height: 24px;
}

.wrapContex:first-child {
    align-items: start;
}

.wrapContex:first-child img {
    margin-top: 5px;
}

.quickLinks a {
    text-decoration: none;
}

.quickLinks p {
    filter: brightness(0) invert(.8);
    font-size: var(--s-fs-p2);
}

.quickLinks p:hover {
    filter: brightness(0) invert(1);
}

.quickLinks p a:hover {
    text-decoration: underline;
}

.quickLinks p:not(.wrapContex p) {
    margin-bottom: 20px;
}

/* ===================================
Back to Top CSS
=================================== */
.backToTop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    border-radius: var(--r-br-circle);
    border: none;
    background: var(--c-base-white);
    color: var(--c-base-white);
    font-family: var(--t-ff-Instrument_Sans);
    font-weight: 600;
    font-size: var(--s-fs-micro);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 30px var(--c-brand-28);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 999;
}

.backToTop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.backToTop:hover {
    border: 1px solid var(--c-bc-Button2-bg);
}

.backToTop:focus-visible {
    outline: 3px solid var(--c-bc-Button2-bg);
    outline-offset: 3px;
}

.backToTop img {
    width: 20px;
    height: 20px;
    display: block;
}

/* ===================================
Vission Mission Values Section CSS
=================================== */
.vmvSec {
    padding: var(--s-sp-Section_Padding);
}

.cotentBox {
    background-color: var(--c-base-white);
    border: 1px solid var(--c-border-soft);
    border-radius: var(--r-br-lg);
    height: 100%;
}

.cotentBox:hover {
    border: 1px solid var(--c-transparent);
    background-color: var(--c-bc-Button1-bg);
}

.cotentBox:hover h4,
.cotentBox:hover p {
    color: var(--c-base-white);
}

.cotentBox .cotentBoxIco {
    background-color: var(--c-bc-Button1-bg);
    width: 52px;
    height: 52px;
    border-radius: var(--r-br-sm);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cotentBoxIco img {
    scale: .8;
}

.cotentBox:hover .cotentBoxIco {
    background-color: var(--c-base-white);
}

.cotentBox:hover .cotentBoxIco img {
    filter: brightness(1) invert(1);
}

/* ===================================
Why Choose Section CSS
=================================== */
.whyChoose {
    padding: var(--s-sp-Section_Padding);
}

.whyChoose .listTable p {
    font-weight: 500;
    font-size: var(--s-fs-p1);
}

.whyChooseImg {
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.whyChooseImg:hover {
    animation: aboutBadgeFloat 1.6s ease-in-out infinite;
}

/* ===================================
Testimonials Section CSS
=================================== */
.testimonialsSec {
    padding: var(--s-sp-Section_Padding);
    overflow: hidden;
}

.testimonialsSec .container {
    position: relative;
}

.testimonialMedia {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}



.testimonialMediaFrame {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 16px;
    border-radius: var(--r-br-frame);
    background: var(--c-white-72);
    /* box-shadow: 0 24px 50px var(--c-ink-12); */
}

.testimonialMediaFrame img {
    width: 100%;
    display: block;
    border-radius: var(--r-br-4xl);
}

.testimonialContent {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.testimonialQuoteIcon {
    width: 56px;
    height: 56px;
}

.testimonialText {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p1);
    line-height: var(--s-lh-relaxed);
    font-style: italic;
    color: var(--c-text-muted-2);
}

.testimonialSlides {
    position: relative;
}

.testimonialSlide {
    display: none;
    border: 1px solid var(--c-border-soft-2);
    border-radius: var(--r-br-frame);
    padding: clamp(20px, 2vw, 30px);
    background: var(--c-white);
}

.testimonialSlide.is-active {
    display: block;
    animation: testimonialFade 0.45s ease;
}

.testimonialSlide .testimonialText {
    margin-bottom: 16px;
}

.testimonialAuthor h4 {
    margin-bottom: 4px;
}

.testimonialAuthor p {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p3);
    color: var(--c-text-subtle);
}

.testimonialNav {
    position: absolute;
    top: 50%;
    left: -82px;
    right: -82px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}

.testimonialNavBtn {
    padding: 0;
    border: none;
    background: var(--c-transparent);
    line-height: var(--s-lh-none);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
}

.testimonialNavBtn img {
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonialNavBtn:hover {
    scale: 1.2;
    filter: invert(1);
}

.testimonialDots {
    display: none;
}

.testimonialDot {
    border: none;
    padding: 0;
    background: var(--c-transparent);
    cursor: pointer;
}

/* ===================================
Services Hero Section CSS
=================================== */
.servicesHeroSec {
    background-color: var(--c-sc-ServicesSectionBG);
    position: relative;
    overflow: hidden;
}

.ServicesHeroContent {
    max-width: 560px;
}

.ServicesHeroContent p {
    margin: 32px 0;
    font-size: var(--s-fs-p1);
}

.servicesHeroSec .container {
    position: relative;
    z-index: 1;
}

.imgMainWrap {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

}

.servicesHeroArt {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.servicesHeroOverlay {
    width: 140%;
    max-width: none;
    right: -18%;
    top: -12%;
    z-index: 0;
    --float-amount: -6px;
    --float-delay: 0.2s;
}

.servicesHeroSwirl {
    width: clamp(260px, 34vw, 460px);
    right: -15%;
    top: 30%;
    z-index: 1;
    transform: var(--base-transform);
    --base-transform: translatex(-50%);
    --float-amount: -14px;
    --float-delay: 0.4s;
}

.servicesHeroScribble {
    width: 140px;
    left: 0%;
    top: 55%;
    z-index: 2;
    --base-transform: translateY(-50%);
    --float-amount: -10px;
    --float-delay: 0.1s;
}

.servicesHeroDots {
    width: 90px;
    right: 80px;
    top: 5%;
    z-index: 3;
    --float-amount: -8px;
    --float-delay: 0.6s;
}

.servicesHeroOval {
    width: 150px;
    right: 30px;
    bottom: -10%;
    z-index: 5;
    --float-amount: -12px;
    --float-delay: 0.3s;
}

.servicesHeroMain {
    width: clamp(260px, 42vw, 480px);
    height: auto;
    display: block;
    margin-right: 32px;
    position: relative;
    z-index: 4;
}

/* ===================================
Services List Section CSS
=================================== */
.serviceListSec {
    padding: var(--s-sp-Section_Padding);
    background-color: var(--c-base-white);
}

.serviceListCard {
    background: var(--c-base-white);
    border-radius: var(--r-br-4xl);
    padding: 28px;
    border: 1px solid var(--c-border-soft-2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    height: 100%;
}

.serviceListContent {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.serviceListContent h3 {
    margin: 0;
    font-size: var(--s-fs-h3);
    font-weight: 700;
}

.serviceListContent p {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p2);
    line-height: var(--s-lh-relaxed);
    color: var(--c-text-muted);
}

.serviceListContent strong {
    color: var(--c-fc-Secondary);
    font-weight: 700;
}

.serviceListLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    font-family: var(--t-ff-Instrument_Sans);
    font-weight: 600;
    color: var(--c-accent-link);
    text-decoration: none;
    border-bottom: 2px solid currentColor;
    padding-bottom: 4px;
}

.serviceListLinkIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.serviceListLinkIcon img {
    width: 100%;
    height: 100%;
    display: block;
}

.serviceListMedia {
    border-radius: var(--r-br-lg);
    overflow: hidden;
    background: var(--c-bg-service-list-media);
}

.serviceListMedia img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.serviceListCard:hover,
.serviceListCard:focus-within {
    transform: translateY(-6px);
    border-color: var(--c-transparent);
    box-shadow: 0 28px 55px var(--c-ink-12);
}

.serviceListCard:hover .serviceListMedia img,
.serviceListCard:focus-within .serviceListMedia img {
    transform: scale(1.03);
}

.serviceListCard:hover .serviceListLink,
.serviceListCard:focus-within .serviceListLink {
    color: var(--c-accent-link-hover);
}

.serviceListCard:hover .serviceListLinkIcon,
.serviceListCard:focus-within .serviceListLinkIcon {
    transform: translate(3px, -2px);
}

/* ===================================
Work Progress Section CSS
=================================== */
.workProgressSec {
    padding: var(--s-sp-Section_Padding);
}

.workProgressSec .statics p {
    font-size: var(--s-fs-p2);
    color: var(--c-fc-Secondary);
}

.workProgressSec .scrollContainerWrap {
    margin-left: 50px;
    background: var(--c-bg-work-progress);
    border-radius: var(--r-br-5xl);
    padding: 36px;
    position: relative;
    /* min-height: 520px; */
    /* box-shadow: 0 22px 44px var(--c-ink-08); */
    overflow-y: auto;
}

.workProgressSec .processList {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.workProgressSec .processItem {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.workProgressSec .processIcon {
    width: 84px;
    height: 84px;
    border-radius: var(--r-br-circle);
    background: var(--c-base-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 18px 32px var(--c-ink-08);
}

.workProgressSec .processIcon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.workProgressSec .processCopy h4 {
    margin: 0 0 8px;
    font-size: var(--s-fs-h5);
}

.workProgressSec .processCopy p {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p2);
    color: var(--c-text-muted);
    line-height: var(--s-lh-body);
}

.workProgressSec .scrollContainerWrap::-webkit-scrollbar {
    width: 6px;
}

.workProgressSec .scrollContainerWrap::-webkit-scrollbar-track {
    background: var(--c-transparent);
}

.workProgressSec .scrollContainerWrap::-webkit-scrollbar-thumb {
    background: var(--c-brand-25);
    border-radius: var(--r-br-pill);
}

/* ===================================
Portfolio Grid Section CSS
=================================== */
.portfolioGrigSec {
    padding: var(--s-sp-Section_Padding);
    background-color: var(--c-base-white);
}

.portfolioGrigSec .row,
.portfolioSec .row {
    row-gap: 24px;
}

.pGrid-twoLong-twoSmall,
.pGrid-threeSmall {
    display: grid;
    gap: 24px;
}

.pGrid-twoLong-twoSmall {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(200px, 1fr));
    grid-template-areas:
        "left left left left mid1 mid1 mid1 mid1 right right right right"
        "left left left left mid2 mid2 mid2 mid2 right right right right";
}

.pGrid-threeSmall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(200px, 1fr);
}

.pGrid-card {
    position: relative;
    display: block;
    border-radius: var(--r-br-3xl);
    overflow: hidden;
    text-decoration: none;
    background: var(--c-bg-portfolio-card);
    box-shadow: 0 20px 36px var(--c-ink-14);
    isolation: isolate;
}

.pGrid-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 0.6s ease;
}

.pGrid-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, var(--c-violet-55) 0%, var(--c-violet-50) 45%, var(--c-violet-85) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.pGrid-card:hover img,
.pGrid-card:focus-visible img {
    transform: scale(1.08);
}

.pGrid-card:hover::after,
.pGrid-card:focus-visible::after {
    opacity: 1;
}

.pGrid-card:hover .pGrid-overlay,
.pGrid-card:focus-visible .pGrid-overlay {
    opacity: 1;
    transform: translateY(0);
}

.pGrid-card--left {
    grid-area: left;
}

.pGrid-card--mid1 {
    grid-area: mid1;
}

.pGrid-card--mid2 {
    grid-area: mid2;
}

.pGrid-card--right {
    grid-area: right;
}

.pGrid-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 22px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.pGrid-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--t-ff-Instrument_Sans);
}

.pGrid-title {
    font-size: var(--s-fs-card-title);
    font-weight: 700;
    color: var(--c-base-white);
}

.pGrid-meta {
    font-size: var(--s-fs-caption);
    text-transform: capitalize;
    letter-spacing: 0.5px;
    color: var(--c-white-80);
}

.pGrid-arrow {
    width: 42px;
    height: 42px;
    border-radius: var(--r-br-circle);
    border: 1px solid var(--c-white-10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-white-08);
    transition: transform 0.35s ease, background 0.35s ease;
}

.pGrid-arrow img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.pGrid-card:focus-visible {
    outline: 3px solid var(--c-bc-Button1-bg);
    outline-offset: 3px;
}

.pGrid-card:hover .pGrid-arrow,
.pGrid-card:focus-visible .pGrid-arrow {
    transform: translateX(2px);
}

/* ===================================
Blog Section CSS
=================================== */
.blogSec {
    padding: var(--s-sp-Section_Padding);
}

.blog-card {
    background: var(--c-base-white);
    border-radius: var(--r-br-2xl);
    padding: 18px;
    /* box-shadow: 0 24px 50px var(--c-deep-12); */
    display: flex;
    flex-direction: column;
    gap: 18px;
    height: 100%;
}

.blog-card:hover,
.blog-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 30px 70px var(--c-deep-16);
}

.blog-card-image {
    border-radius: var(--r-br-3xl);
    overflow: hidden;
    aspect-ratio: 16 / 10;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blog-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-card-tags span {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-caption);
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--r-br-sm);
    background: var(--c-bg-blog-tag);
    color: var(--c-fc-Main);
}

.blog-card-tags .blog-card-date {
    display: none;
}

.blog-card-content>h3 {
    font-size: var(--s-fs-blog-card-title);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-content>p {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p2);
    line-height: var(--s-lh-body);
    color: var(--c-fc-Highlighter);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-content>a {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-ui);
    font-weight: 600;
    color: var(--c-fc-Secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    align-self: flex-start;
}

.blog-card-content>a:hover {
    color: var(--c-bc-Button1-bg);
}

.blog-card-content>a:hover img,
.blog-card-content>a:focus-visible img {
    filter: invert(30%) sepia(88%) saturate(4200%) hue-rotate(220deg) brightness(96%) contrast(96%);
}

.blog-card-content>a:focus-visible {
    outline: 2px solid var(--c-bc-Button1-bg);
    outline-offset: 4px;
}

.blog-card-content>a img {
    width: 14px;
    height: 14px;
}

.paginationBlog {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 36px;
    font-family: var(--t-ff-Instrument_Sans);
}

.paginationBlog a {
    text-decoration: none;
    font-size: var(--s-fs-p2);
    font-weight: 600;
    color: var(--c-text-light);
}

.paginationBlog a.active {
    width: 46px;
    height: 46px;
    border-radius: var(--r-br-circle);
    background: var(--c-base-black);
    color: var(--c-base-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.paginationBlog a:not(.active):not(:last-child):not(.pagination-prev) {
    font-size: var(--s-fs-p1);
    color: var(--c-text-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--r-br-circle);
}

.paginationBlog a:not(.active):not(:last-child):not(.pagination-prev):hover {
    box-shadow: 0 0 0 1.5px currentColor;
}

.paginationBlog a.pagination-prev,
.paginationBlog a:last-child {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.paginationBlog a.pagination-prev img,
.paginationBlog a:last-child img {
    width: 14px;
    height: 14px;
}

.paginationBlog a.pagination-prev img {
    transform: rotate(180deg);
}

.paginationBlog a:not(.active):hover {
    color: var(--c-bc-Button1-bg);
}

.paginationBlog a.pagination-prev:hover,
.paginationBlog a:last-child:hover {
    color: var(--c-fc-Main);
    text-decoration: underline;
}

.paginationBlog a:focus-visible {
    outline: 2px solid var(--c-bc-Button1-bg);
    outline-offset: 3px;
    border-radius: var(--r-br-pill);
}

.blog-empty-state {
    display: none;
    text-align: center;
    padding: 40px 0;
    font-family: var(--t-ff-Instrument_Sans);
    color: var(--c-fc-Highlighter);
}

.blog-empty-state p {
    margin: 0;
    font-size: var(--s-fs-p2);
}

/* ===================================
Blog Details Section CSS
=================================== */
.blogDetailSec {
    padding: var(--s-sp-Section_Padding);
    background-color: var(--c-base-white);
}

.blogDetailWrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.blogDetailHeader {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blogDetailHeader h1 {
    margin: 0;
    font-size: var(--s-fs-blog-detail-title);
    line-height: var(--s-lh-tight);
}

.blogDetailMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p3);
    color: var(--c-text-subtle);
}

.blogDetailMeta .metaItem {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
}

.blogDetailMeta img {
    width: 18px;
    height: 18px;
}

.blogDetailHero {
    margin: 0;
    border-radius: var(--r-br-4xl);
    overflow: hidden;
    box-shadow: 0 28px 60px var(--c-ink-14);
}

.blogDetailHero img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 11;
}

.blogDetailBody {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blogDetailBody p {
    margin: 0;
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p2);
    line-height: var(--s-lh-loose);
    color: var(--c-text-muted);
}

.blogDetailBody h3 {
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: var(--s-fs-h4);
}

.blogDetailList {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.blogDetailList li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p2);
    line-height: var(--s-lh-body);
    color: var(--c-text-muted);
}

.blogDetailList img {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex-shrink: 0;
}

.blogDetailGallery {
    margin-top: 6px;
    display: none;
}

.blogDetailThumb {
    border-radius: var(--r-br-3xl);
    overflow: hidden;
    background: var(--c-bg-blog-detail-thumb);
    height: 100%;
    box-shadow: 0 18px 36px var(--c-ink-12);
}

.blogDetailThumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: transform 0.6s ease;
}

.blogDetailThumb:hover img {
    transform: scale(1.05);
}

/* ===================================
Contact Page CSS
=================================== */
.contactMainSec {
    padding: var(--s-sp-Section_Padding);
    position: relative;
    overflow: hidden;
}

.contactMainSec::before,
.contactMainSec::after {
    content: "";
    position: absolute;
    border-radius: var(--r-br-circle);
    filter: blur(0px);
    opacity: 0.55;
}

.contactMainSec::before {
    width: 360px;
    height: 360px;
    top: -180px;
    right: -140px;
    background: radial-gradient(circle, var(--c-brand-20) 0%, var(--c-brand-0) 70%);
}

.contactMainSec::after {
    width: 280px;
    height: 280px;
    bottom: -140px;
    left: -120px;
    background: radial-gradient(circle, var(--c-accent-18) 0%, var(--c-accent-0) 70%);
}

.contactMainSec .container {
    position: relative;
    z-index: 1;
}

.contactMainGrid {
    row-gap: 32px;
}

.contactIntro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contactIntro .secTitle,
.heroContent .secTitle {
    align-self: flex-start;
    padding: 4px 14px;
    border-radius: var(--r-br-pill);
    border: 1px solid var(--c-bc-Button1-bg);
    background: var(--c-bg-contact-accent);
}

.contactIntro h1 {
    margin: 20px 0 0;
    font-size: 48px;
}

.contactLead {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p1);
    font-weight: 600;
    margin: 0;
}

.contactSub {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p2);
    line-height: var(--s-lh-body);
    color: var(--c-text-muted);
    max-width: 560px;
}

.contactHero {
    position: relative;
    margin-top: 22px;
}

.contactHeroImage {
    border-radius: var(--r-br-4xl);
    overflow: hidden;
}

.contactHeroImage img {
    width: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.contactHeroCard {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: var(--c-base-white);
    border-radius: var(--r-br-xl);
    padding: 12px 16px;
    font-family: var(--t-ff-Instrument_Sans);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contactHeroCard span {
    font-size: var(--s-fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.contactHeroCard strong {
    font-size: var(--s-fs-p2);
    color: var(--c-fc-Secondary);
}

.contactQuick {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
}

.contactQuickItem {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--c-bg-contact-quick);
    border-radius: var(--r-br-xl);
    padding: 12px 14px;
    min-width: 210px;
}

.contactQuickItem img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.contactQuickItem span {
    display: block;
    font-size: var(--s-fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--c-text-subtle);
    font-weight: 600;
}

.contactQuickItem a,
.contactQuickItem p {
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p3);
    font-weight: 600;
    color: var(--c-fc-Secondary);
    text-decoration: none;
    margin: 0;
}

.contactQuickItem a:hover {
    color: var(--c-bc-Button2-bg);
}

.contactForm {
    height: 100%;
}

.contactFormCard {
    background: var(--c-bg-contact-card);
    border-radius: var(--r-br-2xl);
    padding: 34px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    border: 1px solid var(--c-ink-05);
    height: 100%;
}

.contactFormGroup {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contactFormGroup label {
    font-family: var(--t-ff-Instrument_Sans);
    font-weight: 700;
    font-size: var(--s-fs-ui);
    color: var(--c-fc-Main);
}

.contactFormGroup input {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--r-br-md);
    border: 1px solid var(--c-border-lighter);
    background: var(--c-base-white);
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-ui);
    color: var(--c-fc-Secondary);
    box-shadow: 0 10px 20px var(--c-ink-06);
}

.contactFormGroup textarea {
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--r-br-md);
    border: 1px solid var(--c-border-lighter);
    background: var(--c-base-white);
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-ui);
    color: var(--c-fc-Secondary);
    box-shadow: 0 10px 20px var(--c-ink-06);
    resize: vertical;
    /* min-height: 120px; */
}

.contactFormGroup input::placeholder {
    color: var(--c-text-placeholder);
}

.contactFormGroup textarea::placeholder {
    color: var(--c-text-placeholder);
}

.contactFormGroup input:focus {
    outline: none;
    border-color: var(--c-accent-60);
    box-shadow: 0 0 0 3px var(--c-accent-12);
}

.contactFormGroup textarea:focus {
    outline: none;
    border-color: var(--c-accent-60);
    box-shadow: 0 0 0 3px var(--c-accent-12);
}

.contactSubmit {
    margin-top: 6px;
    padding: 14px 20px;
    border-radius: var(--r-br-button);
    border: none;
    background: var(--c-bc-Button2-bg);
    color: var(--c-base-white);
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-ui);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
    box-shadow: 0 16px 26px var(--c-accent-28);
    cursor: pointer;
}

.contactSubmit:hover {
    background: var(--c-bc-Button2-hover-bg);
    transform: translateY(-1px);
}

.contactSubmit:focus-visible {
    outline: 3px solid var(--c-accent-30);
    outline-offset: 2px;
}

/* ===================================
FAQ Section CSS
=================================== */
.faqSec {
    padding: var(--s-sp-Section_Padding);
    background: var(--c-base-white);
}

.faqContent {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.faqContent .secTitle {
    align-self: flex-start;
    padding: 4px 14px;
    border-radius: var(--r-br-pill);
    border: 1px solid var(--c-bc-Button1-bg);
    background: var(--c-bg-contact-accent);
}

.faqContent h2 {
    margin: 0;
}

.faqList.accordion {
    --bs-accordion-bg: var(--c-transparent);
    --bs-accordion-border-color: var(--c-border-light);
    --bs-accordion-btn-focus-box-shadow: none;
    --bs-accordion-active-bg: var(--c-transparent);
    --bs-accordion-active-color: var(--c-fc-Main);
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-icon-transform: none;
}

.faqList .accordion-item {
    background: var(--c-transparent);
    border: none;
    border-bottom: 1px solid var(--c-border-light);
    padding-bottom: 18px;
}

.faqList .accordion-item+.accordion-item {
    margin-top: 18px;
}

.faqList .accordion-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faqList .accordion-header {
    margin: 0;
}

.faqList .accordion-button {
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--t-ff-Instrument_Sans);
    font-weight: 500;
    font-size: var(--s-fs-p1);
    line-height: var(--s-lh-ui);
    color: var(--c-fc-Main);
    background: var(--c-transparent);
    box-shadow: none;
}

.faqList .accordion-button:not(.collapsed) {
    color: var(--c-fc-Main);
    background: var(--c-transparent);
    box-shadow: none;
}

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

.faqList .accordion-button::after {
    content: "";
    width: 24px;
    height: 24px;
    border-radius: var(--r-br-circle);
    border: 2px solid var(--c-fc-Main);
    margin-left: auto;
    flex-shrink: 0;
    background: linear-gradient(var(--c-fc-Main), var(--c-fc-Main)) center/10px 2px no-repeat,
        linear-gradient(var(--c-fc-Main), var(--c-fc-Main)) center/2px 10px no-repeat;
    transform: none;
}

.faqList .accordion-button:not(.collapsed)::after {
    background: linear-gradient(var(--c-fc-Main), var(--c-fc-Main)) center/10px 2px no-repeat;
}

.faqList .accordion-body {
    padding: 8px 0 0;
    font-family: var(--t-ff-Instrument_Sans);
    font-size: var(--s-fs-p2);
    line-height: var(--s-lh-body);
    color: var(--c-text-muted);
    max-width: 560px;
}

.faqMedia {
    border-radius: var(--r-br-4xl);
    overflow: hidden;
    box-shadow: 0 30px 60px var(--c-ink-16);
}

.faqMedia img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    aspect-ratio: 3 / 3;
    border-radius: var(--r-br-4xl);
}

/* ===================================
Page Not Found CSS
=================================== */
.pnfHead img {
    width: 250px;
    margin-top: 50px;
}

.pnfSec .pnfContex {
    background: #9886FF;
    border: 2px solid #3E179B;
    border-radius: 50px;
    padding: 80px 40px;
}

.pnfSec .pnfContex h1,
.pnfSec .pnfContex h2,
.pnfSec .pnfContex p {
    color: var(--c-base-white);
}

.pnfSec img {
    max-height: 55vh;
}

/* ===================================
Privacy Policy and TC Page CSS
=================================== */
.ppNtcSection h2 {
    margin-top: 32px;
}