/* =========================================================
   ANDPAY.ORG.IN — COMPLETE WEBSITE CSS
   Theme: Blue / Sky Blue
   Logo Based Design
========================================================= */


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

:root{

    --primary:#1688E8;
    --primary-light:#59B9F5;
    --primary-dark:#0866C2;

    --secondary:#2196F3;

    --dark:#09284A;
    --dark-2:#123D68;

    --text:#40566B;
    --muted:#6B7E91;

    --white:#ffffff;

    --bg:#F7FCFF;
    --soft-bg:#EAF7FF;

    --border:#D9EBF7;

    --success:#16865B;
    --danger:#D9534F;

    --shadow:0 8px 28px rgba(9,74,125,.09);

    --radius:18px;

}


/* =========================================================
   GLOBAL RESET
========================================================= */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:80px;
}

body{

    margin:0;

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

    background:
        linear-gradient(
            180deg,
            #F8FDFF 0%,
            #EDF8FF 100%
        );

    color:var(--text);

    line-height:1.75;

    -webkit-font-smoothing:antialiased;

}


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


img{
    max-width:100%;
    display:block;
}


button{
    font-family:inherit;
}


/* =========================================================
   SELECTION
========================================================= */

::selection{
    background:var(--primary);
    color:#ffffff;
}


/* =========================================================
   MAIN WEBSITE
========================================================= */

.site-wrapper{

    width:100%;

    max-width:520px;

    min-height:100vh;

    margin:0 auto;

    background:#ffffff;

    box-shadow:
        0 0 45px rgba(9,74,125,.08);

    position:relative;

}


/* =========================================================
   HEADER
========================================================= */

.header{

    position:sticky;

    top:0;

    z-index:9999;

    height:74px;

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

    backdrop-filter:blur(12px);

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

}


.header-inner{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

}


.brand{

    display:flex;

    align-items:center;

    gap:11px;

}


/* =========================================================
   HEADER LOGO
========================================================= */

.brand-logo{

    width:48px;

    height:48px;

    border-radius:12px;

    background:#EAF7FF;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    box-shadow:
        0 4px 12px rgba(22,136,232,.16);

}


.brand-logo img{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

}


.brand-name{

    font-size:19px;

    font-weight:800;

    color:var(--dark);

    letter-spacing:-.3px;

}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-button{

    width:42px;

    height:42px;

    border:0;

    background:transparent;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    border-radius:10px;

}


.menu-button:hover{

    background:#EAF7FF;

}


.menu-button span{

    display:block;

    width:26px;

    height:3px;

    border-radius:3px;

    background:var(--dark);

    transition:.3s ease;

}


.menu-button.active span:nth-child(1){

    transform:
        translateY(8px)
        rotate(45deg);

}


.menu-button.active span:nth-child(2){

    opacity:0;

}


.menu-button.active span:nth-child(3){

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

}


/* =========================================================
   DROPDOWN MENU
========================================================= */

.menu{

    position:absolute;

    top:74px;

    right:14px;

    width:230px;

    background:#ffffff;

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

    border-radius:
        0 0 16px 16px;

    box-shadow:
        0 15px 35px rgba(9,74,125,.16);

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transform:translateY(-10px);

    transition:.25s ease;

}


/* JS compatibility */

.menu.show,
.menu.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}


.menu a{

    display:block;

    padding:12px 18px;

    font-size:14px;

    font-weight:500;

    color:var(--dark-2);

    border-bottom:
        1px solid #EAF3F8;

    background:#ffffff;

    transition:.2s ease;

}


.menu a:hover{

    background:#EEF9FF;

    color:var(--primary-dark);

}


.menu a:last-child{

    border-bottom:0;

}


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

.hero{

    position:relative;

    overflow:hidden;

    text-align:center;

    padding:42px 22px 38px;

    background:

        radial-gradient(
            circle at 10% 15%,
            rgba(89,185,245,.30),
            transparent 28%
        ),

        radial-gradient(
            circle at 90% 80%,
            rgba(22,136,232,.16),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F5FCFF 48%,
            #E4F5FF 100%
        );

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

}


.hero:before{

    content:"";

    position:absolute;

    width:230px;

    height:230px;

    left:-145px;

    bottom:-105px;

    border:
        2px solid rgba(22,136,232,.13);

    border-radius:50%;

    pointer-events:none;

}


