* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /*border: 2px solid red;*/
        }


        body {
            font-family: 'Nunito', sans-serif;
            background-color: #fff9c4;
            color: #5d4037;
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }

     /*--------------------------------------
                Event Page      
    ----------------------------------------*/
    /*  Hero - Gallery */
.event-hero {
            background: linear-gradient(rgb(0 0 0 / 30%)), url('../image/gallery/hero2.webp');
            background-size: cover;
            background-position: center;
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 40px 20px;
        }
         @media (max-width: 768px) {
            .event-hero {
                height: 50vh; /* reduce hero height */
                padding: 30px 15px;
            }
        }
         @media (max-width: 500px) {
            .event-hero {
                height: 45vh;
                padding: 20px 10px;
            }
        }
           @media (max-width: 320px) {
            .event-hero {
                height: 40vh; /* compact */
                padding: 15px 8px;
            }
        }

    .page-container {
            display: flex;
            min-height: 100vh;
            max-width: 100%;
            margin: 0 auto;
        }

        /* Left Sidebar Styles */
        .left-sidebar {
            position: sticky;
            top: 0;
            width: 180px;
            height: 100vh;
            padding: 20px 10px;
            background: linear-gradient(to bottom, #fff75c, #8ab5ffdb);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .encouragement-box {
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 140px;
        }

        .encouragement-box i {
            font-size: 2rem;
            margin-bottom: 10px;
            display: block;
        }

        .encouragement-box p {
            font-size: 1rem;
            color: #e91e63;
            font-weight: bold;
        }

        /* Right Sidebar Styles */
        .right-sidebar {
            position: sticky;
            top: 0;
            width: 180px;
            height: 100vh;
            padding: 20px 10px;
            background: linear-gradient(to bottom, #fff75c, #8ab5ffdb);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: -3px 0 10px rgba(0, 0, 0, 0.1);
            z-index: 10;
        }

        .info-box {
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: rgba(255, 255, 255, 0.9);
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            width: 140px;
        }

        .info-box i {
            font-size: 2rem;
            margin-bottom: 10px;
            display: block;
        }

        .info-box p {
            font-size: 1rem;
            color: #5cabff;
            font-weight: bold;
        }

/* =============================== */
/* Responsive Adjustments */
/* =============================== */

/* Tablets (≤ 992px) */
@media (max-width: 992px) {
    .left-sidebar, .right-sidebar {
        width: 120px;
        padding: 15px 5px;
    }

    .encouragement-box, .info-box {
        width: 100px;
        padding: 10px;
    }

    .encouragement-box i, .info-box i {
        font-size: 1.5rem;
    }

    .encouragement-box p, .info-box p {
        font-size: 0.9rem;
    }
}

/* Mobiles (≤ 768px) */
@media (max-width: 768px) {
    .left-sidebar, .right-sidebar {
        display: none; /* Hide both sidebars */
    }

    .page-container {
        flex-direction: column; /* Stack content vertically if needed */
        max-width: 100%;
        padding: 0 10px;
    }
}

/* Small Phones (≤ 480px) */
@media (max-width: 480px) {
    .page-container {
        padding: 0 5px;
    }
}

/*--- Event Section---*/

        .event-subtitle {
            font-size: 1.2rem;
            color: #2c2929ff;
            text-align:center;
            margin-bottom:50px;
        }
        .event-container {
            max-width: 70%;
            margin: 50px auto;
        }
        .events-container {
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .event-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            border: 2px gray solid;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease;
        }

        .event-card:hover {
            transform: translateY(-5px);
        }

        .event-header {
            padding: 25px;
            border-bottom: 2px solid rgb(24 18 18 / 80%);
            font-weight:bold;
            background: #ade1e1;

        }

        .event-title {
            font-size: 2rem;
            margin-bottom: 10px;
            color: #372780ff;
            font-weight:bold;
        }

        .event-dates {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1.1rem;
            color: #282424ff;
        }

        .event-media {
            padding: 20px;
            background: black;
        }

        .media-scroller {
            display: flex;
            gap: 15px;
            overflow-x: auto;
            padding: 10px 5px;
            scroll-behavior: smooth;
            scrollbar-width: thin;
            scrollbar-color: #ffcc00 rgba(255, 255, 255, 0.1);
        }

        .media-scroller::-webkit-scrollbar {
            height: 8px;
        }

        .media-scroller::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }

        .media-scroller::-webkit-scrollbar-thumb {
            background: #ffcc00;
            border-radius: 10px;
        }

        .media-item {
            flex: 0 0 auto;
            width: 450px;
            height: 500px;
            border-radius: 10px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
             margin: 0 auto;
        }

        .media-item img, .media-item video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        

        .event-description {
            padding: 25px;
            line-height: 1.8;
            color: #1d1919ff;
            font-size:18px;
            background: #fbeddb;
        }

        .media-controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 15px;
        }

        .media-btn {
            background: rgb(24 67 193);
            border: none;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .media-btn:hover {
            background: rgba(249, 249, 249, 0.3);
            transform: scale(1.1);
        }

      /* Medium Mobiles */
@media (max-width: 768px) {
    .event-container {
        max-width: 95%;
        margin: 30px auto;
    }

    .event-title {
        font-size: 1.4rem;
    }

    .event-subtitle {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .media-item {
        width: 100%;
        max-width: 340px;
        height: 220px;
    }

    .event-description {
        font-size: 16px;
        padding: 20px;
    }
}

/* Small Phones (e.g., 375px–480px) */
@media (max-width: 480px) {
    .event-container {
        max-width: 100%;
        margin: 20px auto;
        padding: 0 10px;
    }

    .event-title {
        font-size: 1.2rem;
        text-align: center;
    }

    .event-dates {
        font-size: 0.9rem;
        justify-content: center;
    }

    .media-item {
        width: 100%;
        max-width: 280px;
        height: 180px;
        margin: 0 auto;
    }

    .event-description {
        font-size: 15px;
        line-height: 1.6;
        text-align: justify;
    }

    .media-controls {
        gap: 10px;
    }

    .media-btn {
        width: 35px;
        height: 35px;
    }
}   

/*=========================================
            Gallery Page    
===========================================*/
 .gallery-hero {
            background: linear-gradient(rgb(0 0 0 / 30%)), url('../image/gallery/hero6.webp');
            background-size: cover;
            background-position: center;
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 40px 20px;
        }
         @media (max-width: 768px) {
            .gallery-hero {
                height: 50vh; /* reduce hero height */
                padding: 30px 15px;
            }
        }
         @media (max-width: 500px) {
            .gallery-hero {
                height: 45vh;
                padding: 20px 10px;
            }
        }
           @media (max-width: 320px) {
            .gallery-hero {
                height: 40vh; /* compact */
                padding: 15px 8px;
            }
        }
.category-filter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
            margin: 25px 0 15px;
            padding: 0 15px;
        }
        
        .category-btn {
            padding: 12px 25px;
            background-color: rgb(145 169 224);
            border: 2px solid rgb(41 70 161 / 81%);
            border-radius: 30px;
            color: black;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1rem;
        }
        
        .category-btn:hover {
            background-color: rgba(52, 132, 237, 0.25);
            transform: translateY(-2px);
        }
        
        .category-btn.active {
            background-color: white;
            color: black;
            border-color: #9E9E9E;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .gallery{
             position: relative;
            border-radius: 20px;
            padding: 20px;
        }
        .gallery-container {
            display: flex;
            min-height: 600px;
        }
        
        .thumbnail-sidebar {
            flex: 0 0 400px;
            
            padding-right: 20px;
            overflow-y: auto;
            max-height: 90vh;
            border-right: 1px solid #e9ecef;
        }
        
        .thumbnail-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .thumbnail {
            width: 100%;
            aspect-ratio: 1;
            object-fit: cover;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
        }
        
        .thumbnail:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .modal-side {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            /*justify-content: center;*/
            padding: 30px;
            position: relative;
            background: black;
            border:1px black solid;
        }
        
        .modal-content1 {
            text-align: center;
            width: 100%;
        }
        
        #modalImage {
            width:100%; /* stretches full width of modal */
            max-width: 700px ; /* increase width limit */
            max-height: 450px;
            border-radius: 12px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            object-fit: contain;
        }
        
        .image-info {
            margin-top: 25px;
            text-align: center;
        }
        
        .image-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 8px;
            color: #e3e7ecff;
        }
        
        .image-category {
            display: inline-block;
            padding: 6px 18px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border-radius: 20px;
            font-size: 0.95rem;
            font-weight: 500;
        }
        
        .image-counter {
            margin-top: 15px;
            color: #6c757d;
            font-weight: 500;
        }
        
        .nav-buttons {
            display: flex;
            gap: 15px;
            margin-top: 25px;
            justify-content: center;
        }
        
        .icon-btn {
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            justify-content: center;
            font-size: 16px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        }

        .icon-btn i {
            margin: 0;
        }

        .icon-btn:hover {
            transform: scale(1.1);
        }

        .icon-btn:disabled {
            background: #ced4da;
            transform: none;
        }
        .gall-nav-btn {
            padding: 5px 20px;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            border: none;
            border-radius: 30px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .gall-nav-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .gall-nav-btn:disabled {
            background: #ced4da;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
       
        .search-box {
            margin-bottom: 15px;
            position: relative;
        }
        
        .search-box input {
            width: 100%;
            padding: 12px 20px;
            padding-left: 45px;
            border: 1px solid #ddd;
            border-radius: 30px;
            font-size: 1rem;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .search-box i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #6c757d;
        }
        
       
        /* ============================= */
/* 📱 RESPONSIVE ADJUSTMENTS */
/* ============================= */


/* Tablet screens (992px and below) */
@media (max-width: 992px) {
  .gallery-container {
    flex-direction: column;
    align-items: center;
  }

  .thumbnail-sidebar {
    flex: none;
    width: 100%;
    max-height: 300px;
    border-right: none;
    border-bottom: 1px solid #e9ecef;
    padding-right: 0;
  }

  .thumbnail-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .modal-side {
     margin-top:15px;
  }
}

/* Medium tablets / large phones (768px and below) */
@media (max-width: 768px) {
  .thumbnail-grid {
    grid-template-columns: repeat(6, 1fr);
  }

  #modalImage {
    max-height: 350px;
  }

  .category-btn {
    padding: 10px 18px;
    font-size: 0.9rem;
  }

  .image-title {
    font-size: 1.4rem;
  }
  .modal-side {
    margin-top:15px;
  }
}

/* Small phones (576px and below) */
@media (max-width: 576px) {
  .section{
    padding: 0;
  }
  .gallery{
    padding: 0;
  }
  .thumbnail-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  .category-filter {
    gap: 8px;
  }

  .category-btn {
    padding: 8px 14px;
    font-size: 0.85rem;
  }

  .nav-buttons {
     margin-top: 10px;
    gap: 10px;
  }

  .gall-nav-btn {
    font-size:10px;
   
    justify-content: center;
    align-items:center;
  }

  .modal-side {
    margin: 15px 0;
    padding:10px;
   
  }
  .image-info{
    margin-top:10px;
  }

  #modalImage {
    max-height: 280px;
  }
}

