@font-face {
    font-family: "Red Hat Display";
    src: url("../assets/fonts/RedHatDisplay/RedHatDisplay-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("../assets/fonts/RedHatDisplay/RedHatDisplay-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("../assets/fonts/RedHatDisplay/RedHatDisplay-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Red Hat Display";
    src: url("../assets/fonts/RedHatDisplay/RedHatDisplay-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../assets/fonts/PlayfairDisplay/PlayfairDisplay-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../assets/fonts/PlayfairDisplay/PlayfairDisplay-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../assets/fonts/PlayfairDisplay/PlayfairDisplay-SemiBold.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../assets/fonts/PlayfairDisplay/PlayfairDisplay-SemiBoldItalic.ttf") format("truetype");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}


:root {
    /* Brand */
    --color-primary: #F49821;
    --color-success: #65C07F;
    --color-danger: #E13A37;

    /* Neutrals */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-cream: #FEF7ED;
    --color-off-white: #F3FAF5;
    --color-ice-white: #FAFCFE;

    /* Text */
    --color-text-primary: #202020;
    --color-text-secondary: #666666;
    --color-text-muted: #3A3A3A;

    /* Backgrounds / surfaces */
    --color-surface: #FFFFFF;
    --color-surface-muted: #D6D6D6;
    --color-dark: #24262A;
    --color-primary-light: rgba(244, 152, 33, 0.07);
    --color-success-light: rgba(243, 250, 245, 1);
    --color-light-blue: rgba(235, 241, 248, 1);
    --color-light-green: rgba(101, 192, 127, 0.07);

    /* Fonts */
    --font-redhat-display: "Red Hat Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-playfair-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-white);
    color: var(--color-text-primary);
}

.container {
    padding-inline: clamp(16px, 2.5vw, 24px);
}

.section-padding {
    padding-block: 40px;
}

@media (min-width: 768px) {
    .container {
        padding-inline: clamp(24px, 3.5vw, 64px);
    }

    .section-padding {
        padding-block: 60px;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-inline: clamp(64px, 8vw, 140px);
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-heading {
    font-family: var(--font-redhat-display);
    font-weight: 760;
    line-height: 1.1;
    margin: 0 0 0.6em;
}

h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

h3 {
    font-size: clamp(1.5rem, 2.6vw, 1.8rem);
}

h4 {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
}

h5 {
    font-size: clamp(1.1rem, 1.8vw, 1.25rem);
}

h6 {
    font-size: clamp(1rem, 1.5vw, 1.1rem);
}

p {
    font-size: clamp(14px, 1.1vw, 18px);
    font-family: var(--font-redhat-display);
}

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

button {
    font: inherit;
}

span {
    font-family: var(--font-playfair-display);
    font-style: italic;
}

.container {
    width: min(100%, 1920px);
    margin: 0 auto;
}

.categories-marketplace .container,
.workflow .container,
.enterprise-solutions .container,
.supplier-buyer .container,
.blogs .container,
.footer .container {
    padding-inline: clamp(16px, calc(14vw - 104px), 140px - 12px);
}

.hero {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    padding-top: 80px;
    background: linear-gradient(180deg, #cceafb 0%, #eef7fb 35%, #faf9fa 58%, #fdfbfc 100%);
}

.hero::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(167, 221, 253, .5) 0%, rgba(167, 221, 253, .2) 34%, rgba(255, 255, 255, 0) 68%);
}

.hero-content {
    position: relative;
}

.hero-copy {
    position: relative;
    z-index: 3;
    padding-top: 28px;
    text-align: center;
}

.hero-copy h1 {
    max-width: 1080px;
    margin: 0 auto;
    font-size: clamp(47px, 4.3vw, 78px);
    font-weight: 760;
    line-height: 1.08;
}

.hero-copy h1 em {
    display: block;
    margin-top: 12px;
    font-family: var(--font-playfair-display);
    font-size: .96em;
    font-weight: 500;
}

.hero-copy h1 em span {
    font-family: var(--font-redhat-display);
    font-weight: 750;
}

.hero-copy p {
    margin-top: 23px;
    color: #666;
    font-size: 16px;
    font-weight: 500;
}

.hero-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 48px;
    font-family: var(--font-redhat-display);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 28px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease;
}

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

.button-primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 10px 18px rgba(244, 152, 33, .2);
}

.button-outline {
    border: 1.5px solid #252525;
    background: rgba(255, 255, 255, .14);
}

.market-scene {
    position: relative;
    height: 100vh;
    margin-top: -256px;
}

.globe {
    position: absolute;
    z-index: 0;
    top: -216px;
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
    user-select: none;
}

.market-card {
    position: absolute;
    z-index: 3;
    width: 220px;
    min-height: 149px;
    padding: 38px 16px 13px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 25px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(246, 247, 249, .86));
    box-shadow: 0 17px 28px rgba(41, 50, 58, .17), inset 0 1px rgba(255, 255, 255, .9);
    transform: rotate(-19deg);
}

.market-title {
    font-family: var(--font-serif);
    font-size: 21px;
    line-height: 1;
}

.market-title img {
    width: fit-content;
    height: 39px;
    object-fit: contain;
}

.market-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 9px;
    margin-top: 15px;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.market-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-redhat-display);
    font-style: normal;
}

