/* Committee Cards */

:root {
            --primary-purple: #6a1b9a;
            --secondary-purple: #9c27b0;
            --accent-pink: #e91e63;
            --light-purple: #f3e5f5;
            --dark-gray: #333333;
            --light-gray: #f8f9fa;
            --white: #ffffff;
        }

        .committee-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .committee-card {
            background: linear-gradient(145deg, var(--white), #f8f8f8);
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
            border-top: 4px solid var(--secondary-purple);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .committee-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(to right, var(--accent-pink), var(--secondary-purple));
        }

        .committee-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        }

        .committee-card h4 {
            color: var(--primary-purple);
            margin-bottom: 1.2rem;
            font-size: 1.3rem;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .committee-card h4 i {
            color: var(--secondary-purple);
        }

        /* Committee Categories */
        .committee-category {
            margin-bottom: 2.5rem;
        }

        .committee-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 1.5rem;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--light-purple);
        }

        .committee-icon-small {
            font-size: 2rem;
            color: var(--accent-pink);
            background-color: var(--light-purple);
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
		
		
		  .classes-showcase {
           
            width: 100%;
           background: linear-gradient(115deg, #e5f0fa 0%, #fef9e7 60%, #e6f3e8 100%);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 4rem 2rem 4rem 2rem;
            box-shadow: 0 30px 50px -20px rgba(0, 30, 50, 0.35),
                        0 0 0 2px rgba(255, 250, 240, 0.6) inset;
            padding: 3rem 2.5rem;
            border: 1px solid rgba(255, 245, 235, 0.8);
        }

       

        .sub {
            font-size: 1.3rem;
            color: #2c4a5e;
            margin-bottom: 3rem;
            padding-left: 2.3rem;
            font-weight: 400;
            background: linear-gradient(to right, #f5e9d8, transparent);
            padding: 0.8rem 2rem;
            border-radius: 60px;
            display: inline-block;
        }

        /* 3‑column, 2‑row grid */
        .class-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4rem 3rem;
            margin: 2rem 0 1rem;
        }

        /* class card – vertical stack: circle + title */
        .class-item {
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(4px);
            border-radius: 3rem 1.2rem 3rem 1.2rem;
            padding: 2rem 1rem 1.8rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            box-shadow: 0 16px 24px -12px rgba(20, 45, 60, 0.25),
                        0 0 0 1.5px rgba(255, 250, 230, 0.7) inset;
            transition: transform 0.2s ease, box-shadow 0.25s;
            border: 1px solid rgba(255, 255, 240, 0.8);
        }

        .class-item:hover {
            transform: translateY(-8px);
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 28px 32px -16px #1e4b5e;
        }

        /* ---------- ROUND CIRCLE ICON (for each class) ---------- */
        .ccircle-icon {
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: linear-gradient(145deg, #f9cb8b, #f0a28e, #b3d6d0);
            background-size: 200% 200%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            box-shadow: 0 12px 18px -8px rgba(0,0,0,0.2), 0 0 0 5px rgba(255,255,255,0.6) inset;
            font-size: 2.8rem;
            font-weight: 600;
            color: white;
            text-shadow: 3px 3px 0 rgba(0, 40, 50, 0.2);
            transition: 0.25s;
        }

        /* each circle gets a unique tint – still round, but individual color feel */
        .class-item:nth-child(1) .ccircle-icon {
            background: linear-gradient(135deg, #f9ac67, #dd6b4f);
        }
        .class-item:nth-child(2) .ccircle-icon {
            background: linear-gradient(135deg, #77b5b5, #439090);
        }
        .class-item:nth-child(3) .ccircle-icon {
            background: linear-gradient(135deg, #d9a57c, #b8704a);
        }
        .class-item:nth-child(4) .ccircle-icon {
            background: linear-gradient(135deg, #9fb7d4, #5078a0);
        }
        .class-item:nth-child(5) .ccircle-icon {
            background: linear-gradient(135deg, #c49dae, #965a74);
        }
        .class-item:nth-child(6) .ccircle-icon {
            background: linear-gradient(135deg, #93c47d, #3e7a53);
        }

        /* text inside circle – class number */
        .ccircle-icon span {
            font-size: 22px;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.95);
            background: rgba(0, 0, 0, 0.1);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(2px);
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
        }

        /* class title (below circle) */
        .class-title {
            font-size: 20px;
            font-weight: 600;
            line-height: 1.3;
            color: #15323f;
            background: rgba(245, 235, 210, 0.5);
            padding: 0.5rem 1.2rem;
            border-radius: 50px;
            width: 100%;
            border: 1px solid rgba(255, 240, 200, 0.9);
            backdrop-filter: blur(2px);
        }
		
		.container-bas {
  max-width: 1135px;
   margin: 0;
            padding: 0;
            box-sizing: border-box;
  
}

        /* optional small grade descriptor */
        .class-desc {
            font-size: 18px;
            color: #2d5b6e;
            margin-top: 0.4rem;
            font-weight: 400;
            background: rgba(255, 255, 255, 0.4);
            padding: 0.2rem 1rem;
            border-radius: 40px;
        }

        /* make grid fully responsive: on smaller screens switch to 2 columns then 1 */
        @media (max-width: 750px) {
            .class-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
          
        }

        @media (max-width: 500px) {
            .class-grid {
                grid-template-columns: 1fr;
            }
            .classes-showcase {
                padding: 2rem 1.2rem;
            }
            .circle-icon {
                width: 90px;
                height: 90px;
            }
            .circle-icon span {
                width: 55px;
                height: 55px;
                font-size: 1.8rem;
            }
        }

        /* additional nice touch: slight background variation on hover for circle */
        .class-item:hover .ccircle-icon {
            transform: scale(1.02) rotate(2deg);
            box-shadow: 0 18px 24px -10px #253b44;
        }

        /* decoration line */
        .footer-note {
            margin-top: 3rem;
            text-align: center;
            color: #1e4b5c;
            font-size: 18px;
            border-top: 2px dashed #c1a58b;
            padding-top: 1.5rem;
            background: rgba(250, 240, 225, 0.5);
            border-radius: 60px;
            padding: 1rem 2rem;
        }
		
		 .grade-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border-radius: 10px;
            overflow: hidden;
        }
        
        .grade-table thead {
            background-color: #1a5fb4;
            color: white;
        }
        
        .grade-table th {
            padding: 20px 15px;
            text-align: left;
            font-weight: 600;
            font-size: 18px;
			border:none;
			Color:#fff;
        }
        
        .grade-table tbody tr {
            border-bottom: 1px solid #e6f0ff;
            transition: all 0.3s ease;
        }
        
        .grade-table tbody tr:nth-child(even) {
            background-color: #f8fbff;
        }
        
        .grade-table tbody tr:hover {
            background-color: #e6f0ff;
            transform: translateY(-2px);
            box-shadow: 0 3px 10px rgba(0, 0, 100, 0.1);
        }
        
        .grade-table td {
            padding: 20px 15px;
           font-size: 18px !important;
        }
        
        .grade {
            font-weight: 700;
            color: #1a5fb4;
            font-size: 18px !important;
        }
        
        .age {
            display: inline-block;
            padding: 5px 12px;
            background-color: #e6f0ff;
            border-radius: 20px;
            font-weight: 600;
            color: #1a5fb4;
        }
        
        .year {
            font-weight: 600;
            color: #333;
        }
		
		.grade-table thead {
  color: white;
}

 .content-box4 {
            width: 100%;
            max-width: 600px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .title-section {
            
            padding: 14px 25px;
            color: white;
            text-align: center;
        }
        
        .title-section h2 {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 5px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
        }
        
        .title-section p {
            font-size: 16px;
            opacity: 0.9;
        }
        
        .content-section2 {
            background-color: #ddecf3;
            padding: 25px 15px 25px 25px;
            border-radius: 0 0 15px 15px;
        }
		
		.theme-color02 {
  background-color: #fb8e62;
}

		.theme-color03 {
  background-color: #ea4c89;
}
.theme-color04 {
  background-color: #3ec7b0;
}

.theme-color06 {
  background-color: #4387de;
}

		  .content-section3 {
            background-color: #f7e5df;
            padding: 25px 15px 25px 25px;
            border-radius: 0 0 15px 15px;
        }
		
		 .content-section4 {
            background-color: #e3f7df;
            padding: 25px 15px 25px 25px;
            border-radius: 0 0 15px 15px;
        }
		
		.bas-content {padding: 11px 20px 13px 4px;}
        
        .content-section h3 {
            color: #333;
            margin-bottom: 15px;
            font-size: 22px;
            font-weight: 600;
        }
        
        .content-section p {
            color: #555;
            line-height: 1.6;
            margin-bottom: 0px;
        }
		
		.content-section h4 { 
			font-size: 22px;
            font-weight: 600;	
			margin-bottom:0px
			}
        
        .bullet-points {
            list-style-type: none;
            padding-left: 0;
        }
        
        .bullet-points li {
            position: relative;
            padding: 11px 5px 13px 42px;
            margin-bottom: 10px;
            color: #444;
            line-height: 27px;
            border-bottom: 1px solid #eee;
        }
        
        .bullet-points li:before {
            content: "•";
            position: absolute;
            left: 15px;
            top: 10px;
            color: #ff6b6b;
            font-size: 54px;
        }
        
        .bullet-points li:last-child {
            border-bottom: none;
        }
        
        @media (max-width: 600px) {
            .content-box4 {
                max-width: 100%;
            }
            
            .title-section, .content-section {
                padding: 15px 20px;
            }
            
            .title-section h2 {
                font-size: 24px;
            }
        }
		
		
		.bas-bg-secondary {
 
  border-radius: 20px;
  padding:30px 30px 30px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bas-bg-secondary {
  --bs-bg-opacity: 1;
 
}

.p-21 { 
 padding:20px 20px 0px 25px;
 }
 
 .p-33 { 
 padding:20px 0px 0px 35px;
 }
 
 .intro-text {
  font-size: 1.18rem;
  color: #1f3a4b;
  max-width: 100%;
  background: #ecf3fa;
  padding: 1.2rem 2rem;
  border-radius: 40px 12px 40px 12px;
  border: 1px solid #cbdbe9;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.02);
}


 /* ----- grid of horizontal cards (left dummy image) ----- */
    .facility-list {
      display: flex;
      flex-direction: column;
      gap: 2.5rem;
    }

    .horizontal-card {
      display: flex;
      flex-wrap: wrap;               /* mobile fallback */
      background: #fbfdff;
      border-radius: 2.4rem;
      border: 1px solid #cfddee;
      box-shadow: 0 8px 18px -8px rgba(12, 52, 86, 0.15);
      overflow: hidden;
      transition: 0.18s ease;
    }

    /* LEFT SIDE – DUMMY IMAGE (pure css dummy with icon and gradient) */
    .dummy-img {
      flex: 0 0 30%;                /* fixed width: dummy image area */
      background: #a1b7d6;           /* base fallback */
      min-height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* dummy image simulation: neutral gradient + abstract icon */
      background: radial-gradient(circle at 30% 30%, #e1eaf8, #a1b9d1), 
                  repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 12px, rgba(0,0,0,0.02) 12px, rgba(0,0,0,0.02) 24px);
      background-blend-mode: overlay;
      border-radius: 2.3rem 0 0 2.3rem;
      font-size: 3.5rem;
      font-weight: 300;
      color: #2f4b70;
      text-shadow: 2px 2px 12px white;
    }

    /* each dummy image shows a distinct building / furniture icon (pure css) */
    .dummy-img::before {
      content: "🏫";                /* fallback generic school */
      font-size: 7rem;
      opacity: 0.8;
      filter: drop-shadow(2px 6px 8px rgba(0,20,30,0.3));
      background: rgba(255,255,255,0.15);
      padding: 0.5rem 1rem;
      border-radius: 100px;
      backdrop-filter: blur(2px);
      font-family: 'Segoe UI', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
    }

    /* slightly different icon per card to make dummy "distinct" – but still dummy */
    .horizontal-card:nth-child(1) .dummy-img::before { content: "📚"; }   /* smart class */
    .horizontal-card:nth-child(2) .dummy-img::before { content: "🤖"; }   /* AI lab */
    .horizontal-card:nth-child(3) .dummy-img::before { content: "⚗️"; }    /* science */
    .horizontal-card:nth-child(4) .dummy-img::before { content: "📐"; }   /* maths */
    .horizontal-card:nth-child(5) .dummy-img::before { content: "💻"; }   /* computer */
    .horizontal-card:nth-child(6) .dummy-img::before { content: "🗣️"; }   /* language */
    .horizontal-card:nth-child(7) .dummy-img::before { content: "🧪"; }   /* composite */
    .horizontal-card:nth-child(8) .dummy-img::before { content: "📖"; }   /* library */
    .horizontal-card:nth-child(9) .dummy-img::before { content: "🎭"; }   /* auditorium */
    .horizontal-card:nth-child(10) .dummy-img::before { content: "🧸"; }  /* soft play */
    .horizontal-card:nth-child(11) .dummy-img::before { content: "📹"; }  /* CCTV */
    .horizontal-card:nth-child(12) .dummy-img::before { content: "🔥"; }  /* fire safety */
    .horizontal-card:nth-child(13) .dummy-img::before { content: "🚻"; }  /* restrooms */
    .horizontal-card:nth-child(14) .dummy-img::before { content: "💧"; }  /* drinking water */
    .horizontal-card:nth-child(15) .dummy-img::before { content: "🛡️"; }  /* secure campus */

    /* RIGHT SIDE – exact text, no trim */
    .card-content {
      flex: 1;
      padding: 2rem 2.2rem 2rem 2.2rem;
      background: #ffffff;
    }

    .facility-title {
      font-size: 24px;
      font-weight: 600;
      color: #113946;
      border-bottom: 3px solid #bacee2;
      padding-bottom: 0.4rem;
      margin-bottom: 1.5rem;
      line-height: 1.2;
    }

    .facility-text {
      font-size: 1.05rem;
      color: #173e51;
    }

    .facility-text p {
      margin-bottom: 0.9rem;
    }

    .facility-text ul {
      list-style-type: disc;
      padding-left: 2rem;
      margin: 0.7rem 0 1rem 0;
    }

    .facility-text li {
      margin-bottom: 0.25rem;
    }

    /* subheadings inside science lab etc. */
    .subheading {
      font-weight: 700;
      font-size: 20px;
      margin-top: 1rem;
      margin-bottom: 0.2rem;
      color: #17455c;
    }

    /* keep all dashes, line breaks – exactly as given */
    hr {
      margin: 2rem 0 1rem 0;
      border: 1px dashed #b2c9df;
    }

    /* responsive: stack on narrow screens */
    @media (max-width: 700px) {
      .dummy-img { flex: 0 0 100%; border-radius: 2rem 2rem 0 0; min-height: 180px; }
      .container { padding: 1.8rem 1rem; }
      .facility-title { font-size: 1.8rem; }
    }
	
	 /* ----- 8.1 House system header ----- */
    .house-section-title {
      font-size: 2.5rem;
      font-weight: 600;
      color: #12455f;
      margin: 2.2rem 0 1.8rem 0;
      border-bottom: 4px double #abc0d3;
      padding-bottom: 0.4rem;
    }

    /* ----- house cards grid (4 houses) ----- */
    .houses-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem 1.8rem;
      margin-top: 1rem;
    }

    /* individual house card */
    .house-card {
      background: white;
      border-radius: 2.2rem 2.2rem 2rem 2rem;
      box-shadow: 0 20px 30px -12px rgba(6, 44, 60, 0.3);
      overflow: hidden;
      transition: 0.2s;
      border: 1px solid rgba(255,255,255,0.5);
      display: flex;
      flex-direction: column;
    }

    .house-card:hover {
      transform: scale(1.01);
      box-shadow: 0 24px 36px -10px #083c52;
    }

    /* coloured top strip (house specific) */
    .house-strip {
      height: 14px;
      width: 100%;
    }

    /* card content */
    .house-content {
      padding: 1.6rem 2rem 2rem 2rem;
    }

    .house-name {
      font-size: 28px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 0.5rem;
    }

    .house-emoji {
      font-size: 2.4rem;
      filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.15));
    }

    .house-motto {
      background: #f3f9ff;
      padding: 0.6rem 1.2rem;
      border-radius: 3rem;
      font-size: 18px;
      font-weight: 550;
      margin: 0.6rem 0 1rem 0;
      display: inline-block;
      border: 1px dashed #5e8fb9;
      color: #103c52;
    }

    .house-description {
      font-size: 1.08rem;
      color: #1d4257;
      line-height: 1.6;
    }

    .house-description p {
      margin-top: 0.7rem;
    }

    /* house-specific colours (border & strip) */
    .ganga-strip { background: #c93e3e; }      /* red */
    .kaveri-strip { background: #e8b130; }     /* yellow */
    .godavari-strip { background: #3c9b5e; }    /* green */
    .brahmaputra-strip { background: #2a72b0; } /* blue */

    .ganga-border .house-name { color: #b13b3b; }
    .kaveri-border .house-name { color: #b8861a; }
    .godavari-border .house-name { color: #1f7842; }
    .brahmaputra-border .house-name { color: #1e5d99; }

    /* inter-house paragraph after cards (exact) */
    .inter-house-note {
      margin-top: 3rem;
      background: #e2f0f9;
      border-radius: 4rem 1rem 4rem 1rem;
      padding: 1.6rem 2.5rem;
      font-size: 1.2rem;
      font-weight: 450;
      border-left: 8px solid #b64141;
      color: #064256;
    }

    /* responsive */
    @media (max-width: 750px) {
      .houses-grid { grid-template-columns: 1fr; }
      .page-container { padding: 2rem 1.5rem; }
      .main-heading { font-size: 2.4rem; }
	  
	   /* text block */
        .card-content {
            width: 100% !important;
        }
		
		.card-icon { display: none !important;}
		
		.rules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;;
            gap: 2rem;
        }
	  
    }
	
	

    /* exact content preservation: no trimming, all original lines */
    hr {
      margin: 2rem 0 1.5rem 0;
      border: 1px solid #bad2e3;
    }
    .small-note {
      color: #0b4d62;
    }
	
	
	
	  /* header exactly as given */
        .intro-text2 {
            background: white;
            border-radius: 30px;
            padding: 2rem 2.5rem;
            margin-bottom: 2.5rem;
            box-shadow: 0 10px 25px rgba(0, 30, 50, 0.1);
            border-left: 10px solid #b8863d;
        }

        .intro-text2 p {
            font-size: 1.25rem;
            line-height: 1.6;
            color: #1e3a5f;
            font-weight: 400;
        }

        .intro-text p:first-child {
            margin-bottom: 0.25rem;
        }

        /* grid for boxes */
        .rules-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(560px, 1fr));
            gap: 2rem;
        }
		
		.bas-bg {background: #f0f4fa;}

        /* content card — left icon + content */
        .rule-card {
            background: #ffffff;
            border-radius: 28px;
            box-shadow: 0 15px 28px -8px rgba(0, 35, 65, 0.12);
            display: flex;
            align-items: flex-start;
            padding: 1.8rem 1.5rem;
            transition: transform 0.2s, box-shadow 0.25s;
            border: 1px solid rgba(255,255,255,0.7);
            height: 100%;
        }

        .rule-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 25px 38px -12px #0b2f4e33;
        }

        /* left icon fixed width */
        .card-icon {
            flex-shrink: 0;
            width: 70px;
            height: 70px;
            background: #eef3fc;
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1.4rem;
            color: #183f64;
            font-size: 2.3rem;
            border: 1px solid #cdddec;
            transition: all 0.15s;
        }

        .rule-card:hover .card-icon {
            background: #183f64;
            color: #fad87a;
            border-color: #183f64;
        }

        /* text block */
        .card-content {
            flex: 1;
        }

        .rule-title {
            font-size: 26px;
            font-weight: 600;
            color: #0a2a45;
            line-height: 1.2;
            margin-bottom: 0.5rem;
            border-bottom: 2px solid #e7cfa1;
            padding-bottom: 0.25rem;
            display: inline-block;
        }

        /* preserve exact paragraphs, lists, formatting */
        .exact-text {
            color: #1f3a57;
            font-size: 0.98rem;
            line-height: 1.6;
        }

        .exact-text p {
            margin: 0.75rem 0 0.5rem 0;
        }

        .exact-text ul {
            margin: 0.4rem 0 0.5rem 1.2rem;
            padding-left: 0.2rem;
        }

        .exact-text li {
            margin-bottom: 0.4rem;
            list-style-type: disc;   /* keep original bullet style */
			color: #01016a;
        }

        /* for bold statements, keep intact */
        .exact-text strong, .exact-text b {
            color: #a57124;
        }

        /* any horizontal rules or line breaks – preserve visually */
        hr {
            border: none;
            border-top: 2px dotted #c0cbd9;
            margin: 0.5rem 0;
        }

        /* the final note about privileges */
        .final-note {
            margin-top: 2.5rem;
            background: #e6edf6;
            padding: 0.8rem 2rem;
            border-radius: 50px;
            display: inline-block;
            color: #1f4a74;
            font-size: 1rem;
            border: 1px solid white;
        }
		
		
		 /* header card — exactly as given */
        .uniform-header {
            background: white;
            border-radius: 32px;
            padding: 2.2rem 2.5rem;
            margin-bottom: 2.8rem;
            box-shadow: 0 18px 28px -10px rgba(5, 40, 65, 0.15);
            border-left: 12px solid #1e4a76;
        }

        .uniform-header h1 {
            font-size: 2.8rem;
            font-weight: 600;
            color: #0f3b5c;
            letter-spacing: -0.01em;
            margin-bottom: 0.5rem;
        }

        .uniform-header p {
            font-size: 1.3rem;
            color: #25597e;
            line-height: 1.5;
            max-width: 85%;
        }

        /* grid — perfect for boys/girls and grooming sections */
        .uniform-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        /* card style with left icon */
        .uniform-card {
            background: #ffffff;
            border-radius: 32px;
            padding: 1.8rem 1.8rem 1.8rem 1.5rem;
            display: flex;
            align-items: flex-start;
            box-shadow: 0 20px 28px -12px rgba(0, 35, 60, 0.12);
            transition: transform 0.15s, box-shadow 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.8);
            height: 100%;
        }

        .uniform-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 28px 38px -14px #0b3550;
        }

        /* left icon */
        .card-icon {
            flex-shrink: 0;
            width: 70px;
            height: 70px;
            background: #e2ecfc;
            border-radius: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1.5rem;
            color: #1b4f7a;
            font-size: 2.4rem;
            border: 1px solid #bed3ec;
            transition: 0.15s;
        }

        .uniform-card:hover .card-icon {
            background: #1b4f7a;
            color: #ffe9b6;
            border-color: #1b4f7a;
        }

        /* content */
        .card-content {
            flex: 1;
        }

        .card-title {
            font-size: 26px;
            font-weight: 600;
            color: #0f3552;
            line-height: 1.2;
            margin-bottom: 0.75rem;
            border-bottom: 3px solid #e0cba1;
            padding-bottom: 0.3rem;
            display: inline-block;
        }

        .sub-title {
            font-size: 1.3rem;
            font-weight: 500;
            color: #23527c;
            margin: 1rem 0 0.2rem 0;
        }

        .sub-title:first-of-type {
            margin-top: 0.2rem;
        }

        /* exact bullet lists and paragraphs */
        .exact-text {
            color: #1e3d5b;
            font-size: 1rem;
            line-height: 1.6;
        }

        .exact-text p {
            margin: 0.6rem 0 0.2rem 0;
			font-size:16px;
        }

        .exact-text ul {
            margin: 0.25rem 0 0.5rem 1.5rem;
            padding-left: 0;
        }

        .exact-text li {
            margin-bottom: 0.3rem;
            list-style-type: disc;   /* keep original style */
        }

        .exact-text hr {
            border: none;
            border-top: 2px dashed #b5c9e0;
            margin: 0.75rem 0;
        }

        /* special for bold / heading inside */
        .exact-text strong {
            color: #9b731c;
        }

        /* grooming & appearance boxes (full width) */
        .full-width-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin: 2rem 0;
        }

        /* keep responsive */
        @media (max-width: 750px) {
            .full-width-section {
                grid-template-columns: 1fr;
            }
            .uniform-header p {
                max-width: 100%;
            }
        }

        .footer-note {
            margin-top: 2.2rem;
            background: #dde9f5;
            border-radius: 60px;
            padding: 0.9rem 2.2rem;
            display: inline-block;
            color: #12406b;
            font-size: 1.1rem;
            border: 1px solid white;
        }

        /* small adjustments */
        .no-margin-top {
            margin-top: 0;
        }
		
		
		 /* grid – flexible, each card takes appropriate width */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        /* universal card style: left icon + exact content */
        .info-card {
            background: #ffffff;
            border-radius: 32px;
            padding: 1.8rem 1.8rem 1.8rem 1.6rem;
            display: flex;
            align-items: flex-start;
            box-shadow: 0 16px 28px -12px rgba(0, 40, 65, 0.12);
            transition: transform 0.15s, box-shadow 0.2s;
            border: 1px solid rgba(255, 255, 255, 0.8);
            height: 100%;
        }

        .info-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 28px 40px -16px #16466b;
        }

        /* left icon area */
        .card-icon {
            flex-shrink: 0;
            width: 74px;
            height: 74px;
            background: #e2edfc;
            border-radius: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1.5rem;
            color: #1f5881;
            font-size: 2.6rem;
            border: 1px solid #bed7f0;
            transition: 0.15s;
        }

        .info-card:hover .card-icon {
            background: #1f5881;
            color: #ffefc0;
            border-color: #1f5881;
        }

        /* content area */
        .card-content {
            flex: 1;
        }

        .card-title {
            font-size: 24px;
            font-weight: 600;
            color: #113752;
            line-height: 1.2;
            margin-bottom: 0.8rem;
            border-bottom: 3px solid #ecdbaa;
            padding-bottom: 0.3rem;
            display: inline-block;
        }

        /* preserve exact text, bullets, paragraphs */
        .exact-text {
            color: #1f405e;
            font-size: 1rem;
            line-height: 1.6;
        }

        .exact-text p {
            margin: 0.6rem 0 0.2rem 0;
        }

        .exact-text ul {
            margin: 0.25rem 0 0.5rem 1.5rem;
            padding-left: 0;
        }

        .exact-text li {
            margin-bottom: 0.3rem;
            list-style-type: disc;
        }

        .exact-text strong, .exact-text b {
            color: #a57628;
        }

        /* small hr if needed (not present, but keep) */
        .exact-text hr {
            border: none;
            border-top: 2px dashed #c2d3e8;
            margin: 0.75rem 0;
        }

        /* for sections that might be standalone */
        .full-width-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            margin: 2rem 0;
        }

        @media (max-width: 750px) {
            .full-width-group {
                grid-template-columns: 1fr;
            }
            .info-header p {
                max-width: 100%;
            }
        }

        .footer-note {
            margin-top: 2.8rem;
            background: #d3e3f2;
            border-radius: 60px;
            padding: 0.9rem 2.4rem;
            display: inline-block;
            color: #1d4870;
            font-size: 1.1rem;
            border: 1px solid white;
        }

        .small-credit {
            margin-top: 1rem;
            font-size: 0.9rem;
            color: #3a6f99;
            text-align: right;
            opacity: 0.75;
        }