/* Topic Breadcrumb */
.topic-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-narrow-l);
    margin-bottom: var(--spacing-standard-l);
}

.topic-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.topic-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.topic-title {
    font-family: var(--font-manrope);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title-large);
    color: var(--color-primary-full);
    line-height: var(--line-height-tight);
    text-align: center;
}

/* Article Navigation */
.article-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-standard-m);
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-wide-l);
    overflow: visible;
    box-sizing: border-box;
}

.nav-arrow {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    outline: none;
    overflow: visible;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    width: 96px;
    height: 89px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-arrow:hover {
    transform: translateY(-2px);
}

.nav-arrow img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    transition: opacity 0.3s ease;
}

.nav-arrow .default-icon {
    opacity: 1;
}

.nav-arrow .hover-icon {
    position: absolute;
    opacity: 0;
}

.nav-arrow:hover .default-icon {
    opacity: 0;
}

.nav-arrow:hover .hover-icon {
    opacity: 1;
}

.article-title {
    font-family: var(--font-manrope);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-title-xl);
    color: var(--color-primary-full);
    line-height: var(--line-height-normal);
    text-align: center;
    margin: 0;
    flex: 1;
}

/* Article Content */
.article-content {
    background: var(--color-white);
    border-radius: var(--radius-standard);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-narrow-l);
    margin-bottom: var(--spacing-standard-l);
}

.article-text {
    font-family: var(--font-inter);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-content);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

.article-text p {
    margin-bottom: var(--spacing-narrow-m);
}

.article-text p:last-child {
    margin-bottom: 0;
}

.article-text a {
    color: var(--color-black);
    text-decoration: underline;
}

.article-text a:hover {
    color: var(--color-primary-full);
}

/* Contact Section - Same as support.html */
.contact-section {
    margin-bottom: var(--spacing-wide-m);
}

.contact-intro {
    margin-bottom: var(--spacing-narrow-l);
}

.contact-intro-title {
    font-family: var(--font-manrope);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-title-large);
    color: var(--color-primary-full);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-narrow-m);
}

.contact-intro-subtitle {
    font-family: var(--font-inter);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-content);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

.contact-form-container {
    background: var(--color-white);
    border-radius: var(--radius-standard);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-narrow-l);
}

.form-row {
    display: flex;
    gap: var(--spacing-narrow-l);
    margin-bottom: var(--spacing-narrow-l);
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-narrow-m);
}

.form-group.full-width {
    flex: none;
    width: 100%;
}

.form-label {
    font-family: var(--font-inter);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-content);
    color: var(--color-black);
    line-height: var(--line-height-normal);
}

.form-input {
    background: var(--color-white);
    border: none;
    border-radius: var(--radius-standard);
    padding: var(--spacing-narrow-m);
    font-family: var(--font-inter);
    font-size: var(--font-size-content);
    color: var(--color-black);
    box-shadow: var(--shadow-inner);
    outline: none;
    transition: box-shadow 0.2s ease;
}

.form-input::placeholder {
    color: var(--color-gray);
}

.form-input:focus {
    box-shadow: var(--shadow-inner), 0 0 0 2px var(--color-primary-light);
}

.form-textarea {
    min-height: 96px;
    resize: vertical;
}

.submit-button {
    background: var(--color-disabled-gradient);
    color: var(--color-white);
    border: none;
    border-radius: 50px;
    padding: var(--spacing-narrow-s) var(--spacing-standard-m);
    font-family: var(--font-manrope);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-content);
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: var(--spacing-narrow-l);
    box-shadow: none;
}

.submit-button:hover {
    background: var(--color-primary-gradient);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}




