@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&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&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@layer colors {
    :root {
        --color-primary: hsl(12, 77%, 58%);
        --color-primary-mute: hsl(12, 77%, 46%);
        --color-accent: hsl(334, 71%, 49%);
        --color-secondary: hsl(38, 100%, 98%);

        --color-highlight-header: hsl(0, 0%, 23%);
        --color-paragraph: hsl(240, 3%, 45%);
        --color-paragraph-dark: hsl(0, 0%, 70%);
        --color-bg-mute: hsl(240, 9%, 18%);

        --gradient: linear-gradient(90deg, hsl(38, 100%, 98%) 21.32%, hsl(334, 75%, 98%) 130%);

        --color-white-dark: hsl(0 0% 90%);
        --color-white: hsl(0 0% 95%);
        --color-white-light: hsl(0 0% 100%);
        --color-black: hsl(0 0% 5%);
        --color-black-mute: hsl(0 0% 30%);
        --color-border: hsl(0 0% 60%);
        --border-card: 1px solid var(--color-border);
        --border-highlight: hsl(0 0% 20%);

        --shadow-light: 0px 4px 4px #00000030;
        --shadow-dark: 0px 12px 12px #00000015;
        --shadow-combine: var(--shadow-light), var(--shadow-dark);
    }
}

@layer fonts {
    :root {
        --font-poppins: "Poppins", sans-serif;
        --font-rubik: "Rubik", sans-serif;
        --font-dmsans: "DM Sans", sans-serif;

        --fontsize-58: calc(58 / 16 * 1rem);
        --fontsize-50: calc(50 / 16 * 1rem);
        --fontsize-40: calc(40 / 16 * 1rem);
        --fontsize-36: calc(36 / 16 * 1rem);
        --fontsize-32: calc(32 / 16 * 1rem);
        --fontsize-28: calc(28 / 16 * 1rem);
        --fontsize-24: calc(24 / 16 * 1rem);
        --fontsize-20: calc(20 / 16 * 1rem);
        --fontsize-18: calc(18 / 16 * 1rem);
        --fontsize-16: 1rem;
        --fontsize-14: calc(14 / 16 * 1rem);
    }

    h1 {
        font-size: var(--fontsize-58);
        letter-spacing: -0.75px;
        line-height: 1.4;
    }

    h2 {
        font-size: var(--fontsize-36);
        letter-spacing: -0.55px;
        line-height: 1.6;
    }

    h3 {
        font-size: var(--fontsize-24);
        letter-spacing: -0.07px;
        line-height: 1.3;
    }

    h1,
    h2,
    h3 {
        font-family: var(--font-poppins);
        color: var(--color-black);
    }

    h3 {
        color: var(--color-highlight-header);
    }

    p {
        font-family: var(--font-rubik);
        font-size: var(--fontsize-18);
        color: var(--color-paragraph);
        line-height: 1.8;
    }

    /* ***** Media queries ***** */
    @media screen and (max-width: calc(768/16 * 1rem)) {
        h1 {
            font-size: var(--fontsize-50);
        }

        h2 {
            font-size: var(--fontsize-32);
        }

        h3 {
            font-size: var(--fontsize-20);
        }

        p {
            font-size: var(--fontsize-16);
        }
    }
}

@layer layout {
    :root {
        --layout-padding: 2rem;
        --layout-breakout: 1.5rem;
        --layout-container: calc(1150/16 * 1rem);
    }

    .layout_wrapper {
        display: grid;
        grid-template-columns:
            [grid-fullbleed-start] minmax(var(--layout-padding), 1fr) [grid-breakout-start] minmax(0, var(--layout-breakout)) [grid-content-start] min(100% - var(--layout-padding) * 2, var(--layout-container)) [grid-content-end] minmax(0, var(--layout-breakout)) [grid-breakout-end] minmax(var(--layout-padding), 1fr) [grid-fullbleed-end];
    }

    .layout_wrapper > *,
    .layout_wrapper .layout_container {
        grid-column: grid-content;
    }

    .layout_wrapper .layout_breakout {
        grid-column: grid-breakout;
    }

    .layout_wrapper .layout_fullbleed {
        grid-column: grid-fullbleed;
    }

    .layout_container > :not(.layout_breakout, .layout_fullbleed),
    .layout_fullbleed > :not(.layout_breakout, .layout_fullbleed) {
        grid-column: grid-content;
    }

    .layout_container .layout_breakout {
        grid-column: grid-breakout;
    }

    .layout_container .layout_fullbleed {
        grid-column: grid-fullbleed;
    }
}

