.developer-section {
    min-height: 700px;
    color: var(--light-color);
    padding: 200px var(--website-developer-section-inline-padding) 50px;
    background-color: var(--dark2-color);

    &::after {
        content: "";
        width: 100%;
        height: 210%;
        position: absolute;
        top: -330px;
        left: 0;
        z-index: 1;
        opacity: 0.25;
        background-image: url(../../images/website/developer/hero-bg.png);
        background-position: top;
        background-size: cover;
        background-repeat: no-repeat;
    }

    & .inner {
        position: relative;
        z-index: 2;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;

        &.hidden {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        & > div {
            width: 100%;
            margin: auto;
        }

        & .content {
            & .text {
                margin-bottom: 30px;

                & h1 {
                    font-size: 36px;
                    margin-bottom: 20px;
                    color: var(--light-main-color);
                }

                & .description {
                    width: 70%;
                    font-size: 18px;
                    line-height: 1.8;
                    text-wrap: balance;
                    color: var(--dark-muted-color);
                }
            }

            & .tags {
                gap: 15px;
                width: 540px;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

                & .tag {
                    padding: 10px;
                    font-size: 14px;
                    border-radius: 10px;
                    text-wrap: nowrap;
                    color: var(--light-main-color);
                    background-color: var(--light-color);

                    & svg {
                        width: 20px;
                        height: 20px;
                    }
                }
            }
        }

        & .image {
            width: 750px;
            position: relative;
            top: -50px;

            & img {
                cursor: grab;
                transition: transform 0.1s ease-out;
                transform-origin: center;
            }

            & img:active {
                cursor: grabbing;
            }
        }
    }
}

@media (max-width: 1440px) {
    .developer-section {
        padding-inline: calc(
            var(--website-developer-section-inline-padding) / 2
        );
    }
}

@media (max-width: 1080px) {
    .developer-section {
        padding-inline: calc(
            var(--website-developer-section-inline-padding) / 3
        );
    }
}

@media (max-width: 768px) {
    .developer-section {
        padding-inline: var(--small-inline-padding);
    }
}

.programming-section {
    margin-top: 0;
    padding: 70px var(--website-programming-section-inline-padding) 70px;
    background-color: var(--blog-show-background-color);

    & > .title {
        font-size: 30px;
    }

    & .title .title-badge::before {
        transform: skew(0);
        border-radius: 10px;
    }

    & .website {
        padding: 20px 15px;
        max-height: 150px;
        border-radius: 15px;
        transition: all 0.1s ease;
        background-color: var(--light-color);
        border: 1px solid var(--dark-muted-color);
        box-shadow: 0 8px 24px rgba(17, 24, 39, 0.06);
        border: 1px solid rgba(17, 24, 39, 0.06);

        overflow: hidden;
        position: relative;

        &::before {
            content: "";
            width: 100%;
            height: 200%;
            position: absolute;
            top: 50%;
            left: 50%;
            opacity: 0;
            z-index: 50;
            background: linear-gradient(
                90deg,
                transparent 0%,
                var(--light-color) 50%,
                transparent 100%
            );
            transform: translateX(-100%) translateY(-100%) rotate(45deg);
            pointer-events: none;
        }

        & > .title {
            margin: 0;
            font-size: 16px;
        }

        & .image {
            width: 50px;
            height: 50px;
            margin: 0 auto 10px;
            object-fit: contain;
            position: relative;
            z-index: 1;

            &::after {
                content: "";
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                opacity: 0.1;
                border-radius: 10px;
                background-color: var(--light-main-color);
            }

            & img {
                transition: all 0.1s ease;
            }
        }

        &:hover {
            transform: translateY(-3px);

            &::before {
                animation: shineLogo 2s ease-in-out forwards;
            }

            & .image {
                & img {
                    transform: scale(1.05);
                }
            }
        }
    }
}

@media (max-width: 1440px) {
    .programming-section {
        padding-inline: calc(
            var(--website-programming-section-inline-padding) / 3
        );
    }
}

@media (max-width: 1080px) {
    .programming-section {
        padding-inline: calc(
            var(--website-programming-section-inline-padding) / 4
        );
    }
}

@media (max-width: 992px) {
    .programming-section {
        padding-inline: var(--small-inline-padding);
    }
}

.important-articles {
    margin-top: 0;
    padding: 50px calc(var(--important-articles-section-inline-padding) * 2);

    & > .title {
        font-size: 30px;
    }
}

.website-developer .important-articles {
    position: relative;
    padding: 50px calc(var(--important-articles-section-inline-padding) * 2);
    background-color: var(--website-articles-background-color);

    &::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        background-image: url(../../images/website/reviews-bg.jpg);
        background-position: top left;
        background-size: 33%;
    }
}

