/* extra small */
@media (max-width: 575.98px) {

    /* Header */
    .menu {
        margin: 20px 0 0;
    }

    .menu .item {
        margin: 10px 0;
        padding: 0;
        position: static;
    }

    .menu .item .item_list .list a {
        width: 100%;
        padding: 6px 0 6px 10px;
        display: inline-block;
        text-align: start;
        text-decoration: none;
        color: #ffffff;

        &:hover {
            background-color: var(--button-color);
        }
    }

    .menu .item .item_list {
        display: none;
        width: 100%;
        position: static;
        top: 100%;
        left: 0;
        background-color: #000000;
    }

    .item:hover .item_list,
    .item:active .item_list {
        display: block;
    }

    /* Header */

    /* Banner Section */
    .banner {
        min-height: 85vh;
    }

    .banner .title {
        margin-top: 40px;
    }

    .banner .title h1 {
        font-size: 50px;
    }

    .banner .title p {
        width: 100%;
    }

    .common_btn {
        padding: 6px 17px;
        text-transform: capitalize;
        font-size: 16px;
    }

    .banner_img {
        width: 300px;
        height: 340px;
        margin-top: -30px;
        /* overflow: hidden; */
    }

    .buttons {
        margin: 50px 0 80px;
    }

    .starting .getStart h3 {
        font-size: 35px;
    }

    /* Banner Section */
    /* Starting Section */
    .starting .big_box {
        padding: 20px 20px;
    }

    .starting .big_box h2 {
        font-size: 24px;
        line-height: 30px;
    }

    .starting .big_box p {
        width: 100%;
    }

    .starting .box {
        width: 300px;
        height: 290px;
    }

    /* Starting Section */
    .box .box_text {
        width: 240px;
    }

    /* Docs Section */
    .docs {
        padding-top: 30px;
    }

    .common h3 {
        font-size: 30px;
    }

    .docs .docs_box .up h4 {
        font-size: 22px;
    }

    .docs .docs_box .up_link a {
        padding: 6px 17px;
    }

    .docs .docs_box .up {
        padding: 0 0 30px 0;
    }

    .deeper {
        padding: 50px 0 80px;
    }

    .changelog {
        margin: 50px 0 0 0;
    }

    .changelog h4 {
        font-size: 30px;
    }

    .changelog a {
        padding: 6px 17px;
    }

    .form {
        padding: 15px;
    }

    .form h4 {
        font-size: 30px;
    }

    form .input button {
        padding: 6px 17px;
        top: 13px;
    }

    .live a {
        padding: 6px 0;
    }

    /* Docs Section */

    /* Footer Section */
    .footer {
        margin: 0;
        padding: 80px 0 20px;
    }

    .footer .right {
        margin-top: 30px;
    }

    .footer .right ul li {
        margin-top: 6px;
    }

    /* Footer Section */


}

/* small */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Header */
    .menu {
        margin: 20px 0 0;
    }

    .menu .item {
        margin: 10px 0;
        padding: 0;
        position: static;
    }

    .menu .item .item_list .list a {
        width: 100%;
        padding: 6px 0 6px 10px;
        display: inline-block;
        text-align: start;
        text-decoration: none;
        color: #ffffff;

        &:hover {
            background-color: var(--button-color);
        }
    }

    .menu .item .item_list {
        display: none;
        width: 100%;
        position: static;
        top: 100%;
        left: 0;
        background-color: #000000;
    }

    .item:hover .item_list,
    .item:active .item_list {
        display: block;
    }

    /* Header */

    /* Banner Section */
    .banner {
        min-height: 85vh;
    }

    .banner .title {
        margin-top: 40px;
    }

    .banner .title h1 {
        font-size: 70px;
    }

    .banner .title p {
        width: 100%;
    }

    .common_btn {
        padding: 10px 20px;
        text-transform: uppercase;
        font-size: 16px;
    }

    .banner_img {
        width: 360px;
        height: 400px;
        margin-top: -30px;
    }

    .buttons {
        margin: 50px 0 80px;
    }

    .starting .getStart h3 {
        font-size: 40px;
    }

    /* Banner Section */
    /* Starting Section */
    .starting .big_box {
        padding: 20px 20px;
    }

    .starting .big_box h2 {
        font-size: 30px;
        line-height: 30px;
    }

    .starting .big_box p {
        width: 100%;
    }

    .starting .box {
        width: 340px;
        height: 325px;
    }

    /* Starting Section */
    .box .box_text {
        width: 265px;
    }

    /* Docs Section */
    .docs {
        padding-top: 30px;
    }

    .common h3 {
        font-size: 40px;
    }

    .docs .docs_box .up h4 {
        font-size: 30px;
    }

    .docs .docs_box .up_link a {
        padding: 10px 20px;
    }

    .docs .docs_box .up {
        padding: 0 0 30px 0;
    }

    .deeper {
        padding: 50px 0 80px;
    }

    .changelog {
        margin: 50px 0 0 0;
    }

    .changelog h4 {
        font-size: 30px;
    }

    .changelog a {
        padding: 10px 20px;
    }

    .form {
        padding: 15px;
    }

    .form h4 {
        font-size: 30px;
    }

    form .input button {
        padding: 6px 17px;
        top: 13px;
    }

    .live a {
        padding: 6px 0;
    }

    /* Docs Section */

    /* Footer Section */
    .footer {
        margin: 0;
        padding: 80px 0 20px;
    }

    .footer .right {
        margin-top: 30px;
    }

    .footer .right ul li {
        margin-top: 6px;
    }

    /* Footer Section */
}


