/* =====================================================
   TOP RUMMYS
   STYLE.CSS
   PART 1
=====================================================*/

/*=========================
GOOGLE FONT
=========================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

:root{

--primary:#ff6b00;
--primary-dark:#e95f00;
--secondary:#1f2937;
--accent:#ffedd5;

--white:#ffffff;
--light:#f8fafc;
--gray:#6b7280;
--border:#e5e7eb;
--text:#222222;

--radius:18px;
--shadow:0 15px 40px rgba(0,0,0,.08);

--transition:.35s ease;

}

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

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

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#f7f8fc;
color:var(--text);
overflow-x:hidden;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
color:inherit;

}

ul{

list-style:none;

}

/*=========================
COMMON
=========================*/

.container{

width:min(1180px,92%);
margin:auto;

}

section{

padding:90px 0;

}

.section-heading{

text-align:center;
margin-bottom:60px;

}

.section-heading span{

display:inline-block;
background:var(--accent);
color:var(--primary);
padding:8px 18px;
border-radius:40px;
font-size:14px;
font-weight:700;
margin-bottom:18px;

}

.section-heading h2{

font-size:42px;
font-weight:700;
margin-bottom:18px;

}

.section-heading p{

max-width:700px;
margin:auto;
line-height:1.8;
color:var(--gray);

}

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

.header{

position:sticky;
top:0;
left:0;
width:100%;

background:#ffffffee;

backdrop-filter:blur(12px);

z-index:999;

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

}

.header .container{

display:flex;
align-items:center;
justify-content:space-between;
padding:18px 0;

}

.logo img{

height:58px;

}

/*=========================
NAVIGATION
=========================*/

.navbar ul{

display:flex;
gap:30px;

}

.navbar a{

font-weight:600;
transition:var(--transition);
position:relative;

}

.navbar a::after{

content:'';

position:absolute;

left:0;
bottom:-6px;

width:0;

height:2px;

background:var(--primary);

transition:var(--transition);

}

.navbar a:hover{

color:var(--primary);

}

.navbar a:hover::after{

width:100%;

}

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

.menu-btn{

display:none;

width:48px;
height:48px;

border:none;

border-radius:12px;

background:var(--primary);

color:#fff;

font-size:22px;

cursor:pointer;

}

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

.mobile-menu{

display:none;

position:absolute;

top:90px;

left:0;

width:100%;

background:#fff;

box-shadow:var(--shadow);

padding:25px;

}

.mobile-menu a{

display:block;

padding:15px 0;

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

font-weight:600;

}

.mobile-menu a:last-child{

border:none;

}

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

.hero{

background:

linear-gradient(
135deg,
#fff8f1,
#ffffff
);

padding:80px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 480px;

gap:70px;

align-items:center;

}

.hero-left h1{

font-size:58px;

line-height:1.15;

margin:20px 0;

font-weight:800;

}

.hero-left p{

font-size:18px;

line-height:1.9;

color:var(--gray);

margin-bottom:35px;

}

.tag{

display:inline-block;

padding:10px 20px;

background:#ffe9d4;

border-radius:40px;

font-weight:700;

color:var(--primary);

}

.hero-buttons{

display:flex;

gap:18px;

margin-bottom:45px;

}

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

background:var(--primary);

color:#fff;

border-radius:14px;

font-weight:700;

transition:var(--transition);

box-shadow:0 15px 30px rgba(255,107,0,.25);

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-4px);

}

.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

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

border-radius:14px;

color:var(--primary);

font-weight:700;

transition:var(--transition);

}

.btn-secondary:hover{

background:var(--primary);

color:#fff;

}

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

.hero-info{

display:flex;

gap:22px;

flex-wrap:wrap;

}

.hero-info div{

background:#fff;

padding:22px;

border-radius:18px;

min-width:140px;

box-shadow:var(--shadow);

text-align:center;

}

.hero-info h3{

font-size:30px;

color:var(--primary);

margin-bottom:6px;

}

.hero-info p{

margin:0;

font-size:14px;

color:var(--gray);

}

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

.hero-right{

position:relative;

}

.hero-right img{

border-radius:30px;

box-shadow:

0 30px 60px rgba(0,0,0,.15);

}

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

@media(max-width:992px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-info{

justify-content:center;

}

}

@media(max-width:768px){

.navbar{

display:none;

}

.menu-btn{

display:block;

}

.hero-left h1{

font-size:38px;

}

.section-heading h2{

font-size:30px;

}

section{

padding:70px 0;

}

}

