.margin_bottom_48{
margin-bottom: 48px;
}

ol {
  list-style-position: outside;
  margin: 0px 0px 0px 24px !important;
}

.Credit_tools .Credit_tools_card_content h4 {
    height: 80px !important;
}
.margin_bottom_24{
    margin-bottom: 24px;
}

    
.cc_credit-card-guide {
    display: flex;
    flex-direction: row-reverse;
}

.cc_content {
    flex: 1;
    padding-right: 131px;
}

.cc_table-of-contents {
    flex: 0 0 330px;
    position: sticky;
    top: 20px;
    height: fit-content;
}

.cc_table-of-contents-container{
    border-radius: var(--radius-sm, 4px);
    background: var(--color-primitive-secondary-secondary-container, #EEF5F7);
    padding: 24px;
}

.cc_table-of-contents h2 {
    color: #2c3e50;
    margin-bottom: 8px;

    color: var(--color-primitive-surface-on-surface, #181611);

    /* label-md */
    font-family: var(--typography-font-label, "DM Sans");
    font-size: var(--typography-font-size-label-md, 20px);
    font-style: normal;
    font-weight: var(--typography-font-weight-label, 500);
    line-height: var(--typography-line-height-label-md, 26px);
    /* 130% */
}

.cc_table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc_table-of-contents li {
    /* margin-bottom: 8px; */
}

.cc_credit-links {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  gap: 20px;
}

.cc_credit-links .cc_credit_link {
color: var(--color-primitive-surface-on-surface, #181611);
font-size: var(--typography-font-size-body-sm, 16px);
font-weight: var(--typography-font-weight-body, 300);
line-height: var(--typography-line-height-body-sm, 24px); /* 150% */
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
margin-right: 24px;

}

.cc_credit-links .cc_credit_link:hover{
    color: var(--color-primitive-surface-on-surface, #181611);
}


.cc_table-of-contents .cc_table-of-contents-list a {
    text-decoration: none;
    display: block;
    /* padding: 8px 12px; */
    border-radius: 6px;
    transition: all 0.3s ease;
    color: var(--color-primitive-primary-primary, #2E839C);

    font-size: var(--typography-font-size-label-sm, 16px);
    font-weight: var(--typography-font-weight-label, 500);
    line-height: var(--typography-line-height-label-sm, 24px);
}

.cc_table-of-contents .cc_table-of-contents-list a:hover {
    font-size: var(--typography-font-size-label-sm, 16px);
    font-weight: var(--typography-font-weight-label, 500);
    line-height: var(--typography-line-height-label-sm, 24px);

}

.cc_table-of-contents .cc_table-of-contents-list a.active {
    font-size: var(--typography-font-size-label-sm, 16px);
    font-weight: var(--typography-font-weight-label, 500);
    line-height: var(--typography-line-height-label-sm, 24px);
}

.cc_section {
    margin-bottom: 40px;
    /* padding: 25px; */
    background-color: white;
    border-radius: 12px;
    scroll-margin-top: 80px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); */
    /* margin-right: 131px; */
}
.cc_content h3 {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-subtitle, 32px);
    font-weight: var(--typography-font-weight-subtitle, 500);
    line-height: var(--typography-line-height-subtitle, 40px);
    /* 125% */
    margin-bottom: 8px;
}

.cc_content p {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-body-sm, 16px);
    font-family: 'DM Sans', sans-serif;
    font-style: normal;
    font-weight: var(--typography-font-weight-body, 300);
    line-height: var(--typography-line-height-body-sm, 24px);
    margin-bottom: 24px;
    /* 150% */
}
.cc_content h4 {
    margin-top: 24px;
    /* margin-bottom: 8px; */
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: #181611;
    margin-bottom: 8px;
}
.cc_section .cc_section-header {
    margin-bottom: 48px;
}

.cc_section-header.mobiles{
    display: none;
}

.cc_section-header.web{
    display: block;
}


.cc_section-title {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-subtitle, 32px);
    font-weight: var(--typography-font-weight-subtitle, 500);
    line-height: var(--typography-line-height-subtitle, 40px);
    /* 125% */
}

.cc_section-title.large-title {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-headline, 48px);
    font-weight: var(--typography-font-weight-headline, 400);
    line-height: var(--typography-line-height-headline, 60px);
    /* 125% */
    margin-bottom: 8px;
}

