@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');


 :root {
   /* =========================================
     Primary Brand Colors 
     ========================================= */

   /**
   * The main brand color, consistent with Bootstrap 5's default blue. 
   * Used for primary buttons, active links, and key icons.
   */
   --primary-color: #0d6efd;

   /**
   * A slightly darker shade of the primary color. 
   * Perfect for hover states on buttons or for secondary elements.
   */
   --primary-darker: #0056b3;

   /**
   * A vibrant, eye-catching blue from our CTA gradient.
   * Ideal for highlights, special announcements, or call-to-action sections.
   */
   --accent-color: #4364F7;


   /* =========================================
     Background Colors
     ========================================= */

   /**
   * A very light gray. Serves as the default background for the entire site, 
   * giving it a clean and soft feel.
   */
   --bg-light: #F8F9FA;

   /**
   * Pure white. Used for cards and sections that need to stand out
   * against the light background.
   */
   --bg-white: #FFFFFF;


   /* =========================================
     Text Colors
     ========================================= */

   /**
   * The primary text color. A soft, charcoal black that is easier on the
   * eyes than pure #000.
   */
   --text-dark: #212529;

   /**
   * For secondary text, captions, or less important information.
   */
   --text-muted: #6c757d;

   /**
   * High-contrast white text for use on dark or gradient backgrounds.
   */
   --text-on-dark: #F8F9FA;


   /* =========================================
     Utility Colors (Border, Shadow, etc.)
     ========================================= */

   /**
   * A subtle gray for borders on cards, inputs, and other UI elements.
   */
   --border-color: #dee2e6;

   /**
   * Pre-defined soft shadows used in our modern card designs.
   * 'soft' is for the default state and 'medium' for the hover state.
   */
   --shadow-soft: 0 4px 25px rgba(0, 0, 0, 0.05);
   --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.1);


   /* =========================================
     Gradient
     ========================================= */

   /**
   * The vibrant gradient used in our CTA section, blending the
   * primary and accent colors for a modern look.
   */
   --gradient-primary: linear-gradient(45deg, var(--primary-color), var(--accent-color));
 }




 * {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: "Nunito", serif;
 }


 /* Body */
 body {
   font-family: "Nunito", sans-serif;
   background-color: var(--bg-light);
   color: var(--text-dark);
 }

 
 
 
 
 
