@media screen and (max-width:1700px) {
    .sub-header-1 p:nth-child(1) {
        width: 17em;
    }
    .sub-header-2 img {
        height: 750px;
        width: 600px;
    }
}

@media screen and (max-width: 1500px) {
    body {
        padding: 0px 80px 0px 80px;
    }
    .nav-svg svg {
        margin-right: 11px;
        transform: scale(.9);
    }
    .nav-text p {
        margin-right: 22px;
        font-size: 19px;
    }
    .sub-header-1 p:nth-child(1) {
        width: 18em;
        font-size: 41px;
    }
    .sub-header-2 img {
        height: 730px;
        width: 570px;
    }
    .footer-bottom {
        left: -6em;
    }
    .left {
        left: -5em;
    }
}

@media screen and (max-width:1350px) {
    .sub-header-1 p:nth-child(1) {
        width: 18em;
        font-size: 37px;
    }
    .sub-header-2 img {
        height: 680px;
        width: 530px;
    }
    .main-footer {
        left: -5em;
    }
    .left {
        left: -5em;
    }
    .community_new_heading h5 {
        font-size: calc(0.9rem + 1vw);
    }
    .community_new_heading h1 span {
        font-size: calc(2rem + 1vw);
    }
}

@media screen and (max-width: 1300px) {
    body {
        padding: 0px 60px 0px 60px;
    }
    .nav-svg svg {
        margin-right: 0px;
        transform: scale(.8);
    }
    .nav-text p {
        margin-right: 18px;
        font-size: 17px;
    }
    .sub-header-1 p:nth-child(1) {
        width: 19em;
        font-size: 32px;
    }
    .sub-header-1 p:nth-child(2) {
        font-size: 16px;
    }
    .sub-header-2 img {
        height: 600px;
        width: 480px;
    }
    .footer-bottom {
        left: -5em;
    }
    .left {
        left: -4em;
    }
    .community_new_heading {
        padding-left: 2em;
    }
}

@media screen and (min-width:1441px) {
    .community_new {
        background-size: 90%;
        background-position-x: 28em;
        background-position-y: -17em;
    }
}

@media screen and (max-width:1100px) {
    .sub-header-1 p:nth-child(1) {
        width: 21em;
        font-size: 28px;
    }
    .sub-header-1 p:nth-child(2) {
        font-size: 14px;
    }
    .sub-header-2 img {
        height: 560px;
        width: 440px;
    }
    .header-div {
        margin-top: 7rem;
    }
    .vision-div {
        width: 120vw;
    }
    .left {
        left: -4em;
    }
    .community_new {
        height: 41em;
    }
}

@media screen and (max-width: 1024px) {
    body {
        padding: 0px 40px 0px 40px;
    }
    .nav-svg svg {
        margin-right: -5px;
        transform: scale(.7);
    }
    .nav-text p {
        margin-right: 13px;
        font-size: 17px;
    }
    .navbar {
        width: 100%;
    }
    .sub-header-1 p:nth-child(1) {
        width: auto;
        font-size: 35px;
    }
    .sub-header-1 p:nth-child(2) {
        font-size: 17px;
        width: auto;
    }
    .sub-header-2 img {
        height: 530px;
        width: 420px;
    }
    .sub-header-btn button:nth-child(1) {
        margin-left: 1em;
        transform: scale(1.15);
        margin-left: em;
    }
    .timeline-container {
        height: 102rem;
    }
    .main-footer {
        left: -1.5em;
    }
    .footer-bottom {
        left: -4em;
    }
    .benefits-section {
        flex-direction: column;
        align-items: center;
    }
    .benefits-section1-header p {
        font-size: calc(14px + 1vw)!important;
    }
    .benefits-section1-middle p {
        font-size: calc(9px + 1vw)!important;
    }
    .benefits-section1-middle ul li {
        font-size: calc(9px + 1vw)!important;
    }
    .img-benefits-section img {
        height: calc(36px + 9vw)!important;
    }
    .left {
        left: -2.5em;
    }
    .community_new {
        background-position-x: 11em;
    }
    .community_new_heading {
        padding-left: 0.8em;
    }
}

@media screen and (min-width:850px) {
    .connect-wallet-lg button {
        visibility: visible;
    }
}

@media screen and (max-width:850px) {
    .navbar {
        width: 90%;
        position: relative;
        top: -9px;
    }
    .sidenav {
        display: inline-block!important;
    }
    .hamburger-icon {
        display: inline-block!important;
    }
    .nav-svg svg {
        display: none;
    }
    .nav-text p {
        display: none;
    }
    .header-div {
        flex-direction: column;
    }
    .sub-header-1 p:nth-child(1) {
        font-size: 27px;
    }
    .sub-header-1 p:nth-child(2) {
        font-size: 18px;
    }
    .sub-header-2 {
        display: flex;
        justify-content: center;
    }
    .sub-header-2 img {
        height: 530px;
        width: 420px;
    }
    .timeline-container {
        height: 133rem;
    }
    .community_new_heading {
        justify-content: flex-start;
    }
    .community_new_heading h1 {
        margin-top: 1em;
    }
}

