@charset "UTF-8";
/* CSS Document */

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
body {
 font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-size: smaller;
}
a {
 text-decoration: none;
}
li {
 list-style: none;
}


/* NAVBAR STYLING STARTS */
.navbar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 2px 0 0 5px;
 background-color: hsla(228,15%,6%,0.96);
 color: #fff; font-weight: lighter;
}
.nav-links a {
 color: #fff;
}
/* LOGO */
.logo {
 font-size: smaller;
}
/* NAVBAR MENU */
.menu {
 display: flex;
 gap: 1em;
 font-size: 18px;
}
.menu li:hover {
 background-color:  hsla(240,10%,6%,0.93);
 border-radius: 5px;
 transition: 0.3s ease;
}
.menu li {
 padding: 5px 14px;
}
/* DROPDOWN MENU */
.services {
 position: relative; 
}
.dropdown {
 background-color:  hsla(240,10%,6%,0.93);
 padding: 0 0 ;
 position: absolute; /*WITH RESPECT TO PARENT*/
 display: none;
 border-radius: 8px;
 top: 35px;
}
.dropdown li + li {
 margin-top: 10px;
}
.dropdown li {
 padding: 0.5em 1em;
 width: 8em;
 text-align: center;
}
.dropdown li:hover {
 background-color: hsla(240,10%,6%,0.93);
}
.services:hover .dropdown {
 display: block;
}


/*RESPONSIVE NAVBAR MENU STARTS*/
/* CHECKBOX HACK */
input[type=checkbox]{
 display: none;
} 
/*HAMBURGER MENU*/
.hamburger {
 display: none;
 font-size: 24px;
 user-select: none;
}
/* APPLYING MEDIA QUERIES */
@media (max-width: 768px) {
.menu { 
 display:none;
 position: absolute;
 background-color:hsla(228,15%,6%,0.96);
 right: 0;
 left: 0;
 text-align: center;
 padding: 16px 0;
}
.menu li:hover {
 display: inline-block;
 background-color: hsla(240,10%,6%,0.93);
 transition: 0.3s ease;
}
.menu li + li {
 margin-top: 12px;
}
input[type=checkbox]:checked ~ .menu{
 display: block;
}
.hamburger {
 display: block;
}
.dropdown {
 left: 50%;
 top: 30px;
 transform: translateX(35%);
}
.dropdown li:hover {
 background-color:  hsla(240,10%,6%,0.93);
}
}