/* Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap'); /* Added Fira Code for code snippets */

/* 1 banner section styles: Custom styles for animations */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.animate-blink {
    animation: blink 0.75s step-end infinite;
}

@keyframes fadeInMoveUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fadeInMoveUp {
    animation: fadeInMoveUp 0.8s ease-out forwards;
}

@keyframes scaleIn {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.animate-scaleIn {
    animation: scaleIn 0.6s ease-out forwards;
}

/* Particle animation (simplified for example) */
@keyframes particleFlow {
    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
    25% { transform: translate(100px, 50px) scale(1.2); opacity: 0.6; }
    50% { transform: translate(200px, 0) scale(0.8); opacity: 0.9; }
    75% { transform: translate(100px, -50px) scale(1.1); opacity: 0.7; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
}

.particle {
    position: absolute;
    background-color: rgba(129, 140, 248, 0.3); /* Indigo-300 with transparency */
    border-radius: 50%;
    opacity: 0;
    animation: particleFlow 20s infinite ease-in-out;
    animation-fill-mode: forwards;
}
.particle:nth-child(1) { width: 10px; height: 10px; top: 10%; left: 20%; animation-delay: 0s; }
.particle:nth-child(2) { width: 15px; height: 15px; top: 30%; left: 80%; animation-delay: 5s; background-color: rgba(167, 139, 250, 0.4); } /* Purple-300 */
.particle:nth-child(3) { width: 8px; height: 8px; top: 70%; left: 10%; animation-delay: 10s; }
.particle:nth-child(4) { width: 12px; height: 12px; top: 85%; left: 50%; animation-delay: 15s; background-color: rgba(167, 139, 250, 0.4); }
.particle:nth-child(5) { width: 18px; height: 18px; top: 50%; left: 30%; animation-delay: 2s; }
.particle:nth-child(6) { width: 14px; height: 14px; top: 20%; left: 60%; animation-delay: 7s; background-color: rgba(129, 140, 248, 0.3); }

/* Floating Language Icons - ENHANCED */
@keyframes floatLanguage {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(10px, -15px) rotate(5deg); }
    50% { transform: translate(0, 0) rotate(0deg); }
    75% { transform: translate(-10px, 15px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}
.language-icon {
    animation: floatLanguage 12s ease-in-out infinite; /* Slightly slower for a smoother float */
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3)); /* Stronger shadow for better pop */
    box-shadow: inset 0 0 15px rgba(255,255,255,0.1); /* Inner glow for depth */
    transition: transform 0.3s ease; /* Smooth transition on hover if needed */
}
.language-icon:hover {
    transform: scale(1.1) translateY(-5px) !important; /* Emphasize hover, !important to override animation */
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}

/* Specific positions for language icons relative to the banner section */
.lang-icon-python { top: 10%; left: 10%; }
.lang-icon-java { top: 30%; right: 10%; }
.lang-icon-js { bottom: 10%; left: 20%; }
.lang-icon-cpp { top: 20%; right: 20%; }
.lang-icon-html { bottom: 5%; right: 15%; }
.lang-icon-react { top: 50%; left: 5%; }
.lang-icon-flutter { bottom: 20%; right: 5%; }


.lang-delay-1 { animation-delay: 0s; }
.lang-delay-2 { animation-delay: 2.5s; } /* Adjusted delays for better distribution */
.lang-delay-3 { animation-delay: 5s; }
.lang-delay-4 { animation-delay: 7.5s; }
.lang-delay-5 { animation-delay: 10s; }
.lang-delay-6 { animation-delay: 12.5s; }
.lang-delay-7 { animation-delay: 15s; }


/* Code Editor Specific Styles */
.code-font {
    font-family: 'Fira Code', monospace;
}
.code-line {
    line-height: 1.5;
}
.code-keyword { color:rgb(221, 139, 253); /* Cyan */ }
.code-string { color: #F1FA8C; /* Yellow */ }
.code-function { color: #BD93F9; /* Purple */ }
.code-comment { color: #6272A4; /* Gray */ font-style: italic; }
.code-number { color: #FF79C6; /* Pink */ }
.code-operator { color: #FFB86C; /* Orange */ }

/* Custom styles for the cursor */
.cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em; /* Adjust height to match the text */
    background-color: #facc15; /* Yellow-400 from Tailwind */
    margin-left: 4px;
    vertical-align: middle;
    animation: blink 0.7s infinite;
}
/* 2 scroller section */
.auto-scroll-container {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    font-family: 'Segoe UI', sans-serif;
    }

.auto-scroll-content {
    display: inline-flex;
    animation: scroll-left 30s linear infinite;
    }

.auto-scroll-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 70px; 
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    opacity: 0.95;
    letter-spacing: 0.5px;
    white-space: nowrap;
    }

.separator {
    margin: 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    }

.separator img {
    width: 26px;
    height: 26px;
    filter: brightness(1.2);
    }

@keyframes scroll-left {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
    }

    .auto-scroll-container:hover .auto-scroll-content {
    animation-play-state: paused;
    }

    @media (max-width: 768px) {
    .auto-scroll-item {
        font-size: 1.3rem;
    }

    .separator img {
        width: 20px;
        height: 20px;
    }
    }
/* 3 rest */
/* for Training Section */

.trainingwap {
    padding: 50px 0; /* Slightly reduced padding to save vertical space */
    background-color: #f8f9fa; /* Lighter background for the section */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.trainingwap .top-contnet {
    text-align: left;
    margin-bottom: 40px; /* Reduced margin */
    text-align: center;
}

.trainingwap .top-contnet h2 {
    font-size: 2.5rem; /* Slightly smaller title for compactness */
    color: #212529;
    font-weight: 700;
    margin-bottom: 8px; /* Reduced margin */
    position: relative;
    display: inline-block;
}

.trainingwap .top-contnet h2::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px; /* Adjusted position */
    width: 70px; /* Slightly narrower */
    height: 3px; /* Thinner line */
    background-color: #690782; /* Purple underline */
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(105, 7, 130, 0.2);
}

.trainingwap .top-contnet .seemore {
    float: right;
    background: linear-gradient(90deg, #fcd22d, #fcce2c, #fcca2b, #fcc62a, #fcc129, #fcbd28, #fbb928, #fbb528);
    color: #fff;
    padding: 8px 15px;
    border-radius: 5px;
    text-transform: capitalize;
}

.trainingwap .top-contnet .seemore:hover {
    background-color: #510566; /* Darker purple on hover */
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(105, 7, 130, 0.3);
    text-decoration: none;
}

/* --- Training Card Container --- */
.col-md-3.custom-col-md-3 {
    padding: 10px; /* Reduced padding between cards */
    display: flex;
}

.training-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    width: 100%;
    height: 100%;
}

.trainingbox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 480px; /* Adjusted min-height to fit content nicely */
    background-color: #ffffff;
    border-radius: 12px; /* Slightly less round for a sharper look */
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07); /* Lighter, more subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    will-change: transform, box-shadow;
    border: 1px solid #f0f0f0; /* Very light border */
    transform: translateY(0);
}

.training-card-link:hover .trainingbox {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 10px 20px rgba(105, 7, 130, 0.15), 0 4px 8px rgba(0,0,0,0.05);
    border-color: #e0e0e0;
}

/* Unified Training Content Area (Icon, Title, Description, Skills, Features) */
.trainingbox .training-content-unified {
    padding: 18px 22px; /* Reduced padding slightly */
    gap: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Default left align */
    justify-content: flex-start;
}

.trainingbox .training-content-unified .hexagon {
    margin-bottom: 18px; /* Reduced margin */
    line-height: 0;
    align-self: center; /* Center the icon itself */
}

.trainingbox .training-content-unified img {
    max-width: 70px; /* Slightly smaller icon */
    height: auto;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(105, 7, 130, 0.3)); /* Purple shadow for icon */
}