/* medium */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Header */
    .menu {
        margin: 20px 0 0;
    }

    .menu .item {
        margin: 10px 0;
        padding: 0;
        position: static;
    }

    .menu .item .item_list .list a {
        width: 100%;
        padding: 6px 0 6px 10px;
        display: inline-block;
        text-align: start;
        text-decoration: none;
        color: #ffffff;

        &:hover {
            background-color: var(--button-color);
        }
    }

    .menu .item .item_list {
        display: none;
        width: 100%;
        position: static;
        top: 100%;
        left: 0;
        background-color: #000000;
    }

    .item:hover .item_list,
    .item:active .item_list {
        display: block;
    }

    /* Header */

    /* Banner Section */
    .banner {
        min-height: 85vh;
    }

    .banner .title {
        margin-top: 40px;
    }

    .banner .title h1 {
        font-size: 80px;
    }

    .banner .title p {
        width: 100%;
    }

    .common_btn {
        padding: 10px 20px;
        text-transform: uppercase;
        font-size: 16px;
    }

    .banner_img {
        width: 450px;
        height: 500px;
        margin-top: -30px;
    }

    .buttons {
        margin: 50px 0 80px;
    }

    .starting .getStart h3 {
        font-size: 40px;
    }

    /* Banner Section */
    /* Starting Section */
    .starting .big_box {
        padding: 20px 20px;
    }

    .starting .big_box h2 {
        font-size: 30px;
        line-height: 30px;
    }

    .starting .big_box p {
        width: 100%;
    }

    .starting .box {
        width: 340px;
        height: 275px;
    }

    /* Starting Section */
    .box .box_text {
        width: 265px;
    }

    /* Docs Section */
    .docs {
        padding-top: 30px;
    }

    .common h3 {
        font-size: 40px;
    }

    .docs .docs_box .up h4 {
        font-size: 26px;
    }

    .docs .docs_box .up_link a {
        padding: 10px 20px;
    }

    .docs .docs_box .up {
        padding: 0 0 30px 0;
    }

    .deeper {
        padding: 50px 0 80px;
    }

    .changelog {
        margin: 50px 0 0 0;
    }

    .changelog h4 {
        font-size: 30px;
    }

    .changelog a {
        padding: 10px 20px;
    }

    .form {
        width: 520px;
        padding: 15px;
    }
    /* .form {
    margin: 50px 0 0;
    padding: 50px;
    display: flex
;
    flex-direction: column;
    justify-content: space-between;
    background-color: #19161C;
    border-radius: 14px;
    box-shadow: 0px 58px 80px 0px #00000029;
} */

    .form h4 {
        font-size: 30px;
    }

    form .input button {
        padding: 6px 17px;
        top: 13px;
    }

    .live a {
        padding: 6px 0;
    }

    /* Docs Section */

    /* Footer Section */
    .footer {
        margin: 0;
        padding: 80px 0 20px;
    }

    .footer .right {
        margin-top: 30px;
    }

    .footer .right ul li {
        margin-top: 6px;
    }

    /* Footer Section */
}


/* large */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Banner Section */
    .banner .title h1 {
    font-size: 85px;
}
    .banner_img {
    width: 401px;
    height: 468px;
}
    /* Banner Section */

    /* Starting Section */
    .box .box_text {
    width: 240px;
    bottom: 30px;
}
    .footer {
    padding: 80px 0 30px;
}
    /* Footer */
}

/* extra large */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .banner_img {
    width: 530px;
    height: 578px;
}
}

/* extra extra large */
@media (min-width: 1400px) {}