/*==================================================
SHATR Platform
Official Mobile Style
Version 2.0 Final
==================================================*/



/*==================================================
TABLETS
==================================================*/

@media (max-width:1024px){

.container{

width:94%;

}



.heroContainer{

gap:40px;

}



.heroText h2{

font-size:46px;

}



.tabletFrame{

width:560px;

height:390px;

}



.showcase{

border-radius:22px;

}



.showcaseImage{

object-fit:contain;

}



.quickGrid{

gap:20px;

}

}



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

@media (max-width:768px){

/*==========================
Header
==========================*/

.header{

padding:10px 0;

}



.header .container{

flex-direction:column;

gap:16px;

}



/*==========================
Logo
==========================*/

.logoBox{

justify-content:center;

text-align:center;

gap:12px;

}



.headerLogo{

width:48px;

height:48px;

}



.logoBox h1{

font-size:28px;

}



.logoBox p{

font-size:13px;

}



/*==========================
Header Buttons
==========================*/

.headerButtons{

width:100%;

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:10px;

}



.headerBtn{

flex:1;

min-width:150px;

padding:12px;

font-size:14px;

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

.hero{

padding:35px 0 50px;

}



.heroContainer{

display:flex;

flex-direction:column-reverse;

align-items:center;

text-align:center;

gap:35px;

}



/*==================================================
SHOWCASE
==================================================*/

.heroImage{

width:100%;

display:flex;

justify-content:center;

align-items:center;

}



.tabletFrame{

width:100%;

max-width:430px;

height:300px;

padding:8px;

border-radius:24px;

}



.tabletFrame::before{

width:75px;

height:7px;

top:14px;

}



.showcase{

border-radius:18px;

}



.showcaseImage{

object-fit:contain;

}



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

.heroText{

width:100%;

padding:30px 24px;

border-radius:24px;

}



.badge{

font-size:13px;

padding:8px 16px;

}



.heroText h2{

font-size:36px;

line-height:1.35;

margin-bottom:18px;

}



.heroText p{

font-size:17px;

line-height:1.9;

max-width:100%;

}



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

.heroButtons{

width:100%;

display:flex;

flex-direction:column;

gap:14px;

margin-top:30px;

}



.mainBtn,

.secondBtn,

.thirdBtn{

width:100%;

display:flex;

align-items:center;

justify-content:center;

padding:16px;

font-size:17px;

border-radius:18px;

}
    
/*==================================================
QUICK SECTION
==================================================*/

.quickSection{

padding:25px 0 45px;

}



.quickTitle{

margin-bottom:30px;

padding:0 10px;

}



.quickTitle h2{

font-size:30px;

line-height:1.4;

margin-bottom:12px;

}



.quickTitle p{

font-size:16px;

line-height:1.8;

}



/*==================================================
QUICK GRID
==================================================*/

.quickGrid{

grid-template-columns:

repeat(2,1fr);

gap:16px;

}



/*==================================================
QUICK CARD
==================================================*/

.quickCard{

padding:24px 16px;

border-radius:22px;

min-height:190px;

}



.quickIcon{

width:68px;

height:68px;

font-size:34px;

margin-bottom:16px;

border-radius:18px;

}



.quickCard h3{

font-size:20px;

margin-bottom:10px;

}



.quickCard p{

font-size:14px;

line-height:1.7;

}



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

.footer{

margin-top:45px;

padding:35px 0 25px;

}



.footerBrand{

flex-direction:column;

gap:14px;

text-align:center;

}



.footerLogo{

width:56px;

height:56px;

}



.footerBrand h2{

font-size:28px;

}



.footerBrand p{

font-size:15px;

line-height:1.8;

}



.footerLinks{

flex-direction:column;

width:100%;

gap:12px;

}



.footerLinks a{

width:100%;

padding:14px;

text-align:center;

}



/*==================================================
POPUPS
==================================================*/

.popup{

padding:18px;

}



.popup-box{

width:100%;

max-width:100%;

padding:26px;

border-radius:24px;

}



.popup-box h2{

font-size:25px;

}



.popup-box p,

.popup-box li{

font-size:15px;

line-height:1.9;

}



.popup-box input{

font-size:15px;

padding:15px;

}



.popup-box button,

.popup-btn{

padding:15px;

font-size:16px;

}

}

/*==================================================
SMALL DEVICES
==================================================*/

@media (max-width:480px){

.hero{

padding:25px 0 40px;

}



.heroText{

padding:24px 18px;

}



.heroText h2{

font-size:30px;

line-height:1.4;

}



.heroText p{

font-size:15px;

}



.badge{

font-size:12px;

padding:7px 14px;

}



/*==================================================
SHOWCASE
==================================================*/

.tabletFrame{

max-width:350px;

height:250px;

padding:6px;

border-radius:20px;

}



.tabletFrame::before{

width:65px;

height:6px;

top:12px;

}



.showcase{

border-radius:16px;

}



.showcaseImage{

object-fit:contain;

}



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

.mainBtn,

.secondBtn,

.thirdBtn{

font-size:16px;

padding:15px;

}



/*==================================================
QUICK SECTION
==================================================*/

.quickTitle h2{

font-size:26px;

}



.quickTitle p{

font-size:15px;

}



.quickGrid{

gap:14px;

}



.quickCard{

padding:20px 14px;

min-height:170px;

}



.quickIcon{

width:60px;

height:60px;

font-size:30px;

}



.quickCard h3{

font-size:18px;

}



.quickCard p{

font-size:13px;

}



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

.footerLogo{

width:50px;

height:50px;

}



.footerBrand h2{

font-size:24px;

}



.footerBrand p{

font-size:14px;

}



.popup-box{

padding:22px;

}

}



/*==================================================
VERY SMALL DEVICES
==================================================*/

@media (max-width:360px){

.logoBox{

flex-direction:column;

}



.logoBox h1{

font-size:24px;

}



.logoBox p{

font-size:12px;

}



.headerButtons{

flex-direction:column;

}



.headerBtn{

width:100%;

}



.heroText h2{

font-size:26px;

}



.heroText p{

font-size:14px;

}



.tabletFrame{

max-width:300px;

height:220px;

}



.quickGrid{

grid-template-columns:1fr;

}



.quickCard{

min-height:auto;

}

}



/*==================================================
SAFE AREA
==================================================*/

@supports (padding:max(0px)){

body{

padding-top:env(safe-area-inset-top);

padding-bottom:env(safe-area-inset-bottom);

padding-left:env(safe-area-inset-left);

padding-right:env(safe-area-inset-right);

}

}



/*==================================================
LANDSCAPE
==================================================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

padding:20px 0;

}



.heroContainer{

gap:25px;

}



.heroText{

padding:22px;

}



.tabletFrame{

max-width:420px;

height:250px;

}



.quickSection{

padding:20px 0;

}

}



/*==================================================
THE END
==================================================*/