html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--navbar-height) - 1px)
}

::-moz-selection {
    background-color: var(--clr-primary);
    color: #fff
}

::selection {
    background-color: var(--clr-primary);
    color: #fff
}

img,svg,video {
    max-width: 100%
}

@font-face {
    font-display: swap;
    font-family: "Nexa";
    src: url("../fonts/Nexa Bold.otf");
    font-weight: 700
}

@font-face {
    font-display: swap;
    font-family: "Nexa";
    src: url("../fonts/Nexa Light.otf");
    font-weight: 300
}

@font-face {
    font-display: swap;
    font-family: "Roboto";
    src: url("../fonts/Roboto-Thin.ttf");
    font-weight: 100
}

@font-face {
    font-display: swap;
    font-family: "Brie Light";
    font-style: normal;
    font-weight: normal;
    src: local("Brie Light"),url("../fonts/BRI293.woff") format("woff")
}

:root {
    --clr-primary-hue: 354;
    --clr-primary-saturation: 96%;
    --clr-primary-light: 44%;
    --clr-primary: hsl(354, 96%, 44%);
    --clr-primary-hover: hsl(354, 96%, 41%);
    --clr-primary-active: hsl(354, 96%, 38%);
    --clr-primary-dark: hsl(349, 87%, 38%);
    --clr-neutral-100: white;
    --clr-neutral-95: #f2f2f2;
    --clr-neutral-90: #e6e6e6;
    --clr-neutral-87: #dedede;
    --clr-neutral-80: #cccccc;
    --clr-neutral-70: #b3b3b3;
    --clr-neutral-68: #adadad;
    --clr-neutral-60: #999999;
    --clr-neutral-57: #919191;
    --clr-neutral-50: gray;
    --clr-neutral-40: #666666;
    --clr-neutral-30: #4d4d4d;
    --clr-neutral-20: #333333;
    --clr-neutral-10: #1a1a1a;
    --clr-neutral-0: black
}

:root {
    --clr-primary-gradient: hsl(351, 100%, 44%);
    --clr-primary-dark-gradient: hsl(355, 70%, 32%);
    --linear-gradient: linear-gradient( to right, var(--clr-primary-gradient) 40%, var(--clr-primary-dark-gradient) 100% );
    --radial-gradient: radial-gradient(var(--clr-primary-gradient), var(--clr-primary-dark-gradient))
}

@media(max-width: 75rem) {
    :root {
        --linear-gradient: linear-gradient( 22.5deg, var(--clr-primary-gradient) 20%, var(--clr-primary-dark-gradient) 75% )
    }
}

body {
    font-family: "Nexa",sans-serif;
    color: var(--clr-neutral-10)
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    display: block;
    font-weight: 700;
    line-height: 1;
    margin: 0
}

h1,.h1 {
    font-size: 3.25rem
}

h2,.h2 {
    font-size: 2.75rem
}

h3,.h3 {
    font-size: 2.375rem
}

h4,.h4 {
    font-size: 1.415625rem
}

h5,.h5 {
    font-size: 1.25rem
}

p,.p {
    display: block;
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.5
}

.form-group,.form-control {
    font-family: "Roboto",sans-serif
}

.form-control {
    font-weight: 100;
    font-size: 1.125rem
}

@media(max-width: 36rem) {
    h1,.h1 {
        font-size:3.052rem
    }

    h2,.h2 {
        font-size: 2.441rem
    }

    h3,.h3 {
        font-size: 1.953rem
    }

    h4,.h4 {
        font-size: 1.563rem
    }

    h5,.h5 {
        font-size: 1.125rem
    }

    p,.p {
        font-size: 1rem;
        line-height: 1.5
    }

    .form-control {
        font-size: 1rem
    }
}

:root {
    --navbar-height: 4.5rem;
    --hexagon-proportion: 1 / 1.128
}

@media(max-width: 75rem) {
    :root {
        --navbar-height: 3.5rem
    }
}

:root {
    --br: 0.75rem
}

