@import 'css/fonts.css';
/* Add this in your styles.css file */
body {
  font-family: "is",iy,Tahoma,Arial,sans-serif;
  background-color: #f4f4f4;
  color: #333;
  transition: background-color 0.5s ease, color 0.5s ease;
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

#logo {
  width: 100px;
  height: auto;
}

#title {
  margin-top: 20px;
  margin-bottom: 20px;
}

.item {
  text-align: center;
  font-size: 26px;
  font-weight: bolder;
}

.item img {
  max-width: 100%;
  height: auto;
  border-radius: 10%;
}
.item i {
position:relative;
top:0px;
font-size:82px;
color:rgba(0, 0, 0, 0.5);
padding:5px;
}

.separator {
  margin: 30px 0;
  border-top: 10px solid #fff;
}

.section-header {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 10px;
}

.table {
  text-align: center;
  width: 100%;
  margin-top: 20px;
}

.table th,
.table td {
  padding: 15px;
  font-size: 36px; /* Adjust the font size as needed */
  font-weight: bold;
}

.table th {
  background-color: #3498db;
  color: #fff;
}

.table tbody tr:nth-child(even) td {
  background-color: #FFA833 !important; /* Light Green */
}

.table tbody tr:nth-child(odd) td {
  background-color: #F1CC7C !important; /* Yellow */
}

.table tbody tr:hover {
  background-color: #aed6f1;
}

.arrow-down {
  text-align: center;
  margin-bottom: 20px; /* Adjust margin as needed */
}

.arrow {
  font-size: 60px; /* Adjust the font size as needed */
  vertical-align: middle;
  color: #FFA833;
}

/* Custom styles for links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: inherit;
  text-decoration: none;
}

.dark-mode {
  background-color: #333;
  color: #fff;
}

.dark-mode header {
  background-color: #111;
}

.dark-mode a {
  color: #fff;
}

.dark-mode .table,
.dark-mode .table th,
.dark-mode .table td {
  border: 1px solid #555;
  color: #111;
}

.dark-mode .table th {
  background-color: #333;
  color: #fff;
}

@media (max-width: 767px) {
  .item {
    font-size: 18px;
  }

  .item img {
    max-width: 20%;
  }

  .table th,
  .table td {
    font-size: 18px; /* Adjust the font size as needed */
    font-weight: bold;
    padding: 10px;
  }
}