.hero:after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    right:-155px;

    top:-105px;

    border:
        2px solid rgba(8,102,194,.12);

    border-radius:50%;

    pointer-events:none;

}


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

.hero-logo{

    position:relative;

    z-index:2;

    width:130px;

    height:130px;

    margin:0 auto 20px;

    border-radius:24px;

    background:#DDF3FF;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    box-shadow:

        0 12px 28px rgba(22,136,232,.20),

        0 0 0 1px rgba(22,136,232,.12);

}


.hero-logo img{

    width:100%;

    height:100%;

    object-fit:contain;

    display:block;

}


.hero h1{

    position:relative;

    z-index:2;

    margin:0 0 10px;

    color:var(--dark);

    font-size:30px;

    font-weight:800;

    line-height:1.25;

    letter-spacing:-.6px;

}


.hero p{

    position:relative;

    z-index:2;

    max-width:440px;

    margin:0 auto 25px;

    color:#536C81;

    font-size:15px;

}


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

.hero-buttons{

    position:relative;

    z-index:3;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}


.btn{

    min-height:51px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:15px;

    transition:.2s ease;

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

}


.btn:hover{

    transform:translateY(-2px);

}


.btn-primary{

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color:#ffffff;

    border-color:var(--primary-dark);

    box-shadow:
        0 7px 16px rgba(22,136,232,.25);

}


.btn-outline{

    background:#ffffff;

    color:var(--dark);

    border-color:var(--primary);

}


.btn-outline:hover{

    background:#EAF7FF;

}


.btn-download{

    grid-column:1 / -1;

    background:var(--dark);

    color:#ffffff;

    border-color:var(--dark);

}


.btn-download:hover{

    background:#123B61;

}


.btn-telegram{

    grid-column:1 / -1;

    background:
        linear-gradient(
            135deg,
            #35A8F5,
            #0877D1
        );

    border-color:#0877D1;

    color:#ffffff;

    box-shadow:
        0 7px 16px rgba(22,136,232,.22);

}


/* =========================================================
   CONTENT
========================================================= */

.content{

    padding:
        16px
        16px
        100px;

    background:#ffffff;

}


.card{

    margin:0 0 16px;

    padding:22px 20px;

    background:#ffffff;

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

    border-radius:var(--radius);

    box-shadow:
        0 4px 15px rgba(9,74,125,.035);

}


.card h2{

    margin:0 0 17px;

    padding-bottom:10px;

    border-bottom:
        2px solid #DDF1FC;

    color:var(--dark);

    font-size:21px;

    font-weight:800;

    line-height:1.4;

}


.card h3{

    margin:21px 0 8px;

    color:var(--dark-2);

    font-size:17px;

    font-weight:700;

    line-height:1.5;

}


.card p{

    margin:0 0 13px;

    color:var(--text);

    font-size:15px;

}


.card ul,
.card ol{

    margin:
        8px 0 15px;

    padding-left:22px;

    color:var(--text);

}


.card li{

    margin-bottom:7px;

}


.card li::marker{

    color:var(--primary-dark);

}


/* =========================================================
   TABLE OF CONTENTS
========================================================= */

.toc{

    list-style:none !important;

    margin:0 !important;

    padding:0 !important;

}


.toc li{

    display:flex;

    align-items:center;

    gap:13px;

    margin:0;

    padding:11px 0;

    border-bottom:
        1px solid #E8F2F7;

}


.toc li:last-child{

    border-bottom:0;

}


.toc-number{

    flex:0 0 29px;

    width:29px;

    height:29px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #BFEAFF,
            #76C9F7
        );

    color:var(--primary-dark);

    font-size:13px;

    font-weight:800;

}


.toc a{

    color:var(--dark-2);

    font-size:14px;

    font-weight:500;

}


.toc a:hover{

    color:var(--primary-dark);

}


/* =========================================================
   TAGS
========================================================= */