@media print {
    .header {
        position: absolute
    }

    .main-swiper {
        height: auto;
        overflow: unset
    }

    .main-swiper__pagination,.main-swiper__next {
        display: none
    }

    .main-swiper__wrapper {
        all: unset
    }

    .whatsapp {
        position: absolute
    }
}

.container--custom {
    width: 100%;
    max-width: 85rem;
    margin: 0 auto;
    padding: 0 1rem
}

.btn {
    padding: 1em 2.25em;
    border-radius: 0;
    font-size: 1.125rem;
    text-transform: uppercase;
    line-height: 1
}

.btn--primary {
    background-color: var(--clr-primary);
    color: var(--clr-neutral-100)
}

.btn--primary:hover,.btn--primary:focus {
    background-color: var(--clr-primary-hover);
    color: var(--clr-neutral-100)
}

.btn--primary:focus {
    -webkit-box-shadow: 0 0 0 .2rem hsl(var(--clr-primary-hue) var(--clr-primary-saturation) var(--clr-primary-light)/25%);
    box-shadow: 0 0 0 .2rem hsl(var(--clr-primary-hue) var(--clr-primary-saturation) var(--clr-primary-light)/25%)
}

.btn--primary:active {
    background-color: var(--clr-primary-active)
}

.btn--light {
    background-color: var(--clr-neutral-100);
    color: var(--clr-primary)
}

.btn--light:hover,.btn--light:focus {
    background-color: var(--clr-neutral-95);
    color: var(--clr-primary)
}

.btn--light:focus {
    -webkit-box-shadow: 0 0 0 .2rem rgba(255,255,255,.25);
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.25)
}

.btn--light:active {
    background-color: var(--clr-neutral-90)
}

.btn--gray {
    background-color: #777779;
    color: var(--clr-neutral-100)
}

.btn--gray:hover,.btn--gray:focus {
    background-color: #6b6a6c;
    color: var(--clr-neutral-100)
}

.btn--gray:focus {
    -webkit-box-shadow: 0 0 0 .2rem rgba(94,93,95,.25);
    box-shadow: 0 0 0 .2rem rgba(94,93,95,.25)
}

.btn--gray:active {
    background-color: #5e5d5f
}

.boxtitle{
    display: inline-block;
    background-color: rgba(186, 91, 112, 0.6);
    padding: 8px;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
    color: #fff;
    font-weight: normal;
}
.boxtitle:hover{
    background-color: rgba(186, 91, 112, 1);
}

.tblock{
    text-align: left;
}

@media(max-width: 75rem) {
    .tblock{
        text-align: center;
        margin-bottom: 40px;
    }

    
}


.card {
    border: none;
    text-align: center
}

.card a {
    color: inherit
}

.card a:hover,.card a:focus {
    text-decoration: none
}

.card-img {
    aspect-ratio: var(--hexagon-proportion);
    max-width: 17.1875rem;
    margin: 0 auto;
    position: relative;
    border-radius: 0;
    -webkit-mask: url("../img/hexagon-shape.svg") no-repeat center/contain;
    mask: url("../img/hexagon-shape.svg") no-repeat center/contain
}

.card-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.card-img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--radial-gradient);
    opacity: .5;
    -webkit-transition: opacity .4s;
    transition: opacity .4s
}

.card-list {
    list-style: none;
    padding: 0
}

.card:hover .card-img::after {
    opacity: 0
}

.form-group {
    margin-bottom: .625rem
}

.form-control {
    border-radius: 0;
    border-color: #95928a;
    color: #0d0b0d
}

.form-control:focus {
    border-color: rgba(26,26,26,.25);
    -webkit-box-shadow: 0 0 0 .2rem rgba(26,26,26,.25);
    box-shadow: 0 0 0 .2rem rgba(26,26,26,.25);
    color: #0d0b0d
}

.c-video {
    position: relative;
    max-width: 45rem
}

.c-video__video {
    display: block;
    width: 100%;
    max-height: 48rem
}

