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

:root {
  /* Colors from instruction: #27AE60 (Green Primary), #2C3E50 (Dark), #F1C40F (Yellow Highlight), #E67E22 (Orange) */
  --primary-color: #27AE60;
  --secondary-color: #E67E22;
  --dark-bg: #1A252F; /* Deep dark for bg */
  --header-bg: #151E27;
  --text-color: #ECF0F1;
  --highlight-color: #F1C40F;
  --divider-color: rgba(236, 240, 241, 0.1);
  --shadow-dark: #0f151b;
  --shadow-light: #253543;
  
  --main-font: 'Montserrat', sans-serif;
  --alt-font: 'Lato', sans-serif;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    font-family: var(--alt-font);
}

.font-heading { font-family: var(--main-font); }
.font-text { font-family: var(--alt-font); }

.text-primary { color: var(--primary-color); }
.text-highlight { color: var(--highlight-color); }

.bg-primary { background-color: var(--primary-color); }
.header-bg { background-color: var(--header-bg); }
.bg-dark { background-color: #000; }
.bg-divider { background-color: var(--divider-color); }

.border-primary { border-color: var(--primary-color); }
.border-highlight { border-color: var(--highlight-color); }
.border-secondary { border-color: var(--secondary-color); }

.hover-text-primary:hover { color: var(--primary-color); }

/* Dark Neumorphism */
.neumorph-container {
    background: var(--dark-bg);
    box-shadow: 8px 8px 16px var(--shadow-dark),
               -8px -8px 16px var(--shadow-light);
}

.neumorph-inset {
    background: var(--dark-bg);
    box-shadow: inset 8px 8px 16px var(--shadow-dark),
               inset -8px -8px 16px var(--shadow-light);
}

.neumorph-input {
    background: var(--dark-bg);
    box-shadow: inset 5px 5px 10px var(--shadow-dark),
               inset -5px -5px 10px var(--shadow-light);
    border: none;
    outline: none;
}
.neumorph-input:focus {
    box-shadow: inset 7px 7px 14px var(--shadow-dark),
               inset -7px -7px 14px var(--shadow-light),
               0 0 0 2px rgba(39, 174, 96, 0.3);
}

.icon-bg {
    background: var(--dark-bg);
    box-shadow: 4px 4px 8px var(--shadow-dark),
               -4px -4px 8px var(--shadow-light);
}

.hover-scale {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-scale:hover {
    transform: translateY(-8px);
    box-shadow: 12px 12px 24px var(--shadow-dark),
               -12px -12px 24px var(--shadow-light);
}

.image-border {
    border: 4px solid var(--shadow-light);
    box-shadow: 10px 10px 20px var(--shadow-dark);
}

/* Sections */
.section-padding {
    padding-top: 10dvh;
    padding-bottom: 10dvh;
}

#hero {
    height: 80vh;
    background: linear-gradient(rgba(26, 37, 47, 0.8), rgba(26, 37, 47, 0.8)), url('./img/bg.jpg') no-repeat center center/cover;
}

.cta-bg {
    background: url('./img/bg.jpg') no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
}

/* Menu Toggle Logic (No JS) */
.navigation {
    display: none;
}
@media (min-width: 1024px) {
    .navigation {
        display: flex;
    }
}
#menu-toggle:checked ~ .navigation {
    display: flex;
}