/* Extra small screens (375px and below) */
@media (max-width: 375px) {
  .section{
    padding: 0;
  }
 .gallery{
  padding:0;
 }
  .thumbnail-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  .category-btn {
    font-size: 0.8rem;
    padding: 6px 10px;
  }

  .image-title {
    font-size: 1.2rem;
  }

  #modalImage {
    max-height: 240px;
  }
}
    /* Counter Section */
    /* Fun Facts / Counter Section */
.fun-facts {
    background: #b4c5eb;
  padding: 60px 20px;
  position: relative;
  overflow: hidden;
}
.fact-box {
  background: #fff;
  border-radius: 16px;
  padding: 30px 20px;
  
  margin: 10px; /* safe margin inside */
}
.fun-facts .counter {
  font-size: 3rem;
  font-weight: 800;
  color: #ff7043; /* warm orange tone */
  margin-bottom: 10px;
  font-family: 'Fredoka One', cursive;
  transition: all 0.3s ease;
}

.fun-facts .counter:hover {
  transform: scale(1.15);
  color: #ffb300; /* golden yellow on hover */
  text-shadow: 2px 2px 6px rgba(0,0,0,0.1);
}

.fun-facts p {
  font-size: 1.2rem;
  font-weight: 600;
  color: #444;
  margin: 0;
  font-family: 'Nunito', sans-serif;
}