@layer global {

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

    html {
        scroll-behavior: smooth;
    }

    body {
        max-width: 100%;
        min-height: 100vh;

        background-color: var(--color-white-dark);
        transition: .5s all ease;
        position: relative;
    }

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

    a {
        font-family: var(--font-dmsans);
        font-size: var(--fontsize-18);
        color: var(--color-black);

        text-decoration: none;
        transition: .3s all ease;
    }

    ul li {
        list-style: none;
        padding-left: .5rem;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    input,
    textarea {
        width: 100%;
        padding: .25rem .5rem;
        font-size: var(--fontsize-18);
        outline: none;
        border: var(--border-card);
    }

    th,
    td {
        border: var(--border-card);
        padding: .5rem;
        text-align: center;
    }

    button {
        border: var(--border-card);
        border-radius: 5px;
        padding: .5rem 1rem;
        outline: none;
        text-align: center;
        cursor: pointer;
    }
}

@layer scrollbar {
    body::-webkit-scrollbar {
        width: 7px;
    }

    body::-webkit-scrollbar-thumb {
        background: var(--color-accent);
        border-radius: 20px;
    }

    body::-webkit-scrollbar-track {
        background: var(--color-black-mute);
    }

    body::-webkit-scrollbar-thumb:hover,
    body::-webkit-scrollbar-thumb:active {
        background: var(--color-primary);
    }
}

@layer helpers {
    .display-hidden {
        display: none;
    }

    .display-block {
        display: block;
    }

    .width-full {
        width: 100%;
    }

    .height-full {
        height: 100%;
    }

    .icon-size {
        font-size: var(--fontsize-18);
    }

    .btn,
    .btn1 {
        padding: .5rem 1rem;
        border-radius: 5px;
        border: 1px solid var(--color-primary);

        background-color: var(--color-primary);
        color: var(--color-white-light);
        transition: .3s all ease-in-out;
        box-shadow: var(--shadow-light);
    }

    .btn1:hover {
        background-color: transparent;
        color: var(--color-primary);
    }

    .btn:hover {
        background-color: var(--color-primary-mute);
        transform: translateY(-3px);
    }
}

@layer navbar {
    .header_section {
        background: var(--gradient);
    }

    .navbar_section {
        padding: 1rem 0;
    }

    .navbar_section > .layout_container {
        display: flex;
        align-items: center;
        gap: 4rem;
        transition: all .3s ease;
    }

    .navbar_section .navbar_logo {
        width: calc(125/16 *1rem);
        height: calc(60/16 *1rem);
    }

    .navbar_section .navbar_content {
        flex: 1;
        padding-left: 2rem;
        transition: .3s ease-in;

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }

    .navbar_section .navbar_content .navbar_anchors {
        display: flex;
        justify-content: space-between;
        gap: 3rem;
    }

    .navbar_section .navbar_content .navbar_anchors a {
        position: relative;
    }

    .navbar_section .navbar_content .navbar_anchors a:hover {
        color: var(--color-black-mute);
    }

    .navbar_section .navbar_content .navbar_anchors a:hover::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;

        width: 100%;
        height: 2px;
        border-radius: 1px;
        background-color: var(--color-primary);
        animation: dash .3s linear;
    }

    @keyframes dash {
        0% {
            width: 0;
        }

        100% {
            width: 100%;
        }
    }

    .navbar_section .navbar_content .navbar_button {
        display: flex;
        align-items: center;
        gap: .5rem;
    }

    /* Media queries */
    @media screen and (max-width: calc(850/16 * 1rem)) {
        .navbar_section > .layout_container {
            justify-content: space-between;
        }

        .navbar_section .navbar_content {
            display: none;
            flex-direction: column;
            justify-content: center;
            width: calc(450/16 *1rem);
            height: 100vh;

            position: fixed;
            top: 0;
            right: 0;
            z-index: 5;

            background-color: var(--color-black);
            transform: translateX(-120%);
            transition: all .5s ease;
            box-shadow: var(--shadow-light);

        }

        .navbar_section .navbar_content .navbar_anchors {
            flex-direction: column;
            gap: 1.5rem;
        }

        .navbar_section .navbar_content .navbar_anchors a {
            color: var(--color-white-light);
        }

        .navbar_section .navbar_content .navbar_anchors a:hover {
            color: var(--color-white-dark);
        }

        .navbar_section .navbar_content .navbar_button:hover {
            background: transparent;
            border: 1px solid var(--color-white);
            color: var(--color-white-light);
        }

        .navbar_section .mobile_hamburger,
        .navbar_section .mobile_close {
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: .3s ease;
        }

        .navbar_section .mobile_hamburger .icon,
        .navbar_section .mobile_close .icon {
            font-size: var(--fontsize-36);
        }

        .navbar_section .mobile_hamburger:hover .icon {
            color: var(--color-primary);
        }

        .navbar_section .mobile_close .icon {
            position: absolute;
            right: 2rem;
            top: 2rem;
            padding: .5rem;

            font-size: var(--fontsize-40);
            color: var(--color-primary-mute);
            background-color: var(--color-highlight-header);
            border-radius: 50%;
            transition: all .3s ease;
        }

        .navbar_section .mobile_close .icon:hover {
            color: var(--color-primary);
            background-color: var(--color-black-mute);
        }

        /* Tablet and Mobile Navbar setup */
        .navbar_section input#navbar_mobile:checked ~ .navbar_content {
            display: flex;
            transform: translateX(0);
        }

        @media screen and (max-width: calc(568/16 * 1rem)) {
            .navbar_section .navbar_logo {
                width: calc(120/16 *1rem);
                height: calc(60/16 *1rem);
            }

            .navbar_section .navbar_content {
                width: 90%;
                height: 100%;
            }

            .navbar_section .mobile_hamburger .icon,
            .navbar_section .mobile_close .icon {
                font-size: var(--fontsize-32);
            }
        }
    }
}

