/* Reset & Base - Minimal overrides needed as Bootstrap handles much of this */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Override Bootstrap text color for body to match original design */
/* body { color: #fff; }  */
a { text-decoration: none; color: inherit; }
ul { list-style: none; }


/* Custom Bootstrap-friendly color definitions */
.bg-codrity-blue { background-color: #253069 !important; }
.bg-codrity-gradient{background: linear-gradient(to bottom, #253069, #0C1028);}
.bg-codrity-dark-blue { background-color: #0C1028 !important; } /* For the footer */
.bg-blue-radial{background: radial-gradient(#40445f, #0c1028, #0c1028);}
.bg-dark-blue-certi{background-color: #253069;}
.bg-white{background: white;}
.color-pink{color:#C71C78;}
.text-blue{color:#253069;}
.border-blue{border-color:#253069 !important;}
.border-w{border-width:2px !important;}
.text-purple{color:#50286D;}
.bg-gray{background: rgba(255, 255, 255, 0.2);}
.bg-black{background-color:#000;}
.color-gray::placeholder{color:#5A5A5A !important;}
.color-gray{color:#5A5A5A !important;}
.fs-14{font-size:18x;}
.btn-explore-m:hover{background: #F2C818 !important;
    color: #000 !important;}

.fw-900{font-weight: 900;}

.fs-21{font-size: 21px;}

/* Font Definitions - Essential to keep */
.libre-franklin, .fw-500, .fw-700 { /* Bootstrap has fw-light, fw-normal, fw-bold, but custom fonts need explicit setting */
  font-family: "Libre Franklin", sans-serif !important;
  font-optical-sizing: auto;
}
.ff h5{
  font-family: "Libre Franklin", sans-serif !important;
}
.libre-franklin.fw-500 { font-weight: 500 !important; }
.libre-franklin.fw-700 { font-weight: 700 !important; }

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}


.logo-wrapper {
      position: relative;
      width: 280px;
      height: 280px;
      margin-top:-125px;
    }

    .rotating-ring {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      animation: spin 10s linear infinite;
      z-index: 1;
    }

    .center-logo {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 88%;
      height: 88%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      z-index: 1;
    }
.fa-arrow-up{
    transform: rotate(45deg);
}
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* Responsive design */
    @media (max-width: 576px) {
      .logo-wrapper {
        width: 200px;
        height: 200px;
      }
    }




/* Custom Text Styles - Essential to keep for unique effects */
.gradient{
  font-size: 48px; 
  font-weight: bold;
  background: linear-gradient(135deg, #ED1F8E, #0025C6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; 
  color: transparent; /* Fallback for browsers */
  /* This is to simulate the stroke effect */
  -webkit-text-stroke: .5px #fff; 
  color:#fff; /* Used when combined with .text-outline */
}
.text-outline{
  font-size: 45px;
  -webkit-text-stroke: .5px #000000;
  /* The below properties are likely redundant due to the .gradient class but kept for safety */
  background-clip: text;
}

/* Header & Navbar Overrides */
.navbar-nav .nav-link { 
  color: #fff; 
  transition: color .3s; 
  font-size: 18px; 
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { 
  color: #fff; 
}
.course-dropdown {
    width: 1281px;
    left: -528px !important;
    top: 70px !important;
    background: #000 !important;
    border-radius:0 !important;
    z-index: 2;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #fff !important;
}
.list-disc {
  padding-left:0 !important;
}
.drop-down-m{
    margin: 0 72px;
}
.drop-muted{
    color: #5A5A5A;
    font-size: 12px;
}
.list-disc li::before {
  content: '\f111';
  font-family: 'FontAwesome';
  padding-right: 12px;
  font-size: 8px;
  position: relative;
  top: -2px;
  color: #253069;
}
/*.list-disc li{*/
/*    padding-left:10px;*/
/*}*/
.drop-fz{
    font-size: 14px;
}
.mr-logo{
  margin-right: 60px;
}
/* For the verification button, Bootstrap's .btn-outline-light is used, but if you need specific padding: */
.veri .btn { 
    padding: 1.2rem 2rem; 
}
.btn-radius{
  border-radius: 10px !important;
}
.btn-shadow:after{
  content: "";
    position: absolute;
    top: 8px;  /* offset to create border look */
    left: 8px;
    right: -6px;
    bottom: -6px;
    border-radius: 10px;
    z-index: -1;
    border: 1px solid #000;
    transition: all 0.3s ease;
}
.btn-shadow:hover:after{
  background-color: #000;
}
.cta{
    font-size: 18px !important;
}
.slider-hero{
  width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.slider-hero img{
  width: 60px;
}
.slider-hero h5{
  font-size: 30px;
    font-weight: 800;
}
/* Hero Section Custom Styling */
/* Custom background pattern - Essential to keep */
.bg-codrity-blue:after {
  content: '';
  background-image: url(../images/pattern-slider.png);
  width: 562px;
  height: 850px;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -122px;
  z-index: -1;
  left: 56%;
}
.hero-content h1 { /* Adjusted for Bootstrap's display-4 */
    font-family: 'Libre Franklin', sans-serif; 
    /* font-weight: 800; */
}
.hero-content h2 { /* Adjusted for Bootstrap's display-4 */
  font-family: 'Libre Franklin', sans-serif; 
  /* font-weight: 800; */
}
.hero-content p { 
    word-spacing: 4px;
}
/* Re-define badge custom sizes and absolute positioning */
.badge {
  width: 120px;
  text-align: center; 
}
.badge h6{
  font-size: 18px;
  line-height: 28px;
}
.badge-cap{
  width: 160px;
}
.badges{
  position:absolute;
}
.badge-1{
  top: -18px;
    left: -20px;
}
.badge-2{
  top: 72px;
    left: 330px;
}
.fw-cust{
  font-size: 30px;
}
.z-index-bg{
  z-index: 1;
}
.text-yellow{
  color: #F4BC19;  
}
.text-c-green{color:#1AABAC;}
.text-c-yellow{color:#FFD319;}
.text-c-pink{color:#ED1F8E;}

/* Hero Image - Minor adjustment for original width */
.hero-image img {width: 92%; height: auto; border-radius: 10px; position: relative; left: -50px; }


/* Vertical Slider - Essential to keep as it's a custom component */
.vertical-slider {
  width: 525px;
    height: 120px;
    overflow: hidden;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    bottom: 19px;
    left: -48px;
  backdrop-filter: blur(10px);
  background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
  border-radius: 11px;
  z-index: 10; /* Ensure it's above the image */
}
.slider-track {
  display: flex;
  flex-direction: column;
  animation: slide-vertical 8s linear infinite;
}
.slide {
  height: 118px;           
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
/* Start Logo Animation */

/* Start Logo Animation */
/* Slider Animation - Essential to keep */
@keyframes slide-vertical {
  0% { transform: translateY(0); }
  20% { transform: translateY(0); }
  25% { transform: translateY(-118px); }
  45% { transform: translateY(-118px); }
  50% { transform: translateY(-236px); }
  70% { transform: translateY(-236px); }
  75% { transform: translateY(-354px); }
  95% { transform: translateY(-354px); }
  100% { transform: translateY(0); }
}
/* Start button shake */
.head-shake {
  display: inline-block;
  animation: headShake 1.5s infinite;
}
@keyframes headShake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-4px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(3px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}
/* End button shake */

/* Footer Custom Styling */
.footer p { font-size: 1.1rem; }
.footer-title{font-family: "Libre Franklin", sans-serif !important;font-size: 18px;
  font-weight: 600;}
.footer-icon{padding: 5px 8px;
  border-radius: 50%;}
  .footer-icon-e{padding: 7px 7px;
    border-radius: 50%;
  font-size: 12px !important;}
    .footer-icon-p{padding: 5px 7px;
      border-radius: 50%;}
.social-btn{background: #253069;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  line-height: 41px;
  font-size: 20px;}
/* Animations - Essential to keep */
.heartbeat-text {
  font-size: 2.5rem; /* Adjusted to complement h1 */
  font-weight: 900; 
  animation: heartbeat 1.5s infinite;
  display: inline-block;
}
@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.1); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.1); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}
.head-shake {
  display: inline-block;
  animation: headShake 1.5s infinite;
}
@keyframes headShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-4px) rotateY(-5deg); }
  43.5% { transform: translateX(3px) rotateY(3deg); }
  50% { transform: translateX(0); }
}

/* Responsive Design Overrides */
/* Bootstrap handles much of the media queries, but some custom ones are needed */
@media (max-width: 992px) {
  /* On medium/small screens, adjust badge positioning to keep them visible */
  .badge-1, .badge-2 { position: relative !important; top: auto !important; left: auto !important; right: auto !important; margin: 0.5rem auto; }
  .badges { justify-content: center; margin-bottom: 2rem;  }
  .hero-image img { width: 100%; }
  .vertical-slider {
    width: 90%;
    margin: 1rem auto;
    position: relative;
    top: 0;
    left: 0;
  }
}

/* Start course section */

.skill-card {
  color: #fff;
  text-align: center;
  transition: all 0.3s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  border-radius: 10px;
  /* transition: transform 0.3s 
ease; */
    transform-origin: top left;
}

.skill-card .img-dm {
  width: 110px;
  height: 110px;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}
.img-arrow{
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #fff;
  padding: 9px;
  transform: rotate(-50deg);
  position: relative;
  top: 60px;
  margin-top: -45px;
}

.skill-card h5 {
  font-size: 18px;
  margin-bottom: 10px;
}

.skill-card p {
  font-size: 12px;
  opacity: 0.9;
}
.col-lg-heading{
  width: 48%;
}
.col-lg-education{
  width: 45%;
}
.bar-w{
  width: 260px;
}
/* .skill-card:hover{
  border-right:2px solid #1AABAC;
} */
/* Hover Effects */
.skill-card:hover h5{
  /* transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); */
  font-weight: 900 !important;
}
.skill-card:hover .img-arrow{
  background-color: #fff;
  transform: rotate(0deg);
  color:#000;
}
.skill-card:hover{
  transform: scale(1.003);
}

/* .skill-card:hover img {
  transform: scale(1.1) rotate(-5deg);
} */

/* Individual Background Colors */
.bg-skill-1 { background-color: #1AABAC; } /* Digital Marketing */
.bg-skill-2 { background-color: #ED1F8E; } /* Graphic Design */
.bg-skill-3 { background-color: #FFD215; } /* UI/UX Design */
.bg-skill-4 { background-color: #762DAA; } /* Data Analyst */
.bg-skill-5 { background-color: #102DC9; } /* AI */
.bg-skill-6 { background-color: #FFD319; } /* Prompt Engg */
.bg-skill-7 { background-color: #077676; } /* VFX */

.text-stroke{
  -webkit-text-stroke: 0.4px #000000;
}
/* Rounded Cards */
.rounded-4 {
  border-radius: 20px !important;
}
/* Load more animation */
.more-course.showing {
  animation: fadeInUp 0.35s ease-out forwards;
}

@keyframes fadeInUp {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}


#loadMoreBtn {
  background-color: #1A265A;  /* Navy blue */
  color: #fff;
  border: none;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  font-size: 0; /* hide text initially */
  position: relative;
  transition: transform 0.35s ease, width 0.35s ease, height 0.35s ease, border-radius 0.35s ease;
  overflow: hidden;
  cursor: pointer;
}

#loadMoreBtn::before {
  content: "\f107"; /* arrow icon */
  font-size: 40px;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  font-family: "FontAwesome";
  font-weight: 900;
}

#loadMoreBtn:hover {
  transform: scale(1.18); /* 🔥 Zoom-in effect added */
  width: 130px;
  height: 50px;
  border-radius: 10px;
  font-size: 18px;
  padding-left: 15px;
}

#loadMoreBtn:hover::before {
  opacity: 0; /* hide arrow */
  transform: translate(-50%, -15px); /* animate arrow up */
}

#loadMoreBtn:hover::after {
  content: "Load More";
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* End course section */
/* Short-Term Skill Courses pills */

.course-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;              /* full pill */
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  box-shadow: none !important;
  border: 1px solid #000;
  padding: 0 18px;
  line-height: 0 !important;
  height: 32px;
  margin-bottom: 5px;
  transform-origin: top left;
}

/* Colors (matching your palette) */
.pill-teal   { background-color: #077676; }
.pill-purple { background-color: #762DAA; }
.pill-yellow { background-color: #FFD319; }
.pill-pink   { background-color: #ED1F8E; }
.py{width: 92px;}
.ja{width: 75px;}
.hc{width: 135px;}
.bs{width: 110px;}
.js{width: 118px;}
.ph{width: 120px;}
.co{width: 125px;}
.ill{width: 105px;}
.cca{width: 82px;}
.dcaa{width: 90px;}
.mse{width: 105px;}
.dca{width: 75px;}
.mo{width: 100px;}
.pro{width: 170px;}
.cp{width: 50px;}
.ccp{width: 55px;}
/* Hover effect */
.course-pill:hover {
  transform: scale(1.01);
  font-weight: 700;
}
.fz-small{
  font-size: 12px;
}

/* Small screens: slightly smaller pills */
@media (max-width: 576px) {
  .course-pill {
    padding: 6px 18px;
    font-size: 14px;
  }
}

/* Academic Programs Cards */
.program-card {
  border-radius: 10px;
  padding-right: 80px; /* space for arrow */
  box-shadow: 0 8px 15px rgba(0,0,0,0.12);
  transform-origin: top left;
}

.program-card:hover {
  transform: scale(1.003);
}
.program-card h5{
  font-size: 18px;
  font-weight: 700 !important;
}
.program-card:hover h5 {
  font-weight: 900 !important;
}

/* Arrow Button */
.program-arrow {
  position: absolute;
    right: 25px;
    top: 58%;
    bottom: -25% !important;
    transform: rotate(-50deg);
    right: 18px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 12px;
}

/* Arrow hover animation */
.program-card:hover .program-arrow {
  background-color: #ffffff;
  color: #000;
  transform: rotate(0deg);
}

/* Backgrounds */
.bg-acad-1 { background-color: #762DAA; } /* Purple */
.bg-acad-2 { background-color: #ED1F8E; } /* Pink */
.bg-acad-3 { background-color: #0637EE; } /* Blue */
.bg-acad-4 { background-color: #00676A; } /* Teal */

/* Start AI powered education */
.gradient-mix{
  background: linear-gradient(
    /* Angle: 135deg creates the diagonal sweep seen in the image. */
    135deg, 
    #4D1C79 0%,    /* Deep Violet/Dark Purple (Bottom Left) */
    #7B379F 45%,   /* Mid-tone Royal Purple (Middle) */
    #C13584 75%,   /* Strong Magenta/Pink (Upper Right) */
    #ED1F8E 100%   /* Bright Magenta/Pink End */
  );
}
.layered-img{
    top: 50%;
    left: 50%;
    width: 97%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}
.z-three{
  z-index: 3;
}
.gradient-mix:after {
  content: '';
    background-image: url(../images/workshop-pattern.png);
    width: 562px;
    height: 265px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    bottom: 0;
}
/* End AI powered Education */

/* Responsive adjustments */
@media (max-width: 576px) {
  .program-card { padding-right: 60px; }
  .program-arrow { width: 42px; height: 42px; font-size: 16px; }
}

/* Start Industrial Training */
/* ================================================================
  START: AI Learning Experience Moving Icons (RESPONSIVE - PURE SCALING) 
================================================================
*/

/* 1. Main Container & Hover Pause */
.ai-learning-container {
  position: relative;
  width: 765px; 
  height: 500px;
  margin: 50px auto 0; 
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; 
  transition: transform 0.3s ease-out; 
}
.main-button{
  background: #000;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 18px;
}

/* --- PAUSE ON HOVER EFFECT (No Change) --- */
.ai-learning-container:hover .icon {
    animation-play-state: paused !important;
}

/* 2. Oval Paths Styling & Dimensions (ORIGINAL PIXEL VALUES) */
.ai-learning-container .oval-path {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.2); 
  border-radius: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ai-learning-container .path-1 { width: 700px; height: 367.5px; box-shadow: 0 0 0px rgba(255, 255, 255, 0.9), 0 0 4px rgba(255, 255, 255, 0.5);} 
.ai-learning-container .path-2 { width: 612.5px; height: 301.875px; border: 1px solid rgb(255 255 255 / 50%);} 
.ai-learning-container .path-3 { width: 525px; height: 236.25px; border: 1px solid rgb(255 255 255 / 70%);} 
.ai-learning-container .path-4 { width: 437.5px; height: 166.25px; border: 1px solid rgb(255 255 255); } 

/* 3. Icon Movement Setup (BASE ICON SIZE REVERTED TO ORIGINAL PIXEL VALUES) */
.ai-learning-container .icon {
  position: absolute;
  width: 60px; /* REVERTED TO ORIGINAL 60PX */
  height: 60px; /* REVERTED TO ORIGINAL 60PX */
  offset-anchor: 50% 50%; 
  z-index: 5;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
  animation: moveIcon 40s linear infinite; 
  offset-distance: 0%; 
}

/* Icon Size Overrides (REVERTED TO ORIGINAL PIXEL VALUES) */
.frame3{ width: 50px !important; height: 50px !important; } 
.frame2{ width: 50px !important; height: 50px !important; }
.frame4{ width: 60px !important; height: 45px !important; } 


/* 4. Center Button Positioning (No Change) */
/* ... (existing center button CSS and glow CSS) ... */

/* 5. Global Keyframes (No Change) */
@keyframes moveIcon {
  to {
      offset-distance: 100%;
  }
}

/* 6. Icon Path Assignments (No Change in logic) */
/* (Keep all existing Path Assignments here) */

/* --- A. OUTER TRAIN (5 ICONS on Path 1) --- */
.ai-learning-container .icon-brain { 
    offset-path: ellipse(350px 183.75px); animation-delay: 0s; }
.ai-learning-container .icon-ai1 { 
    offset-path: ellipse(350px 183.75px); animation-delay: -8s; }
.ai-learning-container .icon-sparkle1 { 
    offset-path: ellipse(350px 183.75px); animation-delay: -16s; }
.ai-learning-container .icon-code { 
    offset-path: ellipse(350px 183.75px); animation-delay: -24s; }
.ai-learning-container .icon-ai3 { 
    offset-path: ellipse(350px 183.75px); animation-delay: -32s; }

/* --- B. INNER TRAIN (4 ICONS on Path 4) --- */
.ai-learning-container .icon-chatai { 
    offset-path: ellipse(218.75px 83.125px); animation-delay: 0s; }
.ai-learning-container .icon-thumbs { 
    offset-path: ellipse(218.75px 83.125px); animation-delay: -10s; }
.ai-learning-container .icon-ai2 { 
    offset-path: ellipse(218.75px 83.125px); animation-delay: -20s; }
.ai-learning-container .icon-sparkle2 { 
    offset-path: ellipse(218.75px 83.125px); animation-delay: -30s; }
/* ================================================================
  START: GLOW ANIMATION FOR CENTER BUTTON (SUBTLE WHITE)
================================================================
*/

/* 1. Define the Glow Keyframes (The property that changes color/intensity) */
@keyframes pulseGlow {
  0% {
      /* Softest white starting glow */
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.3), 
                  0 0 10px rgba(255, 255, 255, 0.1); 
  }
  50% {
      /* Peak glow: Brighter white core with a subtle hint of blue for depth */
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 
                  0 0 25px rgba(255, 255, 255, 0.4), 
                  0 0 35px rgba(0, 37, 198, 0.1);    
  }
  100% {
      /* Return to softest white */
      box-shadow: 0 0 5px rgba(255, 255, 255, 0.3),  
                  0 0 10px rgba(255, 255, 255, 0.1); 
  }
}

/* 2. Apply the Animation to the Button Element */
.ai-learning-container .center-content .main-button {
  position: relative;
  /* This property assigns the pulsing glow effect */
  animation: pulseGlow 3s ease-in-out infinite; 
  z-index: 10;
}

/* ================================================================
END: GLOW ANIMATION FOR CENTER BUTTON
================================================================
*/

/* ================================================================
  RESPONSIVE SCALING (Media Queries - Handles responsiveness via scaling only)
================================================================
*/
@media (max-width: 768px) {
    .ai-learning-container {
        width: 100%;
        max-width: 765px; 
        height: 400px;
        
        /* SCALES THE ENTIRE UNIT (PATHS, ICONS, SIZES) DOWN TO 65% */
        transform: scale(0.65); 
        transform-origin: center top; 
        
        /* Adjust margin to account for scaled height */
        margin-top: 20px;
        margin-bottom: -100px; 
    }
}

@media (max-width: 480px) {
    .ai-learning-container {
        /* Scales down further for smaller mobile screens */
        transform: scale(0.5); 
        margin-bottom: -150px; 
        height: 350px;
    }
}

/* ================================================================
END: AI Learning Experience Moving Icons
================================================================
*/

/* Start workshop section */
.heading-workshop{
  width: 592px;}
.heading-workshop-expert{width:665px;}
.workshop-container{
  width: 890px !important;}
.mt-img1{
  margin-top: 80px;}
.mt-img2{
  margin-top: 160px;}
/* .aimbig-rotated{
  top: 92%;
  right: 90px;} */
.explore-btn{
  background: #F2C818;
  font-weight: 800;
  color: #000;
  font-size: 18px;
  padding: 18px 30px;
  border: 1px solid #000;}

  .workshop-before:before {
    content: '';
      background-image: url(../images/workshop-before-pattern.png);
      width: 562px;
      height: 265px;
      display: inline-block;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 0;
  }
  .workshop-after:after {
    content: '';
      background-image: url(../images/workshop-pattern.png);
      width: 562px;
      height: 265px;
      display: inline-block;
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 0;
  }

/* ===== AIMBIG Vertical Animation (Isolated) ===== */

.aimbig-wrapper {
  position: fixed;              /* stays on right side */
  right: 20px;                  /* spacing from right */
  top: 0;
  height: 100vh;                /* full viewport height */
  width: 80px;                  /* adjust to logo width */
  overflow: hidden;
  z-index: 999;                 /* stays above content */
  pointer-events: none;         /* no interaction issues */
}

/* Animation container */
.aimbig-track {
  position: absolute;
  bottom: -200px;               /* start below screen */
  animation: aimbig-vertical-move 6s linear infinite;
}

/* Logo styling */
.aimbig-logo {
  width: 60px;
  height: auto;
  display: block;
}

/* Vertical animation */
@keyframes aimbig-vertical-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-120vh); /* move up and restart */
  }
}

 /* start trusted by top companies */
 .hero-content-top{width:580px;}
 .top-companies:before {
  content: '';
    background-image: url(../images/schloarship-pattern.png);
    width: 430px;
    height: 270px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
.scholarship:after {
  content: '';
    background-image: url(../images/pattern-scholarship.png);
    width: 430px;
    height: 270px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 66.4% !important;
    bottom: 0;
    z-index: 0;
}
.gradient-mix-s{
  background: linear-gradient(
    /* Angle: 135deg creates the diagonal sweep seen in the image. */
    150deg, 
    #C13584 0%,    /* Deep Violet/Dark Purple (Bottom Left) */
    #253069 45%,   /* Mid-tone Royal Purple (Middle) */
    #253069 75%,   /* Strong Magenta/Pink (Upper Right) */
    #C13584 100%   /* Bright Magenta/Pink End */
  );
}
 /* End trusted by top comapnies */


/* Start trained section */

/* Keyframes for infinite right-to-left scroll (Content moves to the left) */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); } /* Scrolls exactly one copy of the content */
}

/* Keyframes for infinite left-to-right scroll (Content moves to the right) */
@keyframes scroll-right {
  from { transform: translateX(-50%); } /* Starts one copy to the left */
  to { transform: translateX(0); }      /* Ends at the start, creating loop */
}

/* Container for the infinite scroll effect */
.scrolling-wrapper {
  display: flex;
  width: 200%; /* Important: Must be double the width to hold the duplicated content */
}

/* Apply the animation to the specific row wrapper */
.animate-scroll-left {
  animation: scroll-left linear infinite;
}

.animate-scroll-right {
  animation: scroll-right linear infinite;
}

/* Define different animation speeds (durations) for the rows */

/* Row 1: FAST - Leftward movement */
#row-1 .scrolling-wrapper { animation-duration: 20s; }

/* Row 2: MEDIUM - Rightward movement */
#row-2 .scrolling-wrapper { animation-duration: 35s; }

/* Row 3: SLOW - Leftward movement */
#row-3 .scrolling-wrapper { animation-duration: 50s; }

/* Style for the individual image cards */
.image-card {
  flex-shrink: 0;
  width: 100px; /* Base size for image on desktop */
  padding: 10px;
}

/* Ensure image cards are slightly smaller on mobile for better fit */
@media (max-width: 640px) {
  .image-card {
      width: 80px;
  }
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Start evets 2025 section */

/* Events section base */
.events-section { background: #253069; }
.events-vector:after{
  content: '';
    background-image: url(../images/events-vector.png);
    width: 430px;
    height: 270px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* Card */
.event-card {
  background: linear-gradient(90deg, rgb(26 171 172 / 38%), rgb(26 171 172 / 21%));
  border-radius: 4px;
    padding: 10px 22px;
    border: 1px solid rgba(26, 171, 172, 0.54);
    align-items: center;
    position: relative;
}

/* date block left */
.date-block {
  width: 65px;
  min-width: 65px;
  padding-right: 0;
  color: #fff;
  text-align: center;
}
.date-block .day {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
}
.date-block .month {
  font-size: 20px;
  line-height: 18px;
  color: rgba(255,255,255,0.9);
  letter-spacing: 1px;
}

/* content */
.event-content {
  padding: 0 20px;
}
.event-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.event-sub {
  font-weight: 200;
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0;
  font-family: "Libre Franklin", sans-serif;
  line-height: 18px;
}

/* right tag */
.event-type {
  min-width: 110px;
  text-align: right;
  color: rgba(255,255,255,0.9);
  font-weight: 200;
  font-size: 15px;
  bottom: -25px;
}
.heading-event {
  width: 585px;
}
/* Gradients variants (change to match design) */
.grad-gold      { background: linear-gradient(47deg, #927821, #525252); border:1px solid rgba(255,211,25,0.54); }
.grad-teal-dark { background: linear-gradient(90deg,#0f4b70,#0b6f88); border:1px solid rgba(10,180,170,0.14); }
.grad-purple    { background: linear-gradient(90deg, #692a8a, #3c1549); border:1px solid rgba(237,31,142,0.54); }

/* thin colored outline like image */
.event-card { box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset; }

/* responsive tweaks */
@media (max-width: 991.98px) {
  .date-block { width: 110px; min-width: 110px; }
  .event-card { padding: 14px 16px; }
  .event-title { font-size: 20px; }
}
@media (max-width: 575.98px) {
  .event-card { flex-direction: column; align-items: flex-start; gap: 10px; min-height: auto; }
  .date-block { width: auto; min-width: 0; border-right: none; text-align: left; padding: 0; }
  .event-type { text-align: left; width: 100%; }
}
.hero-content-innovation{width:570px}

/* start joyful moments section */
/* SECTION BACKGROUND & BASE */
.photos-hero {
  position: relative;
  overflow: visible;
  padding-top: 48px;
  padding-bottom: 60px;
}
.bg-event-gradient{
  background: linear-gradient(135deg, #ffeef5 0%, #f6f7fb 100%);
}
.joyful:before{
  content: '';
    background-image: url(../images/celebrate-pattern.png);
    width: 430px;
    height: 270px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}

/* BUTTONS (centered) */
.btn-explore, .btn-outline-event {
  min-width: 220px;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform .22s ease, box-shadow .22s ease;
}

/* Yellow filled button */
.btn-explore {
  background: #FFD319;
  color: #111;
  border: 2px solid rgba(0,0,0,0.08);
}
.btn-explore:hover { transform: translateY(-4px); }

/* Outline button */
.btn-outline-event {
  background: rgba(255,255,255,0.95);
  color: #111;
  border: 2px solid rgba(0,0,0,0.12);
}
.btn-outline-event:hover { transform: translateY(-4px); }

/* ==== Column-based masonry: predictable positions, bottom-aligned ==== */
.gallery-columns {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;     /* bottom align contents of each column */
  gap: 10px;
  margin-top: 36px;
  width: 95%;
}

/* each column is a vertical flexbox that stacks images from top to bottom;
   align-items: center keeps cards centered in column */
.gallery-columns .col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;                /* allow columns to be equal width */
  min-width: 140px;
  max-width: 220px;           /* tune as needed for look */
}

/* Masonry item card basic styles */
.masonry-item {
  width: 100%;
  display: block;
  position: relative;
}
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(6,10,30,0.12);
  transition: transform .28s ease, box-shadow .28s ease;
}

/* hover */
.masonry-item img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(6,10,30,0.16);
}

/* spacing helper to push items visually lower — .mt-4 used in HTML */
.mt-4 { margin-top: 22px !important; }

/* custom item height classes to replicate your collage */
.masonry-item.small img { height: 180px; }
.masonry-item.narrow img { height: 240px; }
.masonry-item.tall img { height: 300px; }
.masonry-item.tall-portrait img { height: 300px; }
.masonry-item.wide img { height: 320px; }
.masonry-item.poster-vertical img { height: 300px; }

/* Media queries — adjust column counts / widths responsively */
@media (max-width: 1200px) {
  .gallery-columns { gap: 20px; }
  .gallery-columns .col { max-width: 200px; }
  .masonry-item.tall img { height: 400px; }
  .masonry-item.tall-portrait img { height: 480px; }
}

@media (max-width: 992px) {
  /* reduce to 3 columns on tablet */
  .gallery-columns { gap: 18px; }
  .gallery-columns .col { max-width: 30%; flex-basis: 30%; }
  .masonry-item.tall img { height: 360px; }
  .masonry-item.tall-portrait img { height: 420px; }
}

@media (max-width: 768px) {
  /* 2 columns on small screens */
  .gallery-columns {
    /*flex-wrap: wrap;*/
    /*align-items: stretch; */
    /* columns will wrap, bottom alignment not possible when wrapped */
  }
  .gallery-columns{
      width: 100%;
  }
  .gallery-columns {
        gap: 6px;
  }
  .masonry-item img {
    height: 200px !important;
  }
  .masonry-item.wide img {
    height: 230px !important;
}
    .marquee-item {
        font-size: 28px !important;
    }
  .gallery-columns .col { max-width: 48%; flex-basis: 48%; }
  .masonry-item.tall img { height: 320px; }
  .masonry-item.tall-portrait img { height: 380px; }
}

@media (max-width: 480px) {
  /* single column on phones */
  .gallery-columns .col { max-width: 100%; flex-basis: 100%; }
  .masonry-item.tall img { height: auto; border-radius: 14px; }
  .masonry-item.tall-portrait img { height: auto; border-radius: 14px; }
}


/* Colors used in screenshot */
.bg-dark-blue { background: #1f2a57; } /* change as needed */
.bg-demo{background-color:#181E3E;}

/* Marquee wrapper ensures overflow hidden */
.marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0;
}

/* The moving container (visible area) */
.marquee {
  width: 100%;
  white-space: nowrap;
}

/* Track holds all items in a single row */
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 4.5rem; /* space between items */
  /* animation applied to the whole track */
  animation: marqueeMove 30s linear infinite;
  will-change: transform;
}

/* Each item style (text look from screenshot) */
.marquee-item {
  display: inline-block;
  font-size: 25px;           /* large size like screenshot */
  font-weight: 800;          /* bold */
  color: #ff4ba1;            /* pink fill */
  text-shadow:
     0 2px 0 rgba(0,0,0,0.25),           /* subtle dark shadow */
     0 0 0 #000;                         /* keep crisp */
  letter-spacing: 0.4px;
  padding: 1.125rem 0;
  cursor: default;
  user-select: none;
  white-space: nowrap;
}

/* Pause animation while hovering the whole marquee area */
.marquee-wrap:hover .marquee-track,
.marquee-track:focus {
  animation-play-state: paused;
}
.move-effect{
  margin-top: -16px;
  position: relative;
}

/* animation keyframes: translateX from 0 to -50% of track (since duplicated) */
/* We move the track left so items appear to scroll from right to left */
@keyframes marqueeMove {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* -50% because track contains duplicate sequence */
}

/* RESPONSIVE: reduce font-size and gap on smaller screens */
@media (max-width: 1200px) {
  .marquee-item { font-size: 30px; }
  .marquee-track { gap: 3.2rem; }
}
@media (max-width: 768px) {
  .marquee-item { font-size: 22px; }
  .marquee-track { gap: 2rem; animation-duration: 20s; }
}
@media (max-width: 480px) {
  .marquee-item { font-size: 18px; }
  .marquee-track { gap: 1.4rem; animation-duration: 22s; }
}

/* Start animation join codrity */
.app-container {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Flex containers for the two halves */
.zone-white { width:450px; font-family: "Libre Franklin", sans-serif !important;}
.zone-blue { width:400px;font-family: "Libre Franklin", sans-serif !important;}

/* The Mask ensures text stays inside its own half */
/* .v-mask { 
  overflow: hidden; 
  height: 140px; 
  display: flex; 
  align-items: center; 
  position: relative;
} */

.navy-text { background: linear-gradient(to right, #102DC9, #1AABAC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px black; 

 }
.sky-glow { 
  background: linear-gradient(to right, #102DC9, #1AABAC);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 0.5px #fff;

}

/* TOP: Falls to the line, shakes, then falls OUT of its mask */
.action-drop {
  animation: dropAndVanish 2s ease-in-out infinite;
}

@keyframes dropAndVanish {
  0% { transform: translateY(-140px); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translateY(0); } /* Hits the center line */
  35% { transform: translateY(10px); } /* Shake */
  40% { transform: translateY(-5px); }
  45% { transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { transform: translateY(140px); opacity: 0; } /* Falls out of White zone */
}

/* BOTTOM: Rises to the line, shakes, then rises OUT of its mask */
.action-rise {
  animation: riseAndVanish 2s ease-in-out infinite;
}

@keyframes riseAndVanish {
  0% { transform: translateY(140px); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: translateY(0); } /* Hits the center line */
  35% { transform: translateY(-10px); } /* Shake */
  40% { transform: translateY(5px); }
  45% { transform: translateY(0); }
  80% { opacity: 1; transform: translateY(0); }
  100% { transform: translateY(-140px); opacity: 0; } /* Rises out of Blue zone */
}
/* End animation */


/* Start students review section */
/* -------------------------------
   Scoped Testimonials styles
   (use this to replace your current testimonials CSS)
   ------------------------------- */
.heading-reviews{width: 665px;}
   .testimonials-section {
    background: linear-gradient(180deg, #fdf3f8 0%, #eaf6f6 100%);
    padding-top: 40px;
    padding-bottom: 80px;
    overflow: visible;
  }
  
  /* Title inside testimonials only */
  .testimonials-section .section-title {
    font-size: 28px;
    letter-spacing: .2px;
    color: inherit;
    margin-bottom: 18px;
  }
  
  /* Grid with explicit columns (predictable layout) */
  .testimonials-section .testimonials-grid {
    display: flex;
    gap: 10px;
    align-items: flex-start; /* items start from top inside each column */
  }
  
  /* Each column is a vertical stack */
  .testimonials-section .testimonials-grid .col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 0;
    min-width: 180px;
    max-width: 280px; /* tune to match screenshot */
  }
  
  /* ---------- Card styles (scoped) ---------- */
  .testimonials-section .card-item {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(6,10,30,0.08);
    transition: transform .22s ease, box-shadow .22s ease;
  }
  
  /* Hover lift (scoped) */
  .testimonials-section .card-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(6,10,30,0.12);
  }
  
  /* Media card (image thumbnails) */
  .testimonials-section .media-card {
    background: #fff;
  }
  
  .testimonials-section .media-card .media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
  }
  
  /* Text testimonial cards */
  .testimonials-section .text-card {
    padding: 20px;
    color: #fff;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
iframe{
    width: 271px !important;
    height: 482px !important;
}
  
  /* Color variants (scoped) */
  .testimonials-section .text-card.teal    { background: #2ca9a6; }
  .testimonials-section .text-card.magenta { background: #e63b97; }
  .testimonials-section .text-card.yellow  { background: #ffd319; color: #222; }
  .testimonials-section .text-card.purple  { background: #6e2aa6; }
  
  /* Card text & name pill */
  .testimonials-section .card-body { position: relative; }
  .testimonials-section .card-text {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 14px 0;
  }
  
  /* name pill at bottom-left (scoped) */
  .testimonials-section .name-pill {
    display: inline-block;
    background: rgba(255,255,255,0.95);
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    color: #111;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  }
  
  /* ---------- Badges: time & stars (scoped) ---------- */
  .testimonials-section .card-item .badge {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 16px;
    font-weight: 700;
    font-size: 13px;
    z-index: 8;
    box-shadow: 0 6px 16px rgba(6,10,30,0.12);
    background: rgba(255,255,255,0.95);
    color: #111;
  }
  
  /* time badge top-left */
  .testimonials-section .card-item .badge.time {
    top: 12px;
    left: 12px;
    border-radius: 14px;
    padding: 6px 8px;
    background: rgba(255,255,255,0.98);
    font-weight: 700;
    font-size: 12px;
  }
  
  /* star badge top-right */
  .testimonials-section .card-item .badge.stars {
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.95);
    color: #222;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
  }
  
  /* ---------- Size helpers (scoped) ---------- */
  .testimonials-section .media-card.tall        { height: 420px; }
  .testimonials-section .media-card.tall-portrait { height: 520px; }
  .testimonials-section .media-card.small      { height: 430px; }
  .testimonials-section .media-card.wide       { height: 320px; }
  
  .testimonials-section .text-card.teal        { min-height: 300px; }
  .testimonials-section .text-card.magenta     { min-height: 240px; }
  .testimonials-section .text-card.yellow      { min-height: 60px; }
  .testimonials-section .text-card.purple      { min-height: 220px; }
  
  /* ---------- Responsive (scoped) ---------- */
  @media (max-width: 1200px) {
    .testimonials-section .testimonials-grid .col { max-width: 240px; }
    .testimonials-section .media-card.tall { height: 380px; }
    .testimonials-section .media-card.tall-portrait { height: 480px; }
    .testimonials-section .text-card.teal { min-height: 380px; }
  }
  
  @media (max-width: 992px) {
    /* Make 2 columns across on smaller screens */
    .testimonials-section .testimonials-grid { flex-wrap: wrap; gap: 20px; }
    .testimonials-section .testimonials-grid .col { flex: 0 0 48%; max-width: 48%; }
  }
  
  @media (max-width: 576px) {
    .testimonials-section .testimonials-grid .col { flex: 0 0 100%; max-width: 100%; }
    .testimonials-section .card-text { font-size: 14px; }
    .testimonials-section .section-title { font-size: 22px; }
  }
  
  /* End scoped testimonials CSS */

  /* Start certified section */
.heading-certificate {
    width: 498px;
}
.certificate-vector:before{
  content: '';
    background-image: url(../images/certificate-vector.png);
    width: 430px;
    height: 270px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
}
.certi-bg-color{background-color: #2C397B;}
  /* Partners widget — fully namespaced, won't affect other parts */
.partners-widget { 
  /* --pw-bg: #232f59;           
  --pw-panel: #2b3b72;         */
  --pw-panel-border: rgba(255,255,255,0.03);
  /* background: var(--pw-bg); */
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Grid spacing override only inside widget */
.partners-widget .row { margin: 0; }

/* Card */
.partners-widget__card {
  /* background: var(--pw-panel); */
  border-radius: 8px;
  padding: 25px 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 120px;
  transition: transform .28s ease, box-shadow .28s ease;
  position: relative;

  /* subtle inset border like screenshot */
  box-shadow:
    inset 0 2px 8px rgba(255,255,255,0.02),
    inset 0 -2px 6px rgba(0,0,0,0.12);

  border: 1px solid var(--pw-panel-border);
}

/* Hover lift (scoped) */
.partners-widget__card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 30px rgba(5,10,30,0.45),
    inset 0 2px 8px rgba(255,255,255,0.02);
}

/* Logo image */
.partners-widget__logo {
  max-width: 70%;
  max-height: 86px;
  object-fit: contain;
  display:block;
}

/* Helper: allow taller logos if needed */
.partners-widget__logo.tall { max-height: 110px; }

/* Responsive spacing and sizes */
@media (max-width: 1200px) {
  .partners-widget__card { padding: 30px 20px; min-height: 110px; }
  .partners-widget__logo { max-height: 76px; }
}
@media (max-width: 768px) {
  .partners-widget__card { padding: 24px 16px; min-height: 100px; }
  .partners-widget__logo { max-height: 70px; }
}
@media (max-width: 480px) {
  .partners-widget { padding-top: 28px; padding-bottom: 28px; }
  .partners-widget__card { padding: 18px 12px; min-height: 92px; border-radius: 12px; }
  .partners-widget__logo { max-height: 64px; }
}

/* Very high specificity safeguard (avoid conflict with other .card/.shadow rules) */
.partners-widget .partners-widget__card { -webkit-font-smoothing:antialiased; }






.top-box {
  width:215px; 
}

.bottom-box {
  width:292px; 
}

.movement-up, .movement-down {
  color: white;
  font-weight: 600;
  margin: 0;
  opacity: 0;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.35), 
                 0 0 4px rgba(255, 255, 255, 0.5);
}

/* Animations */
.movement-up {
  animation: blinkFallShakeDown 2s ease-in-out infinite;
  line-height: 65px;
}

.movement-down {
  animation: blinkFallShakeUp 2s ease-in-out infinite;
  animation-delay: 0.15s; /* Slight staggered start */
  line-height: 65px;
}

/* TOP TEXT: Falls down, hits center, and shakes */
@keyframes blinkFallShakeDown {
  0% { opacity: 0; transform: translateY(-120px); }
  5% { opacity: 1; } /* Rapid Faded Blink */
  12% { transform: translateY(0); } /* Hits center */
  14% { transform: translateY(8px); } /* Shake Down */
  16% { transform: translateY(-5px); } /* Shake Up */
  18% { transform: translateY(3px); } /* Shake Down */
  20% { transform: translateY(0); } /* Settles */
  80% { opacity: 1; transform: translateY(0); } /* Stay visible */
  90% { opacity: 0; transform: translateY(20px); } /* Fade out */
  100% { opacity: 0; }
}

/* BOTTOM TEXT: Falls up, hits center, and shakes */
@keyframes blinkFallShakeUp {
  0% { opacity: 0; transform: translateY(120px); }
  5% { opacity: 1; } /* Rapid Faded Blink */
  12% { transform: translateY(0); } /* Hits center */
  14% { transform: translateY(-8px); } /* Shake Up */
  16% { transform: translateY(5px); } /* Shake Down */
  18% { transform: translateY(-3px); } /* Shake Up */
  20% { transform: translateY(0); } /* Settles */
  80% { opacity: 1; transform: translateY(0); } /* Stay visible */
  90% { opacity: 0; transform: translateY(-20px); } /* Fade out */
  100% { opacity: 0; }
}

/* Start Section 2 */
/* * Custom CSS for Infinite Horizontal Scroll Animation
 * This section was added to ensure the scrolling animation works by defining 
 * the necessary keyframes and layout styles, as the external 'style.css' 
 * file was not included in this single file.
 */

/* Keyframes for infinite right-to-left scroll (Content moves to the left) */
@keyframes scroll-left {
  /* Starts at 0 (showing Content A + Content B) */
  from { transform: translateX(0); }
  /* Moves left by 50% (Content B moves to Content A's position) */
  to { transform: translateX(-50%); } 
}

/* Keyframes for infinite left-to-right scroll (Content moves to the right) */
@keyframes scroll-right {
  /* Starts at -50% to align perfectly with the end of the content loop, preventing a gap. */
  from { transform: translateX(-50%); } 
  /* Moves right back to 0 */
  to { transform: translateX(0); }      
}

/* Container for the infinite scroll effect */
.scrolling-wrapper {
  display: flex;
  /* Important: Must be double the width to hold the duplicated content (Content A + Content B) */
  width: 200%; 
}

/* Apply the animation to the specific row wrapper */
.animate-scroll-left {
  animation: scroll-left linear infinite;
}

.animate-scroll-right {
  animation: scroll-right linear infinite;
}

/* Define different animation speeds (durations) for the rows */

/* Row 1: FAST - Leftward movement */
#row-1 .scrolling-wrapper { animation-duration: 20s; }

/* Row 2: MEDIUM - Rightward movement */
#row-2 .scrolling-wrapper { animation-duration: 35s; }

/* Row 3: SLOW - Leftward movement */
#row-3 .scrolling-wrapper { animation-duration: 50s; }

/* Style for the individual image cards */
.image-card {
  flex-shrink: 0;
  /* Fixed width to ensure smooth, predictable scrolling */
  width: 100px; 
  padding: 10px;
}

/* Ensure image cards are slightly smaller on mobile for better fit */
@media (max-width: 640px) {
  .image-card {
      width: 80px;
  }
}

.image-card img {
  /* Ensure the actual image is a perfect circle and covers the area */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9999px; /* Tailwind's rounded-full equivalent */
}
/* Ensure the overall section doesn't cause horizontal scrollbar issues */
.workshop-section {
  overflow-x: hidden;
}
/* End Section 2 */

/* Start Responsive of Mobile device 400 */
@media only screen and (min-width:0) and (max-width: 500px) {
.mr-logo {
  margin-right: 0;
}
.navbar-toggler{
  background-color: #fff;
}
.navbar-toggler:focus{
  box-shadow: none;
}
.fw-cust {
  font-size: 26px;
}
.bg-codrity-blue:after{
  display: none;
}
.hero-image img{
  left:0;
  width: 70% !important;
}
.badge-2{
  right: -110px !important;
  bottom:-30px;
}
.badge-1{
  border-left: none !important;
  left: 10px !important;
}
.badge-cap {
    width: 140px;
}
.badge h6 {
    font-size: 15px;
    line-height: 22px;
}
.course-dropdown {
    width: 425px;
    left: -12px !important;
    top: 45px !important;
}
.drop-down-m {
    margin: 0 30px;
}
.vertical-slider{
  top: -110px;
}
#loadMoreBtn{
  width: 85px;
  height: 82px;
}
.program-arrow{
  top: 45%;
}
.gradient-mix:after{
  width: 280px;
  height: 150px;
}
.workshop-before:before{
  width: 280px;
  height: 150px;
}
.workshop-after:after{
  width: 280px;
  height: 150px;
}
.top-companies:before{
  width: 280px;
  height: 150px;
}
.scholarship:after{
  display: none;
}
.btn-explore, .btn-outline-event{
    padding: 14px 25px !important;
    font-size: 16px;
    min-width:auto;
}
/* Start Courses Section Responsive */
.col-lg-heading {
  width: 100%;
}
.aim-bg-img{
  width: 270px;
}
/* End Courses Section Responsive */
/* Start Eductaion Section */
.col-lg-education {
  width: 100%;
}
/* End Education Section */
.workshop-container {
  width: 100% !important;
}
.movement-down {
  padding-top: 0 !important;
}
.margin-top-r{
  margin-top:60px;
}
.margin-bot-r{
  margin-bottom:60px;
}
.date-block {
  width: 70px;
}
.event-type {
  text-align: right;
  width: 110px;
}
.hero-content-top {
  width: 100%;
}
.hero-content-innovation {
  width: 100%;
}
.scholarship:after{
  background-image: none;
}
.ai-learning-container {
    transform: scale(0.45);
    height: 430px;
    width: 900px;
    left: -264px;
    max-width: 900px;
    margin-bottom: -210px;
}
.mt-img1 {
    margin-top: 10px;
}
.mt-img2 {
    margin-top: 10px;
}
.navbar-nav .dropdown-menu {
    position: absolute;
}


}
/* End Responsive of Mobile Device 400 */

/* Start Responsive of Tab device 700 */
@media only screen and (min-width:501px) and (max-width: 767px) {
.container, .container-sm {
   max-width: 600px;
}
.mr-logo {
  margin-right: 0;
}
.navbar-toggler{
  background-color: #fff;
}
.navbar-toggler:focus{
  box-shadow: none;
}
.fw-cust {
  font-size: 26px;
}
.bg-codrity-blue:after{
  display: none;
}
.hero-image img{
  left:0;
  width: 70% !important;
}
.badge-2{
  right: -275px !important;
  bottom: -85px;
}
.badge-1{
  border-left: none !important;
  left: 60px !important;
}
.badge-cap {
    width: 140px;
}
.badge h6 {
    font-size: 15px;
    line-height: 22px;
}
.vertical-slider{
  top: -110px;
}
#loadMoreBtn{
  width: 85px;
  height: 82px;
}
.program-arrow{
  top: 45%;
}
.gradient-mix:after{
  width: 280px;
  height: 150px;
}
.workshop-before:before{
  width: 280px;
  height: 150px;
}
.workshop-after:after{
  width: 280px;
  height: 150px;
}
.top-companies:before{
  width: 280px;
  height: 150px;
}
.scholarship:after{
  display: none;
}
.btn-explore, .btn-outline-event{
    padding: 14px 25px !important;
    font-size: 16px;
    min-width:auto;
}
/* Start Courses Section Responsive */
.col-lg-heading {
  width: 100%;
}
.aim-bg-img{
  width: 270px;
}
/* End Courses Section Responsive */
/* Start Eductaion Section */
.col-lg-education {
  width: 100%;
}
/* End Education Section */
.workshop-container {
  width: 100% !important;
}
.movement-down {
  padding-top: 0 !important;
}
.margin-top-r{
  margin-top:60px;
}
.margin-bot-r{
  margin-bottom:60px;
}
.date-block {
  width: 70px;
}
.event-type {
  text-align: right;
  width: 110px;
}
.hero-content-top {
  width: 100%;
}
.hero-content-innovation {
  width: 100%;
}
.scholarship:after{
  background-image: none;
}
.ai-learning-container {
    transform: scale(0.66);
    height: 430px;
    width: 900px;
    left: -179px;
    max-width: 900px;
    margin-bottom: -105px;
}
.mt-img1 {
    margin-top: 10px;
}
.mt-img2 {
    margin-top: 10px;
}
}
/* End Responsive of Tab Device 700 */
/* Start Responsive of Tab device 1024 */
@media only screen and (min-width:768px) and (max-width: 1024px) {
.container{
    width:100%;
}
.bg-codrity-blue:after{
    left: 50.6%;
    width: 498px;
    height: 827px;
}
.badge-1{
    left: -60px;
}
.badge-2 {
    top: 60px;
    left: 235px;
}
.vertical-slider {
    width: 500px;
    left: -100px;
}
.scholarship:after{
    width: 390px;
    left: 60.6% !important;
}
.top-companies:before{
    width: 400px;
}
.course-dropdown {
    width: 1018px;
    left: -400px !important;
}
}
/* End Responsive of Tab Device 1024*/

/* Start Responsive of Tab device 1300 */
@media only screen and (min-width:1025px) and (max-width: 1200px) {
.bg-codrity-blue:after{
    left: 57.2%;
    width: 498px;
    height: 827px;
}
.badge-1{
    left: -60px;
}
.badge-2 {
    top: 60px;
    left: 235px;
}
.vertical-slider {
    width: 500px;
    left: -100px;
}
.scholarship:after{
    width: 390px;
    left: 60.6% !important;
}
.top-companies:before{
    width: 400px;
}
}
/* End Responsive of Tab Device 1300*/