/* ===========================
   Reset
=========================== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
}

/* ===========================
   Navbar
=========================== */

.navbar{
    background:#1a1a2e;
    position:sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
    padding:0 20px;
}

.nav-container{
    max-width:1200px;
    height:70px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* Logo */

.nav-logo{
    color:#fff;
    text-decoration:none;
    font-size:30px;
    font-weight:700;
}

.nav-logo span{
    color:#7ffa7b;
}

/* Menu */

.nav-menu{
    display:flex;
    list-style:none;
    align-items: center;
    gap:30px;
    
}

.nav-menu li{
    list-style:none;
}

.nav-menu a{
    color:#b8b8d1;
    text-decoration:none;
    font-size:16px;
    transition:.3s;
}

.nav-menu a:hover{
    color:#fff;
}

.nav-menu a.active{
    color:#fff;
}

/* CTA */

.nav-cta{
    background:#7ffa7b;
    color:#fff !important;
    padding:12px 24px;
    border-radius:6px;
    font-weight:600;
    
}

.nav-cta:hover{
    background:#fff;
    color:#1a1a2e !important;
}

/* Dropdown */

.dropdown{
    position:relative;
}

.dropdown-toggle{
    background:none;
    border:none;
    color:ffff;
    cursor:pointer;
    font-size:16px;
}

/* Hamburger */

.hamburger{
    display:none;
    flex-direction:column;
    cursor:pointer;
    gap:5px;
    background:transparent;
    border: none;
}

.hamburger span{
    width:28px;
    height:3px;
   background-color:white;
    border:none;
    transition:.3s;
}

/* Hero */

.hero{
    min-height:calc(100vh - 70px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
}

.hero h1{
    font-size:3rem;
    color:#fff;
}

.hero p{
    margin-top:15px;
    font-size:20px;
    color:#b8b8d1;
}

.hero-btn{
    margin-top:30px;
    background:#7ffa7b;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:15px 35px;
    width:90%;
    max-width:320px;
    cursor:pointer;
    font-size:18px;
    font-weight:600;
}

/* ===========================
   Mobile
=========================== */

@media(max-width:768px){

.nav-container{
    height:70px;
}

.hamburger{
    display:flex;
}

.nav-menu{
    position:fixed;
    top:70px;
    left:-100%;
    width:50%;
    height:calc(100vh - 70px);
    background:#1a1a2e;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:0;
    transition:.4s;
    overflow-y:auto;
}

.nav-menu.active{
    left:0;
}

.nav-menu li{
    width:100%;
}

.nav-menu a{
    display:block;
    padding:18px;
    width:100%;
    text-align:center;
    border-bottom:1px solid rgba(255,255,255,.08);
}


.hamburger.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
    opacity:0;
}

.hamburger.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}

.hero h1{
    font-size:2rem;
}

.hero p{
    font-size:16px;
}

.hero-btn{
    width:90%;
    max-width:300px;
}

}

/* Small Phones */

@media(max-width:480px){

.nav-logo{
    font-size:24px;
}

.hero h1{
    font-size:1.7rem;
}

.hero p{
    font-size:15px;
}

.hero-btn{
    font-size:16px;
    padding:14px;
}

}