*{box-sizing: border-box;}
.bebas{font-family: 'Bebas Neue', sans-serif;}
h1,p, h2{margin: 0; line-height: 100%}
body, html{font-size: 18px;background-color: #141212;color: #ffffff; margin: 0;padding: 0; font-family: 'Heading Pro Trial Book', sans-serif; overflow-x: hidden; scroll-behavior: smooth}
.htpbold{font-family: 'Heading Pro Trial Bold', sans-serif;}
section{padding: 100px 0;min-height: 750px; scroll-margin-top: 35px;}
.numbers{}
.m-0{margin: 0}
.m-auto{margin: auto}
.ml-auto{margin-left: auto}
.mr-auto{margin-right: auto}
.w-100{width: 100%}
.mw-100{max-width: 100%}
.col-100{width: 100%}
.col-75{width: 75%}
.col-60{width: 60%}
.col-50{width: 50%}
.col-40{width: 40%}
.col-66{width: 66%}
.col-33{width: 33%}
.col-25{width: 25%}
.zi1{z-index: 1}
.d-block{display: block}
.d-flex{display: flex}
.text-right{text-align: right}
.text-pink{color: #DF3084}
.pos-rel{position: relative}
.order-1{order: 1}
.order-2{order: 2}
header{height: 100px; position: fixed;left: 0; top: 0;width: 100%; border-bottom: 1px solid #fff; z-index: 100}
.header-overlay{background-color: #ffffff00;width: 100%;height: 100%;position: absolute;z-index: 0;backdrop-filter: blur(4px);}
.container{max-width: 1300px; margin: auto}
.row{display: flex; margin: 0 50px; flex-wrap: wrap}
.header{display: flex;justify-content: space-between;width: 100%}
.logo{font-size: 2.1rem; font-family: 'Heading Pro Trial Bold', sans-serif; cursor: pointer}
.logo,.nav{align-self: center}
header .container, header .row{height: 100%}
.nav ul li{display: inline-block; margin-left: 15px; cursor: pointer; transition: all .2s ease-in;}
.nav ul li:hover{transform: scale(1.1); color: #DF3084;}
.nav ul{list-style-type: none; padding-inline-start: 0;margin-block-start: 0;margin-block-end: 0;}
#open-section{margin-top: 100px; min-height: calc(100vh - 100px);position: relative;}
#open-section .rect-blue,#open-section .rect-blue2{position:absolute}
#open-section .rect-blue{width: 90%;height: 450px;position: absolute;left: -50px;top: 90px;}
#open-section .rect-blue2{position: absolute;right: 0px;top: 155px;}
.rect-blue{background-color: #181823; box-shadow: 2px 2px 18px #4a4a4a3d; z-index: 0; position: absolute}
.rect-blue2{background-color: #222234; box-shadow: 2px 2px 18px #4a4a4a3d; z-index: 0; position: absolute}
.section-title{color: #DF3084; font-family: "Heading Pro Trial Bold", sans-serif; font-size: 3.75rem}
.intro-text.intro h1{color: #DF3084; font-size: 5rem; font-family: "Heading Pro Trial Bold", sans-serif; margin-bottom: 60px;}
.intro-text {position:relative; margin-top: 140px}
.intro-img img{opacity: .8;border-radius: 330px 203px 330px 290px; max-width: 500px; transform: translate(-70px, 140px)}
.open-container .rect-blue{top: 40px; left: -50px; width: 86.60%; height: 609px}
.open-container .rect-blue2{top: 90px; right: 0; width: 36.18%; height: 463px}
.p-what, .p-where{font-family: "Heading Pro Trial Bold", sans-serif}
.p-what{font-size: 2.8rem; margin-bottom: 20px}
.p-where{font-size: 2.1rem; display: flex;align-items: center; gap: 10px;}
.p-where svg{width: 40px; height: 44px}
#mouse{border: 1px solid #fff;width: 30px;height: 60px;display: flex;align-items: flex-end;justify-content: center;padding: 6px 0;border-radius: 20px;position: absolute;left: 50%;bottom: 10px; cursor: pointer}
#mouse svg{transform: rotate(90deg)}
.haylo-payoff{margin-left: 13px; font-size: 45px}
#whereiwork .row{padding-top: 50px}
#whereiwork .rect-blue2{left: -50px; width: 415px; height: 300px; top: 0}
#whereiwork .rect-blue{right: 0; width: 80%; height: 300px; top: 120px}
#skillset p, .section-subtitle{font-size: 1.75rem; margin-bottom: 15px}
.section-agency{font-size: 1.1rem; margin-bottom: 15px}
.section-agency span{font-family: 'Bebas Neue', sans-serif;}
#skillset .text-container{margin-top: 40px}
#projects .text-container{margin-top: 20px}
#skillset .rect-blue2{right: 0px; width: 415px; height: 415px; top: 0}
#skillset .rect-blue{left: -50px; width: 80%; height: 350px; top: 40px}
.skillset-logos-container {position: relative; min-height: 400px}
.skillset-logos-container img{position: absolute;max-width: 120px}
.skillset-logos-container #wp{top: -20px; left: 90px}
.skillset-logos-container #php{top: 30px; right: 40px}
.skillset-logos-container #html5{top: 35%; left: 35%}
.skillset-logos-container #css{bottom: -40px; left: 55px}
.skillset-logos-container #js{bottom: 20px; right: 10px}
#projects img{ max-width: 580px; width: 100%; height: auto}
#projects .projects-container{min-height: 400px; padding-top: 60px; margin-bottom: 150px}
#projects .img-r .rect-blue{top: 60px; left: -50px; width: 80%; height: 470px}
#projects .img-r .rect-blue2{top: 20px; right: 0px; width: 540px; height:490px}
#projects .img-r .project-img-container img{transform: translateX(-50px)}
#projects .img-l .rect-blue{top: 60px; right: 0px; width: 80%; height: 470px}
#projects .img-l .rect-blue2{top: 20px; left: -50px; width: 540px; height:490px}
#projects .img-l .project-text-container{padding-left: 40px}
#projects .project-text-container{padding-top: 60px}
#projects .project-img-container{padding-top: 45px}
#projects .section-subtitle{max-width: 66%}
#projects .project-text-container .section-title{max-width: 75%;margin-bottom: 20px;color: #fff;border-bottom: 2px solid #df2e84;padding-bottom: 12px; width: fit-content}
#projects .cta{position: absolute; z-index: 1;width: 50px;height: 50px;background-color: #df2f84;display: flex;justify-content: center;align-items: center; transition: all .15s ease}
#projects .img-l .cta{bottom: 0;right: 50px;}
#projects .img-r .cta{bottom: 0;left: 0px;}
#projects .cta img{width: 28px; height: 28px}
#projects .cta:hover, #projects .projects-container:hover .cta{border-radius: 50%; transform: rotate(45deg)}
#projects .projects-container{cursor: pointer}
#contactme .text-container p{margin-bottom: 20px; font-size: 1.75rem}
#contactme .text-container {margin-top: 40px}
#contactme .rect-blue {width: 100%; top: 40px; left: -50px; height: 400px}
#contactme form{background-color: #222234;max-width: 600px;margin-left: auto;padding: 50px;box-shadow: 2px 2px 18px #4a4a4a3d;}
#contactme form input{height:auto;background-color: #131212;width: 100%; border-radius: 0; margin-bottom: 12px;color: #ffffff; font-size: 1.3rem; font-family: "Helvetica Neue",sans-serif; display: block; box-shadow: none!important;border: 0; position: relative; padding: 5px 10px}
#contactme form input::placeholder,#contactme form textarea::placeholder{opacity:1!important;color: #ffffff!important; font-size: 1.3rem; font-family: "Helvetica Neue",sans-serif;}
#contactme form input::-webkit-input-placeholder,#contactme form textarea::-webkit-input-placeholder{opacity:1!important;color: #ffffff!important; font-size: 1.3rem; font-family: "Heading Pro Trial",sans-serif;}
#contactme form input[type="submit"],#contactme form button[type="submit"]{background-color: #DF3084!important; border-radius: 0; width: auto; margin-bottom: 0;color: #ffffff; font-size: 1.3rem; font-family: "Heading Pro Trial",sans-serif; margin-left: auto;; box-shadow: none!important;border: 0; text-transform: uppercase}
#contactme form textarea{ border-radius: 0;background-color: #131212;width: 100%; margin-bottom: 30px;color: #ffffff; font-size: 1.3rem; font-family: "Heading Pro Trial",sans-serif; box-shadow: none!important;border: 0; position: relative; padding: 5px 10px}
#contactme form input[type="checkbox"]{background-color: transparent;width: auto; margin-bottom: 30px;color: #ffffff; font-size: 1.3rem;  display: inline}
#contactme form label[for="privacy"]{font-size: .8rem}
div.wpforms-container-full button[type=submit]:hover{background: inherit!important;}
.wpforms-container .wpforms-field {
     padding: 0!important;
    position: relative;
}
div.wpforms-container-full .wpforms-field-label-inline {
    color: #ffffff!important;
    font-size: .8rem!important;
    padding-left: 8px!important;
}
div.wpforms-container-full input[type=checkbox]:checked:before, div.wpforms-container-full input[type=radio]:checked:before {
    margin: 0;
    border-color: #df3184!important;
    box-shadow: none!important;
}
div.wpforms-container-full input[type=checkbox]:checked:after {
    border-left: 4px solid #df3184 !important;
    border-bottom: 4px solid #df3184 !important;
    background-color: transparent;
}
div.wpforms-container-full input[type=checkbox]:before, div.wpforms-container-full input[type=radio]:before {
    border-radius: 0px!important;
    background-color: #131212!important;
}
div.wpforms-container-full .wpforms-confirmation-container-full{background: #222234!important;border: 0!important;color: white!important;}
footer{border-top: 1px solid #fff;padding: 15px 0}
footer .social{display: flex; justify-content: center; margin-bottom: 15px}
footer .social a{height: 30px;}
footer .social img{width: 30px; height: 30px; margin: 0 5px}
footer .credits {display: flex; justify-content: center; align-items: center}
footer .credits p{font-size: .9rem}
footer .credits img{margin-left: 5px; width: 24px; height: 24px;}

#iubenda{justify-content: center;
    display: flex;
    gap: 5px;
margin-bottom: 15px}
.iubenda-embed:not(.no-brand):not(.iubenda-nostyle) {
    background: #141212 !important;
    background-image: none !important;
    color: #fff !important;
    padding-left: 8px !important;
    border-image-width: 0 !important;
    font-family: "Heading Pro Trial Light", sans-serif !important;
}
@media(max-width: 767px){
    footer{border-top: 1px solid #fff;padding: 15px 0 75px}

    #projects .cta:hover, #projects .projects-container:hover .cta {
        border-radius: 50%;
        transform: translateX(-50px) rotate(45deg);
    }
    .cursor, .cursor-outline{display: none}
    body, html{font-size: 16px;}
    .col-100, .col-75, .col-60, .col-50, .col-40, .col-66, .col-33, .col-25{width: 100%}
    .row{margin: 0 20px;}
    .order-sm-1{order: 1}
    .order-sm-2{order: 2}
    .section-title {font-size: 3rem;}
    section{padding-top: 40px; min-height: 550px}
    #open-section{padding-top: 100px; max-height: 750px; height: 100vh; margin-top: 0px}
    .intro-text{margin-top: 45px;}
    .intro-text.intro h1 {font-size: 4.5rem; margin-bottom: 45px}
    .p-what{font-size: 2.2rem}
    .p-where{font-size: 1.8rem}
    .p-where svg {width: 26px;height: 28px;}
    .intro-img img{max-width: 280px; transform: translate(25px, 50px); margin: auto; display: block}
    #open-section .rect-blue2 {right: -70px;top: 350px;}
    #open-section .rect-blue {height: 350px;left: -20px;top: 80px;}
    #mouse{display: none}
    #projects img {max-width: 100%;width: 100%;}
    .haylo-logo{margin-top: 30px}
    .haylo-payoff {margin-left: 0;font-size: 2rem;}
    #whereiwork .rect-blue {right: 0;width: 80%;height: 250px;top: 120px;}
    #whereiwork .rect-blue2 {left: -50px;width: 365px;height: 170px;top: 80px;}
    #skillset p, .section-subtitle {font-size: 1.5rem;}
    .skillset-logos-container img{max-width: 90px}
    #skillset .rect-blue {left: 20px;width: 90%;height: 270px;top: 350px;}
    #skillset .rect-blue2 {right: 0px;width: 415px;height: 415px;top: 30px;}
    .skillset-logos-container #wp {top: 10px;left: 23px;}
    .skillset-logos-container #php {top: 30px;right: 60px;}
    .skillset-logos-container #html5 {top: 31%;left: 26%;}
    .skillset-logos-container #css {bottom: 50px;left: 30px;}
    .skillset-logos-container #js {bottom: 82px;right: 30px;}
    #projects .projects-container {
        min-height: auto;
        padding-top: 40px;
        margin-bottom: 150px;
    }
    #projects .img-r .rect-blue,#projects .img-l .rect-blue {
        top: 60px;
        right: -40px;
        width: 100%;
        height: 270px;
        left: auto;
    }
    #projects .img-r .rect-blue2, #projects .img-l .rect-blue2 {
        top: 260px;
        right: 30px;
        width: 540px;
        height: 240px;
        left: auto;
    }
    #projects .project-text-container {
        padding-top: 0px;
        position: relative;
    }
    #projects .img-r .cta ,
    #projects .img-l .cta {
        bottom: 15px;
        left: 100%;
        transform: translateX(-50px);
    }
    #projects .img-r .project-img-container img ,
    #projects .img-l .project-img-container img {
        transform: translateX(0px);
    }
    #contactme form {
        padding: 30px 20px;
        margin-top: 30px;
    }
    footer .credits p {
        font-size: .8rem;
    }
    .nav{display: none}
    .mobile-open{align-items: center; display: flex;}
    #mobile-menu{width: 100vw; height: 100vh; background: #000000; position: fixed; top:0; left: 0;z-index: 100; }
    .nav-mobile ul{text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-block-start: 0;padding-inline-start: 0;list-style: none;}
    .nav-mobile ul li{margin-bottom: 20px; font-size: 1.25rem}
    .close-menu-mobile{position: absolute;bottom: 100px;left: 50%;transform: translateX(-50%);background-color: #222234; box-shadow:2px 2px 18px #4a4a4a3d;width: 60px;height: 60px;border-radius: 50%;}
    .close-menu-mobile > div{position: relative;width: 100%;height: 100%;}
    .close-menu-mobile span{width: 40px;height: 1px;background-color: #fff;display: block;position: absolute;top: 30px;left: 10px; }
    .close-menu-mobile span:first-of-type{transform: rotate(45deg);}
    .close-menu-mobile span:last-of-type{transform: rotate(-45deg);}
}
@media (min-width: 678px) {
    .mobile-open,.nav-mobile,.mobile-open{display: none}
}

@media (min-width: 768px) and (max-width: 991px) {
    body{font-size: 16px}
    #open-section{margin-top: 0}
    .skillset-logos-container img{position: absolute;max-width: 100px}
    .skillset-logos-container #wp {top: -20px;left: -30px;}
    .skillset-logos-container #php {top: 15px;right: 20px;}
    .skillset-logos-container #html5 {top: 35%;left: 20%;}
    .skillset-logos-container #css {bottom: -10px;left: 25px;}
    .skillset-logos-container #js {bottom: 50px;right: 10px;}
    #projects img {max-width: 100%;width: 100%;}
    #contactme form {background-color: #222234;max-width: 600px;margin-left: auto;padding: 25px;box-shadow: 2px 2px 18px #4a4a4a3d;}
    .order-sm-1{order: 1}
    .order-sm-2{order: 2}
    .project-text-container, .project-img-container{width: 100%}
    #projects .img-r .cta {bottom: 0;left: auto;right: 50px;}
    #projects .img-l .rect-blue2 {top: 100px;}
    #projects .img-r .rect-blue {top: 100px;}
    #projects .img-r .rect-blue2 {top: 200px;right: -25px;width: 540px;height: 490px;}
    #projects .img-l .rect-blue {top: 200px;right: -25px;width: 80%;height: 470px;}
    .p-what {font-size: 2.5rem;}
    #projects .img-l .project-img-container img, #projects .img-r .project-img-container img {transform: translateX(0px);}
    .section-title {font-size: 3rem;}
    #skillset p, .section-subtitle,#skillset p,#contactme .text-container p{font-size: 1.5rem;}
}
@media (min-width: 992px) and (max-width: 1200px) {
    body{font-size: 16px}
    #open-section{margin-top: 0}
    .skillset-logos-container img{position: absolute;max-width: 100px}
    .skillset-logos-container #wp {top: -20px;left: 0px;}
    .skillset-logos-container #css {bottom: -10px;left: 35px;}
    .p-what {font-size: 2.6rem;}
}

@media (min-width: 576px) and (max-width: 767px) {
    #mouse{display: flex}
    #open-section {
        padding-top: 200px;
    }
    .intro-img img {
        max-width: 280px;
        transform: translate(-45px, 0px);
        margin: auto 0 auto auto;
        display: block;
    }
    #open-section .rect-blue2 {
        right: -70px;
        top: 220px;
    }
}