body{
    background-color: #fff !important;
}
     

        /* Main Container setup - Align items stretch ensures equal height */
        #rrps-unique-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            align-items: stretch; /* Isse sabhi columns ki height same rahegi */
            justify-content: center;
            margin-top: 50px;
        }

        /* Left Side Highlight Box */
        .rrps-cta-highlight-box {
            flex: 1;
            min-width: 260px;
            border: 1px solid #e0e0e0;
            padding: 45px 30px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: #fff;
        }

        .rrps-cta-title {
            font-size: 32px; /* Image ke hisaab se thoda bada font */
            font-weight: 600;
            line-height: 1.1;
            margin-bottom: 25px;
            color: #34495e;
            letter-spacing: -0.5px;
        }

        .rrps-cta-description {
            font-size: 16px;
            line-height: 1.7;
            color: #666;
            margin-bottom: 40px;
        }

        .rrps-readmore-btn {
            color: #ff7675; /* Soft red/coral color as per image */
            text-decoration: none;
            font-weight: 500;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: 0.3s;
        }

        .rrps-readmore-btn:hover {
            opacity: 0.8;
            transform: translateX(5px);
        }

        /* Individual Card Columns */
        .rrps-info-column {
            flex: 1;
            min-width: 280px;
            display: flex;
            flex-direction: column;
        }

        .rrps-image-container {
            width: 100%;
            height: 240px; /* Fixed height for image area */
            overflow: hidden;
            margin-bottom: 25px;
        }

        .rrps-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }

        .rrps-info-column:hover .rrps-image-container img {
            transform: scale(1.05);
        }

        .rrps-column-title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 18px;
            color: #2d3436;
        }

        .rrps-column-text {
            font-size: 15px;
            line-height: 1.6;
            color: #7f8c8d;
            text-align: left;
        }

        /* Responsive adjustments */
        @media (max-width: 1100px) {
            #rrps-unique-wrapper {
                gap: 20px;
            }
        }

        @media (max-width: 992px) {
            .rrps-cta-highlight-box, .rrps-info-column {
                flex: 1 1 calc(50% - 20px); /* Tablet par 2x2 grid */
            }
        }

        @media (max-width: 600px) {
            .rrps-cta-highlight-box, .rrps-info-column {
                flex: 1 1 100%; /* Mobile par single column */
            }

            #rrps-unique-wrapper{
                padding: 20px;
            }
            .rrps-cta-title {
                font-size: 28px;
            }
           
        }

























        /* servies section ============================ */


       

        /* Container Styles */
        #sfs-main-container {
            max-width: 1200px;
            margin: 0 auto;
            margin-top: 100px;
            width: 100%;
        }

        /* Grid Layout */
        .sfs-grid-wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        /* Card Styles */
        .sfs-feature-card {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 4px; /* Slight rounding to match image */
            padding: 35px 30px;
            display: flex;
            align-items: flex-start;
            gap: 20px;
            transition: box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .sfs-feature-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            border-color: #cbd5e1;
        }

        /* Icon Wrapper */
        .sfs-icon-container {
            flex-shrink: 0;
            width: 45px;
            height: 45px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8; /* Grayish-blue icon color */
        }

        .sfs-icon-container svg {
            width: 100%;
            height: 100%;
            stroke-width: 1.2px;
        }

        /* Content Area */
        .sfs-text-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        /* Title Styles */
        .sfs-card-title {
            font-size: 1.15rem;
            font-weight: 600;
            color: #000;
            line-height: 1.3;
        }

        .sfs-title-link {
            text-decoration: none;
            color: inherit;
            transition: color 0.2s ease;
        }

        .sfs-title-link:hover {
            color: #2563eb; /* Add a subtle hover color for the link */
        }

        /* Description Styles */
        .sfs-card-description {
            font-size: 0.95rem;
            color: #475569;
            line-height: 1.6;
        }

        /* Responsive Design */
        @media screen and (max-width: 1024px) {
            .sfs-grid-wrapper {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
        }

        @media screen and (max-width: 768px) {
            .sfs-grid-wrapper {
                grid-template-columns: 1fr;
                gap: 20px;
            }
              #sfs-main-container{
                padding: 20px;
              }
            .sfs-feature-card {
                padding: 25px 20px;
            }
        }





















        /* fact section =========================== */




               /* CSS Variables for consistent colors and easy editing */
        :root {
            --primary-accent: #ff7066; /* The coral/red color from the image */
            --text-dark: #333d47;   /* Main heading color */
            --text-muted: #5e6d77;  /* Paragraph and description color */
            --stat-color: #333d47;  /* Large number color */
            --bg-white: #ffffff;
            --transition: all 0.3s ease;
        }


        /* Unique Section Container */
        #unique-mission-section {
            padding: 100px 20px;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        /* Top Red Accent Line */
        .mission-top-divider {
            width: 45px;
            height: 4px;
            background-color: var(--primary-accent);
            margin: 0 auto 50px;
        }

        /* Main Heading */
        .mission-header-text {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 25px;
            color: var(--text-dark);
            letter-spacing: 0.5px;
        }

        /* Description Paragraph */
        .mission-para-text {
            font-size: 18px;
            color: var(--text-muted);
            max-width: 900px;
            margin: 0 auto 40px;
            font-weight: 400;
            line-height: 1.8;
        }

        /* Subtitle with line decoration */
        .mission-subtitle-wrapper {
            position: relative;
            display: inline-block;
            margin-bottom: 80px;
        }

        .mission-subtitle-wrapper::after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 1px;
            background-color: #e0e0e0;
        }

        .mission-subtitle-text {
            font-size: 26px;
            font-weight: 600;
            color: var(--text-dark);
        }

        /* Stats Grid System */
        .stats-grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-top: 20px;
        }

        .stat-card {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .stat-value {
            font-size: 82px;
            font-weight: 300; /* Light weight for the numbers as per image */
            color: var(--stat-color);
            line-height: 1;
            margin-bottom: 15px;
        }

        .stat-underline {
            width: 50px;
            height: 1px;
            background-color: #ddd;
            margin-bottom: 15px;
        }

        .stat-label {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: capitalize;
        }

        /* Responsive Breakpoints */

        /* Tablet View */
        @media (max-width: 992px) {
            .stats-grid-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 50px;
            }
            .mission-subtitle-text {
                font-size: 22px;
            }
            .stat-value {
                font-size: 64px;
            }
        }

        /* Mobile View */
        @media (max-width: 600px) {
            #unique-mission-section {
                padding: 60px 15px;
            }
            .mission-header-text {
                font-size: 20px;
            }
            .mission-para-text {
                font-size: 16px;
            }
            .mission-subtitle-text {
                font-size: 18px;
            }
            .stats-grid-container {
                grid-template-columns: 1fr; /* Stack on small mobile */
                gap: 40px;
            }
            .stat-value {
                font-size: 72px;
            }
        }



