.market-stats i {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.purple {
    background: #a652db;
}

.green {
    background: var(--color-success);
}

.blue {
    background: #229bff;
}

.orange {
    background: #f49821;
}

.product {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(8px 11px 9px rgba(0, 0, 0, .16));
}

.card-canada {
    top: 32%;
    left: 0%;
    width: 260px;
}

.product-desktop {
    height: 151px;
    right: 7px;
    top: -36px;
    transform: rotate(7deg);
}

.card-singapore {
    top: 27%;
    right: 0%;
    width: 261px;
    transform: rotate(16deg);
}

.product-ssd {
    width: 107px;
    height: 107px;
    right: 5%;
    top: 1%;
    transform: rotate(-3deg);
}

.card-wrapper {
    position: absolute;
}

.card-usa {
    left: 14%;
    bottom: 30%;
    width: 246px;
}

.usa-3d-card {
    transform: matrix(0.92, -0.39, 0.8, 0.61, 0, 0);
}

.product-server {
    width: auto;
    height: 205px;
    left: 9px;
    top: -51px;
    z-index: 4;
}

.card-dubai {
    bottom: 30%;
    right: 19%;
    width: 280px;
}

.dubai-3d-card {
    transform: matrix(0.94, -0.33, 0.76, 0.65, 0, 0);
    width: 260px;
}

.product-server-two {
    width: 211px;
    height: 84px;
    left: 12px;
    top: 1px;
    z-index: 4;
}

@media (max-width: 1050px) {

    .card-canada {
        left: 10%;
    }

    .card-singapore {
        right: 3%;
    }

    .card-usa {
        left: 2%;
    }

    .card-dubai {
        left: 50%;
    }
}

@media (min-width: 1756px) and (max-width: 1920px) {
    .hero {
        padding-top: 110px;
    }

    .hero-copy h1 {
        max-width: 1220px;
    }

    .market-scene {
        margin-top: -300px;
    }

    .globe {
        width: 1920px;
        top: -260px;
    }

    .market-card {
        width: 320px;
    }

    .market-title {
        gap: 8px;
    }

    .market-title h5 {
        font-size: 28px;
    }

    .market-title img {
        height: 51px;
    }

    .market-stats {
        font-size: 14px;
    }

    .card-canada {
        top: 34%;
        left: 4%;
    }

    .product-desktop {
        width: 157px;
        height: 158px;
        top: -31px;
        right: 12px;
    }

    .card-singapore {
        top: 28%;
        right: 5%;
    }

    .product-ssd {
        width: 124px;
        height: 124px;
        right: 9%;
        top: 2px;
    }

    .card-usa {
        left: 18%;
        bottom: 34%;
        width: 270px;
    }

    .product-server {
        width: 234px;
        height: 220px;
        left: 52px;
        top: -60px;
    }

    .card-dubai {
        right: 18%;
        bottom: 34%;
        width: 295px;
    }

    .product-server-two {
        width: 232px;
        height: 92px;
        left: 15px;
        top: 0;
    }
}

@media (max-width: 1357px) {
    .globe {
        width: 1400px;
    }

    .card-dubai {
        right: 14%;
    }
}

@media (max-width: 1117px) and (min-width: 755px) {
    .market-scene {
        height: 577px;
        margin-top: -170px;
    }

    .globe {
        width: 1180px;
        top: -180px;
    }

    .market-card {
        width: 227px;
        min-height: 116px;
        padding: 26px 12px 10px;
        border-radius: 18px;
    }

    .market-title {
        gap: 6px;
        font-size: 14px;
    }

    .market-title img {
        width: 38px;
    }

    .market-stats {
        gap: 5px 8px;
        margin-top: 10px;
        font-size: 10px;
    }

    .card-canada {
        top: 38%;
        left: 3%;
    }

    .product-desktop {
        width: 102px;
        height: 102px;
        top: -14px;
        right: 11px;
    }

    .card-singapore {
        top: 35%;
        right: 5%;
    }

    .product-ssd {
        width: 90px;
        height: 90px;
        top: 0px;
        right: 8%;
    }

    .card-usa {
        left: 12%;
        bottom: 31%;
        width: 210px;
    }

    .product-server {
        width: 163px;
        height: 152px;
        left: 36px;
        top: -38px;
    }

    .card-dubai {
        bottom: 30%;
        left: 60%;
        width: 220px;
    }

    .product-server-two {
        width: 149px;
        height: 58px;
        left: 43px;
        top: 0px;
    }
}

@media (max-width: 754px) {

    .hero-copy {
        padding-top: 35px;
    }

    .hero-copy h1 {
        font-size: clamp(39px, 11vw, 52px);
    }

    .hero-copy p {
        max-width: 320px;
        margin: 19px auto 0;
        font-size: 14px;
    }

    .hero-actions {
        margin-top: 29px;
        gap: 8px;
    }

    .button {
        min-height: 47px;
        padding: 0 17px;
        font-size: 13px;
    }

    .market-scene {
        height: 425px;
        margin-top: -122px;
    }

    .globe {
        width: 920px;
        top: -165px;
    }

    .market-card {
        width: clamp(136px, 40vw, 170px);
        min-height: 100px;
        padding: 24px 10px 8px;
        border-radius: 17px;
    }

    .market-title {
        gap: 4px;
        font-size: 14px;
    }

    .market-title img {
        width: 21px;
        height: 14px;
    }

    .market-stats {
        gap: 4px 5px;
        margin-top: 9px;
        font-size: 8px;
    }

    .market-stats i {
        width: 3px;
        height: 3px;
    }

    .card-canada {
        top: 156px;
        left: 0%;
    }

    .product-desktop {
        width: 70px;
        height: 86px;
        top: -17px;
    }

    .card-singapore {
        top: 157px;
        right: 4%;
    }

    .product-ssd {
        width: 62px;
        height: 50px;
        top: -4px;
    }

    .card-usa {
        top: 289px;
        left: 5%;
    }

    .product-server {
        width: fit-content;
        height: 80px;
        left: 25px;
        top: -10px;
    }

    .card-dubai {
        top: 289px;
        left: 60%;
    }

    .product-server-two {
        width: 102px;
        height: 42px;
        left: 53px;
        top: 0px;
    }
}

@media (max-width: 475px) {
    .market-scene {
        height: 424px;
    }

    .market-card {
        width: 122px;
        min-height: 92px;
    }

    .market-stats {
        font-size: 6.5px;
    }

    .product-desktop {
        width: 52px;
        height: 82px;
        top: -8px;
        right: -2px;
    }

    .card-canada {
        top: 38%;
        left: 2%;
    }

    .card-singapore {
        top: 37%;
        right: 2%;
    }

    .card-usa {
        top: 63%;
        left: 8%;
    }

    .product-server-two {
        width: 81px;
        height: 42px;
        left: 28px;
        top: 8px;
    }

    .card-dubai {
        top: 72%;
        left: 55%;
    }
}

/* Trusted Brands style */

.trusted-brands {
    background-color: var(--color-ice-white);
}

.trusted-brands h4 {
    font-weight: 600;
    text-align: center;
}

.trusted-brands h4 span {
    color: var(--color-primary);
}

.brands-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: center;
    gap: 40px;
    margin-top: 40px;
}