.c-video__btn {
    display: grid;
    place-items: center;
    width: 6.25rem;
    height: 6.25rem;
    border: 4px solid var(--clr-neutral-100);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background: transparent
}

.c-video__btn:hover,.c-video__btn:focus {
    background-color: rgba(255,255,255,.15)
}

.c-video__btn:active {
    background-color: rgba(71,71,71,.25)
}

.c-video__btn i {
    color: var(--clr-neutral-100);
    font-size: 3rem
}

@media(max-width: 109.875rem) {
    .c-video__btn {
        width:4rem;
        height: 4rem;
        border-width: 2px
    }

    .c-video__btn i {
        color: var(--clr-neutral-100);
        font-size: 1.5rem
    }
}

.swiper__navigation {
    display: block;
    position: absolute;
    top: 50%;
    width: 2rem;
    height: 2rem;
    z-index: 2
}

.swiper__navigation::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-mask: no-repeat center/contain;
    mask: no-repeat center/contain;
    background-color: var(--clr-neutral-87)
}

.swiper__navigation--disabled {
    opacity: 0;
    pointer-events: none
}

.swiper__prev {
    left: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper__prev::after {
    -webkit-mask-image: url("../img/icon-prev.svg");
    mask-image: url("../img/icon-prev.svg")
}

.swiper__next {
    right: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

.swiper__next::after {
    -webkit-mask-image: url("../img/icon-next.svg");
    mask-image: url("../img/icon-next.svg")
}

.hexagon {
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 12.5rem;
    aspect-ratio: 1/1.123;
    padding: 2rem 1rem;
    position: relative
}

.hexagon::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    -webkit-mask: url("../img/hexagon-shape-outline.svg") no-repeat center/contain;
    mask: url("../img/hexagon-shape-outline.svg") no-repeat center/contain;
    background-color: var(--clr-neutral-68)
}

.hexagonX {
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 12.5rem;
    aspect-ratio: 1/1.123;
    padding: 2rem 1rem;
    position: relative
}

.hexagonX::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    -webkit-mask: url("../img/hexagon-shape-outline.svg") no-repeat center/contain;
    mask: url("../img/hexagon-shape-outline.svg") no-repeat center/contain;
    background-color: var(--clr-neutral-68)
}

.hexagon__icon {
    display: block;
    width: 3.125rem;
    height: 3.125rem;
    margin: 0 auto;
    fill: var(--clr-neutral-68)
}

.hexagon__txt {
    display: block;
    max-width: 7.8125rem;
    margin-top: .5rem;
    font-size: 1.125rem;
    text-align: center;
    line-height: 1.2;
    color: gray
}

.hexagon:hover::after {
    background-color: var(--clr-primary-dark)
}

.hexagon:hover .hexagon__icon {
    fill: var(--clr-primary-dark)
}

.hexagon:hover .hexagon__txt {
    color: #333
}

.hexagon--empty {
    pointer-events: none;
    opacity: .75
}

.c-social {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 1rem;
    padding: 0
}

.c-social a {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--br);
    background-color: var(--clr-neutral-0);
    color: var(--clr-neutral-100)
}

.c-social a:hover,.c-social a:focus {
    background-color: var(--clr-neutral-10);
    text-decoration: none
}

.c-top {
    width: 2.25rem;
    height: 2.25rem;
    position: relative;
    padding: 0;
    border: none;
    border-radius: var(--br);
    background-color: #460b01;
    color: var(--clr-neutral-100)
}

.c-top:hover,.c-top:focus {
    background-color: #550e01
}

.c-top:active {
    background-color: #641002
}

.c-top::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    background: url("../img/top-icon.svg") no-repeat center/contain
}

.l-header {
    -webkit-transition: background-color .2s;
    transition: background-color .2s
}

.l-header .container--custom {
    padding: .5rem 1rem
}

.l-header::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-box-shadow: 0 .2rem .25rem rgba(25,25,25,.15);
    box-shadow: 0 .2rem .25rem rgba(25,25,25,.15);
    opacity: 0;
    z-index: -1
}

