@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700;800&display=swap");
@import url("https://necolas.github.io/normalize.css/8.0.1/normalize.css");

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:"DM Sans",sans-serif;

    color:#284a67;

    background:linear-gradient(-45deg,
    #edf8ff,
    #d8efff,
    #c7e8ff,
    #b7ddff);

    background-size:400% 400%;

    animation:gradientMove 12s ease infinite;

}

@keyframes gradientMove{

0%{
background-position:0% 50%;
}

50%{
background-position:100% 50%;
}

100%{
background-position:0% 50%;
}

}

img{

max-width:100%;

display:block;

}

a{

text-decoration:none;

}

header {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #ffffff;
}

header h1 {
    font-size: 32px;
    color: #3399ff;
}

.logo{

display:flex;

align-items:center;

gap:10px;

}

.logo i{

font-size:28px;

color:#53b7ff;

}

.logo h1{

font-size:28px;

color:#3399ff;

font-weight:700;

}

nav {
    margin-top: 10px;
}

nav a {
    text-decoration: none;
    margin: 0 15px;
    color: #3399ff;
    font-weight: 500;
    transition: 0.3s;
}

nav a:hover {
    color: #0066cc;
}

.hero{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

padding:80px 8%;

min-height:80vh;

}

.hero h2{

font-size:54px;

color:#3da7ff;

margin-bottom:20px;

}

.hero p{

font-size:18px;

line-height:1.8;

margin-bottom:35px;

color:#4d6176;

}

.hero-image{

animation:float 4s ease-in-out infinite;

}

.btn{

display:inline-block;

padding:15px 35px;

border-radius:40px;

background:#47a9ff;

color:white;

font-weight:600;

transition:.35s;

box-shadow:0 15px 30px rgba(60,170,255,.25);

}

.btn:hover{

transform:translateY(-5px);

background:#1686ee;

}

.features{

padding:80px 8%;

display:grid;

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

gap:30px;

}

.card{

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

padding:35px;

border-radius:25px;

text-align:center;

backdrop-filter:blur(20px);

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

transition:.35s;

}

.card:hover{

transform:translateY(-12px);

}

.card i{

font-size:50px;

color:#47a9ff;

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

font-size:24px;

color:#3399ff;

}

.card p{

line-height:1.7;

}

.about{

padding:90px 10%;

text-align:center;

}

.about h2{

font-size:42px;

margin-bottom:25px;

color:#3399ff;

}

.about p{

max-width:900px;

margin:auto;

font-size:18px;

line-height:1.9;

}

.software{

padding:80px 8%;

}

.software h2{

text-align:center;

font-size:42px;

margin-bottom:45px;

color:#3399ff;

}

.software-grid{

display:grid;

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

gap:30px;

}

.software-card{

background:white;

border-radius:25px;

padding:30px;

text-align:center;

transition:.3s;

box-shadow:0 15px 25px rgba(0,0,0,.08);

}

.software-card:hover{

transform:scale(1.05);

}

.software-card img{

height:100px;

object-fit:contain;

margin:auto;

margin-bottom:18px;

}

.software-card h3{

color:#3399ff;

}

.stats{

padding:70px 8%;

display:grid;

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

gap:30px;

}

.stat{

background:white;

padding:40px;

border-radius:25px;

text-align:center;

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

}

.stat h2{

font-size:48px;

color:#44a9ff;

}

.stat p{

margin-top:10px;

font-size:18px;

}

.contact{

padding:90px 8%;

text-align:center;

}

.contact h2{

font-size:44px;

margin-bottom:20px;

color:#3399ff;

}

.contact p{

font-size:18px;

margin-bottom:35px;

}

footer{

margin-top:60px;

padding:35px;

text-align:center;

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

backdrop-filter:blur(15px);

}

footer h3{

color:#3399ff;

margin-bottom:12px;

}

