/* ======================================================
   OmniTools - Global CSS
====================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

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

    background:#0f172a;

    color:#ffffff;

    overflow-x:hidden;

    line-height:1.6;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0b1120;

}

::-webkit-scrollbar-thumb{

    background:#3b82f6;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#2563eb;

}

/* Container */

.container{

    width:90%;

    max-width:1250px;

    margin:auto;

}

/* Links */

a{

    text-decoration:none;

    color:inherit;

}

/* Images */

img{

    max-width:100%;

    display:block;

}

/* Buttons */

button{

    cursor:pointer;

    border:none;

    outline:none;

    transition:.3s;

}

/* Section */

section{

    padding:90px 0;

}

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

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;

    background:rgba(15,23,42,.85);

    backdrop-filter:blur(15px);

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

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:75px;

}

/* Logo */

.logo h2{

    font-size:30px;

    font-weight:700;

    color:#3b82f6;

}

/* Navigation */

nav ul{

    display:flex;

    gap:35px;

    list-style:none;

}

nav ul li a{

    font-size:16px;

    transition:.3s;

}

nav ul li a:hover{

    color:#3b82f6;

}

/* Theme Button */

.theme-btn button{

    width:45px;

    height:45px;

    border-radius:50%;

    background:#3b82f6;

    color:#fff;

    font-size:18px;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:

    radial-gradient(circle at top,#2563eb 0%,transparent 40%),

    #0f172a;

}

.hero-content{

    max-width:850px;

}

.hero h1{

    font-size:60px;

    line-height:1.2;

    margin-bottom:25px;

}

.hero p{

    font-size:20px;

    color:#cbd5e1;

    margin-bottom:35px;

}

.hero-btn{

    display:inline-block;

    padding:16px 40px;

    background:#3b82f6;

    color:#fff;

    border-radius:12px;

    font-weight:600;

    transition:.3s;

}

.hero-btn:hover{

    transform:translateY(-4px);

    background:#2563eb;

}

/* Section Title */

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title h2{

    font-size:42px;

    margin-bottom:15px;

}

.section-title p{

    color:#cbd5e1;

    font-size:18px;

}



/* ======================================================
   Image Compressor Section
====================================================== */

.compressor-section{

    background:#111827;

}

.compressor-card{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    margin-top:40px;

}

/* Upload Box */

.drop-area{

    background:rgba(255,255,255,.05);

    border:2px dashed #3b82f6;

    border-radius:20px;

    padding:60px 30px;

    text-align:center;

    transition:.3s;

}

.drop-area:hover{

    background:rgba(59,130,246,.08);

    transform:translateY(-5px);

}

.upload-icon{

    font-size:70px;

    margin-bottom:20px;

}

.drop-area h3{

    font-size:28px;

    margin-bottom:10px;

}

.drop-area p{

    color:#cbd5e1;

    margin-bottom:15px;

}

.file-support{

    margin-top:20px;

    font-size:14px;

    color:#94a3b8;

}

/* Browse Button */

.browse-btn{

    padding:14px 30px;

    background:#3b82f6;

    color:#fff;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.browse-btn:hover{

    background:#2563eb;

    transform:translateY(-3px);

}

/* ======================================================
   Settings Panel
====================================================== */

.settings{

    background:rgba(255,255,255,.05);

    border-radius:20px;

    padding:35px;

}

.settings h3{

    font-size:28px;

    margin-bottom:25px;

}

.setting-box{

    margin-bottom:25px;

}

.setting-box label{

    display:block;

    margin-bottom:10px;

    font-weight:500;

}

.setting-box input[type="number"]{

    width:100%;

    padding:14px;

    border:none;

    outline:none;

    border-radius:10px;

    background:#1e293b;

    color:#fff;

    font-size:16px;

}

.setting-box input[type="range"]{

    width:100%;

    accent-color:#3b82f6;

}

#qualityValue{

    display:inline-block;

    margin-top:10px;

    color:#60a5fa;

    font-weight:600;

}

/* Compress Button */

.compress-btn{

    width:100%;

    padding:16px;

    background:#22c55e;

    color:#fff;

    border-radius:12px;

    font-size:17px;

    font-weight:600;

    transition:.3s;

}

.compress-btn:hover{

    background:#16a34a;

    transform:translateY(-3px);

}

/* ======================================================
   Result Section
====================================================== */

.result-section{

    background:#0f172a;

}

.result-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

}

.image-box{

    background:rgba(255,255,255,.05);

    border-radius:20px;

    padding:25px;

    text-align:center;

}

.image-box h3{

    margin-bottom:20px;

}

.image-box img{

    width:100%;

    max-height:420px;

    object-fit:contain;

    border-radius:15px;

    background:#1e293b;

}

.image-box p{

    margin-top:20px;

    color:#cbd5e1;

}

/* Download Button */

.download-btn{

    margin-top:20px;

    padding:15px 30px;

    background:#3b82f6;

    color:#fff;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

.download-btn:hover{

    background:#2563eb;

    transform:translateY(-3px);

}



/* ======================================================
   Features Section
====================================================== */

.features{

    background:#111827;

}

.features-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.feature-card{

    background:rgba(255,255,255,.05);

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

    border-radius:20px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#3b82f6;

    box-shadow:0 20px 40px rgba(59,130,246,.25);

}

.feature-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    background:#3b82f6;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:35px;

}

.feature-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.feature-card p{

    color:#cbd5e1;

}

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

.faq{

    background:#0f172a;

}

.faq-item{

    background:rgba(255,255,255,.05);

    border-left:4px solid #3b82f6;

    border-radius:15px;

    padding:25px;

    margin-bottom:20px;

    transition:.3s;

}

