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



 /* Apply Poppins to everything on the About Page */
 body,
 .edu_about_intro,
 .edu_about_details,
 .edu_matrix_section,
 .edu_why_choose,
 .ctaBand {
     font-family: 'Poppins', sans-serif !important;
 }

 /* Specific weights for Headings to make them "pop" */
 h2,
 h3,
 .edu_main_title,
 .edu_ref_title {
     font-family: 'Poppins', sans-serif;
     font-weight: 800;
     /* Extra Bold for main titles */
     letter-spacing: -0.5px;
 }

 h6,
 .matrix_text h3 {
     font-family: 'Poppins', sans-serif;
     font-weight: 600;
     /* Semi-bold for sub-headings */
 }

 p,
 span,
 a {
     font-family: 'Poppins', sans-serif;
     font-weight: 400;
     /* Regular for body text */
 }


 /* Shortening the About Banner */
 .banner.about_banner {
     padding: 120px 0 60px 0 !important;
     /* Increased top padding to push content below header */
     min-height: 300px !important;
     /* Set a reasonable minimum height for mobile */
     display: flex;
     align-items: center;
     /* Vertically centers the text in the remaining space */
     background-position: center;
 }

 .about_banner_content h1 {
     font-size: 32px;
     /* Slightly smaller font to match the shorter height */
     margin-bottom: 10px;
 }

 .about_banner_content p {
     font-size: 16px !important;
     /* Cleaner, smaller text for a compact look */
     margin-bottom: 15px;
 }

 /* Styling the Span in the H1 */
 .about_banner_content h1 span {
     color: #B32024;
     /* Your brand red */
     display: block;
     font-weight: 800;
 }

 /* Enhancing the Banner content alignment */
 .about_banner_content {
     max-width: 850px;
     margin: 0 auto;
     text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
     /* Helps text readability on image backgrounds */
     margin-top: 20px;
     /* Additional breathing room from the top */
 }

 .about_banner_content p {
     font-size: 20px !important;
     line-height: 1.6;
     color: #0c1d3b !important;
     background: transparent !important;
     /* Overriding the dark background for a cleaner look */
     padding: 0 !important;
 }

 /* Modernizing the button on hover */
 .about_banner_content .btn-primary:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(179, 32, 36, 0.4);
     background: #961a1e;
 }


 /* This ensures the logo maintains its proportions */
 .brand__logo {
     width: 140px;
     height: 150px;
     object-fit: contain;
     /* transform: translateY(20px); */
     position: absolute;
     top: -44px;
 }



 .header.scrolled .brand__logo {
     height: 110px;
     /* Smaller height for sticky mode */
     width: auto;
     margin-top: -15px;
 }



 /* --- EDU ABOUT DETAILS SECTION --- */
 .edu_about_details {
     padding: 80px 0;
     background-color: #fff;
     overflow: hidden;
 }

 /* --- Content Justification --- */
 .text-justify {
     text-align: justify;
     text-justify: inter-word;
 }

 /* --- New Header Wrapper (Replaces Yellow Line) --- */
 .edu_header_wrapper {
     display: flex;
     align-items: center;
     gap: 15px;
     /* Space between title and decorative line */
     margin-bottom: 25px;
 }

 .edu_ref_title {
     font-size: 34px;
     font-weight: 800;
     color: #0c1d3b;
     margin-bottom: 0 !important;
     /* Reset for flex alignment */
     white-space: nowrap;
 }

 /* Remove the old yellow line pseudo-element */
 .edu_ref_title::after {
     display: none !important;
     content: none !important;
 }

 /* --- Decorative Line & Dots --- */
 .edu_decorative_line {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-grow: 1;
 }

 .edu_decorative_line .line {
     height: 2px;
     background: #0c1d3b;
     width: 60px;
     /* Length of line before dots */
 }

 .edu_decorative_line .dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }

 .dot.blue {
     background-color: #0c1d3b;
 }

 .dot.gold {
     background-color: #D4AF37;
 }

 .dot.light-gold {
     background-color: #E6D5B8;
 }

 /* --- Text Content --- */
 .edu_detail_content p {
     color: #444;
     line-height: 1.8;
     font-size: 16px;
     margin-bottom: 20px;
 }

 /* --- IMAGE & FRAME FIT LOGIC --- */
 .edu_ref_image_wrapper {
     position: relative;
     display: inline-block;
     width: 100%;
     /* Remove padding to ensure the frame can snap to image edges */
     padding: 0;
 }

 .edu_img_fluid {
     display: block;
     width: 100%;
     height: auto;
     border-radius: 12px;
     position: relative;
     z-index: 1;
     /* Image sits below the border */
 }

 .edu_image_frame {
     position: absolute;
     /* Snaps border exactly to the image dimensions */
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;

     border: 3px solid orange;
     /* Your Navy Blue */
     border-radius: 12px;
     z-index: 2;
     /* Sits on top of image edges */
     pointer-events: none;
     /* Allows clicking the image through the border */
 }

 /* Optional: If you use the offset classes, they override the 'fit' logic */
 .frame_offset {
     top: 15px;
     left: 15px;
     right: -15px;
     bottom: -15px;
 }

 /* --- ICON GRID --- */
 .edu_icon_box {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 12px;
     padding: 10px;
 }

 .edu_icon_box img {
     width: 45px;
     height: 45px;
     object-fit: contain;
 }

 .edu_icon_box h6 {
     font-size: 14px;
     font-weight: 700;
     color: #334155;
     margin: 0;
     line-height: 1.4;
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 991px) {
     .edu_ref_image_wrapper {
         margin-bottom: 50px;
     }

     .edu_ref_title {
         font-size: 28px;
     }

     /* Adjust border thickness for smaller screens */
     .edu_image_frame {
         border-width: 6px;
     }
 }

 @media (max-width: 768px) {
     .edu_header_wrapper {
         flex-direction: row;
         justify-content: flex-start;
     }

     .edu_decorative_line .line {
         width: 40px;
         /* Shorter line on mobile */
     }
 }

 /*ABOUT INTRO*/
 .edu_about_intro {
     padding: 60px 0;
     background-color: #fff;
 }

 /* --- Content Justification --- */
 .text-justify {
     text-align: justify;
     text-justify: inter-word;
     /* Ensures clean spacing between words */
 }

 /* --- Header & Decorative Dots --- */
 .edu_header_wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
     /* border-bottom: 3px solid #0c1d3b; */
     padding-bottom: 5px;
 }

 .edu_main_title {
     font-size: 42px;
     font-weight: 800;
     color: #0c1d3b;
     margin: 0;
     white-space: nowrap;
 }

 .edu_decorative_line {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-grow: 1;
     justify-content: flex-end;
 }

 .edu_decorative_line .line {
     height: 2px;
     background: #0c1d3b;
     width: 30%;
     /* Adjusts the length of the line */
 }

 .edu_decorative_line .dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
 }

 .dot.blue {
     background-color: #0c1d3b;
 }

 .dot.gold {
     background-color: #D4AF37;
 }

 .dot.light-gold {
     background-color: #E6D5B8;
 }

 /* --- Increased Icon & Text Flex --- */
 .edu_intro_flex {
     display: flex;
     align-items: flex-start;
     gap: 40px;
     margin-top: 30px;
 }

 .edu_intro_icon {
     flex: 0 0 180px;
     /* Increased width from 120px to 180px */
 }

 .edu_intro_icon img {
     width: 100%;
     height: auto;
     /* Maintains aspect ratio while increasing size */
     display: block;
 }

 .edu_intro_text p,
 .edu_intro_footer p {
     font-size: 18px;
     color: #333;
     line-height: 1.7;
     margin-bottom: 15px;
 }

 /* --- Responsive Adjustments --- */
 @media (max-width: 991px) {
     .edu_intro_icon {
         flex: 0 0 150px;
         /* Slightly smaller on tablets */
     }
 }

 @media (max-width: 768px) {
     .edu_intro_flex {
         flex-direction: column;
         align-items: center;
         text-align: center;
     }

     .edu_intro_icon {
         flex: 0 0 140px;
         margin-bottom: 20px;
     }

     .edu_decorative_line {
         display: none;
     }
 }




 /* --- WHY CHOOSE SECTION --- */
 .edu_why_choose {
     padding: 80px 0;
     background-color: #fff;
 }

 /* Reusing your Header Wrapper styles */
 .edu_header_wrapper {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 15px;
 }

 .edu_main_title {
     font-size: 32px;
     font-weight: 800;
     color: #0c1d3b;
     margin: 0;
 }

 .edu_decorative_line {
     display: flex;
     align-items: center;
     gap: 8px;
     flex-grow: 1;
 }

 .edu_decorative_line .line {
     height: 2px;
     background: #0c1d3b;
     width: 60px;
 }

 .edu_decorative_line .dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
 }

 .dot.blue {
     background-color: #0c1d3b;
 }

 .dot.gold {
     background-color: #D4AF37;
 }

 .dot.light-gold {
     background-color: #E6D5B8;
 }

 /* Choice Box Styling */
 .edu_choice_box {
     padding: 20px;
     transition: transform 0.3s ease;
 }

 .edu_choice_box:hover {
     transform: translateY(-10px);
 }

 .choice_number {
     width: 35px;
     height: 35px;
     border: 2px solid #0c1d3b;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px;
     font-weight: 700;
     color: #0c1d3b;
 }

 .choice_icon {
     width: 100%;
     max-width: 150px;
     margin: 0 auto 20px;
 }

 .choice_icon img {
     width: 100%;
     height: auto;
     object-fit: contain;
 }

 .edu_choice_box h6 {
     font-size: 16px;
     font-weight: 700;
     color: #333;
     line-height: 1.4;
     margin: 0;
 }

 /* Mobile Adjustments */
 @media (max-width: 768px) {
     .edu_main_title {
         font-size: 24px;
     }

     .edu_decorative_line {
         display: none;
     }
 }

 .edu_about_intro .edu_decorative_line .line {
     width: 350px;
     /* Set a specific length in pixels */
     flex-grow: 0;
     /* Disable stretching so the fixed width takes over */
     height: 3px;
 }

 .edu_why_choose .edu_decorative_line .line {
     width: 250px;
     /* Set a specific length in pixels */
     flex-grow: 0;
     /* Disable stretching so the fixed width takes over */
     height: 3px;
 }

 .about_banner {
     padding: 50px 0;
     background-size: cover;
     position: relative;
     background-position: center;
     z-index: 1;
     background-image: url(../images/about/about_banner.png);
 }

 .about_banner::before {
     position: absolute;
     content: "";
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: linear-gradient(180deg, #f9f9f97d, #ffc83d75, #F9A825);
     z-index: -1;
 }

 .ctaBand button.btn--primary {
     border: none;
     cursor: pointer;
     font-family: inherit;
     /* Ensures it uses your site font */
     display: inline-block;
 }

 /* Ensure buttons and links sit nicely side-by-side */
 .ctaBand .btn {
     margin: 10px 5px;
     vertical-align: middle;
 }


 /* SECTION WRAPPER (Scoped) */
 .edutech-mvv-section {
     padding: 60px 20px;
     background: #ffffff;
     font-family: 'Poppins', sans-serif;
 }

 /* Apply text styling ONLY inside section */
 .edutech-mvv-section p,
 .edutech-mvv-section li {
     line-height: 1.5;
     color: #1e293b;
     text-align: justify;
 }

 .edutech-mvv-section h2 {
     color: #f97316;
 }

 /* CONTAINER */
 .mvv-container {
     max-width: 1000px;
     margin: auto;
     text-align: center;
 }

 /* TABS */
 .mvv-tabs {
     display: flex;
     justify-content: center;
     margin-bottom: 30px;
     gap: 15px;
     flex-wrap: wrap;
 }

 .mvv-tab {
     padding: 12px 25px;
     border: none;
     background: #1e293b;
     color: #fff;
     cursor: pointer;
     border-radius: 30px;
     font-weight: 600;
     transition: 0.3s;
 }

 .mvv-tab:hover {
     background: #f97316;
 }

 .mvv-tab.active {
     background: #f97316;
     box-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
 }

 /* CONTENT */
 .mvv-box {
     display: none;
     background: #1e293b;
     padding: 30px;
     border-radius: 15px;
     text-align: left;
     animation: fadeIn 0.5s ease;
 }

 .mvv-box.active {
     display: block;
 }

 .mvv-box h2 {
     margin-bottom: 15px;
 }

 .mvv-box ul {
     margin-top: 15px;
     padding-left: 20px;
 }

 .mvv-box li {
     margin-bottom: 10px;
     color: #e2e8f0;
 }

 .mvv-box p {
     color: #e2e8f0;
 }

 .mvv-box p,
 .mvv-box li {
     color: #e2e8f0;
     text-align: justify;
 }

 /* ANIMATION */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* MOBILE */
 @media (max-width: 768px) {
     .mvv-box {
         padding: 20px;
     }

     .mvv-tab {
         padding: 10px 18px;
         font-size: 14px;
     }
 }




 @media (max-width: 768px) {

     /* --- 1. BANNER SLIMMING & IMAGE POSITIONING --- */
     .banner.about_banner {
         /* Set very tight top padding to push content just below header */
         padding: 60px 0 20px 0 !important;
         min-height: 200px !important;
         /* Forces a slim banner profile */

         /* Position to show faces (left/center) and move image down to reveal heads */
         background-position: 65% 62% !important;
         background-size: cover;
     }

     .about_banner_content h1 {
         font-size: 20px !important;
         line-height: 1.2;
         margin-bottom: 5px !important;
     }

     .about_banner_content p {
         font-size: 13px !important;
         line-height: 1.4;
         padding: 0 10px !important;
     }

     /* --- 2. ABOUT US SECTION: CENTERING HEADING & GAP FIX --- */
     .edu_about_intro {
         padding: 35px 0 10px 0 !important;
         /* Pulls heading up toward banner */
     }

     .edu_about_intro .edu_header_wrapper {
         display: block !important;
         /* Dissolve flex container to center */
         text-align: center;
         /* Center heading text horizontally */
         width: 100%;
         margin-bottom: 5px !important;
         /* MINIMIZED GAP between heading and content */
     }

     .edu_about_intro .edu_main_title {
         font-size: 24px !important;
         /* Scale title for mobile clarity */
         display: inline-block;
         white-space: normal;
         /* Allow wrapping on small screens */
         margin-bottom: 0 !important;
     }

     /* HIDES THE DECORATIVE LINE & DOTS on mobile for a clean center look */
     .edu_about_intro .edu_decorative_line {
         display: none !important;
     }

     /* --- 3. IMPLEMENTING LEFT-ALIGNMENT & TEXT-WRAP --- */

     /* Disables the flexbox structure for standard block flow */
     .edu_intro_flex {
         display: block !important;
         width: 100%;
         padding: 0 15px;
         /* Standard side padding */
         clear: both;
         /* Clears floats above */
         margin-top: 0 !important;
         /* Pulls content block directly up */
     }

     /* Target and style the small left-floated image box */
     .edu_intro_icon {
         float: left;
         /* MAGIC STEP: Drags image left, wraps text to the right */
         width: 100px !important;
         /* Small icon size as requested */
         margin-right: 12px !important;
         /* Gap between image and text next to it */
         margin-bottom: 5px !important;
         /* Prevents text below from touching the image */
         display: block;
         margin-top: 5px !important;
         /* Aligns top of icon with text */
     }

     /* Ensure the icon image itself scales to fit its parent box */
     .edu_intro_icon img {
         width: 100%;
         height: auto;
         display: block;
     }

     /* --- 4. BODY CONTENT SPACING & GAP REDUCTION --- */
     .edu_intro_text {
         display: block;
         text-align: justify;
         /* Maintains clean, even text edges */
         width: auto;
     }

     /* Reduces line-height and bottom margins on all paragraphs */
     .edu_intro_text p,
     .edu_intro_footer p {
         font-size: 14px !important;
         line-height: 1.5;
         margin-bottom: 8px;
         /* Pulls text blocks closer together */
     }

     /* Fixes the gap specifically above 'Strong Understanding' paragraph */
     .edu_intro_footer.mt-4 {
         margin-top: 0 !important;
         /* Force override of Bootstrap mt-4 margin */
         padding: 0 15px;
     }

     /* --- 5. LOWER SECTIONS COMPRESSION --- */
     .edu_about_details {
         padding: 10px 0 !important;
         /* Pulls content up significantly */
     }

     .edu_custom_row {
         margin-bottom: 15px !important;
         /* Tightens space between rows */
     }

     .edu_ref_image_wrapper {
         margin-bottom: 10px !important;
         margin-top: 0 !important;
     }

     /* Adjust the header logo to keep the header height compact */
     .brand__logo {
         width: 85px !important;
         position: relative;
         top: -5px !important;
     }
 }



 @media (max-width: 768px) {

     /* 1. Unifying the Heading Style and Spacing */
     .edu_about_details .edu_header_wrapper {
         display: block !important;
         text-align: center;
         width: 100%;
         margin-bottom: 8px !important;
         /* Tightens gap below "Who We Are" */
     }

     .edu_ref_title {
         font-size: 24px !important;
         /* Matches centered About Us title */
         display: inline-block;
         margin-bottom: 0 !important;
     }

     /* Hide decorative lines/dots for this section on mobile */
     .edu_about_details .edu_decorative_line {
         display: none !important;
     }

     /* 2. Standardizing the Text Typography and Padding */
     .edu_about_details {
         padding: 10px 0 !important;
         /* Reduces large top/bottom section gaps */
     }

     .edu_detail_content {
         padding: 0 15px !important;
         /* Matches the 15px side padding of previous section */
     }

     /* Matches font-size and line-height exactly to your intro paragraph */
     .edu_detail_content p {
         font-size: 14px !important;
         line-height: 1.5 !important;
         margin-bottom: 8px !important;
         /* Matches paragraph-to-paragraph spacing */
         text-align: justify;
     }

     /* 3. Fixing the Image Wrapper Spacing */
     .edu_custom_row {
         margin-bottom: 0 !important;
         /* Removes gap between text and its following image */
     }


 }


 @media (max-width: 768px) {

     /* 1. Center Title and Reduce Section Gaps */
     .edu_about_details .edu_header_wrapper {
         display: block !important;
         text-align: center;
         width: 100%;
         margin-bottom: 15px !important;
     }

     .edu_ref_title {
         font-size: 24px !important;
         /* Standardized with previous sections */
         display: inline-block;
         padding-top: 25px;
     }

     /* 2. Shrink the Service Icons and Text */
     .edu_icon_box {
         padding: 5px !important;
         /* Tightens internal spacing */
         gap: 8px !important;
     }

     .edu_icon_box img {
         width: 35px !important;
         /* Reduced from 45px for a smaller footprint */
         height: 35px !important;
     }

     .edu_icon_box h6 {
         font-size: 12px !important;
         /* Smaller, cleaner font for the grid labels */
         line-height: 1.3 !important;
         font-weight: 600 !important;
         margin: 0 auto !important;
         max-width: 140px;
         /* Prevents long text from pushing the grid apart */
     }

     /* 3. Adjust the Grid Spacing */
     .edu_services_icon_grid .row.g-4 {
         --bs-gutter-y: 1rem !important;
         /* Reduces vertical gap between icon rows */
         --bs-gutter-x: 0.5rem !important;
         /* Brings columns slightly closer */
     }

     .edu_services_icon_grid {
         padding: 0 10px !important;
     }
 }

@media (max-width: 768px) {
    /* 1. Target the row container for reordering */
    .edu_about_details .edu_custom_row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Heading comes first */
    .edu_about_details .edu_header_wrapper {
        order: 1 !important;
        display: block !important;
        text-align: center;
        width: 100%;
        margin-bottom: 20px !important;
    }

    .edu_ref_title {
        font-size: 24px !important;
        display: inline-block;
    }

    .edu_about_details .edu_decorative_line {
        display: none !important;
    }

    /* 3. Cards Section (Service Grid) comes second */
    .edu_services_icon_grid {
        order: 2 !important;
        padding: 0 10px !important;
    }

    /* Force 2 cards per row (2nd item in grid) */
    .edu_services_icon_grid .row {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .edu_services_icon_grid .col-6 {
        width: 50% !important; /* Forces 2 per row */
        padding: 5px !important;
    }

    /* 4. Image comes last */
    .edu_ref_image_wrapper {
        order: 3 !important;
        margin-top: 20px !important;
        margin-bottom: 30px !important;
    }

    /* Shrink the icons for the 2x3 grid */
    .edu_icon_box img {
        width: 35px !important;
        height: 35px !important;
    }

    .edu_icon_box h6 {
        font-size: 11px !important;
        line-height: 1.2 !important;
    }
}

 @media (max-width: 768px) {

     /* 1. Reduce overall section padding */
     .edu_why_choose {
         padding: 40px 0 !important;
         /* Pulls the entire section up */
     }

     /* 2. Tighten Heading Gaps */
     .edu_why_choose .edu_header_wrapper {
         display: block !important;
         text-align: center;
         width: 100%;
         margin-bottom: 10px !important;
         /* Reduced from 20px */
     }

     .edu_why_choose .edu_main_title {
         font-size: 20px !important;
         /* Slightly smaller to fit two lines tightly */
         line-height: 1.2 !important;
         display: block;
         max-width: 260px;
         margin: 0 auto !important;
         white-space: normal !important;
     }

     .edu_why_choose .edu_decorative_line {
         display: none !important;
     }

     /* 3. Tighten the 2x2 Grid Gaps */
     .edu_why_choose .row.g-4 {
         display: flex !important;
         flex-wrap: wrap !important;
         justify-content: center;
         --bs-gutter-y: 0.5rem !important;
         /* Reduces vertical gap between rows */
     }

     .edu_why_choose .col-md-3 {
         width: 50% !important;
         padding: 2px !important;
         /* Minimal side padding */
     }

     /* 4. Minimize Choice Box Internal Spacing */
     .edu_choice_box {
         padding: 5px !important;
         /* Very tight padding */
         margin-bottom: 5px !important;
     }

     .choice_number {
         width: 22px !important;
         height: 22px !important;
         font-size: 11px !important;
         margin-bottom: 5px !important;
         /* Pulls icon closer to number */
     }

     .choice_icon {
         max-width: 70px !important;
         /* Slightly smaller for tighter layout */
         margin-bottom: 5px !important;
         /* Pulls text closer to icon */
     }

     .edu_choice_box h6 {
         font-size: 11px !important;
         line-height: 1.2 !important;
         font-weight: 600 !important;
         padding: 0 2px;
     }
 }