/* soclail media feed  */


        .social-feed-section {
            padding: 60px 10px;
            background: #333333;
            display: flex;
            flex-direction: column;
            align-items: center; /* Centers everything horizontally */
        }

        .section-header {
            text-align: center;
            margin-bottom: 40px;
            width: 100%;
        }

        .section-header h2 {
            color: #ffffff;
            font-size: clamp(24px, 5vw, 36px); /* Responsive font size */
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .header-line {
            width: 60px;
            height: 4px;
            background: #ff0000;
            margin: 0 auto;
            border-radius: 2px;
        }

        .social-feed-container {
            width: 100%;
            max-width: 1100px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 30px;
            justify-content: center;
        }

        .social-feed-box {
            background: #ffffff;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            width: 100%;
            min-height: 650px; /* Base height for desktop */
        }

        .social-feed-box h3 {
            font-size: 20px;
            margin: 0 0 20px;
            color: #222;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
            padding-bottom: 12px;
        }

        .social-embed-box {
            flex-grow: 1;
            width: 100%;
            background: #fafafa;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            overflow: hidden;
        }

        .fb-embed-box iframe {
            width: 100% !important;
            max-width: 500px;
            height: 620px;
            border: none;
            overflow: hidden;
            display: block;
            margin: 0 auto;
        }

        /* Tablet: Stack cards */
        @media (max-width: 992px) {
            .social-feed-container {
                grid-template-columns: 1fr;
                max-width: 550px; /* Keeps cards narrow and centered */
                margin: 0 auto;
            }
            
            .social-feed-box {
                min-height: auto; /* Allow box to grow with content */
            }
        }

        /* Mobile: Optimize spacing and alignment */
        @media (max-width: 600px) {
            .social-feed-section {
                padding: 40px 10px;
            }

            .social-feed-container {
                gap: 25px;
                padding: 0 5px;
            }

            .social-feed-box {
                padding: 15px;
                border-radius: 16px;
            }

            .social-feed-box h3 {
                font-size: 18px;
                margin-bottom: 15px;
            }
            
            .fb-embed-box iframe {
                height: 500px; /* Slightly shorter for mobile screens */
            }
        }




















/* 4 crad section  =================== */

        :root {
            --primary-text: #000; /* Darker navy for headings */
            --secondary-text: #5d6d7e; /* Muted grey for description */
            --accent-cyan: #17a2b8; /* Cyan for button */
            --icon-color: #aeb6bf; /* Soft grey for icons */
            --font-main: 'Open Sans', sans-serif;
        }

       

        /* Main Section Wrapper */
        #edu-docs-section {
            max-width: 1200px;
            margin: 80px auto;
            padding: 0 20px;
            display: flex;
            flex-direction: row;
            gap: 50px;
            align-items: flex-start;
        }

        /* Left Side: Intro Content */
        .edu-docs-header {
            flex: 0 0 320px;
        }

        .edu-docs-header h2 {
            font-size: 32px;
            color: var(--primary-text);
            margin: 0 0 20px 0;
            font-weight: 700;
        }

        .edu-docs-header p {
            font-size: 16px;
            line-height: 1.6;
            color: var(--secondary-text);
            margin-bottom: 30px;
        }

        .edu-docs-btn-all {
            display: inline-block;
            padding: 12px 30px;
            border: 1px solid #17a2b8;
            color: #17a2b8;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .edu-docs-btn-all:hover {
            background-color: #17a2b8;
            color: #fff;
        }

        /* Right Side: Documents Grid */
        .edu-docs-content {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .edu-docs-card {
            display: flex;
            align-items: flex-start;
            gap: 15px;
        }

        .edu-docs-icon {
            flex-shrink: 0;
            width: 55px;
            height: auto;
            color: var(--icon-color);
        }

        .edu-docs-details h3 {
            font-size: 18px;
            margin: 0 0 12px 0;
            font-weight: 700;
            line-height: 1.3;
        }

        .edu-docs-details h3 a {
            color: var(--primary-text);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .edu-docs-details h3 a:hover {
            color: var(--accent-cyan);
        }

        .edu-docs-details p {
            font-size: 13.5px;
            line-height: 1.5;
            color: var(--secondary-text);
            font-style: italic;
            margin: 0;
        }

        /* --- RESPONSIVE DESIGN --- */

        /* Desktop and Tablet Landscape */
        @media (max-width: 1100px) {
            .edu-docs-content {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Tablet Portrait */
        @media (max-width: 900px) {
            #edu-docs-section {
                flex-direction: column;
                margin: 40px auto;
            }

            .edu-docs-header {
                flex: none;
                width: 100%;
                text-align: left;
                margin-bottom: 40px;
            }
            
            .edu-docs-header p {
                max-width: 600px;
            }
        }

        /* Mobile View */
        @media (max-width: 600px) {
            .edu-docs-content {
                grid-template-columns: 1fr;
            }

            .edu-docs-header h2 {
                font-size: 28px;
            }

            .edu-docs-card {
                padding-bottom: 20px;
                border-bottom: 1px solid #f2f2f2;
            }

            .edu-docs-card:last-child {
                border-bottom: none;
            }
        }



















/* faq wiht fomr section  */


        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

        :root {
            --rrps-primary-text: #334155;
            --rrps-secondary-text: #64748b;
            --rrps-border: #e2e8f0;
            --rrps-bg-section: #f1f5f9; /* Pure section background */
            --rrps-card-bg: #ffffff;
        }

      
        /* Full width background wrapper */
        .rrps-full-section-wrapper {
            background-color: var(--rrps-bg-section);
            width: 100%;
            padding: 60px 0;
            display: flex;
            justify-content: center;
        }

        .rrps-main-container {
            max-width: 1200px;
            width: 100%;
            padding: 0 20px;
        }

        .rrps-flex-layout {
            display: flex;
            flex-direction: column;
            gap: 50px;
            align-items: flex-start;
        }

        @media (min-width: 1024px) {
            .rrps-flex-layout {
                flex-direction: row;
                gap: 40px;
            }
        }

        /* FAQ Styling */
        .rrps-faq-section {
            flex: 1;
            width: 100%;
        }

        .rrps-section-title {
            font-size: 24px;
            font-weight: 600;
            color: var(--rrps-primary-text);
            margin-bottom: 25px;
        }

        .rrps-faq-item {
            border-bottom: 1px solid var(--rrps-border);
            padding: 18px 0;
        }

        .rrps-faq-header {
            display: flex;
            align-items: center;
            cursor: pointer;
            gap: 15px;
            user-select: none;
        }

        .rrps-faq-icon {
            color: #94a3b8;
            font-size: 18px;
            transition: transform 0.3s ease;
        }

        .rrps-faq-question {
            font-size: 16px;
            color: var(--rrps-secondary-text);
            font-weight: 400;
        }

        .rrps-faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease-in-out;
            padding-left: 33px;
            color: var(--rrps-primary-text);
            line-height: 1.6;
            font-size: 15px;
        }

        .rrps-faq-item.active .rrps-faq-answer {
            max-height: 300px;
            padding-top: 15px;
            padding-bottom: 5px;
        }

        .rrps-faq-item.active .rrps-faq-question {
            color: var(--rrps-primary-text);
            font-weight: 500;
        }

        /* Form Styling */
        .rrps-appointment-card {
            flex: 1;
            width: 100%;
            background: var(--rrps-card-bg);
            padding: 30px;
            border: 1px solid var(--rrps-border);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
        }

        @media (min-width: 768px) {
            .rrps-appointment-card {
                padding: 45px;
            }
        }

        .rrps-form-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        @media (min-width: 768px) {
            .rrps-form-grid {
                grid-template-columns: 1fr 1.2fr;
            }
        }

        .rrps-input-group {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .rrps-input-field {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid var(--rrps-border);
            border-radius: 4px;
            font-size: 14px;
            outline: none;
            transition: all 0.2s;
            background: #fff;
        }

        .rrps-input-field:focus {
            border-color: #94a3b8;
            box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.1);
        }

        .rrps-textarea {
            height: 100%;
            min-height: 160px;
            resize: none;
        }

        /* Captcha Mock */
        .rrps-captcha-box {
            background: #f9f9f9;
            border: 1px solid #d3d3d3;
            border-radius: 3px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            max-width: 300px;
            margin-top: 15px;
        }

        .rrps-captcha-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .rrps-captcha-check {
            width: 26px;
            height: 26px;
            border: 2px solid #c1c1c1;
            border-radius: 2px;
            background: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .rrps-captcha-text {
            font-size: 14px;
            color: #555;
            user-select: none;
        }

        .rrps-captcha-right {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .rrps-captcha-logo {
            width: 28px;
            height: 28px;
        }

        .rrps-captcha-brand {
            font-size: 8px;
            color: #9b9b9b;
        }

        .rrps-form-footer {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 20px;
        }

        .rrps-obligatory-note {
            font-size: 14px;
            color: var(--rrps-secondary-text);
        }

        /* Submit Button Fixed */
        .rrps-submit-btn {
            padding: 10px 40px;
            border: 1px solid var(--rrps-border);
            background: white;
            color: var(--rrps-primary-text);
            cursor: pointer;
            transition: all 0.2s;
            font-size: 15px;
            font-weight: 500;
            min-width: 140px;
            text-align: center;
            border-radius: 2px;
        }

        .rrps-submit-btn:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        .rrps-submit-btn:active {
            transform: translateY(1px);
        }

        @media (max-width: 480px) {
            .rrps-form-footer {
                flex-direction: column;
                align-items: flex-start;
            }
            .rrps-submit-btn {
                width: 100%;
            }
        }


























/* simple text section start  */


       

        /* Main Container */
        #school-info-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            margin-bottom: 50px;
            margin-top: 50px;
        }

        /* Headings Styling */
        .main-heading-primary {
            font-size: 28px;
            color: #2c3e50;
            margin-bottom: 25px;
            font-weight: 700;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

        .sub-heading-secondary {
            font-size: 18px;
            color: #444444;
            margin-top: 25px;
            margin-bottom: 12px;
            font-weight: 700;
        }

        /* Paragraph Styling */
        .content-description-text {
            font-size: 15px;
            margin-bottom: 15px;
            text-align: justify;
            color: #555555;
        }

        .bold-keyword {
            font-weight: 700;
            color: #333;
        }

        /* Lists Styling */
        .ordered-info-list, .unordered-info-list {
            margin-left: 25px;
            margin-bottom: 20px;
        }

        .list-item-detail {
            margin-bottom: 8px;
            font-size: 15px;
            color: #555555;
        }

        .unordered-info-list {
            list-style-type: circle;
        }

        /* Section Spacing */
        .content-block-divider {
            margin-bottom: 35px;
        }

        /* Responsive Design Rules */
        @media screen and (max-width: 768px) {
          
            #school-info-wrapper {
                padding: 20px;
            }
            .main-heading-primary {
                font-size: 24px;
            }
            .sub-heading-secondary {
                font-size: 17px;
            }
            .content-description-text {
                font-size: 14px;
            }
        }




















/* Stip banner section ========================= */

 /* Container for centering content */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding-left: 20px;
            padding-right: 20px;
        }

        /* Unique ID and Classes for Customization */
        #custom-page-header-wrapper {
            width: 100%;
        }

        /* Main Top Banner Section */
        .main-banner-section {
            background-color: #f5f5f5; /* Light gray from image */
            padding: 60px 0;
        }

        .banner-title {
            color: #333333;
            font-size: 40px;
            font-weight: 400;
            letter-spacing: -0.5px;
        }

        /* Breadcrumb Section */
        .breadcrumb-section {
            background-color: #ffffff;
            border-top: 1px solid #eeeeee;
            padding: 15px 0;
        }

        .breadcrumb-list {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }

        .breadcrumb-list li a {
            text-decoration: none;
            color: #777777;
            transition: color 0.3s ease;
        }

        .breadcrumb-list li a:hover {
            color: #333333;
        }

        .breadcrumb-item-active {
            color: #ff6b6b; /* Exact orange/coral color from image */
            font-weight: 400;
        }

        .breadcrumb-separator {
            color: #cccccc;
            display: flex;
            align-items: center;
        }

        .breadcrumb-separator svg {
            width: 12px;
            height: 12px;
        }

        /* Responsive Adjustments (Pure CSS Media Queries) */
        @media (max-width: 768px) {
            .banner-title {
                font-size: 28px;
                text-align: left;
            }
            
            .breadcrumb-list {
                justify-content: left;
            }

            .main-banner-section {
                padding: 40px 0;
            }
        }

        /* Utility classes for placeholder content */
        .content-placeholder {
            padding: 80px 0;
            text-align: left;
            color: #999999;
        }




























/* school info ================================ */



 /* CSS Variables for consistent design */
        :root {
            --bg-light: #f8f9fa;
            --border-color: #e0e0e0;
            --text-main: #333333;
            --text-secondary: #555555;
            --sidebar-hover: #eeeeee;
            --primary-accent: #0056b3;
        }

       

        /* Main Container - Sidebar aur Content ko side-by-side rakhne ke liye */
        .school-main-wrapper {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            gap: 30px;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        /* Sidebar Styling - Left Side Menu */
        #school-sidebar-nav {
            flex: 0 0 250px;
            background-color: var(--bg-light);
            border: 1px solid var(--border-color);
            height: fit-content;
        }

        .sidebar-item {
            list-style: none;
            border-bottom: 1px solid var(--border-color);
        }

        .sidebar-item:last-child {
            border-bottom: none;
        }

        .sidebar-link {
            display: block;
            padding: 15px 20px;
            text-decoration: none;
            color: var(--text-main);
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .sidebar-link:hover {
            background-color: var(--sidebar-hover);
            color: var(--primary-accent);
        }

        /* Content Grid - Right Side Cards */
        .school-content-grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px 30px;
        }

        /* Individual Card Design */
        .info-card-block {
            display: flex;
            flex-direction: column;
        }

        .card-media-box {
            width: 100%;
            overflow: hidden;
            margin-bottom: 15px;
            background-color: #f0f0f0;
        }

        .card-media-box img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        /* Tall Image variant for "Value Education" */
        .tall-image {
            aspect-ratio: 2/2.8;
        }

        /* Standard Image variant */
        .standard-image {
            aspect-ratio: 16/8;
        }

        .info-card-heading {
            font-size: 16px;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 10px;
            color: #444;
            letter-spacing: 0.5px;
        }

        .info-card-text {
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-secondary);
            text-align: justify;
        }

        /* Responsive Design Rules */
        @media (max-width: 992px) {
            .school-main-wrapper {
                flex-direction: column;
            }

            #school-sidebar-nav {
                flex: 1;
                width: 100%;
                margin-bottom: 20px;
            }

            .school-content-grid {
                gap: 30px;
            }
        }

        @media (max-width: 600px) {
            .school-content-grid {
                grid-template-columns: 1fr; /* Mobile par single column layout */
                padding: 20px;
            }

            #school-sidebar-nav{
                padding: 20px;
            }
            
            
        }



