.trainingbox .training-content-unified h6 {
    font-size: 1.25rem; /* Slightly smaller title */
    color: #212529;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 10px; /* Reduced margin */
    line-height: 1.2;
    min-height: 38px; /* Adjusted height */
    text-align: center; /* Centered title */
    width: 100%; /* Take full width */
}

.trainingbox .training-content-unified .short-description-text {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* or 4, depending on space */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 3); /* Ensures full lines only (3 lines here) */
    white-space: normal; /* Avoids inline truncation */
}

.trainingbox .training-content-unified .hexagon img {
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* Skills Section Styling */
.trainingbox .training-content-unified .skills-section {
    width: 100%;
    margin-top: 10px;
    padding: 0;
    /* Removed: border-top: 1px dashed #e0e0e0; */
    padding-top: 0; /* Ensures no extra padding from previous border-top */
    text-align: left;
    margin-bottom: 10px; /* Adds space between skills and the new feature labels */
}

.trainingbox .training-content-unified .skills-inline-container {
    display: flex; /* Use flexbox to align heading and list */
    flex-wrap: wrap; /* Allow wrapping if content is too long */
    align-items: baseline; /* Align heading text and first line of skills */
    width: 100%;
}

.trainingbox .training-content-unified .skills-heading {
    font-size: 0.85rem; /* Smaller, less dominant */
    font-weight: 500; /* Lighter weight */
    color: #7a828e; /* Subtle grey color */
    margin-bottom: 5px; /* Reduced margin */
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
    white-space: nowrap; /* Keep heading on one line */
    margin-right: 8px; /* Space before skills list starts */
}

.trainingbox .training-content-unified .skills-heading-icon {
    color: #690782; /* Purple icon */
    font-size: 0.9em; /* Slightly smaller */
}

.trainingbox .training-content-unified .skills-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.6; /* Reduced line height for compactness */
    margin-top: 0; /* Remove default margin */
    flex-grow: 1; /* Allow skills list to take remaining space */
}

.trainingbox .training-content-unified .skill-item {
    color: #333; /* Darker for dominance */
    font-size: 0.88rem; /* Prominent skill name size */
    font-weight: 600; /* Bolder for dominance */
    display: inline-flex;
    align-items: center;
    gap: 4px; /* Reduced gap */
    white-space: nowrap;
    margin-right: 6px; /* Reduced margin */
    margin-bottom: 4px; /* Reduced vertical margin */
}

.trainingbox .training-content-unified .skill-item .skill-icon {
    font-size: 0.8em;
    color: #690782; /* Purple for skill icons */
}

.trainingbox .training-content-unified .skill-separator {
    color: #bbb; /* Light grey separator */
    font-size: 0.8em;
    margin-right: 6px; /* Reduced margin */
    user-select: none;
    line-height: 1;
    display: inline-block;
}

.trainingbox .training-content-unified .skill-item:last-of-type + .skill-separator {
    display: none;
}

.trainingbox .training-content-unified .modules-covered-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: #4d4d4d;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.trainingbox .training-content-unified .skills-taglist {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px; 
  gap: 6px;
}

.trainingbox .training-content-unified .skill-tag {
  display: inline-flex;
  align-items: center;
  background-color: #f3e9f8;
  color: #690782;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background 0.3s ease;
}

.trainingbox .training-content-unified .skill-tag i {
  margin-right: 5px;
  font-size: 0.8em;
  color: #690782;
}

.skill-tag {
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.skill-tag:hover {
   transform: scale(1.05);
   background-color: #e4d0f1;
   cursor: default;
}


/* New Styling for Feature Labels (moved out of footer) */
.trainingbox .training-content-unified .course-features-body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the labels */
    gap: 10px; /* Reduced gap between features */
    width: 100%;
    margin-top: auto; /* Pushes these elements to the bottom of the unified content area */
    margin-bottom: 0; /* Space between these features and the actual footer */
    padding-top: 15px; /* Add padding to separate from skills */
    border-top: 1px solid #f0f0f0; /* Add a subtle separator line above features */
}

.trainingbox .training-content-unified .feature-text {
    font-size: 0.9rem; /* Bigger, matching description text size */
    color: #444; /* Darker text for features */
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
    white-space: nowrap;
}

.trainingbox .training-content-unified .feature-icon {
    font-size: 0.9em;
    color: #ffc107; /* Yellow for feature icons */
}


/* Card Footer (Only Duration) */
.trainingbox .card-footer {
    padding: 12px 22px; /* Reduced padding */
    border-top: 1px solid #f0f0f0; /* Light grey border */
    background-color: #fdfdfd;
    display: flex;
    flex-direction: column; /* Stack items vertically (though only one now) */
    align-items: center; /* Center all footer content */
    gap: 8px; /* Reduced gap between elements in footer (if any were left) */
    border-radius: 0 0 12px 12px;
}

/* Course Duration Styling */
.trainingbox .card-footer .course-duration {
    font-size: 0.95rem; /* Consistent readable size */
    color: #7a828e; /* Grey text */
    font-weight: 500;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 6px; /* Reduced gap */
    width: 100%;
    justify-content: center; /* Centered duration */
}

