$yellow: #ccdb39;
$red: #cc0706;
$blue: #5295ab;
$green: #90bb80;
$gray: #595959;
$mainGray: #34373B;
$darkGray: #43464d;
$lightGray: #dddddd;
$veryDarkGray: #3a3e42;
$white: #FFFFFF;
$black: #000000;

body,
html {
    background-color: $white;
    font-family: Open Sans, sans-serif;
    margin: 0;
    padding: 0
}

.header {
    .main-nav {
        background: rgb(82, 149, 171);
        background: linear-gradient(90deg, $blue 9%, $green 46%, $yellow 97%);

        .navbar-brand {
            margin: 0;
            text-align: end;
            padding: 0.6em 1em;
            background: white;
            border-radius: .8em;
            position: absolute;
            top: 1em;

            img {
                width: 60px;
            }
        }

        .language {
            >a {
                color: $white;
                font-weight: bold;
                text-decoration: none;
                margin-inline-end: 2em;
            }
        }

        .login-button {
            background: $blue;
            border-radius: 1em;
            padding: 0.5em 1.25em;

            a {
                color: $white;
                font-weight: bold;
                text-decoration: none;
            }
        }

        #linksNav {
            justify-content: center;

            .nav-item {
                padding-inline: 1.75em;

                .nav-link {
                    color: $white;
                    font-weight: bold;

                    &:hover {
                        color: $mainGray;
                    }
                }

                .nav-link.active {
                    color: $mainGray;
                }
            }
        }
    }
}

.footer>div {
    color: $mainGray;
    background: rgb(82, 149, 171);
    background: linear-gradient(90deg, $blue 6%, $white 65%);
    background-position: 50%;
    background-size: 100%;
    padding-block: 1em;
    text-align: center;

    .iso {
        margin-top: .5rem;

        img {
            width: 50px;
        }
    }

    .maroof {
        margin-block: .75em;

        img {
            width: 100px
        }
    }

    .line1 {
        font-weight: 700
    }

    .line2 {
        a {
            color: $mainGray;
            text-decoration: none;
            font-size: 0.9em;
        }
    }

    .line3 {
        a {
            color: $mainGray;
            text-decoration: none;
            font-size: 0.9em;
        }
    }
}

.main-title {
    background: rgb(82, 149, 171);
    background: linear-gradient(90deg, $blue 9%, $green 46%, $yellow 97%);
    background-position: 50%;
    margin-bottom: 3em;
    text-align: center;
    color: $white;
    background-size: 100%;

    h2 {
        font-weight: bolder;
        padding-block: .6em
    }
}

@media (max-width:991.98px) {
    .header {
        position: sticky;
        top: 0;
        z-index: 100;

        .top-header {
            background-color: $blue;
            padding-block: 1em;
            text-align: center;

            .login {
                color: $white;
                text-decoration: none;

                .las {
                    font-size: 1.5em;
                    vertical-align: bottom
                }
            }
        }

        .main-nav {
            #linksNav {
                .nav-item {
                    padding: 0
                }
            }
        }
    }

    .main-title {
        margin-bottom: 2em
    }
}

[dir=rtl] {
    body {
        font-family: 'Cairo', sans-serif;
    }

    .form-control {
        text-align: right;
    }
}