/* mangment section  ================================= */


        /* CSS Variables for easy customization */
        :root {
            --primary-red: #b22222;
            --bg-light: #f8f9fa;
            --text-dark: #333;
            --text-muted: #555;
            --border-color: #ddd;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        body {
            background-color: #ffffff;
            color: var(--text-dark);
        }

        /* Layout Container - No Outer Box Shadow */
        #staff-management-layout {
            display: flex;
            max-width: 1200px;
            margin: 20px auto;
            gap: 20px;
            padding: 10px;
        }

      

        /* Main Content Area */
        #staff-main-content {
            flex: 1;
        }

        /* Profile Row - Text Left, Image Right */
        .staff-profile-row {
            display: flex;
            gap: 40px;
            margin-bottom: 50px;
            padding-bottom: 40px;
            border-bottom: 1px solid #eee;
            align-items: flex-start;
        }

        .staff-profile-row:last-child {
            border-bottom: none;
        }

        .staff-text-content {
            flex: 1.5;
        }

        .staff-image-container {
            flex: 1;
            max-width: 320px;
        }

        .staff-image {
            width: 100%;
            height: auto;
            border-radius: 2px;
            display: block;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }

        .current{
            border-left: 2px solid red;
            color: red;
        }

        /* Typography */
        .staff-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #222;
        }

        .staff-description {
            font-size: 15px;
            line-height: 1.7;
            color: var(--text-muted);
            text-align: justify;
        }

        .desc-paragraph {
            margin-bottom: 15px;
        }

        /* Responsive Breakpoints */
        @media (max-width: 992px) {
            #staff-management-layout {
                flex-direction: column;
            }

           
        @media (max-width: 768px) {
            .staff-profile-row {
                flex-direction: column;
                gap: 20px;
            }

            .staff-text-content {
                order: 2;
            }

            .staff-image-container {
                order: 1;
                max-width: 100%;
                width: 100%;
            }

            .staff-title {
                text-align: center;
            }

            .staff-description {
                text-align: left;
            }
        }
    }



















/* princliple message ============================ */


        /* CSS Variables */
        :root {
            --school-red: #b22222;
            --sidebar-bg: #f5f5f5;
            --border-light: #e0e0e0;
            --text-dark: #333333;
            --text-gray: #555555;
            --white: #ffffff;
        }

      
        /* Layout Container */
        #school-page-layout {
            display: flex;
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
            gap: 35px;
        }

      
        /* Main Content */
        #school-main-content {
            flex: 1;
        }

        /* Principal Section Styling */
        .principal-message-container {
            width: 100%;
        }

        /* Image and Text Wrapping Logic */
        .principal-img-wrapper {
            float: left;
            margin-right: 30px;
            margin-bottom: 20px;
            width: 280px;
        }

        .principal-photo {
            width: 100%;
            height: auto;
            border-radius: 2px;
            display: block;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        /* Text Styling */
        .message-body {
            font-size: 15px;
            color: var(--text-gray);
            text-align: justify;
        }

        .quote-text {
            font-style: italic;
            color: var(--text-dark);
            font-weight: 600;
        }

        .message-paragraph {
            margin-bottom: 18px;
        }

        .principal-signature {
            margin-top: 30px;
            font-weight: bold;
            color: #222;
            font-size: 16px;
        }

        /* Clearfix to prevent layout collapse */
        .principal-message-container::after {
            content: "";
            clear: both;
            display: table;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            #school-page-layout {
                flex-direction: column;
                margin: 20px auto;
            }

            #school-navigation-aside {
                width: 100%;
            }

           
        }

        @media (max-width: 600px) {
            .principal-img-wrapper {
                float: none;
                width: 100%;
                margin: 0 auto 25px auto;
                max-width: 320px;
            }

            .message-body {
                text-align: left;
            }

            .principal-signature {
                text-align: center;
                margin-top: 20px;
            }
        }















/* Admisson section ========================== */



        /* CSS Variables */
        :root {
            --school-red: #b22222;
            --sidebar-bg: #f5f5f5;
            --border-light: #e0e0e0;
            --text-dark: #333333;
            --text-gray: #666666;
            --white: #ffffff;
            --input-bg: #ffffff;
        }

       
        /* Layout Container */
        #school-page-layout {
            display: flex;
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
            gap: 40px;
        }

       

        /* Main Content */
        #school-main-content {
            flex: 1;
        }

        /* Admission Form Styling */
        .admission-form-wrapper {
            width: 100%;
        }

        .form-heading {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 30px;
            font-weight: 500;
        }

        .admission-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            width: 100%;
        }

        .form-group.full-width {
            grid-column: span 2;
        }

        .form-input, .form-textarea {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-light);
            border-radius: 4px;
            font-size: 14px;
            color: var(--text-gray);
            outline: none;
            background-color: var(--input-bg);
            transition: border-color 0.3s;
        }

        .form-input:focus, .form-textarea:focus {
            border-color: #999;
        }

        .form-textarea {
            height: 250px;
            resize: vertical;
        }

        /* CAPTCHA Design */
        .captcha-container {
            background-color: #f9f9f9;
            border: 1px solid #d3d3d3;
            border-radius: 3px;
            width: 300px;
            height: 74px;
            display: flex;
            align-items: center;
            padding: 0 12px;
            margin-top: 10px;
            justify-content: space-between;
        }

        .captcha-left {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .captcha-checkbox {
            width: 24px;
            height: 24px;
            border: 2px solid #c1c1c1;
            border-radius: 2px;
            background: #fff;
            cursor: pointer;
        }

        .captcha-text {
            font-size: 14px;
            color: #000;
            font-family: Roboto, helvetica, arial, sans-serif;
        }

        .captcha-right {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .re-logo {
            width: 32px;
            height: 32px;
            margin-bottom: 2px;
        }

        .re-brand-text {
            font-size: 10px;
            color: #555;
            text-align: center;
        }

        /* Footer Text & Button */
        .form-info-row {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            font-size: 13px;
            color: var(--text-gray);
        }

        .submit-btn-wrapper {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }

        /* Styled Submit Button */
        .submit-btn {
            padding: 12px 45px;
            background-color: var(--school-red);
            color: var(--white);
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .submit-btn:hover {
            background-color: #8b1a1a;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            #school-page-layout {
                flex-direction: column;
                margin: 20px auto;
            }

            #school-navigation-aside {
                width: 100%;
            }

           
        }

        @media (max-width: 768px) {
            .admission-grid {
                grid-template-columns: 1fr;
            }
            
            .form-group.full-width {
                grid-column: span 1;
            }

            .form-info-row {
                flex-direction: column;
                gap: 10px;
                text-align: left;
            }

            .captcha-container {
                width: 100%;
                max-width: 300px;
            }
        }


















/* Facility section ================================= */


      /* Unique Base Styles */
        #school-info-section-unique {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: #333;
            padding: 60px 20px 20px 20px;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #ffffff;
            position: relative;
        }

        .si-container {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            align-items: flex-start;
            margin-bottom: 40px;
        }

        /* Left Content Column */
        .si-content-col {
            flex: 1.2;
            min-width: 300px;
        }

        .si-section-block {
            margin-bottom: 25px;
        }

        .si-title-bold {
            font-weight: 700;
            text-transform: uppercase;
            color: #1a1a1a;
            font-size: 1.05rem;
            display: inline;
        }

        .si-text {
            display: inline;
            font-size: 0.95rem;
            color: #4a4a4a;
        }

        .si-sub-heading {
            font-weight: 700;
            font-size: 1.15rem;
            margin: 30px 0 15px 0;
            color: #1a1a1a;
        }

        /* List Styling */
        .si-features-list {
            list-style: none;
            padding: 0;
            margin: 0 0 25px 0;
        }

        .si-features-list li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 10px;
            color: #4a4a4a;
            font-size: 0.95rem;
        }

        .si-features-list li::before {
            content: "○";
            position: absolute;
            left: 0;
            color: #888;
            font-weight: normal;
        }

        .si-footer-note {
            font-weight: 500;
            font-size: 0.95rem;
            color: #222;
            margin-top: 20px;
        }

        /* Right Image Column */
        .si-image-col {
            flex: 0.8;
            min-width: 300px;
            display: flex;
            justify-content: center;
        }

        .si-featured-img-wrapper {
            width: 100%;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #eee;
        }

        .si-featured-img-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        /* Bottom Zigzag/Wave Separator */
        .si-wave-line {
            width: 100%;
            height: 10px;
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='10' viewBox='0 0 40 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10L5 5L10 10L15 5L20 10L25 5L30 10L35 5L40 10' stroke='%23e0e0e0' fill='transparent' stroke-width='1'/%3E%3C/svg%3E");
            background-repeat: repeat-x;
            margin-top: 40px;
        }

        /* Responsive Breakpoints */
        @media (max-width: 992px) {
            .si-container {
                flex-direction: column;
            }
            .si-content-col, .si-image-col {
                width: 100%;
                flex: none;
            }
            .si-image-col {
                order: 2; /* Image text ke neeche aayegi mobile par */
            }
        }

        @media (max-width: 600px) {
            #school-info-section-unique {
                padding: 30px 15px 15px 15px;
            }
            .si-title-bold {
                font-size: 0.95rem;
                display: block; /* Mobile par heading alag line mein achhi lagti hai */
                margin-bottom: 5px;
            }
            .si-text {
                font-size: 0.9rem;
            }

            .si-featured-img-wrapper img{
                width: 100%;
                height: auto;
            }
            .si-sub-heading {
                font-size: 1.05rem;
            }
            .si-features-list li {
                font-size: 0.9rem;
            }
        }



















