html { scroll-behavior: smooth; }

body {
      /* Padding-top to prevent content hiding under fixed header */
      padding-top: 110px;
      width: 100%;
      margin: 0;
      background-color: #f4f4f9;
      color: #333;
      line-height: 1.6;
      font-family: Arial, sans-serif; 
    }
h1 { text-align: center; margin: 0; padding:0; }

p { text-indent: 40px; text-align: justify; }

header {
      position: fixed;
      top: 0;
      width: 100%;
      padding: 5px;
      background-color: white;
      color: black;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
.header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
.logo-school {
      display: flex;
      align-items: center;
    }
.logo img {
      display: block;
      margin: 0;
      padding-left: 10px;
      height: 50px;  /* Adjust as needed */
      width: auto;
        
    }
.school-name h1 {
      margin: 0;
      padding-left: 10px;
      color: rgb(8,5,208);
      font-size: 24px;
      font-family: "Cooper Black", serif;
      display: inline-flex;  /* This makes the h1 consider its children as flex items */
      align-items: center;    /* Vertically centers the pseudo-element content */
    }
/* Mobile devices (e.g., smartphones) */
@media only screen and (max-width: 767px) {
    .school-name h1::after { content: ""; } 
}
/* Tablet devices */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .school-name h1::after { content: "CAT College"; }
}
/* Desktop devices */
@media only screen and (min-width: 1024px) {
    .school-name h1::after { content: "Computer Arts and Technological College"; }
}

.header-icons {
      /* Use full width if necessary or let flex distribute space */
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-right: 20px;
    }
.header-icons a {
      margin-left: 15px;
      font-size: 25px;
      color: inherit;
      text-decoration: none;
    }
.header-icons a:hover {
      color: rgb(8,5,208);
    }

nav {
      position: fixed;
      top: 60px;
      left: 0;
      height: 45px;
      width: 100%;
      background-color: #0000FF;
      z-index: 1000;
    }
.nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
    }
nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
    } 
nav ul li a {
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      display: block;
    }
nav ul li a:hover {
      border-bottom: 1px solid gray;
    }
.hamburger {
      display: none;  /* Hidden by default */
      flex-direction: column;
      cursor: pointer;
    }
.hamburger span {
      height: 3px;
      width: 25px;
      background: white;
      margin-bottom: 4px;
      border-radius: 3px;
    }
@media only screen and (max-width: 1200px) {
      /* Hide the normal menu list and display hamburger */
      .nav-menu { 
        display: none;  /* Hidden until toggled */
        flex-direction: column;
        width: 100%;
        background-color: #0000FF;
        position: absolute;
        top: 100%;  /* Right below the nav bar */
        left: 0;
      }
      
      /* When toggled on, display the mobile menu */
      .nav-menu.active {
        display: flex;
      }
      
      .hamburger {
        display: flex;
        padding-top: 14px; 
        border: 0 solid red;  
      }
      
      /* Style the mobile nav items */
      .nav-menu li a {
        padding: 10px;
        border-top: 1px solid #fff;
        text-align: center;
      }
    }

.welcome { text-align: center; margin: 10px;}
.welcome img {
        width: 100%; 
        max-width: 840px; 
        height: auto; 
        border-radius: 10px;
    }

.campuses { margin: 10px; }
.campuses-tbl table {
    width: 100%;
    max-width: 840px;
    margin: auto; 
    padding: 20px;
    background-color: #fff;
    border-collapse: collapse;
    border-radius: 10px;
    border: 1px solid #dedede;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.campuses-tbl td {
    padding: 10px;
    vertical-align: middle; /* Center text vertically next to the image */
    text-align: left; /* Center text horizontally inside its cell */
/*    word-wrap: break-word;
    overflow-wrap:break-word; */
    white-space: normal; 
}
.campuses-tbl table tr td img {
    display: block;
    width: 200px;
    padding: 5px;
    border-radius: 10%;
    border: 1px solid #ddd;
}
.campuses-tbl table tr td h2 {
    font-size: 24px;
    color: blue;
    margin-bottom: 10px;
}
.campuses-tbl table tr td strong { font-size: 24px; }
.location-marker {
  font-size: 12px;         /* Adjusts the size to be small */
  color: red;              /* Sets the text and icon color to red */
  display: inline-flex;    /* Keeps the icon and text on the same line */
  align-items: center;     /* Vertically centers the icon with the text */
}
.location-marker i {
  margin-right: 4px;       /* Optional: adds spacing between the icon and the coordinate text */
}

