/* Foramatted version of style.min.css */

@import url('https://fonts.googleapis.com/css2?family=Anta&family=Inter:wght@100..900&family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url("../../assets/css/tailwind-colors.css");
@import url("../../assets/css/rainbow.css");

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-thumb {
    background: var(--violet-600);
    border-radius: .5rem
}

::-webkit-scrollbar-thumb:hover {
    background: var(--violet-300)
}

::selection {
    background-color: #9560ff80;
    color: var(--cyan-50)
}

:root {
    --bg: #0e0e10;
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    --accent-font: "Lexend", serif;
    --logo-font: "Anta", sans-serif;
    --base-font: "Poppins", sans-serif;
    --header-color: var(--neutral-200);
    --para-color: var(--neutral-400)
}

body {
    font-family: var(--base-font);
    color: var(--neutral-50);
    background-color: var(--bg);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    scrollbar-width: thin
}

button {
    font-family: var(--base-font);
    cursor: pointer
}

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

hr {
    max-width: 80rem;
    margin: 1rem auto;
    color: inherit;
    background-color: currentColor;
    border: 0;
    opacity: .25
}

hr:not([size]) {
    height: 1px
}

*[animate="fadeIn"] {
    animation: fadeIn 1s ease
}

@keyframes logo-fill-delay {
    0% {
        fill: var(--yellow-50)
    }

    20% {
        fill: var(--yellow-100)
    }

    60% {
        fill: var(--yellow-200)
    }

    80% {
        fill: var(--yellow-300)
    }

    100% {
        fill: var(--yellow-400)
    }
}

#svg-logo {
    width: 1.75rem;
    margin-right: .5rem;
    overflow: visible
}

#left {
    animation: move-right 2s forwards, logo-fill-delay 500ms forwards
}

#right {
    animation: move-left 2s forwards, logo-fill-delay 1000ms forwards
}

#left rect,
#right rect,
#middle {
    animation: appear 500ms forwards, logo-fill-delay 1500ms forwards;
    opacity: 0
}

#left rect {
    animation-delay: 500ms
}

#right rect {
    animation-delay: 1000ms
}

#middle {
    animation-delay: 1500ms
}

.main-wrapper {
    margin: 0 auto;
    padding: 1rem 1rem 0 1rem
}

section .section-container {
    margin: 0 auto;
    max-width: 50rem
}

section .section-header img {
    display: block;
    margin: auto;
    width: 7rem
}

section .section-header p {
    text-align: center;
    color: var(--neutral-300)
}

article {
    margin: 1rem 0 3rem 0
}

.article-image {
    margin-bottom: 1rem
}

.article-image img {
    display: block;
    margin: auto;
    border-radius: .5rem;
    max-width: 50%
}

.article-image p {
    margin: auto;
    max-width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center
}

.article-image p a {
    color: var(--neutral-400);
    font-size: var(--text-sm);
    text-decoration: none
}

.article-image a:hover {
    text-decoration: underline;
    color: var(--violet-600)
}

.article-image a:visited {
    color: var(--violet-600)
}

.breadcrumbs-container {
    display: flex;
    align-items: center
}

.breadcrumbs-content {
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: .5rem;
    border-radius: .5rem;
    background-color: none;
    overflow-x: auto
}

.breadcrumbs-content {
    scrollbar-width: thin
}

.breadcrumbs-content a,
.breadcrumbs-content span {
    font-family: var(--accent-font);
    font-size: var(--text-sm);
    color: var(--neutral-200);
    font-weight: 300;
    text-wrap: nowrap;
    text-decoration: none;
    text-transform: capitalize
}

.breadcrumbs-content a:hover {
    text-decoration: underline
}

.breadcrumbs-content svg {
    width: 1rem;
    min-width: 1rem
}