.trainingbox .card-footer .course-duration::before {
    content: '\f017'; /* FontAwesome clock icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #690782; /* Purple clock icon */
    font-size: 1.1em;
}

.trainingbox .card-footer .course-duration strong {
    color: #690782; /* Purple for duration text */
    font-weight: 700;
}

/* --- Global Styles & Sections (Keep these as they are, but ensure they are present) --- */
/* Apply Inter font globally for courses cards */
        body {
            font-family: 'Inter', sans-serif;
        }

        /* Custom styling for the section title underline */
        .section-title-underline {
            position: relative;
        }
        .section-title-underline::after {
            content: '';
            position: absolute;
            bottom: -8px; /* Adjust based on your desired spacing from the text */
            left: 0; /* Align to the left */
            width: 90px; /* Wider underline */
            height: 5px; /* Thicker underline */
            background-color: #8b5cf6; /* Vibrant purple for emphasis */
            border-radius: 3px;
        }

        /* Gradient background for the card image container */
        .card-image-gradient-alt {
            background: linear-gradient(45deg, #f5f3ff 0%, #ede9fe 100%); /* Soft purple gradient */
        }

        /* Custom animation for the card hover effect */
        .card-hover-scale-rotate {
            transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
        }
        .card-hover-scale-rotate:hover {
            transform: translateY(-10px); /* No rotation on hover */
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* More pronounced shadow */
        }

        /* Custom focus ring for accessibility (still applies to cards) */
        .focus-ring-alt:focus {
            outline: none;
            box-shadow: 0 0 0 5px rgba(139, 92, 246, 0.5); /* Purple focus ring */
        }

        /* Enforce specific line clamp behavior with ellipsis */
        .line-clamp-3 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- Original "See More" Button Styling (RESTORED) --- */

        /* Apply Inter font globally for blogs */
        /* General Section Enhancements */
.section-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px; /* Adjust vertical position */
    width: 80px; /* Wider line */
    height: 5px; /* Thicker line */
    background-color: #a78bfa; /* A vibrant purple */
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.4); /* Soft shadow for the line */
}

/* Blog Button Gradient (Updated for more prominent text and shadow) */
.blog-button-gradient {
    background: linear-gradient(90deg, #FFD93B 0%, #FFB300 100%);
    box-shadow: 0 8px 20px rgba(255, 179, 0, 0.4); /* Stronger, warm shadow */
    font-size: 1.125rem; /* text-lg */
    padding: 1rem 2.5rem; /* py-4 px-10 */
}

.blog-button-gradient:hover {
    background: linear-gradient(90deg, #FFB300 0%, #FFD93B 100%);
    box-shadow: 0 12px 25px rgba(255, 179, 0, 0.6); /* Even stronger shadow on hover */
    transform: translateY(-3px) scale(1.05); /* More pronounced lift and slight scale */
}


/* Amazing Blog Card Design */
.blog-card-amazing {
    display: block; /* Ensure it behaves as a block for sizing */
    border-radius: 2rem; /* Even more rounded corners for softness */
    overflow: hidden; /* Ensures content respects rounded corners */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother, more complex transition */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Initial softer shadow */
}

.blog-card-amazing:hover {
    transform: translateY(-15px) rotateZ(0.5deg); /* More dynamic lift and subtle tilt */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); /* Deeper, more noticeable shadow */
    border-color: #e5e7eb; /* Subtle border change on hover */
}

.blog-card-amazing .bg-white {
    transition: background-color 0.3s ease-in-out; /* For inner background change if desired */
}

.blog-card-amazing:hover .bg-white {
    background-color: #fcfcfc; /* Slight background tint on hover for depth */
}

/* Image Wrapper and Effects */
.blog-card-image-wrapper {
    position: relative;
    height: 240px; /* Slightly taller image area */
    overflow: hidden;
    border-top-left-radius: 2rem; /* Match card border radius */
    border-top-right-radius: 2rem;
}

.blog-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smooth, elegant zoom */
    filter: brightness(0.95); /* Slightly desaturate image initially */
}

.blog-card-amazing:hover .blog-card-image {
    transform: scale(1.15) rotateZ(-1deg); /* More pronounced zoom and subtle counter-tilt */
    filter: brightness(1); /* Full brightness on hover */
}

.blog-card-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    transition: background 0.4s ease-in-out;
}

.blog-card-amazing:hover .blog-card-image-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
}

.blog-card-title-on-image {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    right: 1.5rem;
    color: white;
    font-size: 1.75rem; /* text-3xl */
    font-weight: 800; /* font-extrabold */
    line-height: 1.3;
    z-index: 10; /* Ensure title is above overlay */
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); /* Soft text shadow for readability */
    line-clamp: 2; /* Still limit to 2 lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.3s ease-out;
}

.blog-card-amazing:hover .blog-card-title-on-image {
    transform: translateY(-5px); /* Slight lift for title on hover */
}

/* Metadata Styling */
.blog-card-amazing ul li {
    font-size: 0.95rem; /* Slightly larger metadata text */
    color: #6b7280; /* text-gray-600 */
}

.blog-card-amazing ul li i {
    font-size: 1.1rem; /* Slightly larger icons */
    color: #a78bfa; /* text-purple-400 */
}

/* Description Styling */
.blog-card-amazing p {
    font-size: 1rem; /* text-base */
    line-height: 1.7; /* Increased line height for readability */
    color: #4b5563; /* text-gray-700 */
}