.brand-item img {
    width: 100%;
    max-width: 150px;
    max-height: 55px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .8;
    transition: .3s;
}

.brand-item:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
}

@media (max-width:992px) {
    .brands-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 35px;
    }
}

@media (max-width:768px) {
    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .brand-item img {
        max-width: 120px;
    }
}

@media (max-width:576px) {
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .brand-item img {
        max-width: 110px;
    }

    .cta-buttons {
        gap: 10px;
    }

    .cta-buttons .hero-button {
        width: 100%;
        max-width: 230px;
        justify-content: center;
    }
}

@media (max-width:380px) {
    .brands-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* About us style */

.section-heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.badge {
    border: 2px solid var(--color-primary);
    width: fit-content;
    padding: 7px 20px;
    border-radius: 50px;
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: 600;
    font-family: var(--font-redhat-display);
    font-size: 14px;
}

.about-grid {
    margin-top: 35px;
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 245px);
}

.about-image-card {
    grid-column: 1;
    grid-row: 1/4;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.about-image-card .about-img {
    width: 100%;
    height: 100%;
}

.happy-clients {
    display: flex;
    gap: 10px;
    display: flex;
    padding: 5px 20px;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
    border-radius: 50px;
}

.happy-clients::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(160.61deg,
            rgba(255, 255, 255, 0.1) 0%,
            rgba(255, 255, 255, 0.05) 101.7%);

    opacity: 0.7;
    border-radius: 20px;

    backdrop-filter: blur(17.915px);
    -webkit-backdrop-filter: blur(17.915px);

    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);

    z-index: 0;
}

.happy-clients>* {
    position: relative;
    z-index: 1;
}

.happy-clients .clients {
    display: flex;
    align-items: center;
    margin-right: 6px;
}

.happy-clients .clients img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    margin-left: -12px;
}

.happy-clients p {
    color: var(--color-white);
    font-weight: 600;
    font-size: 14px;
}

.happy-clients p span {
    color: var(--color-primary);
    font-size: 16px;
}

.image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
}

.overlay-stats {
    background: linear-gradient(267.5deg, rgba(0, 0, 0, 0.1) 61.94%, rgba(0, 0, 0, 0.05) 65.62%);
    opacity: 0.9;
    border-width: 1px 0px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(17.915px);
    -webkit-backdrop-filter: blur(17.915px);
    border-radius: 20px;
    padding: 25px;
}

.overlay-stats .stat h3 {
    font-family: var(--font-playfair-display);
    font-style: italic;
    font-size: 72px;
    color: var(--color-white);
    margin: 0;
}

.overlay-stats .stat p {
    color: var(--color-white);
    margin-top: 15px;
    font-family: var(--font-redhat-display);
}

.divider {
    background: rgba(255, 255, 255, 0.4);
    width: 100%;
    margin: 0 auto;
    height: 1px;
    margin-top: 30px;
    margin-bottom: 9px;
}

.stats-card {
    grid-column: 2 / 4;
    grid-row: 2;
}

.feature-card,
.stats-card {
    border-radius: 20px;
    padding: 28px;
    transition: .35s;
}

.feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-surface-muted);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-card h3 {
    font-size: clamp(20px, 0.8vw + 10px, 24px);
    margin-top: 7px;
}

.feature-card p {
    color: var(--color-text-secondary);
}

.feature-card:hover,
.stats-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.stats-card {
    background: var(--color-success);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
}

.stats-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(../assets/images/about-us-background-img.webp);
    background-size: cover;
    opacity: 0.05;
}

.stats-card .stats-item h2 {
    font-family: var(--font-playfair-display);
    font-style: italic;
    font-size: 72px;
    color: var(--color-white);
    margin: 0;
}

.stats-card .stats-item p {
    color: var(--color-white);
    margin-top: 15px;
    font-family: var(--font-redhat-display);
}

.stats-divider {
    background: rgba(255, 255, 255, 0.4);
    width: 1px;
    margin: 0 auto;
    height: 100%;
    margin-top: 30px;
    margin-bottom: 9px;
}

@media (min-width: 1025px) and (max-width: 1238px) {
    .about-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .about-image-card {
        grid-row: 1 / 5;
    }
}

@media (max-width: 754px) {
    .section-heading {
        gap: 12px;
    }

    .section-heading h2 {
        font-size: clamp(2rem, 8vw, 2.7rem);
        text-align: center;
    }

    .about-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        margin-top: 24px;
        gap: 14px;
    }

    .about-image-card {
        min-height: 300px;
    }

    .image-overlay {
        padding: 12px;
    }

    .happy-clients {
        padding: 6px 21px;
        gap: 8px;
        width: fit-content;
    }

    .happy-clients .clients img {
        width: 30px;
        height: 30px;
    }

    .happy-clients p {
        font-size: 12px;
    }

    .overlay-stats {
        padding: 18px 16px;
    }

    .overlay-stats .stat h3 {
        font-size: 40px;
    }

    .overlay-stats .stat p {
        margin-top: 8px;
        font-size: 12px;
    }

    .feature-card,
    .stats-card {
        padding: 22px 18px;
    }

    .feature-card h3 {
        font-size: 1.25rem;
    }

    .stats-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        grid-column: auto;
        grid-row: auto;
    }

    .stats-card .stats-item h2 {
        font-size: 42px;
    }

    .stats-card .stats-item p {
        margin-top: 8px;
        font-size: 12px;
    }

    .stats-divider {
        height: 1px;
        width: 100%;
    }

    .feature-card .icon {
        align-items: center;
    }

    .feature-card .icon img {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 515px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* Marketplace categories section */

.categories-marketplace {
    padding: 12px;
}

.categories-marketplace .container {
    position: relative;
    background: var(--color-primary);
    border-radius: 20px;
}

.categories-marketplace .container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../assets/images/blogs-bg-image.webp) center / cover no-repeat;
    pointer-events: none;
    opacity: 0.05;
}

