/* =========================
   Hero Responsive
========================= */

@media (max-width: 992px) {

    .hero .container {
        flex-direction: column;
        text-align: center;
    }

    .hero-content h1 {
        font-size: 42px;
    }

    .hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

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

    .upload-card {
        width: 100%;
        max-width: 500px;
    }

}

@media (max-width: 576px) {

    .hero {
        padding: 60px 0;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .feature-chip {
        width: 100%;
        justify-content: center;
    }

    .upload-card {
        padding: 35px 20px;
    }

}

/* =========================
   Image Editor Responsive
========================= */

@media(max-width:992px){

    .editor-wrapper{

        grid-template-columns:1fr;

    }

    .editor-controls{

        position:static;

    }

}

@media(max-width:576px){

    .info-grid{

        grid-template-columns:1fr;

    }

    .quick-resize{

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

    }

}


/* =========================
      Section Title
========================= */

@media(max-width:768px){

.section-title{

    margin-bottom:40px;

}

.section-title h2{

    font-size:34px;

}

.section-title p{

    font-size:16px;

    line-height:28px;

}

.section-badge{

    font-size:13px;

    padding:8px 16px;

}

}


/* =========================
      Result Card
========================= */

@media(max-width:576px){

.result-grid{

    grid-template-columns:1fr;

}

.result-card{

    padding:18px;

}

.result-box{

    padding:14px;

}

.result-box strong{

    font-size:17px;

}

.download-btn{

    font-size:16px;

}

}

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

@media(max-width:768px){

.faq{

    width:92%;

    margin:60px auto;

}

.faq-container{

    margin-top:40px;

}

.faq-question{

    padding:20px;

    font-size:17px;

    text-align:left;

}

.faq-question span{

    font-size:24px;

}

.faq-answer p{

    padding:0 20px 20px;

    font-size:15px;

    line-height:26px;

}

}

/* =========================
      Footer
========================= */

@media(max-width:992px){

.footer-top{

    flex-direction:column;

    gap:45px;

}

.footer-links{

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

}

}

@media(max-width:768px){

.footer{

    padding:50px 0 20px;

}

.footer-links{

    grid-template-columns:1fr;

    gap:30px;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.footer-bottom-links{

    justify-content:center;

    flex-wrap:wrap;

}

}

/* =========================
      Global Fix
========================= */

img{

    max-width:100%;

}

@media(max-width:768px){

body{

    overflow-x:hidden;

}

.container{

    width:92%;

}

}



/* =========================
      Mobile Navbar
========================= */

.overlay{

    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);

    opacity:0;
    visibility:hidden;

    transition:.3s;

    z-index:999;

}

.overlay.active{

    opacity:1;
    visibility:visible;

}

.mobile-menu{

    position:fixed;

    top:0;
    right:-320px;

    width:300px;
    height:100vh;

    background:#111C33;

    padding:90px 25px 30px;

    overflow-y:auto;

    transition:.35s;

    z-index:1000;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu a{

    display:block;

    color:#fff;

    text-decoration:none;

    padding:15px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.mobile-btn{

    display:block;

    margin-top:25px;

    text-align:center;

    padding:15px;

    border-radius:12px;

    background:#2563EB !important;

    color:#fff !important;

}

.mobile-tools-btn{

    width:100%;

    background:none;

    border:none;

    color:#fff;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    font-size:16px;

    cursor:pointer;

    font-family:'Poppins',sans-serif;

}

.mobile-tools-menu{

    display:none;

    padding-left:15px;

}

.mobile-tools.active .mobile-tools-menu{

    display:block;

}

body.menu-open{

    overflow:hidden;

}

@media(max-width:992px){

.nav-links,
.nav-btn{

    display:none;

}

.menu-toggle{

    display:block;

}

}

@media(min-width:993px){

.mobile-menu,
.overlay{

    display:none;

}

}