body {
    margin: 0;
    background-color: rgb(255, 255, 255);
}
/*BUTTONS*/
.cta-button {
    font-weight: 600;
    color: rgb(26, 57, 97);
    width: clamp(50px, 30vw, 200px);
    height: clamp(15px, 10vw, 75px);
    border: rgb(83, 95, 149) 4px solid;
    font-family: "Schibsted Grotesk", sans-serif;
    font-size: clamp(2px, 3vw, 20px);
    border-radius: 10px;
}
.top-card-button {
    font-size: clamp(7px, 1.2vw, 18px);
    font-weight: 500;
    z-index: 20;
    font-family: "Schibsted Grotesk", sans-serif;
    height: clamp(10px, 4vw, 45px);
    width: clamp(45px, 8vw, 135px);
    border: solid 1px black;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    background-color: transparent;
    &:last-child {
        border-right: 1px black solid;
    }
    &:hover {
        font-weight: 600;
        z-index: 21;    
        color: rgb(0, 8, 154);
        cursor: pointer;
    }
    &:active {
        color: rgb(0, 8, 154);
        font-weight: 800;
    }
}
.language-button {
    font-size: clamp(2px, 1.5vw, 18px);
    font-family: "Schibsted Grotesk", sans-serif;
    background-color: transparent;
    border: rgb(29, 46, 89) 2px solid;
    color: rgb(34, 53, 70);
    font-weight: 600;
    &:hover {
        cursor: pointer;
        background-color: rgba(0, 0, 0, 0.178);
    }
    &:active {
        transform: scale(0.9);
    }
}
.drop-down-button-template {
    border-radius: 20px;
    font-family: "Schibsted Grotesk", sans-serif;
    width: 96%;
    font-weight: 600;
    font-size: clamp(2px, 4vw, 15px);
    background-color: rgba(228, 244, 255, 0.736);
    border: 3px solid rgba(31, 59, 168, 0.601);
    &:hover {
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.854);
    }
    &:active {
        background-color: rgba(255, 255, 255, 0.44);
    }
}
@media screen and (max-width:500px) {
    .language-button {
        font-size: clamp(4px, 3vw, 30px);
        height: auto;
    }
}
/*--------------------------------------------------------------------CARD TEMPLATE & IMAGE---------------------------------------------------------------------------*/
.card-template {
    position: relative;
    display: flex;
    column-gap: clamp(25px, 5vw, 100px);
    margin-top: 60px;
    margin-bottom: 60px;
    width: 100%;
    max-width: 100%;
    height: fit-content;
    .border-template {
        background-color: rgba(21, 103, 245, 0.101);
        padding: clamp(20px, 3vw, 50px);
        border: rgb(114, 154, 200) clamp(1px, 5vw, 4px) solid;
    }
    .regular-style {
        line-height: clamp(20px, 10vw, 45px);
        font-size: clamp(10px, 2vw, 18px);
        font-weight: 600;
    }
    .header-style {
        font-size: clamp(15px, 2vw, 32px);
        font-weight: 800;
    }
}

.image-template {
    align-self: center;
    height: auto;
    width: clamp(20px, 45vw, 600px);
    &#right-side {
        margin-left:auto;
        right: 0;
        margin-right: 100px;    
    }
    &#left-side {
        margin-left: 100px;
    }
}
@media screen and (max-width: 900px) {
    .card-template {
        flex-direction: column;
        .border-template {
            margin-top: 50px;
        }
        .regular-style {
            line-height: clamp(20px, 2vw, 40px);
        }
    }
    .image-template {
        width: clamp(200px, 70vw, 400px);
        height: auto;
    }
}
@media screen and (max-width:500px) {
    .image-template {
        width: clamp(100px, 70vw, 300px);
        height: auto
    }
}

