@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

.excel-converter-content {
position: relative;
width: 100%;
overflow-x: clip;
font-family: Arial, Helvetica, sans-serif;
color: #17211b;
background: #ffffff;
}
.excel-converter-content .excel-converter-section {
width: 100%;
overflow: hidden;
}
.excel-converter-content .excel-converter-section-white {
background: #ffffff;
}
.excel-converter-content .excel-converter-section-soft {
background: #f7f8f5;
}
.excel-converter-content .excel-converter-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box;
}
.excel-converter-content .excel-converter-heading {
margin: 0 auto;
max-width: 860px;
text-align: center;
color: #122019;
font-weight: 760;
line-height: 1.15;
letter-spacing: 0;
}
.excel-converter-content .excel-converter-subtitle {
margin: 14px auto 0;
max-width: 780px;
text-align: center;
color: #516057;
line-height: 1.65;
font-weight: 400;
}
.excel-converter-content .excel-converter-box {
position: relative;
box-sizing: border-box;
width: 100%;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfa 100%);
border: 1px solid rgba(30, 74, 52, 0.1);
box-shadow: 0 20px 55px rgba(25, 46, 35, 0.08);
overflow: hidden;
}
.excel-converter-content .excel-converter-box::before {
content: "";
position: absolute;
top: 0;
left: 32px;
right: 32px;
height: 3px;
background: linear-gradient(90deg, rgba(34, 128, 82, 0), rgba(34, 128, 82, 0.45), rgba(34, 128, 82, 0));
}
.excel-converter-content .excel-converter-grid {
display: grid;
width: 100%;
box-sizing: border-box;
}
.excel-converter-content .excel-converter-card,
.excel-converter-content .excel-converter-step {
position: relative;
height: 100%;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(28, 70, 48, 0.11);
box-shadow: 0 12px 28px rgba(23, 44, 31, 0.06);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.excel-converter-content .excel-converter-card:hover,
.excel-converter-content .excel-converter-step:hover {
transform: translateY(-4px);
border-color: rgba(30, 132, 82, 0.22);
box-shadow: 0 18px 38px rgba(23, 44, 31, 0.1);
}
.excel-converter-content .excel-converter-card-title,
.excel-converter-content .excel-converter-step-title {
margin: 0;
color: #16231b;
font-weight: 720;
line-height: 1.25;
}
.excel-converter-content .excel-converter-card-text,
.excel-converter-content .excel-converter-step-text {
margin: 10px 0 0;
color: #54625a;
line-height: 1.65;
}
.excel-converter-content .excel-converter-icon {
position: relative;
display: inline-flex;
width: 48px;
height: 48px;
margin-bottom: 18px;
border-radius: 16px;
background: #eef7f1;
border: 1px solid rgba(30, 128, 82, 0.16);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.excel-converter-content .excel-converter-icon-document::before {
content: "";
position: absolute;
left: 14px;
top: 10px;
width: 18px;
height: 24px;
border: 2px solid #277a50;
border-radius: 3px;
background: linear-gradient(135deg, transparent 0 72%, rgba(39, 122, 80, 0.18) 73%);
}
.excel-converter-content .excel-converter-icon-document::after {
content: "";
position: absolute;
left: 18px;
top: 18px;
width: 14px;
height: 2px;
background: #7bad8e;
box-shadow: 0 6px 0 #7bad8e, 0 12px 0 #7bad8e;
}
.excel-converter-content .excel-converter-icon-grid::before {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 24px;
height: 24px;
border: 2px solid #277a50;
border-radius: 4px;
background-image: linear-gradient(#b7d8c4 1px, transparent 1px), linear-gradient(90deg, #b7d8c4 1px, transparent 1px);
background-size: 8px 8px;
}
.excel-converter-content .excel-converter-icon-filter::before {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 24px;
height: 8px;
border: 2px solid #277a50;
border-bottom: 0;
border-radius: 4px 4px 0 0;
}
.excel-converter-content .excel-converter-icon-filter::after {
content: "";
position: absolute;
left: 20px;
top: 20px;
width: 8px;
height: 14px;
background: #277a50;
clip-path: polygon(0 0, 100% 0, 62% 100%, 38% 100%);
}
.excel-converter-content .excel-converter-icon-calc::before {
content: "";
position: absolute;
left: 13px;
top: 13px;
width: 22px;
height: 22px;
border: 2px solid #277a50;
border-radius: 5px;
}
.excel-converter-content .excel-converter-icon-calc::after {
content: "";
position: absolute;
left: 18px;
top: 18px;
width: 4px;
height: 4px;
background: #277a50;
box-shadow: 8px 0 0 #277a50, 0 8px 0 #277a50, 8px 8px 0 #277a50;
border-radius: 1px;
}
.excel-converter-content .excel-converter-icon-report::before {
content: "";
position: absolute;
left: 13px;
bottom: 12px;
width: 5px;
height: 12px;
background: #277a50;
border-radius: 2px;
box-shadow: 9px -6px 0 #6caf87, 18px -12px 0 #9cc9ad;
}
.excel-converter-content .excel-converter-icon-report::after {
content: "";
position: absolute;
left: 12px;
bottom: 10px;
width: 26px;
height: 2px;
background: #b7d8c4;
}
.excel-converter-content .excel-converter-icon-folder::before {
content: "";
position: absolute;
left: 10px;
top: 16px;
width: 28px;
height: 20px;
border: 2px solid #277a50;
border-radius: 5px;
background: rgba(39, 122, 80, 0.06);
}
.excel-converter-content .excel-converter-icon-folder::after {
content: "";
position: absolute;
left: 12px;
top: 12px;
width: 13px;
height: 7px;
border: 2px solid #277a50;
border-bottom: 0;
border-radius: 4px 4px 0 0;
background: #eef7f1;
}
.excel-converter-content .excel-converter-accent {
display: block;
width: 42px;
height: 3px;
margin-top: 18px;
border-radius: 999px;
background: linear-gradient(90deg, #2c8a5a, rgba(44, 138, 90, 0.18));
}
.excel-converter-content .excel-converter-steps {
display: grid;
grid-template-columns: 1fr;
width: 100%;
box-sizing: border-box;
}
.excel-converter-content .excel-converter-step {
display: grid;
align-items: center;
grid-template-columns: auto 1fr auto;
}
.excel-converter-content .excel-converter-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 999px;
background: #1f7a4d;
color: #ffffff;
font-weight: 760;
box-shadow: 0 8px 18px rgba(31, 122, 77, 0.22);
}
.excel-converter-content .excel-converter-step-copy {
min-width: 0;
}
.excel-converter-content .excel-converter-step-visual {
position: relative;
width: 54px;
height: 32px;
border-radius: 999px;
background: #eef7f1;
border: 1px solid rgba(31, 122, 77, 0.14);
}
.excel-converter-content .excel-converter-step-visual::before {
content: "";
position: absolute;
left: 13px;
top: 14px;
width: 24px;
height: 3px;
border-radius: 99px;
background: #287d51;
}
.excel-converter-content .excel-converter-step-visual::after {
content: "";
position: absolute;
right: 13px;
top: 10px;
width: 9px;
height: 9px;
border-top: 3px solid #287d51;
border-right: 3px solid #287d51;
transform: rotate(45deg);
}
.excel-converter-content .excel-converter-trust-grid {
display: grid;
width: 100%;
box-sizing: border-box;
}
.excel-converter-content.excel-converter-js .excel-converter-reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 520ms ease, transform 520ms ease;
}
.excel-converter-content.excel-converter-js .excel-converter-reveal.excel-converter-visible {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.excel-converter-content .excel-converter-card,
.excel-converter-content .excel-converter-step,
.excel-converter-content.excel-converter-js .excel-converter-reveal {
transition: none;
}
.excel-converter-content .excel-converter-card:hover,
.excel-converter-content .excel-converter-step:hover {
transform: none;
}
.excel-converter-content.excel-converter-js .excel-converter-reveal {
opacity: 1;
transform: none;
}
}
@media (min-width: 320px) and (max-width: 374px) {
.excel-converter-content .excel-converter-section {
padding: 48px 0;
}
.excel-converter-content .excel-converter-container {
padding: 0 14px;
}
.excel-converter-content .excel-converter-heading {
font-size: 26px;
}
.excel-converter-content .excel-converter-subtitle {
font-size: 15px;
}
.excel-converter-content .excel-converter-box {
margin-top: 26px;
padding: 18px;
border-radius: 20px;
}
.excel-converter-content .excel-converter-grid,
.excel-converter-content .excel-converter-trust-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.excel-converter-content .excel-converter-card {
padding: 20px;
border-radius: 16px;
}
.excel-converter-content .excel-converter-card-title,
.excel-converter-content .excel-converter-step-title {
font-size: 17px;
}
.excel-converter-content .excel-converter-card-text,
.excel-converter-content .excel-converter-step-text {
font-size: 14px;
}
.excel-converter-content .excel-converter-steps {
gap: 14px;
}
.excel-converter-content .excel-converter-step {
grid-template-columns: 1fr;
gap: 14px;
padding: 20px;
border-radius: 16px;
}
.excel-converter-content .excel-converter-step-visual {
width: 50px;
height: 30px;
}
}
@media (min-width: 375px) and (max-width: 429px) {
.excel-converter-content .excel-converter-section {
padding: 54px 0;
}
.excel-converter-content .excel-converter-container {
padding: 0 18px;
}
.excel-converter-content .excel-converter-heading {
font-size: 28px;
}
.excel-converter-content .excel-converter-subtitle {
font-size: 15.5px;
}
.excel-converter-content .excel-converter-box {
margin-top: 28px;
padding: 20px;
border-radius: 22px;
}
.excel-converter-content .excel-converter-grid,
.excel-converter-content .excel-converter-trust-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.excel-converter-content .excel-converter-card {
padding: 22px;
border-radius: 17px;
}
.excel-converter-content .excel-converter-card-title,
.excel-converter-content .excel-converter-step-title {
font-size: 18px;
}
.excel-converter-content .excel-converter-card-text,
.excel-converter-content .excel-converter-step-text {
font-size: 14.5px;
}
.excel-converter-content .excel-converter-steps {
gap: 16px;
}
.excel-converter-content .excel-converter-step {
grid-template-columns: 1fr;
gap: 14px;
padding: 22px;
border-radius: 17px;
}
}
@media (min-width: 430px) and (max-width: 767px) {
.excel-converter-content .excel-converter-section {
padding: 60px 0;
}
.excel-converter-content .excel-converter-container {
padding: 0 22px;
}
.excel-converter-content .excel-converter-heading {
font-size: 31px;
}
.excel-converter-content .excel-converter-subtitle {
font-size: 16px;
}
.excel-converter-content .excel-converter-box {
margin-top: 30px;
padding: 24px;
border-radius: 24px;
}
.excel-converter-content .excel-converter-grid,
.excel-converter-content .excel-converter-trust-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.excel-converter-content .excel-converter-card {
padding: 24px;
border-radius: 18px;
}
.excel-converter-content .excel-converter-card-title,
.excel-converter-content .excel-converter-step-title {
font-size: 19px;
}
.excel-converter-content .excel-converter-card-text,
.excel-converter-content .excel-converter-step-text {
font-size: 15px;
}
.excel-converter-content .excel-converter-steps {
gap: 18px;
}
.excel-converter-content .excel-converter-step {
grid-template-columns: auto 1fr;
gap: 16px;
padding: 24px;
border-radius: 18px;
}
.excel-converter-content .excel-converter-step-visual {
grid-column: 2;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.excel-converter-content .excel-converter-section {
padding: 76px 0;
}
.excel-converter-content .excel-converter-container {
padding: 0 32px;
}
.excel-converter-content .excel-converter-heading {
font-size: 38px;
}
.excel-converter-content .excel-converter-subtitle {
font-size: 17px;
}
.excel-converter-content .excel-converter-box {
margin-top: 36px;
padding: 30px;
border-radius: 28px;
}
.excel-converter-content .excel-converter-grid,
.excel-converter-content .excel-converter-trust-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.excel-converter-content .excel-converter-card {
padding: 26px;
border-radius: 20px;
}
.excel-converter-content .excel-converter-card-title,
.excel-converter-content .excel-converter-step-title {
font-size: 20px;
}
.excel-converter-content .excel-converter-card-text,
.excel-converter-content .excel-converter-step-text {
font-size: 15.5px;
}
.excel-converter-content .excel-converter-steps {
gap: 20px;
}
.excel-converter-content .excel-converter-step {
gap: 22px;
padding: 26px;
border-radius: 20px;
}
}
@media (min-width: 1024px) {
.excel-converter-content .excel-converter-section {
padding: 92px 0;
}
.excel-converter-content .excel-converter-container {
padding: 0 40px;
}
.excel-converter-content .excel-converter-heading {
font-size: 44px;
}
.excel-converter-content .excel-converter-subtitle {
font-size: 18px;
}
.excel-converter-content .excel-converter-box {
margin-top: 42px;
padding: 36px;
border-radius: 32px;
}
.excel-converter-content .excel-converter-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.excel-converter-content .excel-converter-trust-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.excel-converter-content .excel-converter-card {
padding: 30px;
border-radius: 22px;
}
.excel-converter-content .excel-converter-card-title,
.excel-converter-content .excel-converter-step-title {
font-size: 21px;
}
.excel-converter-content .excel-converter-card-text,
.excel-converter-content .excel-converter-step-text {
font-size: 16px;
}
.excel-converter-content .excel-converter-steps {
gap: 22px;
}
.excel-converter-content .excel-converter-step {
gap: 24px;
padding: 30px;
border-radius: 22px;
}
}