body {
    margin: 0;
    background-color: rgb(237, 246, 252);
}
/*BUTTONS*/
.top-card-button {
    font-size: clamp(7px, 1.2vw, 18px);
    font-weight: 500;
    z-index: 20;
    font-family: "Inter", 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 {
    border-radius: 5px;
    font-size: clamp(2px, 1.5vw, 18px);
    font-family: "Inter", 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: "Inter", 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;
    flex-direction: column;
    display: flex;
    row-gap: 20px;
    margin-top: 40px;
    margin-bottom: 40px;
    width: 90%;
    height: fit-content;
    .border-template {
        margin: 20px;
        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, 3.5vw, 24px);
        font-weight: 600;
    }
    .header-style {
        font-size: clamp(15px, 6vw, 32px);
        font-weight: 800;
    }
}
.mainpage-service-card-template {
    text-decoration: none;
    color: black;
    text-align: center;
    transition: ease-in-out 0.1s;
    border-top: 4px solid rgb(75, 91, 138);
    background-color: rgba(65, 95, 171, 0.231);
    box-shadow: 4px 5px 6px 3px rgba(17, 7, 103, 0.16);
    display:flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 20px;
    &:hover {
        transform: scale(1.1);
        cursor: pointer;
    }
    &:active {
        transform: scale(0.98);
        background-color: rgba(62, 96, 110, 0.231);
    }
}
.image-template {
    align-self: center;
    height: auto;
    width: 90%;
    margin: 20px;
}

@media screen and (min-width:500px) {
    .image-template {
        width: 80%;
        height: calc(100vw * 0.5);
    }
}

@media screen and (min-width:900px) {
    .image-template {
        width: clamp(400px, 50vw, 1000px);
        height: clamp(150px, 25vw, 500px);
    }
    .card-template {
        .regular-style {
            line-height: clamp(10px, 3vw, 80px);
            font-size: clamp(10px, 1.5vw, 40px);
        }
        .header-style {
            font-size: clamp(20px, 2vw, 60px)
        }
    }
}




