/* =========================
   PROJECT CARD — DESIGN 1.1
   ========================= */
   body,
   html {
       padding: 0;
       margin: 0;
   }
   
   .yusra-k-project-card {
       width: 100%;
       max-width: 370px;
       box-sizing: border-box;
   
       background: #ffffff;
       border: 1px solid #e3e3e3;
       border-radius: 16px;
       overflow: hidden;
   
       font-family: Arial, sans-serif;
   
       box-shadow: 0 5px 18px rgba(0, 0, 0, 0.055);
   
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }
   
   .yusra-k-project-card:hover {
       transform: translateY(-5px);
       border-color: #ffd0bd;
       /* ✅ ADD */
       box-shadow: 0 12px 28px rgba(240, 100, 60, 0.10),
           0 4px 10px rgba(0, 0, 0, 0.04);
   }
   
   
   /* =========================
      TOP
      ========================= */
   
   .yusra-k-card-top {
       display: flex;
       align-items: center;
       justify-content: space-between;
   
       padding: 17px 19px 14px;
   
       border-bottom: 1px solid #eeeeee;
   }
   
   
   .yusra-k-brand {
       display: flex;
       align-items: center;
       gap: 5px;
       color: #3d3d3d;
       font-size: 13px;
       font-weight: 700;
   }
   
   .yusra-k-brand-icon {
       width: 30px;
       height: 34px;
       object-fit: contain;
       flex-shrink: 0;
   }
   
   .yusra-k-project-category {
       display: inline-flex;
       align-items: center;
       gap: 6px;
   
       padding: 6px 10px 6px 8px;
       border-radius: 8px;
       background: linear-gradient(135deg, #fff5f0 0%, #ffe8dd 100%);
       color: #d94a24;
       border: 1px solid #ffd0bd;
   
       font-size: 8.5px;
       font-weight: 800;
       /* letter-spacing: 1px; */
       text-transform: uppercase;
   
       box-shadow: 0 2px 6px rgba(240, 100, 60, 0.10);
   }
   
   .yusra-k-project-category::before {
       content: "";
       width: 6px;
       height: 6px;
       border-radius: 50%;
       background: #f0643c;
       box-shadow: 0 0 0 2px rgba(240, 100, 60, 0.2);
   }
   
   
   /* =========================
      MAIN
      ========================= */
   
   .yusra-k-project-main {
       padding: 17px 19px 3px;
   }
   
   .yusra-k-project-title {
       margin: 0 0 9px;
   
       color: #202020;
   
       font-size: 22px;
       line-height: 1.25;
       font-weight: 700;
       letter-spacing: -0.3px;
   }
   
   .yusra-k-title-line {
       display: flex;
       align-items: center;
       width: 100%;
       margin: 0 0 13px;
   }
   
   .yusra-k-title-line span {
       display: block;
       width: 100%;
       height: 1px;
       background: linear-gradient(to right,
               #f0643c 0,
               #f0643c 55px,
               #e5e5e5 55px,
               #e5e5e5 100%);
   }
   
   .yusra-k-description-box {
       position: relative;
   }
   
   .yusra-k-project-description {
       margin: 0;
   
       height: 80px;
       overflow: hidden;
   
       color: #6f6f6f;
       font-size: 12.5px;
       /* line-height: 1.6; */
       line-height: 20px;
   
   }
   
   
   /* Read More Button */
   
   .yusra-k-description-more {
       display: none;
   
       position: absolute;
       right: 0;
       bottom: 1px;
   
       padding: 0 0 0 8px;
       margin: 0;
   
       border: none;
       background: linear-gradient(to right,
               rgba(255, 255, 255, 0),
               #ffffff 35%);
   
   
       color: #f0643c;
   
       font-size: 9px;
       font-weight: 700;
       line-height: 20px;
   
       cursor: pointer;
   }
   
   
   /* When opened */
   
   .yusra-k-description-box.expanded .yusra-k-project-description {
       overflow-y: auto;
   }
   
   /* Small scrollbar */
   
   .yusra-k-description-box.expanded .yusra-k-project-description::-webkit-scrollbar {
       width: 4px;
   }
   
   .yusra-k-description-box.expanded .yusra-k-project-description::-webkit-scrollbar-thumb {
       background: #d8d8d8;
       border-radius: 10px;
   }
   
   
   /* =========================
      TAGS
      ========================= */
   
   .yusra-k-project-tags {
       overflow: hidden;
       margin: 0 auto;
       width: 90%;
   
       -webkit-mask-image: linear-gradient(to right,
               transparent 0%,
               #000 8%,
               #000 92%,
               transparent 100%);
       mask-image: linear-gradient(to right,
               transparent 0%,
               #000 8%,
               #000 92%,
               transparent 100%);
   }
   
   .yusra-k-tags-track {
       display: flex;
       gap: 6px;
       width: max-content;
       animation: tagsMove 14s linear infinite;
   }
   
   
   .yusra-k-tech-tag {
       flex-shrink: 0;
   
       display: flex;
       align-items: center;
       gap: 7px;
   
       padding: 6px 10px;
   
       background: #ffffff;
       border: 1px solid #e5e5e5;
       border-radius: 8px;
   
       box-shadow: 0 2px 7px rgba(0, 0, 0, 0.045);
   
       color: #444444;
       font-size: 9px;
       font-weight: 600;
   }
   
   .yusra-k-tech-tag img {
       width: 20px;
       height: 20px;
       object-fit: contain;
       flex-shrink: 0;
   }
   
   /* Hover */
   .yusra-k-tech-tag:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 10px rgba(240, 100, 60, 0.12);
   }
   
   
   /* Movement */
   @keyframes tagsMove {
   
       from {
           transform: translateX(0);
       }
   
       to {
           transform: translateX(-25%);
       }
   }
   
   
   /* Pause on hover */
   .yusra-k-project-tags:hover .yusra-k-tags-track {
       animation-play-state: paused;
   }
   
   /* =========================
      PEOPLE
      ========================= */
   
   /* Container */
   .yusra-k-project-people {
       display: flex;
       flex-direction: column;
       gap: 16px;
       padding: 10px;
       font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
   
   /* The Profile Card */
   .yusra-k-person {
       display: flex;
       align-items: center;
       gap: 14px;
       padding: 14px 16px;
       background-color: #ffffff;
       border: 1px solid #f3f4f6;
       border-radius: 14px;
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
       box-sizing: border-box;
       width: 100%;
       max-width: 100%;
       position: relative;
   }
   
   /* Card Hover Effect */
   .yusra-k-person:hover {
       transform: translateY(-2px);
       border-color: #ffd0bd;
       box-shadow: 0 10px 15px -3px rgba(240, 100, 60, 0.10),
           0 4px 6px -2px rgba(0, 0, 0, 0.04);
   }
   
   /* Avatar Image */
   .yusra-k-person-image {
       width: 56px;
       height: 56px;
       border-radius: 50%;
       object-fit: cover;
       border: 2px solid #ffffff;
       box-shadow: 0 0 0 2px #ff6b35, 0 0 0 4px rgba(255, 107, 53, 0.15);
       flex-shrink: 0;
   }
   
   /* Info Container */
   .yusra-k-person-info {
       display: flex;
       flex-direction: column;
       justify-content: center;
       gap: 5px;
       min-width:0;
       flex: 1;
   }
   
   /* Name Typography */
   .yusra-k-person-name {
       font-size: 15px;
       font-weight: 600;
       color: #1f2937;
       line-height: 1.2;
       letter-spacing: -0.01em;
       white-space: nowrap;
   }
   
   /* Role Badge (INSTRUCTOR) */
   .yusra-k-person-role {
       font-size: 10px;
       font-weight: 700;
       color: #ff6b35;
       background-color: #fff4f0;
       padding: 4px 10px;
       border-radius: 999px;
       width: fit-content;
       text-transform: uppercase;
       letter-spacing: 0.8px;
       line-height: 1;
   }
   
   /* Instructor LinkedIn */
   
   .yusra-k-instructor-linkedin {
       margin-left: auto;
   
       width: 36px;
       height: 36px;
   
       display: flex;
       align-items: center;
       justify-content: center;
   
       flex-shrink: 0;
   
       border-radius: 9px;
   
       background-color: #0a66c2;
       color: #ffffff!important;
   
       text-decoration: none;
       font-size: 0;
       line-height: 0;
   
       transition: box-shadow 0.25s ease, transform 0.25s ease;
   }
   
   .yusra-k-instructor-linkedin svg {
       width: 16px;
       height: 16px;
   }
   
   .yusra-k-instructor-linkedin:hover {
       background-color: #0a66c2;
       color: #ffffff;
   
       box-shadow:
           4px 4px 10px rgba(10, 102, 194, 0.35),
           -2px -2px 6px rgba(10, 102, 194, 0.15);
       transform: translateY(-1px);
   }
   
   
   /* =========================
      INSTRUCTOR CARD — SMALL SCREENS
      ========================= */
   
   
   @media (max-width: 380px) {
   
       .yusra-k-person {
           gap: 10px;
           padding: 12px 12px;
       }
   
       .yusra-k-person-image {
           width: 44px;
           /* 56 → 44 */
           height: 44px;
       }
   
       .yusra-k-person-name {
           font-size: 13px;
           /* 15 → 13 */
           letter-spacing: -0.2px;
       }
   
       .yusra-k-person-role {
           font-size: 9px;
           padding: 3px 8px;
           letter-spacing: 0.6px;
       }
   
       .yusra-k-instructor-linkedin {
           width: 32px;
           height: 32px;
           border-radius: 8px;
       }
   
       .yusra-k-instructor-linkedin svg {
           width: 14px;
           height: 14px;
       }
   }
   
   /* Extra chhoti screen */
   @media (max-width: 330px) {
   
       .yusra-k-person {
           gap: 8px;
           padding: 10px 10px;
       }
   
       .yusra-k-person-image {
           width: 38px;
           /* 44 → 38 */
           height: 38px;
       }
   
       .yusra-k-person-name {
           font-size: 12px;
       }
   
       .yusra-k-person-role {
           font-size: 8px;
           padding: 2px 7px;
       }
   
       .yusra-k-instructor-linkedin {
           width: 28px;
           height: 28px;
       }
   
       .yusra-k-instructor-linkedin svg {
           width: 12px;
           height: 12px;
       }
   }
   
   
   /* =========================
      ACTIONS
      ========================= */
   
   .yusra-k-project-actions {
       display: flex;
       gap: 10px;
       padding: 13px 17px;
       background: #f9f9f9;
       border-top: 1px solid #eeeeee;
   }
   
   .yusra-k-project-btn {
       flex: 1;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 7px;
       border-radius: 8px;
       text-decoration: none;
       font-size: 10px;
       font-weight: 700;
       transition: all 0.2s ease;
   }
   
   /* Source Code */
   
   .yusra-k-source-code {
       background: #ffffff;
       border: 1px solid #d6d6d6;
       color: #333333;
   }
   
   .yusra-k-source-code:hover {
       background: #f4f4f4;
       border-color: #bdbdbd;
       transform: translateY(-1px);
   }
   
   /* Live Project View */
   
   .yusra-k-live-project {
       background: #f0643c;
       border: 1px solid #f0643c;
       color: #ffffff!important;
       box-shadow: 0 3px 8px rgba(240, 100, 60, 0.15);
   }
   
   .yusra-k-live-project:hover {
       background: #db5330;
       border-color: #db5330;
       box-shadow: 0 5px 12px rgba(240, 100, 60, 0.22);
       transform: translateY(-1px);
   }
   
   .yusra-k-btn-icon {
       font-size: 11px;
       line-height: 1;
   }
   
   
   /* =========================
      PROJECTS HORIZONTAL CAROUSEL
      ========================= */
   
   .yusra-k-projects-carousel {
       width: 90%;
       margin: 0 auto;
       overflow: hidden;
       padding: 20px 30px;
       box-sizing: border-box;
   }
   
   /* Moving Row */
   .yusra-k-projects-track {
       display: flex;
       align-items: stretch;
       gap: 20px;
   
       width: max-content;
       will-change: transform;
   }
   
   
   /* Every Card */
   .yusra-k-projects-track .yusra-k-project-card {
       flex: 0 0 370px;
   }
   
   
   /* =========================
      RESPONSIVE
      ========================= */
   @media (max-width: 600px) {
   
       .yusra-k-projects-carousel {
           padding: 16px 0;
           width: 90%;
           margin: 0 auto;
           box-sizing: border-box;
       }
   
       .yusra-k-projects-track {
           gap: 14px;
       }
   
       .yusra-k-projects-track .yusra-k-project-card {
           flex: 0 0 100%;
           max-width: 370px;
           box-sizing: border-box;
       }
   }
   
   /* Small Mobile */
   
   @media (max-width: 400px) {
   
       .yusra-k-projects-carousel {
           padding: 16px 0;
           width: 90%;
           margin: 0 auto;
           box-sizing: border-box;
       }
   
       .yusra-k-projects-track {
           gap: 12px;
       }
   
       .yusra-k-projects-track .yusra-k-project-card {
           flex: 0 0 100%;
           max-width: 320px;
           box-sizing: border-box;
       }
   
   }
   
   @media (max-width: 370px) {
   
       .yusra-k-projects-track .yusra-k-project-card {
           flex: 0 0 100%;
           max-width: 290px;
   
       }
   
       .yusra-k-card-top {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 17px 19px 14px;
           border-bottom: 1px solid #eeeeee;
       }
   
   }
   
   @media (max-width: 324px) {
       .yusra-k-card-top {
           padding: 17px 8px 14px;
       }
   
       .yusra-k-projects-track .yusra-k-project-card {
           flex: 0 0 100%;
           max-width: 270px;
       }
   }
   
   @media (max-width: 302px) {
       .yusra-k-projects-track .yusra-k-project-card {
           flex: 0 0 100%;
           max-width: 257px;
       }
   }
   
   
   
   /* List of Placement Students CSS*/
   /* =========================
      STUDENTS PLACEMENT SLIDER
      ========================= */
   
   .yusra-students-slider-container {
     width: 90%;
     margin: 0 auto;
     overflow: hidden;
     padding: 12px 0 15px;
     position: relative;
   }
   
   .yusra-students-grid {
     display: flex;
     flex-wrap: nowrap;
     gap: 26px;
     width: max-content;
   
     animation: studentsScroll 38s linear infinite;
   
     /* Important for smooth animation */
     will-change: transform;
   }
   
   /* Pause when mouse is over slider */
   .yusra-students-slider-container:hover .yusra-students-grid {
     animation-play-state: paused;
   }
   
   /* =========================
      CARD
      ========================= */
   
   .yusra-student-card {
     flex: 0 0 300px;
     width: 300px;
     max-width: 100%;
   
     background: #ffffff;
     border: 1px solid #dedede;
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   
     transition:
       transform 0.3s ease,
       box-shadow 0.3s ease;
     display: flex;
     flex-direction: column;
   }
   
   /* Card hover */
   .yusra-student-card:hover {
     transform: none;
     border-color: #ff4b20;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   }
   
   /* =========================
      IMAGE SECTION
      ========================= */
   
   .yusra-card-image {
     width: 100%;
     height: 220px;
   
     position: relative;
     overflow: hidden;
   
     background: #f5f5f5;
   }
   
   .yusra-card-image img {
     width: 100%;
     height: 100%;
   
     display: block;
   
     object-fit: cover;
   }
   
   /* =========================
      LPA BADGE
      ========================= */
   
   .yusra-lpa-badge {
     position: absolute;
   
     top: 13px;
     right: 12px;
   
     background: #ff4b20;
     color: #ffffff;
   
     font-size: 18px;
     font-weight: 700;
   
     padding: 9px 15px;
   
     border-radius: 25px;
   
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
   
     z-index: 2;
   }
   
   /* =========================
      LOCATION BADGE
      ========================= */
   
   .yusra-location-badge {
     position: absolute;
   
     left: 18px;
     bottom: 13px;
   
     background: #272727;
     color: #ffffff;
   
     font-size: 17px;
     font-weight: 600;
   
     padding: 9px 18px;
   
     border-radius: 25px;
   
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
   
     z-index: 2;
   }
   
   /* =========================
      CARD CONTENT
      ========================= */
   
   .yusra-card-content {
     padding: 10px 20px 15px;
     min-height: 240px;
   
     background: #ffffff;
   
     display: flex;
     flex-direction: column;
   
     box-sizing: border-box;
     min-width: 0;
   }
   
   /* =========================
      NAME
      ========================= */
   
   .yusra-student-name {
     margin: 0;
   
     font-size: 25px;
     line-height: 1.25;
   
     font-weight: 700;
   
     color: #171717;
   }
   
   /* =========================
      ROLE
      ========================= */
   
   .yusra-student-role {
     margin-top: 2px;
   
     font-size: 22px;
     line-height: 1.25;
   
     font-weight: 700;
   
     color: #c84d12;
   
     white-space: nowrap;
   }
   
   /* =========================
      INFO
      ========================= */
   
   .yusra-student-info {
     margin-top: 10px;
   
     padding-top: 10px;
   
     border-top: 1px solid #f0cdb8;
   
     min-width: 0;
   }
   
   .yusra-student-info p {
     margin: 0 0 10px;
     font-size: 16px;
     line-height: 1.4;
     color: #303030;
   
     overflow-wrap: break-word;
   }
   
   .yusra-student-info p span {
     color: #777777;
     margin-right: 3px;
   }
   
   /* =========================
      BATCH PILLS
      ========================= */
   
   .yusra-batch-info {
     width: 100%;
     max-width: 100%;
   
     margin-bottom: 10px;
   
     padding: 10px 15px;
   
     background: #fff6ec;
   
     border: 1px solid #f0e4d7;
     border-radius: 5px;
   
     color: #292929;
   
     font-size: 17px;
     font-weight: 600;
   
     line-height: 1.25;
   
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   
     box-sizing: border-box;
   }
   
   /* =========================
      READ MORE BUTTON
      ========================= */
   
   .yusra-read-more-btn {
     margin-top: auto;
     width: 100%;
     max-width: 100%;
   
     display: flex;
     align-items: center;
     justify-content: center;
   
     min-height: 55px;
     padding: 10px 12px;
   
     background: #351806;
     color: #ffffff;
   
     border-radius: 12px;
   
     text-decoration: none;
   
     font-size: 17px;
     font-weight: 700;
   
     box-sizing: border-box;
   
     transition:
       background 0.25s ease,
       transform 0.25s ease;
   }
   
   .yusra-read-more-btn:hover {
     background: #e8461e;
     transform: none;
   }
   
   /* =========================
      INFINITE SMOOTH MOVEMENT
      ========================= */
   
   @keyframes studentsScroll {
     from {
       transform: translateX(0);
     }
   
     to {
       transform: translateX(calc(-50% - 13px));
     }
   }
   
   /* =========================
      TABLET
      ========================= */
   
   @media (max-width: 900px) {
     .yusra-students-slider-container {
       padding-left: 10px;
       padding-right: 10px;
     }
   
     .yusra-student-card {
       flex: 0 0 290px;
       width: 290px;
       max-width: calc(100vw - 20px);
     }
   }
   
   /* =========================
      MOBILE
      ========================= */
   
   @media (max-width: 600px) {
     .yusra-students-slider-container {
       width: 90%;
       margin: 0 auto;
       padding: 8px 10px 15px;
       overflow: hidden;
     }
   
     .yusra-students-grid {
       gap: 16px;
       animation-duration: 30s;
     }
   
     .yusra-student-card {
       flex: 0 0 calc(100vw - 20px);
       width: calc(100vw - 20px);
       max-width: calc(60vw - 20px);
       border-radius: 13px;
     }
   
     .yusra-card-image {
       height: 185px;
     }
   
     .yusra-card-content {
       padding: 16px 18px 16px;
       min-height: 250px;
     }
   
     .yusra-student-name {
       font-size: 21px;
     }
   
     .yusra-student-role {
       font-size: 19px;
       line-height: 1.25;
       white-space: nowrap;
     }
   
     .yusra-student-info {
       margin-top: 16px;
       padding-top: 16px;
     }
   
     .yusra-student-info p {
       font-size: 15px;
       margin-bottom: 14px;
     }
   
     .yusra-batch-info {
       font-size: 14px;
       padding: 8px 11px;
       margin-bottom: 12px;
     }
   
     .yusra-read-more-btn {
       min-height: 52px;
       font-size: 16px;
       border-radius: 11px;
     }
   
     .yusra-lpa-badge {
       font-size: 15px;
       padding: 7px 12px;
     }
   
     .yusra-location-badge {
       font-size: 15px;
       padding: 7px 13px;
     }
   }
   
   @media (max-width: 425px) {
     .yusra-students-slider-container {
       width: 100%;
       margin: 0 auto;
       padding: 8px 10px 12px;
       overflow: hidden;
     }
   
     .yusra-students-grid {
       gap: 14px;
       animation-duration: 30s;
     }
   
     /* CARD */
     .yusra-student-card {
       flex: 0 0 calc(100vw - 30px);
       width: calc(100vw - 30px);
       max-width: calc(100vw - 30px);
       border-radius: 12px;
     }
   
     /* IMAGE */
     .yusra-card-image {
       height: 165px;
     }
   
     /* LPA */
     .yusra-lpa-badge {
       top: 9px;
       right: 9px;
       font-size: 14px;
       padding: 6px 10px;
     }
   
     /* LOCATION */
     .yusra-location-badge {
       left: 11px;
       bottom: 9px;
       font-size: 14px;
       padding: 6px 11px;
     }
   
     /* CONTENT */
     .yusra-card-content {
       padding: 13px 15px 14px;
       min-height: 225px;
     }
   
     /* NAME */
     .yusra-student-name {
       font-size: 20px;
       line-height: 1.2;
     }
   
     /* ROLE */
     .yusra-student-role {
       margin-top: 2px;
       font-size: 18px;
       line-height: 1.2;
       white-space: nowrap;
     }
   
     /* INFO */
     .yusra-student-info {
       margin-top: 12px;
       padding-top: 12px;
     }
   
     .yusra-student-info p {
       margin: 0 0 10px;
       font-size: 14px;
       line-height: 1.35;
     }
   
     /* BATCH */
     .yusra-batch-info {
       margin-bottom: 9px;
       padding: 7px 10px;
       font-size: 13px;
       line-height: 1.2;
     }
   
     /* BUTTON */
     .yusra-read-more-btn {
       min-height: 48px;
       padding: 9px 10px;
       border-radius: 10px;
       font-size: 15px;
     }
   }