/* ===============================
UpNext Agency - Style.css
=============================== */

/* Grundinställningar */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: #0e0e10;
color: #f5f5f5;
font-family: 'Poppins', sans-serif;
line-height: 1.6;
overflow-x: hidden;
}

/* Header / Navigation */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 80px;
background-color: rgba(15, 15, 17, 0.9);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
}

.logo img {
height: 45px;
}

nav ul {
display: flex;
list-style: none;
}

nav ul li {
margin-left: 40px;
}

nav ul li a {
text-decoration: none;
color: #f5f5f5;
font-weight: 500;
transition: 0.3s;
}

nav ul li a:hover {
color: #00bfff;
}

/* Hero section */
.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background: radial-gradient(circle at 20% 20%, #1b1b1f, #0d0d10);
padding: 0 20px;
}

.hero h1 {
font-size: 3.5rem;
color: #00bfff;
font-weight: 700;
margin-bottom: 20px;
}

.hero p {
font-size: 1.2rem;
color: #d1d1d1;
max-width: 700px;
margin-bottom: 40px;
}

.hero .cta {
background-color: #00bfff;
color: #0e0e10;
border: none;
padding: 15px 35px;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}

.hero .cta:hover {
background-color: #009fd4;
}

/* Services section */
section.services {
padding: 100px 10%;
text-align: center;
background-color: #121216;
}

.services h2 {
font-size: 2.4rem;
margin-bottom: 40px;
color: #00bfff;
}

.service-box {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
}

.service {
background-color: #1a1a1f;
padding: 40px 20px;
border-radius: 12px;
transition: 0.3s;
}

.service:hover {
transform: translateY(-10px);
background-color: #1e1e24;
}

.service h3 {
color: #ffffff;
margin-bottom: 15px;
}

.service p {
color: #c9c9c9;
font-size: 0.95rem;
}

/* Contact section */
section.contact {
background-color: #0d0d10;
padding: 120px 10%;
text-align: center;
}

.contact h2 {
font-size: 2.2rem;
margin-bottom: 25px;
color: #00bfff;
}

.contact p {
color: #c9c9c9;
margin-bottom: 40px;
}

.contact button {
background-color: #00bfff;
color: #0e0e10;
border: none;
padding: 15px 35px;
font-size: 1rem;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}

.contact button:hover {
background-color: #009fd4;
}

/* Footer */
footer {
background-color: #09090b;
color: #999;
text-align: center;
padding: 30px 0;
font-size: 0.9rem;
border-top: 1px solid #1f1f22;
}