.courses { margin: 10px }
.courses-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width:100%;
    max-width: 1000px;
    margin: auto;
    gap: 10px;
}
.column {
    justify-content: center;
    background-color: #fff;
    /*border: 1px solid #ccc; */
    border-radius: 8px;
    border: 1px solid #dedede;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 30%;
    margin: 10px;
    box-sizing: border-box;
}
.column h2 {
    color: #4CAF50;
    margin-bottom: 15px;
}
.column h3 {
    margin-bottom: 10px;
    color: #333;
}
.column ul {
    list-style-type: disc;
    padding-left: 20px;
}
.column ul ul {
    list-style-type: circle;
    margin-left: 20px;
}
.column strong { font-size: 16px; }
@media screen and (max-width: 768px) {
  .courses-content {
    /* Stack the items vertically */
    flex-direction: column;
    align-items: center; /* Center them horizontally */
  }
  .column {
    width: 100%;       /* Make each column nearly full width */
    margin: 10px;   /* Adjust spacing between rows */
  }
}

.car { margin: 10px; }
.carousel {
    width: 100%;
    max-width: 840px;
    margin: 10px auto;    
    overflow: hidden;     
    position: relative;
    border-radius: 10px;
}
.carousel-inner {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out;
    flex-shrink: 0;
    }
.carousel-inner img {
    width: 100%;
    flex-shrink: 0;
    }
/*
@media (max-width: 768px) {
    .carousel {
        max-width: 100%; 
    }
    .carousel-inner img {
        max-width: 100%;
    }
} */

.scholarship { margin: 10px; }
.scholarship-content {
    display: block; 
    width: auto;
    max-width: 800px;
    margin: auto;
    padding: 10px;
    border: 1px solid #dedede;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background: #fff;
/*    word-wrap: break-word;
    overflow-wrap:break-word; */
    }
.scholarship-content h2 {
    text-align: left;
    padding-left: 20px;
    font-size: 1.75rem;
    color: rgb(8,5,208);
    }
.scholarship-content ul {
    font-size: 0.8rem;
    }
.scholarship-content li {
      font-size: 1rem;
    }

.admission { margin: 10px; }
.admission-content {
    display: block; 
      width: auto;
      max-width: 800px;
      margin: auto;
      padding: 10px;
      border: 1px solid #dedede;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      background: #fff;        
    }
.admission-content h2 {
    text-align: left;
    padding-left: 20px;
    font-size: 1.75rem;
    color: rgb(8,5,208);
    }
.admission-content ul {
    font-size: 0.8rem;
    }
.admission-content li {
      font-size: 1rem;
    }

.activities { margin: 10px; }
.activities-content {
    display: block; 
      width: auto;
      max-width: 800px;
      margin: auto;
      padding: 10px;
      border: 1px solid #dedede;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      background: #fff;        
    }
.activities-content h2 {
    text-align: left;
    padding-left: 20px;
    font-size: 1.75rem;
    color: rgb(8,5,208);
    }
.activities-content ul {
    font-size: 0.8rem;
    }
.activities-content li {
      font-size: 1rem;
    }
.activities-content img {
      display: block;
      margin: 20px auto;
      max-width: 100%;
      border: 0;
    border-radius: 10px;
    }

.sports { margin: 10px; }
.sports-content {
    display: block; 
      width: auto;
      max-width: 800px;
      margin: auto;
      padding: 10px;
      border: 1px solid #dedede;
      border-radius: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      background: #fff;        
    }
.sports-content h2 {
    text-align: left;
    padding-left: 20px;
    font-size: 1.75rem;
    color: rgb(8,5,208);
    }
.sports-content ul {
    font-size: 0.8rem;
    }
.sports-content li {
      font-size: 1rem;
    }
.sports-content img {
      display: block;
      margin: 20px auto;
      max-width: 100%;
      border: 0;
        border-radius: 10px;
    }

.about { margin: 10px; }
.about-us {
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: auto;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #dedede;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.about-us-content {
    padding: 1px 20px;
}
.about-us-content h2 {
    font-size: 24px;
    color: blue;
    margin-bottom: 10px;
}
.about-us-content p {
    margin-bottom: 15px;
}

.contact { margin: 10px;}
.contact-us {
    width: 100%;
    max-width: 800px;
    margin: auto;
    padding: auto;
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #dedede;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    justify-content: center;
    align-items: center; 
}
.contact-us-content {
    padding: 20px;
    line-height: 2em;
}
.contact-us-content i {
    color: black;
    margin-right: 10px;
    font-size: 20px;
}
.contact-us-content iframe {
    display: inline-block;
    border: none;
    overflow: hidden;
}

footer {
    position: fixed;
    width: 100%;
    padding: 10px;
    bottom: 0;
    text-align: center;
    color: white;
    background-color: #333;
}

.recent-posts {
    top: 100px;
    left: 10px;
    width: auto;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 10px;
    z-index: 1000;
}
.video-content {
    display: flex;
    justify-content: center; /* Align center horizontally */
    align-items: flex-start; /* Align top vertically */
    height: 60vh; /* Full viewport height for consistency */
    margin: 0;
    padding-top: 140px; /* Add spacing from the top if needed */
}