.programme-row1 a:hover {
            /* text-decoration: underline; */
            color: blue; /* Optional: Reinforces blue on hover */
        }
        
          /*activities section */
          /* Pastel colors */
          .lavender {
            background-color: #f59feb;
          }
          .powder-blue {
            background-color: #B0E0E6; 
          }

          /* Card styling */
          .d-flex {
            gap: 20px; /* gives clean spacing between cards */
          }
          .activity-card {
            width: 150px;
            height: 150px;
            margin: 10px;
            padding: 15px;
            border-radius: 15px;
            box-shadow: 0 14px 18px rgba(0,0,0,0.4);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
          }

          .activity-card:nth-child(even) {
            background-color: #FEE2E2; /* soft pink */
          }

          .activity-card:nth-child(odd) {
            background-color: #E0F2F1; /* soft mint */
          }

          .activity-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.2);
          }

          /* Sub-options */
          .sub-option-btn {
            margin: 5px;
          }

          /* Modal Styling */
          .modal-content {
            border-radius: 15px;
          }

          /* Print styles */
          @media print {
            body * {
              visibility: hidden;
            }
            #eventsTable, #eventsTable * {
              visibility: visible;
            }
            #eventsTable {
              position: absolute;
              left: 0;
              top: 0;
            }
          }

      /* Modal styles */
      .pdf-modal {
        display: none;
        position: fixed;
        z-index: 1500;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
      }

      .pdf-modal-content {
        position: relative;
        width: 90%;
        height: 90%;
        margin: auto;
        background: white;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      #generalpdfViewer {
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
      }
      #achievementpdfViewer {
        flex: 1;
        width: 100%;
        height: 100%;
        border: none;
      }


      .pdf-modal-content iframe {
        width: 100%;
        height: 500px;
        border: none;
        margin-bottom: 20px;
      }

      .pdf-close {
        position: absolute;
        top: 10px;
        right: 20px;
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
      }

      .pdf-close:hover {
        color: black;
      }

      .download-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #191449;
        color: white;
        text-decoration: none;
        border-radius: 5px;
      }

      .download-button:hover {
        background-color: #b80924;
      }

      /*achivements section*/

      /* Achievements Section */
          details summary {
          position: relative;
          padding-left: 25px; /* Space for arrow */
        }

        details summary::before {
          content: '⯈';
          position: absolute;
          left: 0;
          top: 4px;
          transition: transform 0.2s ease;
          font-size: 16px;
          line-height: 1;
        }

        details[open] summary::before {
          content: '⯆';
        }

      #achievements {
        padding: 40px 20px;
        background-color: #f9f9f9;
      }

      #achievements h2 {
        color: #b80924;
      }

      details {
        margin-bottom: 20px;
        background: #fff;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      details summary {
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        color: #191449;
      }

      .achievement-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
      }

      .achievement-table th,
      .achievement-table td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
      }

      .achievement-table th {
        background-color: #191449;
        color: white;
      }

      .achievement-photo {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 20%;
      }

      .table-actions {
        margin-top: 10px;
      }

      .achievement-download-btn,
      .achievement-print-btn,
      .view-pdf-btn {
        padding: 8px 14px;
        margin-right: 8px;
        border: none;
        background-color: #2c5aa0;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
      }

      .achievement-download-btn:hover,
      .achievement-print-btn:hover,
      .view-pdf-btn:hover {
        background-color: #1e3e7a;
      }


      .achievement-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
      }

      .achievement-table th,
      .achievement-table td {
        border: 1px solid #ccc;
        padding: 10px;
        text-align: left;
      }

      .achievement-table th {
        background-color: #191449;
        color: white;
      }

      .achievement-photo {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 20%;
      }

      .table-actions {
        margin-top: 10px;
      }

      .achievement-download-btn,
      .achievement-print-btn,
      .view-pdf-btn {
        padding: 8px 14px;
        margin-right: 8px;
        border: none;
        background-color: #2c5aa0;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        font-size: 14px;
      }

      .achievement-download-btn:hover,
      .achievement-print-btn:hover,
      .view-pdf-btn:hover {
        background-color: #1e3e7a;
      }

        .best-practices-list li {
      list-style: none;
      margin: 10px 0;
    }

    .best-practices-list a {
      text-decoration: none;
      color: #9FCFE1;
      font-weight: bold;
      transition: color 0.3s;
    }

    .best-practices-list a:hover {
      color: #b80924;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 999;
      left: 0; top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.6);
    }

    .modal-content2 {
      background-color: #fff;
      margin: 8% auto ;
      padding: 20px;
      border-radius: 10px;
      width: 80%;
      position: relative;
      height:auto;
       display: flex;
      flex-direction: column;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }
    #pdfViewer {
      height: 75vh; /* Taller PDF display */
    }
    #achievementpdfViewer {
      height: 75vh; /* Taller PDF display */
    }

    .close {
      position: absolute;
      top: 15px; right: 20px;
      font-size: 24px;
      font-weight: bold;
      cursor: pointer;
    }

    .modal-actions {
      margin-top: 15px;
      text-align: right;
    }

    .btn {
      background-color: #9FCFE1;
      color: #fff;
      padding: 8px 16px;
      text-decoration: none;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 10px;
    }

    .btn:hover {
      background-color: #b80924;
    }
    @media (max-width: 600px) {
      .modal-content {
        width: 95%;
        padding: 10px;
      }

      .btn {
        padding: 6px 12px;
        font-size: 14px;
      }

      .close {
        font-size: 22px;
        top: 10px;
        right: 15px;
      }

      #pdfViewer {
        height: 60vh;
      }
      #achievementpdfViewer {
        height: 60vh;
      }
    }

        /*----------------------------*/
        /*vision mission section*/
        .vision-mission-container {
          display: flex;
          justify-content: center;
          align-items: stretch;
          /* make cards same height */
          gap: 40px;
          padding: 15px 20px;
          background-color: #fff;
          /* light lavender */
        }

        .card {
          background-color: white;
          width: 500px;
          height: 200px;
          /* fixed height */
          padding: 25px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          position: relative;
          display: flex;
          flex-direction: column;

        }

        .card h2 {
          font-size: 20px;
          margin-bottom: 10px;
          color: #f2dc9b;
        }

        .card p,
        .card ul {
          font-size: 18px;
          color: #191441;
        }

        .card::before,
        .card::after {
          content: "";
          position: absolute;
          width: 60px;
          height: 60px;
          border: 3px solid #191441;
        }

        .vision::before {
          top: -10px;
          left: -10px;
          border-bottom: none;
          border-right: none;
        }

        .vision::after {
          bottom: -10px;
          left: -10px;
          border-top: none;
          border-right: none;
        }

        .mission::before {
          top: -10px;
          right: -10px;
          border-bottom: none;
          border-left: none;
        }

        .mission::after {
          bottom: -10px;
          right: -10px;
          border-top: none;
          border-left: none;
        }
        ul.bullet-align {
       list-style: none;
       padding: 0;
       }

        ul.bullet-align li {
        margin-bottom: 16px;
       }

        ul.bullet-align li::before {
          content: "✧";
         color: #000;
         display: inline-block;
        width: 20px;
       }

         ul.bullet-align li {
         text-indent: -15px;
        padding-left: 35px;
        }
  
          .timeline-container {
            padding: 40px 10px;
            border-radius: 12px;
            max-width: 1200px;
            margin: 40px auto;
            box-shadow: 0 0 20px rgba(0,0,0,0.05);
          }

          .timeline-nav {
            display: flex;
            flex-direction: column;
            min-height:500px ;
            gap: 25px;
            /* border-left: 3px solid #9FCFE1; */
            position: sticky;
            top: 120px;
            
            
          }

          .timeline-nav span {
              /* font-weight: bold; */
            color: #000;
            position: relative;
            cursor: pointer;
            transition: color 0.3s ease;
            
          }


          .timeline-nav span.active {
            color: #1F386B;
            font-size: 20px;
          }

          .timeline-nav span.active::before {
            background: #f2dc9b;
          }

          /* ✅ Animated underline effect using ::after */
          .timeline-nav span::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0%;
            height: 2px;
            background-color: #f2dc9b;
            transition: width 0.3s ease;
          }

          .timeline-nav span:hover::after {
            width: 100%;
          }

          .programme-row1 {
            display: none;
            background: #ffffff;
            padding: 30px;
            border-radius: 10px;
            margin-bottom: 30px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            animation: fadeIn 0.3s ease;
          }

          .programme-row1.active {
            display: block;
          }

          @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
          }

          @media (max-width: 768px) {
            .timeline-nav {
              flex-direction: row;
              flex-wrap: wrap;
              border-left: none;
              border-top: 3px solid #9FCFE1;
              padding-left: 0;
              padding-top: 20px;
              justify-content: center;
            }
            .timeline-nav span::before {
              left: 50%;
              top: -12px;
              transform: translateX(-50%);
            }
            .timeline-nav span::after {
              left: 50%;
              transform: translateX(-50%);
            }
          }



            h1 {
              text-align: center;
              font-size: 36px;
              color: #1f2a40;
              margin-bottom: 50px;
            }

            .glass-container {
              display: flex;
              flex-direction: column;
              gap: 40px;
              max-width: 900px;
              margin: auto;
              
            }

            .glass-ribbon {
              display: flex;
              align-items: flex-start;
              background: whitesmoke;
              backdrop-filter: blur(12px);
              border-left: 10px solid;
              border-radius: 16px;
              padding: 25px 30px;
              box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
              position: relative;
              overflow: hidden;
              transition: transform 0.3s ease, box-shadow 0.3s ease;
              
              
            }

            .glass-ribbon .icon {
              font-size: 38px;
              margin-right: 20px;
              transition: transform 0.3s ease, color 0.3s ease;
            }

            .glass-ribbon h2 {
              margin: 0 0 10px;
              font-size: 22px;
              position: relative;
              left: 0;
              transition: left 0.4s ease, opacity 0.4s ease;
            }

            .glass-ribbon p {
              margin: 0;
              font-size: 18px;
              color: #333;
              line-height: 1.6;
              opacity: 0.95;
              transform: translateY(0);
              transition: transform 0.4s ease, opacity 0.4s ease;
            }

            .glass-ribbon:hover {
              transform: translateY(-6px);
              box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
            }

            .glass-ribbon:hover .icon {
              transform: scale(1.25) rotate(10deg);
              animation: pulse 0.6s ease;
            }

            .glass-ribbon:hover h2 {
              left: 8px;
              opacity: 1;
            }

            .glass-ribbon:hover p {
              transform: translateY(-5px);
              opacity: 1;
            }

            @keyframes pulse {
              0% { transform: scale(1); }
              50% { transform: scale(1.25) rotate(10deg); }
              100% { transform: scale(1); }
            }

            /* Ribbon Themes */
            .vision {
              border-color: #2e86de;
              box-shadow: inset 3px 0 0 #2e86de;
            }

            .vision .icon,
            .vision h2 {
              color: #333;
            }

            .mission {
              border-color: #f2dc9b;
              box-shadow: inset 3px 0 0 #ff4081;
            }

            .mission .icon,
            .mission h2 {
              color: #f2dc9b;
            }

            @media (max-width: 768px) {
              .glass-ribbon {
                flex-direction: column;
                align-items: flex-start;
                padding: 20px;
              }

              .glass-ribbon .icon {
                margin-bottom: 10px;
              }
            }