@layer hero {
    .banner_section {
        background: inherit;
    }

    .banner_section > .layout_container {
        width: 100%;
        padding: 3rem 0;

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }

    .banner_section > .layout_container > * {
        flex-basis: 100%;
    }

    .banner_section .banner_content {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1rem;
    }

    .banner_section .banner_content h1,
    .banner_section .banner_content p {
        width: 80%;
    }

    .banner_section .banner_content h1 span {
        color: var(--color-primary);
    }

    .banner_section .banner_content .btn {
        margin-top: 2rem;
        padding: 1rem 1.75rem;
        font-size: var(--fontsize-18);
        box-shadow: 0 2px 10px var(--color-primary);
    }

    .banner_section .banner_image {
        width: 100%;
        height: 100%;
    }

    /* Media queries */
    @media screen and (max-width: calc(850/16 * 1rem)) {

        .banner_section .banner_content h1,
        .banner_section .banner_content p {
            width: 100%;
        }
    }

    @media screen and (max-width: calc(768/16 * 1rem)) {
        .banner_section > .layout_container {
            flex-direction: column;
        }

        .banner_section .banner_content {
            order: 2;
        }

        .banner_section .banner_image {
            order: 1;
            width: 80%;
        }
    }

    @media screen and (max-width: calc(576/16 * 1rem)) {
        .banner_section .banner_image {
            width: 100%;
        }
    }
}

