@media screen and (max-width: 1300px) {
    
}

@media screen and (max-width: 1200px) {
    .step {
        width: fit-content;
        width: 100%;
    }
    
    .undertitle,
    .hero2-title {
        width: 100%;
        text-align: center;
    }
    .code-img {
        height: 200px;
    }
}

@media screen and (max-width: 1140px) {
    .choices-wrapper {
        flex-direction: column;
    }
}

@media screen and (max-width: 1050px) {
    .first-part {
        display: none;
    }
    .second-part {
        width: 100%;
        max-width: none;
    }
}
@media screen and (max-width: 980px) {
    .part2-body {
        flex-direction: column;
    }
    .step2 {
        width: 100%;
    }
    .code-img {
        height: 200px;
        width: fit-content;
    }
    .img-title {
        width: 300px;
    }
}
@media screen and (max-width: 850px) {
    .illu2 {
        display: none;
    }
    .intro2 {
        width: 100%;
        flex-grow: 1;
        max-width: none;
        min-width: 100%;
    }
    pre {
        white-space: pre-wrap; 
    }
    code {
        font-size: 13px !important;
    }
    .choice-doc {
        width: 100%;
    }
    footer {
        flex-direction: column;
    }
}
@media screen and (max-width: 700px) {
    #searchContainer {
        position: absolute;
        top: 150%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
    }
    .hidden-word {
        display: none;
    }
    .header-item-text {
        display: none;
    }
    .footer-socials {
        flex-wrap: wrap;
    }
}
@media screen and (max-width: 525px) {
    .installation {
        padding: 10px;
    }
    .choice-doc {
        padding-inline: 0px;
        height: fit-content;
    }
    .soon {
        padding: 10px;
    }
    .documents {
        flex-direction: column;
        gap: 15px;
    }
    .code-img {
        height: unset;
        width: 90%;
    }
    .intro-title {
        font-size: 100px;
    }
    .intro {
        padding: 5px;
    }
    .btn-wrapper {
        padding-right: unset;
        margin-top: 20px;
    }
}
@media screen and (max-width: 400px) {
    .part2-body {
        padding-inline: 0;
    }

    .code {
        margin-inline: 0;
    }
    .monitor {
        display: none;
    }
    .mobile {
        display: block;
    }
    
}