.breadcrumbs-content span {
    min-width: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.lesson-card {
    background-color: hsl(0, 0%, 8%);
    padding: 1rem;
    margin: 1rem 0;
    border-style: solid;
    border-radius: .5rem;
    border-width: 0 0 0 .5rem
}

.lesson-card[card-type="tips"] {
    border-left-color: var(--blue-500)
}

.lesson-card[card-type="warning"] {
    border-left-color: var(--orange-500)
}

.lesson-card[card-type="note"] {
    border-left-color: var(--yellow-500)
}

.card-h {
    font-size: var(--text-xl);
    color: var(--neutral-50);
    margin-bottom: 1rem;
    line-height: 1.5;
    font-weight: 600
}

.card-h::before {
    font-size: var(--text-xs);
    font-weight: 400
}

.lesson-card[card-type="note"] .card-h::before {
    content: "\f249";
    font-weight: 700;
    margin-right: .5rem;
    color: var(--yellow-500);
    font-size: var(--text-base);
    font-family: Font Awesome\ 6 Free
}

.lesson-card[card-type="warning"] .card-h::before {
    content: "\f071";
    font-weight: 700;
    margin-right: .5rem;
    color: var(--orange-500);
    font-size: var(--text-base);
    font-family: Font Awesome\ 6 Free
}

.lesson-card[card-type="tips"] .card-h::before {
    content: "\f0eb";
    font-weight: 700;
    margin-right: .5rem;
    color: var(--blue-500);
    font-size: var(--text-base);
    font-family: Font Awesome\ 6 Free
}

.header-title {
    font-family: var(--accent-font);
    font-weight: 600;
    font-size: var(--text-4xl);
    text-align: center;
    color: transparent;
    background: linear-gradient(to bottom, var(--neutral-50), var(--violet-400));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.subheader {
    font-family: var(--accent-font);
    font-size: var(--text-3xl);
    text-align: center;
    padding: 0 1rem;
    color: var(--header-color)
}

.article-header {
    color: var(--header-color);
    font-family: var(--accent-font);
    font-size: var(--text-xl);
    font-weight: 600
}

.paragraph {
    font-size: var(--text-base);
    color: var(--para-color);
    margin-bottom: 1rem;
    line-height: 1.75
}

.paragraph img {
    float: left;
    padding: .75rem;
    max-width: 100px
}

.pri-hl {
    font-family: monospace;
    padding: .25rem;
    border-radius: .375rem;
    color: var(--rose-400);
    font-size: var(--text-base);
    background-color: hsl(0, 0%, 8%)
}

.sec-hl {
    font-weight: 500;
    color: var(--neutral-300)
}

details {
    margin-bottom: 1rem
}

details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-base)
}

details .unordered-list,
details .ordered-list {
    padding-left: 2rem
}

.unordered-list,
.ordered-list {
    padding-left: 1rem;
    font-size: var(--text-base);
    margin-bottom: 1.25rem
}

.unordered-list li,
.ordered-list li {
    color: var(--para-color);
    margin-bottom: .5rem;
    line-height: 1.75
}

.pri-link {
    line-height: 1;
    color: var(--blue-500);
    font-size: var(--text-base);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px
}

.pri-link:visited {
    color: var(--violet-500)
}

.pri-link:hover,
.pri-link:focus {
    color: var(--indigo-400);
    outline: none;
    text-decoration: underline;
    text-decoration-thickness: 1.5px
}

.pri-link:active {
    color: var(--red-500);
    outline: none
}

.pri-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    color: var(--violet-50);
    font-size: var(--text-sm);
    font-weight: 400;
    text-decoration: none;
    background: var(--violet-600);
    padding: .75rem 1rem;
    border-radius: .5rem;
    transition: all .2s cubic-bezier(0, 0, .2, 1)
}

.pri-btn:hover {
    transform: scale(1.015);
    background: var(--violet-700)
}

.pri-btn:focus {
    outline-offset: 2px;
    outline: var(--violet-700) solid 1px;
    background: var(--violet-800)
}

.pri-btn:active {
    background: var(--violet-900);
    outline: none;
    transform: scale(.99)
}

.sec-btn {
    user-select: none;
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
    color: var(--gray-200);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    padding: .75rem 1rem;
    border-radius: .5rem;
    border: 1px solid var(--gray-600);
    background-color: none;
    transition: all .2s cubic-bezier(0, 0, .2, 1)
}

.sec-btn:hover {
    background-color: none;
    border: 1px solid var(--gray-400);
    transform: scale(1.015)
}

.sec-btn:active {
    background-color: none;
    border: 1px solid var(--gray-400);
    outline: none;
    outline-offset: none;
    transform: scale(.99)
}

.burger:hover,
.md-nav-menu .close-nav:active,
.md-nav-menu .close-nav:hover {
    background-color: var(--neutral-800)
}

.nav-wrapper {
    position: sticky;
    top: .5pt;
    display: flex;
    justify-content: center;
    z-index: 100
}

.nav-container,
nav {
    align-items: center;
    width: 100%;
    display: flex
}

nav {
    background-color: rgba(56, 56, 56, .2);
    border: 1px solid var(--violet-950);
    min-height: 4rem;
    margin: 1rem;
    border-radius: .5rem;
    max-width: 80rem;
    backdrop-filter: blur(4px)
}

.nav-container {
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 auto;
    padding: 1rem
}

.logo-container {
    color: var(--neutral-50);
    display: flex;
    align-items: center;
    text-decoration: none
}

.logo-container img {
    height: 32px
}

.logo-name {
    font-family: var(--logo-font);
    color: var(--neutral-50);
    font-size: var(--text-2xl);
    font-weight: 600
}

.nav-button-container {
    display: none
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem
}

.nav-link {
    color: var(--neutral-200);
    font-size: var(--text-base);
    line-height: 1.25rem;
    text-decoration: none
}

