/*======================================================
PALCHAT RESPONSIVE.CSS
======================================================*/


/*========================================
Large Laptop
=========================================*/

@media (max-width:1200px){

.container{

width:94%;

}

.hero-left h1{

font-size:56px;

}

.hero-dashboard img{

height:520px;

}

}



/*========================================
Laptop
=========================================*/

@media (max-width:992px){

.hero{

padding-top:150px;

}
/*==============================
MOBILE NAVIGATION
==============================*/

.login-btn{

display:none;

}

.nav-buttons{

display:flex;

align-items:center;

}

.register-btn{

display:inline-flex;

padding:12px 20px;

font-size:14px;

}

.nav-links{

position:fixed;

top:0;

right:-320px;

left:auto;

width:300px;

height:100vh;

background:#fff;

display:flex;

flex-direction:column;

align-items:flex-start;

padding:90px 30px;

gap:25px;

list-style:none;

transition:right .35s ease;

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

z-index:9999;

}

.nav-links.active{

right:0;

}

.hero-grid{

display:flex;

flex-direction:column;

text-align:center;

gap:40px;

}

.hero-left{

order:1;

}

.hero-right{

order:2;

}

.hero-left p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-rating{

margin-top:10px;

}

.hero-dashboard{

display:flex;

justify-content:center;

}

.hero-dashboard img{

width:100%;

max-width:600px;

height:auto;

}

}


/*========================================
Tablet
=========================================*/

@media (max-width:768px){

.navbar .container{

height:80px;

}

.logo{

font-size:25px;

}

.logo-icon{

width:46px;

height:46px;

font-size:19px;

}

.nav-buttons{

gap:10px;

}

.login-btn{

display:none;

}

.register-btn{

padding:13px 22px;

font-size:14px;

}

.hero{

padding-top:135px;

padding-bottom:80px;

}

.hero-left h1{

font-size:46px;

}

.hero-left p{

font-size:17px;

}

.hero-dashboard img{

max-width:500px;

width:100%;

height:auto;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.primary-btn,

.secondary-btn{

width:100%;

max-width:320px;

text-align:center;

}

}



/*========================================
Large Phones
=========================================*/

@media (max-width:576px){

.hero-left h1{

font-size:38px;

}

.hero-left p{

font-size:16px;

}

.mini-title{

font-size:12px;

padding:9px 16px;

}

.hero-dashboard img{

max-width:400px;

width:100%;

height:auto;

}

.hero-rating{

font-size:14px;

}

}



/*========================================
Small Phones
=========================================*/

@media (max-width:430px){

.logo{

font-size:22px;

gap:8px;

}

.logo-icon{

width:42px;

height:42px;

font-size:18px;

border-radius:12px;

}

.register-btn{

padding:11px 18px;

font-size:13px;

}

.hero{

padding-top:120px;

}

.hero-left h1{

font-size:33px;

line-height:1.15;

}

.hero-left p{

font-size:15px;

}

.primary-btn,

.secondary-btn{

padding:16px 24px;

font-size:15px;

}

.hero-dashboard img{

max-width:330px;

width:100%;

height:auto;

}
}



/*========================================
Very Small Phones
=========================================*/

@media (max-width:360px){

.hero-left h1{

font-size:29px;

}

.logo{

font-size:20px;

}

.register-btn{

padding:10px 16px;

font-size:12px;

}

.hero-dashboard img{

max-width:290px;

width:100%;

height:auto;

}

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

@media(max-width:1100px){

.stats-grid{

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

}

}


@media(max-width:768px){

.section-heading h2{

font-size:36px;

}

.stats-grid{

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

gap:18px;

}

.stat-card{

padding:30px 18px;

}

.stat-card h3{

font-size:30px;

}

}


@media(max-width:480px){

.stats{

padding:80px 0;

}

.stats-grid{

grid-template-columns:1fr;

}

.section-heading{

margin-bottom:45px;

}

.section-heading h2{

font-size:30px;

}

.section-heading p{

font-size:16px;

}

.stat-card{

padding:28px;

}

}
/*==========================================
WAYS TO EARN
==========================================*/

@media(max-width:1100px){

.earn-grid{

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

}

}

@media(max-width:768px){

.earn-grid{

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

gap:20px;

}

}

@media(max-width:500px){

.earn{

padding:90px 0;

}

.earn-grid{

grid-template-columns:1fr;

}

.earn-card{

padding:30px;

}

}
/*==========================================
HOW IT WORKS
==========================================*/

@media(max-width:1100px){

.steps-grid{

grid-template-columns:1fr;

gap:30px;

}

.steps-grid::before{

display:none;

}

}

@media(max-width:768px){

.how-it-works{

padding:90px 0;

}

.step-card{

padding:35px 25px;

}

.step-number{

font-size:60px;

}

.step-card h3{

font-size:24px;

}

.step-icon{

width:78px;

height:78px;

font-size:30px;

}

}

@media(max-width:480px){

.step-card{

padding:30px 20px;

}

.step-btn{

width:100%;

}

}
/*==========================================
WHY PALCHAT
==========================================*/

@media(max-width:1100px){

.why-grid{

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

}

}

@media(max-width:768px){

.why-palchat{

padding:90px 0;

}

.why-grid{

grid-template-columns:1fr;

}

.why-card{

padding:30px 24px;

}

.why-card h3{

font-size:22px;

}

.why-icon{

width:72px;

height:72px;

font-size:30px;

}

}
/*==========================================
LATEST WITHDRAWALS
==========================================*/

@media(max-width:1100px){

.withdrawals-grid{

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

}

}

@media(max-width:768px){

.withdrawals{

padding:90px 0;

}

.withdrawals-grid{

grid-template-columns:1fr;

}

.withdraw-card{

padding:25px;

}

.withdraw-amount{

font-size:30px;

}

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

.withdraw-card{

width:280px;

}

}
/*==========================================
PREMIUM TESTIMONIALS
==========================================*/

@media(max-width:768px){

.testimonial-card{

width:300px;

padding:30px;

}

.testimonials{

padding:90px 0;

}

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

@media(max-width:768px){

.faq{

padding:90px 0;

}

.faq-question{

font-size:18px;

padding:22px;

}

.faq-answer p{

padding:0 22px 22px;

}

}
/*==========================================
FINAL CTA
==========================================*/

@media(max-width:992px){

.cta-wrapper{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.cta-content p{

margin-left:auto;

margin-right:auto;

}

.cta-buttons{

justify-content:center;

}

.cta-features{

justify-content:center;

}

.cta-content h2{

font-size:48px;

}

}

@media(max-width:768px){

.final-cta{

padding:90px 0;

}

.cta-content h2{

font-size:38px;

}

.cta-content p{

font-size:16px;

}

.cta-buttons{

flex-direction:column;

align-items:center;

}

.cta-buttons a{

width:100%;

max-width:320px;

text-align:center;

}

.cta-image img{

width:100%;

max-width:380px;

}

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

.floating-card{

position:relative;

left:auto;

right:auto;

top:auto;

bottom:auto;

margin:15px auto;
width:220px;

}

.cta-image{

display:flex;

flex-direction:column;

align-items:center;

}

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

@media(max-width:992px){

.footer-grid{

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

gap:40px;

}

}

@media(max-width:768px){

.footer{

padding:70px 0 25px;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-column p{

margin-left:auto;

margin-right:auto;

}

.social-icons{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-bottom-links{

justify-content:center;

flex-wrap:wrap;

}

}