.faq-item:hover{

    transform:translateX(8px);

    background:rgba(59,130,246,.08);

}

.faq-item h3{

    margin-bottom:12px;

    font-size:22px;

}

.faq-item p{

    color:#cbd5e1;

    line-height:1.8;

}

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

footer{

    background:#020617;

    padding:70px 0 30px;

}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

}

.footer-grid h2,

.footer-grid h3{

    margin-bottom:20px;

}

.footer-grid p{

    color:#94a3b8;

    line-height:1.8;

}

.footer-grid ul{

    list-style:none;

}

.footer-grid ul li{

    margin-bottom:12px;

}

.footer-grid ul li a{

    color:#cbd5e1;

    transition:.3s;

}

.footer-grid ul li a:hover{

    color:#3b82f6;

    padding-left:8px;

}

.social-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.social-links a{

    color:#cbd5e1;

    transition:.3s;

}

.social-links a:hover{

    color:#3b82f6;

    padding-left:8px;

}

footer hr{

    margin:50px 0 25px;

    border:none;

    height:1px;

    background:rgba(255,255,255,.08);

}

.copyright{

    text-align:center;

    color:#94a3b8;

    font-size:15px;

}

/* ======================================================
   Utility Classes
====================================================== */

.hidden{

    display:none;

}

.text-center{

    text-align:center;

}

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

/* ======================================================
   Hover Effects
====================================================== */

button,
.hero-btn,
.browse-btn,
.compress-btn,
.download-btn{

    transition:all .3s ease;

}

button:hover,
.hero-btn:hover,
.browse-btn:hover,
.compress-btn:hover,
.download-btn:hover{

    box-shadow:0 10px 25px rgba(59,130,246,.35);

}



/* ======================================================
   Loading Spinner
====================================================== */

.loading{

    width:70px;
    height:70px;

    border:6px solid rgba(255,255,255,.15);

    border-top:6px solid #3b82f6;

    border-radius:50%;

    margin:40px auto;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ======================================================
   Progress Bar
====================================================== */

.progress{

    width:100%;

    height:10px;

    background:#1e293b;

    border-radius:50px;

    overflow:hidden;

    margin-top:20px;

}

.progress-bar{

    width:0%;

    height:100%;

    background:linear-gradient(90deg,#3b82f6,#06b6d4);

    transition:.4s;

}

/* ======================================================
   Toast Notification
====================================================== */

.toast{

    position:fixed;

    bottom:30px;

    right:30px;

    background:#1e293b;

    color:#fff;

    padding:18px 25px;

    border-left:5px solid #22c55e;

    border-radius:12px;

    box-shadow:0 15px 40px rgba(0,0,0,.3);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:9999;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

/* ======================================================
   Glass Effect
====================================================== */

.glass{

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(16px);

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

    border-radius:20px;

}

/* ======================================================
   Custom Selection
====================================================== */

::selection{

    background:#3b82f6;

    color:#fff;

}

/* ======================================================
   Focus
====================================================== */

input:focus,
button:focus{

    outline:2px solid #3b82f6;

    outline-offset:3px;

}

/* ======================================================
   Smooth Animation
====================================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* ======================================================
   Card Hover Glow
====================================================== */

.feature-card:hover,
.image-box:hover,
.settings:hover,
.drop-area:hover{

    box-shadow:0 20px 45px rgba(59,130,246,.18);

}

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

footer{

    border-top:1px solid rgba(255,255,255,.06);

}

/* ======================================================
   End of Style.css
====================================================== */



/* ==========================================
   Light Theme
========================================== */

body.light-mode{

    background:#f8fafc;

    color:#111827;

}

body.light-mode header{

    background:rgba(255,255,255,.9);

}

body.light-mode .hero{

    background:#eef4ff;

}

body.light-mode .compressor-section,

body.light-mode .features{

    background:#ffffff;

}

body.light-mode .result-section,

body.light-mode .faq{

    background:#f8fafc;

}

body.light-mode .drop-area,

body.light-mode .settings,

body.light-mode .image-box,

body.light-mode .feature-card,

body.light-mode .faq-item{

    background:#ffffff;

    color:#111827;

    border:1px solid #dbeafe;

}

body.light-mode p{

    color:#475569;

}

body.light-mode footer{

    background:#e2e8f0;

    color:#111827;

}

body.light-mode .footer-grid p,

body.light-mode .copyright{

    color:#475569;

}

/* ==========================================
   Result Details
========================================== */

.result-details{

margin-top:20px;

padding:20px;

background:rgba(255,255,255,.05);

border-radius:12px;

}

.result-details p{

margin:10px 0;

font-size:16px;

color:#cbd5e1;

}

.result-details span{

color:#60a5fa;

font-weight:700;

}

.result-buttons{

display:flex;

gap:15px;

margin-top:20px;

flex-wrap:wrap;

}

.result-buttons button{

flex:1;

min-width:180px;

}



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

.menu-toggle{
    display:none;
}

@media (max-width:768px){

header .container{

    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;

}

.logo{

    flex:1;

}

.menu-toggle{

    display:block;

    background:none;

    border:none;

    color:#fff;

    font-size:30px;

    cursor:pointer;

    margin-right:15px;

}

body.light-mode .menu-toggle{

    color:#111;

}

.theme-btn{

    margin-left:0;

}

#navbar{

    position:absolute;

    top:70px;

    left:0;

    width:100%;

    background:#101827;

    display:none;

    padding:20px 0;

    border-radius:0 0 15px 15px;

}

body.light-mode #navbar{

    background:#fff;

}

#navbar.active{

    display:block;

}

#navbar ul{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

}