.categories-marketplace .section-heading .badge,
.workflow .section-heading .badge {
    color: var(--color-white);
    border-color: var(--color-white);
}

.categories-marketplace .section-heading h2,
.workflow .section-heading h2 {
    color: var(--color-white);
}

.categories {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(20, 1fr);
    gap: 16px;
    height: 680px;
    margin-top: 30px;
}

.category-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

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

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

.category-card h3 {
    color: var(--color-white);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 30px 18px;
    line-height: 1.25;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0) 100%);
}

.category--enterprise-servers {
    grid-column: 1 / 2;
    grid-row: 4 / 18;
}

.category--gpus {
    grid-column: 2 / 3;
    grid-row: 3 / 11;
}

.category--ai-gpu-servers {
    grid-column: 2 / 3;
    grid-row: 11 / 19;
}

.category--cpus {
    grid-column: 3 / 4;
    grid-row: 1 / 9;
}

.category--memory-big {
    grid-column: 3 / 4;
    grid-row: 9 / 20;
}

.category--memory-small {
    grid-column: 4 / 5;
    grid-row: 3 / 9;
}

.category--firewalls {
    grid-column: 4 / 5;
    grid-row: 9 / 18;
}

@media (max-width: 1023px) {
    .categories {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-auto-rows: auto;
        aspect-ratio: auto;
        height: auto;
    }

    .category-card {
        min-height: 200px;
        aspect-ratio: auto;
    }

    .category--enterprise-servers {
        grid-column: 1 / 2;
        grid-row: 1 / 4;
    }

    .category--gpus {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .category--ai-gpu-servers {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }

    .category--cpus {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }

    .category--memory-big {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }

    .category--memory-small {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
    }

    .category--firewalls {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
    }
}

@media (max-width: 699px) {
    .categories {
        grid-template-columns: 1fr;
    }

    .category-card {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .category--enterprise-servers,
    .category--gpus,
    .category--ai-gpu-servers,
    .category--cpus,
    .category--memory-big,
    .category--memory-small,
    .category--firewalls {
        grid-column: 1 / 2;
        grid-row: auto;
        /* reset — let it just flow with the stack */
    }
}

/* Why Choose Us Section */

.why-choose-us .container {
    position: relative;
    overflow: hidden;
}

.why-choose-us .why-us-img {
    position: absolute;
    transform: scaleX(-1);
    top: 12%;
}

.why-choose-us .section-heading {
    align-items: start;
    position: relative;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 15px;
    margin-top: 30px;
    position: relative;
}

.why-card {
    padding: 28px;
    min-height: 210px;
    border: 1px solid var(--color-surface-muted);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: .35s;
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
}

.why-card .card-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.why-card .card-header h4 {
    margin: 0;
}

.why-card p {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.why-grid .primary {
    background: var(--color-cream);
}

.why-grid .secondary {
    background: var(--color-off-white);
}

.why-card .card-icon {
    width: 41px;
    height: 41px;
}

.why-card .card-icon img {
    width: 41px;
    height: 100%;
}

.why-card--logistics {
    grid-area: 4/1;
}

.why-card--verification {
    grid-area: 3/2;
}

.why-card--transactions {
    grid-area: 4/2;
}

.why-card--marketplace {
    grid-area: 2/3;
}

.why-card--inspection {
    grid-area: 3/3;
}

.why-card--search {
    grid-area: 4/3;
}

.why-card--suppliers {
    grid-area: 1/4;
}

.why-card--pricing {
    grid-area: 2/4;
}

.why-card--support {
    grid-area: 3/4;
}

.why-card--network {
    grid-area: 4/4;
}

@media (max-width: 1237px) {

    .why-choose-us .why-us-img {
        display: none;
    }

    .why-choose-us .section-heading {
        align-items: center;
        text-align: center;
    }

    .why-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        gap: 20px;
        width: 100%;
    }

    .why-card {
        grid-area: auto !important;
        min-height: 190px;
    }
}

@media (max-width: 991px) {

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

    .why-card {
        min-height: 180px;
        padding: 24px;
    }
}

@media (max-width: 576px) {

    .why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .why-card {
        min-height: auto;
        padding: 20px;
    }

    .why-card .card-icon {
        width: 36px;
        height: 36px;
    }

    .why-card .card-header h4 {
        font-size: 20px;
    }

    .why-card p {
        margin-top: 10px;
        max-width: 90%;
    }
}

/* Workflow section */
.workflow {
    padding: 12px;
}

.workflow .container {
    background: var(--color-success);
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    padding-top: 60px;
}

.workflow .container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../assets/images/blogs-bg-image.webp) center / cover no-repeat;
    pointer-events: none;
    opacity: 0.05;
}

.workflow .badge {
    background: transparent;
}

.workflow-inner {
    position: relative;
    max-width: 1300px;
    margin: 0 auto;
    min-height: 460px;
    margin-top: 60px;
}

.workflow-arc {
    width: min(100%);
    height: auto;
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}

.workflow-people {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 400px;
    width: auto;
    z-index: 2;
    pointer-events: none;
}

