/* =====================================================
   MOBILE RESPONSIVE
   SwiftToolsPro
===================================================== */

@media (max-width:991px){

.site-header{

    padding:10px 0;

}

.header-container{

    min-height:60px;

}

.logo-image{

    width:40px;

    height:40px;

}

.logo-title{

    font-size:18px;

}

.logo-tagline{

    font-size:11px;

}

.main-nav{

    display:none;

}

.menu-btn{

    display:flex;

}

.header-right{

    gap:10px;

}

.container{

    width:95%;

}

}                                                                                                                        /* =====================================================
   TABLET & MOBILE TOOL LAYOUT
===================================================== */

@media (max-width:991px){

.tool-section{

    padding:40px 0;

}

.stats{

    display:grid;

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

    gap:15px;

}

.extra-stats{

    display:grid;

    grid-template-columns:1fr;

    gap:15px;

    margin-bottom:20px;

}

.action-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.action-buttons button{

    flex:1 1 calc(50% - 12px);

}

textarea{

    min-height:220px;

    font-size:16px;

}

.footer-grid{

    grid-template-columns:1fr;

    gap:30px;

}

.footer-column{

    text-align:center;

}

}

@media (max-width:576px){

.stats{

    grid-template-columns:1fr;

}

.action-buttons{

    flex-direction:column;

}

.action-buttons button{

    width:100%;

}

h1{

    font-size:28px;

}

.subtitle{

    font-size:15px;

}

}                                                                                                                       /* =====================================================
   MOBILE FINAL OPTIMIZATION
===================================================== */

@media (max-width:991px){

.site-header{

    position:sticky;

    top:0;

}

.main-nav.active{

    display:block;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#ffffff;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    padding:20px;

}

.main-nav.active ul{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.main-nav.active a{

    display:block;

    padding:10px 0;

}

}

@media (max-width:768px){

.container{

    width:94%;

}

.card,
.extra-card{

    padding:18px;

}

button{

    min-height:48px;

}

input,
textarea,
select{

    font-size:16px;

}

}

@media (max-width:480px){

.logo-title{

    font-size:16px;

}

.logo-tagline{

    display:none;

}

.site-footer{

    padding:40px 0 20px;

}

.footer-bottom p{

    font-size:13px;

}

}