/* public desclure ========================== */

        /* Custom Font */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        
        /* Reset and Base Styles */
       

      

        /* Container for all sections */
        .rrps-main-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* Unique Section Styles */
        .rrps-section {
            padding: 24px 0; 
            margin-bottom: 40px; 
        }

        /* Title Style */
        .rrps-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 16px;
            text-transform: uppercase;
            letter-spacing: 0.025em;
        }

        /* Table Wrapper for Responsiveness */
        .rrps-table-wrapper {
            width: 100%;
            border: 1px solid #e5e7eb;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            overflow-x: auto; /* Enables horizontal scroll on mobile */
            margin-bottom: 10px;
        }

        /* Pure CSS Table Styles */
        .rrps-custom-table {
            border-collapse: collapse;
            width: 100%;
            min-width: 700px; /* Ensures table doesn't shrink too much on mobile */
            background-color: #ffffff;
        }

        /* Specifically for Result tables which have more columns */
        #table-result-x, #table-result-xii {
            min-width: 850px;
        }

        .rrps-custom-table th, 
        .rrps-custom-table td {
            border: 1px solid #e5e7eb;
            padding: 12px 16px;
            text-align: left;
            font-size: 13.5px;
            line-height: 1.5;
            color: #374151;
        }

        /* Table Header Specifics */
        .rrps-custom-table th {
            background-color: #ffffff;
            color: #111827;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            vertical-align: middle;
        }

        /* Column Widths */
        .col-sno { width: 80px; }
        .col-info { width: 45%; }

        /* Font Weights for columns */
        .font-semibold {
            font-weight: 600;
        }

        .font-medium {
            font-weight: 500;
        }

        /* Link Styling for Table 1 */
        .rrps-link {
            color: #2563eb;
            text-decoration: none;
        }

        .rrps-link:hover {
            text-decoration: underline;
        }

        /* Link Styling for Doc Tables (Reddish as per Image) */
        .rrps-doc-link {
            color: #f87171;
            text-decoration: none;
            font-weight: 500;
        }

        .rrps-doc-link:hover {
            text-decoration: underline;
        }

        /* Mobile specific adjustments */
        @media (max-width: 640px) {
           
            .rrps-section {
                padding: 16px 0;
            }
            .rrps-custom-table th, 
            .rrps-custom-table td {
                padding: 10px 12px;
                font-size: 13px;
            }
        }



















/* stream page css ============= */


     

        /* Main Container */
        .streams-wrapper {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* Desktop: 3 Columns */
            gap: 30px;
            padding: 20px;
        }

        /* Stream Card */
        .stream-card {
            background: transparent;
            overflow: hidden;
        }

        /* Image Section */
        .stream-image-container {
            position: relative;
            width: 100%;
            border-radius: 8px; /* Slightly more rounded corners for a modern look */
            overflow: hidden;
            aspect-ratio: 16 / 9;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Subtle shadow */
        }

        .stream-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.3s ease;
        }

        /* Hover effect to make it interactive */
        .stream-card:hover .stream-image-container img {
            transform: scale(1.05);
        }

        /* Content Section */
        .stream-content {
            padding: 10px 5px;
        }

        .stream-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 15px;
            border-bottom: 2px solid #ef4444; /* Adding a small red line under title instead of badge */
            display: inline-block;
            padding-bottom: 5px;
        }

        /* Subject List Styling */
        .subject-list {
            list-style: none;
            padding-left: 0;
            margin-top: 10px;
        }

        .subject-item {
            margin-bottom: 12px;
            font-size: 1.05rem;
            color: #444;
            display: flex;
            align-items: flex-start;
            line-height: 1.4;
        }

        .subject-number {
            margin-right: 12px;
            font-weight: 600;
            color: #ef4444; /* Numbers in red for consistency */
        }

        /* Responsive Design: Tablet aur Mobile */
        @media (max-width: 992px) {
            .streams-wrapper {
                grid-template-columns: repeat(2, 1fr); /* Tablets: 2 Columns */
            }
        }

        @media (max-width: 650px) {
            .streams-wrapper {
                grid-template-columns: 1fr; /* Mobile: 1 Column */
                gap: 40px;
            }
            
        

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


















/* reslut section ========================= */

       

        .rrps-container {
            max-width: 1200px;
            margin: 0 auto;

            padding: 40px 25px;
           

        }

        /* Header Section */
        .rrps-main-header {
            border-left: 6px solid #c43931;
            padding-left: 20px;
            margin-bottom: 25px;
        }

        .rrps-main-title {
            color: #000;
            font-size: 2.4rem;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .rrps-intro-text {
            font-size: 1.15rem;
            color: #4a5568;
            margin-bottom: 45px;
            text-align: justify;
            max-width: 100%;
        }

        /* Results Grid */
        .rrps-results-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            margin-top: 10px;
        }

        .rrps-card-item {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 20px rgba(0,0,0,0.12);
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            border: 1px solid #e2e8f0;
        }

        .rrps-card-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }

        /* Specific Card Identity Colors (Matching Original Design) */
        #card-grade-stars {
            border-bottom: 5px solid #e67e22; /* Orange-ish */
        }

        #card-cbse-toppers {
            border-bottom: 5px solid #f1c40f; /* Yellow-ish */
        }

        #card-grade-x {
            border-bottom: 5px solid #d4af37; /* Gold-ish */
        }

        .rrps-card-img-wrapper {
            width: 100%;
            position: relative;
            overflow: hidden;
        }

        /* Responsive Image Styling */
        .rrps-result-image {
            width: 100%;
            height: 550px; /* Fixed height for consistency in row */
            display: block;
            object-fit: cover; /* Ensures dummy images fill the space perfectly */
            transition: scale 0.5s ease;
        }

        .rrps-card-item:hover .rrps-result-image {
            scale: 1.05;
        }

        /* Fallback for broken images */
        .rrps-image-placeholder {
            width: 100%;
            height: 450px;
            background: #edf2f7;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-weight: 600;
            color: #718096;
            padding: 30px;
        }

        /* Responsive Breakpoints */
        @media (max-width: 1024px) {
            .rrps-results-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .rrps-result-image {
                height: 400px;
            }
        }

        @media (max-width: 768px) {
            .rrps-main-title {
                font-size: 1.8rem;
            }
            .rrps-results-grid {
                grid-template-columns: 1fr;
            }
            .rrps-container {
                padding: 25px 20px;
            }
            .rrps-result-image {
                height: auto; /* Allow natural ratio on mobile */
                max-height: 500px;
            }
        }




















/* school rules ======================== */



        :root {
            --primary-text: #1a1a1a;
            --secondary-text: #333333;
            --accent-line: #000000;
            --font-main: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

      

        #main-rules-header {
            margin-bottom: 40px;
            border-bottom: 3px solid var(--accent-line);
            padding-bottom: 10px;
           
        }

        #rules{
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .main-title-text {
            font-size: 2.5rem;
            text-transform: uppercase;
            letter-spacing: -1px;
        }

        .section-block {
            margin-bottom: 50px;
            width: 100%;
        }

        .section-header-text {
            font-size: 1.8rem;
            margin-bottom: 20px;
            text-decoration: underline;
            text-underline-offset: 8px;
        }

        .standard-rules-list {
            list-style-position: outside;
            margin-left: 25px;
        }

        .rule-list-item {
            margin-bottom: 15px;
            padding-left: 10px;
            font-size: 1.1rem;
        }

        .sub-alpha-list {
            list-style-type: lower-alpha;
            margin-top: 10px;
            margin-left: 30px;
        }

        .sub-item-content {
            margin-bottom: 8px;
        }

        #important-note-container {
            margin: 40px 0;
            padding: 20px 0;
            border-top: 1px dashed #000;
            border-bottom: 1px dashed #000;
        }

        .note-heading-bold {
            font-weight: 900;
            display: block;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }

        .note-paragraph-text {
            font-style: italic;
            font-weight: 500;
        }

        .info-paragraph {
            margin-bottom: 20px;
            font-size: 1.1rem;
        }

        .bullet-point-list {
            list-style-type: disc;
            margin-left: 30px;
            margin-bottom: 25px;
        }

        .timing-block {
            margin: 15px 0;
            font-weight: bold;
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            
            .main-title-text {
                font-size: 1.8rem;
            }
            .section-header-text {
                font-size: 1.4rem;
            }
            .rule-list-item {
                font-size: 1rem;
            }
        }


















/* lab and activit area section start ======================== */


       

        /* Unique Section Container */
        .rrps-lab-section {
            padding: 60px 20px;
            max-width: 1200px;
            margin: 0 auto;
            overflow: hidden; 
        }

        /* Text Content Styling */
        .rrps-content-wrapper {
            margin-bottom: 40px;
            text-align: left;
        }

        .rrps-main-heading {
            font-size: 2.2rem;
            color: #2c3e50;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .rrps-description {
            font-size: 1.1rem;
            color: #555;
            max-width: 100%;
            text-align: justify;
        }

        /* Continuous Auto-Slider Container */
        .rrps-slider-viewport {
            width: 100%;
            overflow: hidden;
            position: relative;
            background: #fff;
            padding: 20px 0;
        }

        /* The moving track */
        .rrps-slider-track {
            display: flex;
            /* Slide width (300) + Margin (20) = 320px per slide */
            width: calc(320px * 10); 
            animation: rrps-scroll 25s linear infinite;
        }

        .rrps-slider-track:hover {
            animation-play-state: paused; 
        }

        /* Individual Image Slide - Adjusted to 1:1 Ratio */
        .rrps-slide {
            width: 300px;
            height: 300px; /* 1:1 Aspect Ratio */
            margin: 0 10px;
            flex-shrink: 0;
        }

        .rrps-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Ensures image fills the square without stretching */
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .rrps-slide img:hover {
            transform: scale(1.05);
        }

        /* Keyframes for Seamless Infinite Scroll */
        @keyframes rrps-scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(calc(-320px * 5)); 
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .rrps-main-heading {
                font-size: 1.8rem;
            }
            .rrps-description {
                font-size: 1rem;
            }
            .rrps-slide {
                width: 220px;
                height: 220px; /* Maintains 1:1 on mobile */
            }
            @keyframes rrps-scroll {
                0% { transform: translateX(0); }
                100% { transform: translateX(calc(-240px * 5)); }
            }
        }

