.workflow-steps {
    display: flex;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.step {
    width: 140px;
    flex-shrink: 0;
    height: 200px;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-around;
    background: linear-gradient(152.97deg, rgba(21, 21, 21, 0.12) 0%, rgba(21, 21, 21, 0) 100%);
    backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
    border-radius: 14px;
    /* border: 1.5px solid rgba(255, 255, 255, 0.55); */
    padding: 16px 14px;
    color: var(--color-white);
    overflow: hidden;
}

.step::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    /* Border width */
    border-radius: inherit;
    background: radial-gradient(circle,
            rgba(255, 255, 255, 1) 30%,
            rgba(255, 255, 255, 0) 100%);

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
}

.step-icon {
    width: 29px;
    height: 29px;
    margin-bottom: 10px;
    display: block;
}

.step-shipment .step-icon {
    width: 41px;
}

.step h4 {
    margin: 0 0 6px;
    font-weight: 700;
    line-height: 1.3;
    font-size: 18px;
}

.step p {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-white);
}

.step--peak h4 {
    font-size: 15px;
}

.step-buyer,
.step-connect,
.step-delivery,
.step-inspection,
.step-negotiation,
.step-payment,
.step-shipment,
.step-search {
    position: absolute;
}

.step-buyer,
.step-search,
.step-connect {
    --rotate: -19deg;
}

.step-verification {
    --rotate: -12deg;
}

.step-negotiation {
    --rotate: 0deg;
}

.step-payment {
    --rotate: 12deg;
}

.step-inspection,
.step-shipment,
.step-delivery {
    --rotate: 19deg;
}

.step {
    transform: rotate(var(--rotate, 0deg));
}

@media (hover: hover) and (pointer: fine) {
    .step {
        transition: transform 0.3s ease;
    }

    .step:hover {
        transform: rotate(var(--rotate, 0deg)) translateY(-6px) scale(1.03);
    }
}


.step-buyer {
    bottom: 5%;
    left: 0%;
}

.step-search {
    bottom: 37%;
    left: 8%;
}

.step-connect {
    left: 18%;
    bottom: 57%;
}

.step-verification {
    left: 30%;
    top: -5%;
}

.step-negotiation {
    left: 44%;
    top: -9%;
}

.step-payment {
    top: -6%;
    right: 31%;
}

.step-inspection {
    right: 19%;
    top: 8%;
}

.step-shipment {
    top: 28%;
    right: 8.5%;
}

.step-delivery {
    right: 0%;
    bottom: 5%;
}

.step {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.step.is-visible {
    opacity: 1;
}

/* stagger — each card animates slightly after the previous one */
.step:nth-child(1) {
    transition-delay: 0.05s;
}

.step:nth-child(2) {
    transition-delay: 0.1s;
}

.step:nth-child(3) {
    transition-delay: 0.15s;
}

.step:nth-child(4) {
    transition-delay: 0.2s;
}

.step:nth-child(5) {
    transition-delay: 0.25s;
}

.step:nth-child(6) {
    transition-delay: 0.3s;
}

.step:nth-child(7) {
    transition-delay: 0.35s;
}

.step:nth-child(8) {
    transition-delay: 0.4s;
}

.step:nth-child(9) {
    transition-delay: 0.45s;
}

@media (max-width: 1427px) {

    .workflow-arc,
    .workflow-people {
        display: none;
    }

    .workflow .container {
        padding-bottom: 60px;
    }

    .workflow-inner {
        min-height: auto;
        margin-top: 32px;
    }

    .workflow-steps {
        position: static;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .step-buyer,
    .step-search,
    .step-connect,
    .step-verification,
    .step-negotiation,
    .step-payment,
    .step-inspection,
    .step-shipment,
    .step-delivery {
        position: static;
        inset: auto;
        transform: none;
    }

    .step {
        width: 100%;
        height: auto;
        min-height: 180px;
        padding: 25px;
    }

    .step--peak h4 {
        font-size: 20px;
    }
}

@media (max-width: 900px) {
    .workflow-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 599px) {
    .workflow-steps {
        grid-template-columns: 1fr;
    }

    .step {
        min-height: 0;
    }

    .step h4 {
        font-size: 16px;
    }

    .step p {
        font-size: 14px;
    }

    .step-icon {
        width: 24px;
        height: 24px;
    }

    .step-shipment .step-icon {
        width: 32px;
    }
}

/* platform features */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
    margin-top: 30px;
}

.platform-features .feature-card {
    flex-direction: row;
    gap: 20px;
}

.platform-features .feature-card h3 {
    margin-top: 0;
    margin-bottom: 60px;
}

.platform-features .feature-icon {
    padding: 10px;
    border-radius: 8px;
    height: fit-content;
}

.platform-features .feature-card:nth-child(odd) .feature-icon {
    background: var(--color-primary-light);
}

.platform-features .feature-card:nth-child(even) .feature-icon {
    background: var(--color-success-light);
}

.platform-features .feature-icon img {
    width: 39px;
    height: 39px;
}

/* Solution section */

.enterprise-solutions {
    padding: 12px;
}

.enterprise-solutions .container {
    position: relative;
    background: var(--color-black);
    z-index: 0;
    border-radius: 20px;
    overflow: hidden;
}

.enterprise-solutions .container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../assets/images/enterprise-solution-bg.webp) center / cover no-repeat;
    pointer-events: none;
    opacity: 0.07;
}

.enterprise-solutions .section-heading h2 {
    color: var(--color-white);
}

.solutions-wrapper {
    display: flex;
    gap: 18px;
    align-items: stretch;
    margin-top: 30px;
}

.solution-panel {
    flex: 0 0 84px;
    display: flex;
    overflow: hidden;
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: flex .55s cubic-bezier(.4, 0, .2, 1),
        border-color .35s,
        box-shadow .35s,
        background .35s;
}

.solution-panel:hover {
    border-color: rgba(244, 152, 33, .35);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
}

.solution-panel.active {
    flex: 1;
}

