/* ================================================================
   ONESKY INNOVATIONS
   PRODUCTS & BRANDS PAGE
   ================================================================ */


/* ================================================================
   VARIABLES
   ================================================================ */

.products-page {

    --prd-blue: #0070E0;
    --prd-cyan: #00C2FF;
    --prd-dark: #081226;

    --prd-text: #0F172A;
    --prd-muted: #64748B;

    --prd-border: #E2E8F0;

    --prd-bg: #F8FAFC;

    --prd-shadow:
        0 15px 40px rgba(15, 23, 42, .07);

    --prd-transition:
        all .35s cubic-bezier(.16, 1, .3, 1);

}


/* ================================================================
   HERO
   ================================================================ */

.products-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        105px 0 75px;

    background:

        radial-gradient(circle at 12% 25%,
            rgba(0, 112, 224, .08),
            transparent 30%),

        radial-gradient(circle at 90% 15%,
            rgba(0, 194, 255, .08),
            transparent 30%),

        linear-gradient(180deg,
            #fff,
            #f8fbff);

}


.products-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        520px;

    height:
        520px;

    right:
        -280px;

    top:
        -280px;

    border:
        1px solid rgba(0, 112, 224, .08);

    border-radius:
        50%;

    animation:
        productHeroOrb 10s ease-in-out infinite;

}


@keyframes productHeroOrb {

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

    50% {
        transform:
            scale(1.1);
    }

}


.products-hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        900px;

}


.product-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        7px 13px;

    border:
        1px solid rgba(0, 112, 224, .18);

    border-radius:
        30px;

    background:
        rgba(0, 112, 224, .05);

    color:
        var(--prd-blue);

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

    margin-bottom:
        22px;

}


.product-badge-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--prd-cyan);

    box-shadow:
        0 0 13px rgba(0, 194, 255, .8);

    animation:
        productDot 2s ease-in-out infinite;

}


@keyframes productDot {

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

    50% {
        opacity: .6;
        transform: scale(1.45);
    }

}


.products-hero h1 {

    max-width:
        850px;

    margin:
        0 0 22px;

    color:
        var(--prd-dark);

    font-size:
        clamp(42px, 5.5vw, 72px);

    line-height:
        1.03;

    letter-spacing:
        -.055em;

    font-weight:
        800;

}


.gradient-text {

    background:
        linear-gradient(120deg,
            #0066D6,
            #008FEA,
            #00C2FF);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;

}


.products-hero-content>p {

    max-width:
        760px;

    color:
        var(--prd-muted);

    font-size:
        17px;

    line-height:
        1.75;

    margin:
        0 0 31px;

}


.products-hero-actions {

    display:
        flex;

    gap:
        12px;

    flex-wrap:
        wrap;

}


.products-hero-actions .btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

}


.product-stats {

    display:
        flex;

    flex-wrap:
        wrap;

    margin-top:
        48px;

    padding-top:
        22px;

    border-top:
        1px solid var(--prd-border);

}


.product-stats>div {

    min-width:
        145px;

    padding:
        0 28px;

    border-right:
        1px solid var(--prd-border);

}


.product-stats>div:first-child {

    padding-left:
        0;

}


.product-stats>div:last-child {

    border-right:
        none;

}


.product-stats strong {

    display:
        block;

    color:
        var(--prd-dark);

    font-size:
        14px;

    font-weight:
        800;

}


.product-stats span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--prd-muted);

    font-size:
        11px;

}


/* ================================================================
   SECTION HEADINGS
   ================================================================ */

.products-page .section-heading {

    max-width:
        760px;

    margin-bottom:
        44px;

}


.products-page .center-heading {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;

}


.section-eyebrow {

    color:
        var(--prd-blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

    margin-bottom:
        12px;

}


.products-page .section-heading h2 {

    color:
        var(--prd-dark);

    font-size:
        clamp(30px, 4vw, 48px);

    line-height:
        1.1;

    letter-spacing:
        -.04em;

    margin:
        0 0 14px;

}


.products-page .section-heading p {

    color:
        var(--prd-muted);

    font-size:
        15px;

    line-height:
        1.7;

    margin:
        0;

}


/* ================================================================
   PRODUCTS SECTION
   ================================================================ */

.products-section {

    background:
        #fff;

}


/* ================================================================
   PRODUCT GRID
   ================================================================ */

.products-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        18px;

}


