index.css

:root {
    --primary-red: hsl(356, 100%, 66%);
    --primary-light-red: hsl(355, 100%, 74%);
    --primary-dark-blue: hsl(208, 49%, 24%);

    --text-color: hsl(0, 0%, 100%);
    --footer-text-color: hsl(240, 2%, 79%);
    --body-copy-color: hsl(209, 12%, 34%);
    --footer-background-color: hsl(240, 10%, 16%);

    --background-red-gradient: hsl(13, 100%, 72%);
    --background-light-red-gradient: hsl(353, 100%, 62%);

    --button-sign-up-hover: hsl(355, 100%, 74%);

    --background-intro-color: linear-gradient(135deg, #FF8F71 0%, #FF3E55 100%);

    --background-body-blue: hsl(237, 17%, 21%);
    --background-body-desaturated-blue: hsl(237, 23%, 32%);

    --bg-body: linear-gradient(135deg, var(--background-body-blue) 0%, var(--background-body-desaturated-blue) 100%);

    --body-copy-font-size: 1rem;
    --body-copy-letter-spacing: 0.03125rem;
    --letter-spacing-headers: -0.075rem;

    --anchor-button-height: 3rem;
    --anchor-button-width: 8.5625rem;

    --page-padding-left: 11.5vw;
    --page-padding-right: var(--page-padding-left);

    --main-font: 'Overpass', sans-serif;
    --secondary-font: 'Ubuntu', sans-serif;

    --article-width: 33.75rem;
    --article-header-font-size: 1.75rem;

    --h1-infrastructure-font-size: 2.5rem;
    --h1-font-size: 1.75rem;

    --footer-height: 22.4375rem;
    --img-width: auto;

    --hidden-menu-width: 10.5rem;
    --hidden-menu-height: 9.1875rem;
    --right-offset: 11.45vw;
    --mobile-grey-menu: hsl(0, 0%, 91%);

    --section-product-desc-height: 63rem;
    --section-infrastructure-height: 25rem;
    --section-technical-cont-height: 63rem;
}



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--main-font);
    color: var(--text-color);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body::-webkit-scrollbar {
    display: none;
}

main {
    overflow: hidden;
}

.li--hasMenu {
    z-index: 1;
    position: relative;
    cursor: pointer;
    transition: all .5s ease;
}

.li--leftNav:hover,
.li--leftNav:focus {
    opacity: 100%;
}

.a--ul--leftNav:hover::after,
.a--ul--leftNav:focus::after {
    content: "";
    position: absolute;
    border: 1px solid var(--text-color);
    left: 0;
    bottom: 35%;
}

.li--hidden--main {
    position: absolute;
    top: 3rem;
    background-color: var(--main-font);
}

.ul--hidden {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-left: 1.5rem;
    justify-content: center;
    gap: .5rem;
    background-color: var(--text-color);
    width: var(--hidden-menu-width);
    height: var(--hidden-menu-height);
    -webkit-box-shadow: 0px 9px 20px 5px rgba(80, 80, 80, 0.46);
    box-shadow: 0px 9px 20px 5px rgba(80, 80, 80, 0.46);
    border-radius: .3rem;
    clip-path: circle(0% at 5% 5%);
    transition: all .5s ease;
}

.a--hidden {
    display: inline-block;
    font-size: .9rem;
    font-family: 'Ubuntu', sans-serif;
    color: var(--background-body-blue);
}

.a--footer,
.a--ul--leftNav,
.a--rightNav {
    color: var(--text-color);
}

.li--hidden--main:nth-child(4) {
    left: 6.5rem;
}

.li--hidden--main:nth-child(6) {
    left: 14rem;
}

.ul--hidden {
    list-style: none;
}

.li--hasMenu {
    height: 100%;
    display: flex;
    align-items: center;
}


.li--productMenu>.a--ul--leftNav:hover::after,
.li--productMenu>.a--ul--leftNav:focus::after {
    width: 5.3ch;
}


.li--companyMenu>.a--ul--leftNav:hover::after,
.li--companyMenu>.a--ul--leftNav:focus::after {
    width: 6.3ch;
}

.li--connectMenu>.a--ul--leftNav:hover::after,
.li--connectMenu>.a--ul--leftNav:focus::after {
    width: 5.7ch;
}

.a {
    opacity: 75%;
    display: inline-block;
    font-family: var(--main-font);
    text-decoration: none;
    cursor: pointer;
}

.a:hover,
.a:focus {
    opacity: 100%;
}

.a--ul--leftNav {
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 100%;
    background-color: transparent;
    border: none;
}

.h1 {
    font-size: var(--h1-font-size);
}

.a--rightNav,
.ul--leftNav,
.a--hero {
    font-weight: 600;
}

.section--intro {
    background-image: var(--background-intro-color);
    border-radius: 0px 0px 0px 6.25rem;
}

