/* ========================================= */
/* ATOZ TECH EXCHANGE - RESPONSIVE.CSS */
/* ========================================= */


/* LARGE DEVICES */

@media(max-width:1200px){

header{

padding:20px 40px;

}

.hero h1,
.page-hero h1{

font-size:58px;

}

.dashboard-main{

padding:30px;

}

}


/* TABLETS */

@media(max-width:992px){

/* HEADER */

header{

padding:20px 30px;

}

nav{

gap:18px;

}


/* HERO */

.hero,
.page-hero{

padding:100px 30px;

}

.hero h1,
.page-hero h1{

font-size:48px;

}


/* CONTACT */

.contact-container{

grid-template-columns:1fr;
gap:40px;

}


/* LOGIN */

.login-container{

grid-template-columns:1fr;

}

.login-left{

display:none;

}


/* DASHBOARD */

.dashboard-layout{

flex-direction:column;

}

.sidebar{

width:100%;
border-right:none;
border-bottom:1px solid #d9c7b3;

}

.dashboard-main{

padding:25px;

}


/* GRIDS */

.products-grid,
.market-grid,
.vendors-grid,
.team-grid,
.why-grid,
.services-grid{

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

}

}


/* MOBILE */

@media(max-width:768px){

/* HEADER */

header{

padding:18px 20px;

}

.logo{

font-size:24px;

}

nav{

display:none;

}

.menu-btn{

display:block;

}


/* HERO */

.hero,
.page-hero{

padding:80px 20px;

}

.hero h1,
.page-hero h1{

font-size:38px;
line-height:1.3;

}

.hero p,
.page-hero p{

font-size:16px;

}


/* SECTION PADDING */

.products-section,
.marketplace-section,
.vendors-section,
.team-section,
.contact-section,
.about-section,
.why-section,
.cta-section,
.stats-section{

padding:50px 20px;

}


/* CTA */

.cta-section h2{

font-size:38px;

}


/* SECTION TITLE */

.section-title h2{

font-size:38px;

}


/* SEARCH */

.market-search{

padding:30px 20px;
flex-direction:column;

}

.search-box,
.market-filter{

width:100%;
min-width:100%;

}


/* BUTTON */

.btn{

width:100%;
text-align:center;

}


/* CARD */

.product-card,
.market-card,
.vendor-card,
.team-card,
.why-card,
.service-card{

border-radius:20px;

}

.product-content,
.market-content,
.service-content{

padding:22px;

}


/* PRODUCT INFO */

.product-info,
.market-info{

flex-direction:column;
align-items:flex-start;

}


/* STATS */

.stat-box{

padding:30px 20px;

}

.stat-box h2{

font-size:38px;

}


/* TABLE */

.table-section{

padding:20px;
overflow-x:auto;

}

.admin-table{

min-width:700px;

}


/* ADS */

.ads-section{

margin:30px 0;
padding:10px;
border-radius:16px;

}


/* FOOTER */

footer{

padding:30px 20px;

}

.footer-links{

display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;

}


/* LOGIN */

.login-page{

padding:20px;

}

.login-right{

padding:35px 20px;

}

.login-right h2{

font-size:32px;

}


/* FORMS */

form input,
form textarea,
form select{

padding:14px;
font-size:14px;

}


/* DASHBOARD */

.dashboard-main{

padding:20px;

}

.dashboard-topbar{

flex-direction:column;
align-items:flex-start;
gap:20px;

}

.dashboard-card{

padding:30px 20px;

}

.dashboard-card h2{

font-size:34px;

}


/* SIDEBAR */

.sidebar{

padding:20px;

}

.sidebar-logo{

font-size:24px;

}

.sidebar ul li a{

padding:12px;
font-size:14px;

}

}


/* SMALL MOBILE */

@media(max-width:480px){

.hero h1,
.page-hero h1{

font-size:30px;

}

.hero p,
.page-hero p{

font-size:15px;

}

.btn{

padding:13px 18px;
font-size:14px;

}

.section-title h2{

font-size:30px;

}

.cta-section h2{

font-size:30px;

}

.logo{

font-size:22px;

}

.stat-box h2{

font-size:32px;

}

.dashboard-card h2{

font-size:28px;

}

.product-content h2,
.market-content h2{

font-size:20px;

}

}


/* LANDSCAPE MOBILE */

@media(max-width:900px) and (orientation:landscape){

.hero,
.page-hero{

padding:60px 20px;

}

.hero h1,
.page-hero h1{

font-size:34px;

}

}


/* ULTRA LARGE SCREEN */

@media(min-width:1600px){

.container{

max-width:1500px;

}

.hero h1,
.page-hero h1{

font-size:80px;

}

.section-title h2{

font-size:64px;

}

}