/* Spacing, formatting, useful classes etc. */

:root {
    --very-small-pad: 10px;
    --small-pad:      10px;
    --medium-pad:     20px;
    --big-pad:        40px;
    --huge-pad:       130px;
    --gigantic-pad:   250px; /* I'm running out of name ideas :( */
}

.side-by-side, .stacked {display: flex}
.stacked {flex-direction: column}
.relative {position: relative}
.capitals {text-transform: uppercase}

.bold, h1, h2, h3, h4, h5, h6 {font-weight: 800}
.thin {font-weight: normal}

.text-left {text-align: left}
.text-center {text-align: center}
.text-right {text-align: right}

.align-center {align-items: center}
.justify-center {justify-content: center}

.margin-left {margin-left: 0; margin-right: auto}
.margin-center {margin-left: auto; margin-right: auto}
.margin-right {margin-left: auto; margin-right: 0}

.width {width: 100%}
.half-width {width: 50%}
.fit-content {width: fit-content}
.flex-max {flex: 1 0 auto}

.gv {gap: var(--very-small-pad)}
.gs {gap: var(--small-pad)}
.gm {gap: var(--medium-pad)}
.gb {gap: var(--big-pad)}
.gh {gap: var(--huge-pad)}

.hidden {
    display: none;
}

.pls {padding-left:   var(--small-pad)}
.prs {padding-right:  var(--small-pad)}
.pts {padding-top:    var(--small-pad)}
.pbs {padding-bottom: var(--small-pad)}

.plm {padding-left:   var(--medium-pad)}
.prm {padding-right:  var(--medium-pad)}
.ptm {padding-top:    var(--medium-pad)}
.pbm {padding-bottom: var(--medium-pad)}

.plb {padding-left:   var(--big-pad)}
.prb {padding-right:  var(--big-pad)}
.ptb {padding-top:    var(--big-pad)}
.pbb {padding-bottom: var(--big-pad)}

.plh {padding-left:   var(--huge-pad)}
.prh {padding-right:  var(--huge-pad)}
.pth {padding-top:    var(--huge-pad)}
.pbh {padding-bottom: var(--huge-pad)}

.plg {padding-left:   var(--gigantic-pad)}
.prg {padding-right:  var(--gigantic-pad)}
.ptg {padding-top:    var(--gigantic-pad)}
.pbg {padding-bottom: var(--gigantic-pad)}

.mls {margin-left:   var(--small-pad)}
.mrs {margin-right:  var(--small-pad)}
.mts {margin-top:    var(--small-pad)}
.mbs {margin-bottom: var(--small-pad)}

.mlm {margin-left:   var(--medium-pad)}
.mrm {margin-right:  var(--medium-pad)}
.mtm {margin-top:    var(--medium-pad)}
.mbm {margin-bottom: var(--medium-pad)}

.mlb {margin-left:   var(--big-pad)}
.mrb {margin-right:  var(--big-pad)}
.mtb {margin-top:    var(--big-pad)}
.mbb {margin-bottom: var(--big-pad)}

.mlh {margin-left:   var(--huge-pad)}
.mrh {margin-right:  var(--huge-pad)}
.mth {margin-top:    var(--huge-pad)}
.mbh {margin-bottom: var(--huge-pad)}

.mlg {margin-left:   var(--gigantic-pad)}
.mrg {margin-right:  var(--gigantic-pad)}
.mtg {margin-top:    var(--gigantic-pad)}
.mbg {margin-bottom: var(--gigantic-pad)}

span.hide-me-1 {
    display: inline;
}

@media screen and (max-width: 1100px) {
    :root {
        --side-pad: 30px
    }
}

@media screen and (max-width: 990px) {
    .shrink-me-1 {
        max-width: 300px;
    }
}

@media screen and (max-width: 950px) {
    .shrink-me-2 {
        max-width: 30vw;
        max-height: 30vw;
    }

    .big-card-hold.big .big-card {
        padding: 30px;
    }

    .grow-me-1 {
        width: 100%;
    }
}

@media screen and (max-width: 900px) {
    .handle-me-3 {
        flex-direction: column;
    }
    .handle-me-3 .img {
        max-width: 100%;
        max-height: 200px;
    }

    .handle-me-4 .img {
        max-width: 100%;
        max-height: 200px;
    }
}