/* school uniform ======================= */



        /* Main container for the section */
        #uniform-main-section {
            max-width: 1200px;
            margin: 10px auto;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 40px;
        }

        /* Left content area (Text portion) */
        .uniform-text-container {
            flex: 1;
            min-width: 320px;
        }

        /* Main Title: Pre-Primary Uniform */
        #uniform-main-title {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 25px;
            color: #333;
        }

        /* Summer subheading */
        .uniform-subheading {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 20px;
            color: #555;
        }

        /* Groups like Regular Uniform and Wed/Sat Uniform */
        .uniform-group-header {
            font-size: 18px;
            font-weight: 500;
            margin-top: 25px;
            margin-bottom: 15px;
            color: #444;
        }

        /* List items styling */
        .uniform-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .uniform-list-item {
            margin-bottom: 12px;
            font-size: 16px;
            color: #666;
            padding-left: 5px;
        }

        /* Right side image area */
        .uniform-image-container {
            flex: 1;
            min-width: 320px;
            display: flex;
            justify-content: center;
        }

        /* 1:1 Aspect ratio image styling */
        .uniform-square-image-wrapper {
            width: 100%;
            max-width: 600px;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            border-radius: 4px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .uniform-square-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Responsive Design: Mobile ke liye adjustments */
        @media (max-width: 768px) {
            #uniform-main-section {
                flex-direction: column;
                margin: 20px auto;
                gap: 30px;
            }

            .uniform-text-container, .uniform-image-container {
                width: 100%;
                min-width: unset;
            }

            #uniform-main-title {
                font-size: 24px;
                text-align: center;
            }

            .uniform-subheading {
                text-align: center;
            }
        }























/* Calnder section ===================== */


        /* Unique CSS Variables for easy customization */
        :root {
            --royal-bg-color: #f0f2f5;
            --royal-toolbar-bg: #ffffff;
            --royal-border-color: #d1d5db;
            --royal-text-main: #374151;
            --royal-accent-color: #2563eb;
            --royal-window-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }

        /* Main Window Container */
        #royal_pdf_window_wrapper {
            width: 100%;
            max-width: 1200px;
            height: 198vh;
            background: white;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--royal-border-color);
            box-shadow: var(--royal-window-shadow);
            margin: 0 auto;
            margin-bottom: 50px;
            margin-top: 50px;
        }

        /* Custom Toolbar */
        .royal-custom-toolbar {
            height: 60px;
            background-color: var(--royal-toolbar-bg);
            border-bottom: 1px solid var(--royal-border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            flex-shrink: 0;
        }

        .royal-toolbar-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .royal-app-icon {
            width: 32px;
            height: 32px;
            background: var(--royal-accent-color);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .royal-file-name {
            font-size: 16px;
            font-weight: 600;
            color: var(--royal-text-main);
        }

        .royal-toolbar-right {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        /* Mock Buttons (Non-functional as per 'No JS' rule) */
        .royal-btn-mock {
            padding: 8px 12px;
            border-radius: 6px;
            border: 1px solid var(--royal-border-color);
            background: #f9fafb;
            cursor: pointer;
            font-size: 14px;
            color: var(--royal-text-main);
            display: flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
        }

        .royal-btn-mock:hover {
            background: #f3f4f6;
        }

        /* Responsive PDF Container */
        .royal-pdf-frame-container {
            flex-grow: 1;
            width: 100%;
            background: #525659; /* Dark background like native PDF viewers */
            position: relative;
        }

        #royal_pdf_iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            #royal_pdf_window_wrapper {
                height: 95vh;
                border-radius: 8px;
            }
            .royal-toolbar-right .royal-btn-mock span {
                display: none; /* Hide text on mobile, icons only */
            }
            .royal-file-name {
                font-size: 14px;
                max-width: 150px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        @media (max-width: 480px) {
            .royal-custom-toolbar {
                padding: 0 10px;
                height: 50px;
            }
            .royal-toolbar-right {
                gap: 5px;
            }

            #royal_pdf_window_wrapper{
                padding: 20px;
            }
        }




































/* book page css  */


        /* Modern CSS Variables with unique namespacing */
        :root {
            --sdc-main-gradient: linear-gradient(135deg, #17a2b8 0%, #0d6d7c 100%);
            --sdc-white: #ffffff;
            --sdc-text-dark: #2d3436;
            --sdc-text-gray: #636e72;
            --sdc-body-bg: #f0f4f8;
            --sdc-shadow-light: 0 10px 25px rgba(0,0,0,0.05);
            --sdc-shadow-deep: 0 20px 40px rgba(0,0,0,0.12);
        }

       

        /* Entrance Animation */
        @keyframes sdcFadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Main Wrapper */
        .sdc-main-layout-wrapper {
            display: flex;
            gap: 40px;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1200px;
            width: 100%;
            animation: sdcFadeInUp 0.8s ease-out forwards;
            margin: 0 auto;
            margin-top: 50px;
            margin-bottom: 50px;

        }

        /* Unique Premium Card Style */
        .sdc-premium-item-card {
            background: var(--sdc-white);
            border-radius: 24px;
            padding: 50px 40px;
            text-align: center;
            flex: 1;
            min-width: 300px;
            max-width: 420px;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.8);
           box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
        }

       

        /* Animated hover glow */
        .sdc-premium-item-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(23, 162, 184, 0.04) 0%, transparent 70%);
            pointer-events: none;
        }

        /* Icon Section */
        .sdc-icon-circle-box {
            width: 100px;
            height: 100px;
            background: #fff5f5;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 30px;
            transition: transform 0.4s ease;
        }

        .sdc-premium-item-card:hover .sdc-icon-circle-box {
            transform: scale(1.1) rotate(8deg);
        }

        .sdc-pdf-vector-draw {
            width: 50px;
            height: 50px;
            fill: #ff5252;
        }

        /* Text Content Styles */
        .sdc-card-main-title {
            font-size: 26px;
            color: var(--sdc-text-dark);
            margin: 0 0 12px 0;
            font-weight: 800;
            letter-spacing: -0.5px;
        }

        .sdc-card-sub-description {
            font-size: 16px;
            color: var(--sdc-text-gray);
            line-height: 1.6;
            margin-bottom: 35px;
            padding: 0 10px;
        }

        /* Premium Button Styles */
        .sdc-btn-download-action {
            display: inline-block;
            background: var(--sdc-main-gradient);
            color: white;
            text-decoration: none;
            padding: 16px 45px;
            border-radius: 14px;
            font-weight: 700;
            font-size: 15px;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(23, 162, 184, 0.2);
            border: none;
            position: relative;
            z-index: 2;
        }

        .sdc-btn-download-action:hover {
            box-shadow: 0 8px 25px rgba(23, 162, 184, 0.4);
            filter: brightness(1.1);
            padding: 16px 55px;
        }

        .sdc-btn-download-action:active {
            transform: scale(0.95);
        }

        /* Responsive Settings */
        @media (max-width: 768px) {
            .sdc-main-layout-wrapper {
                gap: 25px;
            }
            .sdc-premium-item-card {
                padding: 40px 25px;
            }
            .sdc-card-main-title {
                font-size: 22px;
            }
        }


