/* Add a subtle card style for each column */
.fun-facts .col-md-3 {
  border-radius: 16px;
  padding: 30px 10px;
  transition: transform 0.3s ease;
}

.fun-facts .col-md-3:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Responsive adjustments */
/* ===================================== */

/* Tablet view (992px and below) */
@media (max-width: 992px) {
  .fun-facts {
    padding: 50px 15px;
  }

  .fun-facts .counter {
    font-size: 2.5rem;
  }

  .fun-facts p {
    font-size: 1.1rem;
  }

  .fun-facts .col-md-3 {
    margin-bottom: 25px;
  }
}

/* Mobile view (768px and below) */
@media (max-width: 768px) {
  .fun-facts {
    padding: 40px 10px;
  }

  .fun-facts .counter {
    font-size: 2rem;
  }

  .fun-facts p {
    font-size: 1rem;
  }

  .fact-box {
    padding: 20px 15px;
  }

  .fun-facts .col-md-3 {
    width: 100%;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
}

/* Small phones (480px and below) */
@media (max-width: 480px) {
  .fun-facts {
    padding: 30px 8px;
  }

  .fun-facts .counter {
    font-size: 1.8rem;
  }

  .fun-facts p {
    font-size: 0.95rem;
  }

  .fact-box {
    padding: 18px 12px;
    margin: 10px 0;
  }
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
  .fun-facts {
    padding: 25px 5px;
  }

  .fun-facts .counter {
    font-size: 1.6rem;
  }

  .fun-facts p {
    font-size: 0.85rem;
  }

  .fact-box {
    padding: 15px 10px;
  }
}
/*-- Cartoon images--*/
        .bg-image-g {
            position: absolute;
            width: 150px;
            height: 150px;
            }

            /* lion - bounce up/down */
            .lion {
            top: 200px;
            left: 0px;
            animation: bounceLR 2s infinite ease-in-out;
            position: absolute;
            }
            .bird {
            top: 230px;
            left: 50px;
            animation: bounceLR 2s infinite ease-in-out;
            position: absolute;
            }

            /* Left-Right Bounce Animation */
            @keyframes bounceLR {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(20px); } /* Move right 20px */
            }

            /* elep - move up/down */
            .elep {
            top: -30px;
            right: 40px;
            animation: moveUpDown 3s infinite ease-in-out;
            
            }
            /* Smooth up-down motion */
            @keyframes moveUpDown {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(15px); }
            }

            