.tags{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.tag{

    display:inline-block;

    padding:5px 12px;

    border-radius:30px;

    background:#E7F6FF;

    border:
        1px solid #BFE5F8;

    color:#0870C4;

    font-size:12.5px;

    font-weight:600;

}


/* =========================================================
   TABLE
========================================================= */

.table-wrap{

    width:100%;

    overflow-x:auto;

    border-radius:12px;

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

}


table{

    width:100%;

    min-width:420px;

    border-collapse:collapse;

    font-size:14px;

}


th{

    background:
        linear-gradient(
            135deg,
            #123D68,
            #09284A
        );

    color:#ffffff;

    text-align:left;

    padding:11px 12px;

    font-weight:700;

}


td{

    padding:10px 12px;

    color:var(--text);

    border-bottom:
        1px solid #E5EFF5;

}


tr:nth-child(even) td{

    background:#F7FCFF;

}


/* =========================================================
   APP IMAGE
========================================================= */

.app-image{

    width:100%;

    max-height:320px;

    object-fit:contain;

    margin:18px auto;

    border-radius:15px;

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

}


/* =========================================================
   REFER CODE
========================================================= */

.refer-box{

    margin:18px 0;

    padding:17px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #EAF8FF,
            #D9F1FF
        );

    border:
        1px solid #B9DFF4;

    text-align:center;

}


.refer-label{

    display:block;

    margin-bottom:8px;

    color:#687C8E;

    font-size:13px;

}


.refer-code{

    display:inline-flex;

    align-items:center;

    gap:9px;

    font-size:21px;

    font-weight:800;

    letter-spacing:1px;

    color:var(--primary-dark);

}


.copy-btn{

    border:0;

    padding:7px 11px;

    border-radius:8px;

    background:var(--primary-dark);

    color:#ffffff;

    cursor:pointer;

    font-size:12px;

    font-weight:600;

}


.copy-btn:hover{

    background:#07559F;

}


/* =========================================================
   INFO BOX
========================================================= */

.info-box{

    margin:18px 0;

    padding:14px 15px;

    border-left:
        4px solid var(--primary);

    background:
        linear-gradient(
            90deg,
            #EAF8FF,
            #F8FDFF
        );

    border-radius:
        0 13px 13px 0;

    color:#536C81;

    font-size:14px;

}


/* =========================================================
   WARNING / SECURITY BOX
========================================================= */

.warning-box{

    margin:18px 0;

    padding:15px;

    border:
        1px solid #9FD4F2;

    background:#EAF7FF;

    border-radius:14px;

    color:#285978;

}


.warning-box strong{

    color:#0870C4;

}


/* =========================================================
   SUCCESS BOX
========================================================= */

.success-box{

    margin:18px 0;

    padding:15px;

    border:
        1px solid #BDE5D3;

    background:#F0FBF5;

    border-radius:14px;

    color:#28634A;

}


/* =========================================================
   FEATURE GRID
========================================================= */

.feature-grid{

    display:grid;

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

    gap:11px;

    margin:17px 0;

}


.feature-card{

    padding:16px 14px;

    background:
        linear-gradient(
            145deg,
            #FFFFFF,
            #F1FAFF
        );

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

    border-radius:15px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.feature-card:hover{

    transform:translateY(-2px);

    border-color:#8CCDF1;

    box-shadow:
        0 7px 18px rgba(9,74,125,.08);

}


.feature-card h3{

    margin:
        0 0 7px;

    font-size:15px;

    color:var(--dark);

}


.feature-card p{

    margin:0;

    font-size:13px;

    line-height:1.6;

    color:var(--muted);

}


/* =========================================================
   QUICK LINKS
========================================================= */

.quick-links{

    display:grid;

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

    gap:9px;

}


.quick-links a{

    display:flex;

    align-items:center;

    min-height:45px;

    padding:9px 12px;

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

    border-radius:11px;

    background:#F9FDFF;

    color:var(--dark-2);

    font-size:13px;

    font-weight:600;

    transition:.2s ease;

}


.quick-links a:hover{

    background:#EAF7FF;

    border-color:#8CCDF1;

    color:var(--primary-dark);

    transform:translateY(-1px);

}


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

.faq-item{

    padding:0;

    border-bottom:
        1px solid #E5EFF5;

}


.faq-item:last-child{

    border-bottom:0;

}


.faq-question{

    width:100%;

    margin:0;

    padding:16px 2px;

    border:0;

    background:transparent;

    color:var(--dark);

    font-size:15px;

    font-weight:700;

    text-align:left;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

}


.faq-question span{

    flex:0 0 auto;

    width:27px;

    height:27px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#DDF2FF;

    color:var(--primary-dark);

    font-size:18px;

    line-height:1;

    transition:.2s ease;

}


.faq-question.active span{

    background:var(--primary);

    color:#ffffff;

}


.faq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:
        max-height .3s ease,
        opacity .25s ease,
        padding .3s ease;

}