.main-environment {
    font-family: "Schibsted Grotesk", sans-serif;
    display:flex;
    flex-direction: column;
    z-index: 5;
    position: relative;
    height: fit-content;
    min-height: 100vh;
    width: 100%;
    /*Top bar thing*/
    .top-card-wrapper {
        top: 0;
        z-index: 10;
        position: sticky;
        width: 100%;
        height: fit-content;
        .top-card {
            display: flex;
            box-shadow: 0px -30px 50px 5px;
            z-index: 15;
            background-color: rgb(109, 180, 221);
            height: clamp(30px, 10vw, 100px);
            width: 100%;
            .button-grid {
                display: flex;
                justify-content: end;
                align-items: end;
                margin-right: clamp(10px, 3vw, 100px);
                width: 100%;
            }
            .language-button-grid {
                right: 0;
                position: absolute;
                display: flex;
                margin-top: clamp(3px, 1vw, 10px);
                margin-right: clamp(10px, 3vw,100px);
                column-gap: 20px;
            }
            .drop-down-button {
                position:absolute;
                display: none;
                right: 0;
                top: 0;
                margin-right: clamp(7px, 7vw, 30px);
                margin-top: clamp(7px, 5vw, 20px);
                width: clamp(10px, 2vw, 32px);
                height: auto;
                &#arrow-up {
                    .button-style {
                        img {
                            transform: rotate(180deg);
                        }
                    }
                }
                .button-style {
                    background-color: transparent;
                    border: 0;
                    outline: transparent;
                    img {
                        transition: 0.2s ease-in-out;
                        width: clamp(10px, 5vw, 32px);
                        height:auto;
                    }
                    &:hover {
                        img {
                            cursor: pointer;
                            transform: scale(1.1);
                        }
                    }
                    &:active {
                        img {
                            transform: scale(1);
                        }
                    }
                }
            }
            .logo-grid {
                text-decoration: none;  
                display: flex;
                .header-style {
                    font-size: clamp(10px, 3vw, 30px);
                    text-shadow: 0 0 1px rgb(6, 6, 191), 0 0 1px black, 0 0 1px black, 0 0 1px black;
                    color:white;
                    width: clamp(200px, 3vw, 600px);
                    align-self: center;
                }
                .logo {
                    align-self: center;
                    padding: 15px;
                    height: clamp(16px, 10vw, 64px);
                    width: clamp(16px, 10vw, 64px);

                }
            }

            &.hide-button-grid {
                .button-grid {
                    display: none;
                }
                .drop-down-button {
                    display: block;
                }
            }
            &.show-button-grid {
                .button-grid {
                    display: flex;
                }
                .drop-down-button {
                    display: none;
                }
            }
        }
        .drop-down-menu {
            box-sizing: border-box;
            border-bottom: 4px solid rgba(0, 0, 0, 0.546);
            display:flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
            padding-bottom: 20px;
            row-gap: 10px;
            margin-top: clamp(30px, 10vw, 100px);
            transform: translateY(-100%);
            transition: 0.5s ease-in-out;
            position:absolute;
            top: 0;
            z-index: -1;
            height: fit-content;
            width: 100%;
            background-color: rgb(62, 91, 195);
        }
        &.show-drop-down-menu {
            .drop-down-menu {
                transform: translateY(0);
            }
        }
        &.hide-drop-down-menu {
            .drop-down-menu {
                transform: translateY(-100%);
            }
        }
    }
    


    /*CTA*/
    .cta-card {
        margin-bottom: 50px;
        margin-top: 100px;
        display: flex;
        position: relative;
        padding: 0;
        z-index: 6;
        height: auto;
        width: 100%;
        .image-section {
            margin-left: auto;
            height: 400px;
            width:60%;
        }
        .text-section {
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            position: absolute;
            text-align: center;
            align-content: center;
            max-width: 70%;
            min-width: 70%;
            z-index: 7;
            color: rgb(57, 59, 58);
            background: linear-gradient(to right, rgb(142, 165, 239) 0%, rgb(167, 185, 224) 80%, transparent 90%);
            .cta-border {
                padding-top: 50px;
                padding-bottom: 50px;
                border: white solid 4px;
                border-right: 0;
                border-top: 0;
                border-bottom: 0;
                margin-left: 50px;
            }
            .header-style {
                padding-right:250px;
                font-weight: 900;
                font-size: clamp(12px, 5vw, 35px)
            }
            .regular-style {
                padding-right:250px;
                font-weight: 550;
                font-size: clamp(10px, 4vw, 25px);
            }
            .button-grid {
                margin-left: 20px;
                padding-right:250px;
                margin-top: 20px;
                justify-content: center;
                display: flex;
                column-gap: 20px;
                #services-button {
                    background-color: rgba(253, 253, 252, 0.384);
                    &:hover {
                        cursor:pointer;
                        background-color: rgba(253, 253, 252, 0.657);
                        transform: scale(1.1);
                    }
                    &:active {
                        background-color: rgba(24, 24, 24, 0.163);
                        transform: scale(1);
                    }
                }
                #about-button {
                    background-color: rgba(253, 253, 252, 0.384);
                    &:hover {
                        cursor:pointer;
                        background-color: rgba(253, 253, 252, 0.657);
                        transform: scale(1.1);
                    }
                    &:active {
                        background-color: rgba(24, 24, 24, 0.163);
                        transform: scale(1);
                    }
                }
            }
        }
    }

    /*About section design*/
    .about-card {
        &#main-page {
            .border-template {
                margin-left: clamp(10px, 25vw, 50px);
                border-bottom: 0;
                border-right: 0;
            }
            .image-template {
                width: clamp(300px, 40vw, 600px);
                height: auto;
            }
        }
        &#about-page {
            .border-template {
                width: clamp(300px, 40vw, 800px);
                margin-left: clamp(10px, 25vw, 50px);
                border-right: 0;
                border-left: 0;
            }
            .image-template {
                width: clamp(300px, 40vw, 600px);
                height: auto;
            }
        }
    }
    .goals-card {
        .border-template {
            width: clamp(300px, 40vw, 800px);
            margin-right: clamp(10px, 25vw, 50px);
            border-left: 0;
            border-top: 0;
            border-bottom: 0;
        }
        .image-template {
                width: clamp(300px, 40vw, 600px);
                height: auto;
                &#left-side {
                    margin-left: clamp(20px, 5vw, 100px)
                }
            }
    }

    /*Services card*/
    .services-card {
        &#main-page {
            .border-template {
                margin-right: clamp(10px, 25vw, 50px);
                border-right: 0;
                border-left: 0;
            }
            .image-template {
                width: clamp(300px, 40vw, 600px);
                height: auto;
            }
        }
        &#service-page {
            .services-list-grid {
                flex-direction: column;
                width: clamp(300px, 40vw, 700px);
            }
            .border-template {
                margin-left: 50px;
                &#title-border {
                    text-align: center;
                    border-left: 0;
                    border-right: 0;
                    border-bottom: 0;
                    height: fit-content;
                    .header-style {
                        margin-top: 60px;
                    }
                }
                &#services-border {
                    border-left: 0;
                    border-right: 0;
                    border-top: 0;
                    .regular-style {
                        line-height: clamp(20px, 10vw, 40px);
                        font-size: clamp(8px, 2vw, 18px);
                        font-weight: 600;
                    }
                    .header-style {
                        border-top: solid 4px rgb(63, 69, 133);
                        padding-top: 30px;
                        font-size: clamp(12px, 2vw, 30px);
                        font-weight: 800;
                    }
                }
            }
            .image-template {
                padding-top: 150px;
                border-top: 4px solid rgb(52, 65, 149);
            }
        }
    }
    .contact-card {
        .border-template {
            height: 200px;
            margin-left: 50px;
            border-right: 0;
            border-left: 0;
            display: flex;
            .sub-border {
                margin:10px;
                &:not(:first-child) {
                    border-right: 4px solid rgb(52, 65, 149);
                    padding-right: 20px;
                }
                &:first-child {
                    padding-left: 20px;
                    padding-right: 20px;
                    border-left: 4px solid rgb(52, 65, 149);
                    border-right: 4px solid rgb(52, 65, 149);
                }
                .regular-style {
                    text-decoration: none;
                    color: rgba(0, 0, 0, 0.742)
                }
            }
        }
    }

    /*Bottom section of page*/
    .bottom-card {
        display:flex;
        flex: 1;
        min-height: 300px;
        min-width: 100%;
        bottom: 0;
        background-color: rgb(18, 15, 63);
        .contact-grid {
            border: white solid 4px;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
            padding: 15px;
            margin-top: 25px;
            margin-left: 25px;
            .header-style {
                color: white;
                font-size: clamp(15px, 3vw, 32px);
                font-weight: 800;
            }
            .regular-style {
                color: white;
                text-decoration: none;
                cursor: pointer;
                font-size: clamp(10px, 2vw, 15px);
                font-weight: 500;
            }
        }
        .address-grid {
            height: 70%;
            margin-top: 40px;
            padding-left:clamp(10px, 6vw, 40px);
            margin-left:clamp(15px, 6vw, 75px);
            border: white solid 4px;
            border-top: 0;
            border-right: 0;
            border-bottom: 0;
            .header-style {
                color: white;
                font-size: clamp(15px, 3vw, 32px);
                font-weight: 800;
            }
            .regular-style {
                color: white;
                text-decoration: none;
                cursor: pointer;
                font-size: clamp(10px, 2vw, 15px);
                font-weight: 500;
            }
        }
    }
    @media screen and (max-width:1150px) {
        .contact-card {
            display: flex;
            flex-direction: column;
            margin-top: -25px;
            .border-template {
                margin-left: 25px;
                margin-right: 25px;
                height: clamp(100px, 10vw, 200px);
            }
            .image-template {
                &#right-side {
                    margin-top: 25px;
                    margin-left: 25px;
                    margin-right: 25px
                }
            }
        }
    }
    @media screen and (max-width:900px) {
        .cta-card {
            margin-top: 10px;
            flex-direction: column;
            .text-section {
                justify-content: center;
                max-height: 60%;
                max-width: 100%;
                background: linear-gradient(to bottom, rgb(142, 165, 239) 0%, rgb(167, 185, 224) 70%, transparent 100%);
                .cta-border {
                    margin-left: 0;
                    margin-top: 20px;
                    padding-top: 20px;
                    border-left: 0;
                }
                .header-style {
                    border: 4px white solid;
                    border-right: 0;
                    border-left: 0;
                    border-bottom: 0;
                    padding: 0;
                    margin-right:60px;
                    margin-left:60px;
                    padding-top: 20px;
                }
                .regular-style {
                    padding: 0;
                }
                .button-grid {
                    margin-left: 0;
                    column-gap: clamp(60px, 10vw, 300px);
                    padding: 0;
                    margin-top: clamp(100px, 30vw, 300px);
                }
            }
            .image-section {          
                margin-top: 100px;
                width: 100%;
                height: clamp(200px, 60vw, 600px);
            }
        }
        .about-card {
            &#main-page {
                .border-template {
                    border-left: 0;
                    margin-right: 40px;
                    margin-left: 40px;
                    margin-bottom: 20px;
                }   
                .image-template {
                    margin-right: 40px;
                    margin-left: 40px;
                }
            }
            &#about-page {
                .border-template {
                    width: clamp(200px, 80vw, 800px);
                    padding:10px;
                    margin-right: 40px;
                    margin-left: 40px;
                    margin-bottom: 20px;
                    margin-top: -20px;
                }
                .image-template {
                    width: clamp(200px, 70vw, 400px);
                    margin-right: 40px;
                    margin-left: 40px;
                }
            }
        }
        .goals-card {
            .border-template {
                width: clamp(200px, 80vw, 800px);
                padding:10px;
                margin-right: 40px;
                margin-left: 40px;
                margin-bottom: 20px;
                margin-top: 20px;
                border-left: 4px solid rgb(114, 154, 200);
            }
            .image-template {
                width: clamp(200px, 70vw, 400px);
                margin-top: -80px;
                border-top: 4px solid rgb(114, 154, 200);
                padding-top: 50px;
                margin-right: 40px;
                margin-left: 40px;
            }
        }
        .services-card {
            &#main-page {
                .image-template {
                    margin-right: 40px;
                    margin-left: 40px;
                    margin-top: -30px;
                    padding: 20px;
                    padding-top: 50px;
                    padding-bottom: 0px;
                    border: rgb(114, 154, 200) 4px solid;
                    border-left: 0;
                    border-right: 0;
                    border-bottom: 0;
                }
                .border-template {
                    border-top: 0;
                    margin-right: 40px;
                    margin-left: 40px;
                }
            }
            &#service-page {
                .services-list-grid {
                    width: clamp(300px, 90vw, 800px);
                }
                .border-template {
                    &#title-border {
                        text-align: center;
                        margin-top: clamp(300px, 70vw, 500px);
                        .header-style {
                            margin-top: 10px;
                        }
                    }
                    &#services-border {
                        border-top: 4px solid rgb(114, 154, 200);   
                        .header-style{
                            padding-top: 25px;
                            border-top: 0;
                            &:not(:first-child) {
                                border-top: solid 2px rgb(63, 69, 133);
                            }
                        }
                    }
                }
                .image-template {
                    position: absolute;
                    top: 0;
                    left: 0;
                    margin-left: 50px;
                    margin-right: 50px;
                    width: clamp(300px, 80vw, 800px);
                    height: auto;
                    padding: 0;
                    border-top: 0;
                }
            }
        }
        .contact-card {
            margin-top: -25px;
            .border-template {
                margin-left: 25px;
                margin-right: 25px;
                height: clamp(100px, 10vw, 200px);
            }
            .image-template {
                &#right-side {
                    margin-top: 25px;
                    margin-left: 25px;
                    margin-right: 25px
                }
            }
        }
    }
    @media screen and (max-width:500px) {
        .top-card {
            .logo-grid {
                width: clamp(75px, 45vw, 200px);
            }
            .button-grid {
                margin-right: 150px;
            }
            .language-button-grid {
                margin-right: 150px;
                padding-right:50px;
            }
        }
        .cta-card {
            margin-top: 10px;
            flex-direction: column;
            .text-section {
                justify-content: center;
                max-height: 60%;
                max-width: 100%;
                background: linear-gradient(to bottom, rgb(142, 165, 239) 0%, rgb(167, 185, 224) 70%, transparent 100%);
                .cta-border {
                    margin-left: 0;
                    margin-top: 20px;
                    padding-top: 20px;
                    border-left: 0;
                }
                .header-style {
                    border: 4px white solid;
                    border-right: 0;
                    border-left: 0;
                    border-bottom: 0;
                    padding: 0;
                    margin-right:60px;
                    margin-left:60px;
                    padding-top: 20px;
                }
                .regular-style {
                    padding: 0;
                }
                .button-grid {
                    column-gap: clamp(10px, 10vw, 60px);
                    padding: 0;
                    margin-top: clamp(30px, 20vw, 300px);
                }
            }
            .image-section {          
                margin-top: 100px;
                width: 100%;
                height: clamp(200px, 60vw, 600px);
            }
        }
        .about-card {
            &#main-page {
                .border-template {
                    border-left: 0;
                    margin-right: 40px;
                    margin-left: 40px;
                    margin-bottom: 20px;
                }   
                .image-template {
                    margin-right: 40px;
                    margin-left: 40px;
                }
            }
            &#about-page {
                .border-template {
                    padding:10px;
                    margin-right: 20px;
                    margin-left: 20px;
                    margin-bottom: 20px;
                    margin-top: -20px;
                }
                .image-template {
                    margin-right: 20px;
                    margin-left: 20px;
                }
            }
        }
        .goals-card {
            .border-template {
                padding:10px;
                margin-right: 20px;
                margin-left: 20px;
                margin-bottom: 20px;
                margin-top: 20px;
            }
            .image-template {
                margin-right: 20px;
                margin-left: 20px;
            }
        }
        .services-card {
            &#main-page {
                .image-template {
                    margin-right: 40px;
                    margin-left: 40px;
                    margin-top: -30px;
                    padding: 20px;
                    padding-top: 50px;
                    padding-bottom: 0px;
                    border: rgb(114, 154, 200) 4px solid;
                    border-left: 0;
                    border-right: 0;
                    border-bottom: 0;
                }
                .border-template {
                    border-top: 0;
                    margin-right: 40px;
                    margin-left: 40px;
                }
            }
            &#service-page {
                .services-list-grid {
                    width: clamp(50px, 90vw, 400px);
                }
                .border-template {
                    &#title-border {
                        text-align: center;
                        margin-top: clamp(120px, 70vw, 400px);
                        .header-style {
                            margin-top: 10px;
                        }
                    }
                    &#services-border {
                        border-top: 4px solid rgb(114, 154, 200);   
                        .header-style{
                            padding-top: 25px;
                            border-top: 0;
                            &:not(:first-child) {
                                border-top: solid 2px rgb(63, 69, 133);
                            }
                        }
                    }
                }
                .image-template {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: clamp(50px, 80vw, 400px);
                    height: auto;
                    padding: 0;
                    border-top: 0;
                    margin-right: 0;
                }
            }
        }
        .contact-card {
            margin-top: -25px;
            .border-template {
                display: flex;
                flex-direction: column;
                margin-left: 25px;
                margin-right: 25px;
                height: 250px;
                .sub-border {
                    &:not(:first-child) {
                        padding-left: 20px;
                        border-left: 4px solid rgb(52, 65, 149);
                    }
                }
            }
            .image-template {
                &#right-side {
                    margin-top: 25px;
                    margin-left: 25px;
                    margin-right: 25px
                }
            }
        }
        .bottom-card {
            display: flex;
            flex-direction: column;
            .contact-grid {
                border: 0;
                .header-style {
                    width: fit-content;
                    padding: 25px;
                    border-top: 4px solid white
                }
            }
            .address-grid {
                margin-bottom: 20px;
            }
        }
    }
}