/* Mobile view (1025px and below) */
@media (max-width: 1025px) {
  .bg-image-g {
    width: 100px;
    height: 100px;
  }
  .bird {
    top: 100px;
    left: 30px;
  }
}

      /* Mobile view (768px and below) */
@media (max-width: 768px) {
  .bg-image-g {
    width: 90px;
    height: 90px;
  }

  .lion {
    top: 200px;
    left: 5px;
  }

  .bird {
    top: 0px;
    left: 80px;
  }

  .elep {
    top: -10px;
    right: 20px;
  }
}

/* Small phones (480px and below) */
@media (max-width: 480px) {
  .bg-image-g {
    width: 70px;
    height: 70px;
  }

  .lion {
    top: 40px;
    left: 10px;
  }

  .bird {
    top: 180px;
    left: 0px;
  }

  .elep {
    top: 0;
    right: 10px;
  }
}

/* Very small screens (375px and below) */
@media (max-width: 375px) {
  .bg-image-g {
    width: 60px;
    height: 60px;
  }

  .lion {
    top: 50px;
    left: 5px;
  }

  .bird {
    top: 330px;
    left: 100px;
  }

  .elep {
    top: 10px;
    right: 5px;
  }
}      
/*========================================
      Academics Page
=========================================*/

 /* Hero Section */

.academics-hero {
            background: linear-gradient(rgb(0 0 0 / 30%)), url('../image/gallery/hero4.webp');
            background-size: cover;
            background-position: center;
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 40px 20px;
        }
         @media (max-width: 768px) {
            .academics-hero {
                height: 50vh; /* reduce hero height */
                padding: 30px 15px;
            }
        }
         @media (max-width: 500px) {
            .academics-hero {
                height: 45vh;
                padding: 20px 10px;
            }
        }
           @media (max-width: 320px) {
            .academics-hero {
                height: 40vh; /* compact */
                padding: 15px 8px;
            }
        }
    /* -------Academics Page------------*/

        .academics-container {
            max-width: 90%;
            margin: 0 auto;
            padding-top: 50px;
            padding-bottom: 80px;
        }   
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .tab-btn {
            padding: 15px 30px;
            margin: 0 10px;
            background-color: #fff;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            color: #0f2a73;
            display: flex;
            align-items: center;
        }

        .tab-btn i {
            margin-right: 10px;
            font-size: 1.2rem;
        }

        .tab-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
        }

        .tab-btn.active {
            background-color: #e51616;
            color: white;
        }

        .tab-content {
            display: none;
            animation: fadeIntab 0.5s ease-in;
        }

        .tab-content.active {
            display: block;
        }

        .class-description {

            padding: 30px;
            border-radius: 10px;
            border: 2px dotted #222;
            margin-bottom: 30px;
            background-color: #a7e3f37d;
            
        }

        .class-description h2 {
            color: #1412c8;
            margin-bottom: 15px;
            font-size: 1.8rem;
            font-family:Roboto Slab;

        }

        .class-description p {
            font-size: 1.1rem;
            line-height: 1.8;
            margin-bottom: 15px;
            color: black;
        }

 /* Activities Container */
        .activities-container-acad {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 60px;
              max-width:1300px;
          
            margin: 0 auto;
             
        }
        
        .activities-content {
            flex: 1;
            min-width: 350px;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        
        .activities-content h3 {
            font-family:Roboto Slab;
            font-size: 1.6rem;
            color: #4a69bd;
            margin-bottom: 20px;
            border-bottom: 2px solid #ffd54f;
            padding-bottom: 10px;
        }
        
        .activities-content ul {
            list-style: none;
            padding-left: 0;
            color: #444;
            line-height: 1.6;
        }
        
        .activities-content li {
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
        }
        
        .activities-content li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #60c52dff;
            font-weight: bold;
        }
        
       /* Flip Card */
    .flip-card {
      background-color: transparent;
      width: 600px;
      height: 350px;
      perspective: 1000px;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.8s;
      transform-style: preserve-3d;
    }

    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }

    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 15px;
      overflow: hidden;
    }

    .flip-card-front img, .flip-card-back img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

   .flip-card-front h3 {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        background: rgba(0, 0, 0, 0.4);
        padding: 10px 20px;
        font-size: 1.6rem;
        border-radius: 10px;
        text-align: center;
        }

    .flip-card-back {
      transform: rotateY(180deg);
    }
     @keyframes fadeIntab {
            from { opacity: 0; }
            to { opacity: 1; }
        }


