@font-face {
        font-family: Dosis;
        src: url(./fontit/Dosis-Bold.ttf);
    }
    @font-face {
        font-family: Open-Sans;
        src: url(./fontit/OpenSans_Condensed-Regular.ttf);
    }
    h1 {
        font-family: Dosis;
    }
    h2 {
        font-family: Dosis;
    }
    a, p {
        font-family: Open-Sans;
    }

    .loader {
      width: 90px;
      height: 90px;
      position: relative; /* For absolute positioning of pseudo-element and logo */
    }
    .loader::before {
      content: "";
      box-sizing: border-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border-top: 3px solid #71C949;
      border-right: 3px solid transparent;
      animation: spinner8217 0.8s linear infinite;
    }
    @keyframes spinner8217 {
      to {
        transform: rotate(360deg);
      }
    }
    /* Initial state for loading screen */
    #loading-screen {
      opacity: 1;
      transition: opacity 0.5s ease-out;
    }

.close-menu,
.open-menu {
    position: absolute;
    cursor: pointer;
    display: none;
}

.open-menu {
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
}

.close-menu {
    top: 30%;
    right: 1px;  
}

#check {
    display: none;
}

.hamburger-icon {
    display: block;
    width: 30px;
    position: relative;
    z-index: 200;
}

.close-icon {
    display: block;
    width: 30px;
    position: relative;
    z-index: 200;
}

.hamburger-icon::before,
.close-icon::before {
    top: -8px;
}

.hamburger-icon::after,
.close-icon::after {
    bottom: -8px;
}


#check:checked ~ .open-menu .hamburger-icon,
#check:not(:checked) ~ .close-menu .close-icon {
    display: none;
}

#check:checked ~ .open-menu .close-icon,
#check:not(:checked) ~ .close-menu .hamburger-icon {
    display: block;
}

#check:checked ~ .menu {
    right: 0;
}

.hidden2 {
    display: none;
}

@media (max-width: 802px) {
    .menu {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 100vh;
        position: fixed;
        top: 0;
        right: -100%;
        z-index: 100;
        background-color: #4971C9;
        color: #fff;
        transition: all 0.5s ease-in-out;
        font-size: 24px;
    }
    
    .hidden2 {
        display: block !important;
    }
    
    .menu li:not(:first-child) {
        margin-top: 40px;
    }

    .close-menu,
    .open-menu {
        display: block;
    }

    .menu li {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .menu a {
        margin-right: 0;
        margin-left: 0;
    }

    #check:checked ~ .menu {
        right: 0;
    }
}