.nav-btn,
.nav-link-btn {
    font-size: var(--text-sm);
    text-decoration: none;
    padding: .75rem 1rem
}

.nav-link:hover,
.nav-link:focus {
    color: var(--violet-400)
}

.nav-link:active {
    color: var(--violet-300)
}

.nav-link-btn {
    background-color: var(--gray-900);
    user-select: none;
    display: block;
    font-weight: 500;
    border-radius: 8px;
    color: var(--neutral-100);
    border: 1px solid var(--gray-600)
}

.nav-btn-wrapper {
    min-width: 135px
}

.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-50);
    font-weight: 400;
    background: var(--violet-600);
    border-radius: 8px;
    transition: all .2s ease
}

.nav-btn:hover {
    transform: scale(1.015);
    background: var(--violet-700)
}

.nav-btn:focus {
    outline-offset: 2px;
    outline: var(--violet-700) solid 1px;
    background: var(--violet-800)
}

.nav-btn:active {
    background: var(--violet-900);
    outline: none;
    transform: scale(.99)
}

.sidebar-wrapper {
    display: none;
    left: -21rem;
    transition: left .2s ease-in-out
}

.overlay {
    position: fixed;
    display: none;
    height: -webkit-fill-available;
    width: -webkit-fill-available;
    opacity: 1;
    background: black;
    transition: opacity 2s ease;
    z-index: 60
}

.burger,
.md-nav-menu .close-nav {
    display: none;
    transition: .2s ease
}

.burger {
    color: var(--neutral-200);
    background: 0 0;
    border: none;
    border-radius: 50%;
    padding: 8px
}

.burger:active {
    transform: scale(.97)
}

.burger:hover {
    color: var(--neutral-50)
}

.burger svg {
    width: 1.5rem;
    height: 1.5rem
}

.md-nav-menu {
    position: relative;
    display: block;
    height: max-content;
    width: 20rem;
    max-width: 80%;
    margin: 1rem;
    border-radius: 8px;
    background-color: rgba(56, 56, 56, .2);
    border: 1px solid var(--violet-950);
    backdrop-filter: blur(8px);
    z-index: 61
}

.md-nav-menu .close-nav {
    position: absolute;
    right: -3rem;
    top: 1rem;
    justify-content: center;
    align-items: center;
    background: 0 0;
    border: none;
    border-radius: 50%;
    padding: .5rem;
    cursor: pointer
}

.md-nav-menu .close-nav svg {
    color: var(--neutral-200);
    width: 1.5rem;
    height: 1.5rem
}

.page-nav-container {
    display: flex;
    justify-content: space-between;
    padding: 2.5rem 0;
    max-width: 80rem;
    margin: auto
}

.page-nav-container a {
    min-width: 140px
}

.page-nav-container a svg {
    width: 1.5rem;
    height: 1.5rem
}

.report-issue a {
    font-size: var(--text-sm);
    color: var(--neutral-400)
}

.report-issue a svg {
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-right: .25rem
}

.support-wrapper {
    margin-top: 1rem;
    background-color: rgb(17, 17, 19)
}

.support-container {
    max-width: 50rem;
    margin: 0 auto;
    padding: 1rem;
    padding-bottom: 2rem;
    text-align: center
}

.support-container .text-content h1 {
    color: var(--header-color)
}

.support-container .text-content p {
    font-size: var(--text-sm)
}

.support-actions {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem
}

.support-actions a {
    display: flex;
    align-items: center;
    text-decoration: none
}

.support-actions a svg {
    width: 1.3rem;
    height: 1.3rem
}

.footer-wrapper {
    max-width: 80rem;
    width: 100%;
    padding: 1rem;
    margin: 0 auto
}

.footer-logo-container {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem
}

.footer-logo-link {
    display: flex;
    padding: .5rem;
    align-items: center;
    text-decoration: none
}

.footer-logo-link img {
    height: 2rem
}

.footer-logo-link span {
    color: var(--neutral-50);
    font-size: var(--text-2xl);
    font-family: var(--logo-font);
    font-weight: 600;
    text-align: center;
    white-space: nowrap
}

.footer-grid-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem
}

.footer-grid-headers {
    color: var(--neutral-100);
    font-family: var(--accent-font);
    font-size: var(--text-sm);
    text-transform: uppercase;
    margin-bottom: .5rem;
    font-weight: 500
}

.footer-grid-list {
    list-style-type: none
}

.footer-grid-list li {
    margin-bottom: 1rem
}

.footer-grid-list li a {
    color: var(--neutral-300);
    font-size: var(--text-sm);
    text-decoration: none;
    margin-bottom: .5rem;
    font-weight: 500
}

.footer-grid-list li a:hover {
    color: var(--neutral-100)
}

.copyright-text {
    font-size: .875rem;
    line-height: 1.25rem
}

