/*==================================================
DIWAPAY OFFICIAL WEBSITE
Premium Responsive CSS
==================================================*/

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#f6f8fd;
color:#222;
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.container{

width:90%;
max-width:1250px;
margin:auto;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
background:#fff;
box-shadow:0 5px 20px rgba(0,0,0,.08);
z-index:9999;

}

.header{

height:80px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:12px;

font-size:28px;

font-weight:700;

color:#1565ff;

}

.logo img{

width:55px;

height:55px;

border-radius:50%;

}

nav ul{

display:flex;

gap:30px;

}

nav ul li a{

font-size:16px;

font-weight:500;

color:#222;

transition:.3s;

}

nav ul li a:hover{

color:#1565ff;

}

.register-btn{

background:#1565ff;

padding:13px 30px;

color:#fff;

border-radius:40px;

font-weight:600;

transition:.3s;

}

.register-btn:hover{

background:#004ecc;

}

.menu-btn{

display:none;

font-size:30px;

cursor:pointer;

}

/*=================================
MARQUEE
==================================*/

.earning-bar{

margin-top:80px;

background:#1565ff;

overflow:hidden;

color:#fff;

padding:14px 0;

white-space:nowrap;

}

.earning-track{

display:inline-block;

animation:marquee 25s linear infinite;

}

.earning-track span{

margin-right:60px;

font-size:15px;

font-weight:500;

}

@keyframes marquee{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-100%);

}

}

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

.hero{

padding:80px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:70px;

}

.badge{

display:inline-block;

padding:10px 22px;

background:#dce9ff;

color:#1565ff;

border-radius:30px;

font-weight:600;

margin-bottom:25px;

}

.hero h1{

font-size:55px;

line-height:1.2;

margin-bottom:25px;

font-weight:700;

}

.hero h1 span{

color:#1565ff;

}

.info-box{

display:flex;

flex-direction:column;

gap:18px;

margin-bottom:35px;

}

.info-box div{

display:flex;

gap:12px;

align-items:center;

font-size:18px;

}

.info-box i{

color:#1565ff;

}

.hero-buttons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.btn{

background:#1565ff;

padding:16px 38px;

border-radius:50px;

color:#fff;

font-weight:600;

transition:.3s;

}

.btn:hover{

transform:translateY(-4px);

}

.btn2{

background:#27ae60;

padding:16px 38px;

border-radius:50px;

color:#fff;

font-weight:600;

transition:.3s;

}

.btn2:hover{

transform:translateY(-4px);

}

.hero-right img{

border-radius:25px;

box-shadow:0 25px 60px rgba(0,0,0,.15);

}

/*=================================
SECTION TITLE
==================================*/

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

color:#1565ff;

font-weight:700;

letter-spacing:1px;

}

.section-title h2{

font-size:42px;

margin:15px 0;

}

.section-title p{

font-size:17px;

color:#666;

max-width:760px;

margin:auto;

line-height:1.8;

}
/*=========================================
STATISTICS
=========================================*/

.stats{

padding:90px 0;
background:#ffffff;

}

.stats-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}

.stat-box{

background:#fff;
padding:40px 25px;
border-radius:20px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;

}

.stat-box:hover{

transform:translateY(-12px);
box-shadow:0 25px 60px rgba(21,101,255,.18);

}

.stat-box h2{

font-size:42px;
color:#1565ff;
margin-bottom:10px;

}

.stat-box p{

font-size:17px;
color:#666;

}

/*=========================================
WALLET SECTION
=========================================*/

.wallet-section{

padding:100px 0;
background:#f5f8ff;

}

.wallet-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}

.wallet-card{

background:#fff;
padding:35px;
border-radius:20px;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 12px 30px rgba(0,0,0,.08);
transition:.35s;

}

.wallet-card:hover{

transform:translateY(-10px);

}

.wallet-card img{

width:90px;

}

/*=========================================
INTERFACE
=========================================*/

.interface{

padding:100px 0;
background:#fff;

}

.interface-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;

}

