:root {

    --red: #D62828;
    --orange: #F77F00;
    --dark: #111111;
    --dark-alt: #181818;
    --card: #1f1f1f;
    --grey: #b5b5b5;
    --white: #ffffff;

}



* {

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

}



html {

    scroll-behavior: smooth;

}



body {

    background: var(--dark);
    color: var(--white);
    font-family: Arial, Helvetica, sans-serif;

}



h1,
h2,
h3 {

    font-weight: 700;

}



a {

    color: inherit;

}



/* =========================
   Navigation
========================= */


.navbar {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    padding: 20px 8%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: rgba(10,10,10,0.85);

    backdrop-filter: blur(10px);

    z-index: 1000;

}



.logo {

    text-decoration: none;

    color: white;

    font-size: 22px;

    font-weight: bold;

    display: flex;

    align-items: center;

    gap: 10px;

}



.logo span {

    color: var(--red);

}



nav {

    display: flex;

    align-items: center;

    gap: 30px;

}



nav > a {

    color: white;

    text-decoration: none;

    font-size: 16px;

    transition: 0.3s;

}



nav > a:hover {

    color: var(--orange);

}



/* Dropdown */


.dropdown {

    position: relative;

}



.dropdown-btn {

    background: none;

    border: none;

    color: white;

    font-size: 16px;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;

}



.dropdown-btn:hover {

    color: var(--orange);

}



.dropdown-content {

    position: absolute;

    top: 35px;

    left: 0;

    width: 240px;

    background: #161616;

    border-radius: 8px;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition: 0.25s;

    box-shadow: 0 10px 30px rgba(0,0,0,.5);

}



.dropdown-content a {

    display: block;

    padding: 15px;

    color: white;

    text-decoration: none;

}



.dropdown-content a:hover {

    background: var(--red);

}



.dropdown:hover .dropdown-content {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}





/* =========================
   Hero
========================= */


.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding: 0 8%;

    background:

    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.85)
    ),

    url("../images/hero-fire.jpg");

    background-size: cover;

    background-position: center;

}



.hero-content {

    max-width: 800px;

}



.tag {

    color: var(--orange);

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 2px;

    margin-bottom: 20px;

}



.hero h1 {

    font-size: 70px;

    line-height: 1.1;

    margin-bottom: 25px;

}



.hero-text {

    color: #ddd;

    font-size: 20px;

    line-height: 1.7;

    max-width: 700px;

}



.buttons {

    margin-top: 35px;

}



.btn {

    display: inline-block;

    padding: 15px 35px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: bold;

    margin-right: 15px;

    transition: .3s;

}



.primary {

    background: var(--red);

    color: white;

}



.primary:hover {

    background: #a61d25;

}



.secondary {

    border: 2px solid white;

    color: white;

}



.secondary:hover {

    background:white;

    color:black;

}





/* =========================
   General Sections
========================= */


section {

    padding: 100px 8%;

}



.section-title {

    text-align:center;

    margin-bottom:50px;

}



.section-title p {

    color:var(--orange);

    font-weight:bold;

    letter-spacing:2px;

}



.section-title h2 {

    font-size:45px;

    margin-top:10px;

}





/* =========================
 Cards
========================= */


.card-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.card {

    background:var(--card);

    padding:35px;

    border-radius:12px;

    transition:.3s;

}



.card:hover {

    transform:translateY(-5px);

}



.icon {

    font-size:40px;

    margin-bottom:20px;

}



.card h3 {

    margin-bottom:15px;

}



.card p {

    color:#ccc;

    line-height:1.7;

}





/* =========================
 About
========================= */


.about {

    background:var(--dark-alt);

}



.about-content {

    max-width:900px;

}



.about h2 {

    font-size:50px;

    margin:20px 0;

}



.about p {

    color:#ccc;

    line-height:1.8;

}





/* =========================
 Departments
========================= */


.department-grid {

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.department {

    min-height:280px;

    padding:40px;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

}



.department h3 {

    font-size:30px;

    margin-bottom:15px;

}



.department p {

    margin-bottom:20px;

}



.department a {

    font-weight:bold;

}



.fire {

    background:

    linear-gradient(
        rgba(0,0,0,.4),
        rgba(0,0,0,.7)
    ),

    url("../images/fire-department.jpg");

    background-size:cover;

}



.police {

    background:

    linear-gradient(
        rgba(0,0,0,.4),
        rgba(0,0,0,.7)
    ),

    url("../images/police.jpg");

    background-size:cover;

}



.ems {

    background:

    linear-gradient(
        rgba(0,0,0,.4),
        rgba(0,0,0,.7)
    ),

    url("../images/ems.jpg");

    background-size:cover;

}





/* =========================
 Apply
========================= */


.apply {

    text-align:center;

    background:linear-gradient(
        90deg,
        var(--red),
        var(--orange)
    );

}



.apply h2 {

    font-size:45px;

    margin-bottom:15px;

}



.apply p {

    margin-bottom:30px;

}





/* =========================
 Footer
========================= */


footer {

    padding:40px 8%;

    background:black;

    text-align:center;

}



footer h3 {

    margin-bottom:10px;

}





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


@media(max-width:900px) {


    .navbar {

        flex-direction:column;

        gap:20px;

    }


    nav {

        flex-wrap:wrap;

        justify-content:center;

        gap:15px;

    }


    .hero h1 {

        font-size:45px;

    }


    .section-title h2 {

        font-size:35px;

    }


    .dropdown-content {

        left:-50px;

    }
    
    .organisation-hero {

    min-height:70vh;

}

.fire-hero {

    background:

    linear-gradient(
        rgba(0,0,0,.65),
        rgba(0,0,0,.85)
    ),

    url("../images/fire-department.jpg");

    background-size:cover;

    background-position:center;

}



.rank-section {

    background:#151515;

}



.rank-tree {

    max-width:1000px;

    margin:auto;

    text-align:center;

}



.rank-card {

    background:#222;

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

    padding:20px;

    border-radius:10px;

    min-width:220px;

    font-weight:bold;

}



.rank-card span {

    display:block;

    margin-top:8px;

    color:#aaa;

    font-size:14px;

    font-weight:normal;

}



.rank-row {

    display:flex;

    justify-content:center;

    gap:30px;

    margin:20px 0;

}



.chief {

    background:#D62828;

}



.connector {

    width:2px;

    height:30px;

    background:#D62828;

    margin:auto;

}



@media(max-width:700px) {


    .rank-row {

        flex-direction:column;

        align-items:center;

    }


}


}