.l-header--scrolling {
    background-color: var(--clr-neutral-100)
}

.l-header--scrolling::after {
    opacity: 1
}

.l-header--scrolling .container--custom {
    padding: .25rem 1rem
}

.l-header--scrolling .navbar-brand {
    max-width: 12.5rem
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--clr-neutral-100)
}

.navbar-light .navbar-nav .nav-link {
    color: var(--clr-neutral-0)
}

.navbar-brand {
    max-width: 15.625rem;
    padding: 0;
    position: absolute;
    top: 0;
    left: 1rem;
    -webkit-transition: all .4s;
    transition: all .4s
}

.navbar-nav {
    margin-right: -0.5rem;
    gap: 0 1rem
}

.nav-link {
    text-transform: uppercase
}

.nav-icon {
    width: 3rem;
    height: 3rem;
    -o-object-fit: contain;
    object-fit: contain
}

@media(max-width: 75rem) {
    .l-header--scrolling .container--custom {
        padding:.5rem 1rem
    }

    .l-header--scrolling .navbar-brand {
        max-width: 9.375rem
    }

    .navbar-brand {
        max-width: 9.375rem
    }

    .navbar-nav {
        margin: 0
    }
}

.l-main {
    min-height: 100vh
}

.l-footer {
    background: url("../img/footer-bg.svg") no-repeat center/cover,var(--radial-gradient);
    background-blend-mode: overlay;
    color: var(--clr-neutral-100)
}

.l-footer ::-moz-selection {
    background-color: #fff;
    color: var(--clr-primary)
}

.l-footer ::selection {
    background-color: #fff;
    color: var(--clr-primary)
}

.l-footer hr {
    opacity: .75;
    border-color: var(--clr-neutral-57);
    border-width: calc(0.046875rem * 0.5)
}

.l-footer__brand {
    max-width: 20.3125rem
}

.l-footer .c-top {
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0)
}

@media(max-width: 48rem) {
    .l-footer__brand {
        max-width:14.0625rem
    }
}

@media(max-width: 36rem) {
    .l-footer .c-top {
        display:block;
        margin: 1rem auto 0;
        position: relative;
        top: 0;
        -webkit-transform: none;
        transform: none
    }
}

.l-whatsapp {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    position: fixed;
    right: 2.75rem;
    bottom: 2.75rem;
    z-index: 5;
    border-radius: 50%;
    background-color: #029c54;
    -webkit-transition: background-color .4s;
    transition: background-color .4s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.l-whatsapp img {
    width: 60%;
    height: 60%;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none
}

.l-whatsapp:hover,.l-whatsapp:focus {
    background-color: #028d4c
}

.l-whatsapp:active {
    background-color: #027e44
}

@media(max-width: 36rem) {
    .l-whatsapp {
        right:1rem;
        bottom: 1rem
    }
}

.s-hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 100vh;
    padding: 3.5rem 0;
    background: url("../img/hero-bg.webp") no-repeat center/cover;
    color: var(--clr-neutral-100)
}

@media(max-width: 48rem) {
    .s-hero h1 br {
        display:none
    }
}

.s-services {
    --card-dimension: 12.5rem
}

.s-services__paragraph {
    max-width: 24.375rem
}

.s-services__swiper {
    display: none
}

.s-services__swiper .hexagon {
    margin: 0 auto
}

.s-services__cards,.s-services__cols {
    --space: 0.5rem;
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--space);
    padding: 0
}

.s-services__cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 0 calc(var(--card-dimension) * 0.5)
}

.s-services__row:where(:nth-child(2n)) {
    margin-left: calc((var(--card-dimension) * -0.5) - (var(--space) * 0.5))
}

.s-services__row:where(:not(:first-child)) {
    margin-top: -2.8125rem
}

.s-services .hexagon {
    width: var(--card-dimension)
}

@media(max-width: 75rem) {
    .s-services__paragraph {
        max-width:none
    }

    .s-services__swiper {
        display: block
    }

    .s-services__cards {
        display: none
    }
}