.copyright-text a {
    font-family: var(--logo-font);
    color: var(--neutral-50);
    text-decoration: none
}

.copyright-text a:hover {
    text-decoration: underline
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem
}

.social-links a {
    color: var(--neutral-300)
}

.social-links a:hover {
    color: var(--neutral-50)
}

.social-links a svg {
    width: 1rem;
    height: 1rem
}

.intro-wrapper {
    display: flex;
    align-items: center;
    text-align: center;
    margin: auto;
    max-width: 80rem;
    height: 75dvh;
    animation: fadeIn;
    animation-duration: 2000ms
}

.intro-wrapper .intro-container {
    margin: 0 auto;
    padding: 0 1rem
}

.intro-wrapper .intro-container .action a:hover svg {
    animation: shake 1s linear
}

.intro-wrapper .intro-container .header-text {
    margin: auto;
    max-width: 60rem
}

.intro-wrapper .intro-container .header-text h1 {
    font-weight: 500;
    font-size: var(--text-6xl);
    line-height: 1.25;
    color: var(--header-color)
}

.intro-wrapper .intro-container .header-text h1 span {
    color: var(--violet-400)
}

.intro-wrapper .intro-container .header-text p {
    margin: 0 auto;
    line-height: 1.5;
    color: var(--para-color);
    width: 60%
}

.intro-wrapper .intro-container .action {
    width: max-content;
    margin: 3rem auto 0 auto
}

.banner-container {
    width: 100%
}

.banner-container img {
    width: 100%;
    filter: saturate(120%)
}

.feature-wrapper {
    background-color: rgb(17, 17, 19);
    padding: 3rem 0;
    margin: 4rem 0
}

.feature-container {
    max-width: 50rem;
    margin: 0 auto;
    text-align: center
}

.feature-container .paragraph {
    color: var(--neutral-300)
}

.feature-container button {
    background: none;
    margin: auto
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0
}

.stats .stats-item .grad-text {
    display: block;
    font-family: var(--accent-font);
    font-weight: 700;
    font-size: var(--text-3xl);
    background: linear-gradient(to right, var(--blue-500), var(--fuchsia-500), var(--purple-500), var(--cyan-500), var(--purple-500), var(--fuchsia-500), var(--blue-500));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    background-size: 500%;
    background-position: right;
    animation: slide-gradient 5s linear infinite
}

.stats .stats-item p {
    color: var(--para-color)
}

.gallery-grid {
    display: grid;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    margin: 1rem 3rem 6rem 3rem
}

.gallery-grid .grid-item1 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/internet.jpg);
    grid-area: 1 / 1 / 3 / 2
}

.gallery-grid .grid-item2 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/lifecycle.jpg);
    grid-area: 1 / 2 / 3 / 3
}

.gallery-grid .grid-item3 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/computer.jpg);
    grid-area: 1 / 3 / 3 / 5
}

.gallery-grid .grid-item4 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/text-editor.jpg);
    grid-area: 3 / 1 / 5 / 3
}

.gallery-grid .grid-item5 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/elements.jpg);
    grid-area: 3 / 3 / 5 / 4
}

.gallery-grid .grid-item6 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/lists.jpg);
    grid-area: 3 / 4 / 5 / 5
}

.gallery-grid .grid-item7 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/typography.jpg);
    grid-area: 5 / 1 / 9 / 2
}

.gallery-grid .grid-item8 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/svgs/list-properties.svg);
    grid-area: 5 / 2 / 7 / 4
}

.gallery-grid .grid-item9 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/lesson-images/l4/box_model.png);
    grid-area: 7 / 2 / 9 / 4
}

.gallery-grid .grid-item10 {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--violet-800)), url(../images/svgs/thumbnail8.svg);
    grid-area: 5 / 4 / 9 / 5
}

.gallery-grid .grid-item {
    position: relative;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    color: var(--violet-50);
    text-decoration: none;
    min-height: 225px;
    padding: 1rem;
    border-radius: .5rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: filter .3s ease
}

.grid-item .grid-item-text {
    background-color: none;
    margin-bottom: 1.5rem
}

.grid-item .grid-item-icon {
    position: absolute;
    right: 17px;
    bottom: 5px;
    width: 1.5rem
}

.grid-item .grid-item-icon svg {
    color: var(--violet-200)
}

.grid-item-text h4 {
    color: var(--violet-50);
    font-size: var(--text-xl);
    font-family: var(--accent-font)
}

.grid-item-text span {
    color: var(--violet-100);
    line-height: 1;
    font-size: var(--text-sm)
}

.grid-item:hover {
    filter: saturate(100%)
}

.grid-item:hover .grid-item-icon svg {
    animation: shake .5s linear
}

.gallery-grid:hover .grid-item:not(:hover) {
    filter: saturate(60%)
}

.testimonial-wrapper {
    padding: 3rem
}

