/* styles.css */

/* Importing a Google Font */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');


/* ------------  Common Styles ---------- */

.centered {
  text-align: center;
}

/* Custom styling for the heading */
body {
  font-family: 'Roboto', sans-serif;
  color: #333;
  line-height: 1.6;
  background-color: #F5F5DC;   /* 0078D4 background color   */
}

footer {
  background-color: #333;
  color: white;
  padding: 20px 0;
  margin-top: 50px;
}
footer a {
  color: #ddd;
  margin: 0 10px;
}

/* base.html */

.navbar-nav .nav-item .nav-link {
  /* Menu item color and fonts */
  font-family: 'Roboto', sans-serif;
  color: #333;
}

.custom-heading {
  color: #004aad;              /* Text color previous color #db3474 */
  font-family: 'Roboto', sans-serif; /* Custom font */
  font-size: 2.5rem;          /* Font size */
  text-align: center;         /* Center alignment */
  margin-top: 0px;
  text-decoration: none;      /* Ensure no underline */
}

.custom-btn {
    width: 120px;     /* Fixed width */
    height: 40px;     /* Fixed height */
    padding: 8px 16px;     /* Padding */
    text-align: center;     /* Center text horizontally */
    line-height: 24px;     /* Center text vertically */
    white-space: nowrap;     /* Prevent text wrapping */
}

/* category related styles */
 
  .category-button {
      background-color: #af4c61;
      color: #02084b;
      border: none;
      text-align: left;
      margin-bottom: 5px;
      transition: background-color 0.3s;
      font-size: 5px; 
      padding: 5px 10px;  /* Reducing padding */
      width: 100%;        /* Ensuring full width inside the container */
      border-radius: 3px; /* Optional: round the corners a bit */
  }
  
  .category-button:hover {
      background-color: #45a049;
  }

  .material-title {
    font-family: 'Roboto', sans-serif; /* Set the font to Roboto, fallback to sans-serif */
    font-size: 30px; /* Set the font size */
    text-align: center; /* Center-align the text */
    color: rgb(88, 20, 214); /* Set text color */
    margin: 0; /* Remove default margin for better alignment */
}

/* Coming soon styles */

.coming-soon-container {
    text-align: center;
    padding: 50px 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: 50px auto;
}
h1 {
    color: #004aad;
}
.countdown {
    font-size: 24px;
    color: #ff5722;
    margin: 20px 0;
}

/*   ----------------- videos content area styles */
/* subscribe button styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
        }
        
        .modal-content {
            background-color: rgb(255,0,0); /* White background */
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888; /* Gray border */
            width: 80%; /* Could be more or less, depending on screen size */
            max-width: 500px; /* Maximum width */
            border-radius: 10px; /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
        }
      
/*   ----------------- Home styles */
        .jumbotron {
          background-image: url('https://source.unsplash.com/1600x900/?education');
          background-size: cover;
          background-position: center;
          color: white;
          padding: 20px 0;
          margin-bottom: 0;
          color: #004aad;
      }
      .jumbotron h1 {
          font-weight: 700;
          font-size: 3.5rem;
      }
      .jumbotron p {
          font-size: 1.5rem;
          color: #FF00FF;
      }
      .content-section {
          padding: 5px 0;
      }
      h3 {
          color: #004aad;
          margin-top: 20px;
          margin-bottom: 20px;
      }
      ul {
          padding-left: 20px;
      }
      li {
          margin-bottom: 10px;
      }
      .cta-buttons {
          margin: 30px 0;
      }
      .btn {
          margin-right: 10px;
          padding: 10px 20px;
          font-size: 1.1rem;
      }
      .newsletter-signup {
          display: flex;
          margin-top: 20px;
      }
      .newsletter-signup input {
          flex-grow: 1;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 4px 0 0 4px;
      }
      .newsletter-signup button {
          padding: 10px 20px;
          background-color: #007bff;
          color: white;
          border: none;
          border-radius: 0 4px 4px 0;
          cursor: pointer;
      }