@media screen and (max-width: 840px) {
    .stack-me-2 {
        flex-direction: column;
    }

    .title-size {
        font-size: 30px;
    }
}

@media screen and (max-width: 750px) {
    .stack-me-1 {
        flex-direction: column-reverse;
    }

    .shrink-me-1 {
        max-width: 100%;
    }

    .handle-me-1 {
        gap: 25px;
    }
    .handle-me-1 > .side-by-side {
        gap: 25px;
    }

    .handle-me-1 > .side-by-side .big-card {
        padding: 15px;
    }

    .handle-me-1 .big-card-img {
        display: flex;
        align-items: center;
    }

    .handle-me-1 .big-card-img img {
        aspect-ratio: 1;
        width: 100%;
        height: auto;
    }

    .handle-me-2 {
        flex-direction: column;
    }
    .handle-me-2 > .side-by-side {
        align-items: center;
    }
    .handle-me-2 .speech {
        display: none;
    }
    .handle-me-2 .speech.hidden {
        display: flex;
        height: 100%;
    }
    .handle-me-2 > .side-by-side {
        gap: 20px;
    }

    .hero.small {
        height: 200px;
    }
    .hero.small .hero-cover {
        transform: translate(-50%, -40%);
    }
}

@media screen and (max-width: 650px) {
    .service-item {
        flex-direction: column;
    }

    .handle-me-4 {
        flex-direction: column;
    }

    .title-1 {
        text-align: left;
    }
}

@media screen and (max-width: 600px) {
    .handle-me-1 {
        gap: 60px;
    }
    .handle-me-1 > .side-by-side {
        flex-direction: column;
        width: 100%;
    }
    .handle-me-1 > .side-by-side.flip-me {
        flex-direction: column-reverse;
    }
    .handle-me-1 > .side-by-side .big-card-hold.small {
        width: 100%;
        height: 200px;
    }
    .handle-me-1 > .side-by-side .big-card-hold.small img {
        width: 100%;
        height: 100%;
    }

    svg.hero-main-txt {
        height: 50px;
    }
    .hero-cover {
        padding: 0 20px;
    }

    .handle-me-5 span.h3 {
        font-size: var(--h4);
    }
}

@media screen and (max-width: 520px) {
    .services-2 {
        flex-direction: column-reverse;
        gap: 30px;
    }
    .services-2-img {
        flex-direction: row;
        width: 100%;
        height: 100px;
    }

    .nav-button-hold {
        display: none;
    }

    #bars-hold {
        display: flex;
    }

    .nav-links {
        width: fit-content;
    }
    .nav-content {
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0 5px;
    }
    #title-hold {
        padding: 5px;
    }

    .nav-links-mobile {
        position: fixed;
        top: var(--nav-h);
        left: 0;
        width: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        transform: scaleY(0);
        transform-origin: top;
        transition: .2s cubic-bezier(.5,.5,0,1);
    }

    #bars-hold.active + .nav-links-mobile {
        transform: scaleY(1);
    }

    .nav-links-mobile .nav-button {
        width: 100%;
        padding: 20px 0;
        transition: .1s;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .nav-links-mobile .nav-button:hover {
        background-color: var(--fg-light);
    }

    .handle-me-2 > .side-by-side {
        flex-direction: column;
    }
    .handle-me-2 .speech.hidden::before {
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-color: var(--root);
        border-bottom-color: transparent;
    }
}

@media screen and (max-width: 450px) {
    svg.hero-main-txt {
        height: 40px;
    }

    .shrink-me-2 {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        aspect-ratio: 1;
    }

    .links {
        flex-direction: column;
    }
}

@media screen and (max-width: 400px) {
    .handle-me-5 span.h3 {
        font-size: var(--h5);
    }
}

@media screen and (max-width: 350px) {
    :root {
        --side-pad: 10px;
        --h2: 50px;
    }
    svg.hero-main-txt {
        height: 40px;
    }
    span.hide-me-1 {
        display: none;
    }

    svg.hero-main-txt {
        height: 30px;
    }
}