:root {
   --primary: #2934BB;
   --accent: #F4F7FE;
   --dark-blue: #1E3A8A;
   --secondary-blue: #2934BB;
   --primary-dark: #1e369b;
   --primary-light: #eef2ff;
   --secondary: #FFFFFF;
   --text-dark: #1F2937;
   --text-gray: #4B5563;
   --text-light: #999999;
   --bg-light: #f8f9fc;
   --accent-yellow: #F4B400;
   --gradient-blue: linear-gradient(135deg, rgba(42, 72, 201, 0.9), rgba(30, 54, 155, 0.8));
   --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
   --shadow-hover: 0 20px 40px rgba(42, 72, 201, 0.15);
   --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   --gold: #FFB800;
   --gold-hover: #FF8C00;
   --light-blue: #E0F2FE;
   --midnight: #0F172A;
   --glass-gold: rgba(255, 184, 0, 0.95);
   --accent-orange: #FF8C00;
   --glass-border: rgba(255, 255, 255, 0.2);
   --card-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
   --hover-shadow: 0 24px 60px rgba(41, 52, 187, 0.15);

   /* Theme Colors */
   --c-health: #DC2626;
   --c-edu: #2934BB;
   --c-livelihood: #16A34A;
   --c-climate: #10B981;
   --c-disaster: #EA580C;
   --c-research: #9333EA;

 }

 /* Animations */
 @keyframes gradient-shift {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 @keyframes float {

   0%,
   100% {
     transform: translateY(0) translateX(0);
   }

   25% {
     transform: translateY(-20px) translateX(10px);
   }

   50% {
     transform: translateY(-40px) translateX(-10px);
   }

   75% {
     transform: translateY(-20px) translateX(10px);
   }
 }

 @keyframes fade-in-up {
   from {
     opacity: 0;
     transform: translateY(40px);
   }

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

 @keyframes bounce {

   0%,
   100% {
     transform: translateX(-50%) translateY(0);
   }

   50% {
     transform: translateX(-50%) translateY(10px);
   }
 }

 @keyframes shine {
   0% {
     left: -100%;
   }

   100% {
     left: 200%;
   }
 }

 @keyframes rotate-slow {
   from {
     transform: rotate(0deg);
   }

   to {
     transform: rotate(360deg);
   }
 }

 body {
   font-family: 'Inter', sans-serif;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: 'Montserrat', sans-serif;
 }

 /* Reusable Classes */
 .section-wrapper {
   position: relative;
   --max-width: 1280px;
   --padding: 1rem;
   width: min(var(--max-width), 100% - var(--padding)*2);
   margin-inline: auto;
 }

 @media (max-width:1120px) {
   .section-wrapper {
     position: relative;
     --max-width: 1024px;
     --padding: 1rem;
     width: min(var(--max-width), 100% - var(--padding)*2);
     margin-inline: auto;
   }
 }

 .card-image-gradient {
   background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
 }

 .text-shadow {
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 }

 .line-clamp-3 {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }


 .btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: clamp(0.75rem, 0.8398rem + 0.1563vw, 1rem) clamp(1.5rem, 1.2891rem + 0.9375vw, 2.25rem);
   background: var(--primary);
   color: #fff;
   font-size: clamp(0.875rem, 0.8398rem + 0.1563vw, 1rem);
   border-radius: 50px;
   transition: var(--transition);
   cursor: pointer;
   border: none;
   position: relative;
   overflow: hidden;
   z-index: 1;
 }

 .btn::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0%;
   height: 100%;
   background: var(--primary-dark);
   transition: var(--transition);
   z-index: -1;
 }

 .btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 20px rgba(42, 72, 201, 0.3);
 }

 .btn:hover::before {
   width: 100%;
 }


 /* Dropdown Animation */
 .dropdown-menu {
   transform: translateY(10px);
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .group:hover .dropdown-menu {
   transform: translateY(0);
   opacity: 1;
   visibility: visible;
 }

 /* Mobile Menu Transitions */
 #mobile-menu {
   transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 }

 .mobile-overlay {
   transition: opacity 0.3s ease;
 }

 /* Accordion Animation */
 .accordion-content {
   transition: max-height 0.3s ease-in-out;
   max-height: 0;
   overflow: hidden;
 }


 /* HERO SECTION */

 .hero-section {
   height: calc(100dvh + 90px);
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
 }

 @media (min-width:1600px) {
   .hero-section {
     height: 100dvh;
     position: relative;
     overflow: hidden;
     display: flex;
     align-items: center;
   }
 }

 .hero-slider {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
 }

 .slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transition: opacity 1.5s ease-in-out, transform 8s linear;
   transform: scale(1);
 }

 .slide.active {
   opacity: 1;
   transform: scale(1.1);
 }

 .hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(30, 58, 138, 0.45) 0%, rgba(42, 72, 201, 0.5) 100%);
   z-index: 2;
 }

 .hero-content {
   position: relative;
   z-index: 3;
   max-width: 800px;
   color: #fff;
 }

 .hero-subtitle {
   font-size: clamp(0.625rem, 0.4435rem + 0.8065vw, 1.25rem);
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--accent-yellow);
   opacity: 0;
   transform: translateY(30px);
   animation: fadeUp 0.8s forwards 0.5s;
   margin-bottom: 10px;
 }

 .hero-title {
   font-size: clamp(2.5rem, 1.2742rem + 3.2258vw, 4.5rem);
   line-height: 1.1;
   margin-bottom: 14px;
   opacity: 0;
   transform: translateY(30px);
   animation: fadeUp 0.8s forwards 0.8s;
 }

 .hero-text {
   font-size: clamp(0.875rem, 0.7661rem + 0.4839vw, 1.25rem);
   line-height: 1.6;
   margin-bottom: 40px;
   opacity: 0;
   transform: translateY(30px);
   animation: fadeUp 0.8s forwards 1.1s;
 }

 .hero-buttons {
   display: flex;
   gap: 20px;
   opacity: 0;
   transform: translateY(30px);
   animation: fadeUp 0.8s forwards 1.4s;
 }

 .btn-outline {
   background: transparent;
   border: 2px solid #fff;
 }

 .btn-outline:hover {
   background: #fff;
   color: var(--primary);
 }

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

 .scroll-indicator {
   position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 32px;
   animation: bounce 2s infinite;
   cursor: pointer;
   z-index: 3;
   opacity: 0.8;
   color: white;
 }


 /* --- THEMATIC AREAS (ULTRA MODERN REDESIGN) --- */
 .thematic-section {
   background-color: var(--bg-light);
   position: relative;
   overflow: hidden;
   width: 100%;
 }

 /* Background Effects */
 .bg-gradient-mesh {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   overflow: hidden;
 }

 .mesh-blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   opacity: 0.4;
   animation: float-blob 20s infinite ease-in-out;
 }

 .blob-1 {
   top: -10%;
   left: -5%;
   width: 800px;
   height: 800px;
   background: #E0F2FE;
   animation-delay: 0s;
 }

 .blob-2 {
   bottom: -10%;
   right: -5%;
   width: 900px;
   height: 900px;
   background: #DBEAFE;
   animation-delay: -5s;
 }

 .blob-3 {
   top: 40%;
   left: 30%;
   width: 600px;
   height: 600px;
   background: #FEF3C7;
   opacity: 0.3;
   animation-delay: -10s;
 }

 .bg-particles {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
 }

 .particle {
   position: absolute;
   width: 6px;
   height: 6px;
   background: rgba(41, 52, 187, 0.1);
   border-radius: 50%;
   animation: float-particle 10s infinite linear;
 }

 .bg-grid {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   background-image: radial-gradient(#1E3A8A 1px, transparent 1px);
   background-size: 40px 40px;
   opacity: 0.03;
 }

 /* Container */
 .container {
   max-width: 1400px;
   margin: 0 auto;
   position: relative;
   z-index: 2;
 }

 /* Header */
 .thematic-header .section-label {
   font-family: var(--font-inter);
   font-size: 12px;
   color: var(--gold);
   text-transform: uppercase;
   letter-spacing: 0.15em;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-weight: bold;
 }

 /* Cards Grid */
 .thematic-cards-grid {
   gap: 20px;
 }

 /* Modern Card */
 .thematicCard {
   min-height: 380px;
   border-radius: 28px;
   background: white;
   position: relative;
   overflow: hidden;
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   border: 2px solid transparent;
 }

 /* Hover States */
 .thematicCard:hover {
   transform: translateY(-12px) scale(1.02);
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
   border-color: rgba(255, 184, 0, 0.3);
 }

 /* Card Image Area */
 .thematicCard .card-image-area {
   height: 240px;
   position: relative;
   overflow: hidden;
 }

 .thematicCard .card-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.95);
   transition: transform 0.8s, filter 0.5s;
 }

 .thematicCard:hover .card-img {
   transform: scale(1.1);
   filter: brightness(1.05);
 }

 .thematicCard .card-gradient-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 60%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
   pointer-events: none;
 }

 /* Stats Badge */
 .thematicCard .stats-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   animation: float-badge 4s ease-in-out infinite;
   transition: 0.3s;
   z-index: 2;
 }

 .thematicCard:hover .stats-badge {
   transform: rotate(10deg) scale(1.1);
 }



 /* Category Tag */
 .thematicCard .category-tag {
   position: absolute;
   bottom: 20px;
   left: 20px;
   padding: 8px 20px;
   border-radius: 50px;
   background: var(--glass-gold);
   backdrop-filter: blur(10px);
   font-size: 10px;
   color: white;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   box-shadow: 0 4px 15px rgba(255, 184, 0, 0.4);
   transform: translateY(0);
   transition: 0.3s;
   font-family: var(--font-inter);
   font-weight: bold;
 }

 .thematicCard:hover .category-tag {
   transform: translateY(-5px);
   background: var(--gold);
 }

 /* Card Content */
 .thematicCard .card-content {
   padding: 20px 24px;
   position: relative;
 }

 .thematicCard .card-icon-wrapper {
   width: 48px;
   height: 48px;
   background: white;
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   transition: all 0.5s ease;
 }

 .thematicCard .card-icon {
   font-size: 20px;
   transition: all 0.5s;
   color: var(--theme);
   transition: all 0.5s ease;
 }

 .thematicCard:hover .card-icon-wrapper {
   background: var(--theme);
   transform: rotate(360deg) scale(1.1);
 }

 .thematicCard:hover .card-icon-wrapper .card-icon {
   color: white;
 }

 .thematicCard .card-title {
   font-family: var(--font-montserrat);
   font-size: clamp(1rem, 0.943rem + 0.2532vw, 1.25rem);
   color: var(--primary);
   margin-bottom: 12px;
   line-height: 1.2;
   transition: color 0.3s;
   font-weight: 700;
 }

 .thematicCard:hover .card-title {
   color: var(--gold);
 }

 .thematicCard .card-desc {
   font-family: var(--font-inter);
   font-size: 14px;
   color: var(--text-gray);
   line-height: 1.6;
   margin-bottom: 16px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 /* Firefox-specific fallback */
 @supports not (-webkit-line-clamp: 2) {
   .thematicCard .card-desc {
     max-height: calc(1.4em * 2);
     overflow: hidden;
   }
 }

 .thematicCard .learn-more {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-family: var(--font-inter);
   font-weight: 500;
   font-size: 15px;
   color: var(--secondary-blue);
   transition: all 0.3s;
 }

 .thematicCard .learn-more i {
   transition: transform 0.3s;
 }

 .thematicCard:hover .learn-more {
   color: var(--gold);
 }

 .thematicCard:hover .learn-more i {
   transform: translateX(5px);
 }

 /* Progress Bar */
 .thematicCard .progress-container {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: rgba(41, 52, 187, 0.1);
 }

 .thematicCard .progress-bar {
   height: 100%;
   background: linear-gradient(90deg, #FFB800, #FF8C00);
   width: 0%;
   transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .thematicCard:hover .progress-bar {
   width: var(--progress-width);
 }

 /* Tooltip */
 .thematicCard .tooltip {
   position: absolute;
   top: -50px;
   left: 50%;
   transform: translateX(-50%) translateY(10px);
   background: white;
   padding: 8px 16px;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
   font-family: var(--font-inter);
   font-weight: 500;
   font-size: 12px;
   color: var(--primary);
   white-space: nowrap;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s;
   pointer-events: none;
   z-index: 10;
 }

 .thematicCard .tooltip::after {
   content: '';
   position: absolute;
   bottom: -6px;
   left: 50%;
   transform: translateX(-50%);
   border-width: 6px 6px 0;
   border-style: solid;
   border-color: white transparent transparent;
 }

 .thematicCard:hover .tooltip {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
 }

 /* Animations */
 @keyframes float-blob {

   0%,
   100% {
     transform: translate(0, 0) scale(1);
   }

   33% {
     transform: translate(30px, -50px) scale(1.1);
   }

   66% {
     transform: translate(-20px, 20px) scale(0.9);
   }
 }

 @keyframes float-particle {
   0% {
     transform: translateY(0) translateX(0);
     opacity: 0;
   }

   10% {
     opacity: 1;
   }

   90% {
     opacity: 1;
   }

   100% {
     transform: translateY(-100px) translateX(50px);
     opacity: 0;
   }
 }

 @keyframes float-badge {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-8px);
   }
 }

 @keyframes confetti-pop {
   0% {
     transform: scale(1);
     opacity: 1;
   }

   100% {
     transform: scale(3);
     opacity: 0;
   }
 }

 .confetti-piece {
   position: absolute;
   width: 8px;
   height: 8px;
   background: var(--gold);
   pointer-events: none;
   z-index: 100;
 }


 /* Mobile slider */
 @media (max-width: 770px) {
   .thematic-cards-grid {
     display: flex;
     overflow-x: auto;
     scroll-behavior: smooth;
     gap: 16px;
     padding-bottom: 16px;
     scrollbar-width: none;
     scroll-snap-type: x mandatory;
   }

   .thematic-cards-grid::-webkit-scrollbar {
     display: none;
   }

   /* 1.5 cards visible */
   .thematicCard {
     min-width: 66.66%;
     scroll-snap-align: start;
   }

   /* Slider buttons */
   .slider-controls {
     display: flex;
     justify-content: space-between;
     margin-top: 12px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 100%;
   }

   .slider-controls .slider-btn {
     background: var(--dark-blue);
     color: #fff;
     border: none;
     padding: 10px;
     border-radius: 8px;
     cursor: pointer;
   }

   .slider-controls .slider-btn:active {
     transform: scale(0.95);
   }

   #prevBtn {
     transform: translateX(-10px);
   }

   #nextBtn {
     transform: translateX(10px);
   }


 }

 /* 1 card only */
 @media (max-width: 640px) {
   .thematicCard {
     min-width: 100%;
   }
 }


 /* Hide buttons on desktop */
 @media (min-width: 770px) {
   .slider-controls {
     display: none;
   }
 }



 /* About Section */
 .about {
   display: flex;
   gap: 80px;
   align-items: start;
 }

 .about-image {
        position: -webkit-sticky; /* Safari */
   position: sticky;
   width: 100%;
   top:20;
 }

 .about-image img {
   border-radius: 20px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
   object-fit: cover;

 }