.solution-tab {
    width: 84px;
    min-width: 84px;
    background: transparent;
    border: none;
    padding: 24px 10px;
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: opacity .35s,
        transform .35s,
        width .35s,
        padding .35s;
}

.solution-panel.active .solution-tab {
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.panel-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 45px;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity .45s ease .15s,
        transform .45s ease .15s;
    pointer-events: none;
}

.solution-panel.active .panel-content {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    padding: 40px;
}

.solution-panel {
    position: relative;
}

.solution-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    transition: .35s;
}

.solution-panel:hover::after {
    box-shadow: inset 0 0 0 1px rgba(244, 152, 33, .2);
}

.solution-panel.active {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

.solution-image img {
    transition: transform .5s ease;
}

.solution-panel:hover .solution-image img {
    transform: scale(1.03);
}

.solution-info>* {
    opacity: 0;
    transform: translateY(20px);
    transition: .4s ease;
}

.solution-panel.active .solution-info>* {
    opacity: 1;
    transform: translateY(0);
}

.solution-panel.active .solution-info>*:nth-child(1) {
    transition-delay: .10s;
}

.solution-panel.active .solution-info>*:nth-child(2) {
    transition-delay: .18s;
}

.solution-panel.active .solution-info>*:nth-child(3) {
    transition-delay: .26s;
}

.solution-panel.active .solution-info>*:nth-child(4) {
    transition-delay: .34s;
}

.solution-info {
    flex: 1;
}

.solution-image {
    flex: .8;
}

.solution-number {
    margin-bottom: 24px;
    font-family: var(--font-redhat-display);
    font-weight: 700;
}

.solution-panel:nth-child(odd) .solution-number {
    color: var(--color-primary);
}

.solution-panel:nth-child(even) .solution-number {
    color: var(--color-success);
}

.solution-info h3 {
    color: var(--color-white);
    margin-bottom: 18px;
}

.solution-info h3 span {
    font-family: var(--font-playfair-display);
    font-style: italic;
    font-weight: 500;
}

.solution-info p {
    max-width: 560px;
    margin-bottom: 30px;
    color: var(--color-white);
}

.solution-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin-top: 60px;
}

.solution-features li {
    position: relative;
    padding-left: 32px;
    color: var(--color-white);
    font-size: clamp(14px, 1.1vw, 18px);
    font-family: var(--font-redhat-display);
    font-weight: 500;
}

.solution-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 19px;
    height: 19px;
    background: url("../assets/images/icons/checked-icon.svg") center/contain no-repeat;
}

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

.solution-image img {
    width: 100%;
    max-width: 470px;
    display: block;
    border-radius: 20px;
}

.tab-number {
    margin: 0;
}

.solution-panel:nth-child(odd) .tab-number {
    color: var(--color-primary);
}

.solution-panel:nth-child(even) .tab-number {
    color: var(--color-success);
}

.tab-title {
    writing-mode: vertical-rl;
    text-align: center;
    white-space: nowrap;
    color: var(--color-white);
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    font-style: normal;
    font-family: var(--font-redhat-display);
}

.tab-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .35s;
}

.tab-arrow img {
    width: 16px;
    transition: .35s;
}

.solution-panel:hover .tab-arrow,
.solution-panel.active .tab-arrow {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.solution-panel:hover .tab-arrow img,
.solution-panel.active .tab-arrow img {
    filter: brightness(0) invert(1);
}

@media (max-width: 1400px) {

    .solutions-wrapper {
        min-height: 520px;
    }

    .panel-content {
        gap: 30px;
    }

    .solution-image img {
        max-width: 400px;
    }

}

@media (max-width: 1200px) {

    .solutions-wrapper {
        flex-direction: column;
        min-height: auto;
    }

    .solution-panel,
    .solution-panel.active {
        width: 100%;
    }

    .solution-tab {
        width: 100%;
        min-width: 100%;
        min-height: 90px;
        padding: 20px 28px;
        flex-direction: row;
        justify-content: space-between;
    }

    .solution-panel.active .solution-tab {
        display: none;
    }

    .tab-title {
        writing-mode: horizontal-tb !important;
        transform: none;
        font-size: 24px;
        text-align: left;
    }

    .panel-content,
    .solution-panel.active .panel-content {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px;
    }

    .solution-image {
        order: -1;
    }

    .solution-image img {
        max-width: 450px;
    }

}

@media (max-width: 768px) {

    .solution-panel {
        border-radius: 18px;
    }

    .panel-content,
    .solution-panel.active .panel-content {
        padding: 24px;
    }

    .solution-info h3 {
        margin-bottom: 14px;
    }

    .solution-info p {
        margin-bottom: 22px;
    }

    .solution-image img {
        max-width: 340px;
    }

}

@media (max-width: 576px) {

    .solutions-wrapper {
        gap: 14px;
    }

    .solution-tab {
        padding: 18px;
        min-height: 74px;
    }

    .tab-title {
        font-size: 20px;
    }

    .tab-arrow {
        width: 36px;
        height: 36px;
    }

    .tab-arrow img {
        width: 14px;
    }

    .solution-number {
        margin-bottom: 18px;
        font-size: 20px;
    }

    .solution-features {
        gap: 12px;
    }

    .solution-features li {
        padding-left: 28px;
    }

    .solution-features li::before {
        width: 16px;
        height: 16px;
    }

    .solution-image img {
        max-width: 100%;
    }
}

/* Global Coverage Section */

.country-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 20px;
    margin-bottom: 55px;
}

.country-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 1px solid var(--color-black);
    border-radius: 50px;
    background: var(--color-white);
    color: var(--color-text-primary);
    font-family: var(--font-redhat-display);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: .35s;
}

.country-tab img {
    width: 27px;
    height: 19px;
}

.country-tab:hover,
.country-tab.active {
    border-color: var(--color-success);
    color: var(--color-success);
    box-shadow: 0 12px 25px var(--color-off-white);
}

