*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#1a1a1a;
    color:white;

    line-height:1.6;
    
    padding-top:55px;
}

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

header{

    text-align:center;
    padding:60px 20px;

}

header h1{

    font-size:3rem;
    margin-bottom:10px;

}

header p{

    color:#bbbbbb;

}

/* ================= NAVIGATION ================= */

.category-nav{

    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:15px;

    margin-bottom:50px;

}

.category-nav a{

    text-decoration:none;

    color:white;

    background:#303030;

    padding:12px 22px;

    border-radius:8px;

    transition:.3s;

}

.category-nav a:hover{

    background:#4f4f4f;

}

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

main{

    width:min(1100px,90%);
    margin:auto;
    padding-bottom:80px;

}

section{

    margin-bottom:70px;

}

section h2{

    font-size:2rem;

    margin-bottom:25px;

    border-bottom:2px solid #444;

    padding-bottom:10px;

}

/* ================= CARD GRID ================= */

.card-grid{

    display:grid;

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

    gap:30px;

}

.card{

    background:#252525;

    border-radius:12px;

    overflow:hidden;

    transition:.3s;

}

.card:hover{

    transform:translateY(-5px);

}

.card img{

    width:100%;
    height:220px;
    object-fit:cover;

}

.card-content{

    padding:20px;

}

.card-content h3{

    margin-bottom:15px;

}

.card-content p{

    margin-bottom:20px;

    color:#d0d0d0;

}

.card button{

    background:#4d6fff;

    color:white;

    border:none;

    padding:10px 18px;

    border-radius:6px;

    cursor:pointer;

}

.card button:hover{

    background:#6d89ff;

}

/* ================= LOCATION LIST ================= */

.list-box{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.list-item{

    text-align:left;

    padding:18px;

    background:#252525;

    color:white;

    border:none;

    border-radius:8px;

    font-size:1rem;

    cursor:pointer;

    transition:.25s;

}

.list-item:hover{

    background:#353535;

}

/* Style the topnav */
ul.topnav {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  
  z-index: 1000;
}

/* Style links in topnav */
ul.topnav li a {
  display: block;
  color: #f1f1f1;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
ul.topnav li a:hover {
  background-color: #dddddd;
  color: black;
}
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

/* ================= ACCORDION ================= */

.accordion{
    margin-bottom:15px;
}

.accordion-btn{

    width:100%;

    background:#252525;
    color:white;

    border:none;

    border-radius:8px;

    padding:18px;

    font-size:1rem;

    text-align:left;

    cursor:pointer;

    transition:.25s;

}

.accordion-btn:hover{

    background:#353535;

}

.accordion-content{

    display:none;

    background:#1f1f1f;

    padding:20px;

    border-radius:0 0 8px 8px;

    border:1px solid #444;

    border-top:none;

    line-height:2.2;

}

.accordion-content p{

    color:#d0d0d0;

}

/* ================= MODAL ================= */

.modal{

    display:none;

    position:fixed;

    inset:0;

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

    z-index:2000;

}

.modal-box{

    background:#252525;

    width:min(600px,90%);

    margin:100px auto;

    padding:30px;

    border-radius:12px;

    position:relative;

    max-height:75vh;

    overflow-y:auto;

}

.modal-box h2{

    margin-bottom:15px;

}

.modal-box h3{

    margin-top:25px;
    margin-bottom:10px;

}

.modal-box p,
.modal-box li{

    color:#d0d0d0;

    line-height:1.7;

}

.close{

    position:absolute;

    right:20px;
    top:15px;

    font-size:30px;

    cursor:pointer;

    color:white;

}

.close:hover{

    color:#ff5555;

}