.header-transparent {
    .progress-container {
        position: absolute;
        bottom: 50px;
        left: 0;
        width: 100%;
        height: 3px;
        background: #F2F2F2;

        .progress-bar {
            width: 0;
            height: 3px;
            background: #FF3D71;
        }
    }
}

#hero {
    padding-bottom: 0;

    .container {
        display:        flex;
        flex-direction: column;
        align-items:    center;
        gap:            20px;
        border-bottom:  1px solid #F1F0EF;
        padding-bottom: 50px;

        .hero {
            padding: 162px 0 0;

            &.section-title {
                max-width: 650px;
            }

            .breadcrumb {
                display:         flex;
                align-items:     center;
                justify-content: center;

                & li {
                    display: contents;

                    &, & a {
                        font-size:       14px;
                        font-style:      normal;
                        font-weight:     600;
                        line-height:     20px; /* 142.857% */
                        color:           #7061EF;
                        text-decoration: none;
                    }

                    &:last-child {
                        &, & a {
                            color: #2F1D49;
                        }
                    }

                    & + li::before {
                        content: "/\00a0";
                        color:   black;
                        padding: 0 0 0 5px;
                    }
                }
            }
        }
    }
}

#blog-item {
    .container {
        .content {
            padding-bottom: 100px;

            .blog-title {
                padding:    40px 0 100px;
                margin:     0 auto;
                max-width:  846px;

                .user {
                    display:     flex;
                    align-items: center;
                    gap:         10px;
                    padding:     20px 0;

                    & img {
                        max-width: 51px;
                    }
                }

                .info {
                    display:        flex;
                    flex-direction: column;
                    gap:            2px;

                    & p {
                        font-weight:    600;
                        color:          #2F1D49;
                        padding-bottom: 0;

                        &:last-child {
                            color: #7D89B0;
                        }
                    }
                }
            }

            & p, & p > a {
                font-size:      16px;
                font-style:     normal;
                font-weight:    400;
                line-height:    22px;
                color:          #454545;
                padding-bottom: 20px;
            }

            & h1, h2, h3, h4, h5, h6 {
                font-size:      18px;
                font-style:     normal;
                font-weight:    600;
                line-height:    24px;
                color:          #2F1D49;
                padding:        30px 0 10px;
            }

            & img + p {
                padding-top: 30px;
            }

            & img {
                width:          100%;
                max-width:      100%;
                max-height:     441px;
                object-fit:     contain;
                /*border-radius:  10px;*/
                background:     #f8f9fa;
            }

            & iframe {
                max-width:      100%;
                width:          100%;
                aspect-ratio:   16 / 9;
            }

            & ul, ol {
                margin-left:    30px;
                padding-bottom: 10px;

                & li {
                    font-size:      15px;
                    font-style:     normal;
                    font-weight:    400;
                    line-height:    22px;
                    color:          #454545;
                    padding-bottom: 10px;
                    list-style:     initial;
                }
            }

            .blog-tags {
                display: flex;
                gap:     10px;

                & button {
                    padding: 9px 14px;
                }
            }

            #content {
                display:    flex;
                flex-wrap:  wrap;

                .table-col {
                    width: 25%;
                }

                .content-col {
                    width: 50%;

                    .content-table {
                        display: none;
                    }
                }

                .content-table {
                    position:         sticky;
                    top:              140px;
                    display:          flex;
                    flex-direction:   column;
                    gap:              20px;
                    padding-right:    26px;
                    border-radius:    8px;

                    & strong {
                        font-size:    22px;
                        line-height:  28px;
                        font-weight:  400;
                        color:        #454545;
                    }

                    & ol, ul {
                        margin-left:    0;
                        padding:        0 0 0 10px;
                        position:       relative;
                        overflow:       hidden;

                        & li {
                            list-style:     none;
                            padding-bottom: 7px;

                            &.sub-item {
                                padding-left: 15px;
                            }

                            & a {
                                text-decoration: none;
                                font-size:       14px;
                                line-height:     20px;
                                font-weight:     400;
                                color:           #454545;
                                padding:         0;
                                height:          100%;

                                &:before {
                                    background-color:   #eee;
                                    content:            " ";
                                    display:            inline-block;
                                    height:             inherit;
                                    left:               0;
                                    margin-top:         -1px;
                                    position:           absolute;
                                    width:              2px;
                                }
                            }
                        }
                    }

                    & a.active {
                        color:       #2F1D49;
                        font-weight: 500;

                        &:before {
                            background-color: #F63D68;
                        }
                    }
                }
            }
        }
    }
}