/* Read Article Button (Option 2 new class names) */
/* Filled Background with Hover Outline */
.read-article-frame {
    display: inline-flex;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem; /* Slightly rounded corners */
    background-color: #f0e9f8; /* Light purple background */
    border: 1px solid transparent; /* Transparent border initially */
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.read-article-frame:hover {
    background-color: #fff; /* White background on hover */
    border-color: #8b5cf6; /* Purple border appears on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.read-article-frame span {
    color: #8b5cf6; /* Initial text color */
    transition: color 0.3s ease-in-out;
}

.read-article-frame:hover span {
    color: #6d28d9; /* Darker text color on hover */
}

/* Line clamping for text */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

        /* --- Original Course Section Background --- */
        .course-section {
            padding: 60px 0;
            background-color: #fdfdfd; /* Reverted to original light background */
        }

        /* --- Original Queries section styles (RESTORED) --- */
        .contct-form {
            padding: 80px 0;
            background-color: #f7f9fc; /* Original background for contact form */
        }

        .question-wap h6 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #333;
            margin-bottom: 15px;
        }

        .question-wap p {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 30px;
        }

        .call-wap {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }

        .call-icon {
            width: 60px;
            height: 60px;
            background-color: #690782; /* Purple */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1.8rem;
            margin-right: 20px;
            flex-shrink: 0;
        }

        .nuber-phone p {
            font-size: 0.95rem;
            color: #888;
            margin-bottom: 5px;
        }

        .nuber-phone a {
            font-size: 1.3rem;
            font-weight: 600;
            color: #333;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .nuber-phone a:hover {
            color: #690782; /* Purple */
        }

        /* Form Styling */
        .from-inline .form-group {
            margin-bottom: 20px;
        }

        .from-inline .form-control,
        .from-inline .form-select {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 14px 20px;
            font-size: 1rem;
            color: #333;
            box-shadow: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .from-inline .form-control:focus,
        .from-inline .form-select:focus {
            border-color: #690782; /* Purple */
            box-shadow: 0 0 0 3px rgba(105, 7, 130, 0.2);
            outline: none;
        }

        .from-inline textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }

        /* common submit button */
        .homepage-submit {
            display: inline-block;
            padding: 14px 30px;
            background-color: #690782; /* Purple */
            color: #fff;
            font-size: 1.1rem;
            font-weight: 600;
            border-radius: 8px;
            text-decoration: none;
            transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            border: none;
        }

        .homepage-submit:hover {
            background-color: #4a056a; /* Darker purple */
            transform: translateY(-2px);
            box-shadow: 0 8px 15px rgba(105, 7, 130, 0.2);
        }

        /* Specific select dropdown arrow fix for original design */
        .form-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23690782%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-6.5%200-12.3%203.2-16.1%208.1c-3.8%204.9-4.3%2011.8-1.4%2017.4l128%20182.9c3.8%205.5%2010%208.9%2016.5%208.9c6.5%200%2012.7-3.4%2016.5-8.9l128-182.9c3.1-5.6%202.6-12.5-1.4-17.4z%22%2F%3E%3C%2Fsvg%3E');
            background-repeat: no-repeat;
            background-position: right 15px center;
            background-size: 12px;
            padding-right: 40px; /* Make space for the arrow */
        }

        /* --- Have Any Queries contacts styles --- */
        /* --- Contact Section Styles --- */
    /* --- Contact Section Styles --- */
.contact-section {
    background-color: #F8F5EE; /* Warm, light background color from image */
    padding: 80px 0; /* Vertical padding */
    font-family: 'Inter', sans-serif;
    color: #333; /* Default text color */
}

.contact-section .container {
    max-width: 1200px; /* Constrain width for better layout */
}

/* Fix for potential disturbance messages */
#error_message, #success {
    display: none; /* Hide by default, show via JavaScript */
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 5px;
    margin-bottom: 15px;
    text-align: center;
}

#error_message {
    background-color: #fee2e2; /* Red-100 */
    color: #ef4444; /* Red-500 */
    border: 1px solid #fca5a5; /* Red-300 */
}

#success {
    background-color: #d1fae5; /* Green-100 */
    color: #10b981; /* Green-500 */
    border: 1px solid #6ee7b7; /* Green-300 */
}


/* Left Panel - Query Info (Visually enhanced) */
.query-info-panel {
    padding-right: 50px; /* Increased space between left panel and form */
}

.query-info-panel .section-heading {
    font-size: 3rem; /* Slightly reduced from 3.2rem to help fit on one line */
    font-weight: 700;
    color: #333; /* Darker heading text */
    margin-bottom: 1.25rem; /* More space below heading */
    line-height: 1.2;
    white-space: nowrap; /* Force text onto a single line */

    border-bottom: none !important;  /* Remove any bottom border */
    background-image: none !important;  /* Remove any gradient underline */
    text-decoration: none !important;  /* Remove any text underline */
    box-shadow: none !important;  /* Remove any shadow that could appear like an underline */
    position: relative; /* Reset positioning if needed */
}

.query-info-panel .section-subheading {
    font-size: 1.2rem; /* Slightly larger subheading */
    color: #555;
    margin-bottom: 3rem; /* More space below subheading */
    line-height: 1.6;
}

.contact-detail-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem; /* Increased space between contact items */
}

