@font-face{
    font-family: inter;
    src: url("./fonts/Inter.ttf");
}
@keyframes fade-in{from{opacity: 0;}to{opacity: 1;}}

.navbar{font-family: inter;display: flex;justify-content: space-between;align-items: center;width: 100vw;height: 70px;background-color: rgb(121, 46, 243); opacity: 1;position: fixed;z-index: 9999;box-shadow: 0vw 0.5vw 0.5vw rgba(20,5,50,0.5);transition: opacity 0.5s ease;}
.navbar:hover{opacity: 1;transition: opacity 0.5s ease;}
.website-name{margin-top: 0;margin-bottom: 0;margin-left: 15px; width: clamp(125px,20vw,200px);transition: transform 0.1s linear;font-weight: 600; color: white;}
.website-name:hover{cursor: pointer;transform: translateY(-2.5px);}
.links ul{margin-top: 0;margin-bottom: 0;margin-right: 15px;display: flex;align-items: center;}
.links li{list-style: none;display: inline-block;margin-right: 30px;margin-left: 30px;font-weight: bold;font-size: clamp(10px, 1.5vw, 17.5px);transition: transform 0.1s linear;font-weight:500;}
.links a:hover, .links li:hover{cursor: pointer;transform: translateY(-1px);}
.links a{text-decoration: none;color: rgba(255, 255, 255, 1);display: flex;align-items: center; text-align: center;}
.units-dropdown-menu{position: fixed;z-index: 999;top: 0;display: flex;transform: translateY(-100%);width: 100vw; background-color: rgba(156, 113, 248, 0.9);transition: top 1s ease;}
.units-dropdown-menu.show{top: 0;transform: translateY(0);}
.blogs-dropdown-menu{position: fixed;z-index: 999;transform: translateY(-100%);display: flex;top: 0vw;left: 0vw;width: 100vw;background-color: rgba(156, 113, 248, 0.9);transition: top 1s ease;}
.blogs-dropdown-menu.show{top: 0;transform: translateY(0);}
.blogs-dropdown-arrow{font-size: 20px;align-self: center;margin-left: 5px;margin-bottom: 5px;transition: transform 0.5s ease;}
.blogs-dropdown-arrow.rotated{margin-top: 5px;margin-bottom: 0;transform: rotate(180deg);}
.units-dropdown-arrow{font-size: 20px;align-self: center;margin-left: 5px;margin-bottom: 5px;transition: transform 0.5s ease;}
.units-dropdown-arrow.rotated{margin-top: 5px;margin-bottom: 0;transform: rotate(180deg);}
.units-content{width: 100%; display: flex; justify-content: space-evenly; align-items: center;margin-top: 75px;}
.blogs-content{width: 100%; display: flex; justify-content: space-evenly; align-items: flex-start; margin-top: 75px;}

.units-box-1{width: 20%;margin-top: 20px;margin-bottom: 20px; margin-left: 20px; border: 1px solid black; padding: 20px; display: flex;flex-direction: column;justify-content: center;}
.units-box-1 p{margin-left: 5%; margin-right: 5%; margin-top: 2.5%;}
.units-box-1 h1{text-decoration: underline; text-underline-offset: 5px;margin-left: 5%; margin-right: 5%;}
.units-box-2{width: 75%;margin-top: 20px;margin-bottom: 20px;display: flex;justify-content: left;align-items: center;flex-wrap: wrap;}
.units-option{display: flex;align-items: flex-start;width: 22.5%; min-width: 240px; transition: background-color 0.5s ease;border-bottom: 0.1vw solid black; text-align: left; background: none; border-left: none; border-right: none; border-top: none; color: black !important; margin-left: 15px;}
.units-option:hover{ background-color: rgba(249, 249, 249, 0.75);cursor: pointer;}
.units-option img{width: 40px; height: 40px; margin: 10px;}
.units-option h3{margin-top: 10px; text-decoration: underline;}
.units-option p{font-size: 12.5px;}

.blog-box{
    width: 27.5%;
    border-radius: 10px;
    background-color: rgba(255,255,255,0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 25px;
    border: none;
}
.blog-thumbnail{
    width: 90%;
    height: auto;
    margin: 10px;
    border-radius: 5px;
}
.blog-box h2{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: clamp(20px,2.5vw,30px) !important;
    font-weight: 400;
    color: black;
}
.blog-box p{
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: clamp(10px,1.5vw,20px) !important;
    font-weight: 300;
    color: black;
}


.hamburger-menu{display: none;}
.mobile-overlay{display: none;}
.navbar button{background: none; border: 3px solid rgb(255, 255, 255); font-size: clamp(15px, 2vw, 20px); font-family: inter; font-weight: 500; margin-right: 30px; display: flex; padding: 0; transition: background-color 0.5s ease; color: white;}
.navbar button:hover{background-color: rgb(255, 255, 255); color: rgb(131, 27, 227); cursor: pointer;}
.navbar button span{padding: clamp(2px,0.5vw,10px);}



@media(max-width: 770px){
    .navbar{font-family: inter;display: flex; justify-content: space-between;align-items: center;width: 100vw;height: 45px; opacity: 1;position: fixed;z-index: 9999;box-shadow: 0vw 0.5vw 0.5vw rgba(20, 5, 50, 0.5);transition: opacity 0.5s ease;}
    .navbar:hover{opacity: 1;transition: opacity 0.5s ease;}
    .website-name{margin-top: 0;margin-bottom: 0;margin-left: 20px;font-size: clamp(13px, 2.5vw, 30px);transition: transform 0.1s linear;   }
    .website-name:hover{cursor: pointer;transform: translateY(-2.5px);}
    .links li{list-style: none;display: none;margin-right: 1vw;margin-left: 1vw;font-weight: bold;font-size: 2.5vw;transition: transform 0.1s linear;font-weight:500;}
    .links a{text-decoration: none;color: rgba(0, 0, 0, 0.8);display: flex;align-items: center;}
    .hamburger-menu{display: block; width: 40px; height: 40px; margin-right: 10px;}
    .units-dropdown-menu{display: none;}
    .blogs-dropdown-menu{display: none;}
    .mobile-overlay{display: none;}
    .mobile-overlay.show{display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8);z-index: 1000; justify-content: center; align-items: center; animation: fade-in 0.25s ease;}
    .mobile-menu{width: 100%; font-weight: 600; color: white;list-style-type: none;display: flex; flex-direction: column; text-align: center;padding: 0;}
    .mobile-menu li{padding: 25px;border-top: 0.5px solid white; border-bottom: 0.5px solid white; font-size: 20px; font-family: inter; font-weight: 500;letter-spacing:1px;text-align: center;}
    .mobile-menu a{text-decoration: none; color: white;}
    .navbar button{display: none;}
}