@media screen and (max-width:825px) {
    .sub-header-1 p:nth-child(1) {
        font-size: 36px;
    }
    .sub-header-1 p:nth-child(2) {
        font-size: 19px;
    }
    body {
        padding: 0 20px;
    }
    .arrows {
        display: none;
    }
    .timeline {
        max-width: 100%;
    }
    .timeline .event:before {
        left: -1em;
        top: -26px;
    }
    .footer-bottom {
        left: -2em;
    }
    .left {
        left: -1.3em;
    }
    .ques {
        width: 100%;
    }
    .faq-container {
        width: auto;
        padding: 0;
    }
    .community_new {
        height: 37em;
    }
}


/* TABLET SCREEN */

@media screen and (max-width:767px) {
    .community_new::after {
        /* transform: rotate(90deg); */
        top: 0em;
        left: 0em;
        width: 134vw;
        height: 80%;
    }
    .community_new {
        height: 62em;
        background-position-x: -2em;
        background-position-y: 20em;
        background-size: 111%;
    }
}


/* ================================= */

@media screen and (max-width:725px) {
    .vision-div h2 {
        font-size: 2rem;
    }
    .vision-div p {
        font-size: 1rem;
    }
    .vision-div {
        padding: 2rem 20vw;
        left: -3rem;
    }
    .auction-card {
        margin: 4em 0;
    }
    .who-div {
        left: -5rem;
        padding: 7rem 2em 7rem 5rem;
    }
    .our_team {
        clip-path: ellipse(140% 70% at 50% 70%);
    }
    /* .community_new::after {
        bottom: -10em;
        left: -25em;
    } */
}

@media screen and (max-width: 600px) {
    /* .community_new::after {
        bottom: -0em;
        left: -25em;
    } */
}

@media screen and (max-width: 450px) {
    .navbar {
        width: 90%;
    }
    .sub-header-2 img {
        height: 400px;
        width: 340px;
    }
    .sub-header-btn button {
        transform: scale(.9);
        margin-left: em;
    }
    .sub-header-1 p:nth-child(1) {
        font-size: 30px;
    }
    .sub-header-1 p:nth-child(2) {
        font-size: 18px;
    }
    .sub-header-btn button:nth-child(1) {
        font-size: 12px;
    }
    .sub-header-btn button:nth-child(2) {
        font-size: 12px;
    }
    .header-div {
        margin-top: 5rem;
    }
    .timeline-container {
        padding-top: 6em;
        height: 133rem;
    }
    .community_new::after {
        width: 143vw;
    }
    .community_new {
        height: 51em;
    }
    .community_new_heading {
        margin-left: 2rem;
    }
    .community_new_heading h1 {
        margin-top: 1em;
    }
    .community-links {
        margin-left: -29px;
    }
}

@media screen and (max-width: 375px) {
    .timeline-container {
        height: 140rem;
    }
    .who-div {
        left: -4em;
    }
    .who-div h2 {
        font-size: 30px;
        margin-bottom: 20px;
    }
    .community_new::after {
        width: 162%;
    }
    .community_new {
        height: 47em;
        background-position-x: 0em;
        background-position-y: 21em;
        background-size: 111%;
    }
}

@media screen and (max-width:320px) {
    .community-links::after {
        height: 175%;
    }
    .community_new {
        background-position-x: 0em;
        background-position-y: 21em;
        background-size: 120%;
    }
}

@media screen and (max-width: 340px) {
    .timeline-container {
        height: 156rem;
    }
}


/* HEIGHT */

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
    .sidenav a {
        font-size: 18px;
    }
}


/* ===================================================== */


/* TIMELINE */


/* ==================================================== */

@media screen and (min-width: 768px) {
    .timeline-container,
    .timeline-container {
        margin-left: 6em;
        margin-right: 6em;
    }
}

@media screen and (min-width: 768px) and (min-width: 922px) {
    .timeline-container,
    .timeline-container {
        max-width: calc((80vw / 4) * 4);
        margin-right: auto;
        margin-left: auto;
    }
}

@media screen and (min-width: 922px) {
    .timeline-container::after,
    .timeline-container::after {
        height: 256%;
        left: 35%;
    }
}

@media screen and (min-width: 922px) {
    .timeline-container .timeline-content,
    .timeline-container .timeline-content {
        max-width: 45%;
        position: unset;
    }
    .timeline-container .timeline-content.left,
    .timeline-container .timeline-content.left {
        align-items: flex-end;
    }
    .timeline-container .timeline-content.right,
    .timeline-container .timeline-content.right {
        margin-right: -2em;
        margin-left: auto;
        position: unset;
    }
    .timeline-container .timeline-content.right span,
    .timeline-container .timeline-content.right span {
        position: unset;
    }
    .timeline-container .timeline-content.right span::before,
    .timeline-container .timeline-content.right span::before {
        left: calc(35.5% - 3px);
        transform: scale(4);
    }
}


/* @media screen and (min-width: 768px) {
    .timeline-container .timeline-content article,
    .timeline-container .timeline-content article {
        padding: 1em 2em;
    }
} */

@media screen and (min-width: 768px) and (min-width: 922px) {
    .timeline-container .timeline-content article,
    .timeline-container .timeline-content article {
        position: absolute;
    }
}

@media screen and (min-width: 922px) {
    .timeline-container .timeline-content span,
    .timeline-container .timeline-content span {
        position: unset;
        margin-top: -1.5em;
    }
    .timeline-container .timeline-content span::before,
    .timeline-container .timeline-content span::before {
        left: calc(50% - 3px);
    }
}


/* =============================================================== */


/* FOOTER */


/* =============================================================== */


/* Media Query For different screens */