.contact-icon-wrapper {
    background-color: #FFB300; /* Yellow background for icon */
    border-radius: 50%;
    width: 60px; /* Increased size of the icon circle */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* White icon color */
    font-size: 2rem; /* Increased Icon size */
    flex-shrink: 0;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* More prominent shadow for depth */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-icon-wrapper:hover {
    background-color: #FFC04D; /* Lighter yellow on hover */
    transform: translateY(-4px); /* Slight lift */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.contact-text-content {
    margin-left: 1.25rem; /* More space between icon circle and text */
}

.contact-text-content p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 0.35rem; /* Small space between "Call us at" and number */
}
.gradient-text {
    background: linear-gradient(21deg, #341a64 0%, #690782 74%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

    font-family: 'Inter', sans-serif; /* Same as section title */
    font-weight: 700; /* Bold like initial style */
    font-size: 1.45rem; /* Short and clean */
    line-height: 1.3; /* For better vertical rhythm */
}

.contact-link {
    font-size: 1.45rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.3;
}


.contact-link:hover {
    color: #FFB300; /* Yellow on hover */
}

/* Right Panel - Form Styling (Height maintained) */
.contact-form-wrapper {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px; /* Slightly reduced padding to help maintain height */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Prominent shadow for the form card */
    border: 1px solid #eee; /* Light border */
}

.contact-form .form-field {
    width: 100%;
    padding: 13px 18px; /* Adjusted padding for input fields */
    border: 1px solid #e0e0e0; /* Light border */
    border-radius: 8px; /* Rounded input fields */
    font-size: 1rem;
    color: #333;
    background-color: #f9f9f9; /* Slightly off-white background for fields */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none; /* Remove default outline */
}

.contact-form .form-field:focus {
    border-color: #FFB300; /* Yellow border on focus */
    box-shadow: 0 0 0 3px rgba(255, 179, 0, 0.2); /* Subtle yellow glow on focus */
    background-color: #fff; /* White background on focus */
}

.contact-form .form-field::placeholder {
    color: #a0a0a0; /* Lighter placeholder text */
}

/* Adjusting margins for compactness within form */
.contact-form .col-md-12 {
    margin-bottom: 15px; /* Reduced margin between form groups */
}
.contact-form .col-md-12:last-of-type {
    margin-bottom: 0; /* No bottom margin on the last item */
}

.contact-form .textarea-field {
    min-height: 110px; /* Adjusted textarea height slightly */
    resize: vertical; /* Allow vertical resizing only */
}

/* Custom Select styling */
.contact-form .custom-select {
    appearance: none; /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* Custom arrow */
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    padding-right: 40px; /* Space for the custom arrow */
}


.contact-form .submit-button {
    background-color: #FFB300; /* Yellow submit button */
    color: #fff;
    font-size: 1.25rem; /* Larger font for button */
    font-weight: 700;
    padding: 14px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 179, 0, 0.3); /* Yellow button shadow */
}

.contact-form .submit-button:hover {
    background-color: #FFC04D; /* Lighter yellow on hover */
    transform: translateY(-3px); /* Slight lift */
    box-shadow: 0 8px 20px rgba(255, 179, 0, 0.4);
}


/* Responsive Adjustments */
@media (max-width: 991.98px) {
    .contact-section {
        padding: 60px 0;
    }
    .query-info-panel {
        padding-right: 15px;
        padding-left: 15px;
        margin-bottom: 40px; /* Add space for mobile layout */
        text-align: left; /* CHANGE: Align text to the left */
    }
    .query-info-panel .section-heading {
        font-size: 2.5rem; /* Further reduce font size for smaller tablets */
        white-space: normal; /* Allow wrapping on smaller screens if necessary */
    }
    .query-info-panel .section-subheading {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    .contact-detail-item {
        justify-content: flex-start; /* CHANGE: Align items to the start (left) */
    }
    .contact-form-wrapper {
        padding: 25px; /* Slightly less padding on smaller tablets */
    }
    .contact-form .submit-button {
        font-size: 1.1rem;
        padding: 12px 25px;
    }
}

@media (max-width: 767.98px) {
    .contact-section {
        padding: 40px 0;
    }
    .col-md-6 {
        width: 100%; /* Stack columns on small screens */
        padding-left: 0;
        padding-right: 0;
    }
    .query-info-panel {
        padding: 0 15px;
        margin-bottom: 30px;
        /* No need for text-align here, as it's inherited from the 991.98px media query */
    }
    .query-info-panel .section-heading {
        font-size: 2.2rem; /* Even smaller font size for mobile */
    }
    .contact-form-wrapper {
        padding: 20px; /* Further reduced padding for smaller mobile screens */
        margin: 0 15px; /* Add horizontal margin on very small screens */
    }
    .form-field {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    .textarea-field {
        min-height: 90px;
    }
}

    /* "See More" Button */
    .see-more-btn {
    float: right;
    color: rgb(255, 255, 255);
    text-transform: capitalize;
    background: linear-gradient(90deg, rgb(252, 210, 45), rgb(252, 206, 44), rgb(252, 202, 43), rgb(252, 198, 42), rgb(252, 193, 41), rgb(252, 189, 40), rgb(251, 185, 40), rgb(251, 181, 40));
    padding: 8px 15px;
    border-radius: 5px;
}

        /* --- FIX for Explore text and arrow alignment --- */
    .read-more {
        display: flex; /* Ensure it's a flex container */
        align-items: center; /* Vertically center items */
        gap: 0.5rem; /* Use Tailwind's default gap for consistent spacing */
        /* Remove any conflicting transforms on the span itself if they exist */
        transform: none !important;
    }

    .read-more i {
        /* Ensure the icon itself doesn't have vertical transforms that could cause jiggle */
        transform: translateX(0) translateY(0) !important; /* Reset any unintended vertical transforms */
        transition: transform 0.3s ease; /* Keep the horizontal transition */
    }

    /* Apply the hover effect directly to the icon for horizontal movement */
    .group:hover .read-more i {
        transform: translateX(0.75rem) !important; /* Adjust as needed, 0.75rem is Tailwind's space-x-3 equivalent */
    }

        .gradient-header {
    background: linear-gradient(21deg, #4c2c7a, #7c2993); /* lighter than original */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
    /* banner styles */

    .gradient-codersdaily {
        background: linear-gradient(90deg, #FFD93B 0%, #FFB300 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .btn-codersdaily {
        background: linear-gradient(90deg, #FFD93B 0%, #FFB300 100%);
        color: #1a1a1a;
    }

    .btn-codersdaily:hover {
        filter: brightness(1.1);
    }

    /* --- Why Join Us section styles 'title' --- */
    .gradient-title {
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
    color: #2c3e50; /* Solid black text */
}

    /* --- Why Join Us three divs styles --- */
    .rs-counter {
    text-align: center;
    padding: 40px 0;
    background: transparent; /* Remains transparent as per previous request */
    position: relative;
    overflow: hidden;
    /* margin-bottom: 0.5rem */
}

.counter-item {
    background: linear-gradient(145deg, #1A1A2E, #16213E);
    border-radius: 25px;
    padding: 40px 25px;
    margin: 10px;
    color: #E0E0E0;
    position: relative;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Background pseudo-element for subtle internal radial glow */
.counter-item::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.06) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(1);
    border-radius: 50%;
    z-index: -1;
    opacity: 0.7;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Specific item colors and their unique background glows */
.counter-item.custom-one {
    background: linear-gradient(145deg, #4B0082, #6A0DAD);
}
.counter-item.custom-one::before {
    background: radial-gradient(circle at center, rgba(200,0,255,0.12) 0%, transparent 70%);
}

.counter-item.custom-two {
    background: linear-gradient(145deg, #0A2342, #1E3D59);
}
.counter-item.custom-two::before {
    background: radial-gradient(circle at center, rgba(0,180,255,0.12) 0%, transparent 70%);
}

.counter-item.custom-three {
    background: linear-gradient(145deg, #005040, #007060);
}
.counter-item.custom-three::before {
    background: radial-gradient(circle at center, rgba(0,255,180,0.12) 0%, transparent 70%);
}

/* Hover effects */
.counter-item:hover {
    transform: translateY(-12px) scale(1.04);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.counter-item:hover::before {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
}

/* Icon Container */
.icon-container {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.8rem;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.icon-container::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, transparent 70%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.counter-item:hover .icon-container {
    transform: translateY(-10px);
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.counter-item:hover .icon-container::after {
    opacity: 1;
}

.icon-container i {
    color: #FFFFFF;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Text Display Area */
.text-display-area {
    display: flex;
    flex-direction: column; /* Stack number-unit line and secondary label */
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

/* New line for number and unit */
.main-number-unit-line {
    display: flex;
    align-items: baseline; /* Align number and unit baseline */
    justify-content: center;
    margin-bottom: 10px; /* Space between number/unit line and secondary label */
}

/* Applying the gradient text effect */
.main-number,
.main-unit, /* Unit now also gets the gradient */
.secondary-label {
    background-image: linear-gradient(90deg, #FFD93B 0%, #FFB300 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* Standard property */
    color: transparent; /* Fallback for non-webkit browsers */
    text-shadow: none; /* Remove previous text shadows as they interfere with gradient */
}

.main-number {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1;
    margin: 0;
    margin-right: 8px; /* Space between number and unit */
}

.main-unit {
    font-size: 2.2rem; /* Adjusted size for unit to fit next to number */
    font-weight: 800;
    line-height: 1;
    opacity: 0.9;
    /* margin-top: 5px; removed, as it's now inline with main-number */
}

.secondary-label {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    opacity: 0.95;
    /* text-transform: uppercase; removed - based on image, it's not uppercase */
    letter-spacing: 0.5px; /* Slightly reduced letter spacing from previous version */
}


/* Responsive adjustments */
@media (max-width: 991.98px) {
    .counter-item {
        min-height: 260px;
        padding: 35px 25px;
        margin: 15px;
    }
    .icon-container {
        width: 90px;
        height: 90px;
        font-size: 3.5rem;
        margin-bottom: 25px;
    }
    .main-number {
        font-size: 4.5rem;
        margin-right: 6px;
    }
    .main-unit {
        font-size: 2rem;
    }
    .secondary-label {
        font-size: 1.4rem;
    }
}

@media (max-width: 767.98px) {
    .rs-counter {
        padding: 30px 0;
    }
    .col-md-4 {
        width: 95%;
        max-width: 340px;
    }
    .counter-item {
        min-height: 240px;
        margin: 15px auto;
        padding: 30px 20px;
        border-radius: 20px;
    }
    .icon-container {
        width: 80px;
        height: 80px;
        font-size: 3rem;
        margin-bottom: 20px;
    }
    .main-number {
        font-size: 4rem;
        margin-right: 5px;
    }
    .main-unit {
        font-size: 1.8rem;
    }
    .secondary-label {
        font-size: 1.2rem;
    }
    .counter-item:hover {
        transform: translateY(-8px) scale(1.02);
    }
    .counter-item:hover .icon-container {
        transform: translateY(-6px);
    }
}
/* extra css for fourth card in Why Join Us section */
.counter-item.custom-four-alt2 {
    background: linear-gradient(145deg, #004E92, #000428);
}
.counter-item.custom-four::before {
    background: radial-gradient(circle at center, rgba(150,0,255,0.12) 0%, transparent 70%);
}

/* Gradient text specifically for the fourth card */
.counter-item.custom-four .main-number,
.counter-item.custom-four .main-unit,
.counter-item.custom-four .secondary-label {
    background-image: linear-gradient(90deg, #FFD93B 0%, #FFB300 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

    /* --- One Stop Platform Section styles --- */

    .platform-journey-section {
        background-color: #f8faff; /* Light background */
        padding: 80px 0;
        font-family: 'Inter', sans-serif; /* Recommended modern font, ensure it's linked */
    }

    /* Main Title and Subtitle */
    .main-title {
        color: #2c3e50; 
        font-size: 2.5rem; /* Larger for impact */
        font-weight: 800;
        line-height: 1.2;
    }
    .main-title span {
        color: #4f46e5; /* Indigo accent */
    }
    @media (min-width: 768px) {
        .main-title {
            font-size: 2.75rem; /* Medium screens (~44px) */
        }
    }

    @media (min-width: 1024px) {
        .main-title {
            font-size: 3rem; /* Large screens (~48px) but still smaller than original */
        }
    }
    .subtitle {
        color: #606060;
        font-size: 1.15rem;
        max-width: 700px;
        margin: 15px auto 0;
    }

    /* Vertical Navigation Tabs */
    .vertical-tabs .nav-item {
        margin-bottom: 10px; /* Spacing between tab buttons */
    }

    .vertical-tab-button {
        display: flex;
        flex-direction: column; /* Stack label and description */
        align-items: flex-start; /* Align text to the left */
        padding: 25px 25px;
        min-height: 100px;
        border-radius: 12px; /* Slightly rounded for a softer look */
        width: 100%; /* Full width within its column */
        text-align: left;
        background-color: #f3f7ff; /* Lighter background for inactive tabs */
        border: 1px solid #e0e7ff; /* Subtle border */
        color: #555;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden; /* For pseudo-element underline effect */
    }

    .vertical-tab-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 4px; /* Vertical accent bar */
        height: 100%;
        background-color: transparent;
        transition: background-color 0.3s ease;
    }

    .vertical-tab-button:hover:not(.active) {
        background-color: #e0e7ff; /* Light blue on hover */
        color: #333;
        transform: translateY(-2px); /* Slight lift */
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }

    .vertical-tab-button.active {
        background-color: #ffffff; /* White background for active tab */
        color: #000;
        font-weight: 600;
        box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* More prominent shadow for active */
        transform: translateY(-1px); /* Slight lift */
        border-color: #c0d1ff; /* Accent border for active */
    }

    .vertical-tab-button.active::before {
        background-color: #4f46e5; /* Indigo accent for active bar */
    }

    .tab-label {
        font-size: 1.3rem; /* Larger main label */
        font-weight: 700;
        margin-bottom: 5px;
        color: inherit; /* Inherit color from parent button */
    }

    .tab-description {
        font-size: 0.95rem;
        color: #777; /* Subtler color for description */
    }

    .vertical-tab-button.active .tab-description {
        color: #555; /* Slightly darker for active description */
    }
    .tab-label,
    .tab-description {
        display: block; /* Ensures each span is on its own line */
        width: 100%;    /* Optional: make it full width */
    }

    /* Right Content Area Card */
    .content-card {
        background-color: #ffffff;
        border-radius: 20px;
        padding: 40px; 
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        border: 1px solid #f0f0f0;
        min-height: 500px;
        /* Remove centering */
        display: block; /* Change from flex to block */
    }

    /* Content Title and Text */
    .content-title {
        color: #2c3e50; /* Dark text */
        font-size: 2.5rem;
        font-weight: 800;
        line-height: 1.3;
        text-align: left;
    }
    .content-title span {
        color: #4f46e5; /* Indigo accent */
    }
    .text-content p {
        font-size: 1.05rem;
        line-height: 1.6;
        color: #555;
        /* Default is already left-aligned, but explicitly ensure for safety */
        text-align: left;
    }
    .text-content p.text-lg { /* For lead paragraphs */
        font-size: 1.15rem;
        font-weight: 500;
    }


    /* Image Styling - Adjusted */
    .image-wrapper {
        /* Removed border-radius as it's now on the image itself */
        overflow: hidden; /* Ensures image corners are clipped */
        box-shadow: none; /* Removed box shadow from the wrapper */
        transition: all 0.3s ease;
        max-width: 100%; /* Ensure image wrapper doesn't overflow */
        height: auto;
    }

    .image-wrapper img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 15px; /* Rounded corners directly on the image */
        box-shadow: none; /* Removed shadow directly from the image as well for no border */
        transition: transform 0.4s ease; /* Smooth transform for hover effect */
    }

    .image-wrapper:hover img {
        transform: scale(1.05); /* Slight zoom on image hover */
        box-shadow: none; /* Ensure no shadow appears on hover either */
    }

    /* Resource Buttons */
    .resource-buttons {
        margin-top: 25px;
        text-align: left; /* Ensure buttons are left-aligned */
    }
    .btn-resource {
        display: inline-flex;
        align-items: center;
        padding: 10px 20px;
        border-radius: 8px;
        font-size: 0.95rem;
        font-weight: 600;
        color: #4f46e5;
        background-color: #eef2ff;
        border: 1px solid #c7d2fe;
        transition: all 0.2s ease;
        text-decoration: none;
    }
    .btn-resource:hover {
        background-color: #c7d2fe;
        color: #312e81;
        transform: translateY(-2px);
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
    }

    /* Responsive Adjustments */
    @media (max-width: 991.98px) { /* For small desktops and tablets */
        .platform-journey-section {
            padding: 60px 0;
        }
        .main-title {
            font-size: 3rem;
        }
        .subtitle {
            font-size: 1rem;
        }
        .vertical-tab-button {
            padding: 15px 20px;
        }
        .tab-label {
            font-size: 1.2rem;
        }
        .tab-description {
            font-size: 0.9rem;
        }
        .content-card {
            padding: 30px;
            min-height: auto; /* Allow height to adjust on smaller screens */
        }
        .content-title {
            font-size: 2rem;
        }
        .text-content p {
            font-size: 0.95rem;
        }
        .text-content p.text-lg {
            font-size: 1.05rem;
        }
        /* Swap order for image and text on small screens */
        .content-card .grid > *:first-child { /* Image wrapper */
            order: 2;
        }
        .content-card .grid > *:last-child { /* Text content */
            order: 1;
            margin-bottom: 20px; /* Add space below text when it's above image */
        }
        /* Ensure text is left-aligned on small screens too */
        .text-content {
            text-align: left !important;
        }
    }

    @media (max-width: 767.98px) { /* For mobile devices */
        .main-title {
            font-size: 2.5rem;
        }
        .vertical-tab-button {
            padding: 12px 18px;
        }
        .tab-label {
            font-size: 1.1rem;
        }
        .tab-description {
            font-size: 0.85rem;
        }
        .content-title {
            font-size: 1.8rem;
        }
        .content-card {
            padding: 25px;
        }
        /* Ensure text is left-aligned on mobile screens too */
        .text-content {
            text-align: left !important;
        }
        .resource-buttons {
            justify-content: flex-start; /* Left align buttons on small screens */
        }
    }

    /* --- Codersdaily Stories section Styles --- */
    /* --- Codersdaily Stories section Styles --- */
.inspiration-stories-section {
    background-color: #FFFFFF; /* Explicitly set to white */
    padding: 80px 0;
    font-family: 'Inter', sans-serif;
}

/* Section Title Adjustment */
.inspiration-stories-section .section-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px; /* Optional spacing */
}
.inspiration-stories-section .solid-title {
    color: #2c3e50; /* Dark text */
}
.inspiration-stories-section .gradient-title {
    background: linear-gradient(21deg, #341a64 0%, #690782 74%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Horizontal Scroll Container */
.horizontal-scroll-container {
    /* Owl Carousel handles the overflow and width */
}

/* Story Card Wrapper for the Shadow Design Effect */
.story-card-wrapper {
    position: relative;
    padding: 3px; /* Reduced padding to decrease the gap between cards */
}

/* Story Card Styling */
.story-card {
    min-height: 350px; /* Slightly reduced height to make them more squared */
    background: linear-gradient(135deg, #6a0dad, #4b0082);
    border-radius: 15px; /* Keep original border-radius */
    padding: 20px; /* Keep original padding inside the card */
    color: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Softer shadow */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.08); /* Optional: subtle inner border */
}

/* Subtle Card Background Pattern/Overlay */
.card-overlay {
    position: absolute;
    inset: 0; /* shorthand for top, right, bottom, left: 0 */
    background-image: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.05) 0%, transparent 50%),
                      radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    background-size: 150px 150px; /* Size of the gradient repeats */
    opacity: 0.8;
    z-index: -1; /* Behind other card content */
    border-radius: 15px; /* Match story-card border-radius */
}

/* Enhanced Shadow Design Pseudo-element (now a more prominent lifted shadow) */
.story-card-wrapper::before {
    display: none; /* Remove the heavy pseudo-shadow */
}

.story-card:hover {
    transform: translateY(-4px) scale(1.005); /* Less pronounced lift on hover */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Adjusted shadow on hover */
}

/* When card is hovered, adjust the 'behind' shadow */
.story-card:hover + .story-card-wrapper::before {
    transform: translateY(0px) scale(1);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}


/* Story Header for Profile Picture and LinkedIn Icon */
.story-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.profile-pic-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

.profile-pic {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.linkedin-icon-header {
    background-color: #ffffff;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6a0dad;
    font-size: 1.2rem;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.linkedin-icon-header:hover {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(6px);
    color: #ffffff;
    transform: scale(1.08);
}

.story-content {
    flex-grow: 1;
    min-height: 90px;
    margin-bottom: 12px;
}

.story-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.story-footer {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.student-info {
    flex-grow: 1;
}

.student-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 2px;
    color: #ffffff;
}

.student-position {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
}


/* Owl Carousel Overrides (Minimal styling, assuming Owl Carousel's default theme is used) */
.owl-carousel.inspiration-slider .owl-stage-outer {
    padding-bottom: 20px; /* Give space for potential shadow/scrollbars */
}

/* Custom Dot styling for a more modern look */
.owl-theme .owl-dots .owl-dot span {
    width: 10px;
    height: 10px;
    margin: 0 6px;
    background: #d1d5db; /* Gray-300 */
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #4f46e5; /* Indigo-600 */
    transform: scale(1.2); /* Slightly larger when active/hovered */
}


/* Responsive adjustments */
@media (max-width: 991.98px) {
    /* Existing responsive rules for less than 4 items, keep these as they are for smaller screens */
    .inspiration-stories-section .section-title {
        font-size: 2.2rem;
    }
    .story-card {
        padding: 25px;
    }
    .story-content {
        min-height: 100px;
    }
    .story-text {
        font-size: 1rem;
        -webkit-line-clamp: 4;
    }
    .story-card-wrapper::before {
        transform: translate(0px, 0px); /* Simpler shadow on tablet */
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
    .story-card:hover {
        transform: translateY(-8px) scale(1.01);
        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.3);
    }
    .story-card:hover + .story-card-wrapper::before {
        transform: translateY(0px) scale(1);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    }
    .profile-pic-container {
        width: 55px;
        height: 55px;
        border-width: 3px;
    }
    .linkedin-icon-header {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .student-name {
        font-size: 1.25rem;
    }
    .student-position {
        font-size: 0.95rem;
    }
}

@media (max-width: 767.98px) {
    /* Existing responsive rules for mobile screens, keep these as they are */
    .inspiration-stories-section .section-title {
        font-size: 1.8rem;
    }
    .story-card {
        padding: 20px;
    }
    .story-content {
        min-height: 80px;
    }
    .story-text {
        font-size: 0.95rem;
        -webkit-line-clamp: 6;
    }
    .student-name {
        font-size: 1.15rem;
    }
    .student-position {
        font-size: 0.85rem;
    }
    .story-card-wrapper::before {
        display: none; /* Hide pseudo-element on very small screens for simplicity/performance */
    }
    .profile-pic-container {
        width: 50px;
        height: 50px;
        border-width: 2px;
    }
    .linkedin-icon-header {
        width: 35px;
        height: 35px;
        font-size: 1.1rem;
    }
    .story-header {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
}

/* --- Responsive Adjustments --- */
/* For larger tablets and small desktops */
@media (max-width: 1199.98px) {
    .trainingbox {
        min-height: 500px;
    }
    .trainingbox .training-content-unified {
        padding: 18px 20px;
    }
    .trainingbox .training-content-unified h6 {
        font-size: 1.2rem;
    }
    .trainingbox .training-content-unified .short-description-text {
        font-size: 0.88rem;
        -webkit-line-clamp: 3;
    }
    .trainingbox .training-content-unified .skills-heading {
        font-size: 0.82rem;
    }
    .trainingbox .training-content-unified .skill-item {
        font-size: 0.85rem;
    }
    .trainingbox .training-content-unified .course-features-body { /* Adjust for new location */
        padding-top: 12px;
        margin-bottom: 12px;
        gap: 8px;
    }
    .trainingbox .training-content-unified .feature-text { /* Adjust for new location */
        font-size: 0.88rem;
    }
    .trainingbox .card-footer {
        padding: 12px 20px;
        gap: 8px;
    }
    .trainingbox .card-footer .course-duration {
        font-size: 0.92rem;
    }
}

/* For tablets (2 cards per row) */
@media (max-width: 991.98px) {
    .col-md-3.custom-col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 8px;
    }
    .trainingbox {
        min-height: 540px;
        margin-bottom: 15px;
    }
    .trainingbox .training-content-unified {
        padding: 15px 18px;
    }
    .trainingbox .training-content-unified h6 {
        font-size: 1.15rem;
    }
    .trainingbox .training-content-unified .short-description-text {
        font-size: 0.85rem;
        -webkit-line-clamp: 4;
    }
    .trainingbox .training-content-unified .skills-heading {
        font-size: 0.8rem;
    }
    .trainingbox .training-content-unified .skill-item {
        font-size: 0.8rem;
    }
    .trainingbox .training-content-unified .course-features-body { /* Adjust for new location */
        padding-top: 10px;
        margin-bottom: 10px;
        gap: 8px;
    }
    .trainingbox .training-content-unified .feature-text { /* Adjust for new location */
        font-size: 0.85rem;
        gap: 5px;
    }
    .trainingbox .card-footer {
        padding: 10px 18px;
        gap: 6px;
    }
    .trainingbox .card-footer .course-duration {
        font-size: 0.88rem;
    }
}

/* For mobile phones (1 card per row) */
@media (max-width: 767.98px) {
    .col-md-3.custom-col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 6px;
    }
    .trainingwap {
        padding: 25px 0;
    }
    .trainingwap .top-contnet h2 {
        font-size: 1.8rem;
        margin-bottom: 20px;
    }
    .trainingbox {
        min-height: 480px;
        margin-bottom: 12px;
    }
    .trainingbox .training-content-unified {
        padding: 12px 15px;
    }
    .trainingbox .training-content-unified h6 {
        font-size: 1.05rem;
    }
    .trainingbox .training-content-unified .short-description-text {
        font-size: 0.82rem;
        -webkit-line-clamp: 4;
        margin-bottom: 12px;
    }
    .trainingbox .training-content-unified .skills-heading {
        font-size: 0.78rem;
        margin-right: 5px;
    }
    .trainingbox .training-content-unified .skill-item {
        font-size: 0.75rem;
        margin-right: 4px;
        margin-bottom: 3px;
    }
    .trainingbox .training-content-unified .skill-separator {
        font-size: 0.65em;
        margin-right: 4px;
    }
    .trainingbox .training-content-unified .course-features-body { /* Adjust for new location */
        padding-top: 8px;
        margin-bottom: 8px;
        gap: 6px;
    }
    .trainingbox .training-content-unified .feature-text { /* Adjust for new location */
        font-size: 0.82rem;
        gap: 4px;
    }
    .trainingbox .card-footer {
        padding: 8px 15px;
        gap: 5px;
    }
    .trainingbox .card-footer .course-duration {
        font-size: 0.85rem;
    }
}

/* Ensure the row handles wrapping correctly for Bootstrap 4+ */
.row.mt-5 {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}