@charset "utf-8";

*{

    margin: 0!important;
    padding: 0!important;
    box-sizing: border-box!important;
}
body{

    background: rgb(51, 189, 243)!important;
    font-family: 'Rajdhani', sans-serif!important;

}
.nav{

    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    min-height: 40vh!important;
    background: rgb(51, 189, 243)!important;
}

.menu {

    position: relative!important;
    width: 280px!important;
    height: 280px!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
}

.menu li {

    position: absolute!important;
    left:0!important;
    list-style: none!important;
    transition: 0.5s!important;
    transition-delay: calc(0.1s*var(--i))!important;
    transform-origin: 140px!important;
    transform: rotate(0deg) translateX(110px)!important;
    

}
.menu.active li {

    transform: rotate(calc(360deg / 7 * var(--i))) 
    translateX(0px)!important;

}

.menu li a {

    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    width: 60px!important;
    height: 60px!important;
    color: var(--clr)!important;
    border: 2px solid var(--clr)!important;
    border-radius: 50%!important;
    font-size: 1.5em!important;
    transform: rotate(calc(360deg / -7 * var(--i)))!important;
    transition: 1s!important;
    

}

.menu li a:hover {
    transition: 0s!important;
    background: var(--clr)!important;
    color: white!important;
    box-shadow: 0 0 10px var(--clr), 0 0 30px var(--clr), 0 0 50px var(--clr)!important;
}

.menu .toggle{

    position: absolute!important;
    width: 80px!important;
    height: 80px!important;
    background: rgb(51, 189, 243)!important;
    border: 2px solid rgb(255, 255, 255)!important;
    border-radius: 50%!important;
    color: rgb(255, 255, 255)!important;
    display: flex!important;
    justify-content: center!important;
    align-items: center!important;
    cursor: pointer!important;
    z-index: 10000!important;
    font-size: 2em!important;
    transition: transform 1.25s!important;
}

.menu.active .toggle{

    transform: rotate(315deg)!important;
}


.custom-tooltip {
    --bs-tooltip-bg: var(--bs-)!important;
  }

.presentation{

    color: white;
    text-shadow: 1px 1px 1px;
    transition:ease 0.7s;

}

.presentation:hover{
    transition: ease 0.7s;
    color: rgba(24, 17, 17, 0.9);
    text-shadow: 2px 2px 2px;

}

@media(max-width:576px){
    .presentation{
        font-size: 35px!important;
    } 
    .flechCoul{
        font-size: 35px!important;
    }
 
    


}

.affiche{

    visibility: hidden!important;
    transition: ease 0.7s!important;
    transform: translateY(-13px);

}

.alertnavigation{

    visibility: visible!important;
    transition: ease 0.7s!important;
    transform: translateY(0px);


}
.alertnavigation:hover{

    color: white;
    transition: ease 0.7s!important;

}

.flechCoul{
    visibility: visible!important;
    color: rgb(250, 250, 250)!important;
    transition: ease 0.5s!important;
    font-size: 30px!important;


}

.flechCoul:hover{

    transition: ease 0.5s!important;
    color: rgb(10, 10, 12)!important;
    text-shadow: rgb(61, 60, 57) 1px 0 5px;
    font-size: 30px!important;

}

.logo-img{
    width: 85px!important;
    height: 85px!important;
    margin-left: 20px!important;
    margin-top: 20px!important;

    display:block!important;
    border: solid 2px white!important;
    border-radius: 50%!important;
    font-size: 35px!important; 
    display: flex!important;
    padding: 0%!important;
    font-weight: bold;
    cursor: pointer!important;
    transition: 0.4s ease!important;

}
.logo-img:hover{
    transition: 0.2s ease-out!important;

    border: solid 5px white!important;


}

@media (max-width:576px){
    .logo-img {

        width: 80px!important;
        height: 80px!important;
        padding: 0%!important;
        }   

}

.i-letter{
    display: block!important;
    color: white;

}
.h-letter{
    display: block!important;
    color: rgb(59, 58, 58);

}