.coverage-map {
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
}

.coverage-map>img {
    width: 100%;
    display: block;
    user-select: none;
}

.location-group {
    position: absolute;
    left: 20.3%;
    top: 17%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    transform: translate(-50%, -50%);
    transition: left .6s ease, top .6s ease;
}

.marker-pin {
    width: 59px;
    height: 59px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:
        0 15px 35px rgba(0, 0, 0, .18);
    position: relative;
}

.marker-pin::after {
    content: "";
    position: absolute;
    bottom: -36px;
    width: 4px;
    height: 36px;
    background: #000;
    border-radius: 10px;
}

.marker-pin img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.location-card,
.mobile-location-card {
    padding: 24px;
    border-radius: 24px;
    min-width: 330px;
    z-index: 15;
    background: rgba(255, 255, 255);
    border-width: 0px 0px 2.11741px 2.11741px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0px 8.63105px 42.3481px rgba(22, 25, 46, 0.12);
    transition:
        left .6s cubic-bezier(.4, 0, .2, 1),
        top .6s cubic-bezier(.4, 0, .2, 1);
    z-index: 15;
}

.location-header {
    margin-bottom: 24px;
}

.location-header h4 {
    color: var(--color-white);
    font-family: var(--font-redhat-display);
    font-size: 24px;
    font-weight: 700;
}

.location-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.stat-item span:last-child {
    font-size: 16px;
    color: var(--color-text-primary);
}

.stat-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
}

.stat-dot.primary {
    background: var(--color-primary);
}

.stat-dot.success {
    background: var(--color-success);
}

.stat-dot.warning {
    background: var(--color-danger);
}

.location-card:hover,
.mobile-location-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 35px 80px rgba(0, 0, 0, .35);
}

.location-card,
.mobile-location-card,
.location-header,
.location-stats {
    transition: .35s ease;
}

.mobile-location-card {
    display: none;
}

@media (max-width: 768px) {

    .marker-pin::after {
        bottom: -28px;
        height: 28px;
    }

    .country-tabs {
        justify-content: start;
        overflow-x: scroll;
        gap: 9px;
        flex-wrap: nowrap;
        margin-bottom: 30px;
    }

    .country-tab {
        white-space: nowrap;
        margin-bottom: 17px;
    }

    .location-group {
        position: absolute;
        transform: translate(-50%, -50%);
    }

    .location-card {
        display: none;
    }

    .mobile-location-card {
        display: block;
        max-width: 300px;
        margin: auto;
        margin-bottom: 45px;
    }
}

/* supplier-buyer */

.supplier-buyer {
    padding: 12px;
}

.supplier-buyer .container {
    background: var(--color-light-blue);
    border-radius: 20px;
}

.supplier-buyer-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 30px;
}

.supplier-buyer-card {
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}

.supplier-buyer-card img {
    width: 100%;
    border-radius: 20px;
}

.card-overlay {
    position: relative;
    padding: 25px;
}

.card-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(267.5deg, rgba(0, 0, 0, 0.7) 61.94%, rgba(0, 0, 0, 0.65) 65.62%);
    opacity: 0.9;
    border-width: 1px 0px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    backdrop-filter: blur(17.915px);
    -webkit-backdrop-filter: blur(17.915px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    z-index: 0;
}

.card-overlay:nth-child(2)::before {
    background: linear-gradient(267.5deg, rgba(0, 0, 0, 0.1) 61.94%, rgba(0, 0, 0, 0.05) 65.62%);
}

.card-overlay .heading {
    position: relative;
    color: var(--color-white);
}

.card-overlay .heading h3 {
    margin-bottom: 10px;
}

.card-overlay .benefits {
    color: var(--color-white);
    position: relative;
    margin-top: 25px;
}

.card-overlay .benefit-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
    row-gap: 8px;
    padding-left: 17px;
}

.card-overlay .benefits ul li {
    color: var(--color-white);
    font-family: var(--font-redhat-display);
}

.supplier-buyer-card .btn-primary {
    position: relative;
    margin-top: 40px;
}

.supplier-buyer-card:nth-child(2) .btn-primary {
    background: var(--color-primary);
}

@media (max-width:991px) {

    .supplier-buyer-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 616px) {

    .card-overlay {
        position: static;
        padding: 10px;
    }

    .supplier-buyer-card {
        background: #111;
    }

    .card-overlay::before {
        opacity: 0.6;
    }

    .benefit-list li {
        font-size: 14px;
    }

    .supplier-buyer-card .btn-primary {
        padding: 10px 15px;
    }
}

@media (max-width: 414px) {

    .supplier-buyer-card {
        height: 400px;
    }



    .supplier-buyer-card .btn-primary {
        font-size: 14px;
        margin-top: 20px;
    }

    .benefit-list li {
        font-size: 12px;
    }

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

    .card-overlay .benefit-list {
        column-gap: 12px;
    }
}

/* Testimonials section */

.testimonials .section-heading {
    margin-bottom: 30px;
}