@media(max-width:480px){

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.hero-info{

flex-direction:column;

}

.hero-info div{

width:100%;

}

}
/*====================================================
STYLE.CSS PART 2
Download • Features • Overview • Guide
Safety • SEO Article
====================================================*/


/*====================================
DOWNLOAD SECTION
====================================*/

.download-section{

background:#ffffff;

}

.download-card{

display:grid;

grid-template-columns:320px 1fr;

gap:50px;

background:#fff;

padding:40px;

border-radius:24px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

align-items:center;

}

.download-image{

overflow:hidden;

border-radius:18px;

}

.download-image img{

width:100%;

transition:.4s;

}

.download-image:hover img{

transform:scale(1.05);

}

.download-content h3{

font-size:34px;

margin-bottom:18px;

}

.download-content p{

font-size:17px;

line-height:1.8;

color:#6b7280;

margin-bottom:25px;

}

.app-details{

display:grid;

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

gap:18px;

margin-bottom:35px;

}

.app-details li{

background:#fafafa;

padding:16px;

border-radius:14px;

font-size:15px;

box-shadow:0 5px 12px rgba(0,0,0,.04);

}

.download-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 36px;

background:#ff6b00;

color:#fff;

border-radius:14px;

font-weight:700;

transition:.35s;

}

.download-btn:hover{

background:#e85d00;

transform:translateY(-3px);

}


/*====================================
FEATURE SECTION
====================================*/

.features-section{

background:#f7f8fc;

}

.feature-grid{

display:grid;

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

gap:28px;

}

.feature-card{

background:#fff;

padding:35px;

border-radius:22px;

text-align:center;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.feature-card:hover{

transform:translateY(-10px);

}

.feature-icon{

width:75px;

height:75px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#fff2e7;

font-size:32px;

}

.feature-card h3{

margin-bottom:15px;

font-size:22px;

}

.feature-card p{

line-height:1.8;

color:#666;

}


/*====================================
OVERVIEW
====================================*/

.overview-section{

background:#fff;

}

.overview-grid{

display:grid;

grid-template-columns:1fr 430px;

gap:60px;

align-items:start;

}

.overview-grid h2{

font-size:40px;

margin-bottom:25px;

}

.overview-grid p{

line-height:2;

margin-bottom:20px;

color:#666;

}


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

.info-box{

background:#ffffff;

padding:35px;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.07);

}

.info-box h3{

margin-bottom:25px;

font-size:28px;

}

.info-table{

width:100%;

border-collapse:collapse;

}

.info-table th{

background:#fff3e7;

padding:16px;

text-align:left;

width:40%;

}

.info-table td{

padding:16px;

background:#fafafa;

}

.info-table tr{

border-bottom:10px solid #fff;

}


/*====================================
INSTALLATION
====================================*/

.guide-section{

background:#f8fafc;

}

.step-wrapper{

display:grid;

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

gap:30px;

}

.step-card{

background:#fff;

padding:35px;

border-radius:22px;

position:relative;

box-shadow:0 12px 30px rgba(0,0,0,.05);

overflow:hidden;

}

.step-card::before{

content:'';

position:absolute;

left:0;

top:0;

width:6px;

height:100%;

background:#ff6b00;

}

.step-no{

font-size:40px;

font-weight:800;

color:#ff6b00;

margin-bottom:18px;

}

.step-card h3{

margin-bottom:15px;

}

.step-card p{

line-height:1.8;

color:#666;

}


/*====================================
SAFETY
====================================*/

.tips-section{

background:#ffffff;

}

.tips-grid{

display:grid;

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

gap:25px;

}

.tip-box{

background:#fffaf6;

padding:35px;

border-radius:22px;

border:1px solid #ffe3c5;

transition:.35s;

}

.tip-box:hover{

transform:translateY(-6px);

}

.tip-box h3{

margin-bottom:16px;

font-size:22px;

}

.tip-box p{

line-height:1.9;

color:#666;

}


/*====================================
SEO ARTICLE
====================================*/

.article-section{

background:#f7f8fc;

}