.testimonial-wrapper .subheader {
    margin-bottom: 3rem
}

.testimonial-wrapper .testimonial-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    max-width: 80rem;
    margin: auto
}

.testimonial-container figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem
}

.testimonial-container figure blockquote {
    text-align: center
}

.testimonial-container figure blockquote h3 {
    color: var(--header-color);
    font-size: var(--text-xl)
}

.testimonial-container figure blockquote p {
    color: var(--para-color);
    margin: 1rem 0
}

.testimonial-container figure figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem
}

.testimonial-container figure figcaption img {
    border-radius: 50%;
    width: 40px;
    height: 40px
}

.testimonial-container figure figcaption div p {
    font-size: var(--text-base);
    color: var(--header-color);
    font-weight: 500;
    line-height: 1
}

.testimonial-container figure figcaption div span {
    font-size: var(--text-base);
    color: var(--para-color)
}

.course-card {
    position: relative;
    border: 1px solid var(--violet-950);
    border-radius: 8px;
    margin-bottom: 6rem;
    overflow: hidden
}

.course-card .cc-content {
    display: flex;
    width: 100%
}

.course-card .cc-content .cc-img {
    width: 35%
}

.course-card .cc-content .cc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.course-card .cc-text {
    padding: 1rem;
    width: 65%
}

.course-card .cc-text h2 {
    font-size: var(--text-2xl);
    margin-bottom: .5rem
}

.course-card .cc-text p {
    font-size: var(--text-base);
    font-weight: 400;
    letter-spacing: .5px;
    margin-bottom: .5rem
}

.course-card .cc-text .cc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem
}

.course-card .cc-text .cc-tags a {
    user-select: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: var(--text-xs);
    color: var(--neutral-200);
    text-decoration: none;
    width: max-content;
    padding: .15rem .3rem;
    border: 1px solid var(--violet-900);
    border-radius: 8px;
    transition: all .2s ease
}

.course-card .cc-text .cc-tags a:hover {
    border: 1px solid var(--violet-700);
    transform: scale(1.015);
    background-color: #250c3e
}

.course-card .cc-text .cc-tags a img {
    height: var(--text-xs)
}

.course-card .cc-text .cc-action {
    display: flex;
    margin-top: .5rem;
    float: right
}

.course-card .cc-text .cc-tags a {
    text-decoration: none
}

.lesson-list-container h3 {
    font-size: var(--text-xl)
}

.lesson-list-items {
    border-radius: 8px;
    margin: .5rem 0 1rem 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
    background-color: #101028;
    border: 1px solid var(--violet-900)
}

.lesson-list-items .topic-item {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    border: 1px solid var(--violet-950);
    border-radius: 6px;
    padding: 12px;
    transition: all 200ms cubic-bezier(0, 0, .2, 1)
}

.lesson-list-items .topic-item:hover {
    border-color: var(--violet-900);
    background-color: var(--indigo-950);
    transform: scale(1.015)
}

.lesson-list-items .topic-item:active {
    transform: scale(.99)
}

.lesson-list-items .topic-item .item-content {
    display: flex;
    text-wrap: nowrap;
    overflow: hidden
}

.lesson-list-items .topic-item .item-content .item-number {
    opacity: 0;
    text-align: center;
    width: 0;
    max-height: 24px;
    margin: auto 0;
    transition: all .2s cubic-bezier(0, 0, .2, 1)
}

.lesson-list-items .topic-item .item-content .item-number span {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1;
    color: var(--violet-300)
}

.lesson-list-items .topic-item .item-content .item-text {
    line-height: 1
}

.lesson-list-items .topic-item .item-content .item-text h4 {
    color: var(--header-color);
    font-family: var(--accent-font);
    font-weight: 500
}

.lesson-list-items .topic-item .item-content .item-text span {
    text-overflow: ellipsis;
    color: var(--para-color);
    font-size: var(--text-xs)
}

.lesson-list-items .topic-item .item-status-icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.lesson-list-items .topic-item .item-status-icon svg {
    width: 24px;
    height: 24px
}

.lesson-list-items {
    .topic-item {

        &:hover .item-number,
        &:focus .item-number {
            width: 24px;
            opacity: 1;
            margin-right: .5rem
        }
    }
}

.about-article {
    padding-bottom: 2rem
}

.about-article p.subheader {
    margin-bottom: 1rem
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 1rem
}