/* ================================================================
   PRODUCT CARD
   ================================================================ */

.product-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid var(--prd-border);

    border-radius:
        17px;

    background:
        #fff;

    transition:
        var(--prd-transition);

    display:
        flex;

    flex-direction:
        column;

}


.product-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(0, 112, 224, .25);

    box-shadow:
        var(--prd-shadow);

}


.product-card::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        0;

    height:
        2px;

    background:
        linear-gradient(90deg,
            var(--prd-blue),
            var(--prd-cyan));

    transition:
        width .45s ease;

}


.product-card:hover::after {

    width:
        100%;

}


.product-card-large {

    grid-column:
        span 2;

    display:
        grid;

    grid-template-columns:
        1.05fr .95fr;

}


.product-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        20px 22px 0;

}


.product-category {

    color:
        var(--prd-blue);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .1em;

}


.product-index {

    color:
        #CBD5E1;

    font-size:
        10px;

    font-weight:
        800;

}


/* ================================================================
   PRODUCT VISUAL
   ================================================================ */

.product-visual {

    min-height:
        235px;

    position:
        relative;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* ================================================================
   INVOICELL VISUAL
   ================================================================ */

.invoicell-visual {

    background:
        radial-gradient(circle at center,
            rgba(0, 194, 255, .09),
            transparent 65%);

}


.software-window {

    width:
        72%;

    max-width:
        430px;

    border:
        1px solid #D9E6F2;

    border-radius:
        10px;

    background:
        #fff;

    overflow:
        hidden;

    box-shadow:
        0 20px 45px rgba(0, 70, 130, .13);

    transform:
        perspective(900px) rotateX(3deg) rotateY(-4deg);

    transition:
        var(--prd-transition);

}


.product-card:hover .software-window {

    transform:
        perspective(900px) rotateX(0) rotateY(0) translateY(-5px) scale(1.025);

}


.window-top {

    height:
        26px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        0 10px;

    background:
        #F4F7FA;

    border-bottom:
        1px solid #E6EDF3;

}


.window-top span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #CBD5E1;

}


.window-content {

    display:
        flex;

    min-height:
        155px;

}


.window-sidebar {

    width:
        46px;

    background:
        #081226;

    padding:
        18px 11px;

}


.window-sidebar i {

    display:
        block;

    height:
        5px;

    margin-bottom:
        13px;

    border-radius:
        4px;

    background:
        rgba(255, 255, 255, .3);

}


.window-main {

    flex:
        1;

    padding:
        15px;

}


.window-line {

    height:
        7px;

    background:
        #E8EEF4;

    border-radius:
        4px;

    margin-bottom:
        8px;

}


.window-line.long {
    width: 70%;
}


.window-line.medium {
    width: 45%;
}


.window-cards {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        7px;

    margin:
        14px 0;

}


.window-cards div {

    height:
        35px;

    border-radius:
        5px;

    background:
        linear-gradient(135deg,
            rgba(0, 112, 224, .12),
            rgba(0, 194, 255, .06));

}


.window-table {

    display:
        grid;

    gap:
        6px;

}


.window-table span {

    display:
        block;

    height:
        5px;

    border-radius:
        4px;

    background:
        #E8EEF4;

}


.visual-floating-tag {

    position:
        absolute;

    right:
        12%;

    bottom:
        22%;

    padding:
        7px 10px;

    border:
        1px solid rgba(0, 112, 224, .2);

    border-radius:
        6px;

    background:
        #fff;

    color:
        var(--prd-blue);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .08em;

    box-shadow:
        0 8px 20px rgba(0, 70, 130, .08);

    animation:
        floatingTag 3s ease-in-out infinite;

}


@keyframes floatingTag {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-7px);
    }

}


/* ================================================================
   HISTORY VISUAL
   ================================================================ */

