/* Basic setups */
:root {
    --lightblue-1: rgba(55, 126, 169, 1);
    --lightblue-2: rgb(76, 170, 230);
}

@font-face {
    font-family: "El-Messiri";
    src: url(../fonts/El_Messiri/ElMessiri-VariableFont_wght.ttf);
}

@font-face {
    font-family: "Oxygen-Regular";
    src: url(../fonts/Oxygen/Oxygen-Regular.ttf);
    size-adjust: 113%;
}

@font-face {
    font-family: "Oxygen-Light";
    src: url(../fonts/Oxygen/Oxygen-Light.ttf);
}

@font-face {
    font-family: "Oxygen-Bold";
    src: url(../fonts/Oxygen/Oxygen-Bold.ttf);
}

.font-el-messiri{
    font-family: "El-Messiri";
}

.font-oxygen{
    font-family: "Oxygen-Regular";
}

.bg-lightblue-1 {
    background-color: var(--lightblue-1);
}

.bg-lightblue-2 {
    background-color: var(--lightblue-2);
}

.text-lightblue-1{
    color: var(--lightblue-1);
}

.text-lightblue-2{
    color: var(--lightblue-2);
}

body{
    background-image: url("../images/ffflux.svg");
    background-size: cover;
    font-family: "Oxygen-Regular";
}

/* Navbar */
.bg-navbar{
    background-image: conic-gradient(from -0.25turn at 10% -25%,#377da9, #3c96c8,#3c96c8 );
    -webkit-box-shadow: 0px 1px 2px 3px #377DA9; 
    box-shadow: 0px 1px 2px 3px #377DA9;
}

.navbar-toggler{
    border: none;
}

.navbar-toggler:focus{
    box-shadow: none;
}

.nav-logo-container {
    margin-top: 2px;
    position: absolute;
    padding: 0.7rem;
    width: fit-content;
    aspect-ratio: 2.7 / 1;
    text-align: center;
    border-radius: 100%;
    outline: 2px var(--lightblue-2) solid;
    outline-offset: -1px;
    background-color: white;
}

.nav-logo-container:hover img {
    rotate: 35deg;
    transition: 200ms;
}

.nav-logo-container img {
    height: 2.5rem;
    transition: 200ms;
}

nav a.nav-link{
    position: relative;
    width: 100%;
    text-align: center;
}

nav a.nav-link::after{
    content: "";
    z-index: 10;
    background-color: white;
    height: 2px;
    position: absolute;
    width: 0;
    transition: width 500ms, left 500ms;
    bottom: 0.6rem;
    left: 50%;
    border-radius: 100vw;
}

/* from md up */
@media (min-width: 768px) {
    nav a.nav-link:hover::after{
        width: 100%;
        left: 0;
    }
}

/* CAROUSEL */

.carousel-control-prev-icon, .carousel-control-next-icon{
    opacity: 1;
    aspect-ratio: 1/1;
    background-color: #00aae3;
    border-radius: 100vw;
    background-image: none;
    border: 1px solid gray;
}

.carousel-control-prev-icon *,.carousel-control-next-icon * {
    margin-top: 0.2rem;
}


.carousel-control-next{
    position: absolute;
    top: 120%;
    max-height: 30%;
    right: 33%;
}

.carousel-control-prev{
    position: absolute;
    top: 120%;
    max-height: 30%;
    left: 33%;
}

#FAQ p{
    background-color: rgba(0, 170, 227, 0.25);
    transform: translateY(-1rem), scale(2);
    width: fit-content;
    padding: 0.5rem 1rem;
    border-radius: 100vw;
    border: 1px solid var(--lightblue-2);
}

/* Accordion  */
.accordion-button:focus{
    outline: none;
    box-shadow: none;
}

/* from md up */
@media (min-width: 768px) {
    .fullsize {
        min-width: 97vw;
        min-height: 40vh !important;
    }

    div.key-card>div{
        overflow-y: hidden;
    }
    div.key-card img{
        max-height: 38.7vh;
    }

    .bigger-card {
        height: 40vh;
    }

    .bigger-card span{
        font-size: 2.5rem;
    }

    .carousel-control-next{
        position: absolute;
        top: 35%;
        max-height: 30%;
        right: -12%;
    }

    .carousel-control-prev{
    position: absolute;
    top: 35%;
    max-height: 30%;
    left: -12%;
}
}