/* slider section start */



  @media (min-width: 600px) {
    .carousel-inner img {
      height: 500px;
      object-fit: cover; /* Ensure the image fits well within the height */
    }
}
/* slider section end */
 
 
 

 .bg-custom-primary {
   /* background: linear-gradient(45deg, #1d3557, #457b9d); */
   background: var(--gradient-primary);
 }



 .text-sh {
   color: var(--secondary-color);
 }

 .sh-img {
   height: 300px !important;
   object-fit: cover;
 }

 .image-width {
   max-height: 300px !important;
   object-fit: cover;
 }


 /* news section :start */
 .notification-bar {
   color: #842029;
   /* Dark red text color for contrast */
   overflow: hidden;
   position: relative;
   white-space: nowrap;
   display: flex;
   align-items: center;
 }

 .notification-bar .news-button {
   background-color: var(--primary-color);
   color: #fff;
   border: none;
   padding: 5px 20px;
   font-size: 1rem;
   margin-right: 10px;
   border-radius: 5px;
   z-index: 999;
 }

 .notification-bar .moving-text {
   display: inline-block;
   position: absolute;
   animation: marquee 40s linear infinite;
 }

 @keyframes marquee {
   0% {
     transform: translateX(100%);
   }

   100% {
     transform: translateX(-100%);
   }
 }

 /* news section :end */


 /* progress section  */
 .sh-icon svg {
   width: 40px;
   height: 40px;
 }

 /* progress section  */

 .sh-what svg {
   width: 45px;
   height: 45px;
 }

 .sh-clamp {
   height: 50px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: normal;

 }

 @media (max-width: 575px) {
   .inst-card {
     flex: 0 0 50%;
     /* 2 column layout */
     max-width: 50%;
   }
 }

 @media (max-width: 400px) {
   .sh-img {
     height: 600px !important;
     object-fit: contain;
   }

   .inst-card {
     flex: 0 0 100%;
     /* 1 column layout below 300px */
     max-width: 100%;
   }
 }





 /* Navbar */

 /* ================================================
   PRO STICKY NAVBAR STYLING (BANNER + NAV)
   ================================================ */

 /* --- Step 1: Banner Image Styling --- */

 /**
 * A container for the top banner image.
 * 'line-height: 0;' is a simple trick to remove any extra whitespace
 * that the browser might add below the image element.
 */
 .header-banner {
   line-height: 0;
 }

 .header-banner img {
   width: 100%;
   height: auto;
 }


 /* --- Step 2: Sticky Navbar Core Functionality & Styling --- */

 /**
 * This is the main container for our navigation bar.
 * The 'position: sticky' and 'top: 0' properties are the magic
 * that makes the navbar stick to the top of the screen after you scroll past it.
 */
 .main-navbar-sticky {
   /* Core sticky functionality */
   position: -webkit-sticky;
   /* For Safari compatibility */
   position: sticky;
   top: 0;
   /* Sticks to the top edge of the viewport */
   z-index: 1020;
   /* High z-index to ensure it stays above all other content */

   /* Visual styling for when the navbar is sticky */
   background-color: var(--primary-darker);
   /* Uses the professional dark blue from your :root variables */
   box-shadow: var(--shadow-medium);
   /* A nice shadow to lift it off the page content */
   padding: 0.25rem 0;
   /* A bit of vertical padding to keep it compact */
 }


 /* --- Step 3: Navigation Links (Items) Styling --- */

 /* Add a little space between each navigation item */
 .main-navbar-sticky .nav-item {
   margin: 0 0.2rem;
 }

 /* Style the individual 'a' tags inside the navigation */
 .main-navbar-sticky .nav-link {
   color: rgba(255, 255, 255, 0.8);
   /* Slightly transparent white text for a softer look */
   font-weight: 500;
   padding: 0.75rem 1rem;
   border-radius: 6px;
   text-transform: uppercase;
   font-size: 0.85rem;
   letter-spacing: 0.5px;
   transition: background-color 0.3s ease, color 0.3s ease;
 }

 /* Create the interactive hover effect for the links */
 .main-navbar-sticky .nav-link:hover {
   color: #fff;
   /* Make the text fully white on hover */
   background-color: var(--primary-color);
   /* Use the main (lighter) primary color for the background */
 }

 /* Style for the currently active page's link */
 .main-navbar-sticky .nav-link.active {
   color: #fff;
   background-color: var(--accent-color);
   /* Use the vibrant accent color to make it stand out */
   font-weight: 600;
   /* Make the text a bit bolder */
 }


 /* --- Step 4: Mobile View (Hamburger Menu) Styling --- */

 /* Style the toggle button for mobile screens */
 .main-navbar-sticky .navbar-toggler {
   border: 1px solid rgba(255, 255, 255, 0.2);
   /* A very subtle border */
 }

 /* Remove the default blue outline on focus */
 .main-navbar-sticky .navbar-toggler:focus {
   box-shadow: none;
 }

 /* Use a custom white SVG for the hamburger icon to ensure it's visible on the dark background */
 .main-navbar-sticky .navbar-toggler-icon {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
 }

 /* Optional: Styling for the dropdown menu on mobile to match the navbar's theme */
 @media (max-width: 991.98px) {
   .main-navbar-sticky .navbar-collapse {
     background-color: var(--primary-darker);
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     margin-top: 0.5rem;
     padding: 1rem;
     border-radius: 0 0 8px 8px;
   }
 }



 /* =========================================
   MODERN & PROFESSIONAL BUTTON
   ========================================= */