.history-visual {

    background:
        linear-gradient(145deg,
            #FFF9EF,
            #FFFDF8);

}


.brand-pack {

    width:
        115px;

    height:
        170px;

    border-radius:
        7px 7px 12px 12px;

    background:
        linear-gradient(135deg,
            #8D1018,
            #D73A27);

    color:
        #fff;

    box-shadow:
        0 20px 35px rgba(120, 20, 15, .22);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    padding:
        17px 10px;

    transform:
        rotate(-4deg);

    transition:
        var(--prd-transition);

}


.product-card:hover .brand-pack {

    transform:
        rotate(0) translateY(-7px) scale(1.035);

}


.pack-top {

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        .12em;

}


.pack-symbol {

    width:
        62px;

    height:
        62px;

    margin:
        25px 0 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid rgba(255, 255, 255, .6);

    border-radius:
        50%;

    font-size:
        27px;

    font-weight:
        800;

}


.pack-text {

    font-size:
        8px;

    letter-spacing:
        .13em;

}


.pack-shadow {

    position:
        absolute;

    width:
        100px;

    height:
        15px;

    bottom:
        35px;

    border-radius:
        50%;

    background:
        rgba(80, 20, 10, .13);

    filter:
        blur(9px);

}


/* ================================================================
   ZOUTH VISUAL
   ================================================================ */

.zouth-visual {

    background:
        linear-gradient(145deg,
            #F5F8FF,
            #F8FAFC);

}


.sports-bag {

    position:
        relative;

    width:
        160px;

    height:
        125px;

}


.bag-handle {

    position:
        absolute;

    width:
        65px;

    height:
        42px;

    left:
        48px;

    top:
        0;

    border:
        7px solid #26364E;

    border-bottom:
        0;

    border-radius:
        30px 30px 0 0;

}


.bag-body {

    position:
        absolute;

    bottom:
        0;

    left:
        0;

    width:
        160px;

    height:
        105px;

    border-radius:
        15px 15px 11px 11px;

    background:
        linear-gradient(135deg,
            #0D1729,
            #1C2E49);

    box-shadow:
        0 20px 30px rgba(10, 25, 50, .2);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    transition:
        var(--prd-transition);

}


.product-card:hover .bag-body {

    transform:
        translateY(-7px);

}


.bag-body strong {

    font-size:
        22px;

    letter-spacing:
        .08em;

}


.bag-body span {

    color:
        #6ED8FF;

    font-size:
        7px;

    letter-spacing:
        .25em;

}


.bag-body i {

    position:
        absolute;

    width:
        8px;

    height:
        8px;

    border:
        1px solid #415675;

    border-radius:
        50%;

}


.bag-body i:nth-of-type(1) {
    left: 15px;
    top: 15px;
}


.bag-body i:nth-of-type(2) {
    right: 15px;
    top: 15px;
}


.bag-body i:nth-of-type(3) {
    right: 15px;
    bottom: 15px;
}


/* ================================================================
   CHESS VISUAL
   ================================================================ */

.games-visual {

    background:
        linear-gradient(145deg,
            #F7F8FA,
            #EFF3F7);

}


.chess-board {

    width:
        165px;

    height:
        165px;

    display:
        grid;

    grid-template-columns:
        repeat(8, 1fr);

    border:
        7px solid #344054;

    border-radius:
        4px;

    transform:
        perspective(500px) rotateX(53deg) rotateZ(-2deg);

    box-shadow:
        0 20px 25px rgba(15, 23, 42, .18);

    transition:
        var(--prd-transition);

}


.product-card:hover .chess-board {

    transform:
        perspective(500px) rotateX(53deg) rotateZ(-2deg) translateY(-6px);

}


.chess-board span:nth-child(odd) {

    background:
        #D6DEE8;

}


.chess-board span:nth-child(even) {

    background:
        #63738A;

}


.king-piece {

    position:
        absolute;

    font-size:
        65px;

    color:
        #172235;

    text-shadow:
        0 7px 10px rgba(0, 0, 0, .2);

    transform:
        translateY(-22px);

    transition:
        var(--prd-transition);

}


.product-card:hover .king-piece {

    transform:
        translateY(-31px) scale(1.05);

}


/* ================================================================
   UTILITY VISUAL
   ================================================================ */

.utility-visual {

    background:
        linear-gradient(145deg,
            #F2FAF7,
            #F8FBFA);

}


.utility-bag {

    position:
        absolute;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff;

    font-weight:
        800;

    box-shadow:
        0 18px 30px rgba(10, 80, 60, .15);

    transition:
        var(--prd-transition);

}


.bag-large {

    width:
        135px;

    height:
        160px;

    border-radius:
        10px;

    background:
        linear-gradient(145deg,
            #146C55,
            #208B70);

    transform:
        rotate(-5deg);

}


.bag-large span {

    font-size:
        8px;

    letter-spacing:
        .18em;

}


.bag-large strong {

    font-size:
        22px;

}


.bag-small {

    width:
        85px;

    height:
        100px;

    right:
        24%;

    bottom:
        20%;

    border-radius:
        9px;

    background:
        linear-gradient(145deg,
            #26364E,
            #40536D);

    font-size:
        7px;

    letter-spacing:
        .08em;

    transform:
        rotate(8deg);

}


.product-card:hover .bag-large {

    transform:
        rotate(0) translateY(-6px);

}


.product-card:hover .bag-small {

    transform:
        rotate(3deg) translateY(-8px);

}


/* ================================================================
   CUSTOM PRODUCT VISUAL
   ================================================================ */

.custom-product-card {

    background:
        linear-gradient(145deg,
            #fff,
            #F5FAFF);

}


.custom-visual {

    background:
        radial-gradient(circle,
            rgba(0, 112, 224, .07),
            transparent 65%);

}


.custom-orbit {

    position:
        absolute;

    border:
        1px solid rgba(0, 112, 224, .18);

    border-radius:
        50%;

    animation:
        customOrbit 6s ease-in-out infinite;

}


.orbit-a {

    width:
        180px;

    height:
        180px;

}


.orbit-b {

    width:
        125px;

    height:
        125px;

    animation-delay:
        -.8s;

}


.orbit-c {

    width:
        75px;

    height:
        75px;

    animation-delay:
        -1.5s;

}


@keyframes customOrbit {

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

    50% {
        transform:
            scale(1.08);
        opacity:
            1;
    }

}


.custom-core {

    width:
        58px;

    height:
        58px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        linear-gradient(135deg,
            var(--prd-blue),
            var(--prd-cyan));

    color:
        #fff;

    font-size:
        30px;

    font-weight:
        300;

    box-shadow:
        0 0 35px rgba(0, 194, 255, .35);

    animation:
        customCore 3s ease-in-out infinite;

}


@keyframes customCore {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


/* ================================================================
   PRODUCT CARD BODY
   ================================================================ */

.product-card-body {

    padding:
        0 24px 24px;

    display:
        flex;

    flex-direction:
        column;

    flex:
        1;

}


.product-card-large .product-card-body {

    padding:
        10px 30px 30px;

}


.brand-title {

    display:
        flex;

    align-items:
        baseline;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        9px;

}


.brand-title h3 {

    margin:
        0;

    color:
        var(--prd-dark);

    font-size:
        21px;

    letter-spacing:
        -.025em;

}


.brand-title h3 sup {

    font-size:
        9px;

    color:
        #64748B;

}


.brand-title>span {

    color:
        #94A3B8;

    font-size:
        10px;

    font-weight:
        700;

}


.product-card-body>p {

    margin:
        0 0 16px;

    color:
        var(--prd-muted);

    font-size:
        12.5px;

    line-height:
        1.7;

}


.product-features {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        5px;

    margin-bottom:
        19px;

}


.product-features span {

    padding:
        5px 8px;

    border:
        1px solid #E4EAF0;

    border-radius:
        5px;

    background:
        #FAFCFD;

    color:
        #64748B;

    font-size:
        9px;

    font-weight:
        650;

}


.product-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        auto;

    width:
        fit-content;

    color:
        var(--prd-blue);

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        800;

    transition:
        var(--prd-transition);

}


.product-link span {

    transition:
        transform .25s ease;

}


.product-link:hover {

    color:
        #0056B3;

}


.product-link:hover span {

    transform:
        translateX(4px);

}


/* ================================================================
   PRODUCT DEVELOPMENT PROCESS
   ================================================================ */

.product-process {

    background:
        #F8FAFC;

    border-top:
        1px solid var(--prd-border);

    border-bottom:
        1px solid var(--prd-border);

}


.product-process-grid {

    display:
        flex;

    align-items:
        stretch;

    justify-content:
        center;

}


.product-process-card {

    width:
        175px;

    min-height:
        175px;

    padding:
        24px 18px;

    text-align:
        center;

    border:
        1px solid var(--prd-border);

    border-radius:
        14px;

    background:
        #fff;

    position:
        relative;

    transition:
        var(--prd-transition);

}


.product-process-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(0, 112, 224, .25);

    box-shadow:
        var(--prd-shadow);

}


.process-number {

    position:
        absolute;

    right:
        13px;

    top:
        11px;

    color:
        #CBD5E1;

    font-size:
        9px;

    font-weight:
        800;

}


.process-icon {

    width:
        46px;

    height:
        46px;

    margin:
        0 auto 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        11px;

    background:
        rgba(0, 112, 224, .08);

    font-size:
        17px;

}


.product-process-card h3 {

    margin:
        0 0 6px;

    color:
        var(--prd-dark);

    font-size:
        15px;

}


.product-process-card p {

    margin:
        0;

    color:
        var(--prd-muted);

    font-size:
        10.5px;

    line-height:
        1.55;

}


.process-connector {

    width:
        30px;

    height:
        1px;

    background:
        #CBD5E1;

    align-self:
        center;

    position:
        relative;

}


.process-connector::after {

    content:
        "›";

    position:
        absolute;

    right:
        -3px;

    top:
        50%;

    transform:
        translateY(-55%);

    color:
        #94A3B8;

    font-size:
        17px;

}


/* ================================================================
   CTA
   ================================================================ */

.products-cta {

    position:
        relative;

    overflow:
        hidden;

    background:
        #071226;

    color:
        #fff;

}


.products-cta-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -180px;

    top:
        -250px;

    border-radius:
        50%;

    background:
        radial-gradient(circle,
            rgba(0, 194, 255, .18),
            transparent 68%);

    animation:
        productsCtaGlow 7s ease-in-out infinite;

}


@keyframes productsCtaGlow {

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

    50% {
        transform:
            scale(1.12);
    }

}


.products-cta .container {

    position:
        relative;

    z-index:
        2;

}


.products-cta-inner {

    min-height:
        300px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


.products-cta .section-eyebrow {

    color:
        #42C8FF;

}


.products-cta h2 {

    margin:
        0 0 13px;

    color:
        #fff;

    font-size:
        clamp(30px, 4vw, 48px);

    line-height:
        1.1;

    letter-spacing:
        -.04em;

}


.products-cta p {

    max-width:
        650px;

    margin:
        0;

    color:
        #98A9BF;

    font-size:
        14px;

    line-height:
        1.7;

}


.products-cta-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-shrink:
        0;

}


.btn-outline-white {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 20px;

    border:
        1px solid rgba(255, 255, 255, .25);

    border-radius:
        8px;

    color:
        #fff;

    background:
        transparent;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        var(--prd-transition);

}


.btn-outline-white:hover {

    border-color:
        var(--prd-cyan);

    background:
        rgba(0, 194, 255, .08);

    transform:
        translateY(-2px);

}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1000px) {

    .products-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .product-card-large {

        grid-column:
            span 2;

    }


    .product-process-grid {

        flex-wrap:
            wrap;

        gap:
            12px;

    }


    .process-connector {

        width:
            20px;

    }

}


@media (max-width: 800px) {

    .products-hero {

        padding:
            75px 0 55px;

    }


    .products-hero h1 {

        font-size:
            clamp(38px, 8vw, 58px);

    }


    .product-card-large {

        grid-template-columns:
            1fr;

    }


    .product-card-large .product-card-body {

        padding:
            0 24px 24px;

    }


    .product-process-grid {

        display:
            grid;

        grid-template-columns:
            repeat(2, 1fr);

    }


    .process-connector {

        display:
            none;

    }


    .products-cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

        justify-content:
            center;

        padding:
            45px 0;

    }

}


@media (max-width: 600px) {

    .products-grid {

        grid-template-columns:
            1fr;

    }


    .product-card-large {

        grid-column:
            span 1;

    }


    .product-stats {

        display:
            grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            18px;

    }


    .product-stats>div {

        min-width:
            0;

        padding:
            0;

        border-right:
            none;

    }


    .products-hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .products-hero-actions .btn {

        width:
            100%;

        justify-content:
            center;

    }


    .product-process-grid {

        grid-template-columns:
            1fr;

    }


    .product-process-card {

        width:
            100%;

    }


    .products-cta-actions {

        width:
            100%;

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .products-cta-actions .btn {

        width:
            100%;

    }

}


@media (max-width: 480px) {

    .products-hero {

        padding:
            60px 0 45px;

    }


    .products-hero h1 {

        font-size:
            36px;

    }


    .products-hero-content>p {

        font-size:
            14px;

    }


    .product-visual {

        min-height:
            210px;

    }


    .product-card-body {

        padding:
            0 20px 21px;

    }


    .product-top {

        padding:
            17px 20px 0;

    }


    .brand-title {

        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            3px;

    }

}