.s-products {
    --link-dimension: 9.375rem;
    --links-spacing: 1rem;
    min-height: 47.1875rem;
    background: var(--linear-gradient)
}

.s-products h2,.s-products .h2 {
    font-size: 2rem
}

.s-products .container--custom {
    position: relative;
    padding: 3rem 1rem
}

.s-products .container--custom::before,.s-products .container--custom::after {
    content: "";
    display: block;
    width: 75rem;
    aspect-ratio: var(--hexagon-proportion);
    position: absolute;
    border-radius: 40px;
    opacity: 96%;
    background-color: var(--clr-neutral-87)
}

.s-products .container--custom::before {
    top: 0;
    left: 0;
    -webkit-transform: translate3d(-28%, -61%, 0);
    transform: translate3d(-28%, -61%, 0)
}

.s-products .container--custom::after {
    bottom: 0;
    right: 0;
    -webkit-transform: translate3d(20%, 61%, 0);
    transform: translate3d(20%, 61%, 0)
}

.s-products__txt-wrapper,.s-products__links {
    z-index: 1
}

.s-products__txt-wrapper {
    position: absolute;
    top: 3rem;
    left: 3rem;
    max-width: 35.9375rem
}

.s-products__txt-wrapper p {
    max-width: 27.8125rem;
    margin: 0 auto
}

.s-products__swiper {
    display: none
}

.s-products__swiper .swiper-slide>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.s-products__swiper .s-products__link {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.s-products .swiper__navigation::after {
    background-color: var(--clr-neutral-20)
}

.s-products__links {
    padding-left: calc((var(--link-dimension) * 0.5) + (var(--links-spacing) * 0.5) + 1.25rem);
    position: absolute;
    right: 2rem;
    bottom: 1rem
}

.s-products__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--links-spacing)
}

.s-products__row:where(:nth-child(2n)) {
    margin-left: calc((var(--link-dimension) * -0.5) - (var(--links-spacing) * 0.5))
}

.s-products__row:where(:not(:first-child)) {
    margin-top: -1.5rem
}

.s-products__link a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .5rem;
    color: inherit
}

.s-products__link a:hover,.s-products__link a:focus {
    text-decoration: none
}

.s-products__link a:hover .s-products__label,.s-products__link a:focus .s-products__label {
    opacity: 1
}

.s-products__link--highlight {
    position: relative;
    z-index: 1;
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-filter: drop-shadow(0 0 0.5rem rgba(25, 25, 25, 0.35));
    filter: drop-shadow(0 0 0.5rem rgba(25, 25, 25, 0.35))
}

.s-products__img {
    width: var(--link-dimension);
    aspect-ratio: var(--hexagon-proportion);
    -webkit-mask: url("../img/hexagon-shape.svg") no-repeat center/contain;
    mask: url("../img/hexagon-shape.svg") no-repeat center/contain
}

.s-products__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.s-products__label {
    font-family: "Brie Light";
    font-size: 2.75rem;
    font-weight: 400;
    line-height: 1;
    opacity: 0
}

@media(max-width: 109.875rem) {
    .s-products {
        --link-dimension: 7.8125rem;
        min-height: 42.1875rem
    }

    .s-products .container--custom::before,.s-products .container--custom::after {
        width: 70.3125rem
    }

    .s-products .container--custom::before {
        -webkit-transform: translate3d(-22%, -62%, 0);
        transform: translate3d(-22%, -62%, 0)
    }

    .s-products .container--custom::after {
        -webkit-transform: translate3d(20%, 62%, 0);
        transform: translate3d(20%, 62%, 0)
    }

    .s-products__label {
        font-size: 2.375rem
    }
}