.sh-button {
    /* Basic Styling */
    display: inline-block; /* Helps with positioning and margins */
    background-color: var(--primary-color); /* Using your main primary color */
    color: var(--bg-white); /* Ensures high contrast text */
    border: none;
    cursor: pointer;

    /* Modern Sizing & Font */
    padding: 0.75rem 1.5rem;   /* Using REM for better scalability (12px 24px) */
    font-size: 1rem;         /* 16px */
    font-weight: 600;        /* Semi-bold for a clean look */
    line-height: 1.5;        /* Standard line height for text */
    text-align: center;      /* Ensures text is centered */
    text-decoration: none;   /* Removes underline if used on an <a> tag */

    /* Aesthetics & Effects */
    border-radius: 8px; /* Slightly larger, softer radius for a modern feel */
    box-shadow: var(--shadow-soft); /* Adds a subtle, soft shadow by default */
    
    /* Smooth Transition for hover effects */
    /* We only transition the properties that actually change for better performance */
    transition: background-color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* --- Interactive States --- */

/* 1. HOVER State: When the mouse is over the button */
.sh-button:hover {
    background-color: var(--primary-darker); /* Darkens the button slightly on hover */
    
    /* "Lift" effect to make the button feel like it's coming off the page */
    transform: translateY(-3px); 
    
    /* A more prominent shadow to enhance the lift effect */
    box-shadow: var(--shadow-medium);
}

/* 2. ACTIVE State: When the button is being clicked */
.sh-button:active {
    /* "Press down" effect for instant feedback */
    transform: translateY(1px);
    
    /* Reduce the shadow to complete the pressed-down illusion */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Make the transition faster for the click action */
    transition-duration: 0.05s;
}

/* 3. FOCUS State: For keyboard navigation & accessibility */
.sh-button:focus-visible {
    outline: 3px solid var(--accent-color); /* A clear blue outline */
    outline-offset: 3px; /* Adds space between the button and the outline */
    box-shadow: var(--shadow-medium); /* Keeps the shadow consistent with hover */
}

  

/* =========================================
   MODERN & PROFESSIONAL OUTLINE BUTTON
   ========================================= */

.sh-btn-2 {
    /* Basic Styling */
    display: inline-block;
    background-color: transparent;         /* Key change: No background color */
    color: var(--primary-color);           /* Text color is the primary color */
    border: 2px solid var(--primary-color);/* The border defines the button's shape */
    cursor: pointer;

    /* Modern Sizing & Font (Consistent with .sh-button) */
    padding: 0.75rem 1.5rem;    /* 12px 24px */
    font-size: 1rem;            /* 16px */
    font-weight: 600;           /* Semi-bold */
    line-height: 1.5;
    text-align: center;
    text-decoration: none;

    /* Aesthetics & Effects */
    border-radius: 8px;         /* Softer radius */

    /* Smooth Transition for the hover fill effect */
    /* Only transitioning properties that change for better performance */
    transition: background-color 0.2s ease-out, color 0.2s ease-out, transform 0.2s ease-out, box-shadow 0.2s ease-out;
}


/* --- Interactive States --- */

/* 1. HOVER State: Fill the button with color and lift it up */
.sh-btn-2:hover {
    background-color: var(--primary-color);   /* Fill the background */
    color: var(--bg-white);                   /* Make text white to be readable */
    transform: translateY(-3px);              /* "Lift" effect */
    
    /* Add a subtle glow using the primary color */
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2); 
}


/* 2. ACTIVE State: Simulate a "press down" action */
.sh-btn-2:active {
    /* Use a darker shade for the press effect */
    background-color: var(--primary-darker);
    transform: translateY(1px); /* Press down effect */
    box-shadow: none;           /* Remove shadow when pressed */
    transition-duration: 0.05s;
}

