/*font-size
6px 9px 13px 18px 25px 36px 51px 72px 102px

spacing
3px 5px 9px 14px 23px 37px 59px 96px 155px  251px 
*/

html {
    font-size: 62.5%;
}

img {
    width: 100%;
}

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

*:focus {
    outline: solid #809bce 3px;
}

.btn:focus {
    outline: none;
}

.page_achor{
    width:0;
    height:0;
}


.text-link:visited,
.text-link:link,
.text-link {
    border-bottom: dotted #ffffff00 3px;
    transition: all 0.3s ease;
    width: fit-content;
    cursor: pointer;
    color: inherit;
}

.font-white:visited, .font-white:link{
    color:white;
}


.text-link:focus {
    outline: none;
    border-bottom: solid #809bce 3px;
}

.text-link:hover {
    border-bottom: dotted #809bce 3px;
}

.text-link:active {
    border-bottom: solid #809bce 3px;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

.mobile {
    display: none !important;
}

.tablet{
    display: none !important;
}

body {
    font-family: 'Raleway', sans-serif;
    line-height: 1;
    font-weight: 400;
    color: #252525;
    background: #176058;
    font-size: 1.8rem;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    overflow-x: hidden;
    cursor: default;

    background-image: url("assets/Home/grid background pattern.png");
    background-size: 40rem;
    background-repeat: repeat;
}

.light_green-background {
    background-color: #D3E7E5;
}

h1,
h2,
h3,
h4 {
    font-family: 'Montserrat', sans-serif;
}


h1 {
    font-size: 10.2rem;
    font-weight: 600;
}

h2 {
    font-size: 3.6rem;
    font-weight: 400;
}

h3 {
    font-size: 2.5rem;
    font-weight: 300;
}

h4 {
    font-size: 1.8rem;
    font-weight: 500;
}

p {
    font-weight: 300;
}

.font-dgreen {
    color: #11453F;
}

.font-white {
    color: #fff;
}

.no-font {
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.75px;
}

.border-radius {
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

.shadow_lg {
    box-shadow: 0.3rem 0.3rem 0.6rem 0.9rem rgba(0, 0, 0, 0.059);
}

.drop-shadow_lg{
    filter: drop-shadow(0.3rem 0.3rem 0.9rem rgba(0, 0, 0, 0.3));
}

.drop-shadow_md{
    filter: drop-shadow(0.2rem 0.2rem 0.6rem rgba(0, 0, 0, 0.2));
}

.container {
    width: 85vw;
    max-width: 165rem;
}

.section-gap {
    padding-top: 25.1rem;
}

.bottom-margin--sm {
    margin-bottom: 0.9rem;
}

.top-margin--sm {
    margin-top: 0.9rem;
}

.top_margin--md {
    margin-top: 9.6rem;
}

.bottom_margin--lg {
    margin-bottom: 15.5rem;
}

.top_margin--lg {
    margin-top: 15.5rem;
}

.cta-btn,
.cta-btn:link,
.cta-btn:visited {
    padding: 0.9rem;
    font-size: inherit;
    font-family: inherit;
    background-color: #809bce;
    border: solid #809bce 3px;
    color: #121212;
    outline: none;
    border-top-left-radius: 2.3rem;
    border-bottom-right-radius: 2.3rem;
    cursor: pointer;

}

.cta-btn:focus,
.cta-btn:hover {
    border: solid #b3c3e2 3px;
}

.cta-btn:active {
    border: solid #809bce 3px;
    background-color: white;
    color: #809bce;
}

.flex {
    display: flex;
}

.flex_col {
    flex-direction: column;
}

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

.grid {
    display: grid;
}

.grid-center {
    width: 100%;
    justify-items: center;
    align-items: center;
}

.grid--cols--2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid--cols--3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid--cols--4 {
    grid-template-columns: repeat(4, 1fr);
}


.grid--cols--2--left {
    grid-column: 1;
    justify-self: start;
}

.grid--cols--2--right {
    grid-column: 2;
    justify-self: end;
}

/* navbar */

.logo-mobile,
.side-menu,
.hamb {
    display: none;
}

.nav-container {
    position: sticky;
    top: 0;
    width: 100vw;
    z-index: 5;
    background-color: #fff;
    font-family: 'Montserrat', sans-serif;
}

.nav-container .container{
    transition: all 0.3s;
}


.navmenu {
    height: 9.6rem;
    width: 100%;
    grid-template-columns: 1fr 1fr 3fr 1fr 1fr;
    grid-template-rows: 1fr;
    justify-items: center;
    align-items: end;
    column-gap: 1.4rem;
    font-size: 1.8rem;
    background-color: #fff;
}

.nav-section {
    margin-bottom: 1.4rem;
}


.nav-header:link,
.nav-header:visited,
.nav-subheader:link,
.nav-subheader:visited {
    text-decoration: none;
    color: #252525;
}

.nav-header,
.nav-subheader {
    display: block;
    text-decoration: none;
}

.nav-header:focus,
.nav-subheader:focus {
    border-bottom: dotted #21897e 2px;
    outline: none;
}


.nav-header:hover,
.nav-section a:hover,
.nav-subheader:hover {
    color: #21897e;
    font-weight: 500;
}

.nav-header:active,
.nav-section a:active,
.nav-subheader:active {
    background-color: #d3e7e5;
}



.nav-subheader {
    float: none;
    font-weight: 400;
    width: 23rem;
    padding: 1.4rem;
}

.nav-sublist {
    max-height: 0;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    background-color: #fff;
    box-shadow: 0 0.6rem 0.9rem rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease-out;

    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0.9rem;
    align-items: start;
}

.nav-list {
    display: block;
}


.nav-section li:hover .nav-sublist,
.nav-section li:active .nav-sublist,
.nav-section li:focus .nav-sublist {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2.3rem;
    padding: 2.3rem 0;
    align-items: start;
    max-height: none;
}

.nav-logo:link,
.nav-logo:visited {
    width: 30rem;
    align-self: center;
    transition: all 0.3s ease-in-out;
}

.nav-logo:hover {
    width: 31.5rem;
}

.nav-list .nav-header:link,
.nav-list .nav-header:visited,
.nav-list .nav-header:hover {
    color: #252525;
    font-weight: 400;
    background-color: #fff;
}

.nav-cta {
    display: inline-block;
    align-self: end;
    padding: 0 1.4rem 1.4rem 0;
}

.nav-btn i,
.nav-btn i:link,
.nav-btn i:visited {
    font-size: 3.6rem;
    color: #252525;
    transition: all 0.3s ease;
}

.nav-btn button,
.nav-btn button:link,
.nav-btn button:visited {
    background-color: #fff;
    border: none;
    cursor: pointer;
}

.nav-btn button:focus {
    outline: none;
    border-bottom: dotted #21897e 2px;
}

.nav-btn button i:hover {
    font-size: 4.2rem;
    color: #21897e;
}

.nav-btn button i:focus {
    /* border-bottom: dotted #21897e 2px; */
    outline: none;
}

/* Footer */

.wavy_footer::before {
    content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg width='100%25' height='100%25' viewBox='0 0 720 50' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cpath d='M720 49.562l0 -39.216c-90.933 10.466 -181.867 20.933 -257 17.5c-75.133 -3.434 -134.467 -20.767 -209 -26c-74.533 -5.234 -164.267 1.633 -254 8.5l0 39.216l720 0Z' style='fill:%23d3e7e5%3Bfill-rule:nonzero%3B'/%3E%3C/svg%3E");
    }
    /* image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 720 50' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd%3Bclip-rule:evenodd%3Bstroke-linejoin:round%3Bstroke-miterlimit:2%3B'%3E%3Cpath d='M0 49.562l0 -39.216c90.933 10.466 181.867 20.933 257 17.5c75.133 -3.434 134.467 -20.767 209 -26c74.533 -5.234 164.267 1.633 254 8.5l0 39.216l-720 -0Z' style='fill:%23d3e7e5%3Bfill-rule:nonzero%3B'/%3E%3C/svg%3E */

.footer {
    background-color: #D3E7E5;
    width: 100vw;
    column-gap: 10.2rem;

}

.footer_nav,
.footer_links {
    width: fit-content;
    margin-top: 2.3rem;
    margin-bottom: 5.9rem;
}

.footer_nav {
    grid-template-columns: repeat(6, max-content);
    row-gap: 5.9rem;
    column-gap: 2.3rem;
    height: fit-content;
    justify-self: end;
    align-items: center;
}



.footer_nav h4 {
    justify-self: end;
}

.footer_nav h4,
.footer_nav a {
    font-size: 1.3rem;
}

.footer_nav p {
    justify-self: center;
    align-self: center;
    padding: 0 0.9rem;
    font-weight: 500;
    font-size: 2.5rem;
}

.footer_GD {
    grid-row: 1;
}

.footer_UI {
    grid-row: 2;
}

.footer_other {
    grid-row: 3;
}

.footer_links {
    grid-template-columns: 5rem 5rem 5rem 15.5rem;
    grid-template-rows: 15rem 5rem 5rem;
    justify-items: center;
    align-items: center;
    gap: 2.3rem;
    width: 30%;
}

.footer_logo,
.footer_logo:link,
.footer_logo:visited {
    grid-column: 1/5;
    align-self: center;
    transition: all 0.3s ease-in-out;
    width: 30rem;
}

.footer_logo:hover {
    width: 31.5rem;
}

.footer_social-media {
    margin-left: 7rem;
}

.footer_btn {
    grid-row: 2/4;
    grid-column: 4/5;
    align-self: end;

}

.footer_links .social-media,
.footer_links .social-media:link,
.footer_links .social-media:visited {
    width: 5rem;
    padding: 0.5rem;
    transition: all 0.3s ease-in-out;
}

.footer_links .social-media:hover {
    width: 5.2rem;
    padding: 0.3rem;
}

@media (max-width: 1250px) {

    .navbar {
        grid-template-columns: 1fr 1fr 2fr 1fr 1fr;
    }

    .cta-btn,
    .cta-btn:link,
    .cta-btn:visited {
        padding: 0.9rem;
        font-size: 1.8rem;
    }

    .footer_nav {
        column-gap: 0.9rem;
    }

    .footer_links {
        width: fit-content;
    }

}

@media (max-width: 1050px) {
    html {
        font-size: 50%;
    }

    .tablet{
        display: block !important;
    }
}

@media(max-width: 790px)

/*mobile*/
    {

    .mobile {
        display: block !important;
    }

    .desktop {
        display: none !important;

    }

    .logo-mobile {
        display: inline-block;
        margin-left: 1.4rem;
    }

    .nav-logo,
    .nav-logo:link {
        width: 2.3rem;
        padding: 0.6rem 0;
    }

    .nav-logo:hover {
        width: 2.6rem;
        padding: 0.3rem 0;
    }

    .nav {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: #fff;
        top: 5.1rem;
        overflow: hidden;
        z-index: 2;
    }

    .navmenu {
        grid-template-columns: 1fr;
        width: fit-content;
        justify-items: end;
        align-items: end;
        row-gap: 2.3rem;
    }

    .navmenu a {
        display: block;
    }

    .nav-section {
        padding-bottom: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 4.5fr;
        width: 25rem;
        justify-items: end;
        width: 100vw;
    }

    .nav {
        max-height: 0;
        transition: max-height .5s ease-out;
    }



    .nav-header,
    .nav-subheader {
        display: block;
        text-decoration: none;
    }

    .nav-header {
        padding: 2.3rem 9.6rem 0 0;
        font-weight: 500 !important;
        font-size: 1.8rem;
        width: 100vw;
        text-align: right;
    }

    .nav-list .nav-header {
        cursor: default;
    }

    .nav-subheader {
        width: auto;
        padding: 1.4rem;
        margin-right: -1.4rem;
    }

    .nav-sublist {
        max-height: none;

        display: grid;
        grid-template-columns: 1fr;
        row-gap: 0.9rem;
        justify-items: end;
        box-shadow: none;
        padding: 0.9rem 9.6rem 0 2.3rem;
        width: 100vw;

    }

    .nav-section li:hover .nav-sublist,
    .nav-section li:active .nav-sublist,
    .nav-section li:focus .nav-sublist {
        row-gap: 0.9rem;
        padding: 0.9rem 9.6rem 0 2.3rem;
    }

    .nav-cta {
        padding: 0 9.6rem 0 0;
        cursor: pointer;
    }

    .cta-btn,
    .cta-btn:link,
    .cta-btn:visited {
        font-size: 1.8rem;
        font-weight: 400;
        padding: 1.4rem 2.3rem;
    }

    .hamb {
        display: block;
        cursor: pointer;
        float: right;
        padding: 3rem 2.3rem;
        z-index: 5;
    }

    .hamb-line {
        background: #21897e;
        display: block;
        height: 2px;
        position: relative;
        width: 24px;
        z-index: 5;
        ;
    }

    .hamb-line::before,
    .hamb-line::after {
        background: #21897e;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
    }

    .hamb-line::before {
        top: 5px;
    }

    .hamb-line::after {
        top: -5px;
    }

    .side-menu:checked~nav {
        max-height: 100%;
    }

    .side-menu:checked~.hamb .hamb-line {
        background: transparent;
    }

    .side-menu:checked~.hamb .hamb-line::before {
        transform: rotate(-45deg);
        top: 0;
    }

    .side-menu:checked~.hamb .hamb-line::after {
        transform: rotate(45deg);
        top: 0;
    }

    .grid--cols--2 {
        grid-template-columns: 1fr;
    }

    .grid--cols--2--right {
        grid-column: 1;

    }

    .grid--cols--3 {
        grid-template-columns: 1fr 1fr;
    }

    footer .footer {
        flex-direction: column;
        padding-top: 5.9rem;
        height: fit-content;

        display: grid;
        grid-template-rows: repeat(2, max-content);
        grid-template-columns: 1fr;

    }

    .footer_nav {
        grid-template-rows: repeat(6, 1fr);
        grid-template-columns: repeat(3, 1fr);
        row-gap: 2.3rem;
        column-gap: 2.3rem;
        width: fit-content;
        height: fit-content;
        justify-self: center;
    }

    .footer_GD {
        grid-row: auto;
        grid-column: 1;
    }

    .footer_UI {
        grid-row: auto;
        grid-column: 2;
    }

    .footer_other {
        grid-row: auto;
        grid-column: 3;
    }

    .footer_nav h4 {
        grid-row: 1;
    }

    .footer_nav p {
        grid-row: 2;
        transform: rotate(90deg);
    }

    .footer_nav h4,
    .footer_nav a {
        font-size: 1.8rem;
        justify-self: center;
        align-self: center;
        text-align: center;
    }

    .footer_nav .footer_nav-3 {
        grid-row: 3;
    }

    .footer_nav .footer_nav-4 {
        grid-row: 4;
    }

    .footer_nav .footer_nav-5 {
        grid-row: 5;
    }

    .footer_links {
        margin-top: -4rem;
    }
}