:root {
    --orange-soft: #f7a24b;
    --orange-strong: #f07a1f;
    --orange-deep: #d85a12;
    --cream: #fff4e6;
    --text-dark: #2f1c0e;
    --panel: #fffaf4;
}

* {
    box-sizing: border-box;
    
}

body {
    font-family: "Sora", "Trebuchet MS", sans-serif;
    background: radial-gradient(circle at top left, #fff2e4 0%, #fff7ef 40%, #fffdf9 100%);
    color: var(--text-dark);
    min-height: 100vh;
}

.conversions {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 80px;
    display: grid;
    gap: 28px;
}

.conversions-hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.conversions-hero h1 {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin-bottom: 12px;
}

.conversions-hero p {
    line-height: 1.6;
}

.conversions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.conversion-card {
    display: block;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #ffe0c2;
    padding: 20px;
    box-shadow: 0 14px 26px rgba(240, 122, 31, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.conversion-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 2rem;
}

.conversion-icons i:nth-child(2) {
    color: var(--orange-soft);
    font-size: 1.2rem;
}

.fa-file-word {
    color: #2b579a;
}

.fa-file-pdf {
    color: #e74c3c;
}

.fa-file-powerpoint {
    color: #f07a1f;
}

.fa-file-excel {
    color: #217346;
}

.fa-file-csv {
    color: #2b579a;
}

.fa-file-image {
    color: #27ae60;
}

.fa-file-lines {
    color: #7f8c8d;
}

.fa-file-zipper {
    color: #8e44ad;
}

.fa-code {
    color: #e67e22;
}

.conversion-card h3 {
    margin-bottom: 8px;
    font-size: 1.05rem;
    text-align: center;
}

.conversion-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    opacity: 0.9;
    text-align: center;
}

.conversion-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px rgba(240, 122, 31, 0.18);
}

@media (max-width: 720px) {
    .conversions {
        padding: 32px 16px 60px;
    }
}