html{
scroll-behavior:smooth;
}
/* =====================================
RESET
===================================== */
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.75)
),
url("images/background.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
color:#ffffff;
font-family:Arial,Helvetica,sans-serif;
overflow-x:hidden;
}
a{
text-decoration:none;
color:inherit;
}
img{
max-width:100%;
display:block;
}
.container{
width:min(1300px,92%);
margin:auto;
}
/* =====================================
HEADER
===================================== */
header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
padding:0 30px;
background:rgba(0,0,0,.35);
backdrop-filter:blur(10px);
z-index:9999;
transition:.35s;
}
header.scrolled{
background:rgba(0,0,0,.92);
backdrop-filter:blur(14px);
box-shadow:0 8px 25px rgba(0,0,0,.45);
}
header .container{
width:min(1300px,92%);
height:80px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo img{
width:170px;
}
nav{
display:flex;
align-items:center;
gap:35px;
}
nav a{
color:#fff;
font-size:17px;
font-weight:600;
transition:.3s;
}
nav a:hover{
color:#ffd700;
}
/* =====================================
NAV BUTTON
===================================== */
.btn-login-nav{
position:relative;
overflow:hidden;
padding:12px 30px;
border:2px solid #ffd700;
border-radius:10px;
color:#ffd700;
font-weight:bold;
transition:.35s;
background:transparent;
}
.btn-login-nav::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.6),
transparent
);
transform:skewX(-25deg);
transition:.7s;
}
.btn-login-nav:hover{
background:#ffd700;
color:#111;
box-shadow:
0 0 18px rgba(255,215,0,.5);
}
.btn-login-nav:hover::before{
left:160%;
}
.btn-register-nav{
position:relative;
overflow:hidden;
padding:12px 30px;
background:linear-gradient(
135deg,
#ffd700,
#ffb400
);
color:#111;
border-radius:10px;
font-weight:bold;
transition:.35s;
}
.btn-register-nav::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.8),
transparent
);
transform:skewX(-25deg);
transition:.7s;
}
.btn-register-nav:hover{
transform:translateY(-4px);
box-shadow:
0 12px 30px rgba(255,215,0,.45);
}
.btn-register-nav:hover::before{
left:160%;
}
#menuToggle{
display:none;
background:none;
border:none;
color:#fff;
font-size:30px;
cursor:pointer;
}
/* =====================================
HEADER RESPONSIVE
===================================== */
@media (max-width:900px){
nav{
display:none;
position:absolute;
top:80px;
left:0;
width:100%;
background:#111;
flex-direction:column;
align-items:center;
gap:20px;
padding:25px 0;
border-top:1px solid rgba(255,215,0,.15);
}
nav.active{
display:flex;
}
#menuToggle{
display:block;
}
}
/* =====================================
NEWS BAR
===================================== */
.news-bar{
margin-top:80px;
height:50px;
display:flex;
}
.news-title{
width:90px;
height:50px;
background:#d60055;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font-weight:700;
font-size:16px;
}
.news-content{
flex:1;
background:#daca6f;
color:#111;
display:flex;
align-items:center;
font-weight:600;
overflow:hidden;
}
.news-content marquee{
padding-left:20px;
}
/* =====================================
HERO
===================================== */
.hero{
position:relative;
width:100%;
height:560px;
margin-top:80px;
overflow:hidden;
}
.hero-image{
width:100%;
height:100%;
object-fit:cover;
animation:bannerZoom 12s linear infinite alternate;
}
@keyframes bannerZoom{
from{
transform:scale(1);
}
to{
transform:scale(1.08);
}
}
.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(
rgba(0,0,0,.10),
rgba(0,0,0,.25)
);
}
.hero-content{
position:absolute;
left:50%;
bottom:60px;
transform:translateX(-50%);
width:90%;
text-align:center;
z-index:2;
}
.hero-badge{
display:inline-block;
padding:10px 22px;
border-radius:999px;
border:1px solid rgba(255,215,0,.4);
color:#ffd700;
background:rgba(255,215,0,.12);
}
.hero-content h1{
margin-top:25px;
font-size:72px;
}
.hero-content p{
margin-top:25px;
font-size:28px;
line-height:1.8;
}
/* =====================================
SLIDER
===================================== */
.slider-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:60px;
height:60px;
border:none;
border-radius:50%;
background:rgba(0,0,0,.45);
color:#fff;
font-size:30px;
cursor:pointer;
transition:.3s;
z-index:3;
}
.slider-btn:hover{
background:#ffd700;
color:#111;
}
.prev{
left:25px;
}
.next{
right:25px;
}
/* =====================================
DOTS
===================================== */
.slider-dots{
position:absolute;
left:50%;
bottom:30px;
transform:translateX(-50%);
display:flex;
gap:12px;
z-index:3;
}
.dot{
width:14px;
height:14px;
border-radius:50%;
background:rgba(255,255,255,.4);
cursor:pointer;
transition:.3s;
}
.dot.active{
background:#ffd700;
transform:scale(1.3);
}
/* =====================================
HERO RESPONSIVE
===================================== */
@media (max-width:768px){
.hero{
height:430px;
}
.hero-content h1{
font-size:42px;
}
.hero-content p{
font-size:20px;
}
.hero-buttons{
flex-direction:column;
align-items:center;
}
.btn-register,
.btn-login{
width:240px;
}
.slider-btn{
width:48px;
height:48px;
font-size:24px;
}
}
/* =====================================
LIVE STATISTICS
===================================== */
.stats{
padding:110px 0 90px;
background:transparent;
}
.stats h2{
text-align:center;
color:#ffd700;
font-size:42px;
margin-bottom:45px;
letter-spacing:2px;
position:relative;
color:#ffd700;
text-shadow:
0 0 12px rgba(255,215,0,.45),
0 0 25px rgba(255,215,0,.20);
}
.stats h2::after{
content:"";
display:block;
width:120px;
height:4px;
margin:18px auto 0;
background:#ffd700;
border-radius:999px;
}
.stats-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.stats-card{
background:linear-gradient(
180deg,
#1b1b1b,
#101010
);
border:2px solid rgba(255,215,0,.18);
border-radius:20px;
padding:35px;
text-align:center;
transition:.35s;
box-shadow:0 15px 35px rgba(0,0,0,.35);
}
.stats-card:hover{
transform:translateY(-8px);
border-color:#ffd700;
box-shadow:
0 20px 45px rgba(255,215,0,.18),
0 0 30px rgba(255,215,0,.12);
}
.stats-icon{
font-size:48px;
display:block;
margin-bottom:20px;
}
.stats-card h3{
color:#ffffff;
font-size:26px;
margin-bottom:20px;
}
.stats-card p{
color:#ffd700;
font-size:48px;
font-weight:bold;
margin-bottom:15px;
text-shadow:
0 0 10px rgba(255,215,0,.55);
}
.stats-card small{
color:#cfcfcf;
font-size:16px;
}
@media (max-width:768px){
.stats-grid{
grid-template-columns:1fr;
}
.stats h2{
font-size:32px;
}
.stats-card{
padding:35px;
}
.stats-card p{
font-size:36px;
}
}
/* =====================================
GAME PROVIDERS
===================================== */
.providers{
background:transparent;
}
.providers h2{
text-align:center;
font-size:42px;
color:#ffd700;
margin-bottom:50px;
letter-spacing:2px;
}
.provider-subtitle{
max-width:720px;
margin:0 auto 55px;
text-align:center;
color:#bfbfbf;
font-size:18px;
line-height:1.8;
}
.providers h2::after{
content:"";
display:block;
width:120px;
height:4px;
margin:18px auto 0;
background:#ffd700;
border-radius:999px;
}
.provider-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:22px;
}
.provider-card{
background:linear-gradient(
180deg,
#242424,
#121212
);
border:1px solid rgba(255,215,0,.18);
border-radius:18px;
padding:28px;
display:flex;
justify-content:center;
align-items:center;
position:relative;
overflow:hidden;
transition:.35s;
}
.provider-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:#ffd700;
transform:scaleX(0);
transition:.35s;
}
.provider-card:hover::before{
transform:scaleX(1);
}
.provider-card:hover{
transform:translateY(-8px);
border-color:#ffd700;
box-shadow:
0 10px 35px rgba(255,215,0,.18),
0 0 25px rgba(255,215,0,.10);
}
.provider-card img{
width:100%;
max-width:140px;
object-fit:contain;
transition:.35s;
filter:grayscale(20%);
}
.provider-card:hover img{
transform:scale(1.08);
filter:grayscale(0);
}
@media(max-width:1200px){
.provider-grid{
grid-template-columns:repeat(4,1fr);
}
}
@media(max-width:900px){
.provider-grid{
grid-template-columns:repeat(3,1fr);
}
}
@media(max-width:700px){
.provider-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:500px){
.provider-grid{
grid-template-columns:1fr;
}
}
/* =====================================
PROMOTION
===================================== */
.promotion{
padding:100px 0;
background:transparent;
}
.promotion h2{
text-align:center;
font-size:42px;
color:#ffd700;
letter-spacing:2px;
}
.promotion h2::after{
content:"";
display:block;
width:120px;
height:4px;
margin:18px auto 0;
background:#ffd700;
border-radius:999px;
}
.promotion-subtitle{
max-width:720px;
margin:30px auto 60px;
text-align:center;
color:#c8c8c8;
font-size:18px;
line-height:1.8;
}
.promotion-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}
.promotion-card{
position:relative;
overflow:hidden;
border-radius:20px;
border:1px solid rgba(255,215,0,.45);
background:rgba(255,255,255,.05);
backdrop-filter:blur(15px);
-webkit-backdrop-filter:blur(15px);
cursor:pointer;
transition:.35s;
}
.promotion-card img{
width:100%;
display:block;
transition:.4s;
}
.promotion-card:hover{
transform:translateY(-8px);
border-color:#ffd700;
box-shadow:
0 18px 40px rgba(255,215,0,.18),
0 0 25px rgba(255,215,0,.10);
}
.promotion-card:hover img{
transform:scale(1.08);
}
.promotion-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
rgba(255,255,255,0),
rgba(255,215,0,.12)
);
opacity:0;
transition:.35s;
}
.promotion-card:hover::after{
opacity:1;
}
@media(max-width:900px){
.promotion-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:600px){
.promotion-grid{
grid-template-columns:1fr;
}
}
/* =====================================
ARTICLE
===================================== */
.article{
padding:100px 0;
background:
linear-gradient(
rgba(0,0,0,.25),
rgba(0,0,0,.35)
),
url("images/background.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.article h2{
text-align:center;
font-size:42px;
color:#ffd700;
letter-spacing:2px;
}
.article h2::after{
content:"";
display:block;
width:120px;
height:4px;
margin:18px auto 0;
background:#ffd700;
border-radius:999px;
}
.article-subtitle{
max-width:760px;
margin:30px auto 60px;
text-align:center;
color:#cfcfcf;
font-size:18px;
line-height:1.8;
}
.article-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.article-card{
background:#181818;
border-radius:20px;
overflow:hidden;
border:1px solid rgba(255,215,0,.2);
transition:all .35s ease;
cursor:pointer;
position:relative;
}
.article-card::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,.18),
transparent
);
transition:.8s;
}
.article-card:hover::before{
left:160%;
}
.article-card:hover{
transform:translateY(-12px);
box-shadow:
0 20px 45px rgba(255,215,0,.25);
border-color:#ffd700;
}
.article-card img{
width:100%;
display:block;
transition:transform .5s ease;
}
.article-card:hover img{
transform:scale(1.08);
}
.article-content{
padding:25px;
}
.article-content h3{
color:#ffffff;
margin-bottom:15px;
font-size:22px;
transition:.3s;
}
.article-card:hover .article-content h3{
color:#ffd700;
}
.article-content p{
color:#cfcfcf;
line-height:1.8;
margin-bottom:20px;
}
.article-content a{
color:#ffd700;
font-weight:bold;
transition:.3s;
}
.article-card:hover .article-content a{
letter-spacing:2px;
}
@media(max-width:900px){
.article-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:600px){
.article-grid{
grid-template-columns:1fr;
}
}
/* =====================================
ARTICLE CONTENT
===================================== */
.article-content-full{
padding:90px 0;
background:transparent;
}
.article-content-full h2{
color:#ffd700;
font-size:42px;
margin-bottom:30px;
}
.article-content-full h3{
color:#ffd700;
font-size:28px;
margin:45px 0 18px;
}
.article-content-full p{
color:#d5d5d5;
line-height:2;
font-size:18px;
margin-bottom:25px;
text-align:justify;
}
/* =====================================
FEATURES
===================================== */
.features{
background:transparent;
}
.features h2{
text-align:center;
color:#ffd700;
font-size:42px;
}
.features h2::after{
content:"";
display:block;
width:120px;
height:4px;
margin:18px auto;
background:#ffd700;
border-radius:999px;
}
.features-subtitle{
max-width:760px;
margin:0 auto 60px;
text-align:center;
color:#cfcfcf;
font-size:18px;
line-height:1.8;
}
.features-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}
.feature-card{
background:#181818;
border:1px solid rgba(255,215,0,.15);
border-radius:20px;
padding:35px;
text-align:center;
transition:.35s;
}
.feature-card:hover{
transform:translateY(-8px);
border-color:#ffd700;
box-shadow:0 15px 35px rgba(255,215,0,.15);
}
.feature-icon{
font-size:50px;
margin-bottom:20px;
}
.feature-card h3{
color:#fff;
margin-bottom:15px;
}
.feature-card p{
color:#bfbfbf;
line-height:1.7;
}
@media(max-width:900px){
.features-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:600px){
.features-grid{
grid-template-columns:1fr;
}
}
/* =====================================
FOOTER
===================================== */
footer{
padding:30px 0 20px;
background:transparent;
}
.footer-logo{
width:200px;
display:block;
margin:0 auto 15px;
}
.footer-text{
max-width:820px;
margin:0 auto 20px;
text-align:center;
color:#bfbfbf;
line-height:1.8;
font-size:17px;
}
.copyright{
text-align:center;
color:#777;
border-top:1px solid rgba(255,255,255,.08);
margin-top:20px;
padding-top:15px;
font-size:15px;
}
/* =====================================
FLOATING BUTTONS
===================================== */
.line-float{
position:fixed;
right:25px;
bottom:95px;
width:65px;
height:65px;
border-radius:50%;
background:#06C755;
display:flex;
justify-content:center;
align-items:center;
box-shadow:0 10px 30px rgba(0,0,0,.35);
transition:.35s;
z-index:999;
}
.line-float:hover{
transform:translateY(-5px) scale(1.08);
}
.line-float i{
font-size:34px;
color:#fff;
}
#topBtn{
position:fixed;
right:25px;
bottom:20px;
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#ffd700;
color:#111;
font-size:24px;
cursor:pointer;
display:none;
justify-content:center;
align-items:center;
transition:.35s;
z-index:999;
box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#topBtn:hover{
transform:translateY(-5px);
background:#ffdf33;
box-shadow:0 15px 35px rgba(255,215,0,.35);
}
/* =====================================
SEO CONTENT
===================================== */
.seo-content{
padding:100px 0;
background:transparent;
}
.seo-content h2{
color:#ffd700;
font-size:42px;
margin-bottom:35px;
}
.seo-content h3{
color:#ffd700;
margin-top:45px;
margin-bottom:20px;
font-size:28px;
}
.seo-content p{
color:#d7d7d7;
font-size:18px;
line-height:2;
text-align:justify;
}
.seo-content ul{
margin:25px 0 40px 30px;
}
.seo-content li{
color:#ffffff;
margin-bottom:12px;
line-height:1.8;
}
/* =====================================
LOGO ANIMATION
===================================== */
.logo img,
.footer-logo{
animation:
floatLogo 3s ease-in-out infinite,
glowLogo 2s infinite alternate;
.footer-logo{
animation:glowLogo 3s infinite;
}
@keyframes glowLogo{
0%{
filter:drop-shadow(0 0 0px gold);
}
50%{
filter:drop-shadow(0 0 18px gold);
}
100%{
filter:drop-shadow(0 0 0px gold);
}
}
}
@keyframes floatLogo{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-8px);
}
100%{
transform:translateY(0);
}
}
@keyframes glowLogo{
from{
filter:drop-shadow(0 0 5px rgba(255,215,0,.3));
}
to{
filter:drop-shadow(0 0 18px rgba(255,215,0,.7));
}
}
/* =====================================
LOADER
===================================== */
#loader{
position:fixed;
inset:0;
background:#0b0b0b;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:999999;
opacity:1;
visibility:visible;
transition:opacity .5s ease;
}
#loader img{
width:220px;
animation:pulseLogo 1.5s infinite;
}
#loader span{
color:#ffd700;
font-size:22px;
margin-top:25px;
letter-spacing:3px;
}
@keyframes pulseLogo{
0%{
transform:scale(1);
}
50%{
transform:scale(1.08);
}
100%{
transform:scale(1);
}
}
.btn-register-nav{
position:relative;
overflow:hidden;
}
.btn-register-nav::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:rgba(255,255,255,.35);
transform:skewX(-25deg);
transition:.7s;
}
.btn-register-nav:hover::before{
left:160%;
}
.stats-card,
.provider-card,
.promotion-card,
.article-card{
transition:.35s;
}
.stats-card:hover,
.provider-card:hover,
.promotion-card:hover,
.article-card:hover{
transform:
translateY(-10px)
scale(1.02);
}
/* =====================================
SCROLL ANIMATION
===================================== */
.fade-up{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}
.fade-up.show{
opacity:1;
transform:translateY(0);
}
/* ===========================
FADE UP
=========================== */
.fade-up{
opacity:0;
transform:translateY(60px);
transition:all .8s ease;
}
.fade-up.show{
opacity:1;
transform:translateY(0);
}
/* =====================================
PREMIUM HEADER
===================================== */
#header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;
transition:.4s;
}
#header.scrolled{
background:rgba(0,0,0,.92);
backdrop-filter:blur(15px);
box-shadow:0 10px 35px rgba(255,215,0,.18);
padding:8px 0;
}
#header img{
transition:.35s;
}
#header.scrolled img{
transform:scale(.88);
}
/* =====================================
REVEAL ANIMATION
===================================== */
.fade-up{
opacity:0;
transform:translateY(60px);
transition:
opacity .8s ease,
transform .8s ease;
}
.fade-up.show{
opacity:1;
transform:translateY(0);
}
/* =====================================
PREMIUM IMAGE HOVER
===================================== */
img{
transition:
transform .5s ease,
filter .5s ease;
}
img:hover{
transform:scale(1.04);
filter:
brightness(1.08)
drop-shadow(0 0 12px rgba(255,215,0,.35));
}
/* =====================================
PREMIUM FOOTER
===================================== */
.footer{
margin-top:100px;
background:#0b0b0b;
border-top:2px solid rgba(255,215,0,.2);
padding:70px 0 30px;
}
.footer-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:45px;
}
.footer-box h2{
color:#ffd700;
margin-bottom:20px;
font-size:32px;
}
.footer-box h3{
color:#ffd700;
margin-bottom:20px;
}
.footer-box p{
color:#cfcfcf;
line-height:1.9;
margin-bottom:10px;
}
.footer-box a{
display:block;
color:#cfcfcf;
text-decoration:none;
margin-bottom:12px;
transition:.3s;
}
.footer-box a:hover{
color:#ffd700;
padding-left:8px;
}
.footer-bottom{
margin-top:50px;
padding-top:25px;
border-top:1px solid rgba(255,255,255,.08);
text-align:center;
color:#888;
font-size:15px;
}
@media(max-width:900px){
.footer-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:600px){
.footer-grid{
grid-template-columns:1fr;
text-align:center;
}
}
.seo-title{
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
/* =====================================
FAQ
===================================== */
.faq{
padding:90px 0;
}
.faq h2{
text-align:center;
color:#ffd700;
font-size:42px;
margin-bottom:50px;
}
.faq-item{
background:#181818;
border:1px solid rgba(255,215,0,.2);
border-radius:15px;
padding:25px;
margin-bottom:20px;
transition:.35s;
}
.faq-item:hover{
border-color:#ffd700;
transform:translateY(-5px);
box-shadow:0 15px 35px rgba(255,215,0,.18);
}
.faq-item h3{
color:#ffd700;
font-size:22px;
margin-bottom:12px;
}
.faq-item p{
color:#d6d6d6;
line-height:1.8;
}
.faq-question{
width:100%;
background:none;
border:none;
color:#ffd700;
font-size:22px;
font-weight:bold;
text-align:left;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
}
.faq-question span{
font-size:28px;
transition:.3s;
}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .4s ease;
}
.faq-item.active .faq-answer{
max-height:400px;
margin-top:15px;
}
.faq-item.active span{
transform:rotate(45deg);
}
/* =====================================
MOBILE RESPONSIVE V2
===================================== */
@media (max-width:768px){
.container{
width:94%;
}
header{
height:70px;
padding:0 15px;
}
header .container{
height:70px;
}
.logo img{
width:130px;
}
.hero{
height:260px;
margin-top:70px;
}
.hero-image{
object-fit:cover;
}
.slider-btn{
width:42px;
height:42px;
font-size:20px;
}
.slider-dots{
bottom:15px;
}
.stats{
padding:60px 0;
}
.stats h2,
.providers h2,
.promotion h2,
.article h2,
.features h2,
.faq h2,
.seo-content h2,
.article-content-full h2{
font-size:28px;
}
.provider-grid{
grid-template-columns:repeat(3,1fr);
gap:12px;
}
.promotion-grid{
grid-template-columns:1fr;
}
.article-grid{
grid-template-columns:1fr;
}
.features-grid{
grid-template-columns:1fr;
}
.provider-card{
padding:14px;
}
.promotion-card{
border-radius:14px;
}
.article-content{
padding:18px;
}
.footer-logo{
width:150px;
}
.footer-text{
font-size:15px;
}
.line-float{
width:55px;
height:55px;
right:15px;
bottom:80px;
}
#topBtn{
width:48px;
height:48px;
right:15px;
bottom:18px;
}
}
/* ==========================================
MOBILE RESPONSIVE - PHASE 1
========================================== */
@media screen and (max-width:768px){
/* ระยะขอบเว็บ */
.container{
width:95%;
margin:auto;
}
/* ---------- HEADER ---------- */
header,
#header{
height:70px;
padding:0 12px;
}
header .container,
#header .container{
height:70px;
display:flex;
align-items:center;
justify-content:space-between;
}
.logo img{
width:125px;
height:auto;
}
/* ---------- HERO ---------- */
.hero{
margin-top:70px;
height:240px;
}
.hero-image,
.hero img{
width:100%;
height:100%;
object-fit:cover;
}
/* ---------- ปุ่มเลื่อน ---------- */
.slider-btn{
width:42px;
height:42px;
font-size:18px;
}
.slider-dots{
bottom:12px;
}
}
/* =====================================
MOBILE FINAL FIX
===================================== */
@media screen and (max-width:768px){
html,
body{
overflow-x:hidden;
}
.container{
width:94%;
margin:auto;
}
/* Banner */
.hero{
margin-top:70px;
height:auto;
}
.hero img,
.hero-image{
width:100%;
height:auto;
object-fit:cover;
}
/* Section */
.stats,
.providers,
.promotion,
.article,
.features,
.faq,
.seo-content{
padding:55px 0;
}
h2{
font-size:30px !important;
line-height:1.4;
}
/* Provider */
.provider-grid{
grid-template-columns:repeat(3,1fr);
gap:12px;
}
.provider-card{
padding:12px;
}
.provider-card img{
max-width:90px;
}
/* Promotion */
.promotion-grid{
grid-template-columns:1fr;
gap:20px;
}
/* Article */
.article-grid{
grid-template-columns:1fr;
gap:20px;
}
/* Features */
.features-grid{
grid-template-columns:1fr;
gap:20px;
}
/* Card */
.stats-card,
.feature-card,
.article-card{
padding:24px;
}
.stats-card h3{
font-size:26px;
}
.stats-card p{
font-size:48px;
}
/* Floating */
.line-float{
right:15px;
bottom:80px;
width:58px;
height:58px;
}
#topBtn{
right:15px;
bottom:15px;
width:52px;
height:52px;
}
}