@media (max-width: 1600px) {
    .website-developer .important-articles,
    .important-articles {
        padding: 50px var(--important-articles-section-inline-padding);
    }
}

@media (max-width: 1180px) {
    .website-developer .important-articles,
    .important-articles {
        padding: 50px calc(var(--important-articles-section-inline-padding) / 2);
    }
}

@media (max-width: 992px) {
    /* .articles-section {
        padding: 140px var(--blog-articles-section-inline-padding) 30px;
    } */

    .website-developer .important-articles,
    .important-articles {
        padding: 50px var(--small-inline-padding);
    }
}

@media (max-width: 425px) {
    /* .articles-section {
        padding: 120px var(--blog-articles-section-inline-padding) 30px;
    } */
}

.website-design {
    position: relative;
    /* padding: 70px 30px 70px 100px; */
    padding-block: 70px;
    padding-inline: var(--website-design-section-inline-padding);
    overflow: hidden;

    &::after {
        content: "";
        position: absolute;
        top: -100px;
        right: 0;
        width: 100%;
        height: 180%;
        background-image: url(../../images/website/developer/right-bg.png);
        background-repeat: no-repeat;
        background-position: right top;
        background-size: cover;
        background-position: center;
        z-index: -2;
    }

    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: -60px;
        right: auto;
        width: 100%;
        height: 100%;
        opacity: 0.95;
        background-image: url(../../images/website/developer/left-bg.png);
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 35% 100%;
        z-index: 3;
    }

    & .layout {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.9;
        background: var(--light-color);
    }

    & .content {
        display: flex;
        align-items: center;
        justify-content: start;
        gap: 40px;
        position: relative;
        z-index: 5;
    }

    & .text {
        width: 53%;
    }

    & .title {
        color: var(--light-main-color);
        font-weight: bold;
        margin-bottom: 15px;
    }

    & .heading {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 25px;
        position: relative;
    }

    & .heading::after {
        content: "";
        position: absolute;
        bottom: -10px;
        right: 0;
        left: auto;
        width: 200px;
        height: 3px;
        background: var(--light-main-color);
    }

    & .description {
        font-size: 20px;
        line-height: 1.9;
        margin-bottom: 10px;
        color: var(--main-text);
    }

    & .description a {
        color: var(--purple-color);
    }

    & .tags {
        gap: 15px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    & .tag {
        padding: 10px;
        border-radius: 12px;
        background: var(--light-color);
        box-shadow: 0 10px 30px -8px var(--dark-muted-color);
        border: 1px solid var(--main-hover-color);
        transition: all 0.1s ease;

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 20px -3px var(--dark-muted-color);
        }
    }

    & .tag span {
        color: var(--light-main-color);
    }

    & .tag .icon {
        width: 35px;
        height: 35px;
        background: #ffe9dd;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        color: var(--light-main-color);
    }

    & .image {
        width: 35%;
        overflow: hidden;
        border-radius: 10px;
        border: 2px solid var(--light-color);
        box-shadow: 0 0 30px -8px var(--light-color);
        position: relative;
        top: -30px;
        left: -70px;
        right: auto;
    }

    & .image img {
        width: 100%;
        display: block;
    }
}

html[lang="en"] {
    .website-design {
        &::before {
            right: -60px;
            left: auto;
            background-position: right top;
        }

        & .heading::after {
            left: 0;
            right: auto;
        }
    }

    & .image {
        right: -70px;
        left: auto;
    }
}

