:root {
  --black: #101212;
  --pink: #d23c71;
   --light: #efe7e3;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--light);
    background-image: url(../images/tile.webp);
    font-family: "Bebas Neue", sans-serif;
    color: var(--black);
    box-sizing: border-box;

}

main {
    

    position: relative;

   
}
header {

    max-width: 860px;
    padding: 20px;
    margin: 0 auto;

     background: url('../images/BPO-head.webp') no-repeat top right;
    background-size: 70%;
}

.bpo-logo {


    padding-bottom: 20px;
}

.bpo-head {
    margin-left: auto;
    text-align: right;

    img {
        width: 80vw;
        height: auto;
    }
}

.bpo-head-text {
    z-index: 3;

}

.bpo-contact {
    background-color: var(--pink);

    .content {
         max-width: 1024px;
        padding: 20px;
        margin: 0 auto;

        display: flex;

        color: var(--light);

        h3 {
            font-size: clamp(2em, 3vw, 4rem);
            margin: 0;
        }

        p {
            font-size: 1.4rem;
            font-weight: 400;
            margin-top: 0;
        }
    }
}
.bpo-reseller {

    max-width: 1024px;
    min-height: 430px;
    margin: 0 auto;
    padding: 30px 0;
    background-image: url(../images/bpo-3.webp);
    background-repeat: no-repeat;

    @media(max-width: 835px) {
        background-image: none;

        min-height: auto;
        
    }

    display: flex;
        justify-content: flex-end;
   

    .content {
       width: 400px;

       @media(max-width: 835px) {
        width: 100%;
        
    }
       padding: 20px;

       .pw-logo {
        display: block;
        margin-left: auto;
       }

       h2 {
        font-size: 52px;
        margin: 0;
       }

       h3 {
        color: var(--pink);
        font-size: 37px;
        margin: 0;
       }

       p {

        font-family: Arial, Helvetica, sans-serif;
        margin-bottom: 50px;

        span {
            color: var(--pink);
            font-weight: 700;
        }
       }

       .fom-btn {
        background-color: var(--pink);
        color: var(--light);
        padding: 10px 60px 10px 30px;
        margin-top: 20px;
        font-size: 28px;
        text-decoration: none;

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

}
.bpo-footer {
    background: var(--black);
    color: var(--light);
    padding: 30px 0;

    .content {
        max-width: 1024px;
        margin: 0 auto;

        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
}

h1 {
    transform-origin: 0 0;
    transform: rotate(-4deg);
    font-size: clamp(6em, 6vw, 8rem);
    line-height: normal;
    margin: 0;

    span {
        color: var(--pink);
        display: block;
        font-size: clamp(12rem, 18vw, 18rem);
        font-weight: 400;
        line-height: 60%;
    }
}

h2 {
    font-size: 2rem;
    margin-top: 0px;

    span {
        color: var(--pink);
        display: block;
    }
}