@layer about {
    .main_section {
        background-color: var(--color-white-light);
    }

    .about_section {
        width: 100%;
        background: inherit;
        position: relative;
    }

    .about_section > .layout_container {
        width: 100%;
        padding: 3rem 0;

        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .about_section > .layout_container > * {
        flex-basis: 100%;
    }

    .about_section .about_image {
        width: 100%;
        height: 100%;
    }

    .about_section .about_content {
        width: 100%;
        height: 100%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 1rem;
    }

    .about_section .about_content h2,
    .about_section .about_content p {
        width: 80%;
    }

    .about_section .about_content .btn {
        margin-top: 2rem;
        padding: 1rem 1.75rem;
        font-size: var(--fontsize-18);
        box-shadow: 0 2px 10px var(--color-primary);
    }

    .about_section .about_vector {
        position: absolute;
        left: 0;
        bottom: 3rem;
    }

    /* Media queries */
    @media screen and (max-width: calc(850/16 * 1rem)) {

        .about_section .about_content h2,
        .about_section .about_content p {
            width: 100%;
        }

        .about_section .about_vector {
            display: none;
        }
    }

    @media screen and (max-width: calc(768/16 * 1rem)) {
        .about_section > .layout_container {
            flex-direction: column;
        }

        .about_section .about_image {
            width: 80%;
        }
    }

    @media screen and (max-width: calc(576/16 * 1rem)) {

        .about_section .about_image {
            width: 100%;
        }
    }
}

@layer course {
    .course_section {
        background: var(--color-secondary);
        position: relative;
    }

    .course_section > .layout_container {
        width: 100%;
        background: inherit;
        padding: 3rem 0;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
    }

    .course_section .course_title {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
    }

    .course_section .course_content {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        gap: 2rem;
        z-index: 1;
    }

    .course_content .course_card {
        display: grid;
        grid-template-rows: repeat(2, 1fr);
        gap: 1rem;
        transition: transform .3s ease;

        background-color: var(--color-white-light);
        border-radius: 10px;
        padding: 1.5rem;
        box-shadow: var(--shadow-dark);
    }

    .course_content .course_card:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-combine);
    }

    .course_content .course_card .card_image {
        width: 100%;
        height: 100%;
    }

    .course_content .course_card .card_image img {
        object-fit: fill;
        border-radius: 10px;
    }

    .course_content .course_card .card_details {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: .5rem;
    }

    .course_content .course_card .card_details a {
        margin-top: 1rem;
        color: var(--color-primary-mute);
        transition: color .3s ease;

        display: flex;
        align-items: center;
        gap: .5rem;
    }

    .course_content .course_card .card_details a:hover {
        color: var(--color-primary);
    }

    .course_content .course_card .card_details a .icon {
        font-size: var(--fontsize-18);
        transition: transform .3s ease;
    }

    .course_content .course_card .card_details a:hover .icon {
        transform: translateX(5px);
    }

    .course_section a.btn {
        margin-top: 2rem;
        padding: 1rem 1.75rem;
        font-size: var(--fontsize-18);
        box-shadow: 0 2px 10px var(--color-primary);
    }

    .course_section .course_vector {
        position: absolute;
        right: 0;
        top: 1rem;
    }

    /* Media queries */
    @media screen and (max-width: calc(992/16 *1rem)) {
        .course_section .course_content {
            grid-template-columns: repeat(2, min(calc(300/16 *1rem), 100%));
            place-content: top left;
        }

        .course_section .course_vector {
            display: none;
        }
    }

    @media screen and (max-width: calc(670/16 *1rem)) {
        .course_section .course_content {
            grid-template-columns: repeat(2, min(calc(270/16 *1rem), 100%));
            place-content: center;
        }
    }

    @media screen and (max-width: calc(600/16 *1rem)) {
        .course_section .course_content {
            grid-template-columns: repeat(1, min(calc(300/16 *1rem), 100%));
            place-content: center;
        }
    }
}