.faqs-section {
    margin-top: 0;
    position: relative;
    padding: 50px var(--faqs-section-inline-padding);
    text-align: start;

    &::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0.5;
        background-color: var(--light-red-color);
    }

    & .title .title-badge::before {
        transform: skew(0);
        border-radius: 10px;
    }

    & .question-item {
        cursor: pointer;
        padding: 15px;
        border-radius: 15px;
        transition: all 0.1s ease;
        border: 1px solid transparent;
        background-color: var(--light-color);
        box-shadow: 0 4px 6px -5px var(--light-muted-color);

        & .question {
            font-size: 14px;
            position: relative;

            &::before {
                content: "";
                width: calc(100% + 30px);
                height: calc(100% + 30px);
                position: absolute;
                top: 50%;
                left: 50%;
                border-radius: inherit;
                transform: translate(-50%, -50%);
            }
        }

        & [data-faq-toggle] {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        & .open {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-inline-end: 5px;
            color: var(--light-main-color);
            transition: transform 0.1s ease;
            position: relative;

            &::before {
                content: "";
                width: 25px;
                height: 25px;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 0;
                opacity: 0.2;
                border-radius: 9px;
                transform: translate(-50%, -50%);
                background-color: var(--light-main-color);
            }

            & i,
            & svg {
                font-size: 10px;
                transition: 0.1s ease;
            }
        }

        & [data-faq-answer] {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            transition: all 0.1s ease;
            margin-top: 0;
        }

        &.active {
            & [data-faq-answer] {
                max-height: 500px;
                opacity: 1;
                margin-top: 15px;
                display: block;
            }

            & .open {
                transform: rotate(45deg);
            }
        }
    }
}

@media (max-width: 1180px) {
    .developer-section {
        & .inner {
            & .content {
                & .text {
                    & h1 {
                        font-size: 28px;
                    }

                    & .description {
                        width: 80%;
                        font-size: 16px;
                    }
                }
            }
        }
    }
}

@media (max-width: 992px) {
    .developer-section {
        & .inner {
            padding-bottom: 50px;
            flex-direction: column-reverse;

            & .image {
                width: 50%;
            }

            & .content {
                & .text {
                    & h1 {
                        font-size: 20px;
                    }

                    & .description {
                        width: 100%;
                        font-size: 14px;
                    }
                }

                & .tags {
                    width: 100%;
                    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                }
            }
        }
    }

    .website-design {
        padding-inline: 0;

        &::before {
            opacity: 0.4;
            background-size: 50% 90%;
        }

        & .content {
            z-index: 50;
            backdrop-filter: blur(10px);
            flex-direction: column-reverse;
            padding: var(--inline-padding);
        }

        & .image {
            width: 50%;
        }

        & .text {
            width: 100%;
        }
    }
}

@media (max-width: 768px) {
    .programming-section {
        & .websites-items {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .programming-section {
        & > .title {
            font-size: 20px;
        }
    }

    .important-articles {
        & > .title {
            font-size: 20px !important;
        }
    }

    .website-design {
        position: relative;
        padding: 0px var(--main-inline-padding) 0px;
    }

    .developer-section {
        padding: 100px var(--inline-padding) 50px;

        & .inner {
            & .image {
                width: 50%;
                top: 0;
            }
        }
    }

    .faqs-section {
        padding-inline: calc(var(--faqs-section-inline-padding) / 2);
    }
}

@media (max-width: 425px) {
    .important-articles {
        & > .title {
            font-size: 12px !important;
        }

        & > .description {
            font-size: 10px;
        }

        & > .main-articles-section {
            padding-inline: var(--inline-padding);
        }
    }

    .programming-section {
        & .websites-items {
            grid-template-columns: repeat(1, 1fr);
        }

        & > .title {
            font-size: 16px;

            & > .title-badge {
                font-size: 12px;
                padding: 1px 10px;

                &::before {
                    border-radius: 8px;
                }
            }
        }
    }

    .website-design {
        & .content {
            gap: 0;
        }

        & .image {
            width: 80%;
        }

        & .title {
            font-size: 14px;
        }

        & .heading {
            font-size: 12px;
            margin-bottom: 25px;
        }

        & .heading::after {
            width: 25%;
            height: 1px;
        }

        & .description {
            font-size: 12px;
            margin-bottom: 10px;
        }

        & .tag {
            padding: 7px;
            font-size: 10px;
            border-radius: 8px;
        }

        & .tag .icon {
            width: 25px;
            height: 25px;
            border-radius: 8px;
        }
    }

    .faqs-section {
        padding-inline: var(--small-inline-padding);
    }
}