@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');
*{padding: 0;border: 0;box-sizing: border-box;font-family: "Cairo", sans-serif;}
body{
    min-height: 100vh;
    background:
        linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
       url(imgs/background.jpg) ;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
li{list-style: none;
}
 a{text-decoration: none;
color: white;
font-size: 1rem;
} 
a:hover{ color: #F4C542;}  
header{position: relative;
padding: 0 2rem;
}
.navbar{width: 100%;
height: 60px;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0, 0, 0, 0.8);border-radius: 10px; }
.navbar .logo a{font-size: 4rem;
}
.navbar .links{display: flex;
 gap:2rem;}
 .navbar .toggle-btn{color: white;
font-size: 3rem;
cursor: pointer;
display: none;
}
.navbar .links a{margin: 0 30px;}
.start{background-color:#F4C542 ;
color: white;
border: none;
outline: none;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
padding: 3px 5px;}
.start:hover{scale: 1.05;
color: white;}
.start:active{scale: .95;}
/*dropdown menu*/
.drop-menu{
   display: none;
   position: absolute;
   right: 2rem;
   top: 60px;
   height: 0;
   width: 300px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter:blur(15px);
   border-radius: 10px;
   overflow:hidden ;
   transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.drop-menu li {
   padding: 0.7rem;
   display: flex;
   align-items: center;
   justify-content: center;
}
.drop-menu.open{
   height: 240px;
}
.drop-menu .start{
   width: 100%;
display: flex;
justify-content: center;
}

/* hero */

#hero{
   height: calc(100vh - 60px);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
    color: white;
    margin-bottom: 1rem;
    margin-top: -40px;
}
#hero h1{font-size: 3rem;
font-weight: bold;}

#hero p {font-size: 1.5rem;font-weight: 500;margin-top: 50px;}

#hero p span{color: #F4C542;}

#hero h1 span{color: #F4C542;}

/*responsive design*/
@media (max-width: 992px) {
    .navbar .links,
    .navbar .start{
        display: none;
    }
    .navbar .toggle-btn{
        display: block;
    }
    .drop-menu{display: block;}
}
@media (max-width: 576px){
   .drop-menu{
      left: 2rem;
      width: unset;
   }
}