/*
 Theme Name:   School Time Child Theme
 Theme URI:    http://school-time.aislinthemes.com/
 Description:  School Time Child Theme
 Author:       Aislin
 Author URI:   http://aislinthemes.com
 Template:     school-time
 Version:      1.0.0
 Tags:
 Text Domain:
*/

/* =Theme customization starts here
-------------------------------------------------------------- */

.top-bar {
  background-color: #000; /* Black strip */
  color: #fff;
  padding: 8px 0;
  font-size: 14px;
}

.top-bar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px 15px;
}

.top-bar-left ul.topInfo,
.top-bar-right ul.topSocialIcons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.top-bar-left ul.topInfo li,
.top-bar-right ul.topSocialIcons li {
  margin-right: 20px;
  display: flex;
  align-items: center;
  color: #fff;
}

.top-bar-left ul.topInfo li i,
.top-bar-right ul.topSocialIcons li i {
  margin-right: 6px;
  font-size: 14px;
}

.top-bar a {
  color: #fff;
  text-decoration: none;
}

.top-bar a:hover {
  color: #f9c349; /* Accent color on hover */
}

.top-bar .weblink a {
  padding: 0;
  margin: 0;
  font-weight: 500;
}

.top-bar-right ul.topSocialIcons li a {
  color: #fff;
  font-size: 14px;
  transition: color 0.3s;
}

.top-bar-right ul.topSocialIcons li a:hover {
  color: #f9c349; /* Social icon hover color */
}

@media (max-width: 768px) {
  .top-bar .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .top-bar-left,
  .top-bar-right {
    width: 100%;
    margin-bottom: 6px;
  }

  .top-bar-right {
    justify-content: flex-start;
  }

  .top-bar-left ul.topInfo li,
  .top-bar-right ul.topSocialIcons li {
    margin-right: 15px;
    margin-bottom: 4px;
  }
}


/* MIDDLE HEADER CODE */

.middheader {
  background-color: #fff;
  padding: 15px 0;
  border-bottom: 2px solid #dcdcdc;
}

.middheader .container {
    padding-left: 15px;
    padding-right: 15px;
}

.middheader-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.middheader-logo img {
  max-width: 100%;
  width: 300px;
  height: auto;
  display: block;
}

.middheader-logo {
  flex: 0 0 auto;
  max-width: 300px;
}

.middheader-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 30px;
  flex: 1;
  text-align: right;
  flex-wrap: wrap;
}

.affiliation {
  color: #d60000;
  font-weight: 700;
  font-size: 16px;
}

.affiliation p {
  margin: 0;
  font-size: 13px;
  font-weight: normal;
  color: #d60000;
}

.header-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-red {
  background-color: #e60000;
  color: #fff !important;
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.btn-red:hover {
  background-color: #b70000;
}

@media (max-width: 768px) {
  .middheader-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .middheader-info {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
  }

  .header-buttons {
    flex-direction: column;
    width: 100%;
  }

  .btn-red {
    width: 100%;
    justify-content: center;
  }
}