.cc_section-subtitle {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-body-lg, 24px);
    font-weight: var(--typography-font-weight-body, 300);
    line-height: var(--typography-line-height-body-lg, 34px);
    /* 141.667% */
    /* margin-bottom: 24px; */
}

.cc_section-content {
    display: flex;
    flex-direction: column;
    /* gap: 8px; */
    /* margin-bottom: 48px; */
}

.cc_content p:last-of-type {
    margin-bottom: 0px;
.cc_section-content .cc_section-content-title {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-subtitle, 32px);
    font-weight: var(--typography-font-weight-subtitle, 500);
    line-height: var(--typography-line-height-subtitle, 40px);
    /* 125% */
    margin-bottom: 8px;
}

.cc_section-content .cc_section-content-text {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-body-sm, 16px);
    font-style: normal;
    font-weight: var(--typography-font-weight-body, 300);
    line-height: var(--typography-line-height-body-sm, 24px);
    /* 150% */
}

 .btn-large {
    width: max-content;
    margin-top: 24px;
}

.cc_content_group{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cc_content_inner_group{
    display: flex;
    flex-direction: column;
    gap: 0px;
}


.cc_section ul {
    margin-left: 24px;
    list-style-position: outside;

}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Payment Table Styles */
.cc_payment-table {
    width: 100%;
    border-collapse: collapse;
    margin: 48px 0;
    background-color: var(--color-primitive-surface-surface-container, #F8F7F4);
    border-radius: 8px;
   
}

.cc_payment-table th {
    background: var(--color-primitive-secondary-secondary-container, #EEF5F7);
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-body-xs, 12px);
    font-weight: var(--typography-font-weight-body, 300);
    line-height: var(--typography-line-height-body-xs, 16px);
    padding: 12px;
    height: 64px;
    text-align: left;
    border: 1px solid var(--color-primitive-surface-outline, #181611);
}

.cc_payment-table tr {
    border: 1px solid var(--color-primitive-surface-outline, #181611);
}

.cc_payment-table td {
    width: 99.6px;
    height: 24px;
    padding: 24px;
    border: 1px solid var(--color-primitive-surface-outline, #181611);
    background: var(--color-primitive-secondary-secondary-container, #EEF5F7);
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-body-sm, 16px);
    font-weight: var(--typography-font-weight-body, 300);
    line-height: var(--typography-line-height-body-sm, 24px);
}

.cc_payment-table tr:hover {
    background-color: var(--color-primitive-surface-surface-variant, #E6E4E1);
}




/* Credit Topics Grid */
.credit-topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.topic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: var(--color-primitive-surface-surface-container, #F8F7F4);
    border-radius: 8px;
    text-align: center;
    transition: transform 0.2s ease;
    cursor: pointer;
}

.topic-card:hover {
    transform: translateY(-4px);
}

.topic-card img {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
}

.topic-card span {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-family: var(--typography-font-label, "DM Sans");
    font-size: var(--typography-font-size-label-sm, 16px);
    font-weight: var(--typography-font-weight-label, 500);
}

/* Credit Tools Grid */
.credit-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    background: var(--color-primitive-surface-surface-container, #F8F7F4);
    border-radius: 12px;
    text-align: center;
}

.tool-card img {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
}

.tool-card h3 {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-family: var(--typography-font-label, "DM Sans");
    font-size: var(--typography-font-size-label-md, 20px);
    font-weight: var(--typography-font-weight-label, 500);
    margin-bottom: 8px;
}

.tool-card p {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-family: var(--typography-font-body, "DM Sans");
    font-size: var(--typography-font-size-body-sm, 16px);
    font-weight: var(--typography-font-weight-body, 300);
    margin-bottom: 24px;
}

.tool-card .btn {
    width: 100%;
}


/* Other Credit Topics Section */
.cc_other-topics {
    margin: 64px 0;
}

.cc_other-topics-title {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-family: "DM Sans", sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 48px;
}

.cc_topics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 64px;
}

.cc_topic-card {
    background-color: #F8FAFB;
    border-radius: 8px;
    padding: 48px 24px;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 220px;
    text-decoration: none;
}

.cc_topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.cc_topic-card img {
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
}

.cc_topic-card span {
    color: #2C3E50;
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}

/* Credit Tools Section */
.cc_credit-tools {
    margin: 64px 0;
}

.cc_credit-tools-title {
    color: var(--color-primitive-surface-on-surface, #181611);
    font-family: "DM Sans", sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 48px;
}

.cc_tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cc_tool-card {
    background-color: #F8FAFB;
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cc_tool-card img {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
}

.cc_tool-card h3 {
    color: #2C3E50;
    font-family: "DM Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 8px;
}

.cc_tool-card p {
    color: #536475;
    font-family: "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 24px;
}

.cc_tool-card .btn {
    width: 100%;
    margin-top: auto;
}



/* cc_other_credit_topics_title */

.cc_other_credit_topics {
    padding-top: 20px;
    padding-bottom: 48px;
}

.cc_other_credit_topics .cc_other_credit_topics_title {
    /* margin-bottom: 32px; */
    color: var(--color-primitive-surface-on-surface, #181611);
    font-size: var(--typography-font-size-headline, 48px);
    font-weight: var(--typography-font-weight-headline, 400);
    line-height: var(--typography-line-height-headline, 60px);
    margin-bottom: 32px;
}
.cc_other_credit_topics .cc_other_credit_topics_card{
    padding: var(--spacing-alias-padding-lg, 24px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background: var(--color-primitive-secondary-secondary-container, #EEF5F7);
   margin-bottom: 32px;

}
.cc_other_credit_topics .cc_other_credit_topics_img
{
    width: 80px;    
    margin-bottom: 24px;
    height: 80px;
}


/* Credit_tools */
.Credit_tools{
    padding-top: 24px;
    padding-bottom: 48px;
}
.Credit_tools .Credit_tools_title{
color: var(--color-primitive-surface-on-surface, #181611);
font-size: var(--typography-font-size-headline, 48px);
font-weight: var(--typography-font-weight-headline, 400);
line-height: var(--typography-line-height-headline, 60px); /* 125% */
margin-bottom: 32px;
}

.Credit_tools .Credit_tools_card{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-primitive-secondary-secondary-container, #EEF5F7);
    padding: var(--spacing-alias-padding-xl, 32px);
    margin-bottom: 32px;
    height: 380px;
}
.Credit_tools .Credit_tools_card_img{
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    align-self: self-start;
}

.Credit_tools .Credit_tools_card_content{
    align-self: self-start;
}

.Credit_tools .Credit_tools_card_content h4{
color: var(--color-primitive-surface-on-surface, #181611);
font-size: var(--typography-font-size-subtitle, 32px);
font-weight: var(--typography-font-weight-subtitle, 500);
line-height: var(--typography-line-height-subtitle, 40px); /* 125% */
margin-bottom: 12px;
}

.Credit_tools .Credit_tools_card_content p{
    height: 48px;
    margin-bottom: 24px;
    color: var(--color-primitive-surface-on-surface, #181611);
font-size: var(--typography-font-size-body-sm, 16px);
font-weight: var(--typography-font-weight-body, 300);
line-height: var(--typography-line-height-body-sm, 24px); /* 150% */
}


/* Responsive Styles */
@media (max-width: 1200px) {
    .cc_topics-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cc_tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Mobile Responsive Styles */
@media (max-width: 998px) {
    .cc_credit-card-guide {
        flex-direction: column;
        padding: 0px;
        padding-top: 40px;

    }

    .cc_table-of-contents {
        flex: none;
        width: 100%;
        position: relative;
        top: 0;
        margin-bottom: 2rem;
    }

 

    .cc_section-title {
        font-size: 1.5rem;
    }

    .cc_section-content {
        font-size: 1rem;
    }

    .cc_content {
        padding-right: 0px;
    }
    
    .cc_section-header.web {
        display: none;
    }

    .cc_section-header.mobiles {
        display: block;
        margin-bottom: 24px;
    }

    .cc_section-header.mobiles .cc_section-title.large-title {
        margin-bottom: 8px;
        font-size:32px;
        font-weight:  400;
        line-height:  40px 
    }
    .btn-large {
        width: 100%;
        height: 64px;
    }

    .cc_section-header.mobiles .cc_section-subtitle {
        font-size: 20px;
        line-height: 28px;
        font-weight: 300;
        /* margin-bottom: 24px; */
    }
    /* .cc_credit-links{
        margin-bottom: 32px;
    } */
    .cc_table-of-contents-container{
        padding: 24px 16px;
    }
    .cc_table-of-contents{
       margin-bottom: 24px;
    }
}

/* Responsive table styles */
@media (max-width: 998px) {
    .cc_payment-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Responsive adjustments */
@media (max-width: 998px) {
    .credit-topics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .credit-tools-grid {
        grid-template-columns: 1fr;
    }

    .tool-card {
        padding: 24px;
    }
}

@media (max-width: 998px) {

    .cc_topics-grid,
    .cc_tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cc_topic-card {
        padding: 32px 16px;
        min-height: 180px;
    }

    .cc_tool-card {
        padding: 24px;
    }

    .cc_other-topics-title,
    .cc_credit-tools-title {
        font-size: 28px;
        margin-bottom: 32px;
    }
}

@media (max-width: 998px) {
    .cc_content{
        padding-right: 0px;
    }
    
    .cc_section-header.web{
        display: none;
    }
   
}


@media (max-width: 998px) {

    .cc_topics-grid,
    .cc_tools-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cc_topic-card {
        min-height: 160px;
    }
}



@media (max-width: 998px) {

    .cc_table-of-contents h2{
        font-size: 18px;
        line-height: 26px;
        font-weight: 500;
    }
    .cc_table-of-contents ul{
        gab:4px;
    }
    .margin_bottom_48 {
        margin-bottom: 24px;
    }

    .cc_content_group{
        gap: 16px;
    }

    .cc_section-content .cc_section-content-title{
        font-size: 24px;
        line-height: 30px;
        font-weight: 500;
    }

    .cc_other_credit_topics{
        margin-top: 16px;
        padding-top: 40px;
        padding-bottom: 60px
    }

    .cc_other_credit_topics .cc_other_credit_topics_title{
        font-size: 32px;
        font-weight: 400;
        line-height: 40px;
        /* text-align: center; */
        margin-bottom: 32px;
    }
    .cc_other_credit_topics .cc_other_credit_topics_img{
        margin-bottom: 0px;
    }
    .cc_other_credit_topics .cc_other_credit_topics_title h4    {
        font-size: 24px;
        line-height: 30px;
        font-weight: 500;
        width: 123.5px
    }
    .cc_other_credit_topics .cc_other_credit_topics_card{
        padding: 16px;
    }
    .cc_other_credit_topics .cc_other_credit_topics_card{
        margin-bottom: 16px;
    }

    .cc_other_credit_topics [class^="col-"]{
        padding: 0 8px;
    }


    .Credit_tools .Credit_tools_title{
        font-size: 32px;
        font-weight: 400;
        line-height: 40px;
        /* text-align: center; */
        margin-bottom: 32px;
    }
    .Credit_tools{
        padding-top: 40px;  
        padding-bottom: 0PX; 
    }
    .Credit_tools .Credit_tools_card{
        padding: 16px;
    }
    .Credit_tools .Credit_tools_card_content{
        width: 100%;
    }
    .btn.style-outline-state .text-wrapper{
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
    }
    .btn-large .text-wrapper{
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
    }
    .Credit_tools .Credit_tools_card_content h4{
        font-size: 24px;
        line-height: 30px;
        font-weight: 500;
    }
    .Credit_tools .Credit_tools_card_content p{
        font-size: 16px;
        line-height: 24px;
        font-weight: 300;
    }
    .cc_payment-table{
        margin-top: 24px;
        margin-bottom: 24px;
    }   
}