/* our staff section start ======================================== */


        /* --- Root Variables for Easy Customization --- */
        :root {
            --primary-bg: #f4f7f6;
            --card-bg: #ffffff;
            --header-bg: #e1f5fe;
            --accent-color: #ff5252;
            --text-dark: #333333;
            --text-light: #666666;
            --border-color: #dddddd;
            --shadow: 0 4px 15px rgba(0,0,0,0.1);
            --tree-line-color: #b0bec5;
        }

       

        /* --- Container --- */
        .premium-org-wrapper {
            max-width: 1200px;
            width: 100%;
            text-align: center;
            margin: 0 auto;
            margin-bottom: 50px;
        }

        /* --- Individual Staff Card --- */
        .staff-card-node {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: var(--shadow);
            /* width: 280px; */
            overflow: hidden;
            display: inline-block;
            transition: transform 0.3s ease;
            text-align: left;
            margin: 10px;
            vertical-align: top;
        }

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

        .staff-img-container {
            width: 100%;
            height: 300px;
            background-color: #eee;
            overflow: hidden;
        }

        .staff-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .staff-content-body {
            padding: 15px;
        }

        .staff-name-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-dark);
            margin: 0 0 5px 0;
        }

        .staff-designation-label {
            color: var(--accent-color);
            font-weight: bold;
            font-size: 0.85rem;
            text-transform: uppercase;
            margin-bottom: 12px;
            display: block;
        }

        .staff-details-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .staff-details-list li {
            font-size: 0.85rem;
            color: var(--text-light);
            margin-bottom: 6px;
            padding-left: 15px;
            position: relative;
        }

        .staff-details-list li::before {
            content: "•";
            position: absolute;
            left: 0;
            color: var(--text-light);
        }

        .detail-label-bold {
            font-weight: 600;
            color: #444;
        }

        /* --- Tree Connections & Sections --- */
        .org-level-top {
            margin-bottom: 50px;
            position: relative;
        }

        /* Vertical Line from Top */
        .org-level-top::after {
            content: "";
            position: absolute;
            bottom: -50px;
            left: 50%;
            width: 2px;
            height: 50px;
            background: var(--tree-line-color);
        }

        .administration-header-banner {
            background-color: var(--header-bg);
            border-radius: 4px;
            padding: 15px;
            margin: 0 auto 50px auto;
            max-width: 900px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            position: relative;
        }

        /* Vertical lines from header */
        .administration-header-banner::before {
            content: "";
            position: absolute;
            top: -50px;
            left: 50%;
            width: 2px;
            height: 50px;
            background: var(--tree-line-color);
        }

        .administration-header-banner::after {
            content: "";
            position: absolute;
            bottom: -50px;
            left: 50%;
            width: 2px;
            height: 50px;
            background: var(--tree-line-color);
        }

        .info-icon-badge {
            background: #2196f3;
            color: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 15px;
            font-size: 14px;
        }

        .banner-text-heading {
            font-size: 1.5rem;
            color: #455a64;
            margin: 0;
            letter-spacing: 1px;
        }

        /* --- Bottom Staff Grid --- */
        .org-level-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
            position: relative;
        }

        /* Optional Horizontal Connector Line for Grid */
        .org-level-bottom::before {
            content: "";
            position: absolute;
            top: -50px;
            left: 15%;
            right: 15%;
            height: 2px;
            background: var(--tree-line-color);
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .org-level-top::after, 
            .administration-header-banner::before, 
            .administration-header-banner::after,
            .org-level-bottom::before {
                display: none;
            }
            .staff-card-node {
                width: 90%;
            }
        }



        @media screen and (max-width: 767px) {

    .org-level-top {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
    }

    #school-sidebar-nav {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    #school-sidebar-nav ul {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #school-sidebar-nav .sidebar-item {
        width: 100%;
    }

    #school-sidebar-nav .sidebar-link {
        display: block;
        width: 100%;
        padding: 12px 15px;
        font-size: 14px;
        box-sizing: border-box;
    }

    #principalCard {
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        box-sizing: border-box;
    }

    #principalCard .staff-img-container {
        width: 100%;
        text-align: center;
    }

    #principalCard .staff-img-container img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    #principalCard .staff-content-body {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }

    #principalCard .staff-name-title {
        font-size: 20px;
        line-height: 1.3;
    }

    #principalCard .staff-designation-label {
        font-size: 14px;
    }

    #principalCard .staff-details-list {
        padding: 0;
        margin: 15px 0 0;
    }

    #principalCard .staff-details-list li {
        font-size: 14px;
        line-height: 1.6;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

@media screen and (max-width: 480px) {

    #school-sidebar-nav .sidebar-link {
        padding: 11px 12px;
        font-size: 13px;
    }

    #principalCard .staff-content-body {
        padding: 12px;
    }

    #principalCard .staff-name-title {
        font-size: 18px;
    }

    #principalCard .staff-details-list li {
        font-size: 13px;
    }
}
















/* All Staff Cards: Equal Size */
.org-level-bottom .staff-card-node {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    flex: 0 0 280px !important;
    margin: 10px !important;
    box-sizing: border-box !important;
}

/* All Staff Images: Exact 1:1 Size */
.org-level-bottom .staff-img-container {
    width: 100% !important;
    height: 280px !important;
    aspect-ratio: 1 / 1 !important;
    padding: 5px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #eeeeee !important;
}

/* Image Fitting */
.org-level-bottom .staff-img-container img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    margin: 0 !important;
}

/* Mobile Responsive */
@media screen and (max-width: 480px) {
    .org-level-bottom .staff-card-node {
        width: calc(100% - 20px) !important;
        min-width: 0 !important;
        max-width: 350px !important;
        flex: 0 0 calc(100% - 20px) !important;
    }

    .org-level-bottom .staff-img-container {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }
}

























/* exam cell ================================= */


        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

        :root {
            --brand-red: #e11d48;
            --brand-red-dark: #be123c;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --bg-light: #f8fafc;
            --border-color: #e2e8f0;
            --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

    
        .sys-container {
            max-width: 1200px;
            margin: 0 auto;
            width: 100%;
            padding: 20px;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        /* Header Styling */
        .sys-header {
            margin-bottom: 40px;
            border-left: 5px solid var(--brand-red);
            padding-left: 20px;
        }

        .sys-title {
            font-size: clamp(1.75rem, 5vw, 2.75rem);
            font-weight: 800;
            color: var(--text-main);
            letter-spacing: -0.04em;
            line-height: 1.1;
        }

        .sys-subtitle {
            margin-top: 8px;
            color: var(--text-muted);
            font-weight: 500;
            font-size: 0.95rem;
        }

        .sys-preview-wrapper {
            width: 100%;
            margin-bottom: 32px;
        }

        .sys-image-frame {
            width: 100%;
            background: var(--bg-light);
            border: 1px solid var(--border-color);
            /* border-radius: 24px;  */
            overflow: hidden;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .sys-image-frame:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .sys-image-frame img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
            min-height: 250px;
        }

        .sys-info-panel {
            margin-top: 24px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* Desktop view for Info Panel */
        @media (min-width: 768px) {
            .sys-info-panel {
                flex-direction: row;
                align-items: flex-end;
                justify-content: space-between;
            }
        }

        .sys-meta {
            display: flex;
            align-items: flex-start;
            gap: 14px;
        }

        .sys-icon-box {
            padding: 10px;
            background: #fff1f2;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .sys-meta-icon {
            width: 24px;
            height: 24px;
            color: var(--brand-red);
        }

        .sys-wa-label {
            display: block;
            font-weight: 700;
            font-size: 11px;
            color: var(--brand-red);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 2px;
        }

        .sys-wa-time {
            display: block;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-main);
        }

        .sys-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            background-color: var(--brand-red);
            color: #ffffff;
            text-decoration: none;
            padding: 18px 32px;
            border-radius: 16px;
            font-weight: 700;
            font-size: 16px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 10px 15px -3px rgba(225, 29, 72, 0.3);
            width: 100%; /* Default mobile full width */
        }

        @media (min-width: 768px) {
            .sys-btn {
                width: auto; /* Desktop auto width */
            }
        }
    /* 
            .sys-btn:hover {
                background-color: var(--brand-red-dark);
                transform: translateY(-2px);
                box-shadow: 0 20px 25px -5px rgba(225, 29, 72, 0.4);
            } */

        .sys-btn:active {
            transform: scale(0.98);
        }

        .sys-footer {
            margin-top: 60px;
            padding-top: 32px;
            border-top: 2px dashed var(--border-color);
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        @media (min-width: 640px) {
            .sys-footer {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }
        }

        .sys-name {
            font-size: 22px;
            font-weight: 800;
            color: var(--text-main);
            display: block;
            letter-spacing: -0.02em;
        }

        .sys-designation {
            font-size: 15px;
            color: var(--text-muted);
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            background-color: #10b981;
            border-radius: 50%;
            display: inline-block;
            box-shadow: 0 0 0 3px #d1fae5;
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(0.95); opacity: 1; }
            50% { transform: scale(1.1); opacity: 0.7; }
            100% { transform: scale(0.95); opacity: 1; }
        }

        .copyright {
            font-size: 12px;
            color: #94a3b8;
            font-weight: 500;
        }






















/* grivance cell page ========================== */


        #gc-custom-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            color: #333;
            margin-top: 50px;
            margin-bottom: 50px;
        }

        /* Title Styling */
        .gc-main-title {
            font-size: 2.5rem;
            color: #000;
            margin-bottom: 25px;
            /* Left aligned as requested */
            text-align: left;
            font-weight: 600;
        }

        /* Responsive Table Wrapper */
        .gc-table-responsive {
            overflow-x: auto;
            /* border-radius: 8px; */
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
        }

        /* Table Design */
        #gc-data-table {
            width: 100%;
            border-collapse: collapse;
            background-color: #ffffff;
            min-width: 600px; /* Ensures table doesn't look squashed on mobile */
        }

        /* Table Header */
        #gc-data-table thead tr {
            background-color: #f2f2f2; /* Light Grey for header */
            border-bottom: 2px solid #ddd;
        }

        #gc-data-table th {
            padding: 15px;
            text-align: left; /* Left align text */
            font-weight: bold;
            color: #444;
            border: 1px solid #ddd;
        }

        /* Table Cells */
        #gc-data-table td {
            padding: 12px 15px;
            border: 1px solid #ddd;
            font-size: 1rem;
        }

        /* Unique Class for Row Coloring (Zebra Striping) */
        .gc-row-even {
            background-color: #ffffff; /* White */
        }

        .gc-row-odd {
            background-color: #f9f9f9; /* Soft Grey */
        }

        /* Hover effect for better UX */
        #gc-data-table tbody tr:hover {
            background-color: #f1f1f1;
            transition: background 0.3s ease;
        }

        /* Column Specific Alignment */
        .gc-col-center {
            text-align: center !important;
        }

        /* Responsive adjustments for very small screens */
        @media screen and (max-width: 600px) {
            .gc-main-title {
                font-size: 1.8rem;
            }
            #gc-data-table td, #gc-data-table th {
                padding: 10px;
                font-size: 0.9rem;
            }
        }



















/* cbse section  */


        /* --- RRPS Component Base Styles --- */


        /* Borderless/Box-less Section Container */
        .rrps-content-section {
            max-width: 1200px;
            width: 100%;
            padding: 20px;
            box-sizing: border-box;
            margin: 0 auto;
            margin-top: 50px ;
            margin-bottom: 50px;
        }

        /* Top Bar: Badge and Download Button */
        .rrps-top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .rrps-badge-cbse {
            color: #d13d3d;
            font-weight: 600;
            font-size: 14px;
            letter-spacing: 0.5px;
            text-transform: lowercase;
            padding: 4px 0;
        }

        .rrps-btn-download {
            background-color: #262626;
            color: #ffffff;
            border: none;
            padding: 8px 18px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.1s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }

        .rrps-btn-download:hover {
            background-color: #404040;
        }

        .rrps-btn-download:active {
            transform: scale(0.97);
        }

        /* Section Heading Container with Left Red Border */
        .rrps-heading-wrapper {
            border-left: 4px solid #b91c1c; /* Crimson Left Border */
            padding-left: 14px;
            margin-bottom: 16px;
        }

        .rrps-heading-title {
            color: #1e293b;
            font-size: 24px;
            font-weight: 700;
            margin: 0;
            line-height: 1.3;
        }

        /* Description Paragraph */
        .rrps-description-text {
            color: #475569;
            font-size: 15px;
            line-height: 1.6;
            margin: 0 0 24px 0;
            text-align: justify;
        }

        /* Image Showcase Box */
        .rrps-image-wrapper {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            background-color: #f1f5f9;
            box-sizing: border-box;
        }

        /* Main Image Styles */
        .rrps-showcase-image {
            width: 100%;
            height: auto;
            display: block;
            object-fit: cover;
        }

        /* --- RESPONSIVE MEDIA QUERIES --- */
        @media (max-width: 480px) {
            .rrps-content-section {
                padding: 10px;
            }

            .rrps-heading-title {
                font-size: 20px;
            }

            .rrps-description-text {
                font-size: 14px;
                line-height: 1.5;
                text-align: left;
            }

            .rrps-top-bar {
                margin-bottom: 16px;
            }
        }