@media(max-width:1025px){
     .about-image {
   position: relative;
   width: 100%;
   top:0;
 }

}
 /* ==================== YEAR COUNTER BOX (New Feature) ==================== */
 .year-counter-box {
   position: absolute;
   right: -10px;
   background: linear-gradient(135deg, #2934BB 0%, #1E3A8A 100%);
   box-shadow: 0 10px 40px rgba(41, 52, 187, 0.25);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 10;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   overflow: hidden;
   border: 3px solid transparent;
 }

 /* Decorative dots */
 .year-box-dots {
   position: absolute;
   top: 15px;
   right: 15px;
   display: grid;
   grid-template-columns: repeat(3, 4px);
   gap: 4px;
   opacity: 0.15;
   transition: opacity 0.5s;
 }

 .dot {
   width: 4px;
   height: 4px;
   background: white;
   border-radius: 50%;
 }

 .year-label {
   font-family: 'Inter', sans-serif;
   font-weight: 700;
   font-size: clamp(0.5rem, 0.3224rem + 0.7895vw, 0.6875rem);
   color: rgba(255, 255, 255, 0.7);
   text-transform: uppercase;
   letter-spacing: 0.15em;
   margin-bottom: 8px;
   transition: color 0.5s;
 }

 .year-number {
   font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: clamp(1.5rem, 1.2188rem + 1.25vw, 2.5rem);
   color: white;
   line-height: 1;
   margin-bottom: 6px;
   font-variant-numeric: tabular-nums;
   text-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .experience-text {
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   font-size: 10px;
   color: rgba(255, 255, 255, 0.9);
   text-align: center;
   opacity: 0;
   transform: translateY(5px);
   transition: all 0.5s ease;
   text-wrap: nowrap;
 }

 /* Hover State */
 .year-counter-box.hover-active {
   transform: scale(1.08) rotate(2deg);
   background: linear-gradient(135deg, #FFB800 0%, #FF8C00 100%);
   box-shadow: 0 20px 60px rgba(41, 52, 187, 0.3);
   border-color: rgba(255, 255, 255, 0.4);
 }



 .year-counter-box.hover-active .year-label {
   color: rgba(255, 255, 255, 0.9);
 }

 .year-counter-box .experience-text {
   max-height: 0;
 }

 .year-counter-box.hover-active .experience-text {
   opacity: 1;
   transform: translateY(0);
   max-height: 100px;
 }

 .year-counter-box.hover-active .year-box-dots {
   opacity: 0.4;
 }

 .about-content {
   flex: 1;
 }

 .checklist {
   margin-top: 30px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
 }

 .check-item {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 600;
   color: var(--text-dark);
 }

 .check-item i {
   color: var(--primary);
   font-size: clamp(0.625rem, 0.4435rem + 0.8065vw, 1.25rem);
 }


 /* Impact Section */
 .impact-section {
   background: linear-gradient(135deg, #2934BB, #1E3A8A);
   color: white;
   text-align: center;
 }

 .impact-section .subtitle {
   color: var(--gold);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 2px;
   display: block;
 }

 .impact-section h2 {
   color: white;
   font-weight: 800;
   font-family: var(--font-montserrat);
   line-height: 1.1;
 }

 .impact-section .sub {
   color: rgba(255, 255, 255, 0.8);
   font-size: 19px;
   margin-bottom: 60px;
 }

 .impact-card {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   padding: clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   transition: transform 0.3s;
 }

 .impact-card:hover {
   transform: translateY(-5px);
   background: rgba(255, 255, 255, 0.15);
 }

 .impact-num {
   font-family: var(--font-montserrat);
   font-weight: 900;
   font-size: clamp(2.25rem, 2.0323rem + 0.9677vw, 3rem);
   color: var(--gold);
   margin-bottom: clamp(0.375rem, 0.3024rem + 0.3226vw, 0.625rem);
   display: block;
 }

 .impact-lbl {
   font-family: var(--font-inter);
   font-weight: 600;
   font-size: clamp(0.875rem, 0.8387rem + 0.1613vw, 1rem);
   margin-bottom: clamp(0.375rem, 0.3024rem + 0.3226vw, 0.625rem);
   display: block;
 }

 .impact-desc {
   font-size: clamp(0.75rem, 0.7137rem + 0.1613vw, 0.875rem);
   opacity: 0.8;
 }

 /* Publication Section (Focus) */
 .publications-section {
   background: linear-gradient(to bottom, #ffffff, #f0f4ff);
 }


 .publications-section .btn-view-more {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   border: 1px solid var(--primary);
   color: var(--dark-blue);
   padding: 10px 24px;
   border-radius: 50px;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   font-size: 15px;
   transition: all 0.3s ease;
 }

 .publications-section .btn-view-more i {
   font-size: clamp(0.625rem, 0.4435rem + 0.8065vw, 1.25rem);
   transition: transform 0.3s;
 }

 .publications-section .btn-view-more:hover {
   transform: translateY(-4px);
   box-shadow: 0 15px 35px rgba(41, 52, 187, 0.3);
 }

 .publications-section .btn-view-more:hover i {
   transform: translateX(5px);
 }



 .pub-card {
   background: white;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: var(--shadow-md);
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   border: 1px solid rgba(0, 0, 0, 0.03);
   display: flex;
   flex-direction: column;
   position: relative;
   top: 0;
   height: 100%;
 }

 .pub-card:hover {
   transform: translateY(-10px) scale(1.02);
   box-shadow: 0 20px 40px rgba(42, 72, 201, 0.15);
 }

 .pub-image-wrapper {
   height: 220px;
   overflow: hidden;
   position: relative;
   background: #eef2ff;
 }

 .pub-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
 }

 .pub-card:hover .pub-img {
   transform: scale(1.1);
 }

 .pub-type-badge {
   position: absolute;
   top: 16px;
   right: 16px;
   background: rgba(255, 255, 255, 0.9);
   padding: 6px 12px;
   border-radius: 20px;
   font-size: 12px;
   font-weight: 700;
   color: var(--primary);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   text-transform: capitalize;
 }

 .pub-body {
   padding: 24px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   background: white;
   position: relative;
   z-index: 1;
 }

 .pub-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
   color: var(--text-light);
   margin-bottom: 12px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }

 .pub-title {
   font-size: clamp(0.625rem, 0.4435rem + 0.8065vw, 1.25rem);
   font-weight: 700;
   color: var(--text-dark);
   margin-bottom: 8px;
   line-height: 1.4;
   transition: color 0.3s;
 }

 .pub-card:hover .pub-title {
   color: var(--primary);
 }

 .pub-author {
   font-size: 12px;
   color: var(--text-gray);
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   gap: 6px;
 }

 .pub-desc {
   font-size: 14px;
   color: var(--text-gray);
   line-height: 1.6;
   margin-bottom: 24px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   opacity: 0.8;
   transition: opacity 0.3s;
 }

 /* Firefox-specific fallback */
 @supports not (-webkit-line-clamp: 2) {
   .pub-desc {
     max-height: calc(1.4em * 2);
     overflow: hidden;
   }
 }

 .pub-card:hover .pub-desc {
   opacity: 1;
 }

 .pub-actions {
   margin-top: auto;
 }

 .btn-download {
   width: 100%;
   padding: 12px;
   background: var(--primary-light);
   color: var(--primary);
   border: none;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14px;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
 }

 .pub-card:hover .btn-download {
   background: var(--primary);
   color: white;
   transform: scale(1.02);
 }

 .pub-slider-wrapper {
   position: relative;
   width: 100%;
   overflow: hidden;
 }

 .pub-slider {
   display: flex;
   transition: transform 0.4s ease;
   will-change: transform;
 }

 .pub-slide {
   flex: 0 0 calc(100% / 3);
   padding-inline: 1rem;
 }

 /* Tablet */
 @media (max-width: 1024px) {
   .pub-slide {
     flex: 0 0 calc(100% / 2);
   }
 }

 /* Mobile */
 @media (max-width: 768px) {
   .pub-slide {
     flex: 0 0 100%;
   }
 }

 /* Buttons */
 .pub-slider-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: var(--primary);
   color: #fff;
   border: none;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   cursor: pointer;
   z-index: 10;
 }

 .pub-slider-btn.prev {
   left: -10px;
 }

 .pub-slider-btn.next {
   right: -10px;
 }





 /* blog section css */

 .blog-section .background-fx {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   overflow: hidden;
   pointer-events: none;
 }

 .blog-section .orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(50px);
   will-change: transform;
   opacity: 0.4;
   animation: float-orb 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
 }

 .blog-section .orb-1 {
   width: 800px;
   height: 800px;
   background: linear-gradient(135deg, #DBEAFE, #E0F2FE);
   top: -200px;
   left: -200px;
 }

 .blog-section .orb-2 {
   width: 600px;
   height: 600px;
   background: linear-gradient(135deg, #FEF3C7, #FFF7ED);
   top: 40%;
   right: -100px;
   animation-delay: -5s;
 }

 .blog-section .orb-3 {
   width: 500px;
   height: 500px;
   background: linear-gradient(135deg, #F3E8FF, #FAE8FF);
   bottom: -100px;
   left: 30%;
   animation-delay: -10s;
 }

 .blog-section .grid-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image:
     linear-gradient(rgba(41, 52, 187, 0.03) 1px, transparent 1px),
     linear-gradient(90deg, rgba(41, 52, 187, 0.03) 1px, transparent 1px);
   background-size: 60px 60px;
   mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
   z-index: 1;
 }

 /* Futuristic Header */
 .blog-section .section-header {
   margin-bottom: 60px;
   max-width: 700px;
   margin-inline: auto;
 }

 .blog-section .live-badge {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 16px;
   background: rgba(255, 184, 0, 0.1);
   border: 1px solid rgba(255, 184, 0, 0.3);
   border-radius: 100px;
   margin-bottom: 24px;
   backdrop-filter: blur(10px);
 }

 .blog-section .live-dot {
   width: 8px;
   height: 8px;
   background-color: #FF0000;
   border-radius: 50%;
   box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.2);
   animation: pulse-red 1.5s infinite;
 }

 .blog-section .live-text {
   color: #D97706;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }

 .blog-section .main-title {
   background: linear-gradient(135deg, var(--dark-blue) 0%, var(--primary) 40%, var(--gold) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: gradient-text 8s ease infinite;
 }


 /* Bento Grid */
 .blog-section .bento-grid {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-auto-rows: 230px;
   gap: 24px;
   margin-bottom: 60px;
 }

 /* Card Styles */
 .blog-section .bento-card {
   position: relative;
   border-radius: 32px;
   overflow: hidden;
   background: white;
   transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   box-shadow: var(--card-shadow);
   transform: translateZ(0);
 }

 .blog-section .bento-card:hover {
   transform: translateY(-12px) scale(1.01);
   box-shadow: var(--hover-shadow);
   z-index: 10;
 }

 .blog-section .bento-card .card-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.8s ease;
 }

 .blog-section .bento-card:hover .card-img {
   transform: scale(1.1) rotate(1deg);
 }

 /* Hero Card */
 .blog-section .bento-card-hero {
   grid-column: span 8;
   grid-row: span 2;
 }

 .blog-section .bento-card .hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0%, rgba(30, 58, 138, 0.2) 40%, rgba(0, 0, 0, 0) 100%);
 }

 /* Floating Elements */
 .blog-section .bento-card .featured-badge {
   position: absolute;
   top: 32px;
   left: 32px;
   background: linear-gradient(135deg, var(--gold), var(--accent-orange));
   padding: 10px 24px;
   border-radius: 100px;
   color: white;
   font-family: var(--font-inter);
   font-size: clamp(0.5rem, 0.4297rem + 0.3125vw, 0.75rem);
   font-weight: 800;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   box-shadow: 0 8px 20px rgba(255, 184, 0, 0.4);
   animation: float-y 4s ease-in-out infinite;
   display: flex;
   align-items: center;
   gap: 8px;
   z-index: 2;
 }

 .blog-section .bento-card .date-sticker {
   position: absolute;
   bottom: clamp(1.25rem, 0.8984rem + 1.5625vw, 2.5rem);
   right: clamp(1.25rem, 0.8984rem + 1.5625vw, 2.5rem);
   width: clamp(4rem, 3.7188rem + 1.25vw, 5rem);
   height: clamp(4rem, 3.7188rem + 1.25vw, 5rem);
   background: rgba(255, 255, 255, 0.95);
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
   z-index: 2;
   transition: transform 0.4s ease;
 }

 .blog-section .bento-card:hover .date-sticker {
   transform: rotate(10deg) scale(1.1);
 }

 .blog-section .bento-card .date-day {
   font-family: var(--font-inter);
   font-size: 28px;
   color: var(--primary);
   line-height: 1;
   font-weight: 600;
 }

 .blog-section .bento-card .date-month {
   font-family: var(--font-inter);
   font-size: clamp(0.5rem, 0.4297rem + 0.3125vw, 0.75rem);
   font-weight: 500;
   color: var(--accent-orange);
   text-transform: uppercase;
   margin-top: 4px;
 }

 .blog-section .bento-card .hero-content {
   position: absolute;
   bottom: 0;
   left: 0;
   padding: clamp(1rem, 0.5781rem + 1.875vw, 2.5rem);
   width: 100%;
   z-index: 2;
 }

 .blog-section .bento-card .cat-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   padding: 8px 16px;
   background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 100px;
   font-family: var(--font-inter);
   font-size: clamp(0.5rem, 0.4297rem + 0.3125vw, 0.75rem);
   text-transform: uppercase;
   margin-bottom: 16px;
   font-weight: 600;
 }

 .blog-section .bento-card .hero-title {
   font-family: var(--font-montserrat);
   font-size: clamp(1.5rem, 1.2891rem + 0.9375vw, 2.25rem);
   font-weight: bold;
   color: white;
   line-height: 1.2;
   margin-bottom: 16px;
   text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 }

 .blog-section .bento-card .meta-row {
   display: flex;
   gap: 10px;
   color: rgba(255, 255, 255, 0.8);
   font-family: var(--font-inter);
   font-weight: 400;
   font-size: 14px;
 }

 .blog-section .bento-card .author-avatar {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: 2px solid white;
   overflow: hidden;
 }

 .blog-section .bento-card .hero-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px clamp(1rem, 0.7188rem + 1.25vw, 2rem);
   background: white;
   color: var(--primary);
   border-radius: 100px;
   font-size: clamp(0.625rem, 0.5371rem + 0.3906vw, 0.9375rem);
   text-decoration: none;
   transition: all 0.3s ease;
 }

 .blog-section .bento-card .hero-btn:hover {
   background: var(--gold);
   color: white;
   transform: translateX(5px);
 }

 /* Medium Card */
 .blog-section .bento-card-medium {
   grid-column: span 4;
   grid-row: span 2;
   display: flex;
   flex-direction: column;
 }

 .blog-section .bento-card .medium-img-wrapper {
   height: 55%;
   position: relative;
   overflow: hidden;
 }

 .blog-section .bento-card .medium-content {
   padding: clamp(1rem, 0.4rem + 1.5vw, 1.75rem);
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .blog-section .bento-card .medium-title {
   font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
   color: var(--dark-blue);
   line-height: 1.4;
   margin-bottom: 12px;
   transition: color 0.3s;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 /* Firefox-specific fallback */
 @supports not (-webkit-line-clamp: 2) {
   .blog-section .bento-card .medium-title {
     max-height: calc(1.4em * 2);
     /* line-height * 2 lines */
     overflow: hidden;
   }
 }

 .blog-section .bento-card:hover .medium-title {
   color: var(--primary);
 }

 .blog-section .bento-card .medium-excerpt {
   font-size: 14px;
   color: var(--text-gray);
   line-height: 1.6;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 /* Firefox-specific fallback */
 @supports not (-webkit-line-clamp: 2) {
   .blog-section .bento-card .medium-excerpt {
     max-height: calc(1.4em * 2);
     /* line-height * 2 lines */
     overflow: hidden;
   }
 }

 .blog-section .bento-card .card-footer {
   margin-top: 20px;
   padding-top: 20px;
   border-top: 1px solid #F3F4F6;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 13px;
   color: var(--text-gray);
 }

 .blog-section .bento-card .read-more {
   color: var(--primary);
   display: flex;
   align-items: center;
   gap: 4px;
 }

 /* Small Card */
 .blog-section .bento-card-small {
   grid-column: span 4;
   grid-row: span 1;
   display: flex;
   flex-direction: row;
 }

 .blog-section .bento-card .small-img-wrapper {
   position: relative;
   overflow: hidden;
 }

 .blog-section .bento-card .small-content {
   padding: 10px 24px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .blog-section .bento-card .small-cat {
   color: var(--gold);
   font-size: 11px;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .blog-section .bento-card .small-title {
   font-size: clamp(0.875rem, 0.725rem + 0.375vw, 1.0625rem);
   color: var(--dark-blue);
   line-height: 1.4;
   margin-bottom: 12px;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 /* Firefox-specific fallback */
 @supports not (-webkit-line-clamp: 2) {
   .blog-section .bento-card .small-title {
     max-height: calc(1.4em * 2);
     overflow: hidden;
   }
 }


 .blog-section .bento-card .small-excerpt {
   font-size: 12px;
   color: var(--text-gray);
   line-height: 1.6;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 3;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 /* Firefox-specific fallback */
 @supports not (-webkit-line-clamp: 3) {
   .blog-section .bento-card .small-excerpt {
     max-height: calc(1.4em * 3);
     /* line-height * 2 lines */
     overflow: hidden;
   }
 }


 @media (max-width:480px) {
   .blog-section .bento-card .small-title {
     -webkit-line-clamp: 3;
   }

   /* Firefox-specific fallback */
   @supports not (-webkit-line-clamp: 3) {
     .blog-section .bento-card .small-title {
       max-height: calc(1.4em * 3);
     }
   }

   .blog-section .bento-card .small-excerpt {
     -webkit-line-clamp: 4;

   }

   /* Firefox-specific fallback */
   @supports not (-webkit-line-clamp: 4) {
     .blog-section .bento-card .small-excerpt {
       max-height: calc(1.4em * 4);
     }
   }


 }

 .blog-section .bento-card .small-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: auto;
 }

 .blog-section .bento-card .arrow-circle {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #F3F4F6;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary);
   transition: all 0.3s;
 }

 .blog-section .bento-card:hover .arrow-circle {
   background: var(--primary);
   color: white;
   transform: translateX(4px);
 }

 /* Load More */
 .blog-section .load-more-container {
   text-align: center;
   margin-top: 60px;
 }

 .blog-section .load-more-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: clamp(0.75rem, 0.6445rem + 0.4688vw, 1.125rem) clamp(1.25rem, 0.8984rem + 1.5625vw, 2.5rem);
   border-radius: 100px;
   background: white;
   border: 2px solid var(--primary);
   color: var(--primary);
   font-size: clamp(0.75rem, 0.6797rem + 0.3125vw, 1rem);
   cursor: pointer;
   transition: all 0.4s ease;
 }

 .blog-section .load-more-btn:hover {
   background: var(--primary);
   color: white;
   box-shadow: 0 12px 30px rgba(41, 52, 187, 0.25);
 }

 .blog-section .load-more-btn:hover i {
   transform: rotate(180deg);
 }

 .blog-section .load-more-btn i {
   transition: transform 0.5s ease;
 }



 /* Animations */
 @keyframes float-y {

   0%,
   100% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-10px);
   }
 }

 @keyframes pulse-red {
   0% {
     box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
   }

   70% {
     box-shadow: 0 0 0 6px rgba(255, 0, 0, 0);
   }

   100% {
     box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
   }
 }

 @keyframes gradient-text {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 @keyframes shimmer {
   0% {
     left: -100%;
   }

   100% {
     left: 200%;
   }
 }

 @keyframes float-orb {
   0% {
     transform: translate(0, 0) rotate(0deg);
   }

   100% {
     transform: translate(30px, 30px) rotate(5deg);
   }
 }


 /* Reading Progress */
 .blog-section .bento-card .progress-bar {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 4px;
   width: 0%;
   background: linear-gradient(90deg, var(--gold), var(--accent-orange));
   transition: width 0.3s;
   z-index: 5;
 }

 .blog-section .bento-card:hover .progress-bar {
   width: 65%;
 }



 /* ================= TABLET ================= */
 @media (max-width: 1024px) {
   .blog-section .bento-grid {
     grid-template-columns: repeat(6, 1fr);
   }

   .blog-section .bento-card-hero {
     grid-column: span 6;
   }

   .blog-section .bento-card-medium,
   .blog-section .bento-card-small {
     grid-column: span 3;
   }
 }



 /* ================= MOBILE SWIPE ================= */
 @media (max-width: 770px) {
   .blog-section .bento-grid {
     grid-template-columns: repeat(6, 1fr);
   }

   .blog-section .bento-card-hero {
     grid-column: span 6;
   }

   .blog-section .bento-card-medium,
   .blog-section .bento-card-small {
     grid-column: span 6;
   }

   .blog-section .bento-card .medium-img-wrapper {
     height: 55%;
   }

 }



 /* Footer */
 /* Custom link hover animation */
 .footer-link {
   position: relative;
   transition: all 0.3s ease;
 }

 .footer-link:hover {
   padding-left: 0.5rem;
   color: #ffffff;
 }

 .footer-link::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 0;
   height: 2px;
   background-color: #FFB800;
   transition: width 0.3s ease;
   opacity: 0;
 }

 .footer-link:hover::before {
   width: 4px;
   opacity: 1;
 }

 /* Social Icon Hover */
 .social-btn {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .social-btn:hover {
   transform: translateY(-4px);
   box-shadow: 0 10px 15px -3px rgba(41, 52, 187, 0.3);
 }


 @keyframes float {
   0% {
     transform: translateY(0);
   }

   50% {
     transform: translateY(-15px);
   }

   100% {
     transform: translateY(0);
   }
 }



 /* Hide scrollbar for Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }

 /* Hide scrollbar for IE, Edge and Firefox */
 .no-scrollbar {
   -ms-overflow-style: none;
   /* IE and Edge */
   scrollbar-width: none;
   /* Firefox */
 }

 .aspect-video {
   aspect-ratio: 16 / 9;
 }

 .glass-effect {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
 }

 .wave-divider {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   line-height: 0;
   transform: rotate(180deg);
 }

 .wave-divider svg {
   position: relative;
   display: block;
   width: calc(100% + 1.3px);
   height: 80px;
 }

 .wave-divider .shape-fill {
   fill: #FFFFFF;
 }




 /* News & Notice Section (The Requested Focus) */
 .news-section {
   background-color: #f9f9fc;
 }

 .news-card {
   background: white;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease-out;
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .news-card:hover {
   transform: translateY(-8px) scale(1.01);
   box-shadow: 0 15px 35px rgba(42, 72, 201, 0.15);
 }

 .news-image-wrapper {
   height: 220px;
   position: relative;
   overflow: hidden;
 }

 .news-image-wrapper img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.5s ease;
 }

 .news-card:hover .news-image-wrapper img {
   transform: scale(1.1);
 }

 .news-section .date-badge {
   position: absolute;
   top: 20px;
   right: 20px;
   background-color: var(--primary);
   color: white;
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 13px;
   font-weight: 700;
   text-align: center;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   line-height: 1.2;
   z-index: 2;
 }

 .news-section .date-badge span {
   display: block;
   font-size: 18px;
 }

 .news-content {
   padding: 25px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }

 .news-tag {
   font-size: 12px;
   color: var(--primary);
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 10px;
   letter-spacing: 1px;
 }

 .news-title {
   font-size: clamp(1.125rem, 1.0898rem + 0.1563vw, 1.25rem);
   font-weight: 700;
   color: var(--text-dark);
   margin-bottom: 12px;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 /* Firefox-specific fallback */
 @supports not (-webkit-line-clamp: 2) {
   .news-title {
     max-height: calc(1.4em * 2);
     overflow: hidden;
   }
 }

 .news-desc {
   font-size: clamp(0.75rem, 0.7148rem + 0.1563vw, 0.875rem);
   color: var(--text-light);
   margin-bottom: 16px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
   flex-grow: 1;
 }

 /* Firefox-specific fallback */
 @supports not (-webkit-line-clamp: 3) {
   .news-desc {
     max-height: calc(1.4em * 3);
     overflow: hidden;
   }
 }

 .news-footer {
   border-top: 1px solid #f0f0f0;
   padding-top: 20px;
   display: flex;
   justify-content: end;
   align-items: center;
   margin-top: auto;
 }

 .read-more-btn {
   font-size: 14px;
   font-weight: 600;
   color: var(--text-dark);
   display: flex;
   align-items: center;
   gap: 6px;
   transition: color 0.3s;
 }

 .read-more-btn i {
   font-size: 18px;
   color: var(--primary);
   transition: transform 0.3s;
 }

 .news-card:hover .read-more-btn {
   color: var(--primary);
 }

 .news-card:hover .read-more-btn i {
   transform: translateX(4px);
 }

 .news-section .btn-view-more {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: var(--primary);
   color: white;
   padding: 16px 42px;
   border-radius: 50px;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   font-size: 15px;
   box-shadow: 0 10px 25px rgba(41, 52, 187, 0.2);
   transition: all 0.3s ease;
 }

 .news-section .btn-view-more i {
   font-size: clamp(0.625rem, 0.4435rem + 0.8065vw, 1.25rem);
   transition: transform 0.3s;
 }

 .news-section .btn-view-more:hover {
   transform: translateY(-4px);
   box-shadow: 0 15px 35px rgba(41, 52, 187, 0.3);
 }

 .news-section .btn-view-more:hover i {
   transform: translateX(5px);
 }

 .news-slider-wrapper {
   position: relative;
   overflow: hidden;
 }

 .news-slider {
   display: flex;
   transition: transform 0.4s ease;
   will-change: transform;
 }

 .news-slide {
   flex: 0 0 calc(100% / 3);
   padding-inline: 1rem;
 }

 /* Tablet */
 @media (max-width: 1024px) {
   .news-slide {
     flex: 0 0 calc(100% / 2);
     padding-inline: 0.625rem;
   }
 }

 /* Mobile */
 @media (max-width: 768px) {
   .news-slide {
     flex: 0 0 100%;
     padding-inline: 0;
   }
 }

 /* Buttons */
 .news-slider-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: var(--primary);
   color: #fff;
   border: none;
   width: 42px;
   height: 42px;
   border-radius: 50%;
   cursor: pointer;
   z-index: 10;
 }

 .news-slider-btn.prev {
   left: -10px;
 }

 .news-slider-btn.next {
   right: -10px;
 }

 /* partner section css */

 .partners-slider-mask {
   mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
   -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 }

 .pause-on-hover:hover .slider-track {
   animation-play-state: paused;
 }


 /* Map Interaction Styles */
 #infoPanel>div {
   display: none;
 }

 /* Ensure nested elements inside the direct children (grandchildren) stay visible */
 #infoPanel>div>div {
   display: flex;
 }

 #infoPanel .default-panel {
   display: flex;
 }

 @keyframes pulse {
   0% {
     transform: scale(1);
     opacity: 1;
     box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.7);
   }

   70% {
     transform: scale(1.5);
     opacity: 0;
     box-shadow: 0 0 0 10px rgba(255, 184, 0, 0);
   }

   100% {
     transform: scale(1);
     opacity: 0;
   }
 }

 /* Animations */
 @keyframes slideInRight {
   from {
     opacity: 0;
     transform: translateX(20px);
   }

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

 @keyframes slideUp {
   from {
     opacity: 0;
     transform: translateY(20px);
   }

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

 .animate-slide-in {
   animation: slideInRight 0.4s ease-out forwards;
 }

 .project-card {
   opacity: 0;
   animation: slideUp 0.5s ease-out forwards;
 }

 /* Custom Scrollbar */
 .custom-scrollbar::-webkit-scrollbar {
   width: 6px;
 }

 .custom-scrollbar::-webkit-scrollbar-track {
   background: #f1f1f1;
   border-radius: 4px;
 }

 .custom-scrollbar::-webkit-scrollbar-thumb {
   background: #cbd5e1;
   border-radius: 4px;
 }

 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
   background: #94a3b8;
 }




 /* about us page css */
 .about-hero-section .hero-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: white;
   color: var(--primary);
   padding: 16px 40px;
   border-radius: 50px;
   font-weight: 700;
   font-size: 16px;
   transition: all 0.3s ease;
 }

 .about-hero-section .hero-btn:hover {
   transform: translateY(-3px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
   gap: 15px;
 }



 /* Mission Vision Values Cards */
 .values-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 40px;
 }

 .value-card {
   background: var(--accent);
   padding: 24px;
   border-radius: 20px;
   transition: transform 0.3s;
   position: relative;
   overflow: hidden;
 }

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

 .value-icon {
   width: 70px;
   height: 70px;
   background: var(--primary);
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   color: #ffffff;
   font-size: 32px;
 }

 .value-card h3 {
   font-size: 28px;
   margin-bottom: 10px;
 }

 .value-card p {
   color: var(--text-light);
   font-size: 16px;
 }

