/*
Theme Name: Storefront Child
Theme URI: https://woocommerce.com/products/storefront/
Template: storefront
Author: Automattic
Author URI: https://woocommerce.com/
Description: Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
Tags: e-commerce,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-header,custom-menu,featured-images,full-width-template,threaded-comments,accessibility-ready,rtl-language-support,footer-widgets,sticky-post,theme-options,editor-style
Version: 4.6.1.1760260492
Updated: 2025-10-12 09:14:52

*/

      .bg-light {
        background-color: #6ec1d1;
      }
      .bg-dark {
        background-color: #34729c;
      }
      .text-light {
        color: #6ec1d1;
      }
      .text-dark {
        color: #34729c;
      }
      .border-light {
        border-color: #6ec1d1;
      }
      .border-dark {
        border-color: #34729c;
      }
      .hover\:bg-light:hover {
        background-color: #6ec1d1;
      }
      .hover\:bg-dark:hover {
        background-color: #34729c;
      }
      .hover\:text-light:hover {
        color: #6ec1d1;
      }
      .hover\:text-dark:hover {
        color: #34729c;
      }
      .from-light {
        --tw-gradient-from: #6ec1d1;
        --tw-gradient-to: rgba(110, 193, 209, 0);
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
      }
      .to-dark {
        --tw-gradient-to: #34729c;
      }
    #secondary{
      display: none;
    }
    /* cssssssss */
     .classes-heading {
      color: #333;
      font-size: 24px;
      margin-bottom: 30px;
    }
    .classes-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 20px;
      max-width: 800px;
      margin: 0 auto;
    }
    .class-box {
      width: 130px;
      height: 130px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15px;
      color: white;
      font-size: 22px;
      font-weight: bold;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      transition: transform 0.2s, box-shadow 0.2s;
    }

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

    /* Colors for each class box */
    .class-12 { background-color: #a13a0f; }
    .class-11 { background-color: #184b74; }
    .class-10 { background-color: #2b3441; }
    .class-9  { background-color: #56286a; }
    .class-8  { background-color: #d75a0c; }
    .class-7  { background-color: #0f7474; }
    .class-6  { background-color: #2f7a2e; }

    /* tabs desing */
    .tab-wrapper {
      background-color: #fff;
      border-radius: 50px;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-x: auto;
      white-space: nowrap;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      margin: 20px auto 40px;
      max-width: 500px;
    }

    .tab-button {
      padding: 10px 22px;
      border-radius: 30px;
      font-weight: 600;
      color: #333;
      background: transparent;
      margin: 0 4px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tab-button.active {
      background-color: #000;
      color: #fff;
    }

    .tab-button i {
      transition: transform 0.3s ease;
    }

    .tab-button.active i {
      transform: scale(1.1);
    }

    .subject-card {
      border-radius: 16px;
      text-align: center;
      padding: 30px 20px;
      color: #333;
      transition: all 0.3s ease;
    }

    .subject-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .maths { background-color: #dff2fb; }
    .physics { background-color: #e6e1fa; }
    .chemistry { background-color: #fff3d6; }
    .biology { background-color: #e0f8e0; }
    .english { background-color: #ffeaea; }
    .computer { background-color: #e3f5ff; }
    .economics { background-color: #f6edff; }
    .history { background-color: #fff9e6; }
  
    /*  */