.screen{

overflow:hidden;
border-radius:22px;
box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.screen img{

width:100%;
transition:.5s;

}

.screen:hover img{

transform:scale(1.08);

}

/*=========================================
FEATURES
=========================================*/

.features{

padding:100px 0;
background:#f7f9ff;

}

.feature-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.feature-card{

background:#fff;
padding:40px 30px;
text-align:center;
border-radius:22px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;

}

.feature-card:hover{

transform:translateY(-10px);

}

.feature-card i{

font-size:55px;
color:#1565ff;
margin-bottom:25px;

}

.feature-card h3{

font-size:24px;
margin-bottom:15px;

}

.feature-card p{

color:#666;
line-height:1.8;

}

/*=========================================
STEPS
=========================================*/

.steps{

padding:100px 0;
background:#fff;

}

.steps-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.step-card{

background:#fff;
padding:45px 30px;
border-radius:25px;
text-align:center;
box-shadow:0 18px 45px rgba(0,0,0,.08);
transition:.35s;

}

.step-card:hover{

transform:translateY(-10px);

}

.step-number{

width:70px;
height:70px;
margin:auto;
margin-bottom:25px;
background:#1565ff;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
font-weight:bold;
color:#fff;

}

.step-card h3{

font-size:24px;
margin-bottom:15px;

}

.step-card p{

line-height:1.8;
color:#666;

}

/*=========================================
BIG OFFER
=========================================*/

.offer{

padding:100px 0;
background:linear-gradient(135deg,#1565ff,#0b4dd4);

}

.offer-box{

text-align:center;
color:#fff;

}

.offer-tag{

display:inline-block;
padding:12px 28px;
background:#ffffff20;
border-radius:40px;
margin-bottom:25px;

}

.offer-box h2{

font-size:50px;
margin-bottom:20px;

}

.offer-box p{

font-size:19px;
max-width:760px;
margin:auto;
margin-bottom:35px;
line-height:1.8;

}

.offer-buttons{

display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;

}
/*=========================================
CONTACT SECTION
=========================================*/

.contact-section{

padding:100px 0;
background:#ffffff;

}

.contact-form{

max-width:850px;
margin:auto;
display:flex;
flex-direction:column;
gap:20px;

}

.contact-form input,
.contact-form textarea{

width:100%;
padding:18px 22px;
border:2px solid #e8ecf8;
border-radius:15px;
font-size:16px;
font-family:'Poppins',sans-serif;
outline:none;
transition:.35s;

}

.contact-form input:focus,
.contact-form textarea:focus{

border-color:#1565ff;

}

.contact-form textarea{

height:180px;
resize:none;

}

.contact-form button{

background:#1565ff;
color:#fff;
border:none;
padding:18px;
font-size:18px;
font-weight:600;
border-radius:50px;
cursor:pointer;
transition:.35s;

}

.contact-form button:hover{

background:#0d4fd6;
transform:translateY(-3px);

}

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

.faq{

padding:100px 0;
background:#f6f8fd;

}

.faq-box{

max-width:900px;
margin:auto;

}

.faq-box details{

background:#fff;
margin-bottom:20px;
padding:22px 25px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.faq-box summary{

cursor:pointer;
font-size:19px;
font-weight:600;
list-style:none;

}

.faq-box summary::-webkit-details-marker{

display:none;

}

.faq-box p{

margin-top:18px;
color:#666;
line-height:1.8;

}

/*=========================================
REVIEWS
=========================================*/

.reviews{

padding:100px 0;
background:#fff;

}

.review-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.review-card{

background:#fff;
padding:35px;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;

}

.review-card:hover{

transform:translateY(-10px);

}

.review-card p{

margin:20px 0;
line-height:1.8;
color:#666;

}

.review-card h4{

color:#1565ff;

}

/*=========================================
REFERRAL
=========================================*/

.refer-section{

padding:100px 0;
background:#f5f8ff;

}

.refer-box{

max-width:800px;
margin:auto;
text-align:center;
background:#fff;
padding:50px;
border-radius:25px;
box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.refer-code-box{

display:flex;
justify-content:center;
margin-top:30px;
margin-bottom:30px;
flex-wrap:wrap;
gap:15px;

}

.refer-code-box input{

width:260px;
padding:18px;
font-size:22px;
text-align:center;
border:2px dashed #1565ff;
border-radius:15px;
font-weight:700;
color:#1565ff;

}

.refer-code-box button{

padding:18px 28px;
background:#1565ff;
color:#fff;
border:none;
border-radius:15px;
cursor:pointer;
font-size:17px;
transition:.35s;

}

.refer-code-box button:hover{

background:#0b4ed5;

}

/*=========================================
TELEGRAM SECTION
=========================================*/

.telegram-section{

padding:90px 0;
background:linear-gradient(135deg,#1d9bf0,#0c7ed8);

}

.telegram-box{

display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
color:#fff;
flex-wrap:wrap;

}

.telegram-box h2{

font-size:40px;
margin-bottom:15px;

}

.telegram-box p{

line-height:1.8;

}

.telegram-box a{

background:#fff;
color:#1565ff;
padding:18px 35px;
border-radius:50px;
font-weight:700;
transition:.35s;

}

.telegram-box a:hover{

transform:translateY(-4px);

}

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

footer{

background:#111827;
color:#ddd;
padding:90px 0 25px;

}

.footer-grid{

display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;

}

.footer-logo{

width:70px;
margin-bottom:20px;

}

footer h3,
footer h4{

margin-bottom:18px;
color:#fff;

}

footer ul{

display:flex;
flex-direction:column;
gap:14px;

}

footer ul li a{

color:#cfd5df;
transition:.3s;

}

footer ul li a:hover{

color:#ffffff;

}

footer p{

line-height:1.8;
color:#cfd5df;

}

footer hr{

margin:45px 0;
border:none;
height:1px;
background:#2b3445;

}

.footer-bottom{

text-align:center;
font-size:15px;

}
/*=========================================
STICKY REGISTER BAR
=========================================*/

.sticky-register{

position:fixed;
left:0;
bottom:0;
width:100%;
background:#1565ff;
padding:15px 20px;
display:flex;
justify-content:space-between;
align-items:center;
z-index:9999;
box-shadow:0 -5px 20px rgba(0,0,0,.15);

}

.sticky-register div{

color:#fff;
font-size:17px;
font-weight:600;

}

.sticky-register strong{

display:block;
font-size:22px;
margin-top:3px;

}

.sticky-register a{

background:#fff;
color:#1565ff;
padding:14px 35px;
border-radius:50px;
font-weight:700;
transition:.3s;

}

.sticky-register a:hover{

transform:translateY(-3px);

}

/*=========================================
FLOATING TELEGRAM
=========================================*/

.telegram-float{

position:fixed;
right:20px;
bottom:170px;
width:60px;
height:60px;
border-radius:50%;
background:#229ED9;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
z-index:999;
transition:.3s;

}

.telegram-float:hover{

transform:scale(1.1);

}

/*=========================================
FLOATING WHATSAPP
=========================================*/

.whatsapp-float{

position:fixed;
right:20px;
bottom:95px;
width:60px;
height:60px;
border-radius:50%;
background:#25D366;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-size:30px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
z-index:999;
transition:.3s;

}

.whatsapp-float:hover{

transform:scale(1.1);

}

/*=========================================
BACK TO TOP
=========================================*/

.top-btn{

position:fixed;
left:20px;
bottom:95px;
width:60px;
height:60px;
border:none;
border-radius:50%;
background:#1565ff;
color:#fff;
font-size:22px;
cursor:pointer;
box-shadow:0 10px 30px rgba(0,0,0,.2);
transition:.3s;
z-index:999;

}

.top-btn:hover{

transform:scale(1.08);

}

/*=========================================
SCROLLBAR
=========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf3ff;

}

::-webkit-scrollbar-thumb{

background:#1565ff;
border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#004ecc;

}

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

::selection{

background:#1565ff;
color:#fff;

}

/*=========================================
ANIMATION
=========================================*/

@keyframes fadeUp{

0%{

opacity:0;
transform:translateY(50px);

}

100%{

opacity:1;
transform:translateY(0);

}

}

section{

animation:fadeUp .8s ease;

}

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

@media(max-width:1100px){

.hero-grid,
.footer-grid,
.feature-grid,
.interface-grid,
.wallet-grid,
.steps-grid,
.review-grid,
.stats-grid{

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

}

}

@media(max-width:850px){

.menu-btn{

display:block;

}

nav{

position:fixed;
top:80px;
right:-100%;
width:300px;
height:calc(100vh - 80px);
background:#fff;
box-shadow:-5px 0 20px rgba(0,0,0,.15);
transition:.35s;
padding:35px;

}

nav.active{

right:0;

}

nav ul{

flex-direction:column;
gap:20px;

}

.register-btn{

display:none;

}

.hero{

padding:60px 0;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero h1{

font-size:42px;

}

.telegram-box{

text-align:center;
justify-content:center;

}

}

@media(max-width:600px){

.container{

width:92%;

}

.hero h1{

font-size:34px;

}

.section-title h2{

font-size:30px;

}

.hero-buttons{

justify-content:center;

}

.stats-grid,
.wallet-grid,
.interface-grid,
.feature-grid,
.steps-grid,
.review-grid,
.footer-grid{

grid-template-columns:1fr;

}

.telegram-box h2{

font-size:28px;

}

.offer-box h2{

font-size:34px;

}

.offer-buttons{

flex-direction:column;

}

.refer-code-box{

flex-direction:column;

}

.refer-code-box input{

width:100%;

}

.contact-form{

padding:0;

}

.sticky-register{

padding:12px;

}

.sticky-register div{

font-size:14px;

}

.sticky-register strong{

font-size:18px;

}

.sticky-register a{

padding:12px 20px;

}

.telegram-float,
.whatsapp-float,
.top-btn{

width:52px;
height:52px;
font-size:22px;

}

}
/*=========================================
LIVE ACTIVITY
=========================================*/

.live-activity{
padding:100px 0;
background:#f8fbff;
}

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

.activity-card{
background:#fff;
padding:25px;
border-radius:20px;
display:flex;
align-items:center;
gap:18px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
}

.activity-card:hover{
transform:translateY(-8px);
}

.activity-card img{
width:65px;
height:65px;
border-radius:50%;
}

.activity-card h4{
margin-bottom:6px;
font-size:18px;
}

.activity-card p{
font-size:14px;
color:#666;
}

.activity-card span{
margin-left:auto;
font-size:13px;
color:#1565ff;
font-weight:600;
}

/*=========================================
DOWNLOAD APP
=========================================*/

.download-app{
padding:110px 0;
background:#ffffff;
}

.download-box{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.download-box h2{
font-size:46px;
margin-bottom:25px;
}

.download-box p{
line-height:1.9;
font-size:18px;
margin-bottom:30px;
color:#666;
}

.download-box img{
border-radius:30px;
box-shadow:0 25px 60px rgba(0,0,0,.18);
transition:.4s;
}

.download-box img:hover{
transform:scale(1.03);
}

/*=========================================
TRUST SECTION
=========================================*/

.trust{
padding:100px 0;
background:#1565ff;
}

.trust .section-title span,
.trust .section-title h2{
color:#fff;
}

.trust-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}

.trust-grid div{
background:rgba(255,255,255,.1);
backdrop-filter:blur(12px);
padding:35px;
border-radius:20px;
text-align:center;
transition:.35s;
}

.trust-grid div:hover{
background:#ffffff;
transform:translateY(-10px);
}

.trust-grid div:hover h3,
.trust-grid div:hover p,
.trust-grid div:hover i{
color:#1565ff;
}

.trust-grid i{
font-size:55px;
color:#fff;
margin-bottom:25px;
transition:.3s;
}

.trust-grid h3{
color:#fff;
margin-bottom:15px;
font-size:24px;
transition:.3s;
}

.trust-grid p{
color:#eef4ff;
line-height:1.8;
transition:.3s;
}

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

.big-cta{
padding:120px 0;
background:linear-gradient(135deg,#0b56ff,#003cb5);
text-align:center;
color:#fff;
}

.big-cta h2{
font-size:55px;
margin-bottom:20px;
}

.big-cta p{
font-size:20px;
max-width:750px;
margin:auto;
margin-bottom:40px;
line-height:1.8;
}

/*=========================================
BUTTON EFFECT
=========================================*/

.btn,
.btn2,
.register-btn{

position:relative;
overflow:hidden;

}

.btn::before,
.btn2::before,
.register-btn::before{

content:"";
position:absolute;
top:0;
left:-120%;
width:100%;
height:100%;
background:rgba(255,255,255,.25);
transform:skewX(-30deg);
transition:.7s;

}

.btn:hover::before,
.btn2:hover::before,
.register-btn:hover::before{

left:120%;

}

/*=========================================
CARD ANIMATION
=========================================*/

.feature-card,
.stat-box,
.wallet-card,
.review-card,
.step-card,
.screen{

transition:.35s ease;

}

.feature-card:hover,
.stat-box:hover,
.wallet-card:hover,
.review-card:hover,
.step-card:hover,
.screen:hover{

transform:translateY(-12px);

}

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

@media(max-width:900px){

.activity-grid,
.trust-grid,
.download-box{

grid-template-columns:1fr;

}

.download-box{

text-align:center;

}

.big-cta h2{

font-size:38px;

}

}
/*=========================
PARTNERS
=========================*/

.partners{

padding:100px 0;
background:#fff;

}

.partner-slider{

display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px;

}

.partner-item{

background:#fff;
padding:30px;
border-radius:20px;
box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.partner-item img{

width:100%;
max-width:120px;
margin:auto;

}

/*=========================
APP FEATURES
=========================*/

.app-features{

padding:100px 0;
background:#f7f9ff;

}

.app-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;

}

.app-card{

background:#fff;
padding:40px;
border-radius:25px;
text-align:center;
box-shadow:0 15px 35px rgba(0,0,0,.08);
transition:.35s;

}

.app-card:hover{

transform:translateY(-10px);

}

.app-card i{

font-size:60px;
color:#1565ff;
margin-bottom:20px;

}

.app-card h3{

margin-bottom:15px;

}

.app-card p{

line-height:1.8;
color:#666;

}

/*=========================
LIVE POPUP
=========================*/

.live-popup{

position:fixed;
left:20px;
bottom:160px;
background:#fff;
padding:15px;
display:flex;
gap:15px;
align-items:center;
border-radius:15px;
box-shadow:0 15px 40px rgba(0,0,0,.18);
z-index:999;
animation:popup 8s infinite;

}

.live-popup img{

width:55px;
height:55px;
border-radius:50%;

}

.live-popup h4{

font-size:17px;

}

.live-popup p{

font-size:14px;
color:#666;

}

@keyframes popup{

0%,100%{

opacity:0;
transform:translateX(-100px);

}

15%,85%{

opacity:1;
transform:translateX(0);

}

}

@media(max-width:900px){

.partner-slider,
.app-grid{

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

}

}

@media(max-width:600px){

.partner-slider,
.app-grid{

grid-template-columns:1fr;

}

}
/*==============================
PRELOADER
===============================*/

#preloader{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:999999;

}

.loader{

text-align:center;

}

.loader img{

width:90px;
margin:auto;

}

.loader h2{

margin:20px 0;
color:#1565ff;

}

.loading-bar{

width:250px;
height:8px;
background:#e5e5e5;
border-radius:50px;
overflow:hidden;

}

.loading-bar span{

display:block;
height:100%;
width:0%;
background:#1565ff;
animation:loading 2s linear forwards;

}

@keyframes loading{

100%{

width:100%;

}

}


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

.hero-slider{

position:relative;

}

.slides{

display:none;

}

.slides.active{

display:block;
animation:fade 1s;

}

.slides img{

width:100%;
border-radius:30px;

}

@keyframes fade{

from{

opacity:.3;

}

to{

opacity:1;

}

}
@media (max-width:768px){

.cursor{
display:none !important;
}

}
/*=========================================
REFER BUTTONS FIX
=========================================*/

.refer-buttons{

display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:25px;
flex-wrap:wrap;

}

.refer-buttons .btn,
.refer-buttons .btn2{

display:flex;
justify-content:center;
align-items:center;
width:220px;
height:58px;
padding:0;
border-radius:50px;
text-align:center;

}

@media(max-width:600px){

.refer-buttons{

flex-direction:column;
gap:15px;

}

.refer-buttons .btn,
.refer-buttons .btn2{

width:100%;
max-width:320px;

}

}
.btn,
.btn2{

box-sizing:border-box;
white-space:nowrap;

}

/* =========================================
   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;
    }

}