* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}
.bold-text {
  font-weight: bold; 
}

body {
  font-family: sans-serif;
  overflow-x: hidden; /* Спречува хоризонтално скролување */
}
.links{
  text-decoration: none;
  color: black;
}
.mail{
  text-decoration: none;
  color:rgb(16, 16, 16);
}
/*Navbar*/
.navbar {
  font-size: 18px;
  background-color: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.146) 0px 5px 15px;
  padding: 20px 30px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: sans-serif;
}
.navbar-brand{
  font-weight: bold;
font-family: sans-serif;
}
.img-logo{
  width: 70px;
  border-radius: 100px;
}
.navbar .container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .navbar-nav {
  display: flex;
  gap: 20px; /* Размак меѓу елементите на навбарот */
}
.dropdown-menu {
  max-height: 300px; /* или висина по избор */
  overflow-y: auto;  /* скролање надоле */
}
/* Главното мени */
.main-nav {
  list-style: none;
  display: flex;
}

.main-nav li {
  margin: 0 15px;
}

.nav-links {
  text-decoration: none;
  color: rgb(71, 71, 71);
  font-size: 18px;
  transition: color 0.3s;
}

.nav-links:hover {
  color: black;
}

/* ===========================
   SCHOOLS SECTION
=========================== */

.schools-section{
    padding:90px 0;
    background:#faf8f4;
}

.schools-heading{
    text-align:center;
    margin-bottom:60px;
}

.schools-heading h2{
    font-size:42px;
    font-weight:bold;
    color:#333;
}

.schools-heading p{
    font-size:20px;
    color:#666;
    width:60%;
    margin:20px auto 0;
}

.schools-container{
    width:90%;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:35px;
}

.school-card{
    background:white;
    border-radius:18px;
    padding:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transition:.35s;
    position:relative;
    overflow:hidden;
}

.school-card::before{

    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:6px;

    background:linear-gradient(to right,#f7f1e3,#f7e2ab,#ffdfc4);

}

.school-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.school-icon{

    width:75px;
    height:75px;

    background:linear-gradient(to right,#f7f1e3,#f7e2ab,#ffdfc4);

    border-radius:50%;

    display:flex;
    justify-content:center;
    align-items:center;

    font-size:32px;

    color:#555;

    margin-bottom:25px;

}

.school-card h3{

    font-size:28px;

    font-weight:bold;

    color:#333;

    margin-bottom:15px;

}

.school-card h5{

    font-size:19px;

    color:#9c7a43;

    font-weight:600;

    margin-bottom:20px;

    line-height:1.5;

}

.school-text{

    font-size:17px;

    color:#555;

    line-height:1.8;

    margin-bottom:20px;

}

.school-card h4{

    margin-top:20px;

    margin-bottom:12px;

    font-size:20px;

    font-weight:bold;

    color:#222;

}

.school-card ul{

    padding-left:18px;

}

.school-card ul li{

    margin-bottom:10px;

    color:#555;

    line-height:1.7;

    font-size:16px;

}

.school-btn{

    margin-top:30px;

    background:linear-gradient(to right,#f7f1e3,#f7e2ab,#ffdfc4);

    border:none;

    padding:13px 28px;

    border-radius:8px;

    font-size:17px;

    font-weight:bold;

    color:#444;

    transition:.3s;

    cursor:pointer;

}

.school-btn:hover{

    transform:scale(1.05);

    box-shadow:0 8px 18px rgba(0,0,0,.15);

}

@media(max-width:992px){

.schools-heading h2{

font-size:34px;

}

.schools-heading p{

width:90%;
font-size:18px;

}

.schools-container{

grid-template-columns:1fr;

width:92%;

}

.school-card{

padding:28px;

}

.school-card h3{

font-size:24px;

}

.school-card h5{

font-size:18px;

}

.school-icon{

width:65px;
height:65px;
font-size:28px;

}

.school-btn{

width:100%;

}

}









/*Footer*/
footer {
  background: #222;
  color: #fff;
  padding: 40px 0;

}

.container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  margin-top: 50px;
  padding-bottom: 80px;
}

.footer-section {
  width: 25%;
  padding: 10px;
}

.footer-section h3, .footer-section h2 {
  color:rgb(16, 16, 16);
}

.footer-section p, .footer-section ul {
  font-size: 15px;
  line-height: 1.6;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.footer-section ul li {
  margin-bottom: 5px;

}

.footer-section ul li a {
  color: #1a1a1a;
  text-decoration: none;
  transition: 0.3s;
  font-weight: bold;
}

.footer-section ul li a:hover {
  color:  rgba(245, 206, 116, 0.863)
}

.social-icons a {
  display: inline-block;
  color: #fff;
  margin-right: 10px;
  font-size: 18px;
  transition: 0.3s;
}

.social-icons a:hover {
  color: #f1c40f;
}

.footer-bottom {
  text-align: center;
  margin-top: 20px;
  padding: 10px 0;
  border-top: 1px solid #444;
}
.footer-par2{
  margin-top: 10px;
  
}
.calendar-link{
  text-decoration: none;
}
.links{
  margin-right: 5px;
}

@media screen and (max-width: 768px) {
  .navbar-toggle {
      display: block;
      position: absolute;

      right: 20px;
  }

  .main-nav {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 60px;
      left: 0;
      width: 100%;
      background-color: white;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 10px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.5s ease-in-out;
  }

  .main-nav.show {
      max-height: 400px; /* Кога ќе се отвори менито */
  }

  .main-nav li {
      text-align: center;
      padding: 15px 0;
      width: 100%;
  }

  .logo {
      font-size:16px;
      margin: 0;
  }
    .container{
    display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding-top: 30px;
width: 100%;
  }
.footer-section{
  width: 100%;
  text-align: center;
}

}