/* Contact Page  */



    /* --- Root Theme Variables --- */
    :root {
      --rrps-primary-color: #e6523b; /* Orange-red accent */
      --rrps-text-dark: #1e293b;
      --rrps-text-muted: #64748b;
      --rrps-border-color: #e2e8f0;
      --rrps-bg-light: #ffffff;
    }

    .rrps-map-section{
 margin-top: 50px !important;
    }

    .rrps-content-section{
 margin-bottom: 50px !important;
    }

    /* --- Wrapper Utility --- */
    .rrps-main-wrapper {
      width: 100%;
      margin: 0 auto;
      padding-bottom: 80px;
     
     
    }

    /* --- Breadcrumb Navigation --- */
    .rrps-breadcrumb-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px 20px 16px 20px;
      font-size: 13px;
    }

    .rrps-breadcrumb-link {
      color: var(--rrps-text-muted);
      text-decoration: none;
      transition: color 0.2s ease;
      font-weight: 500;
    }

    .rrps-breadcrumb-link:hover {
      color: var(--rrps-primary-color);
    }

    .rrps-breadcrumb-separator {
      color: var(--rrps-text-muted);
      margin: 0 8px;
    }

    .rrps-breadcrumb-current {
      color: var(--rrps-primary-color);
      font-weight: 600;
    }

    /* --- Map Section --- */
    .rrps-map-section {
      width: 100%;
      height: 400px;
      background-color: #f0f0f0;
      border-bottom: 1px solid var(--rrps-border-color);
      position: relative;
    }

    .rrps-map-iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* --- Content Grid Layout --- */
    .rrps-content-section {
      max-width: 1200px;
      margin: 50px auto 0 auto;
      padding: 0 20px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 40px;
    }

    @media (min-width: 992px) {
      .rrps-content-section {
        grid-template-columns: 4.5fr 6.5fr; /* Perfectly balanced premium side-by-side view */
        gap: 60px;
      }
    }

    /* --- Sidebar: Contact Info Block (Premium Redesign) --- */
    .rrps-info-sidebar {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .rrps-sidebar-header {
      margin-bottom: 10px;
    }

    .rrps-sidebar-title {
      font-size: 26px;
      font-weight: 700;
      color: var(--rrps-text-dark);
      letter-spacing: -0.5px;
      margin-bottom: 8px;
    }

    .rrps-sidebar-subtitle {
      font-size: 14px;
      color: var(--rrps-text-muted);
      line-height: 1.5;
    }

    /* Premium Contact Cards */
    .rrps-info-item {
      display: flex;
      align-items: flex-start;
      gap: 20px;
      background-color: var(--rrps-bg-light);
      border: 1px solid #eef2f6;
      border-radius: 12px;
      padding: 24px 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.01);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .rrps-info-item:hover {
      transform: translateY(-4px);
      border-color: rgba(230, 82, 59, 0.15);
      background-color: #ffffff;
      box-shadow: 0 12px 30px rgba(230, 82, 59, 0.06), 0 4px 12px rgba(0, 0, 0, 0.01);
    }

    /* Elegant Squircle Icon Wrap */
    .rrps-info-icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background-color: rgba(230, 82, 59, 0.06);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .rrps-info-item:hover .rrps-info-icon-wrapper {
      background-color: var(--rrps-primary-color);
    }

    .rrps-info-icon {
      width: 22px;
      height: 22px;
      fill: var(--rrps-primary-color);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .rrps-info-item:hover .rrps-info-icon {
      fill: #ffffff;
    }

    .rrps-info-details {
      display: flex;
      flex-direction: column;
    }

    .rrps-info-title {
      color: var(--rrps-primary-color);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    .rrps-info-text {
      font-size: 14px;
      color: var(--rrps-text-dark);
      line-height: 1.6;
      font-weight: 500;
    }

    /* Highlight class for Phone links */
    .rrps-highlight-text {
      color: var(--rrps-text-dark);
      text-decoration: none;
      transition: color 0.2s ease;
    }

    .rrps-info-item:hover .rrps-highlight-text {
      color: var(--rrps-primary-color);
    }

    .rrps-highlight-text:hover {
      text-decoration: underline;
    }

    /* --- Column 2: Appointment Form Card --- */
    .rrps-form-card {
      background-color: var(--rrps-bg-light);
      border: 1px solid var(--rrps-border-color);
      padding: 30px 20px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    }

    @media (min-width: 768px) {
      .rrps-form-card {
        padding: 40px;
      }
    }

    .rrps-form-header {
      text-align: center;
      margin-bottom: 35px;
    }

    .rrps-form-title {
      font-size: 26px;
      font-weight: 700;
      color: var(--rrps-text-dark);
      letter-spacing: -0.5px;
    }

    .rrps-form-divider {
      width: 40px;
      height: 3px;
      background-color: var(--rrps-primary-color);
      margin: 12px auto 0 auto;
      border-radius: 2px;
    }

    /* --- Form Grid & Input Styling --- */
    .rrps-form-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    @media (min-width: 768px) {
      .rrps-form-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    .rrps-input-field {
      width: 100%;
      padding: 14px 18px;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      font-size: 14px;
      color: var(--rrps-text-dark);
      background-color: #ffffff;
      transition: border-color 0.25s ease, box-shadow 0.25s ease;
      outline: none;
    }

    .rrps-input-field:focus {
      border-color: var(--rrps-primary-color);
      box-shadow: 0 0 0 4px rgba(230, 82, 59, 0.12);
    }

    .rrps-grid-span-full {
      grid-column: 1 / -1;
    }

    .rrps-textarea-field {
      min-height: 150px;
      resize: vertical;
    }

    /* --- Custom Pure CSS reCAPTCHA Box --- */
    .rrps-captcha-container {
      margin-top: 15px;
      width: 100%;
      max-width: 302px;
      height: 76px;
      background-color: #f8fafc;
      border: 1px solid #cbd5e1;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      user-select: none;
    }

    .rrps-captcha-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* CSS Checkbox effect */
    .rrps-captcha-checkbox-wrapper {
      position: relative;
      width: 28px;
      height: 28px;
    }

    .rrps-captcha-checkbox {
      width: 100%;
      height: 100%;
      border: 2px solid #cbd5e1;
      border-radius: 3px;
      background-color: #ffffff;
      cursor: pointer;
      position: relative;
      transition: border-color 0.2s ease;
    }

    .rrps-captcha-checkbox:hover {
      border-color: #94a3b8;
    }

    .rrps-captcha-native {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }

    .rrps-captcha-native:checked + .rrps-captcha-checkbox {
      border-color: #2563eb;
      background-color: #ffffff;
    }

    .rrps-captcha-native:checked + .rrps-captcha-checkbox::after {
      content: "";
      position: absolute;
      left: 8px;
      top: 3px;
      width: 6px;
      height: 12px;
      border: solid #16a34a;
      border-width: 0 3px 3px 0;
      transform: rotate(45deg);
    }

    .rrps-captcha-text {
      font-size: 13px;
      color: #334155;
      font-weight: 500;
    }

    .rrps-captcha-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .rrps-captcha-logo {
      width: 32px;
      height: 32px;
      margin-bottom: 2px;
    }

    .rrps-captcha-policy {
      font-size: 8px;
      color: #64748b;
      text-align: center;
      line-height: 1.2;
    }

    .rrps-captcha-policy-link {
      color: #64748b;
      text-decoration: none;
    }

    .rrps-captcha-policy-link:hover {
      text-decoration: underline;
    }

    /* --- Form Footer Block --- */
    .rrps-form-footer {
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
    }

    @media (min-width: 576px) {
      .rrps-form-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }

    .rrps-footer-disclaimer {
      font-size: 13px;
      color: var(--rrps-text-muted);
      font-weight: 500;
    }

    .rrps-submit-btn {
      min-width: 140px;
      height: 46px;
      padding: 0 28px;
      border: 1px solid var(--rrps-border-color);
      background-color: #ffffff;
      color: var(--rrps-text-dark);
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      outline: none;
    }

    .rrps-submit-btn:hover {
      background-color: var(--rrps-primary-color);
      border-color: var(--rrps-primary-color);
      color: #ffffff;
      box-shadow: 0 6px 20px rgba(230, 82, 59, 0.25);
    }




#rps-contact-wrapper,
#rps-contact-wrapper * {
  box-sizing: border-box;
}

#rps-contact-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px 50px;
  font-family: Arial, Helvetica, sans-serif;
}

#rps-contact-box {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

#rps-contact-title {
  background: #dc2d2d;
  color: #ffffff;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 24px 15px 22px;
  text-transform: uppercase;
}

#rps-contact-content {
  padding: 20px 20px 24px;
}

#rps-contact-wrapper .rps-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

#rps-contact-wrapper .rps-info-row:last-child {
  margin-bottom: 0;
}

#rps-contact-wrapper .rps-info-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: #dc2d2d;
  display: flex;
  align-items: center;
  justify-content: center;
}

#rps-contact-wrapper .rps-info-icon svg {
  width: 18px;
  height: 18px;
  fill: #ffffff;
}

#rps-contact-wrapper .rps-info-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.7;
  color: #1d1d1d;
  word-break: break-word;
  padding-top: 2px;
}

#rps-contact-wrapper .rps-info-text a {
  color: #1d1d1d;
  text-decoration: none;
}