footer p{

margin-top:10px;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

/* ---------- Topaz Before/After ---------- */

.compare{

width:90%;

max-width:500px;

margin:80px auto;

position:relative;

overflow:hidden;

border-radius:25px;

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

}

.compare img{

display:block;

width:100%;

}

.after{

position:absolute;

top:0;

left:0;

width:50%;

overflow:hidden;

}

.slider{

position:absolute;

top:0;

left:50%;

width:4px;

height:100%;

background:white;

cursor:ew-resize;

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

}

.slider::before{

content:"↔";

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:42px;

height:42px;

background:#47a9ff;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-weight:bold;

}

/* ---------- Gallery ---------- */

.gallery{

padding:80px 8%;

display:grid;

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

gap:25px;

}

.gallery img{

border-radius:20px;

transition:.3s;

box-shadow:0 10px 25px rgba(0,0,0,.1);

}

.gallery img:hover{

transform:scale(1.04);

}

/* ---------- Upload Method ---------- */

.timeline{

width:90%;

max-width:900px;

margin:70px auto;

display:flex;

flex-direction:column;

gap:25px;

}

.step{

background:white;

padding:25px;

border-left:6px solid #52b5ff;

border-radius:15px;

box-shadow:0 8px 20px rgba(0,0,0,.08);

}

.step h3{

margin-bottom:10px;

color:#3399ff;

}

/* ---------- Responsive ---------- */

@media(max-width:900px){

header{

flex-direction:column;

gap:15px;

}

nav{

flex-wrap:wrap;

justify-content:center;

}

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero h2{

font-size:42px;

}

.hero-image{

order:-1;

}

}
.download-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 32px;

background:linear-gradient(135deg,#5eb8ff,#2f8cff);

color:#fff;

font-size:18px;

font-weight:700;

border-radius:50px;

text-decoration:none;

box-shadow:0 12px 25px rgba(0,119,255,.25);

transition:.3s ease;

}

.download-btn:hover{

transform:translateY(-5px) scale(1.03);

box-shadow:0 18px 35px rgba(0,119,255,.35);

background:linear-gradient(135deg,#2f8cff,#006dff);

}

.download-btn:active{

transform:scale(.96);

}
.language-selector{

margin-left:20px;

}

.language-selector select{

padding:10px 18px;

border:none;

border-radius:30px;

background:white;

color:#3399ff;

font-weight:600;

cursor:pointer;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

}

.lang-buttons{

display:flex;

gap:10px;

}

.lang-buttons button{

background:#fff;

border:none;

padding:10px 18px;

border-radius:25px;

cursor:pointer;

font-weight:bold;

transition:.3s;

box-shadow:0 5px 15px rgba(0,0,0,.08);

}

.lang-buttons button:hover{

background:#3399ff;

color:white;

}

.img-before{

border-radius:20px;

transition:.3s;

box-shadow:0 10px 25px rgba(0,0,0,.1);

width: 540px;

height:540px;

object-fit:contain;

margin:auto;

margin-bottom:18px;

}

.img-after{

border-radius:20px;

transition:.3s;

box-shadow:0 10px 25px rgba(0,0,0,.1);

width: 540px;

height:540px;

object-fit:contain;

margin:auto;

margin-bottom:18px;

}

.video-section {
    text-align: center;
    padding: 60px 20px;
}

.video-section h2 {
    margin-bottom: 20px;
    color: #3399ff;
}

video {
    width: 35%;
    max-width: 800px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.converter-card {
    max-width: 650px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.dropzone {
    border: 2px dashed #a3d5ff;
    padding: 30px;
    border-radius: 20px;
    margin: 20px 0;
    background: rgba(255, 255, 255, 0.4);
}

.file-name-display {
    margin-top: 12px;
    font-weight: 600;
    color: #284a67;
}

.converter-options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.converter-options label {
    font-weight: 600;
    color: #3399ff;
}

.converter-options select {
    padding: 8px 16px;
    border: 1px solid #c7e8ff;
    border-radius: 20px;
    background: #fff;
    color: #284a67;
    font-weight: 500;
    outline: none;
}

.status-box {
    margin-top: 25px;
}

.status-box p {
    font-weight: 600;
    margin-bottom: 8px;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: #e0f2ff;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 auto;
}

.progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #5eb8ff, #2f8cff);
    transition: width 0.3s ease;
}