@layer tutor {
    .instructor_section {
        background: var(--color-white-light);
        position: relative;
    }

    .instructor_section > .layout_container {
        width: 100%;
        padding: 3rem 0;

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
    }

    .instructor_section > .layout_container > * {
        flex-basis: 100%;
    }

    .instructor_section .instructor_content {
        width: 100%;
        height: 100%;
        z-index: 1;
        order: 2;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 2rem;
    }

    .instructor_section .instructor_content h2,
    .instructor_section .instructor_content p {
        width: 90%;
    }

    .instructor_section .instructor_content .btn {
        margin-top: 2rem;
        padding: 1rem 1.75rem;
        font-size: var(--fontsize-18);
        box-shadow: 0 2px 10px var(--color-primary);
    }

    .instructor_section .instructor_details {
        width: 100%;
        height: 100%;
        z-index: 1;
        order: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .instructor_section .instructor_details .instructor_image {
        width: calc(350/16 * 1rem);
        height: calc(350/16 *1rem);
    }

    .instructor_section .instructor_details .instructor_socials {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .instructor_section .instructor_details .instructor_socials a .icon {
        padding: .5rem;
        border-radius: 50%;
        background-color: var(--color-black-mute);
        color: var(--color-white-dark);
        font-size: var(--fontsize-20);
        transition: color .3s ease;
    }

    .instructor_section .instructor_details .instructor_socials a .icon:hover {
        color: var(--color-primary);
        background-color: var(--color-black);
    }

    .instructor_section .instructor_vector1 {
        position: absolute;
        left: 0;
        top: 1rem;
    }

    /* Media queries */
    @media screen and (max-width: calc(768/16 *1rem)) {
        .instructor_section > .layout_container {
            flex-direction: column;
        }

        .instructor_section .instructor_content {
            order: 2;
        }

        .instructor_section .instructor_content h2,
        .instructor_section .instructor_content p {
            width: 100%;
        }

        .instructor_section .instructor_details {
            order: 1;
            width: 80%;
        }

        .instructor_section .instructor_details h3 {
            text-align: center;
        }

        .instructor_section .instructor_details .instructor_socials a .icon {
            font-size: var(--fontsize-24);
        }

        .instructor_section .instructor_details .instructor_image {
            width: 100%;
            height: 100%;
        }

        .instructor_section .instructor_vector1 {
            display: none;
        }
    }

    @media screen and (max-width: calc(576/16 *1rem)) {
        .instructor_section .instructor_details {
            width: 100%;
        }
    }
}

@layer faq {
    .faq_section {
        background-color: var(--color-secondary);
        position: relative;
    }

    .faq_section > .layout_container {
        width: 100%;
        padding: 3rem 0;

        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;
    }

    .faq_section .faq_title {
        width: 100%;
        height: 100%;
        gap: 1rem;
        z-index: 1;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        transition: transform .3s ease;
    }

    .faq_section .faq_title p {
        width: 80%;
    }

    .faq_section .faq_title .btn {
        width: fit-content;
        margin-top: 2rem;
        padding: 1rem 1.75rem;
        font-size: var(--fontsize-18);
        box-shadow: 0 2px 10px var(--color-primary);
    }

    .faq_section .faq_content {
        width: 100%;
        gap: 2rem;
        z-index: 1;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
    }

    .faq_section .faq_content .faq_accordian {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1rem;

        background: var(--color-white-light);
        border-radius: 5px;
        padding: 1rem 1rem .25rem;
        box-shadow: var(--shadow-light);
        cursor: pointer;
    }

    .faq_section .faq_content .faq_accordian label.accordian_title {
        width: 100%;
        gap: 1rem;
        transition: all .3s ease;

        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
    }

    .faq_section .faq_content .faq_accordian label.accordian_title p {
        width: 90%;
        height: 100%;
    }

    .faq_section .faq_content .faq_accordian label.accordian_title p span {
        color: var(--color-primary);
    }

    .faq_section .faq_content .faq_accordian .accordian_content {
        width: 100%;
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .3s ease;
    }

    .faq_section .faq_content .faq_accordian .accordian_content p {
        overflow: hidden;
    }

    /* accordian control */
    .faq_section .faq_content .faq_accordian input[type="checkbox"]:checked ~ .accordian_title .icon {
        transform: rotate(180deg);
    }

    .faq_section .faq_content .faq_accordian input[type="checkbox"]:checked ~ .accordian_content {
        grid-template-rows: 1fr;
    }

    .faq_section .faq_vector {
        position: absolute;
        left: 0;
        bottom: 1rem;
    }

    /* Media Queries */
    @media screen and (max-width: calc(768/16 *1rem)) {
        .faq_section > .layout_container {
            flex-direction: column;
            gap: 4rem;
        }

        .faq_section .faq_title {
            order: 2;
        }

        .faq_section .faq_content {
            align-items: center;
            order: 1;
        }

        .faq_section .faq_content .faq_accordian label.accordian_title p {
            width: 100%;
        }

        .faq_section .faq_content .faq_accordian {
            width: 90%;
        }

        .faq_section .faq_vector {
            display: none;
        }

    }

    @media screen and (max-width: calc(576/16 *1rem)) {
        .faq_section .faq_title {
            width: 100%;
        }

        .faq_section .faq_content .faq_accordian label.accordian_title p {
            width: 100%;
        }

        .faq_section .faq_content .faq_accordian {
            width: 100%;
        }

    }
}

@layer cta {
    .cta_section {
        width: 100%;
        background: var(--color-bg-mute);
        position: relative;
    }

    .cta_section > .layout_container {
        width: 100%;
        padding: 3rem 0;

        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;
    }

    .cta_section h2 {
        color: var(--color-white-light);
    }

    .cta_section .btn1 {
        padding: 1rem 2.75rem;
        font-size: var(--fontsize-18);
        box-shadow: 0 2px 6px var(--color-primary);
        text-align: center;
    }

    .cta_section .cta_vector {
        position: absolute;
        bottom: 1rem;
        left: 80%;
        transform: translateX(-80%);
    }

    /* Media queries */
    @media screen and (max-width: calc(650/16 * 1rem)) {
        .cta_section > .layout_container {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }

        .cta_section .cta_vector {
            display: none;
        }
    }
}

@layer footer {
    .footer_section {
        width: 100%;
        background: var(--color-black);
    }

    /* Footer default */
    .footer_section .footer_logo {
        width: calc(125/16 *1rem);
        height: calc(60/16 *1rem);
    }

    .footer_section h3 {
        color: var(--color-white-light);
        font-size: var(--fontsize-18);
        margin-bottom: 1rem;
    }

    .footer_section p {
        color: var(--color-paragraph-dark);
        font-size: var(--fontsize-16);
    }

    /* Footer styles */
    .footer_section > .layout_container {
        width: 100%;
        padding: 3rem 0;

        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        gap: 2rem;
    }

    .footer_section .footer_about {
        width: 100%;
        padding: 1rem 0;
        border-bottom: 1px solid var(--color-bg-mute);
        gap: 1rem;

        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
    }

    .footer_section .footer_about p {
        width: fit-content;
    }

    .footer_section .footer_about a .icon {
        color: var(--color-paragraph-dark);
        background-color: var(--color-bg-mute);
        padding: .5rem;
        border-radius: 50%;
        transition: all .3s ease;
    }

    .footer_section .footer_about a .icon:hover {
        background-color: var(--color-black-mute);
        color: var(--color-primary);
    }

    .footer_section .footer_copyright {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .footer_section .footer_copyright p a {
        color: var(--color-paragraph-dark);
        cursor: default;
        transition: color .3s ease;
    }

    .footer_section .footer_copyright p a:hover {
        color: var(--color-white-light);
    }
}