.testimonial-hero-card {
    background: var(--color-ice-white);
    padding: 60px 20px 39px 20px;
    border: 1px solid var(--color-surface-muted);
    border-radius: 20px;
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.quotation-image {
    position: absolute;
    right: 30px;
    opacity: 0.7;
}

.testimonial-hero-card h1 {
    text-align: center;
}

.customer-profile {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    gap: 15px;
}

.avatar {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    padding: 4px;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12),
        0 2px 6px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

.avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.profile-info h6 {
    margin-bottom: 5px;
}

.profile-info p {
    font-style: italic;
    color: var(--color-text-secondary);
    font-weight: 500;
    font-size: 14px;
}

.ratings {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 10px;
}

.rating-score {
    font-size: 16px;
    font-weight: 500;
}

.ratings .stars {
    height: 11px;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 30px;
}

.testimonial-card {
    padding: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    min-height: 260px;
    transition: .3s;
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
}

.testimonial-card h3 {
    font-size: 24px;
    margin-bottom: 18px;
}

.testimonial-card p {
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 28px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
}

.testimonial-author .avatar {
    width: 50px;
    height: 50px;
}

.author-info h4 {
    font-size: 18px;
    margin-bottom: 4px;
    color: var(--color-text-primary);
}

.author-info p {
    font-size: 14px;
    font-style: italic;
    margin-bottom: 0px;
}

@media (max-width:991px) {

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

}

@media (max-width:767px) {

    .testimonial-hero-card {
        padding: 60px 15px 39px 15px;
    }

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

    .testimonial-card {
        padding: 20px;
        min-height: auto;
    }

    .testimonial-card h3 {
        font-size: 20px;
    }

}

@media (max-width: 414px) {
    .testimonial-hero-card {
        width: 100%;
    }
}

/* Blogs section */

.blogs {
    padding: 12px;
}

.blogs .container {
    position: relative;
    background: var(--color-primary);
    border-radius: 20px;
}

.blogs .container::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/images/blogs-bg-image.webp") center/cover no-repeat;
    pointer-events: none;
    opacity: 0.05;
}

.blogs .section-heading {
    position: relative;
    margin-bottom: 30px;
}

.blogs .section-heading .badge {
    color: var(--color-white);
    border-color: var(--color-white);
}

.blogs .section-heading h2 {
    color: var(--color-white);
}

.main-blog {
    background: var(--color-white);
    display: grid;
    border-radius: 20px;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    gap: 20px;
    position: relative;
}

.main-blog .blog-img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.main-blog .badge {
    background: var(--color-light-green);
    color: var(--color-success);
    border-color: var(--color-success);
}

.main-blog .blog-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: fit-content;
    align-items: center;
}

.blog-header .published-date {
    display: flex;
    gap: 10px;
    align-items: center;
}

.published-date img {
    width: 19px;
}

.blog-header .published-date p {
    white-space: nowrap;
    font-size: 16px;
}

.blog-content h3 {
    margin-top: 30px;
    margin-bottom: 25px;
}

.blog-content .blog-paragraph {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.blogs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.blog-card {
    height: fit-content;
}

.blog-card img {
    width: 100%;
    height: 236px;
    border-radius: 20px;
    object-fit: cover;
    transform: scale(1);
    transition: transform 0.3s ease;
}

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

.blog-card h4 {
    font-size: clamp(1.25rem, 1.4vw, 1.5rem);
    color: var(--color-white);
    margin-top: 15px;
}

@media (max-width: 787px) {
    .main-blog {
        grid-template-columns: 1fr;
    }
}

/* Contact us section */

.contact-us-section {
    padding: 120px 0;
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 40px;
    align-items: start;
    margin-top: 30px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-info-card:first-child {
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.contact-info-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contact-info-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.contact-info-icon.success {
    background: var(--color-success-light);
}

.contact-info-icon img {
    width: 22px;
}

.contact-info-content h3 {
    font-size: clamp(32px, 2vw, 40px);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 18px;
}

.contact-info-content h3 span {
    font-family: var(--font-playfair-display);
    font-style: italic;
    font-weight: 500;
}

.contact-info-content p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
    font-weight: 500;
    font-size: clamp(16px, 1.1vw, 18px);
}

.contact-info-content a {
    color: var(--color-text-primary);
    font-weight: 700;
    text-decoration: none;
    transition: .3s;
    font-family: var(--font-redhat-display);
    font-size: clamp(16px, calc(14px + 0.4vw), 20px);
}

.contact-info-content a:hover {
    color: var(--color-primary);
}

.contact-form-wrapper {
    position: relative;
    padding: 48px;
    border-radius: 24px;
    background: var(--color-light-blue);
    overflow: hidden;
}

.contact-form-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../assets/images/contact-bg-pattern.webp") center/contain no-repeat;
    pointer-events: none;
}

.contact-form-header,
.contact-form {
    position: relative;
    z-index: 2;
}

.contact-form-header {
    margin-bottom: 36px;
}

.contact-form-header h2 {
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.contact-form-header h2 span {
    font-family: var(--font-playfair-display);
    font-style: italic;
    font-weight: 500;
}

.contact-form-header p {
    color: var(--color-text-secondary);
    line-height: 1.8;
}

.contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.full-width {
    grid-column: 1/-1;
}

.form-group label {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 10px;
    font-family: var(--font-redhat-display);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    border: none;
    outline: none;
    background: var(--color-white);
    border-radius: 50px;
    padding: 16px 22px;
    font-family: var(--font-redhat-display);
    color: var(--color-text-primary);
    transition: .3s;
}

.form-group textarea {
    border-radius: 18px;
    resize: none;
    min-height: 180px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    box-shadow: 0 0 0 2px rgba(101, 192, 127, .25);
}

.form-group select {

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("../assets/images/icons/arrow-down.svg");
    background-repeat: no-repeat;
    background-position: right 22px center;
    background-size: 10px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 38px;
    border: none;
    width: fit-content;
    border-radius: 50px;
    background: var(--color-success);
    color: var(--color-white);
    font-family: var(--font-redhat-display);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s;
}

.btn-primary:hover {
    transform: translateY(-3px);
    filter: brightness(.95);
}

@media (max-width:991px) {

    .contact-wrapper {
        grid-template-columns: 1fr;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-info {
        flex-direction: row;
    }

    .contact-info-card:first-child {
        border-bottom: 0px;
        border-right: 1px solid rgba(0, 0, 0, .08);
    }

}

@media (max-width:767px) {

    .contact-us-section {
        padding: 80px 0;
    }

    .contact-form-wrapper {
        padding: 30px;
    }

    .contact-info {
        flex-direction: column;
    }

    .contact-info-card:first-child {
        border-right: 0px;
        border-bottom: 1px solid rgba(0, 0, 0, .08);
    }

}