.overview-grid .overview-grid-item {
    padding: 1rem;
    border-radius: .5rem;
    background-image: linear-gradient(to bottom, #00000000, var(--violet-900));
    border: 1px solid var(--violet-950);
    transition: all .2s ease
}

.overview-grid .overview-grid-item:hover {
    background-color: var(--violet-950)
}

.overview-grid .overview-grid-item:hover .overview-grid-icon svg {
    fill: var(--violet-100);
    transform: scale(1.15)
}

.overview-grid .overview-grid-item .overview-grid-icon svg {
    fill: var(--violet-300);
    width: 1.5rem;
    transition: all .2s ease
}

.overview-grid .overview-grid-item h3 {
    color: var(--neutral-200);
    margin-bottom: .5rem
}

.overview-grid .overview-grid-item p {
    color: var(--neutral-300);
    font-size: var(--text-sm)
}

.overview-grid .item1,
.overview-grid .item2,
.overview-grid .item3 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.overview-grid .item1 span,
.overview-grid .item2 span,
.overview-grid .item3 span {
    font-family: var(--accent-font);
    font-weight: 700;
    font-size: var(--text-3xl);
    background: linear-gradient(to right, var(--sky-500), var(--fuchsia-500), var(--purple-500), var(--blue-500), var(--cyan-300));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    background-size: 500%;
    background-position: right;
    transition: background-position 1s ease-in-out;
    animation: slide-gradient 2s ease-in-out
}

.overview-grid .overview-grid-item:hover span {
    background-position: left
}

.overview-grid .item1 h4,
.overview-grid .item2 h4,
.overview-grid .item3 h4 {
    color: var(--neutral-300);
    font-size: var(--text-md);
    font-weight: 400
}

.overview-grid .item1 {
    grid-area: 1 / 1 / 2 / 2
}

.overview-grid .item2 {
    grid-area: 1 / 2 / 2 / 3
}

.overview-grid .item3 {
    grid-area: 1 / 3 / 3 / 4
}

.overview-grid .item4 {
    grid-area: 3 / 3 / 6 / 4
}

.overview-grid .item5 {
    grid-area: 2 / 1 / 4 / 3
}

.overview-grid .item6 {
    grid-area: 4 / 1 / 6 / 3
}

.about-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.about-grid .about-grid-item {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    padding: 1rem
}

.about-grid .about-grid-item:hover .grid-item-icon svg,
.about-grid .about-grid-item:hover .grid-item-icon img {
    fill: var(--violet-100);
    transform: scale(1.15)
}

.about-grid .about-grid-item .grid-item-icon svg,
.about-grid .about-grid-item .grid-item-icon img {
    width: 24px;
    fill: var(--violet-300);
    transition: all .2s ease
}

.about-grid .about-grid-item .grid-item-text h3 {
    color: var(--neutral-200);
    margin-bottom: .5rem
}

.about-grid .about-grid-item .grid-item-text p {
    color: var(--neutral-300);
    font-size: var(--text-sm)
}

.contact-wrapper {
    margin-bottom: 4rem
}

.contact-wrapper .contact-header {
    font-size: var(--text-4xl);
    text-align: center;
    margin: 0 auto;
    max-width: 40rem
}

.contact-wrapper .contact-subtitle {
    font-size: var(--text-base);
    text-align: center;
    margin: 0 auto;
    max-width: 30rem
}

.contact-wrapper .contact-form-container {
    margin: 0 auto;
    max-width: 30rem
}

.contact-wrapper .contact-form-container form {
    padding: 1rem
}

.contact-wrapper .contact-form-container form .form-group {
    display: flex;
    flex-direction: column;
    margin: 2rem 0
}

.contact-wrapper .contact-form-container form .form-group label {
    color: var(--neutral-300)
}

.contact-wrapper .contact-form-container form .form-group textarea,
.contact-wrapper .contact-form-container form .form-group input {
    font-family: var(--base-font);
    color: var(--violet-50);
    background: transparent;
    border: none;
    outline: none;
    padding: .25rem .5rem;
    border-bottom: 2px solid var(--violet-400);
    scrollbar-width: thin
}

.contact-wrapper .contact-form-container form .form-group input:focus,
.contact-wrapper .contact-form-container form .form-group input:hover,
.contact-wrapper .contact-form-container form .form-group textarea:focus,
.contact-wrapper .contact-form-container form .form-group textarea:hover {
    border-bottom: 2px solid var(--violet-200)
}

.contact-wrapper .contact-form-container form button {
    font-family: inherit;
    border: none
}

.contact-wrapper .contact-form-container form button svg {
    width: 1rem;
    height: 1rem
}

.form-container {
    margin: 2rem 0 4rem 0
}

.form-container form {
    background-color: #16202de6;
    max-width: 28rem;
    padding: 2rem;
    margin: 0 auto;
    border-radius: .5rem
}

.form-container form .form-action {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .25rem;
    color: var(--neutral-300);
    font-size: var(--text-sm);
    margin-top: 1rem
}

.form-container form .form-action a {
    font-size: var(--text-sm)
}

.form-container form .form-group {
    display: flex;
    flex-direction: column;
    margin: 1rem 0
}

.form-container form .form-group label {
    color: var(--neutral-300);
    font-size: var(--text-sm)
}

.form-container form .form-group input {
    color: var(--neutral-200);
    font-size: var(--text-base);
    font-weight: 500;
    background: none;
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid var(--violet-400)
}

.form-container form .form-group input:hover,
.form-container form .form-group input:focus {
    outline: none;
    border-bottom: 2px solid var(--violet-200)
}

.form-container form .form-group a {
    font-size: var(--text-sm);
    color: var(--neutral-400)
}

.form-container form .form-group-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0
}

