@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


* {

margin:0;
padding:0;
box-sizing:border-box;

}



body {

font-family:"Bebas Neue", sans-serif;

color:white;

text-align:center;


background:

linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.9)
),

url("images/background.png");


background-size:cover;

background-position:center;

background-attachment:fixed;

}




html{

scroll-behavior:smooth;

}



/* =====================
NAVBAR
===================== */


.navbar {

position:fixed;

top:0;

left:0;

width:100%;

height:80px;


padding:15px 40px;


display:flex;

justify-content:space-between;

align-items:center;


background:rgba(0,0,0,.65);

backdrop-filter:blur(12px);


z-index:999;

}



.nav-logo img {

width:55px;

height:auto;

}



.desktop-menu {

display:flex;

gap:40px;

align-items:center;

}



.desktop-menu a {

color:white;

text-decoration:none;

font-size:18px;

transition:.3s;

}



.desktop-menu a:hover {

opacity:.6;

}



/* MOBILE */


.menu-btn {

display:none;

background:none;

border:none;

color:white;

font-size:32px;

cursor:pointer;

}




.dropdown {

display:none;

position:absolute;

top:75px;

right:25px;

background:#111;

border:1px solid rgba(255,255,255,.15);

border-radius:15px;

overflow:hidden;

}



.dropdown.show {

display:block;

}




.dropdown a {

display:block;

padding:18px 35px;

color:white;

text-decoration:none;

}





/* =====================
HEADER
===================== */


header {


min-height:100vh;


display:flex;

flex-direction:column;


justify-content:center;

align-items:center;


padding:40px;

}



.logo {

width:220px;

margin-bottom:40px;

}



h1 {

font-size:100px;

letter-spacing:10px;

}



header p {

font-size:28px;

margin-top:20px;

}




/* =====================
MAIN
===================== */


main {

max-width:1000px;

margin:auto;

padding:40px 20px;

}




/* =====================
BOX
===================== */


.box {


background:rgba(10,10,10,.85);


border:1px solid rgba(255,255,255,.15);


border-radius:20px;


padding:60px 40px;


margin-bottom:50px;


backdrop-filter:blur(10px);


}




h2 {


font-size:55px;


margin-bottom:40px;


}



.box p {


font-size:22px;


line-height:1.7;


}





/* =====================
CARDS
===================== */


.card {


background:rgba(255,255,255,.05);


border:1px solid rgba(255,255,255,.1);


padding:35px;


border-radius:15px;


margin:20px 0;


}



.card h3 {


font-size:35px;


margin-bottom:20px;


}



.card p {


font-size:22px;

}





/* =====================
BUTTON
===================== */


.button {


display:inline-block;


margin-top:30px;


padding:15px 40px;


border:2px solid white;


color:white;


text-decoration:none;


transition:.3s;


}



.button:hover {


background:white;


color:black;


}




/* =====================
FOOTER
===================== */


footer {


text-align:center;


padding:60px 20px;


border-top:1px solid rgba(255,255,255,.1);


}



.footer-logo {


width:100px;


margin-bottom:20px;


}



footer p {


font-size:14px;


opacity:.6;


}




/* =====================
MOBILE
===================== */


@media(max-width:700px){



.desktop-menu {

display:none;

}



.menu-btn {

display:block;

}



.navbar {

padding:15px 20px;

}



h1 {

font-size:60px;

letter-spacing:5px;

}



h2 {

font-size:40px;

}



.box {

padding:40px 20px;

}



.box p {

font-size:19px;

}



.card h3 {

font-size:28px;

}



header p {

font-size:22px;

}



}