body {
    margin: unset;
}

.marketing_lp {
    background-color: #fff;
    font-family: monospace;

    h1, h2, h3, h4, h5, h6, p {
        margin: unset;
    }

    svg {
        width: 15px;
        height: 15px;  
    } 
    .colored-list {
        list-style: disc;
        color: #fff;
    }

    header {
        position: fixed;
        background: #fff;
        width: 100%;
        z-index: 3;
        div { 
            padding: 20px 75px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img {
                width: 60px;
            }
            ul {
                list-style: none;
                gap: 50px;
                display: flex;
                align-items: center;
                li {
                    gap: 50px;
                    a {
                        font: 600 18px 'Nunito Sans';
                        font-family: monospace;
                        color: #000;
                        line-height: 25px;
                        text-decoration: none;
                    }
                    button {
                        background-color: #FFB800;
                        padding: 10px;
                        border-radius: 5px;
                        border: none;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    section.head {
        padding-top: 7rem !important;
        display: flex;
        gap: 70px;
        padding: 10px 0px;
        width: 100%;
        background-color: #000;
        justify-content: space-between;
        div.elements {
            color: #fff;
            padding: 30px 40px;
            width: 51%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            h2 {
                font-family: Abril Fatface;
                font: 400 64px Nunito Sans;
                span {
                    color: #FFB800;
                    font-weight: bold;
                }
            }
            h6 {
                font-size: 28px;
                font-weight: 400;
                font-family: math;
            }
            button {
                align-self: flex-start;
                background-color: #FFB800;
                border-radius: 10px;
                border: none;
                padding: 10px 65px;
                font-weight: bold;
                font-size: 20px;
                cursor: pointer;
            }
        }
        img.grp {
            padding: 40px 100px;
            padding-left: unset;
            padding-bottom: unset;
            width: 370px;
        }
    }

    section.about-paysprint {
        padding: 60px 50px;
        display: flex;
        justify-content: space-between;
        gap: 45px;
        background-image: url('./Images/noise_texture_bg.png');
        img {
            border-radius: 170px 10px 170px 10px;
        }
        div {
            display: flex;
            flex-direction: column;
            /* justify-content: space-around; */
            gap: 40px;
            h5 {
                font: 600 50px Abril Fatface;
                font-family: Abril Fatface;
            }
            p {
                line-height: 35px;
                font-size: 25px;
                font-weight: 500;
                font-family: Nunito Sans;
            }
        }
    }

    section.services {
        h5.serv {
            padding: 25px 10px;
            font: 600 50px Abril Fatface;
            text-align: center;
            background: #000;
            color: #fff;
            font-family: Abril Fatface;
        }
        div.all-three {
            padding: 60px 50px;
            display: flex;
            flex-direction: column;
            gap: 40px;
            div.each-components {
                display: flex;
                align-items: center;
                gap: 40px;
                background-image: url('./Images/noise_texture_bg.png');
                .grid-comps {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 35px 40px;
                    div {
                        display: flex;
                        flex-direction: column;
                        gap: 15px;
                        padding: 25px 20px;
                        /* box-shadow: 10px 10px 10px 10px #eee; */
                        box-shadow: 0px 2px 10px 8px #d2d2d2;
                        border-radius: 25px;
                        h6 {
                            font-size: 20px;
                            font-weight: bold;
                            font-family: sans-serif;
                        }
                        p {
                            /* font-size: 15px; */
                            font-family: sans-serif !important;
                            font: 400 16px 'Inter';
                        }
                    }
                }
                h5 {
                    flex: 0 0 41%;
                   font: 600 50px Abril Fatface; 
                   font-family: Abril Fatface;
                }
            }
            div.other-components {
                display: flex;
                align-items: center;
                gap: 40px;
                h5 {
                    flex: 0 0 56%;
                    font: 600 50px Abril Fatface; 
                    text-align: center;
                }
                .grid-comps {
                    padding: 60px 30px;
                    box-shadow: 0px 2px 10px 8px #eee;
                    border-radius: 25px;
                    font-size: 24px;
                    color: #031930;
                    text-align: center;
                    width: 33%;
                    font-family: sans-serif;
                }
            }
            div.other-componentsx {
                display: flex;
                align-items: center;
                flex-direction: row-reverse;
                gap: 40px;
                h5 {
                    flex: 0 0 56%;
                    font: 600 50px Abril Fatface; 
                    text-align: center;
                }
                .grid-comps {
                    padding: 60px 30px;
                    box-shadow: 0px 2px 10px 8px #eee;
                    border-radius: 25px;
                    font-size: 24px;
                    color: #031930;
                    text-align: center;
                    width: 33%;
                    font-family: sans-serif;
                }
            }
        }
    }

    section.why-paysprint {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
        h5 {
            font: 600 50px Abril Fatface;
        }

    }

    section.reviews {
        padding-top: 2rem;
        div.init {
            margin-top: 2rem;
            h3 {
                font: 550 60px 'abril fatface';
                line-height: 60px;
                text-align: center;
            }
        }
        div.testimonies {
            padding: 64px;
            display: grid;
            gap: 2rem;
            grid-template-columns: repeat(3, 1fr);
            .innerman {
                border: 1px solid #d9d9d9;
                border-radius: 20px;
                padding: 25px;
                display: flex;
                flex-direction: column;
                gap: 24px;
                .stars {
                    display: flex;
                    gap: 7px;
                    align-items: center;
                }
                .text {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    h6 {
                        font: 600 24px 'Inter';
                        font-family: sans-serif;
                    }
                    p {
                        font: 400 16px 'Inter';
                        font-family: sans-serif;
                    }
                }
                .whoposted {
                    display: flex;
                    gap: 12px;
                    align-items: center;
                    img {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                    }
                    div {
                        h6 {
                            font: 600 16px 'Inter';
                            font-family: sans-serif;
                        }
                        p {
                            font: 400 16px 'Inter';
                            font-family: sans-serif;
                            color: #B3B3B3;
                        }
                    }
                }
            }
        }
    }

    section.ready {
        padding-bottom: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
            cursor: pointer;
        }
    }

    footer {
        padding: 60px 65px;
        background-color: #1E1E1E;
        background-image: url('./Images/footer/gridedline.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color: #fff;
        display: flex;
        flex-direction: column;
        gap: 90px;
        div.first {
            width: 100%;
            display: flex;
            align-content: center;
            justify-content: space-between;
            .img-links {
                flex: 0 0 30%;
                .footer-logo {
                    width: 150px;
                    height: 150px;
                }
                div {
                    padding: 5px 35px;
                    display: flex;
                    align-items: center;
                    gap: 24px;
                }
            }
            .links {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 50px;
                ul {
                    list-style: none;
                    margin: unset;
                    padding: unset;
                    li {
                        font-weight: 700;
                        font-size: 23px;
                        line-height: 28px;
                        color: #FFFFFE;
                        a {
                            font-weight: 500;
                            font-size: 16px;
                            line-height: 15px;
                            color: #FFFFFE;
                            text-decoration: none;
                        }
                        p {
                            font-weight: 500;
                            font-size: 16px;
                            line-height: unset;
                            color: #FFFFFE;
                            text-decoration: none;
                            cursor: not-allowed;
                        }
                    }
                }
                .res {
                    grid-column: span 2;
                    div {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        column-gap: 1rem;
                        width: 120%;
                    }
                }
                .service {
                    padding-left: 20%;
                }
            }
        }
        div.last {
            display: flex;
            flex-direction: column;
            gap: 35px;
            .location {
                display: flex;
                align-items: center;
                justify-content: space-between;
                /* gap: 30px; */
                div {
                    display: flex;
                    align-items: center;
                    gap: 15px;
                    a {
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 25px;
                        color: #FFFFFE;
                        font-family: 'lato';
                        text-decoration: none;
                    }
                }
                .pin {
                    flex-direction: column !important;
                    gap: 10px !important;
                    align-items: unset !important;
                }
            }
            .final {
                hr {
                    width: 90%;
                    border: 1px solid #DEDEDE;
                }
                div {
                    margin-top: 20px;
                    p {
                        font-weight: 500;
                        font-size: 16px;
                        line-height: 19px;
                        color: #BBBBBB;
                        text-align: center;
                    }
                }
            }
        }
    }

}


@media screen and (max-width: 1200px) {
    .marketing_lp {
        section.head {
            gap: 25px;
            img.grp {
                width: 363px;
                padding: 40px 60px;
            }
            div.all {
                .unlock {
                    h3 {
                        font-size: 50px;
                    }
                    h2 {
                        font-size: 65px;
                    }
                }
                .other {
                    width: 80%;
                    button {
                        font-size: 20px;
                    }
                }
            }
            div.elements {
                h2 {
                    font-size: 45px;
                }
                h6 {
                    font-size: 20px;
                }
                button {
                    padding: 10px 45px;
                }
            }
        }

        section.about-paysprint {
            img {
                width: 40%;
            }
            div {
                justify-content: space-evenly;
                h5 {
                    font-size: 40px;
                }
                p {
                    font-size: 21px;
                }
            }
        }
        
        section.services {
            h5.serv {
                padding: 15px 10px;
                font-size: 40px;
            }
            div.all-three {
                div.each-components {
                    flex-direction: column-reverse;
                    h5 {
                        font-size: 40px;
                    }
                }
                div.other-components {
                    justify-content: space-evenly;
                    h5 {
                        flex: unset;
                    }
                }
                div.other-componentsx {
                    justify-content: space-evenly;
                    h5 {
                        flex: unset;
                    }
                }
            }
        }

        section.why-paysprint {
            gap: 25px;
            h5 {
                font-size: 40px;
            }
            img {
                width: 75%;
            }
        }

        section.reviews {
            div.init {
                h3 {
                    font-size: 40px;
                    line-height: 30px;
                }
            }
            div.testimonies {
                padding: 30px;
            }
        } 

        section.ready {
            img {
                width: 75%;
            }
        }
    }
}


@media screen and (max-width: 1023px) {
    .marketing_lp {

        section.services {
            div.all-three {
                gap: 60px;
                div.each-components {
                    flex-direction: column-reverse;
                    gap: 30px;
                    h5 {
                        font-size: 40px;
                    }
                }
                div.other-components {
                    justify-content: space-between;
                    flex-direction: column;
                    gap: 30px;
                    h5 {
                        font-size: 40px;
                    }
                    .grid-comps {
                        width: unset;
                    }
                }
                div.other-componentsx {
                    justify-content: space-between;
                    flex-direction: column;
                    gap: 30px;
                    h5 {
                        font-size: 40px;
                    }
                    .grid-comps {
                        width: unset;
                    }
                }
            }
        }

        footer {
            padding: 50px;
            /* width: 100%; */
            div.first {
                .links {
                    gap: 25px;
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            div.last {
                .location {
                    flex-direction: column;
                    align-items: unset;
                    justify-content: unset;
                    gap: 30px;
                }
            }
        }
    }
}



@media screen and (max-width: 900px) {
    .marketing_lp {
        header {
            div {
                padding: 20px 25px;
                /* justify-content: unset; */
            }
        }

        section.head {
            img.grp {
                padding: 20px;
            }
            div.all {
                align-items: flex-start;
                .unlock {
                    h3 {
                        font-size: 40px;
                        line-height: unset;
                    }
                    h2 {
                        font-size: 55px;
                    }
                }
                .other {
                    width: 80%;
                    align-items: flex-start;
                    button {
                        font-size: 17px;
                    }
                    p {
                        text-align: left;
                        font-size: 25px;
                    }
                }
            }
        }

        section.reviews {
            div.init {
                h3 {
                    font-size: 35px;
                    line-height: 35px;
                }
            }
            div.testimonies {
                padding: 30px;
                grid-template-columns: repeat(1, 1fr);
            }
        }

        footer {
            div.first {
                .links {
                    grid-template-columns: repeat(2, 1fr);
                    .service {
                        padding: unset;
                    }
                }
            }
        }
    }
}


@media screen and (max-width: 700px) {
    .marketing_lp {
        header {
            div {
                padding: 15px 20px;
                ul {
                    gap: 15px;
                }
            }
        }

        section.head {
            flex-direction: column-reverse;
            padding: 40px;
            gap: 20px;
            img.grp {
                width: 480px;
                align-self: center;
            }

            div.all {
                div.txts {
                    padding: 1rem 0rem;
                    h3 {
                        font-size: 30px;
                        line-height: unset;
                    }
                    h6 {
                        font-size: 15px;
                        line-height: unset;
                    }
                }
                button {
                    font-size: 25px;
                    border-radius: 10px;
                }
                button:hover {
                    background-color: #fff;
                    color: #000;
                }
            }

            div.elements {
                width: 100%;
                gap: 25px;
            }
        }

        section.about-paysprint {
            padding: 40px;
            flex-direction: column;
            gap: 25px;
            img {
                width: 85%;
                align-self: center;
            }
            div {
                gap: 15px;
                p {
                    font-size: 20px;
                }
            }
        }

        section.services {
            div.all-three {
                div.each-components {
                    .grid-comps {
                        grid-template-columns: repeat(1, 1fr);
                        gap: 35px;
                    }
                }
            }
        }

        section.why {
            h3 {
                font-size: 40px;
                line-height: 40px;
            }
            div.reasons {
                div {
                    flex-direction: column !important;
                }
                div.colored, div.normal {
                    gap: 30px;
                    img {
                        width: 100%;
                    }
                    div{
                        h4 {
                            font-size: 30px;
                            line-height: 30px;
                        }
                        p {
                            font-size: 17px;
                        }
                    }
                }
            }
        }

        footer {
            padding: 30px;
            div.first {
                flex-direction: column;
                gap: 2rem;
                .links {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 15px;
                    ul {
                        padding: unset;
                    }
                }
            }
        }
    }
}


@media screen and (max-width: 600px) {
    .marketing_lp {
        footer {
            div.first {
                flex-direction: column;
                gap: 35px;
                .links {
                    grid-template-columns: repeat(2, 1fr);
                    .res {
                        grid-column: span 2;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 500px) {
    .marketing_lp {
        header {
            div {
                ul {
                    gap: 20px;
                    padding: unset;
                    li {
                        a {
                            line-height: 20px;
                            font-size: 13px;
                        }
                    }
                }
            }
        }

        footer {
            padding: 20px;
            div.first {
                .links {
                    grid-template-columns: repeat(2, 1fr);
                    .res {
                        grid-column: span 2;
                        div {
                            grid-template-columns: repeat(1, 1fr);
                        }
                    }
                }
            }
        }
    }
    
}