#rps-contact-wrapper .rps-info-text a:hover {
  color: #dc2d2d;
}


/* Mobile */
@media (max-width: 480px) {

  #rps-contact-title {
    font-size: 21px;
    padding: 20px 12px;
  }

  #rps-contact-content {
    padding: 18px 15px 22px;
  }

  #rps-contact-wrapper .rps-info-row {
    gap: 12px;
    margin-bottom: 16px;
  }

  #rps-contact-wrapper .rps-info-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  #rps-contact-wrapper .rps-info-icon svg {
    width: 17px;
    height: 17px;
  }

  #rps-contact-wrapper .rps-info-text {
    font-size: 13.5px;
    line-height: 1.6;
  }
}


/* Small Mobile */
@media (max-width: 360px) {

  #rps-contact-title {
    font-size: 19px;
  }

  #rps-contact-wrapper .rps-info-text {
    font-size: 13px;
  }
}


















/* Careers Page Start  */


       /* --- Premium Root Variable Declarations & CSS Reset --- */
        :root {
            --taf-primary-color: #b53c29;
            /* Sophisticated Terracotta */
            --taf-primary-gradient: linear-gradient(135deg, #c54a37, #a02e1c);
            --taf-text-dark: #1e293b;
            /* Luxurious Slate Dark */
            --taf-text-muted: #64748b;
            /* Modern Cool Grey */
            --taf-bg-light: #f8fafc;
            /* Ultra-light slate background */
            --taf-border-color: #cbd5e1;
            /* Subtle Slate Border */
            --taf-border-focus: #b53c29;
            --taf-font-primary: 'Plus Jakarta Sans', sans-serif;
            --taf-font-secondary: 'Inter', sans-serif;
            --taf-shadow-premium: 0 10px 30px -10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.02);
            --taf-shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
            --taf-shadow-hover: 0 20px 40px -15px rgba(181, 60, 41, 0.1), 0 1px 10px rgba(0, 0, 0, 0.02);
        }

        /* Basic box sizing and padding resets */
        .taf-main-container,
        .taf-main-container * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: var(--taf-font-primary);
        }

        /* --- Global Wrapper Setup --- */
        .taf-main-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: transparent;
            margin-bottom: 50px;
        }

        /* --- Section Titles with Sleek Accent Bar --- */
        .taf-section-header {
            display: flex;
            align-items: center;
            font-size: 22px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 28px;
            letter-spacing: -0.02em;
        }

        .taf-section-header::before {
            content: "";
            display: inline-block;
            width: 5px;
            height: 24px;
            background: var(--taf-primary-gradient);
            margin-right: 14px;
            border-radius: 99px;
        }

        /* --- Section 1: Premium Teacher Application Form --- */
        .taf-form-section {
            background-color: #ffffff;
            border-radius: 16px;
            padding: 40px;
            box-shadow: var(--taf-shadow-premium);
            margin-bottom: 32px;
            border: 1px solid rgba(226, 232, 240, 0.8);
        }

        /* Fully Responsive Grid Layout */
        .taf-grid-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px 28px;
            margin-bottom: 24px;
        }

        /* Form Group Styles */
        .taf-form-group {
            display: flex;
            flex-direction: column;
        }

        .taf-form-label {
            font-size: 13px;
            font-weight: 600;
            color: var(--taf-text-dark);
            margin-bottom: 10px;
            letter-spacing: -0.01em;
            font-family: var(--taf-font-secondary);
        }

        /* Inputs & Select Controls */
        .taf-input-control {
            width: 100%;
            height: 48px;
            padding: 12px 16px;
            font-size: 14px;
            color: var(--taf-text-dark);
            background-color: #f8fafc;
            /* Subtle off-white input fill */
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            outline: none;
            font-family: var(--taf-font-secondary);
        }

        .taf-input-control::placeholder {
            color: #94a3b8;
        }

        .taf-input-control:hover {
            border-color: #cbd5e1;
            background-color: #ffffff;
        }

        .taf-input-control:focus {
            background-color: #ffffff;
            border-color: var(--taf-border-focus);
            box-shadow: 0 0 0 4px rgba(181, 60, 41, 0.1);
        }

        /* Customized Select Arrows matching standard browsers */
        select.taf-input-control {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
            background-repeat: no-repeat;
            background-position: calc(100% - 16px) 50%;
            background-size: 16px;
            padding-right: 44px;
            cursor: pointer;
        }

        /* Standardized File Input Custom Styling */
        .taf-file-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            height: 48px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background-color: #f8fafc;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .taf-file-wrapper:hover {
            border-color: #cbd5e1;
            background-color: #ffffff;
        }

        .taf-file-wrapper:focus-within {
            background-color: #ffffff;
            border-color: var(--taf-border-focus);
            box-shadow: 0 0 0 4px rgba(181, 60, 41, 0.1);
        }

        .taf-file-hidden {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .taf-file-custom-btn {
            height: 100%;
            padding: 0 18px;
            background-color: #f1f5f9;
            border-right: 1px solid #e2e8f0;
            display: flex;
            align-items: center;
            font-size: 13px;
            font-weight: 600;
            color: #475569;
            user-select: none;
            transition: background-color 0.2s ease;
        }

        .taf-file-wrapper:hover .taf-file-custom-btn {
            background-color: #e2e8f0;
        }

        .taf-file-custom-text {
            padding-left: 16px;
            font-size: 13px;
            color: var(--taf-text-muted);
            user-select: none;
            font-family: var(--taf-font-secondary);
        }

        /* Apply Now Primary Action Button */
        .taf-btn-submit {
            display: block;
            width: 100%;
            height: 52px;
            background: var(--taf-primary-gradient);
            color: #ffffff;
            font-size: 15px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
            box-shadow: 0 4px 14px rgba(181, 60, 41, 0.25);
        }

        .taf-btn-submit:hover {
            box-shadow: 0 6px 20px rgba(181, 60, 41, 0.4);
            transform: translateY(-1px);
            filter: brightness(1.05);
        }

        .taf-btn-submit:active {
            transform: translateY(1px);
            box-shadow: 0 2px 10px rgba(181, 60, 41, 0.2);
        }


        /* --- Section 2: Benefits Section --- */
        .taf-benefits-section {
            background-color: #f8fafc;
            border-radius: 16px;
            padding: 40px;
            border: 1px solid #e2e8f0;
        }

        /* Responsive Grid for cards (4 columns desktop, scaling down) */
        .taf-benefits-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        /* Premium Benefit Item Styling */
        .taf-benefit-card {
            background-color: #ffffff;
            border-radius: 12px;
            padding: 32px 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            box-shadow: var(--taf-shadow-card);
            border: 1px solid rgba(226, 232, 240, 0.6);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .taf-benefit-card:hover {
            transform: translateY(-6px);
            box-shadow: var(--taf-shadow-hover);
            border-color: rgba(181, 60, 41, 0.15);
        }

        /* SVG Icons Styling */
        .taf-benefit-icon {
            width: 54px;
            height: 54px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .taf-benefit-title {
            font-size: 12px;
            line-height: 1.6;
            font-weight: 700;
            color: #334155;
            margin-top: auto;
            letter-spacing: -0.01em;
        }


        /* --- Media Queries for Responsive Design --- */

        /* Tablet view (Up to 768px) */
        @media (max-width: 820px) {
            .taf-benefits-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
        }

        /* Mobile View (Up to 600px) */
        @media (max-width: 600px) {
            .taf-main-container {
                padding: 16px;
            }

            .taf-form-section {
                padding: 28px 20px;
                border-radius: 12px;
            }

            .taf-benefits-section {
                padding: 28px 20px;
                border-radius: 12px;
            }

            .taf-grid-row {
                grid-template-columns: 1fr;
                /* Force 1 column layout on mobile */
                gap: 20px;
                margin-bottom: 20px;
            }

            .taf-section-header {
                font-size: 19px;
                margin-bottom: 22px;
            }
        }

        /* Ultra-mobile View (Up to 400px) */
        @media (max-width: 420px) {
            .taf-benefits-grid {
                grid-template-columns: 1fr;
                /* Standard single list on tiny screen */
                gap: 16px;
            }

            .taf-benefit-card {
                padding: 24px 16px;
            }
        }





















/* provisional-form sectoion  */


     /* Base Reset & Variables for smooth styling */
        :root {
            --bg-gradient-start: #f3f4f6;
            --bg-gradient-end: #e5e7eb;
            --frame-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
            --frame-shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.22);
            --border-radius-custom: 24px;
            --transition-speed: 0.5s;
        }

       

        /* Unique ID for the parent section container - Max Width 1200px */
        #custom-tall-image-section-3829 {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 24px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Inner container to align the two images left and right */
        .tall-images-grid-5543z {
            display: flex;
            width: 100%;
            gap: 40px;
            justify-content: center;
            align-items: center;
        }

        /* Unique wrapper class for both frames (Width < Height) */
        .tall-image-wrapper-9921x {
            flex: 1;
            width: 100%;
            /* Strict Portrait aspect ratio (2:3) */
            aspect-ratio: 2.2/ 3; 
            max-width: auto; /* Perfectly balances two images in 1200px container */
            /* border-radius: var(--border-radius-custom); */
            overflow: hidden;
            box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
            transition: transform var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1), 
                        box-shadow var(--transition-speed) ease;
            background-color: #e2e8f0; /* Fallback background color */
        }

      
        /* Unique image class for styling the image elements */
        .tall-image-element-8812y {
            width: 100%;
            height: 100%;
            /* Prevents image stretching and keeps center focus */
            object-fit: cover; 
            object-position: center;
            display: block;
            transition: transform var(--transition-speed) cubic-bezier(0.16, 1, 0.3, 1);
        }

       

        /* Responsive Design: Tablet and Mobile adjustments */
        @media (max-width: 768px) {
            #custom-tall-image-section-3829 {
                padding: 40px 16px;
            }
            .tall-images-grid-5543z {
                flex-direction: column; /* Stack vertically on small screens */
                gap: 30px;
            }
            .tall-image-wrapper-9921x {
                max-width: 380px; /* Better size for mobile vertical view */
            }
        }

        @media (max-width: 480px) {
            .tall-image-wrapper-9921x {
                max-width: 100%; /* Fully fluid on tiny screens */
            }
        }