.form-container form .form-group-actions div {
    display: flex;
    align-items: center
}

.form-container form .form-group-actions div.center {
    margin: auto
}

.form-container form .form-group-actions div input {
    margin-right: .5rem
}

.form-container form .form-group-actions div label {
    color: var(--neutral-300);
    font-size: var(--text-sm)
}

.form-container form .form-group-actions div a {
    font-size: var(--text-sm);
    color: var(--neutral-300);
    text-decoration: none
}

.form-container form .form-group-actions div a:hover {
    text-decoration: underline;
    color: var(--neutral-50)
}

.form-container form button {
    margin-top: 1rem;
    width: 100%;
    border: none;
    font-size: var(--text-base)
}

.form-container form .form-group-divider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.form-container form .form-group-divider hr {
    width: 100%;
    border: 1px solid var(--gray-700)
}

.form-container form .form-group-divider span {
    padding: 0 .5rem;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    color: var(--gray-400);
    background-color: #16202de6
}

.form-container form .form-buttons button {
    position: relative;
    display: flex;
    justify-content: center;
    color: var(--neutral-300);
    font-weight: 500;
    padding: .5rem .25rem;
    border: 1px solid var(--gray-600);
    border-radius: 4px;
    background-color: var(--gray-800);
    cursor: pointer;
    transition: all .2s ease
}

.form-container form .form-buttons {
    margin-bottom: 1rem
}

.form-container form .form-buttons button:nth-child(1) {
    margin-top: 0
}

.form-container form .form-buttons button svg {
    position: absolute;
    transform: translateX(-50%);
    left: 1.5rem;
    top: .75rem;
    width: 1.5rem;
    fill: var(--neutral-500)
}

.form-container form .form-buttons button:hover {
    background-color: var(--gray-700);
    transform: scale(1.01)
}

.form-container form .form-buttons button:active {
    transform: scale(.99)
}

.team-wrapper {
    margin: 3rem 0;
    border-left: 2px solid var(--purple-950);
    border-bottom: 2px solid var(--purple-950);
    border-bottom-left-radius: 32px
}

.team-wrapper .team-item:nth-child(3) {
    border: none
}

.team-wrapper .team-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    margin: 1rem;
    border-bottom: 1px solid var(--purple-950)
}

.team-item .avatar {
    width: 10rem;
    min-width: 10rem;
    aspect-ratio: 1 / 1
}

.team-item .avatar img {
    width: 100%;
    object-fit: cover;
    border-radius: 50%
}

.team-item .info-container .name {
    font-size: var(--text-xl);
    color: var(--header-color)
}

.team-item .info-container .paragraph {
    margin: 1rem 0
}

.team-item .info-container .socials {
    display: inline-flex;
    gap: 1rem
}

.team-item .info-container .socials a i {
    color: var(--violet-300);
    font-size: var(--text-base);
    transition: all .3s ease
}

.team-item .info-container .socials a i:hover {
    color: var(--violet-200);
    transform: scale(1.05)
}

.team-item .info-container .socials a i:active {
    color: var(--violet-400);
    transform: scale(.99)
}

@media (max-width:992px) {
    .gallery-grid {
        display: flex;
        flex-direction: column;
        margin: 3rem 1rem
    }

    .grid-item {
        min-height: 200px
    }
}

