/* style.css */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

:root {
  --primary-color: #AB0E86;
  --secondary-color: #59057B;
  --accent-color: #E01171;
  --light-color: #FFCEE4;
  --dark-color: #0F0766;
  --gradient-primary: linear-gradient(135deg, #AB0E86 0%, #59057B 100%);
  --hover-color: #C81065;
  --background-color: #0A053A;
  --text-color: #F1F5F9;
  --border-color: rgba(224, 17, 113, 0.3);
  --divider-color: rgba(171, 14, 134, 0.4);
  --shadow-color: rgba(0, 0, 0, 0.6);
  --highlight-color: #FFD23F;
  --main-font: 'Oswald', sans-serif;
  --alt-font: 'Inter', sans-serif;
}

body { 
    font-family: var(--alt-font); 
    background-color: var(--background-color); 
    color: var(--text-color); 
    margin: 0; 
    line-height: 1.7; 
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { 
    font-family: var(--main-font); 
    color: #FFFFFF; 
    font-weight: 600;
}

a { 
    color: var(--light-color); 
    text-decoration: none; 
    transition: color 0.3s ease;
}

.hover\:text-underline:hover { 
    text-decoration: underline; 
    color: var(--accent-color); 
}

/* Neumorphism Dark Theme Effect */
.glass-panel { 
    background: rgba(15, 7, 102, 0.6); 
    backdrop-filter: blur(12px); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    box-shadow: 10px 10px 30px rgba(0,0,0,0.5), inset 1px 1px 2px rgba(255,255,255,0.1); 
    border-radius: 12px; 
    transition: transform 0.3s ease;
}
.glass-panel:hover {
    transform: translateY(-5px);
}

.btn { 
    background: var(--accent-color); 
    color: #ffffff !important; 
    padding: 16px 36px; 
    border-radius: 4px; 
    display: inline-block; 
    font-family: var(--main-font);
    font-size: 1.2rem;
    letter-spacing: 1px;
    transition: all 0.3s ease; 
    box-shadow: 0 4px 15px rgba(224, 17, 113, 0.4); 
}
.btn:hover { 
    background: var(--hover-color); 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(224, 17, 113, 0.6); 
}

section { 
    padding-top: 10dvh; 
    padding-bottom: 10dvh; 
}

.hero { 
    min-height: 80vh; 
    background: linear-gradient(rgba(10, 5, 58, 0.8), rgba(15, 7, 102, 0.8)), url('./img/bg.jpg') no-repeat center center/cover; 
    display: flex; 
    align-items: center; 
}

.hamburger { display: none; }
.nav-menu ul { 
    display: flex; 
    gap: 30px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
}

header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 20px 5%; 
    background-color: rgba(15, 7, 102, 0.95); 
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

footer { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 60px 5% 40px; 
    background-color: var(--dark-color); 
    flex-wrap: wrap; 
}

@media (max-width: 768px) {
    .nav-menu { display: none; width: 100%; }
    .nav-menu ul { flex-direction: column; width: 100%; text-align: center; padding-top: 20px; }
    .hamburger { display: block; font-size: 32px; cursor: pointer; color: var(--light-color); }
    header { flex-wrap: wrap; }
    #menu-toggle:checked ~ .nav-menu { display: block; }
    footer { flex-direction: column; gap: 30px; text-align: center; }
}

.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 0 20px; 
}

.flex-wrap { 
    display: flex; 
    flex-wrap: wrap; 
}
.w-50 { width: calc(50% - 15px); }
.w-40 { width: calc(40% - 15px); }
.w-60 { width: calc(60% - 15px); }

@media (max-width: 768px) { 
    .w-50, .w-40, .w-60 { width: 100%; } 
}

input, textarea { 
    width: 100%; 
    padding: 16px; 
    margin-bottom: 20px; 
    border-radius: 6px; 
    border: 1px solid var(--border-color); 
    background: rgba(255, 255, 255, 0.05); 
    color: #FFFFFF; 
    font-family: var(--alt-font);
}
input::placeholder, textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
input:focus, textarea:focus { 
    outline: none; 
    border-color: var(--accent-color); 
    background: rgba(255, 255, 255, 0.1);
}

.timeline { 
    border-left: 4px solid var(--accent-color); 
    padding-left: 35px; 
    margin-left: 20px; 
}
.timeline-item { 
    position: relative; 
    margin-bottom: 45px; 
}
.timeline-item::before { 
    content: ''; 
    position: absolute; 
    left: -47px; 
    top: 5px; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    background: var(--dark-color); 
    border: 4px solid var(--accent-color);
    box-shadow: 0 0 10px var(--accent-color); 
}

.divider { 
    height: 2px; 
    background: var(--border-color); 
    width: 70%; 
    margin: 0 auto; 
    display: block; 
}

.text-center { text-align: center; }

details > summary { list-style: none; outline: none; }
details > summary::-webkit-details-marker { display: none; }