/* 1024px Breakpoint - Tablet Landscape & Small Laptops */
@media (max-width: 1024px) {
    .academics-container {
        max-width: 95%;
        padding-top: 30px;
        padding-bottom: 50px;
    }
    
    .tabs {
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .tab-btn {
        padding: 12px 20px;
         justify-content: center;
        text-align: center;
        margin: 0 4px;
        font-size: 1rem;
        min-width: 140px;
        max-width: 180px;
        flex: 0 1 calc(33.333% - 20px);
    }
    
    .tab-btn i {
        margin-right: 6px;
        font-size: 1.1rem;
    }
    
    .class-description {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .class-description h2 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }
    
    .class-description p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .activities-container-acad {
        gap: 25px;
        margin-bottom: 40px;
    }
    
    .activities-content {
        min-width: 280px;
        padding: 20px;
    }
    
    .activities-content h3 {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }
    
    .activities-content li {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }
    
    .flip-card {
        max-width: 500px;
        height: 280px;
    }
    
    .flip-card-front h3 {
        font-size: 1.3rem;
        padding: 8px 16px;
        width: 90%;
    }
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .academics-container {
        max-width: 95%;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    
    .tabs {
        flex-direction: column;
        
        align-items: center;
        gap: 8px;
    }
    
    .tab-btn {
        width: 100%;
        max-width: 280px;
        margin: 0;
        padding: 10px 15px;
        font-size: 0.95rem;
    }
    
    .class-description {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .class-description h2 {
        font-size: 1.3rem;
    }
    
    .class-description p {
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    .activities-container-acad {
        gap: 20px;
        margin-bottom: 30px;
    }
    
    .activities-content {
        min-width: 100%;
        padding: 15px;
        margin: 0 auto;
    }
    
    .activities-content h3 {
        font-size: 1.3rem;
    }
    
    .flip-card {
        margin:0 auto;
        height: 250px;
    }
    
    .flip-card-front h3 {
        font-size: 1.2rem;
        padding: 6px 12px;
    }
}

@media (max-width: 480px) {
    .academics-container {
        padding-top: 15px;
        padding-bottom: 20px;
    }
    
    .tab-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
        min-width: 120px;
    }
    
    .tab-btn i {
        margin-right: 5px;
        font-size: 1rem;
    }
    
    .class-description {
        padding: 12px;
    }
    
    .class-description h2 {
        font-size: 1.2rem;
    }
    
    .class-description p {
        font-size: 0.9rem;
    }
    
    .activities-content {
        padding: 12px;
    }
    
    .activities-content h3 {
        font-size: 1.2rem;
    }
    
    .activities-content li {
        font-size: 0.9rem;
    }
    
    .flip-card {
        height: 200px;
    }
    
    .flip-card-front h3 {
        font-size: 1.1rem;
        padding: 5px 10px;
    }
}

/* Touch device improvements */
@media (hover: none) {
    .flip-card:hover .flip-card-inner {
        transform: none;
    }
    
    /* Alternative for touch devices - tap to flip */
    .flip-card.flip-on-touch .flip-card-inner {
        transform: rotateY(180deg);
    }
    
    .tab-btn:hover {
        transform: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
}