.main-environment {
    font-family: "Inter", 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: rgba(109, 180, 221, 0.754);
            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: 10px;
                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);
                    font-weight: 550;
                    text-shadow: 1px 1px 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 {
            opacity: 0%;
            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);
                opacity: 100%;
            }
        }
        &.hide-drop-down-menu {
            .drop-down-menu {
                transform: translateY(-100%);
                opacity: 0%;
            }
        }
    }

    /*CTA FURTHER HOMEPAGE DESINGS ARE DESIGNED WITH A MOBILE-FIRST APPROACH, cus thats smarter apparently)*/
    .cta-card {
        position: relative;
        height: fit-content;
        width: 100%;
        .text-area {
            display: flex;
            top: 0;
            width: 100%;
            position: absolute;
            justify-content: end;
            align-items: center;
            height: 100%;
            background: linear-gradient(to right, rgb(33, 98, 173) 0%, transparent 50%, rgb(9, 193, 196) 100%);
            .header-style {
                background-color: rgba(0, 0, 0, 0.432);
                text-align: end;
                width: 90%;
                font-size: clamp(5px, 6vw, 30px);
                font-weight: 400;
                color: rgb(255, 255, 255);
                margin-right: 5vw;
                padding-top: 10px;
                border-top: 2px solid white;
            }
        }
        .image-area {
            overflow-x: hidden;
            display:flex;
            height: 150px;
            .image-template {
                margin: 0;
                display: block;
                width: 50%;
                height: 100%;
            }
        }
    }
    .mainpage-service-card {
        align-self: center;
        width: 80%;
        justify-content: center;
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        margin-bottom: 10px;
        z-index: 2;
        height: fit-content;
        padding: 20px;
        row-gap: 20px;
        .image-section {
            width: 80%;
            height: 50vw;
        }
        .header-style {
            font-size: 7vw;
            font-weight: 600;
            margin: 0;
            padding: 10px;
        }
        .regular-style {
            width: 60%;
            text-align: center;
            font-size: 4vw;
            font-weight: 550;
            padding-top: 10px;
            margin-bottom: 0;
            border-top: 2px solid rgb(5, 58, 142);
            &:last-child {
                padding-bottom: 10px;
                border-bottom: 2px solid rgb(5, 58, 142);
            }
        }
    }

    /*About section design*/
    .about-card {
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        .border-template {
            border-right: 0;
            border-left: 0;
            border-bottom: 0;
        }
    }

    /*Services card*/
    .services-card {
        align-items: center;
        width: 100%;
        .services-list-grid {
            width: 90%;
            display: flex;
            flex-direction: column;
            .border-template {
                margin: 0;
                border-right: 0;    
                border-left: 0;    
                &#title-border {
                    border-bottom: 0;
                }
                &#services-border {
                    border-top: 0;
                    .header-style {
                        border-top: 2px solid rgb(70, 62, 174);
                        padding-top: 20px;
                    }
                    .regular-style {
                        font-size: clamp(10px, 4.5vw, 24px);
                    }
                }
            }
        }
        .image-template {
            display: none;
        }
        .contact-button {
            background-color: rgba(162, 193, 229, 0.615);
            background-color: transparent;
            padding: clamp(4px, 2vw, 10px);
            border: solid 4px rgb(94, 113, 171);
            border-radius: 10px;                
            text-decoration: none;
            .header-style {
                color: black;
                margin: 0;
                font-size: clamp(4px, 5vw, 20px);
                font-weight: 600;
            }
            &:hover {
                cursor: pointer;
                transform: scale(1.05);
                background-color: rgba(162, 193, 229, 0.323);
            }
            &:active {
                transform: scale(0.95);
                background-color: rgba(162, 193, 229, 0.749);
            }
        }
    }

    .contact-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        .border-template {
            border-right: 0;
            border-left: 0;
            width: fit-content;
            .sub-border {
                margin-top: clamp(10px, 3vw, 50px);
                margin-bottom: clamp(10px, 3vw, 50px);
                padding-top: clamp(3px, 1vw, 50px);
                padding-right: clamp(20px, 10vw, 50px);
                padding-left: clamp(20px, 2.5vw, 50px);
                border-left: clamp(3px, 0.25vw, 10px) solid rgb(36, 31, 105);
                border-right: clamp(3px, 0.25vw, 10px) solid rgb(36, 31, 105);
                .regular-style {
                    text-decoration: none;
                    color: rgba(0, 0, 0, 0.586);
                }
            }
        }
        .image-template {
            box-shadow: 7px 7px 6px 1px rgba(0, 0, 0, 0.112);
            min-height: 200px;
        }
    }

    /*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;
            }
        }
        .copyright-grid {
            position: absolute;
            margin-top: 10px;
            bottom: 0;
            width: 100%;
            text-align: center;
            .regular-style {
                color: white;
                text-decoration: none;
                font-size: clamp(10px, 2vw, 15px);
                font-weight: 500;
            }
        }
    }

    @media screen and (min-width:500px) {
        .cta-card {
            .image-area {
                height: 300px;
            }
        }
        .mainpage-service-card {
            display:flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-bottom: 10%;
            row-gap: 10%;
            column-gap: 10%;
            & > * {
                width: 45%;
                .header-style {
                    font-size: clamp(10px, 3vw, 30px);
                }
                .regular-style {
                    font-size: clamp(7px, 2vw, 25px);
                }
                .image-section {
                    height: 25vw;
                }
            }
        }
        .about-card {
            align-self: center;
            width: 90%;
        }
        .contact-card {
            display: flex;
            flex-direction: row;
            .border-template {
                .sub-border {
                    .header-style {
                        font-size: clamp(10px, 4vw, 40px)
                    }
                    .regular-style {
                        font-size: clamp(8px, 3vw, 30px);
                    }
                }
            }
        }
    }

    @media screen and (min-width:900px) {
        .cta-card {
            .text-area {
                justify-content: center;
                text-align: center;
                align-items: start;
                .header-style {
                    margin-top: 50px;
                    padding-left: 20px;
                    padding-right: 20px;
                    width: fit-content;
                }
            }
        }
        .mainpage-service-card {
            margin-bottom: 10%;
            flex-wrap: wrap;
            row-gap: 10%;
            column-gap: 5%;
            & > * {
                width: 21.25%;
                .header-style {
                    font-size: clamp(10px, 1.5vw, 30px);
                }
                .regular-style {
                    font-size: clamp(7px, 1vw, 25px);
                }
                .image-section {
                    height: 10vw;
                }
            }
        }
        .about-card {
            display: flex;
            flex-direction: row;
            .border-template {
                width: clamp(400px, 50vw, 1500px);        
            }
        }
        .services-card {
            align-items: stretch;
            display: flex;
            flex-direction: row;
            justify-content: center;
            column-gap: 8%;
            .services-list-grid {
                margin-left: clamp(10px, 1vw, 50px);
                width: fit-content;
                .border-template {
                    &#title-border {
                        .header-style {
                            font-size: clamp(14px, 1.8vw, 40px);
                        }
                    }
                    &#services-border {
                        .regular-style {
                            font-size: clamp(10px, 1.5vw, 30px);
                        }
                        .header-style {
                            padding-top: 50px;
                            border-top:rgb(33, 98, 173) clamp(3px, 0.25vw, 6px) solid;
                            font-size: clamp(14px, 1.8vw, 40px);
                        }
                    }
                }  
            }
            .side-grid {
                display: flex;
                flex-direction: column;
                .image-template {
                    margin-top: clamp(50px, 15vw, 500px);
                    padding-top: clamp(100px, 10vw, 500px);
                    border-top:rgb(33, 98, 173) clamp(3px, 0.25vw, 6px) solid;
                    height: auto;   
                    display: block;
                }
                .contact-button {
                    padding: 25px;
                    align-self: center;
                    width: fit-content;
                    height: auto;
                    margin-top: clamp(30px, 2.5vw, 300px);
                    .header-style {
                        font-size: clamp(14px, 1.8vw, 40px);
                    }
                }
            }
        }
        .contact-card {
            .border-template {
                width: 60%;
                display: flex;
                .sub-border {
                    margin-top: clamp(10px, 1vw, 50px);
                    margin-bottom: clamp(10px, 1vw, 50px);
                    padding-top: clamp(3px, 1vw, 50px);
                    .header-style {
                        font-size: clamp(10px, 1.5vw, 50px)
                    }
                    .regular-style {
                        font-size: clamp(8px, 1.25vw, 40px);
                    }
                    &:not(:first-child) {
                        border-left: 0;
                    }
                }   
            }
        }
    }
    @media screen and (max-width:500px) {
        .top-card-wrapper {
            .top-card {
                .language-button-grid {
                    margin-right: clamp(30px, 12vw, 50px);
                    column-gap: clamp(5px, 5vw, 10px);
                }
            }
        }
    }
}