/* ==========================================
   OneToolBox Enterprise
   responsive.css
   Part 1
========================================== */

/* ==========================================
   1400px
========================================== */

@media (max-width:1400px){

.container,
.wrapper{
    max-width:1200px;
}

.hero-title{
    font-size:52px;
}

}

/* ==========================================
   1200px
========================================== */

@media (max-width:1200px){

.container,
.wrapper{
    max-width:100%;
}

.hero-container{
    grid-template-columns:1fr;
    text-align:center;
}

.hero-actions{
    justify-content:center;
}

.tool-layout{
    grid-template-columns:1fr;
}

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

.category-grid,
.tool-grid{
    grid-template-columns:repeat(3,1fr);
}

}

/* ==========================================
   992px
========================================== */

@media (max-width:992px){

.nav{
    display:none;
}

.mobile-btn{
    display:flex;
}

.header-search{
    display:none;
}

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

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

.hero-title{
    font-size:46px;
}

.section{
    padding:70px 0;
}

}
/* ==========================================
   TABLET
========================================== */

@media (max-width:768px){

.container,
.wrapper{
    padding-inline:16px;
}

.section{
    padding:60px 0;
}

.grid-2,
.grid-3,
.grid-4,
.category-grid,
.tool-grid,
.related-tools{
    grid-template-columns:1fr;
}

.hero{
    padding:70px 0;
}

.hero-title{
    font-size:38px;
}

.hero-subtitle{
    font-size:17px;
}

.hero-actions{
    flex-direction:column;
    align-items:stretch;
}

.header{
    height:64px;
}

.logo img{
    width:40px;
    height:40px;
}

.logo-text span{
    display:none;
}

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

.footer-bottom{
    flex-direction:column;
    text-align:center;
}

.upload-area{
    min-height:220px;
}

.tool-box,
.card{
    padding:20px;
}

.result-header,
.download-box{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
}

.modal-box{
    width:95%;
}

.cookie-bar{
    flex-direction:column;
    align-items:flex-start;
}

}

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

@media (max-width:576px){

.hero-title{
    font-size:30px;
}

.hero-subtitle{
    font-size:16px;
}

.btn,
.btn-lg{
    width:100%;
}

.header-container{
    padding:0 14px;
}

.tool-card,
.category-box,
.feature-card,
.card{
    padding:18px;
}

.upload-icon{
    font-size:48px;
}

.upload-title{
    font-size:18px;
}

.upload-text{
    font-size:14px;
}

.pagination{
    flex-wrap:wrap;
}

.tabs{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:6px;
}

.tab{
    white-space:nowrap;
}

}

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

@media (max-width:480px){

.hero{
    padding:50px 0;
}

.hero-title{
    font-size:26px;
}

.section{
    padding:50px 0;
}

.logo-text h1{
    font-size:18px;
}

.tool-card-title,
.card-title{
    font-size:18px;
}

.stat-value{
    font-size:28px;
}

.toast{
    width:100%;
}

.back-to-top,
.fab{
    width:48px;
    height:48px;
}

}

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

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

.hero{
    padding:40px 0;
}

.section{
    padding:40px 0;
}

}

/* ==========================================
   PRINT
========================================== */

@media print{

.header,
.footer,
.back-to-top,
.fab,
.cookie-bar,
.mobile-menu,
.theme-btn{
    display:none !important;
}

.page{
    padding:0;
}

body{
    background:#fff;
    color:#000;
}

}