/* 3. FOCUS State: For keyboard navigation & accessibility */
.sh-btn-2:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 3px;
    background-color: var(--primary-color); /* Also fill on focus */
    color: var(--bg-white);
}





 /* --- Modern & Reliable Image Slider Styling --- */

 /* The main container for the slider section */
 .modern-slider-section {
   height: 70vh;
   /* Adjust height as needed. e.g., 500px, 60vh */
   width: 100%;
   position: relative;
 }

 /* Styling for the background image div */
 .slider-image-background {
   background-size: cover;
   background-position: center center;
 }

 /* This creates the slow Ken Burns zoom effect on the active slide */
 .carousel-item.active .slider-image-background {
   animation: kenburns-effect 20s ease-out forwards;
 }

 /* Keyframes for the Ken Burns effect */
 @keyframes kenburns-effect {
   0% {
     transform: scale(1);
   }

   100% {
     transform: scale(1.1);
     /* Zoom in to 110% */
   }
 }

 /* Adding a subtle dark vignette overlay for a cinematic feel */
 .carousel-item::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.3) 100%);
   z-index: 1;
 }

 /* START: UPDATED ARROW STYLES */

 /* Our custom circular background for the icon */
 .custom-carousel-control-icon {
   width: 3.5rem;
   height: 3.5rem;
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 50%;
   display: flex;
   /* Changed from inline-flex for better alignment */
   align-items: center;
   justify-content: center;
   transition: background-color 0.3s ease;
 }

 /* The default Bootstrap icon will be placed inside our circle. We don't need to style it further. */
 /* Bootstrap's own CSS handles the arrow's appearance. */

 /* Change background color of our circle on hover */
 .carousel-control-prev:hover .custom-carousel-control-icon,
 .carousel-control-next:hover .custom-carousel-control-icon {
   background-color: var(--primary-color);
 }

 /* Make controls always visible */
 .carousel-control-prev,
 .carousel-control-next {
   opacity: 1;
 }

 /* END: UPDATED ARROW STYLES */


 /* Custom, modern carousel indicators (dots at the bottom) */
 .carousel-indicators {
   z-index: 2;
   /* Ensure they are above the overlay */
 }

 .carousel-indicators [data-bs-target] {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.5);
   border: none;
   margin: 0 6px;
   transition: background-color 0.3s ease;
 }

 .carousel-indicators .active {
   background-color: #FFFFFF;
 }

















 /* public/css/app.css or your custom stylesheet */

 /* --- Modern Card Design --- */
 .course-card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   border-radius: 12px !important;
   /* Softer, more rounded corners */
 }

 /* Add a subtle lift-up effect and a more prominent shadow on hover */
 .course-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
 }

 /* --- YouTube-like Thumbnail Image --- */
 /* Container to enforce a 16:9 aspect ratio, similar to YouTube thumbnails */
 .course-image-container {
   width: 100%;
   aspect-ratio: 16 / 9;
   overflow: hidden;
   /* Clips any part of the image outside the container */
 }

 .course-card-img {
   width: 100%;
   height: 100%;
   /* Ensure the image fills the container without being distorted */
   object-fit: cover;
   transition: transform 0.3s ease;
 }

 /* Add a subtle zoom-in effect to the image on card hover */
 .course-card:hover .course-card-img {
   transform: scale(1.05);
 }


 /* --- Card Content Styling --- */
 /* Style for the course title */
 .course-title {
   color: #333;
   font-weight: 600;
   /* semi-bold */
   line-height: 1.4;
   font-size: 1.1rem;
 }

 /* Override default link colors since the whole card is a link */
 a.text-decoration-none .course-title {
   color: #333;
 }

 /* Change title color on hover to indicate it's interactive */
 a.text-decoration-none:hover .course-title {
   color: #0d6efd;
   /* Bootstrap's primary color */
 }




 /* --- Animated Outline Button Styling --- */
 .btn-outline-animated {
   /* Use Bootstrap's primary color for the outline */
   border: 2px solid var(--primary-color);
   color: var(--primary-color);
   font-weight: 600;
   padding: 0.8rem 2rem;
   background-color: transparent;
   transition: all 0.3s ease-in-out;
   overflow: hidden;
   position: relative;
   z-index: 1;
 }

 /* The color fill that animates in from the left */
 .btn-outline-animated::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 100%;
   background-color: var(--primary-color);
   transition: width 0.3s ease-in-out;
   z-index: -1;
 }

 .btn-outline-animated:hover {
   color: #fff;
   /* Text becomes white on hover */
 }

 .btn-outline-animated:hover::before {
   width: 100%;
   /* The background fill expands to full width */
 }

 /* Icon styling */
 .btn-outline-animated i {
   transition: transform 0.3s ease, color 0.3s ease;
 }

 .btn-outline-animated:hover i {
   transform: translateX(4px);
   color: #fff;
   /* Ensure icon also turns white */
 }



 /* Apply Section */
 .apply-section {
   background: var(--gradient-primary);
   padding: 40px 0;
   color: var(--text-light);
   text-align: center;
 }

 .apply-section h1 {
   font-size: 28px;
   font-weight: bold;
 }

 .apply-section .btn {
   background: var(--secondary-color);
   border: none;
   padding: 12px 25px;
 }

 .apply-section .btn:hover {
   background: var(--highlight-color);
   color: var(--text-light);
 }



 /* --- Best Modern CTA Section --- */
 .cta-section {
   position: relative;
   /* Needed for positioning the shapes */
   padding: 80px 0;
   /* A vibrant and professional blue gradient */
   background: linear-gradient(45deg, #0052D4, #4364F7, #6FB1FC);
   overflow: hidden;
   /* Prevents shapes from creating scrollbars */
   color: #fff;
   border-radius: 15px;
   /* Optional: adds slightly rounded corners to the whole section */
   margin: 40px 0;
   /* Optional: adds some space above and below the section */
 }

 /* Base styles for the decorative floating shapes */
 .cta-shape {
   position: absolute;
   border-radius: 50%;
   /* Subtle white circles that add depth */
   background: rgba(255, 255, 255, 0.08);
   pointer-events: none;
   /* Shapes won't interfere with mouse clicks */
 }

 /* Individual shape positions and sizes */
 .cta-shape-1 {
   width: 200px;
   height: 200px;
   top: -50px;
   left: -80px;
 }

 .cta-shape-2 {
   width: 300px;
   height: 300px;
   bottom: -100px;
   right: -120px;
 }

 .cta-shape-3 {
   width: 80px;
   height: 80px;
   top: 40%;
   right: 15%;
 }

 /* Styles for the "glow on hover" button effect */
 .btn-glow {
   transition: all 0.3s ease-in-out;
 }

 .btn-glow:hover {
   transform: translateY(-3px);
   /* A more noticeable shadow and a subtle white glow */
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 25px rgba(255, 255, 255, 0.4);
   color: #0d6efd !important;
   /* Changes the text color to the primary blue on hover */
 }





 /* --- Modern Stats Section --- */
 .stats-section {
   position: relative;
 }

 .stat-card {
   background-color: #fff;
   border: none;
   border-radius: 15px;
   box-shadow: 0 4px 25px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease-in-out;
 }

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

 .stat-icon {
   width: 80px;
   height: 80px;
   margin: 0 auto 20px auto;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(13, 110, 253, 0.1);
   /* The SVG color will be inherited from here */
   color: var(--bs-primary);
   transition: all 0.3s ease;
 }

 /* Styling for your custom SVG icon inside the circle */
 .stat-icon svg {
   width: 45px;
   /* আপনি প্রয়োজন অনুযায়ী সাইজ পরিবর্তন করতে পারেন */
   height: 45px;
   /* আপনি প্রয়োজন অনুযায়ী সাইজ পরিবর্তন করতে পারেন */
   transition: color 0.3s ease;
   /* Transition for the fill color */
 }

 /* Hover effect for the icon */
 .stat-card:hover .stat-icon {
   background-color: var(--bs-primary);
   /* Change the color property, which the SVG will inherit */
   color: #fff;
 }

 /* Counter number style */
 .stat-card .counter {
   color: #2c3e50;
 }






 /* Footer */
 /* --- Modern Gradient Footer Styling --- */
 .footer-gradient {
   /* The deep, professional linear-gradient background */
   background: linear-gradient(135deg, #001f4d 0%, #00112c 100%);
   color: var(--text-on-dark);
   /* Ensure all text is light by default */
   position: relative;
   overflow: hidden;
   /* Recommended for pseudo-elements */
 }

 /* Optional: Add a subtle pattern for an even more professional look */
 .footer-gradient::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
 }

 .footer-heading {
   color: #FFFFFF;
   /* Headings should be pure white for contrast */
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   font-size: 0.9rem;
 }

 /* Default paragraph text in the footer */
 .footer-text,
 .footer-contact-info span {
   color: rgba(255, 255, 255, 0.7);
   /* Slightly transparent white for a softer look */
   font-size: 0.95rem;
 }

 /* Styling for lists of links */
 .footer-links li {
   padding: 0.4rem 0;
 }

 .footer-link {
   color: rgba(255, 255, 255, 0.7);
   text-decoration: none;
   transition: all 0.3s ease;
 }

 .footer-link:hover {
   color: #FFFFFF;
   /* On hover, make the link fully white */
   padding-left: 5px;
 }

 /* Contact info list with icons */
 .footer-contact-info i {
   font-size: 1.1rem;
   color: var(--accent-color);
   /* Use the vibrant accent color for icons */
 }

 /* The copyright section at the very bottom */
 .footer-bottom {
   /* Use a slightly transparent border to blend with the gradient */
   border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
 }

 .footer-bottom .footer-text strong {
   color: #FFFFFF;
   /* Make the brand name stand out */
 }


 /* --- This section for the WhatsApp button does not need to change --- */
 .btn-success-custom {
   background-color: #25D366;
   color: #fff;
   font-weight: 600;
   padding: 0.75rem 1.5rem;
   border: none;
   border-radius: 50px;
   transition: all 0.3s ease;
 }

 .btn-success-custom:hover {
   background-color: #1DA851;
   transform: translateY(-3px);
   box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
   color: #fff;
 }



 /* Student/Course Card Title Adjustments */
.course-card .card-title {
    font-weight: 600; /* Makes the name slightly bolder */
    color: var(--text-dark); /* Ensures it uses your primary text color */
    transition: color 0.3s ease;
}

/* When the whole card link is hovered, change the title color */
.text-decoration-none:hover .course-card .card-title {
    color: var(--primary-color);
}