.faq-answer.active{

    max-height:500px;

    opacity:1;

    padding:
        0 2px 15px;

}


.faq-answer p{

    margin:0;

    color:var(--muted);

    font-size:14px;

}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    position:relative;

    z-index:2;

    width:100%;

    margin-top:20px;

    background:
        linear-gradient(
            145deg,
            #09284A,
            #123D68
        );

    color:#ffffff;

    border-top:
        3px solid var(--primary);

}


.footer-grid{

    display:grid;

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

    gap:25px;

    padding:30px 20px 25px;

}


.footer-column{

    display:flex;

    flex-direction:column;

    gap:7px;

}


.footer-column:first-child{

    grid-column:
        1 / -1;

}


.footer-column h3{

    margin:0 0 8px;

    color:#65C5FF;

    font-size:16px;

    font-weight:700;

}


.footer-column p{

    margin:0;

    color:#C9DCEB;

    font-size:13px;

    line-height:1.7;

}


.footer-column a{

    color:#C9DCEB;

    font-size:13px;

    transition:.2s ease;

}


.footer-column a:hover{

    color:#65C5FF;

}


.footer-bottom{

    padding:15px 20px;

    border-top:
        1px solid rgba(255,255,255,.10);

    text-align:center;

}


.footer-bottom p{

    margin:3px 0;

    color:#9DB4C7;

    font-size:11.5px;

}


/* =========================================================
   OLD FIXED FOOTER COMPATIBILITY
========================================================= */

.site-wrapper > .footer{

    position:relative;

    left:auto;

    right:auto;

    bottom:auto;

    height:auto;

}


/* =========================================================
   RELATED PLATFORMS
========================================================= */

.related-platforms{

    padding:35px 20px;

    margin-top:30px;

    background:
        linear-gradient(
            180deg,
            #F8FDFF,
            #EAF7FF
        );

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

}


.related-container{

    max-width:1100px;

    margin:0 auto;

}


.related-platforms h2{

    text-align:center;

    margin:
        0 0 8px;

    font-size:23px;

    font-weight:800;

    color:var(--dark);

}


.related-description{

    text-align:center;

    margin:
        0 auto 25px;

    font-size:13px;

    color:var(--muted);

}


/* =========================================================
   PLATFORM GRID
========================================================= */

.platform-grid{

    display:grid !important;

    grid-template-columns:
        repeat(4,1fr) !important;

    gap:12px !important;

    width:100%;

}


/* =========================================================
   PLATFORM CARD
========================================================= */