/* Laptop (1025px - 1440px) */
@media (max-width: 1440px) and (min-width: 1025px) {

    .article-navigation {
        padding: 0 var(--spacing-wide-m);
    }
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .article-navigation {
        padding: 0 var(--spacing-standard-m);
    }

    .article-title {
        font-size: 28px;
    }

    .nav-arrow img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }

    .topic-breadcrumb {
        margin-bottom: var(--spacing-narrow-l);
    }

    .form-row {
        flex-direction: column;
        gap: var(--spacing-narrow-l);
    }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    .article-navigation {
        padding: 0 var(--spacing-narrow-l);
    }

    .article-title {
        font-size: 24px;
    }

    .nav-arrow img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }

    .topic-breadcrumb {
        margin-bottom: var(--spacing-narrow-m);
    }

    .form-row {
        flex-direction: column;
        gap: var(--spacing-narrow-l);
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {


    .article-title {
        font-size: 20px;
    }

    .article-navigation {
        padding: 0 var(--spacing-narrow-m);
    }
}

.article-text h2{margin-bottom: 30px}
.article-text h3{margin-bottom: 20px;margin-top: 20px}
.article-text *:first-child{margin-top: 0}
hr{margin-bottom: 20px}







/* Contact Section */
.contact-section { padding: var(--spacing-narrow-l) 0; }
.contact-header { display: flex; align-items: center; gap: var(--spacing-narrow-l); margin-bottom: var(--spacing-narrow-l); }
.contact-icon { width: 64px; height: 64px; flex-shrink: 0; }
.contact-icon img { width: 100%; height: 100%; object-fit: contain; }
.contact-title { font-family: var(--font-manrope); font-weight: var(--font-weight-bold); font-size: var(--font-size-title-xl); color: var(--color-primary-full); margin-bottom: var(--spacing-narrow-s); }
.contact-header-text p { font-family: var(--font-manrope); font-weight: var(--font-weight-semibold); font-size: var(--font-size-title-large); color: var(--color-primary-full); }

/* Form-only layout */
.contact-form-section {display: flex;flex-direction: column;flex: 2; }
.form-intro { font-family: var(--font-manrope); font-weight: var(--font-weight-semibold); font-size: var(--font-size-title-large); color: var(--color-primary-full); margin-bottom: var(--spacing-narrow-l); }
.contact-form-container { background: var(--color-white); border-radius: var(--radius-standard); box-shadow: var(--shadow-card); padding: var(--spacing-narrow-l); }
.form-row { display: flex; gap: var(--spacing-narrow-l); margin-bottom: var(--spacing-narrow-l); }
.form-group { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-narrow-m); }
.form-group.full-width { flex: none; width: 100%; }
.form-label { font-family: var(--font-inter); font-weight: var(--font-weight-regular); font-size: var(--font-size-content); color: var(--color-black); }
.form-input { background: var(--color-white); border: none; border-radius: var(--radius-standard); padding: var(--spacing-narrow-m); font-family: var(--font-inter); font-size: var(--font-size-content); color: var(--color-black); box-shadow: var(--shadow-inner); outline: none; transition: box-shadow 0.2s ease; }
.form-input::placeholder { color: var(--color-gray); }
.form-input:focus { box-shadow: var(--shadow-inner), 0 0 0 2px var(--color-primary-light); }
.form-textarea { min-height: 96px; resize: vertical; }
.submit-button { background: var(--color-primary-gradient); color: var(--color-white); border: none; border-radius: 50px; padding: var(--spacing-narrow-s) var(--spacing-standard-m); font-family: var(--font-manrope); font-weight: var(--font-weight-semibold); font-size: var(--font-size-content); cursor: pointer; transition: all 0.3s ease; align-self: flex-start; margin-top: var(--spacing-narrow-l); box-shadow: none; }
.submit-button:hover { background: var(--color-primary-gradient); transform: translateY(-1px); box-shadow: var(--shadow-card); }

@media (max-width: 768px) {
    .contact-section { padding: var(--spacing-standard-m) 0; }
    .contact-header { flex-direction: column; text-align: center; gap: var(--spacing-narrow-m); margin-bottom: var(--spacing-narrow-l); }
    .contact-icon { width: 48px; height: 48px; }
}




/* Contact Us Section */
.contact-section {padding: var(--spacing-narrow-l) 0;}
.contact-header-text {flex: 1;}
.contact-content {display: flex;gap: var(--spacing-standard-l);margin-top: var(--spacing-standard-l);align-items: flex-start;}
.contact-info-section {display: flex;flex-direction: column;flex: 1;}
.info-intro {font-family: var(--font-manrope);font-weight: var(--font-weight-semibold);font-size: var(--font-size-title-large);color: var(--color-primary-full);line-height: var(--line-height-tight);margin-bottom: var(--spacing-narrow-l);}
.contact-info {background: var(--color-white);border-radius: var(--radius-standard);box-shadow: var(--shadow-card);padding: var(--spacing-narrow-l);}
.info-item {margin-bottom: var(--spacing-narrow-l);}
.info-item:last-child {margin-bottom: 0;}
.info-label {font-family: var(--font-manrope);font-weight: var(--font-weight-semibold);font-size: var(--font-size-title-large);color: var(--color-primary-full);line-height: var(--line-height-tight);margin-bottom: var(--spacing-narrow-s);}
.info-value {font-family: var(--font-inter);font-weight: var(--font-weight-regular);font-size: var(--font-size-content);color: var(--color-black);line-height: var(--line-height-normal);}
.info-value a {color: var(--color-black);text-decoration: underline;}
.info-value a:hover {color: var(--color-primary-full);}

@media (max-width: 1024px) and (min-width: 769px) {
    .contact-content {flex-direction: column;gap: var(--spacing-narrow-l);}
}
@media (max-width: 768px) {
    .contact-section {padding: var(--spacing-standard-m) 0;}
    .contact-content {flex-direction: column;gap: var(--spacing-narrow-l);}
}