@media (max-width:768px) {
    .article-image img {
        max-width: 80%
    }

    .pri-btn {
        min-height: 48px
    }

    .burger {
        display: flex
    }

    .md-logo-name,
    .md-nav-link {
        color: #f5f5f5;
        text-decoration: none
    }

    .sidebar-wrapper {
        display: flex;
        position: fixed;
        height: -webkit-fill-available;
        z-index: 61
    }

    .md-logo-container {
        display: flex;
        align-items: center;
        padding: 1rem;
        min-height: 74px
    }

    .md-logo-container a {
        display: flex;
        align-items: center;
        text-decoration: none
    }

    .md-logo-container img {
        height: 32px
    }

    .md-logo-name {
        font-family: var(--logo-font);
        font-size: var(--text-2xl);
        font-weight: 600;
        text-align: center;
        white-space: nowrap
    }

    .md-nav-links {
        padding: 0 1rem 3rem
    }

    .md-nav-link {
        display: flex;
        align-items: center;
        font-weight: 400;
        border-radius: 8px;
        margin: .5rem 0;
        padding: .5rem;
        transition: .2s
    }

    .md-nav-link:hover {
        background-color: hsla(0, 0%, 80%, .1)
    }

    .md-nav-link:active svg,
    .md-nav-link:focus svg,
    .md-nav-link:hover svg {
        color: var(--violet-300)
    }

    .md-nav-link:focus {
        background-color: hsla(0, 0%, 100%, .05)
    }

    .md-nav-link:active {
        transform: scale(.99);
        background-color: hsla(0, 0%, 100%, .1)
    }

    .md-nav-link svg {
        margin-right: 1rem;
        height: 1.5rem
    }

    .nav-btn-wrapper,
    .nav-menu {
        display: none
    }

    .page-nav-container {
        align-items: center;
        flex-direction: column;
        gap: 1rem
    }

    .page-nav-container a {
        width: 100%
    }

    .footer-grid-links {
        margin-top: 1rem
    }

    .footer-logo-container {
        margin-bottom: 0
    }

    .feature-container {
        padding: 0 1rem
    }

    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .testimonial-wrapper {
        padding: 1.5rem 0
    }

    .testimonial-wrapper .testimonial-container {
        display: flex;
        flex-direction: column
    }

    .course-card .cc-content {
        flex-direction: column
    }

    .course-card .cc-content .cc-img {
        width: 100%;
        height: 200px
    }

    .course-card .cc-content .cc-img img {
        height: 100%
    }

    .course-card .cc-content .cc-text {
        width: 100%
    }

    .course-card .cc-content .cc-text .cc-action {
        justify-content: center;
        float: none
    }

    .lesson-list-items {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .about-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr))
    }

    .overview-grid {
        display: flex;
        flex-direction: column
    }
}

@media (max-width:640px) {
    .footer-wrapper {
        padding: 1rem
    }

    .footer-links-wrapper {
        flex-direction: column
    }

    .footer-grid-links {
        gap: 1.5rem;
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .copyright-social-links {
        display: flex;
        align-items: center;
        justify-content: space-between
    }

    .copyright-text {
        text-align: center
    }

    .social-links {
        justify-content: center;
        margin-top: 0
    }

    .intro-wrapper .intro-container .header-text h1 {
        font-size: var(--text-4xl)
    }

    .intro-wrapper .intro-container .header-text p {
        width: 80%;
        font-size: var(--text-base)
    }

    .team-item {
        flex-direction: column
    }
}

@media (max-width:420px) {
    .copyright-social-links {
        flex-direction: column
    }

    .footer-links-wrapper>.footer-grid-links {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

@media (max-width:374px) {
    .md-nav-menu {
        width: 16rem
    }
}

@media (max-width:281px) {
    .md-nav-menu {
        width: 15rem
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes appear {
    0% {
        opacity: 0
    }

    33.33% {
        opacity: 1
    }

    100% {
        opacity: 1
    }
}

@keyframes move-right {
    0% {
        transform: translateX(-6rem)
    }

    50% {
        transform: translateX(-1.5)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes move-left {
    0% {
        transform: translateX(6rem)
    }

    50% {
        transform: translateX(1.5rem)
    }

    100% {
        transform: translateX(0)
    }
}

@keyframes shake {
    0% {
        transform: rotate(3deg)
    }

    25% {
        transform: rotate(-5deg)
    }

    50% {
        transform: rotate(3deg)
    }

    75% {
        transform: rotate(-5deg)
    }

    100% {
        transform: rotate(3deg)
    }
}

@keyframes slide-gradient {
    from {
        background-position: left
    }

    to {
        background-position: right
    }
}

h3{
    text-align: center;
    margin-top: 30px;
}
h4{
    text-align: center;
}
p {
    margin-top: 30px;
    margin-bottom: 1rem;
    text-align: center;
}
.div1 {
    height: 2px;
    width: 10%;
    background-color: rgb(235, 64, 52);
    position: absolute;
    left: 520px;
    margin-top: 10px;
}
.icon{
    text-align: center;
    font-size: 3rem;
}
.border-box{
    margin-top: 20px;
}
*{
    padding-left: 0px;
    padding-top: 0px;
    margin: 0px;
}
.wrapper{
    height:45vh;
    display: flex;
    justify-content:center;
    align-items: center;
}
.gallery{
    width: 1500px;
    display: flex;
    flex-direction: row;
    
    overflow-x:scroll;
    overflow: hidden;
    margin-left: 5px;
    margin-right: 7px;
    height:250px;
}
.gallery div{
  
    
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    padding: 8px;
    flex: none;
}
.gallery div img{
border-radius: 20px;

    /* width: 80%; */
    height: 250px;
}
.gallery div img:hover{
    scale: 1.07;
    transition:0.3s;
    
}

::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
  }
   
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(0, 30, 255); 
    border-radius: 10px;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #b30000; 
  }