.platform-card{

    display:flex !important;

    align-items:center !important;

    width:100%;

    min-height:62px;

    padding:10px 12px !important;

    background:#ffffff;

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

    border-radius:12px;

    text-decoration:none !important;

    color:var(--dark) !important;

    gap:10px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.platform-card:hover{

    transform:translateY(-2px);

    border-color:#7CC8F2;

    box-shadow:
        0 7px 18px rgba(9,74,125,.08);

}


/* =========================================================
   PLATFORM LOGO
========================================================= */

.platform-card img{

    width:36px !important;

    height:36px !important;

    min-width:36px !important;

    min-height:36px !important;

    padding:3px;

    box-sizing:border-box;

    object-fit:contain;

    background:#EAF7FF;

    border:
        1px solid #CDE7F5;

    border-radius:8px;

    display:block;

}


.platform-card span{

    font-size:13px !important;

    font-weight:700;

    line-height:1.25;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}


/* =========================================================
   SEO CONTENT
========================================================= */

.seo-content{

    color:var(--text);

}


.seo-content strong{

    color:var(--primary-dark);

}


.seo-content a{

    color:var(--primary-dark);

    font-weight:600;

}


.seo-content a:hover{

    text-decoration:underline;

}


/* =========================================================
   DISCLAIMER
========================================================= */

.disclaimer{

    background:#EEF9FF;

    border:
        1px solid #CDE7F5;

}


/* =========================================================
   MOBILE MENU
========================================================= */

@media(max-width:520px){

    .menu{

        right:10px;

        width:
            calc(100% - 20px);

        max-width:300px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .site-wrapper{

        box-shadow:none;

    }


    .header-inner{

        padding:
            0 16px;

    }


    .brand-logo{

        width:45px;

        height:45px;

    }


    .brand-name{

        font-size:18px;

    }


    .hero{

        padding:
            38px 20px 34px;

    }


    .hero-logo{

        width:118px;

        height:118px;

        border-radius:21px;

    }


    .hero h1{

        font-size:26px;

    }


    .hero p{

        font-size:14.5px;

    }


    .content{

        padding:
            14px
            13px
            40px;

    }


    .card{

        padding:
            19px 17px;

        border-radius:18px;

    }


    .card h2{

        font-size:19px;

    }


    .feature-grid{

        grid-template-columns:
            1fr;

    }


    .quick-links{

        grid-template-columns:
            1fr;

    }


    .footer-grid{

        grid-template-columns:
            1fr;

        gap:20px;

        padding:
            28px 18px 22px;

    }


    .footer-column:first-child{

        grid-column:auto;

    }


    .related-platforms{

        padding:
            30px 12px;

    }


    .related-platforms h2{

        font-size:21px;

    }


    .related-description{

        font-size:12.5px;

    }


    .platform-grid{

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

        gap:10px !important;

    }


    .platform-card{

        min-height:54px;

        padding:
            8px 9px !important;

        gap:8px;

    }


    .platform-card img{

        width:30px !important;

        height:30px !important;

        min-width:30px !important;

        min-height:30px !important;

    }


    .platform-card span{

        font-size:12px !important;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media(min-width:601px) and (max-width:900px){

    .platform-grid{

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

    }

}


/* =========================================================
   VERY SMALL SCREEN
========================================================= */

@media(max-width:360px){

    .hero-buttons{

        grid-template-columns:1fr;

    }


    .btn-outline,
    .btn-primary{

        grid-column:1 / -1;

    }


    .platform-grid{

        grid-template-columns:
            1fr !important;

    }


    .hero h1{

        font-size:23px;

    }


    .card{

        padding:
            17px 15px;

    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

button:focus-visible,
a:focus-visible{

    outline:
        3px solid rgba(22,136,232,.45);

    outline-offset:3px;

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }

    *{

        animation:none !important;

        transition:none !important;

    }

}

/* =========================================
   PREMIUM RELATED PLATFORMS
========================================= */

.related-platforms {
    padding: 35px 20px;
    margin-top: 40px;
    background: #f8fafc;
    border-top: 1px solid #eaeef2;
}

.related-container {
    max-width: 1100px;
    margin: 0 auto;
}

/* Heading */
.related-platforms h2 {
    text-align: center;
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
    color: #172033;
}

.related-description {
    text-align: center;
    margin: 0 auto 25px;
    font-size: 14px;
    color: #667085;
}

/* GRID */
.platform-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    width: 100%;
}

/* CARD */
.platform-card {
    display: flex !important;
    align-items: center !important;

    width: 100%;
    min-height: 58px;

    padding: 9px 12px !important;
    box-sizing: border-box;

    background: #ffffff;
    border: 1px solid #e6e9ed;
    border-radius: 9px;

    text-decoration: none !important;
    color: #172033 !important;

    gap: 10px;

    transition: all 0.2s ease;
}

/* Hover */
.platform-card:hover {
    transform: translateY(-2px);
    border-color: #d4d9df;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
}

/* LOGO */
.platform-card img {
    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    min-height: 34px !important;

    padding: 3px;

    box-sizing: border-box;

    object-fit: contain;

    background: #ffffff;
    border: 1px solid #edf0f2;
    border-radius: 7px;

    display: block;
}

/* NAME */
.platform-card span {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.2;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .platform-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .related-platforms {
        padding: 30px 12px;
    }

    .related-platforms h2 {
        font-size: 23px;
    }

    .related-description {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .platform-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .platform-card {
        min-height: 54px;
        padding: 8px 9px !important;
        gap: 8px;
    }

    .platform-card img {
        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        min-height: 30px !important;
    }

    .platform-card span {
        font-size: 12px !important;
    }

}


/* =========================================
   VERY SMALL SCREEN
========================================= */

@media (max-width: 360px) {

    .platform-grid {
        grid-template-columns: 1fr !important;
    }

}