.block--wrapperIntro {
    height: 100%;
    width: 100%;
    background-image: url(./images/bg-pattern-intro-desktop.svg);
    background-position: 25% 52%;
    padding-bottom: 9.25rem;
    border-radius: 0px 0px 0px 6.25rem;
}

.heading--intro {
    display: flex;
    gap: 4rem;
    padding-left: var(--page-padding-left);
    padding-top: 3.5rem;
    padding-bottom: 8rem;
    padding-right: var(--page-padding-right);
    align-items: center;
}

.section--hero {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.block--hero {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
}

.h1--hero {
    font-size: 4rem;
    letter-spacing: -0.12rem;
    line-height: 98px;
}

.ul {
    list-style: none;
}

.ul--leftNav,
.ul--rightNav {
    display: flex;
}

.svg--arrow {
    transition: all .3s ease;
    margin-left: .3rem;
}

.button--mobileNav {
    border: none;
    background-color: transparent;
    position: absolute;
    top: 4rem;
    right: 2rem;
    display: none;
}

.nav {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: space-between;
}

.block--sectionProductDescLeft {
    max-width: 35vw;
}


.a.whiteFilled {
    background-color: var(--text-color);
    color: var(--primary-red);
}

.a.whiteFilled:hover,
.a.whiteFilled:focus {
    background-color: var(--button-sign-up-hover);
    color: var(--text-color);
}

.whiteFilled,
.whiteOutline {
    opacity: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2rem;
    width: var(--anchor-button-width);
    height: var(--anchor-button-height);
    transition: all .5s ease;
}

.whiteOutline {
    border: 1px solid var(--text-color);
}

.whiteOutline:hover,
.whiteOutline:focus {
    color: var(--button-sign-up-hover);
    background-color: var(--text-color);
}

.p {
    font-weight: 400;
    opacity: 75%;
}

.p--hero {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.ul--leftNav,
.ul--rightNav {
    align-items: center;
}

.ul--leftNav {
    position: relative;
    gap: 2rem;
}

.ul--rightNav {
    gap: 2rem;
}


.section--productDesc {
    height: var(--section-product-desc-height);
    overflow-x: hidden;
    padding-left: var(--page-padding-left);
    padding-top: 10rem;
    color: var(--primary-dark-blue);
    display: flex;
    position: relative;
}

.header--productDesc {
    padding-right: 20rem;
    width: 100vw;
}

.img--productDesc {
    position: absolute;
    right: clamp(-800px, -20.5vw, -250px);
    top: 6rem;
}

.article {
    max-width: var(--article-width);
}

.h1--infrastructure {
    font-size: var(--h1-infrastructure-font-size);
    letter-spacing: var(--letter-spacing-headers);
}

.h1--productDesc {
    letter-spacing: var(--letter-spacing-headers);
    font-size: var(--h1-infrastructure-font-size);
    text-align: center;
    margin-bottom: 6rem;
}

.article--technical:first-child>.p--technical,
.article--technicalCont:first-child>.p--technicalCont {
    margin-bottom: 4.5rem;
}

.article>.p {
    font-size: var(--body-copy);
    letter-spacing: var(--body-copy-letter-spacing);
    line-height: 175%;
}

.article--technical>.p {
    color: var(--body-copy-color);
}

.header-technical,
.heading--technicalCont {
    font-size: var(--article-header-font-size);
    margin-bottom: 1.5rem;
}

.section--infrastructure {
    background-image: var(--bg-body);
    border-radius: 0 6.25rem;
    min-height: var(--section-infrastructure-height);
}

.block--sectionWrapper {
    display: flex;
    border-radius: 0 6.25rem;
    min-height: var(--section-infrastructure-height);
    width: 100%;
    background-image: url("./images/bg-pattern-circles.svg");
    background-repeat: no-repeat;
    background-position: top 83% left -50%;
    position: relative;
}

.img--infrastructure {
    position: absolute;
    top: -4.5rem;
    left: calc(var(--page-padding-left) - 3.5vw);
}

.article--infrastructure {
    position: absolute;
    left: clamp(620px, 51vw, 900px);
    padding-top: 7.5rem;
    padding-right: 2rem;
}

.p--infrastructure {
    color: var(--text-color);
}

.h1--infrastructure {
    margin-bottom: .5rem;
}

.section--technicalCont {
    display: flex;
    position: relative;
    justify-content: space-around;
    min-height: var(--section-technical-cont-height);
}

.img--technicalCont {
    position: absolute;
    top: 7rem;
    left: -17.5rem;
}

.block--rightTechnicalCont {
    padding-top: 18rem;
    position: absolute;
    left: clamp(620px, 51vw, 900px);
    padding-right: 2rem;
}

.h1--technicalCont {
    color: var(--primary-dark-blue);
    margin-bottom: 1.5rem;
}

.p--technicalCont {
    color: var(--body-copy-color);
}

.footer {
    background-color: var(--footer-background-color);
    border-radius: 0px 100px 0px 0px;
    height: var(--footer-height);
    padding-top: 4.5rem;
    padding-left: var(--page-padding-left);
    display: flex;
    gap: 13.5vw;
}

.h1--footer {
    font-size: var(--body-copy-font-size);
    margin-bottom: 2rem;
}

.li--footer {
    font-size: .9375rem;
    font-family: 'Ubuntu', sans-serif;
    padding: 0rem 0rem 1rem 0rem;
}

.block--infrastructureWrapper {
    margin-right: 57vw;
}

.block--imgWrapper {
    margin-right: clamp(550px, 50vw, 800px);
}

.button--mobileNav .hamburger {
    transition: 1s;
}

.path {
    transition: 1s;
}

.button--mobileNav[aria-expanded="true"] .hamburger {
    translate: 10px -10px;
    rotate: 45deg;
}

.button--mobileNav .path {
    stroke-dasharray: 60 31.141 60 300;
}

.button--mobileNav[aria-expanded="true"] .path {
    stroke-dasharray: 60 105 60 300;
    stroke-dashoffset: -90;
}



@media (max-width:1200px) {
    :root {
        --page-padding-left: 4vw;
    }

    .block--sectionProductDescLeft {
        max-width: 38vw;
    }

    .img--infrastructure {
        left: calc(var(--page-padding-left) - 5vw);
    }

    .block--infrastructureWrapper {
        margin-right: 525px
    }

    .img--technicalCont {
        height: 700px;
    }

    .article--infrastructure,
    .block--rightTechnicalCont {
        left: clamp(550px, 46vw, 900px);
    }
}

@media (max-width:1100px) {
    .img--productDesc {
        height: 790px;
    }

    .block--sectionProductDescLeft {
        max-width: 45vw;
    }


    .block--rightTechnicalCont {
        padding-top: 14rem;
    }
}

@media (max-width:1035px) {
    :root {
        --h1-infrastructure-font-size: 2.25rem;
    }

    .article--infrastructure {
        padding-top: 4.5rem;
    }

    .img--productDesc {
        height: 700px;
    }
}

@media (max-width:985px) {
    .h1--infrastructure {
        margin-bottom: 1rem;
    }

    .block--rightTechnicalCont {
        padding-top: 10rem;
    }
}

@media (max-width:880px) {
    .article--infrastructure {
        padding-top: 4rem;
    }

    .img--infrastructure {
        height: 500px;
        top: -2rem;
    }

    .block--infrastructureWrapper {
        margin-right: 450px;
    }

    .block--imgWrapper {
        margin-right: 425px;
    }

    .section--productDesc {
        padding-top: 4rem;
    }

    .heading--intro {
        gap: 2rem;
    }

    .ul--rightNav {
        gap: 1rem;
    }

    .block--sectionProductDescLeft {
        max-width: 39vw;
    }

    .h1--hero {
        font-size: 3rem;
    }

    .img--technicalCont {
        height: 600px;
    }

    .article--infrastructure,
    .block--rightTechnicalCont {
        left: clamp(450px, 46vw, 900px);
    }
}

@media (max-width: 775px) {
    .h1--productDesc {
        text-align: start;
        margin-bottom: 3rem;
    }

    .header--productDesc {
        padding-right: 0rem;
        width: 100vw;
    }

    .article--infrastructure {
        padding-top: 3rem;
    }

    .img--productDesc {
        height: 650px;
        top: 4.5rem;
    }

    .block--infrastructureWrapper {
        margin-right: 410px;
    }

    .img--infrastructure {
        height: 450px;
        top: .5rem;
    }
}

@media (max-width: 725px) {
    :root {
        --section-product-desc-height: 80rem;
        --section-infrastructure-height: 30rem;

    }

    .img--productDesc {
        margin-top: 5rem;
    }


    .block--wrapperIntro {
        background-image: url(./images/bg-pattern-intro-mobile.svg);
    }

    .section--productDesc {
        height: auto;
        min-height: var(--section-product-desc-height);
        padding-bottom: 15rem;
        align-items: center;
        justify-content: center;
        flex-direction: column-reverse;
        padding-left: 0;
    }

    .block--sectionWrapper {
        background-position: top 1050% left 50%;
        background-size: 31.25rem;
        flex-direction: column;
    }

    .section--technicalCont {
        flex-direction: column;
        justify-content: normal;
        align-items: center;
        padding-top: 3rem;
    }

    .block--rightTechnicalCont {
        padding-top: 0;
    }

    .article--technicalCont,
    .article--technical {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .img--technicalCont {
        height: initial;
        position: revert;
    }

    .img--infrastructure {
        top: 0;
        top: -14rem;
        left: calc(50vw - 214.5px);
    }

    .article--technical {
        margin-top: 3rem;
    }

    .article--infrastructure {
        position: revert;
        padding: 13.8125rem 1.5rem 6.8125rem;
    }

    .block--imgWrapper {
        margin: 0;
    }

    .h1--technical,
    .p--technical,
    .h1--infrastructure,
    .p--infrastructure,
    .h1--technicalCont,
    .p--technicalCont {
        text-align: center;
    }

    .article--technical:first-child>.p--technical {
        margin-bottom: 2rem;
    }

    .block--sectionProductDescLeft,
    .article--infrastructure {
        max-width: initial;
    }

    .h1--productDesc {
        text-align: center;
        margin: 0;
        position: static;
    }

    .header--productDesc {
        position: absolute;
        left: 0;
        top: 5rem;
        padding: 0;
    }

    .img--productDesc {
        height: auto;
        position: static;
    }

    .h1--hero {
        line-height: 153%;
        font-size: 2.25rem;
        text-align: center;
    }

    .p--hero {
        font-size: 1rem;
    }


    .button--mobileNav {
        position: absolute;
        top: 3.5rem;
        cursor: pointer;
        display: block;
    }

    .nav,
    .ul--leftNav,
    .ul--rightNav {
        flex-direction: column;
    }

    .nav {
        width: 100vw;
        position: absolute;
        top: 0;
        left: 0;
    }


    .ul--leftNav,
    .ul--rightNav {
        overflow: hidden;
        transition: all .5s;
        z-index: 99;
        width: 15rem;
        background-color: var(--text-color);
        border-radius: .5em;
        left: calc(50vw - 7.5rem);
        height: 0;
        padding: 0;
    }

    .li--hidden--main:nth-child(4),
    .li--hidden--main:nth-child(6) {
        left: 0rem;
    }

    .a--ul--leftNav:hover::after,
    .a--ul--leftNav:focus::after {
        border: 0;
    }

    .ul--leftNav>.li--hasMenu,
    .ul--rightNav>.li {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .li--hidden--main {
        position: relative;
        top: 1rem;
        height: 0;
        opacity: 0;
        margin-top: -2rem;
        transition: all 1s ease;
    }

    .ul--hidden {
        background-color: var(--mobile-grey-menu);
        -webkit-box-shadow: none;
        padding-left: 0;
        align-items: center;
        box-shadow: none;
    }

    .svg--arrow>path {
        stroke: var(--button-sign-up-hover);
    }

    .ul--leftNav {
        top: 8rem;
    }

    .ul--rightNav>.li {
        margin-right: 0.625rem;
    }

    .ul--rightNav>.li:last-child>.a--rightNav {
        color: var(--text-color);
        background-image: var(--background-intro-color);
    }


    .a--ul--leftNav,
    .a--rightNav {
        color: var(--primary-dark-blue);
    }

    .ul--rightNav {
        position: relative;
        top: 7.25rem;
    }

    .ul--rightNav::before {
        content: "";
        width: 80%;
        position: relative;
        top: 0;
        border: .5px solid hsl(0, 0%, 59%, 90%);
    }

    .footer {
        height: revert;
        flex-direction: column;
        align-items: center;
        padding-bottom: 4.6875rem;
        gap: 2.5rem;
    }

    .block--rightTechnicalCont {
        position: revert;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

}

@media (max-width:610px) {
    .block--sectionWrapper {
        background-position: top -10000% left 50%;
    }
}

@media (max-width:490px) {
    .block--sectionWrapper {
        background-size: 30rem;
        background-position: top -150% left 50%;
    }
}

@media (max-width:385px) {
    .block--sectionWrapper {
        background-size: 30rem;
        background-position: top -125% left 50%;
    }
}

@media (min-width:1330px) {
    .img--productDesc {
        right: unset;
        left: clamp(620px, 51vw, 900px);
    }
}

@media (min-width: 1800px) {
    .section--productDesc {
        padding-top: unset;
        justify-content: space-around;
        align-items: center;
    }


    .header--productDesc {
        width: unset;
        padding-right: unset;
    }

    .h1--productDesc {
        text-align: unset;
    }

    .article--infrastructure,
    .block--rightTechnicalCont {
        padding-top: unset;
    }

    .img--infrastructure,
    .article--infrastructure,
    .block--rightTechnicalCont,
    .img--productDesc,
    .img--technicalCont {
        position: unset;
    }

    .block--sectionWrapper {
        display: flex;
        align-items: center;
        justify-content: space-around;
        max-height: var(--section-infrastructure-height);
    }

    .section--technicalCont {
        justify-content: space-around;
        align-items: center;
    }

    .block--rightTechnicalCont {
        margin-right: 6.4rem;
    }

    .footer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: unset;
    }


}