#comments {
    .comment {
        padding:    0 217px 50px;
        margin:     0 auto;
        max-width:  846px;

        & h6 {
            font-size:      16px;
            font-style:     normal;
            font-weight:    600;
            line-height:    26px; /* 162.5% */
            color:          #2F1D49;
        }

        & span {
            font-size:   14px;
            font-style:  normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            color:       #7D89B0;
        }

        form {
            display:     flex;
            flex-wrap:   wrap;
            gap:         20px;
            padding-top: 50px;

            .form-group {
                display:        flex;
                flex-direction: column;
                gap:            8px;

                & label {
                    font-size:      12px;
                    font-style:     normal;
                    font-weight:    600;
                    line-height:    18px; /* 150% */
                    color:          #8F9BB3;
                }

                & input, & textarea {
                    font-size:      14px;
                    font-style:     normal;
                    font-weight:    600;
                    line-height:    20px; /* 142.857% */
                    color:          #8F9BB3;

                    padding:        14px 4px 14px 18px;
                    position:       relative;
                    border-radius:  10px;
                    border:         2px solid #C4C9D7;
                    resize:         none;
                }

                &:not(.form-comment) {
                    width: calc((100% - 20px) / 2);
                }

                &.form-comment {
                    width:       100%;
                    padding:     30px 0 35px;
                }
            }

            & input, & textarea {
                &:focus-visible {
                    border:     3px solid rgba(112, 97, 239, 0.20);
                    box-shadow: none;
                    outline:    none;
                }
            }
        }

        .notify {
            display:        flex;
            gap:            6px;
            padding-bottom: 30px;

            & label {
                font-size:      14px;
                font-style:     normal;
                font-weight:    400;
                line-height:    20px; /* 142.857% */
                color:          #7D89B0;
            }

            input[type="checkbox"] {
                filter: hue-rotate(240deg);
            }
        }

        .form-actions {
            display: flex;
            justify-content: space-between;

            & button {
                &:last-child {
                    padding: 8px 14px;
                }
            }
        }
    }
}

#blogs {
    padding-bottom: 150px;

    & h3 {
        font-size:      16px;
        font-style:     normal;
        font-weight:    600;
        line-height:    26px; /* 162.5% */
        color:          #2F1D49;
        text-align:     center;
        margin-bottom:  26px;
    }
}

#saleBanner {
    padding: 0 0 100px;

    .sale-banner {
        background: #FDE272;
        padding:    40px 60px;
    }
}

@media screen and (max-width: 1280px) {
    #blog-item {
        .container {
            .content {
                padding-bottom: 80px;

                .blog-title {
                    padding: 40px 0 80px;
                }

                #content {
                    .content-col {
                        width: 60%;
                    }
                }
            }
        }
    }

    #comments {
        .comment {
            padding: 0 100px 50px;
        }
    }

    #blogs {
        padding-bottom: 100px;
    }

    #saleBanner {
        padding: 0 0 50px;

        .sale-banner {
            padding: 20px 0;
        }
    }
}

@media screen and (max-width: 1024px) {
    #blog-item {
        .container {
            .content {
                #content {
                    flex-direction: column;
                    gap:            50px;

                    .table-col {
                        width: 100%;
                    }

                    .content-col {
                        width: 100%;
                    }

                    .content-table {
                        display:        flex;
                        align-items:    center;
                        padding-right:  20px;

                        & strong {
                            font-size:    25px;
                            line-height:  30px;
                        }

                        & ol, ul {
                            & li {
                                padding-bottom: 9px;

                                & a {
                                    font-size:     18px;
                                    line-height:   22px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #comments {
        .comment {
            padding: 0 80px 50px;
        }
    }
}

@media screen and (max-width: 768px) {
    .header-transparent {
        .progress-container {
            bottom: 0;
        }
    }

    #blog-item {
        .container {
            .content {
                .blog-title {
                    padding: 40px 0;
                }
            }
        }
    }

    #comments {
        .comment {
            padding: 0 30px 30px;

            form {
                padding-top: 30px;

                .form-group {
                    &:last-child {
                        padding: 20px 0 35px;
                    }
                }
            }
        }
    }

    #blogs {
        padding-bottom: 70px;
    }
}

@media screen and (max-width: 600px) {
    #blog-item {
        .container {
            .content {
                padding: 40px 0 50px;

                #content {
                    .content-table {
                        & strong {
                            font-size:    20px;
                            line-height:  24px;
                        }

                        & ol, ul {
                            & li {
                                padding-bottom: 8px;

                                & a {
                                    font-size:     16px;
                                    line-height:   18px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #comments {
        .comment {
            padding: 0 0 50px;

            form {
                padding-top: 20px;

                .form-group {
                    &:not(:last-child) {
                        width: 100%;
                    }

                    &:last-child {
                        padding: 0 0 30px;
                    }
                }
            }
        }
    }

    #blogs {
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 480px) {
    #hero {
        .container {
            padding-bottom: 40px;

            .hero {
                padding: 93px 0 0;

                &.section-title {
                    max-width: 100%;
                }
            }

            .content {
                #content {
                    .content-table {
                        & strong {
                            font-size:    18px;
                            line-height:  22px;
                        }

                        & ol, ul {
                            & li {
                                padding-bottom: 7px;

                                & a {
                                    font-size:     14px;
                                    line-height:   16px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #blog-item {
        .container {
            .content {
                & h4 {
                    font-size:   14px;
                    line-height: 20px;
                }

                .blog-tags {
                    flex-wrap: wrap;
                }
            }
        }
    }

    #comments {
        .comment {

            form {
                gap: 30px;

                .form-group {
                    &.form-comment {
                        padding: 0 0 20px;
                    }
                }
            }

            .notify {
                align-items: flex-start;
            }

            .form-actions {
                flex-direction: column;
                gap:            30px;

                & .btn {
                    &:first-child {
                        max-height: 48px;
                        padding:    14px 20px;
                    }
                }
            }
        }
    }

    #blogs {
        & h3 {
            margin-bottom:  16px;
        }
    }

    #saleBanner {
        .sale-banner {
            padding: 0 0 20px;
        }
    }
}