/* container */
.container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/*med screen*/
@media (min-width: 992px) {
    .container {
        width: 95%;
    }
}

/*large screen*/
@media (min-width: 1200px) {
    .container {
        width: 90%;
    }
}

/* end container */
/* start nav section */
@media (min-width: 900px) {
    nav .container .logo {
        display: block !important;
    }

    nav .container #open_btn {
        display: none;
    }

    nav .nav_container {
        width: fit-content;
        max-width: unset;
        min-height: auto;
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        padding: 0;
        position: static;
        display: flex;
        flex-direction: row;
        background-color: transparent;
    }

    nav .nav_container li a {
        border: none;
        margin-right: 21px;
        justify-content: center;
        font-size: 18px;
    }

    nav .nav_container .container_heading {
        display: none;
    }

    nav .container .buttons {
        display: flex;
    }

    nav .menu-contant-sm {
        display: none;
    }

    nav .container .buttons button {
        background-color: transparent;
        color: #fff;
        width: fit-content;
        padding: 14px 30px;
        margin-right: 15px;
        border-color: rgb(255 255 255/17%);
    }

    nav .container .buttons button:last-of-type {
        background: rgba(255, 255, 255, 0.15);
        border: none;
    }
}

/* end nav section */

/* start landing section */
@media (max-width: 913px) {
    .landing .container {
        flex-direction: column;
        position: static;
        transform: unset;
        -webkit-transform: unset;
        -moz-transform: unset;
        -ms-transform: unset;
        -o-transform: unset;
    }

    .landing .content {
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .landing .content h1 {
        font-size: 40px;
    }

    .landing .content .landing_buttons button {
        width: 155px;
        margin-right: unset;
    }

    .landing .content .landing_buttons button:first-of-type {
        margin-right: 10px;
    }

    .landing figure {
        width: 100%;
        order: -1;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 529px) {
    .landing figure div > img {
        width: 43%;
    }
}

@media (max-width: 388px) {
    .landing .content h1 {
        font-size: 30px;
    }
    .landing .content .landing_buttons {
        flex-direction: column;
        flex-wrap: wrap;
        width: 100%;
    }
    .landing .content .landing_buttons button:first-of-type {
        margin-right: 0;
    }
    .landing .content .landing_buttons button {
        width: 100%;
    }
}
@media (max-width: 300px) {
    .landing .content h1 {
        font-size: 25px;
    }
}
/* end landing section */
/*
breakpoints
x-small <576px
small >=579px
medium >=767px
large >=992px
x-large >=1200px
xx-large >=1400px
*/
@media (max-width: 860px) {
    /* landing */
    .landing {
        padding-bottom: 5rem;
    }

    /* counters */
    .counters ul {
        text-align: center;
    }

    .counters ul,
    .howToMint ul {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 2rem;
    }

    .counters .content ul li h3 {
        font-size: 1.5rem;
        letter-spacing: 2.1px;
        font-weight: 500;
    }

    .counters .content ul li span {
        font-size: 15px;
    }

    /* carousel */
    .carousel .content ul li {
        width: 150px !important;
    }

    /* about */
    .about {
        display: grid !important;
    }

    .about .aboutText {
        order: -1 !important;
        margin-bottom: 3rem !important;
    }

    .about figure {
        margin: 0 !important;
    }

    .about .content {
        display: grid !important;
    }

    .about figure,
    .about .aboutText {
        width: 100% !important;
    }

    .about figure .top,
    .about figure .bottom {
        width: 40% !important;
        padding: 10px;
    }

    /* howToMint */
    .howToMint {
        margin-top: 8rem !important;
        margin-bottom: 5rem !important;
    }

    .howToMint .title h2,
    .about h2 {
        font-size: 1.5rem !important;
        letter-spacing: 2px !important;
    }

    .howToMint .howToMintContent li {
        justify-content: unset !important;
    }

    .howToMint .howToMintContent span {
        font-size: 4rem !important;
    }

    .howToMint .howToMintContent li p {
        font-size: 1.1rem !important;
        font-weight: 400 !important;
        line-height: 2rem !important;
        margin-left: 1rem !important;
    }

    /*about cards */
    .about p {
        line-height: 25px !important;
        padding-bottom: 0px !important;
        font-size: 15px !important;
        letter-spacing: 0.5px !important;
        font-weight: 100 !important;
    }

    .about .cards {
        margin-top: 2rem !important;
    }

    .about .cards .card {
        padding: 15px !important;
        margin: 0 !important;
        margin-left: 1rem !important;
    }

    .about .cards .card h2 {
        font-size: 20px !important;
        margin-bottom: 0.5rem !important;
        margin-left: 0.2rem !important;
        line-height: 1.3 !important;
        letter-spacing: 2px !important;
        font-weight: 200 !important;
        font-size: 1.2rem !important;
    }

    .about .card img {
        width: 25% !important;
    }
}

@media (max-width: 600px) {
    /* landing */
    .landing {
        padding-bottom: 3rem;
    }

    /* counters */
    .counters .content ul li h3 {
        font-size: 1.3rem;
        letter-spacing: 1px;
        font-weight: 200;
    }

    .counters .content ul li span {
        font-size: 15px;
    }

    /* about */
    .about {
        padding: 3rem 0;
    }

    .about p {
        font-size: 15px !important;
    }

    .about figure .top,
    .about figure .bottom {
        width: 45% !important;
    }

    .about .cards {
        display: grid !important;
        grid-gap: 2rem !important;
    }

    .about .cards .card {
        margin-left: 0 !important;
    }

    .about .card img {
        width: 10% !important;
    }

    .about .cards .card h2 {
        font-size: 20px !important;
    }

    /* howToMint */
    .howToMint {
        margin-top: 3rem !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 400px) {
    /* carousel */
    .carousel .content ul li {
        width: 100px !important;
    }

    /* counters */
    .counters .content ul {
        margin: 2rem !important;
    }

    /* howToMint */
    .howToMint ul,
    .counters .content ul {
        grid-template-columns: repeat(1, 1fr) !important;
        grid-gap: 1rem !important;
    }

    .howToMint .howToMintContent span {
        font-size: 2rem !important;
    }

    .howToMint .howToMintContent li p {
        font-size: 0.9rem !important;
        font-weight: 200 !important;
        line-height: 2rem !important;
        margin-left: 1rem !important;
    }

    p {
        font-size: 13px;
    }
}
/* start frequently section */
@media (max-width: 991px) {
    .frequently .frq-heading h2 {
        font-size: 40px;
    }
}
@media (max-width: 768px) {
    .frequently .frq-heading h2 {
        font-size: 2em;
    }
}
@media (max-width: 584px) {
    .frequently .frq-heading h2 {
        font-size: 1.5em;
    }
}
@media (max-width: 485px) {
    .frequently .frq-heading h3 {
        font-size: 15px;
    }
    .frequently .frq-heading h2 {
        font-size: 1rem;
    }
}
@media (max-width: 330px) {
    .frequently .frq-heading h3 {
        font-size: 13px;
    }
    .frequently .frq-heading h2 {
        font-size: 0.8rem;
    }
}
@media (max-width: 493px) {
    .frequently .accordion .question h3 {
        font-size: 16px;
    }
    .frequently .accordion .question i {
        font-size: 15px;
    }
}
@media (max-width: 430px) {
    .frequently .accordion {
        padding: 13px 10px;
    }
    .frequently .accordion .question h3 {
        font-size: 14px;
        /* <<<<<<< HEAD */
        line-height: var(--line-height);
        /* ======= */
        /* >>>>>>> ab015664121f184c19f428edfc9eb72c79673caa */
    }
    .frequently .accordion .question i {
        font-size: 13px;
    }
}
/* <<<<<<< HEAD */
/* ======= */
@media (max-width: 357px) {
    .frequently .accordion .question h3 {
        font-size: 12px;
    }
    .frequently .accordion .question i {
        font-size: 10px;
    }
}
/* >>>>>>> ab015664121f184c19f428edfc9eb72c79673caa */
/* end frequently section */

/* footer */
@media (max-width: 913px) {
    .footer figure {
        order: 0;
    }
    .footer h2 {
        font-size: 1.6rem;
    }
    .footer .footerLeft .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0rem;
        padding: 0px;
    }
    .footer .footerLeft .container p {
        text-align: left;
        font-size: 14px;
    }
    .footer .footerRight .container {
        display: grid;
        grid-template-columns: repeat(5, 0fr);
    }
    .footer .content ul {
        width: 70%;
    }
    .footer .content .landing_buttons button:last-of-type {
        width: 200px;
    }
}
@media (max-width: 781px) {
    .footer .footer-nav {
        flex-direction: column-reverse;
    }
    .footer .footer-nav .footerLeft,
    .footer .footer-nav .footerRight {
        width: 75%;
        margin: auto;
        margin-bottom: 0.7rem;
        background: none;
    }
    .footer .footer-nav .footerRight {
        margin: 0.7rem auto;
    }
    .footer .footerMid {
        top: -3rem;
    }
    .footer .content ul {
        width: 80%;
    }
}
@media (max-width: 600px) {
    .footer .footer-nav .footerLeft,
    .footer .footer-nav .footerRight {
        width: 80%;
    }
    .footer .content ul {
        width: 85%;
    }
}
@media (max-width: 450px) {
    .footer .footer-nav .footerLeft,
    .footer .footer-nav .footerRight {
        width: 100%;
    }
    .footer .content ul {
        width: 95%;
    }
}
@media (max-width: 350px) {
    .footer .content ul {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .footer figure div > img {
        width: 100%;
    }
    .footer {
        padding-bottom: 5rem;
    }
}