@media(max-width: 62rem) {
    .s-products {
        min-height:auto;
        background: var(--clr-neutral-87)
    }

    .s-products .container--custom::before,.s-products .container--custom::after {
        display: none
    }

    .s-products__txt-wrapper,.s-products__links {
        display: block;
        position: relative;
        inset: 0;
        margin: 0 auto
    }

    .s-products__txt-wrapper {
        margin-bottom: 2rem
    }

    .s-products__swiper {
        display: block
    }

    .s-products__links {
        display: none
    }
}

.s-success-stories .container--custom {
    --sx: 5rem;
    padding: 0 var(--sx);
    position: relative
}

.s-success-stories .container--custom .swiper__prev {
    left: calc(var(--sx) * 0.5);
    -webkit-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.s-success-stories .container--custom .swiper__next {
    right: calc(var(--sx) * 0.5);
    -webkit-transform: translate3d(50%, -50%, 0);
    transform: translate3d(50%, -50%, 0)
}

@media(max-width: 36rem) {
    .s-success-stories .container--custom {
        --sx: 1rem
    }

    .s-success-stories .container--custom .swiper__prev,.s-success-stories .container--custom .swiper__next {
        top: 60%
    }

    .s-success-stories .container--custom .swiper__prev {
        left: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0)
    }

    .s-success-stories .container--custom .swiper__next {
        right: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0)
    }
}

.s-about {
    background: var(--linear-gradient);
    color: var(--clr-neutral-100)
}

.s-about ::-moz-selection {
    background-color: #fff;
    color: var(--clr-primary)
}

.s-about ::selection {
    background-color: #fff;
    color: var(--clr-primary)
}

.s-about .container--custom {
    min-height: 46.875rem;
    position: relative;
    padding-top: 3rem;
    padding-right: 6rem;
    padding-bottom: 9.375rem
}

.s-about__img {
    display: block;
    width: 47.5rem;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.s-about__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none
}

.s-about__img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background: -webkit-gradient(linear, left top, right top, from(var(--clr-primary-gradient)), color-stop(5%, transparent));
    background: linear-gradient(to right, var(--clr-primary-gradient) 0%, transparent 5%);
    margin-left: -1px
}

.s-about .row {
    width: 100%
}

.s-about .col {
    max-width: 34.375rem
}

.s-about p {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    font-size: 1.25rem
}

@media(min-width: 86rem) {
    .s-about__img::after {
        display:block
    }
}

@media(max-width: 75rem) {
    .s-about .container--custom {
        min-height:0;
        padding: 3rem 1rem;
        background: none
    }

    .s-about__img {
        display: none
    }

    .s-about .row {
        margin: 0
    }

    .s-about .col {
        max-width: none
    }
}

.s-contact {
    overflow: hidden
}

.s-contact .container--custom {
    position: relative
}

.s-contact__img {
    display: block;
    width: 31.9275rem;
    position: absolute;
    top: 0;
    right: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.s-contact__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none
}

.s-contact__img::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    margin-right: -1px;
    background: -webkit-gradient(linear, right top, left top, from(#fff), color-stop(5%, transparent));
    background: linear-gradient(to left, #fff 0%, transparent 5%)
}

.s-contact__icons {
    list-style: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: .5rem;
    padding: 0
}

.s-contact__icons>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.s-contact__icons>li>a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: inherit
}

.s-contact__icons>li>a:hover {
    text-decoration: none;
    color: var(--clr-neutral-30)
}

.s-contact__icons>li>a:hover .s-contact__icon {
    background-color: var(--clr-primary-active)
}

.s-contact__icon {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.75rem;
    aspect-ratio: var(--hexagon-proportion);
    background-color: var(--clr-primary);
    -webkit-mask: url("../img/hexagon-shape.svg") no-repeat center/contain;
    mask: url("../img/hexagon-shape.svg") no-repeat center/contain
}

.s-contact__icon img {
    width: 1.5rem;
    height: 1.5rem;
    -o-object-fit: contain;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

@media(min-width: 86rem) {
    .s-contact__img::after {
        display:block
    }
}

@media(max-width: 75rem) {
    .s-contact__img {
        display:none
    }
}

/*# sourceMappingURL=style.css.map */