.seo-content{

background:#fff;

padding:50px;

border-radius:24px;

box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.seo-content h2{

font-size:38px;

margin-bottom:30px;

}

.seo-content h3{

margin-top:35px;

margin-bottom:18px;

font-size:28px;

}

.seo-content p{

font-size:17px;

line-height:2;

margin-bottom:22px;

color:#555;

}

.seo-content ul{

padding-left:22px;

margin-bottom:25px;

}

.seo-content ul li{

list-style:disc;

margin-bottom:12px;

line-height:1.8;

color:#555;

}


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

@media(max-width:992px){

.download-card{

grid-template-columns:1fr;

}

.feature-grid{

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

}

.overview-grid{

grid-template-columns:1fr;

}

.step-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.feature-grid{

grid-template-columns:1fr;

}

.app-details{

grid-template-columns:1fr;

}

.tips-grid{

grid-template-columns:1fr;

}

.download-content h3{

font-size:28px;

}

.overview-grid h2{

font-size:30px;

}

.seo-content{

padding:30px;

}

.seo-content h2{

font-size:30px;

}

}

@media(max-width:480px){

.download-card{

padding:25px;

}

.feature-card{

padding:25px;

}

.step-card{

padding:25px;

}

.tip-box{

padding:25px;

}

.info-box{

padding:25px;

}

.seo-content{

padding:22px;

}

}
/*====================================================
STYLE.CSS PART 3
FAQ • Related Apps • CTA • Footer • Utilities
====================================================*/

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

.faq-section{
    background:#ffffff;
}

.faq-container{
    max-width:900px;
    margin:0 auto;
}

.faq-item{
    background:#fff;
    border:1px solid #ececec;
    border-radius:18px;
    margin-bottom:20px;
    overflow:hidden;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    transition:.3s;
}

.faq-item:hover{
    transform:translateY(-3px);
}

.faq-question{
    width:100%;
    border:none;
    background:#fff;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 28px;
    font-size:18px;
    font-weight:600;
    color:#222;
}

.faq-question span{
    font-size:26px;
    color:#ff6b00;
    transition:.3s;
}

.faq-answer{
    display:none;
    padding:0 28px 25px;
}

.faq-answer p{
    line-height:1.9;
    color:#666;
}

.faq-item.active .faq-answer{
    display:block;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
}

/*====================================
RELATED APPS
====================================*/

.related-apps{
    background:#f7f8fc;
}

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

.app-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.06);
    transition:.35s;
}

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

.app-card img{
    width:100%;
    height:220px;
    object-fit:cover;
}

.app-card h3{
    padding:20px 20px 10px;
    font-size:22px;
}

.app-card p{
    padding:0 20px 25px;
    color:#666;
}

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

.cta-section{
    background:linear-gradient(135deg,#ff6b00,#ff8b24);
    color:#fff;
}

.cta-box{
    max-width:850px;
    margin:auto;
    text-align:center;
}

.cta-box h2{
    font-size:46px;
    margin-bottom:20px;
}

.cta-box p{
    font-size:18px;
    line-height:1.9;
    margin-bottom:35px;
}

.cta-btn{
    display:inline-block;
    background:#fff;
    color:#ff6b00;
    padding:18px 40px;
    border-radius:14px;
    font-weight:700;
    transition:.3s;
}

.cta-btn:hover{
    transform:translateY(-4px);
}

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

.footer{
    background:#111827;
    color:#d1d5db;
    padding-top:80px;
}

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

.footer h3{
    color:#fff;
    margin-bottom:22px;
}

.footer p{
    line-height:1.9;
}

.footer ul li{
    margin-bottom:14px;
}

.footer ul a{
    transition:.3s;
}

.footer ul a:hover{
    color:#ff6b00;
}

.copyright{
    text-align:center;
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.1);
    padding:25px 0;
    font-size:15px;
}

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

#backTop{
    position:fixed;
    right:25px;
    bottom:25px;
    width:52px;
    height:52px;
    border:none;
    border-radius:50%;
    background:#ff6b00;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    display:none;
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    transition:.3s;
    z-index:999;
}

#backTop:hover{
    transform:translateY(-5px);
}

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

.preloader{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.loader{
    width:60px;
    height:60px;
    border:6px solid #eee;
    border-top:6px solid #ff6b00;
    border-radius:50%;
    animation:spin 1s linear infinite;
}

@keyframes spin{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}

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

.fade-up{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

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

.text-center{
    text-align:center;
}

.mt-20{
    margin-top:20px;
}

.mt-40{
    margin-top:40px;
}

.mt-60{
    margin-top:60px;
}

.mb-20{
    margin-bottom:20px;
}

.mb-40{
    margin-bottom:40px;
}

.mb-60{
    margin-bottom:60px;
}

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

@media(max-width:992px){

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

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

.cta-box h2{
font-size:36px;
}

}

@media(max-width:768px){

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

.faq-question{
font-size:16px;
padding:18px;
}

.faq-answer{
padding:0 18px 20px;
}

.cta-box h2{
font-size:30px;
}

.cta-box p{
font-size:16px;
}

.footer{
padding-top:60px;
}

}

@media(max-width:480px){

.app-card img{
height:180px;
}

.cta-btn{
width:100%;
}

#backTop{
right:15px;
bottom:15px;
}

}