@media (max-width: 1025px) {
  .values-grid {
    display: -ms-grid;         
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .values-grid {
    display: -ms-grid;         
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
  }
}

 /* Our Story / Timeline */

 .timeline {
   position: relative;
   max-width: 1200px;
   margin: 0 auto;
 }

 .timeline::after {
   content: '';
   position: absolute;
   width: 4px;
   background-color: #E2E8F0;
   top: 0;
   bottom: 0;
   left: 50%;
   margin-left: -2px;
   border-radius: 2px;
 }

 .timeline-item {
   padding: 10px 60px;
   position: relative;
   background-color: inherit;
   width: 50%;
   margin-bottom: 60px;
 }

@media (max-width:770px){
     .timeline-item {
   padding: 10px 20px;
   margin-bottom: 10px;
 }
}

 .timeline-item.left {
   left: 0;
   text-align: right;
 }

 .timeline-item.right {
   left: 50%;
 }

 .timeline-item::after {
   content: '';
   position: absolute;
   width: 24px;
   height: 24px;
   right: -12px;
   background-color: var(--white);
   border: 6px solid var(--primary);
   top: 20px;
   border-radius: 50%;
   z-index: 1;
 }

 .timeline-item.right::after {
   left: -12px;
 }

 .timeline-content {
   padding: 30px;
   background-color: var(--white);
   border-radius: 16px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   position: relative;
 }
 
 .timeline-year {
   font-size: 36px;
   color: var(--primary);
   margin-bottom: 10px;
   display: block;
 }

 .timeline-content h3 {
   font-size: 24px;
   margin-bottom: 10px;
   font-weight: 600;
 }

 .timeline-content p {
   font-size: 16px;
   color: var(--text-light);
 }


@media (max-width:640px){
      .timeline-item {
   padding: 10px 14px;
     margin-bottom: 0;
 }
   .timeline-content {
   padding: 15px;
   border-radius: 12px;
 }
 .timeline-content h3 {
    font-size: 18px;
    margin-bottom: 8px;
}
.timeline-content p {
    font-size: 14px;
}
 .timeline-item::after {
     width: 20px;
   height: 20px;
   right: -10px;
   top: 20px;

 }
}

@media (max-width:520px){
     .timeline-item {
   padding: 8px;
 }
   .timeline-content {
   padding: 11px;
   border-radius: 8px;
 }
 .timeline-content h3 {
    font-size: 16px;
    margin-bottom: 6px;
}
.timeline-content p {
    font-size: 12px;
}
}

 /* Our Team Section */
 .team-section {
   background: linear-gradient(180deg, #FAFBFF 0%, #F0F4FF 100%);
   position: relative;
   overflow: hidden;
 }

 /* Background Elements */
 .bg-shape {
   position: absolute;
   border-radius: 50%;
   background: linear-gradient(135deg, rgba(42, 72, 201, 0.05) 0%, rgba(42, 72, 201, 0) 70%);
   z-index: 0;
 }

 .shape-1 {
   top: -100px;
   right: -100px;
   width: 600px;
   height: 600px;
 }

 .shape-2 {
   bottom: -50px;
   left: -100px;
   width: 400px;
   height: 400px;
 }

 .team-header {
   text-align: center;
   margin-bottom: 80px;
   position: relative;
   z-index: 2;
 }

 .team-header h2 {
   font-family: 'Alibaba-PuHuiTi-Bold', sans-serif;
   font-size: 48px;
   color: var(--text-dark);
   margin-bottom: 15px;
 }

 .team-header p {
   color: var(--text-gray);
   font-size: 18px;
   max-width: 600px;
   margin: 0 auto;
 }

 /* Ultra Modern Team Grid */
 .team-grid {
   position: relative;
   z-index: 2;
 }

 /* Card Design */
 .team-card {
   background: white;
   border-radius: 24px;
   padding: 40px 30px;
   text-align: center;
   position: relative;
   transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   box-shadow: 0 10px 40px rgba(42, 72, 201, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.8);
   transform-style: preserve-3d;
   perspective: 1000px;
   overflow: hidden;
 }

 /* Subtle Gradient Background Overlay */
 .team-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, rgba(42, 72, 201, 0.03) 0%, rgba(255, 255, 255, 0) 100%);
   opacity: 0;
   transition: opacity 0.4s ease;
   z-index: 0;
 }

 .team-card:hover::before {
   opacity: 1;
 }

 /* 3D Hover Effect */
 .team-card:hover {
   transform: translateY(-15px) scale(1.02);
   box-shadow: 0 30px 60px rgba(42, 72, 201, 0.15);
   border-color: rgba(42, 72, 201, 0.2);
 }

 .card-content {
   position: relative;
   z-index: 1;
 }

 /* Avatar Container */
 .avatar-container {
   position: relative;
   width: 120px;
   height: 120px;
   margin: 0 auto 25px;
 }

 .avatar {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid white;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
   transition: all 0.4s ease;
   position: relative;
   z-index: 2;
 }

 /* Circular gradient effect behind avatar */
 .avatar-bg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0.8);
   width: 130px;
   height: 130px;
   border-radius: 50%;
   background: linear-gradient(135deg, #2A48C9, #4CC9F0);
   opacity: 0;
   transition: all 0.4s ease;
   z-index: 1;
 }

 .team-card:hover .avatar {
   border-color: transparent;
   transform: scale(1.05);
 }

 .team-card:hover .avatar-bg {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
   animation: spin 10s linear infinite;
 }

 @keyframes spin {
   0% {
     transform: translate(-50%, -50%) rotate(0deg);
   }

   100% {
     transform: translate(-50%, -50%) rotate(360deg);
   }
 }

 .member-name {
   color: var(--text-dark);
   margin-bottom: 5px;
   transition: color 0.3s ease;
 }

 .team-card:hover .member-name {
   color: var(--primary);
 }

 .member-role {
   font-size: 12px;
   color: var(--primary);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 10px;
   display: block;
 }

 .member-bio {
   font-size: 12px;
   color: var(--text-gray);
   line-height: 1.6;
   margin-bottom: 25px;
   opacity: 0.8;
   max-width: 90%;
   margin-left: auto;
   margin-right: auto;
   transition: all 0.4s ease;
 }

 .team-card:hover .member-bio {
   opacity: 1;
   color: var(--text-dark);
 }

 /* Social Icons */
 .social-links {
   display: flex;
   justify-content: center;
   gap: 15px;
   opacity: 0.7;
   transform: translateY(10px);
   transition: all 0.4s ease;
 }

 .team-card:hover .social-links {
   opacity: 1;
   transform: translateY(0);
 }

 .social-icon {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: #F0F4FF;
   color: var(--primary);
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .social-icon:hover {
   background: var(--primary);
   color: white;
   transform: scale(1.2) rotate(5deg);
 }

 /* Staggered Animation Simulation */

 @keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

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




 /* Partners Section */
 .partners-section {
   background-color: #FFFFFF;
   position: relative;
 }

.partners-section .partner-card {
  background: #FAFAFA;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  border: 1px solid transparent;
  transition: all 0.3s ease;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
}

.partners-section .partner-logo {
   max-height: 90px;       
  max-width: 85%;
  width: auto;
  height: auto;
  object-fit: contain;

  filter: grayscale(100%);
  opacity: 0.75;
  transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.partners-section .partner-logo {
  transform: scale(1.15);
}
 .partners-section .partner-card:hover {
  background: #fff;
  box-shadow: var(--shadow-hover);
  border-color: #eee;
  transform: translateY(-6px);
}

.partners-section .partner-card:hover .partner-logo {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

 .partners-section .partner-card:hover .partner-logo {
   filter: grayscale(0%);
   opacity: 1;
 }

@media (max-width: 1024px) {
  .partners-section .partner-logo {
    max-height: 70px;
    max-width: 80%;
  }
}

@media (max-width: 768px) {
  .partners-section .partner-card {
    min-height: 130px;
    padding: 20px;
  }

  .partners-section .partner-logo {
    max-height: 60px;
    max-width: 85%;
  }
}

@media (max-width: 480px) {
  .partners-section .partner-logo {
    max-height: 55px;
    max-width: 90%;
  }
}


.partners-section .partner-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.6s ease forwards;
}

.partners-section .partner-card:nth-child(n) {
  animation-delay: calc(0.08s * var(--i));
}

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


 /* Main Content */
 .content-wrapper {
   position: relative;
   display: flex;
   gap: 40px;
   padding: 0 20px;
   transform: translateY(-80px);
   z-index: 20;
 }

 @media (max-width:900px) {
   .content-wrapper {
     flex-direction: column-reverse;
   }
 }

 /* Left Column */
 .left-col .contact-info-card {
   background: white;
   padding: 50px;
   border-radius: 20px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
   height: 100%;
   display: flex;
   flex-direction: column;
 }

 .right-col .section-title,
 .left-col .section-title {
   font-size: 24px;
   font-weight: bold;
   color: var(--text-dark);
   margin-bottom: 30px;
   position: relative;
   padding-left: 20px;
 }

 .right-col .section-title::before,
 .left-col .section-title::before {
   content: '';
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 6px;
   height: 24px;
   background-color: var(--primary);
   border-radius: 4px;
 }

 .left-col .info-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 30px;
 }

 .left-col .icon-box {
   width: 50px;
   height: 50px;
   background-color: rgba(42, 72, 201, 0.1);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--primary);
   font-size: 24px;
   margin-right: 20px;
   transition: all 0.3s ease;
   flex-shrink: 0;
 }

 .left-col .info-item:hover .icon-box {
   background-color: var(--primary);
   color: white;
 }

 .left-col .info-content h4 {
   font-size: 16px;
   color: var(--text-gray);
   margin-bottom: 5px;
   font-weight: 500;
 }

 .left-col .info-content p,
 .left-col .info-content a {
   font-size: 18px;
   color: var(--text-dark);
   text-decoration: none;
   font-weight: 600;
   line-height: 1.5;
   transition: color 0.2s;
 }

 .left-col .info-content a:hover {
   color: var(--primary);
 }

 .left-col .social-links {
   display: flex;
   gap: 15px;
   margin-top: 20px;
   margin-bottom: 40px;
 }

 .left-col .social-btn {
   width: 45px;
   height: 45px;
   border-radius: 50%;
   background-color: #f0f2f5;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-dark);
   text-decoration: none;
   transition: all 0.3s ease;
   font-size: 20px;
 }

 .left-col .social-btn:hover {
   background-color: var(--primary);
   color: white;
   transform: translateY(-3px);
 }

 .left-col .map-container {
   width: 100%;
   height: 300px;
   border-radius: 15px;
   overflow: hidden;
   border: 1px solid var(--border-color);
   position: relative;
 }

 .left-col .map-frame {
   width: 100%;
   height: 100%;
   border: 0;
   filter: grayscale(20%) contrast(1.1);
   transition: filter 0.3s;
 }

 .left-col .map-container:hover .map-frame {
   filter: grayscale(0%) contrast(1);
 }

 /* Right Column - Form */
 .right-col .contact-form-card {
   background: white;
   padding: 50px;
   border-radius: 20px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
 }

 .right-col .form-group {
   margin-bottom: 25px;
   position: relative;
 }

 .right-col .form-label {
   display: block;
   margin-bottom: 8px;
   font-weight: 500;
   color: var(--text-dark);
   font-size: 15px;
 }

 .right-col .form-control {
   width: 100%;
   padding: 16px 20px;
   border: 2px solid #EBEBEB;
   border-radius: 12px;
   font-size: 16px;
   font-family: inherit;
   transition: all 0.3s ease;
   background-color: #FAFAFA;
 }

 .right-col .form-control:focus {
   outline: none;
   border-color: var(--primary);
   background-color: white;
   box-shadow: 0 0 0 4px rgba(42, 72, 201, 0.1);
 }

 .right-col textarea.form-control {
   height: 180px;
   resize: none;
 }

 .right-col .btn-submit {
   width: 100%;
   padding: 18px;
   background-color: var(--primary);
   color: white;
   border: none;
   border-radius: 12px;
   font-size: 18px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.3s ease;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
 }

 .right-col .btn-submit:hover {
   background-color: var(--primary-dark);
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(42, 72, 201, 0.2);
 }

 .right-col .success-message {
   display: none;
   align-items: center;
   gap: 10px;
   background-color: #e6f9e9;
   color: #2e7d32;
   padding: 15px;
   border-radius: 10px;
   margin-top: 20px;
   font-weight: 500;
   border: 1px solid #c8e6c9;
   animation: fadeIn 0.5s ease;
 }


 /* wysiwyg-content css */
 .wysiwyg-content h1 {
   font-size: 64px;
   font-weight: 700;
   letter-spacing: -0.02em;
 }

 .wysiwyg-content h2 {
   font-size: 48px;
   font-weight: 700;
   letter-spacing: -0.01em;
   padding-bottom: 10px;
   border-bottom: 2px solid #E5E7EB;
 }

 .wysiwyg-content h3 {
   font-size: 32px;
   font-weight: 600;
 }

 .wysiwyg-content h4 {
   font-size: 24px;
   font-weight: 600;
 }

 .wysiwyg-content img {
   width: 100%;
   height: 100%;
 }

 .wysiwyg-content p {
   color: #4B5563;
   font-size: 1rem;
   padding-block: 1rem;
 }

 .wysiwyg-content ul {
   list-style: none;
   padding-left: 20px;
 }

 .wysiwyg-content ul li {
   position: relative;
   color: #4B5563;
 }

 .wysiwyg-content ul li::before {
   content: "•";
   color: #2A48C9;
   font-weight: bold;
   font-size: 24px;
   position: absolute;
   left: -16px;
   top: 50%;
   transform: translateY(-50%);
 }

 .wysiwyg-content ol {
   list-style: none;
   counter-reset: my-counter;
   padding-left: 20px;
 }

 .wysiwyg-content ol li {
   position: relative;
   counter-increment: my-counter;
   color: #4B5563;
 }

 .wysiwyg-content ol li::before {
   content: counter(my-counter);
   background-color: #2A48C9;
   color: white;
   font-size: 14px;
   font-weight: 700;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   left: -16px;
   top: 50%;
   transform: translateY(-50%);
 }


 /* Pagination */
 .pagination {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   margin-top: 20px;
   flex-wrap: wrap;
 }

 /* Normal page links */
 .page-link {
   width: 36px;
   height: 36px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
   background: #ffffff;
   color: #1F2937;
   font-weight: 600;
   text-decoration: none;
   transition: all 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
   font-family: 'Montserrat', sans-serif;
 }

 /* Active page */
 .page-link.active {
   background: #2A48C9;
   color: #ffffff;
   box-shadow: 0 8px 16px rgba(42, 72, 201, 0.3);
 }

 /* Hover effect */
 .page-link:hover {
   background: #2A48C9;
   color: #ffffff;
   box-shadow: 0 8px 16px rgba(42, 72, 201, 0.3);
 }

 /* Prev/Next buttons */
 .page-link.page-nav {
   width: auto;
   padding: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
 }

 /* Disabled Prev/Next */
 .page-link.page-nav.disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
   background: #ffffff;
   color: #9CA3AF;
 }

 /* Dots for skipped pages */
 .pagination span {
   color: #9CA3AF;
   width: 36px;
   height: 36px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #2A48C9;
   color: #ffffff;
   box-shadow: 0 8px 16px rgba(42, 72, 201, 0.3);
   border-radius: 12px;
 }


 /* Scroll Indicator */
 .scroll-mouse {
   width: 26px;
   height: 42px;
   border: 2px solid rgba(255, 255, 255, 0.6);
   border-radius: 14px;
   position: relative;
 }

 .scroll-dot {
   width: 4px;
   height: 8px;
   background: rgba(255, 255, 255, 0.8);
   border-radius: 4px;
   position: absolute;
   top: 8px;
   left: 50%;
   transform: translateX(-50%);
   animation: scrollDown 1.8s infinite;
 }

 @keyframes scrollDown {
   0% {
     opacity: 0;
     transform: translate(-50%, 0);
   }

   30% {
     opacity: 1;
   }

   100% {
     opacity: 0;
     transform: translate(-50%, 14px);
   }
 }



 /* Beneficiaries section */

 .beneficiaries-section {
   background: radial-gradient(circle at 10% 10%, #EEF0FF 0%, transparent 40%),
     radial-gradient(circle at 90% 90%, #FFF9E6 0%, transparent 40%);
 }

 .beneficiaries-section .card-icon-wrapper {
   transition: all 0.3s ease;
 }

 .beneficiaries-section .group:hover .card-icon-wrapper {
   transform: scale(1.05) rotate(5deg);
 }