swiper-container {
    width: 100%;
}

swiper-container::part(container) {
  overflow: visible;
}

.academy-account-courses-section {
    display: flex;
    
    padding-top: var(--spacing-9xl, 96px);
    padding-bottom: var(--spacing-9xl, 96px);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-7xl, 64px);
    align-self: stretch;
}

.academy-account-title-container {
    display: flex;
    width: 100%;
    
    padding: 0 var(--container-padding-desktop, 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4xl, 32px);
    
}

.academy-account-title-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: var(--spacing-4xl, 32px);
    align-self: stretch;
    flex-wrap: wrap;
}

.academy-account-heading-and-text {
    display: flex;
    
    
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xl, 20px);
    flex: 1 0 0;
}

.academy-account-heading {
    align-self: stretch;

    color: var(--colors-text-text-primary-900, #181D27);

    
    font-family: var(--Font-family-font-family-display, "SST Pro");
    font-size: var(--Font-size-display-md, 36px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-display-md, 44px); 
    letter-spacing: -0.72px;
}

.academy-account-supporting-text {
    align-self: stretch;

    color: var(--colors-text-text-tertiary-600, #535862);

    
    font-family: var(--Font-family-font-family-body, "SST Pro");
    font-size: var(--Font-size-text-xl, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-xl, 30px); 
}

.academy-account-actions {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-lg, 12px);
}

.academy-account-tabs-container {
    
    width: 100%;
    
    padding: 0 var(--container-padding-desktop, 32px);
    
    
    
    
}

.academy-account-tabs-container .academy_catalog-list .btn {
    padding: 9px 12px;
}

.academy-account-courses-container {
    display: flex;
    width: 100%;
    
    padding: 0 var(--container-padding-desktop, 32px);
    flex-direction: column;
    
    gap: var(--spacing-7xl, 64px);
    
}

.academy-account-courses-buttons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

.academy-account-badges-section-container {
    background: var(--Colors-Background-bg-secondary, #FAFAFA);
}

.academy-account-badges-section {
    display: flex;
    
    padding-top: var(--spacing-9xl, 96px);
    padding-bottom: var(--spacing-9xl, 96px);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-7xl, 64px);
    align-self: stretch;
}

.academy-account-badges-title-container {
    display: flex;
    width: 100%;
    
    padding: 0 var(--container-padding-desktop, 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-4xl, 32px);
    
}

.academy-account-badges-title-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
    row-gap: var(--spacing-4xl, 32px);
    align-self: stretch;
    flex-wrap: wrap;
}

.academy-account-badges-heading-and-text {
    display: flex;
    
    
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xl, 20px);
    flex: 1 0 0;
}

.academy-account-badges-heading {
    align-self: stretch;

    color: var(--colors-text-text-primary-900, #181D27);

    
    font-family: var(--Font-family-font-family-display, "SST Pro");
    font-size: var(--Font-size-display-md, 36px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-display-md, 44px); 
    letter-spacing: -0.72px;
}

.academy-account-badges-supporting-text {
    align-self: stretch;

    color: var(--colors-text-text-tertiary-600, #535862);

    
    font-family: var(--Font-family-font-family-body, "SST Pro");
    font-size: var(--Font-size-text-xl, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-xl, 30px); 
}

.academy-account-badges-container {
    display: flex;
    width: 100%;
    
    padding: 0 var(--container-padding-desktop, 32px);
    flex-direction: column;
    
    gap: var(--spacing-7xl, 64px);
    
}



.academy-account-badge-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.academy-account-badge-card-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
}

.academy-account-badge-card-counter {
    position: absolute;
    top: 11px;
    right: 7px;

    width: 36px;
    height: 22px;
    border-radius: 4285.286px;
    background: #FFA00F;
    box-shadow: 0 0.857px 1.714px 0 rgba(0, 0, 0, 0.24), 0 1.714px 5.143px 0 rgba(0, 0, 0, 0.16);

    color: rgba(0, 0, 0, 0.24);
    text-align: center;
    font-family: "SST Pro", sans-serif;
    font-size: 13.714px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    text-transform: uppercase;
}

.academy-account-badge-card-text-container {
    display: flex;
    
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.academy-account-badge-card-heading {
    color: var(--colors-text-text-primary-900, #181D27);

    
    font-family: var(--Font-family-font-family-body, "SST Pro");
    font-size: var(--Font-size-text-xl, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 29px;
}

.academy-account-badge-card-supporting-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    align-self: stretch;

    overflow: hidden;
    color: var(--colors-text-text-tertiary-600, #535862);
    text-overflow: ellipsis;

    
    font-family: var(--Font-family-font-family-body, "SST Pro");
    font-size: var(--Font-size-text-md, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Line-height-text-md, 24px); 
}

.academy-account-badges-buttons {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4xl, 32px);
}

.academy-account-badges-buttons .academy-icon-button {
    width: 56px;
    height: 56px;
}

@media (max-width: 768px) {
    .academy-account-courses-section {
        padding: var(--spacing-7xl, 64px) 0;
        gap: var(--spacing-6xl, 48px);
    }

    .academy-account-title-container {
        padding: 0 var(--container-padding-mobile, 16px);
    }

    .academy-account-title-content {
        flex-direction: column;
    }

    .academy-account-heading-and-text {
        gap: var(--spacing-xl, 16px);
    }

    .academy-account-heading {
        font-size: var(--Font-size-display-sm, 30px);
        line-height: var(--Line-height-display-sm, 38px); 
        letter-spacing: initial;
    }

    .academy-account-supporting-text {
        font-size: var(--Font-size-text-lg, 18px);
        line-height: var(--Line-height-text-lg, 28px); 
    }

    .academy-account-tabs-container {
        padding: 0 var(--container-padding-mobile, 16px);
    }

    .academy-account-courses-container {
        padding: 0 var(--container-padding-mobile, 16px);
        gap: var(--spacing-6xl, 48px);
    }

    .academy-account-actions {
        width: 100%;
    }

    .academy-account-actions > * {
        flex-grow: 1;
    }

    .academy-account-badges-section {
        padding: var(--spacing-7xl, 64px) 0;
        gap: var(--spacing-6xl, 48px);
    }

    .academy-account-badges-title-container {
        padding: 0 var(--container-padding-mobile, 16px);
    }

    .academy-account-badges-heading-and-text {
        gap: var(--spacing-xl, 16px);
    }

    .academy-account-badges-heading {
        font-size: var(--Font-size-display-sm, 30px);
        line-height: var(--Line-height-display-sm, 38px); 
        letter-spacing: initial;
    }

    .academy-account-badges-supporting-text {
        font-size: var(--Font-size-text-lg, 18px);
        line-height: var(--Line-height-text-lg, 28px); 
    }

    .academy-account-badges-container {
        padding: 0 var(--container-padding-mobile, 16px);
        gap: var(--spacing-6xl, 48px);
    }

    .academy-account-badge-card-heading {
        font-size: var(--Font-size-text-lg, 18px);
        line-height: var(--Line-height-text-lg, 28px); 
    }

    .academy-account-badges-buttons {
        gap: var(--spacing-xl, 16px);
    }

    .academy-account-badges-buttons .academy-icon-button {
        width: 48px;
        height: 48px;
    }
}